Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML

578 views

Published on

Taller introductorio al lenguaje HTML

Published in: Education
  • Be the first to comment

  • Be the first to like this

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>

×