TALLER DE HTML
¿ QUE ES HTML? <ul><li>Las siglas HTML se refieren a: </li></ul><ul><ul><li>HyperText Markup Language </li></ul></ul><ul><...
UNA P Á GINA B Á SICA <ul><li>El lenguaje t r abaja a base de etiquetas. </li></ul><ul><li>La informaci ó n que aparece de...
Continuaci ón: <ul><li>Todo el documento debe estar entre las etiquetas <HTML> Y </HTML>. </li></ul><ul><li>El documento e...
Continuaci ón: <ul><li>La etiqueta del encabezamiento se trabajar á  de la siguiente manera: </li></ul><ul><ul><li><HEAD>T...
Continuaci ón: <ul><li>La estructura b á sica de las partes de una p á gina Web son: </li></ul><ul><ul><li><HTML> </li></u...
FORMATO DEL TEXTO <ul><li>Podemos poner color al fondo utilizando la siguiente instrucci ó n: </li></ul><ul><ul><li><BODY ...
Continuaci ón: <ul><li>Colores </li></ul><ul><ul><li>xx  es un número indicativo de la cantidad de color rojo. </li></ul><...
Continuaci ón: <ul><li>Los colores primarios son: </li></ul><ul><ul><li>#FF0000 rojo </li></ul></ul><ul><ul><li>#00FF00 ve...
Continuaci ón: <ul><li>Otras instrucciones: </li></ul><ul><ul><li>Para definir p á rrafos:  <P> Texto </P> </li></ul></ul>...
Continuaci ón: <ul><li>Tama ño de letra: </li></ul><ul><ul><li><H1> Texto </H1> </li></ul></ul><ul><ul><li><H2> Texto </H2...
Ejemplo: Tabla 1 Tabla 2 < H1 >  El mayor  < /H1 > El mayor < H4 >  Tamaño 4  < /H4 > Tamaño 4 < H2 >  Tamaño 2  < /H2 > T...
Continuaci ón: <ul><li>Caracteres especiales </li></ul><ul><ul><li>&aacute; á </li></ul></ul><ul><ul><li>&eacute; é </li><...
Continuaci ón: <ul><li>Movimiento  </li></ul><ul><ul><li>Puede dar movimiento al texto, gráficos y otros. </li></ul></ul><...
Continuaci ón: <ul><ul><ul><li><marquee scrollamount=n></marquee> </li></ul></ul></ul><ul><ul><ul><ul><li>scrollamount=“1”...
LISTAS <ul><li>Listas desordenadas ( unordered list )  </li></ul><ul><ul><li>Útiles para crear una lista de asuntos o cosa...
Continuaci ón: <ul><li>Listas ordenadas ( ordered lists ) </li></ul><ul><li>Utilizadas para mostrar información en un orde...
Continuaci ón: <ul><li>Listas de definición  </li></ul><ul><li>Apropiadas para glosarios, definiciones o términos </li></u...
ENLACES <ul><li>Para trabajar enlaces: </li></ul><ul><ul><li>Es una forma de hacer que desde una p á gina podamos acceder ...
Continuaci ón: <ul><ul><li>Enlace con una direcci ó n de Internet: </li></ul></ul><ul><ul><ul><li><A HREF= www.endi.com > ...
TABLAS <ul><li>Elementos de una tabla </li></ul><TR></TR> Fila de una tabla. <TD></TD> Celda de data. <TH></TH> Usado para...
Continuaci ón: <ul><li>Tabla básica: </li></ul><ul><ul><li><TABLE>  Habre la instrucción de tabla. </li></ul></ul><ul><ul>...
Próxima SlideShare
Cargando en…5
×

Html

1.304 visualizaciones

Publicado el

Taller de introducción al lenguaje HTML

