HTML Por: Antonio Pedron
Definición <ul><li>Viene de las siglas Hiper Text Markup Language. </li></ul><ul><li>Se usa para describir la estructura y...
Ejemplo
<html> <head> </head> <title> Titulo </title> <body> <div align=&quot;center&quot;><font face=&quot;comic sans ms&quot; si...
 
¿Como hacerlo? Para empezar un sitio en HTML es necesario usar la etiqueta <html> y para cerrarlo </html> Block de notas P...
Etiquetas mas comunes y basicas
HTML <ul><li>Es  necesario para que un navegador decodifique el contenido de un sitio web, se utiliza como <html> al inici...
HEAD <ul><li>Decreta la cabezera de un sitio web. </li></ul><ul><li>Ejem: </li></ul><ul><li><head> Cabezera </head> </li><...
TITLE <ul><li>Codigo que muestra el titulo deseado en la barra superior. </li></ul><ul><li>Ejem: </li></ul><ul><li><title>...
BODY <ul><li>Se podria decir que es la parte mas importante del codigo, ya que aqui es donde se escribe todo el contenido ...
<ul><li>Dentro del cuerpo (body) del sitio web podemos encontrar diferentes etiquetas que decretan: </li></ul><ul><li>-For...
FONT <ul><li>Decreta la fuente a usar en el contenido </li></ul><ul><li>Ejem: </li></ul><ul><li><font face=“comic sans ms”...
Modificadores de FONT <ul><li>face: se usa para indicar la fuente a usar, es necesario que la fuente este instalada en la ...
Lista de colores
MARQUEE <ul><li>Funcion de marquesina (texto que va de un lado a otro) </li></ul><ul><li>Ejem: </li></ul><ul><li><marquee>...
<ul><li>A las marquesinas se les pueden aplicar codigos de color de fondo y tamaño, tambien se les puede insertar imagenes...
LI <ul><li>Marca el inicio de una lista “viñetada”, tiene varios modificadores: </li></ul><ul><li>-disc (circulo relleno) ...
<ul><li>Puedes agregar las etiquetas que quieras de <li> siempre y cuando recuerdes que al terminar cada elemento de la li...
Ejemplo <ul><li><MENU> </li></ul><ul><li><li type=&quot;disc&quot;> Elemento de lista 1 </li> </li></ul><ul><li><li type=&...
Tablas <ul><li>Para armar una tabla hay muchos codigos, veremos la manera mas sencilla de hacerlo: </li></ul><ul><li><tabl...
Ejemplo <ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><th> Cabezera 1 </th> </li></ul><ul><li><th> Cabezera 2 <...
Upcoming SlideShare
Loading in …5
×

Html

1,290 views

Published on