Publicado en: Tecnología, Diseño
1 comentario
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
1.304
En SlideShare
0
De insertados
0
Número de insertados
5
Acciones
Compartido
0
Descargas
0
Comentarios
1
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Html

  1. 1. TALLER DE HTML
  2. 2. ¿ QUE ES HTML? <ul><li>Las siglas HTML se refieren a: </li></ul><ul><ul><li>HyperText Markup Language </li></ul></ul><ul><li>Es uno de los lenguajes m á s utilizados en el Web Wide Web. </li></ul><ul><li>Las p á ginas de Internet est á n escritas en este lenguaje. </li></ul><ul><li>Le brinda al autor la oportunidad de integrar texto, fotos, sonidos y enlaces en un solo lugar. </li></ul>
  3. 3. UNA P Á GINA B Á SICA <ul><li>El lenguaje t r abaja a base de etiquetas. </li></ul><ul><li>La informaci ó n que aparece dentro de estas estar á influenciada por las mismas. </li></ul><ul><ul><li><xxx> Inicio de una etiqueta. </li></ul></ul><ul><ul><li></xxx> Cierre de una etiqueta. </li></ul></ul>
  4. 4. Continuaci ón: <ul><li>Todo el documento debe estar entre las etiquetas <HTML> Y </HTML>. </li></ul><ul><li>El documento est á dividido en dos partes principales: </li></ul><ul><ul><li>El encabezamiento </li></ul></ul><ul><ul><ul><li>En este hay informaci ó n que no se ve en la pantalla principal. </li></ul></ul></ul><ul><ul><ul><li>Este debe ser corto y descriptivo, ya que ser á lo que ver á n las personas cuando a ñ adan la p á gina a sus favoritos. </li></ul></ul></ul>
  5. 5. Continuaci ón: <ul><li>La etiqueta del encabezamiento se trabajar á de la siguiente manera: </li></ul><ul><ul><li><HEAD>Texto</HEAD> </li></ul></ul><ul><li>La etiqueta del cuerpo ser á : </li></ul><ul><ul><li><BODY>Texto</BODY> </li></ul></ul><ul><li>La etiqueta del t í tulo ser á : </li></ul><ul><ul><li><TITLE>Texto</TITLE> </li></ul></ul>
  6. 6. Continuaci ón: <ul><li>La estructura b á sica de las partes de una p á gina Web son: </li></ul><ul><ul><li><HTML> </li></ul></ul><ul><ul><li><HEAD><TITLE> t í tulo </TITLE></HEAD> </li></ul></ul><ul><ul><li><BODY>E s la informaci ón que mostrará la página al usuario </BODY> </li></ul></ul><ul><ul><li></HTML> </li></ul></ul>
  7. 7. FORMATO DEL TEXTO <ul><li>Podemos poner color al fondo utilizando la siguiente instrucci ó n: </li></ul><ul><ul><li><BODY BGCOLOR=“xxyyzz”> </li></ul></ul><ul><ul><ul><li>Indica que lleva tres pares de valores que corresponden a R ( rojo ), G ( verde ), B ( azul ) </li></ul></ul></ul><ul><ul><ul><li>Estos pueden tomar valores desde 00 a FF, si se combinan se obtendrán distintos colores. </li></ul></ul></ul><ul><ul><ul><ul><li>Ej. “#FAB894” anaranjado </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>“ FA” rojo, “B8” verde y “94” azul. </li></ul></ul></ul></ul></ul><ul><ul><ul><li>Para obtener BLANCO ser í a “#FFFFFF”, el Negro “#000000” Y ROJO “#FF0000”. </li></ul></ul></ul>
  8. 8. Continuaci ón: <ul><li>Colores </li></ul><ul><ul><li>xx es un número indicativo de la cantidad de color rojo. </li></ul></ul><ul><ul><li>YY es un número indicativo de la cantidad de color verde. </li></ul></ul><ul><ul><li>ZZ es un número indicativo de la cantidad de color azul. </li></ul></ul><ul><li>Los números están representados en numeración hexadecimal , esta numeración se com p one de 16 dígitos: </li></ul><ul><ul><li>0 1 2 3 4 5 6 7 8 9 A B C D E F </li></ul></ul><ul><ul><li>Donde el número menor es 00 y el mayor es FF. </li></ul></ul><ul><ul><ul><li>Ejemplo: el número rojo es el #FF0000, debido a que tiene el máximo de rojo y cero de los otros dos colores. </li></ul></ul></ul>
  9. 9. Continuaci ón: <ul><li>Los colores primarios son: </li></ul><ul><ul><li>#FF0000 rojo </li></ul></ul><ul><ul><li>#00FF00 verde </li></ul></ul><ul><ul><li>#0000FF azul </li></ul></ul><ul><li>Otros colores son: </li></ul><ul><ul><li>#FFFFFF blanco </li></ul></ul><ul><ul><li>#000000 negro </li></ul></ul><ul><ul><li>#FFFF00 amarillo </li></ul></ul>
  10. 10. Continuaci ón: <ul><li>Otras instrucciones: </li></ul><ul><ul><li>Para definir p á rrafos: <P> Texto </P> </li></ul></ul><ul><ul><li>L ínea en blanco: <BR> Texto </BR> </li></ul></ul><ul><ul><li>Centrar texto: <CENTER> Texto < /CENTER> </li></ul></ul><ul><ul><li>Línea horizontal: <HR> Texto < /HR> </li></ul></ul><ul><li>Para el color del texto utiliza el comando: </li></ul><ul><ul><li><FONT COLOR=“#xxyyzz”> Texto < /FONT> </li></ul></ul><ul><ul><ul><li>Debemos recordar que estas instrucciones hay que desactivarlas. </li></ul></ul></ul>
  11. 11. Continuaci ón: <ul><li>Tama ño de letra: </li></ul><ul><ul><li><H1> Texto </H1> </li></ul></ul><ul><ul><li><H2> Texto </H2> </li></ul></ul><ul><ul><li><H3> Texto </H3> </li></ul></ul><ul><ul><li><H4> Texto </H4> </li></ul></ul><ul><ul><li><H5> Texto </H5> </li></ul></ul><ul><ul><li><H6> Texto </H6> </li></ul></ul><ul><li>Aspecto de letra: </li></ul><ul><ul><li><b> Texto </b> negrilla </li></ul></ul><ul><ul><li><strong> Texto </strong> </li></ul></ul><ul><ul><li><strike> Texto </strike> </li></ul></ul><ul><ul><li><i> Texto </i> cursiva </li></ul></ul><ul><ul><li><sup> Texto </sup>super í ndice </li></ul></ul><ul><ul><li><sub> Texto </sub>sub í ndice </li></ul></ul>
  12. 12. Ejemplo: Tabla 1 Tabla 2 < H1 > El mayor < /H1 > El mayor < H4 > Tamaño 4 < /H4 > Tamaño 4 < H2 > Tamaño 2 < /H2 > Tamaño 2 < H5 > Tamaño 5 < /H5 > Tamaño 5 < H3 > Tamaño 3 < /H3 > Tamaño 3 < H6 > Tamaño 6 < /H6 > Tamaño 6 < b > Negrita < /b > < strong > Negrita < /strong > Negrita Negrita < i > Cursiva < /i > < em > Cursiva < /em > Cursiva Cursiva < strike > Tachada < /strike > Tachada < sup > Superíndice < /sup > Normal Superíndice < kbd > Máquina < /kbd > Máquina < sub > subíndice < /sub > Normal subíndice
  13. 13. Continuaci ón: <ul><li>Caracteres especiales </li></ul><ul><ul><li>&aacute; á </li></ul></ul><ul><ul><li>&eacute; é </li></ul></ul><ul><ul><li>&iacute; í </li></ul></ul><ul><ul><li>&oacute; ó </li></ul></ul><ul><ul><li>&uacute; ú </li></ul></ul><ul><ul><li>&Aacute; Á </li></ul></ul><ul><ul><li>&Eacute; É </li></ul></ul><ul><ul><li>&Iacute; ĺ </li></ul></ul><ul><ul><li>&Oacute; Ó </li></ul></ul><ul><ul><li>&Uacute; Ú </li></ul></ul><ul><li>Otros códigos </li></ul><ul><ul><li>&ntilde; ñ </li></ul></ul><ul><ul><li>&Ntilde; Ñ </li></ul></ul><ul><ul><li>&uuml; ü </li></ul></ul><ul><ul><li>&Uumi; Ü </li></ul></ul><ul><ul><li>¿ ¿ </li></ul></ul><ul><ul><li>¡ ¡ </li></ul></ul>
  14. 14. Continuaci ón: <ul><li>Movimiento </li></ul><ul><ul><li>Puede dar movimiento al texto, gráficos y otros. </li></ul></ul><ul><ul><li>La instrucción a usar es la siguiente: </li></ul></ul><ul><ul><ul><li><marquee></marquee> (instucción básica) </li></ul></ul></ul><ul><ul><ul><li><marquee scrolldelay=n></marquee> </li></ul></ul></ul><ul><ul><ul><ul><li>Establece el númeo de milis e gundos entre cada “scroll” </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Scrolldelay=“200” </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Scrolldelay=“100” </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Scrolldelay=“5” </li></ul></ul></ul></ul></ul>
  15. 15. Continuaci ón: <ul><ul><ul><li><marquee scrollamount=n></marquee> </li></ul></ul></ul><ul><ul><ul><ul><li>scrollamount=“1” </li></ul></ul></ul></ul><ul><ul><ul><ul><li>scrollamount=“5” </li></ul></ul></ul></ul><ul><ul><ul><ul><li>scrollamount=“10” </li></ul></ul></ul></ul><ul><ul><ul><ul><li>scrollamount=“50” </li></ul></ul></ul></ul><ul><ul><ul><ul><li>scrollamount=“100” </li></ul></ul></ul></ul><ul><ul><ul><li><marqueeloop=n></marquee> </li></ul></ul></ul><ul><ul><ul><li><blink><marquee><</marquee></blink> </li></ul></ul></ul>
  16. 16. LISTAS <ul><li>Listas desordenadas ( unordered list ) </li></ul><ul><ul><li>Útiles para crear una lista de asuntos o cosas que no tienen un orden. </li></ul></ul><ul><ul><ul><li>Instrucciones a utilizar: </li></ul></ul></ul><ul><ul><ul><ul><li><UL> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><LI> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><LI> </li></ul></ul></ul></ul><ul><ul><ul><ul><li></UL> </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li><LI> Esta instrucción se repite tantas veces como sea necesario, hasta terminar la lista. </li></ul></ul></ul></ul></ul>
  17. 17. Continuaci ón: <ul><li>Listas ordenadas ( ordered lists ) </li></ul><ul><li>Utilizadas para mostrar información en un orden. El resultado aparecerá automáticamente enumerado. </li></ul><ul><ul><li>Instrucciones a utilizar: </li></ul></ul><ul><ul><ul><li><OL> </li></ul></ul></ul><ul><ul><ul><li><LI> </li></ul></ul></ul><ul><ul><ul><li><LI> </li></ul></ul></ul><ul><ul><ul><li></OL> </li></ul></ul></ul>
  18. 18. Continuaci ón: <ul><li>Listas de definición </li></ul><ul><li>Apropiadas para glosarios, definiciones o términos </li></ul><ul><ul><li>Cada renglón consiste de dos pates: </li></ul></ul><ul><ul><ul><li>Término se ha de definir. </li></ul></ul></ul><ul><ul><ul><ul><li><DT> (definition term) </li></ul></ul></ul></ul><ul><ul><ul><li>Definición del término. </li></ul></ul></ul><ul><ul><ul><ul><li><DD> (definition definition) </li></ul></ul></ul></ul><ul><li>Instrucción a utilizar: </li></ul><ul><ul><li><DL> </li></ul></ul><ul><ul><li><DT> </li></ul></ul><ul><ul><li><DD> </li></ul></ul><ul><ul><li><DT> </li></ul></ul><ul><ul><li><DD> </li></ul></ul><ul><ul><li></DL> </li></ul></ul><ul><ul><ul><li>*<DT> Y <DL> Se repetirán tantas veces como sea necesario. </li></ul></ul></ul>
  19. 19. ENLACES <ul><li>Para trabajar enlaces: </li></ul><ul><ul><li>Es una forma de hacer que desde una p á gina podamos acceder a otra p á gina. </li></ul></ul><ul><ul><ul><li>Enlaces con otras p á ginas: </li></ul></ul></ul><ul><ul><ul><ul><li><A HREF=“ejercicio2.html”>Pulse aquí para ir a ejercicio1</A> </li></ul></ul></ul></ul>
  20. 20. Continuaci ón: <ul><ul><li>Enlace con una direcci ó n de Internet: </li></ul></ul><ul><ul><ul><li><A HREF= www.endi.com > Peri ódico El Nuevo Día </A> </li></ul></ul></ul><ul><ul><li>Enlace con una direcci ón de correo electr ó nico: </li></ul></ul><ul><ul><ul><li><A HREF=MAILTO:“ [email_address] ”> Envía un mensaje a la conferenciante</A> </li></ul></ul></ul><ul><ul><ul><ul><li>Puede utilizar una imagen, gr á fico o foto como enlace. </li></ul></ul></ul></ul><ul><ul><li>Enlace utilizando una imagen: </li></ul></ul><ul><ul><ul><li><A HREF=“ejercicio3.html”><IMG SRC=“nombre del gráfico y extensi ó n”></A> </li></ul></ul></ul>
  21. 21. TABLAS <ul><li>Elementos de una tabla </li></ul><TR></TR> Fila de una tabla. <TD></TD> Celda de data. <TH></TH> Usado para los títulos de las columnas. ( Básicamente hace la misma función de fila.)
  22. 22. Continuaci ón: <ul><li>Tabla básica: </li></ul><ul><ul><li><TABLE> Habre la instrucción de tabla. </li></ul></ul><ul><ul><li><TR> Comenzar una fila en la tabla. </li></ul></ul><ul><ul><li><TD> Habre una celda de data. </li></ul></ul><ul><ul><li> ( aquí puede entrar su text o , gráfico, foto, enlace, etc.) </li></ul></ul><ul><ul><li></TD> Cierra la celda de data. </li></ul></ul><ul><ul><li></TR> Cierra la fila. </li></ul></ul><ul><ul><li></TABLE> Cierra la tabla. </li></ul></ul>

×