Presentacion acerca de codigos HTML

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,290
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html

  1. 1. HTML Por: Antonio Pedron
  2. 2. Definición <ul><li>Viene de las siglas Hiper Text Markup Language. </li></ul><ul><li>Se usa para describir la estructura y contenido de un sitio web, se escribe entre corchetes angulares </li></ul><ul><li>Se pueden incluir atributos javascript o CSS </li></ul>
  3. 3. Ejemplo
  4. 4. <html> <head> </head> <title> Titulo </title> <body> <div align=&quot;center&quot;><font face=&quot;comic sans ms&quot; size=&quot;20&quot; color=&quot;blue&quot;> cuerpo del sitio </font></div> <marquee bgcolor=&quot;black&quot;> <font face=&quot;impact&quot; size=&quot;10&quot; color=&quot;yellow&quot;>marquesina</font></marquee> <MENU> <li type=&quot;disc&quot;> Elemento de lista 1 </li> <li type &quot;disc&quot;> Elemento de lista 2 </li> </MENU> <div align=&quot;center&quot;> <table> <tr> <th> Cabezera 1 </th> <th> Cabezera 2 </th> </tr> <tr> <td> Fila 2 </td> <td> Fila 2 </td> </tr> <tr> <td> Fila 3 </td> <td> Fila 3 </td> </tr> </table> </div> </body> </html>
  5. 6. ¿Como hacerlo? Para empezar un sitio en HTML es necesario usar la etiqueta <html> y para cerrarlo </html> Block de notas Programas especializados: <ul><li>Dreamweaver </li></ul><ul><li>iWeb </li></ul><ul><li>Etc... </li></ul>
  6. 7. Etiquetas mas comunes y basicas
  7. 8. HTML <ul><li>Es necesario para que un navegador decodifique el contenido de un sitio web, se utiliza como <html> al inicio y </html> al final del codigo, todos los demas codigos tienen que ir dentro de este para que asi sean reconocidos. </li></ul><ul><li>Ejem: </li></ul><ul><li><html> <body> muestra </body> </html> </li></ul>
  8. 9. HEAD <ul><li>Decreta la cabezera de un sitio web. </li></ul><ul><li>Ejem: </li></ul><ul><li><head> Cabezera </head> </li></ul>
  9. 10. TITLE <ul><li>Codigo que muestra el titulo deseado en la barra superior. </li></ul><ul><li>Ejem: </li></ul><ul><li><title> Titulo </title> </li></ul>
  10. 11. BODY <ul><li>Se podria decir que es la parte mas importante del codigo, ya que aqui es donde se escribe todo el contenido del sitio web </li></ul><ul><li>Ejem: </li></ul><ul><li><body> El cuerpo de mi sitio web </body> </li></ul>
  11. 12. <ul><li>Dentro del cuerpo (body) del sitio web podemos encontrar diferentes etiquetas que decretan: </li></ul><ul><li>-Formato </li></ul><ul><li>-Fuente </li></ul><ul><li>-Tamaño </li></ul><ul><li>-Color </li></ul><ul><li>-Marquesinas </li></ul><ul><li>-Etc... </li></ul>
  12. 13. FONT <ul><li>Decreta la fuente a usar en el contenido </li></ul><ul><li>Ejem: </li></ul><ul><li><font face=“comic sans ms”> mi texto </font> </li></ul>
  13. 14. Modificadores de FONT <ul><li>face: se usa para indicar la fuente a usar, es necesario que la fuente este instalada en la computadora que visualizara el sitio web para que se vea como deseamos </li></ul><ul><li>color: decreta el color de la fuente </li></ul><ul><li>size: nos idicara el tamaño de la fuente </li></ul>Todos estos atributos se escriben entre comillas
  14. 15. Lista de colores
  15. 16. MARQUEE <ul><li>Funcion de marquesina (texto que va de un lado a otro) </li></ul><ul><li>Ejem: </li></ul><ul><li><marquee> mi marquesina </marquee> </li></ul>
  16. 17. <ul><li>A las marquesinas se les pueden aplicar codigos de color de fondo y tamaño, tambien se les puede insertar imagenes y cambiar el color, fuente y aspecto del texto. </li></ul>bgcolor=“yellow” nos dara un color negro de fondo de la marquesina Ejem: <marquee bgcolor=“yellow”>mi marquesina</marquee>
  17. 18. LI <ul><li>Marca el inicio de una lista “viñetada”, tiene varios modificadores: </li></ul><ul><li>-disc (circulo relleno) </li></ul><ul><li>-circle (silueta del circulo) </li></ul><ul><li>-square (cuadrado) </li></ul><ul><li>Ejem: </li></ul><ul><li><li type=“disc”> Texto1 </li> </li></ul>
  18. 19. <ul><li>Puedes agregar las etiquetas que quieras de <li> siempre y cuando recuerdes que al terminar cada elemento de la lista tienes que cerrarlo con un </li> </li></ul><ul><li>Puedes aplicar formatos de texto </li></ul><ul><li>Si no agregas el comando tipe=“” quedara como lista en numeros romanos </li></ul><ul><li>Puedes agregar hipervinculos </li></ul><ul><li>Tienen que ir entre un <menu> para que se visualizen correctamente </li></ul>
  19. 20. Ejemplo <ul><li><MENU> </li></ul><ul><li><li type=&quot;disc&quot;> Elemento de lista 1 </li> </li></ul><ul><li><li type=&quot;disc&quot;> Elemento de lista 2 </li> </li></ul><ul><li></MENU> </li></ul>
  20. 21. Tablas <ul><li>Para armar una tabla hay muchos codigos, veremos la manera mas sencilla de hacerlo: </li></ul><ul><li><table> (decreta el inicio de la tabla) </li></ul><ul><li><tr> (marca una fila) </li></ul><ul><li><th> (cabezera de una fila) </li></ul><ul><li><td> (contenido de una columna </li></ul>
  21. 22. Ejemplo <ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><th> Cabezera 1 </th> </li></ul><ul><li><th> Cabezera 2 </th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> Fila 2 </td> </li></ul><ul><li><td> Fila 2 </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> Fila 3 </td> </li></ul><ul><li><td> Fila 3 </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>

×