LENGUAJE  HTML<br />Lenguaje HTML<br />1<br />Zenaida  Rodríguez<br />
LENGUAJE  HTML<br />Partes de un documento HTML Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>....
LENGUAJE  HTML<br />El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de índole informativo como ...
LENGUAJE  HTML<br />Lenguaje HTML<br />Todas las TAGs de HTML van encerradas entre los caracteres menor que ( <) y mayor q...
ESTRUCTURA DEL LENGUAJE  HTML<br />Lenguaje HTML<br /><html> <head>    Etiquetas y contenidos del encabezado    Datos que ...
CONSTRUCCIÓN DE UNA PÁGINA WEB EN HTML<br />Lenguaje HTML<br /><html> <head>    <title>Cocina Para Todos</title> </head> <...
FORMATO DE PÁRRAFOS<br />Lenguaje HTML<br />7<br />	<P>Este es un ejemplo de cómo se  formatean los párrafos en lenguaje H...
FORMATO DE PÁRRAFOS<br />Lenguaje HTML<br />8<br />	 <P> Los parrafos pueden  indentarse.  <BLOCKQUOTE>Block quoteindenta ...
FORMATO DE TEXTO<br />Lenguaje HTML<br />9<br /> <FONT SIZE="+1" COLOR="red" FACE="Arial">  Define tipo de letra, tamaño y...
FORMATO DE TEXTO<br />Lenguaje HTML<br />10<br /><P>Para escribir con una <TT>letra de paso constante (estilo teletipo)</T...
FORMATO DE TEXTO<br />Lenguaje HTML<br />11<br /><P>Alineados:</P>  <br /><P ALIGN="LEFT">Izquierda</P>  <br /><P ALIGN="R...
LISTAS NO ORDENADAS<br />Lenguaje HTML<br />12<br /><P>Las listas no ordenadas: <UL> <br /><LI>Van precedidas por "bullets...
LISTAS ORDENADAS<br />Lenguaje HTML<br />13<br />Las listas ordenadas: <P>Las listas ordenadas: <OL> <br /><LI>Van precedi...
LISTAS DE DEFINICIONES<br />Lenguaje HTML<br />14<br /><P>Las listas de definiciones: <DL> <DT>Primer término<DD>Definició...
TABLAS<br />Lenguaje HTML<br />15<br /><TABLE BORDER=1> <br /><TR><TD>celda(1,1)</TD><TD>celda (1,2)</TD></TR> <br /><TR><...
ANCLAS<br />Lenguaje HTML<br />16<br /><p><a name "ancla"><br /><p>este link envía al ancla<p><a href="#ancla">al ancla</a...
LINKS<br />Lenguaje HTML<br />17<br /><P>Este link envía al Web de la Universidad<P><br /><A HREF="http://193.145.249.23">...
INSERCIÓN DE IMÁGENES<br />Lenguaje HTML<br />18<br /><IMG SRC="todo.gif"><br /><P><AHREF="#ancla"><IMG SRC="todo.gif"></A...
INSERCIÓN DE IMÁGENES SENSIBLES<br />Lenguaje HTML<br />19<br /><P><br /><IMG USEMAP="#mapadirec" SRC="mapa.gif"><br /><MA...
FRAMES<br />Lenguaje HTML<br />20<br /><FRAMESET ROWS="50%,50%,*"><FRAME SCR="ejemplo.htm"><FRAME SCR="ejemplo.htm"></FRAM...
FORMULARIOS<br />Lenguaje HTML<br />21<br /><FORM><br />Nombre: <INPUT NAME="nombre"><br /></FORM><br /><FORM><br />Nombre...
LAYERS<br />Lenguaje HTML<br />22<br /><LAYER NAME="uno" VISIBILITY="HIDE"> Esta es la capa uno </LAYER><br /><LAYER NAME=...
Lenguaje HTML<br />23<br />
Lenguaje HTML<br />24<br />
Próxima SlideShare
Cargando en…5
×

LENGUAJE HTML

1.523 visualizaciones

Publicado el

Publicado en: Educación, Tecnología
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
1.523
En SlideShare
0
De insertados
0
Número de insertados
12
Acciones
Compartido
0
Descargas
34
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

LENGUAJE HTML

  1. 1. LENGUAJE HTML<br />Lenguaje HTML<br />1<br />Zenaida Rodríguez<br />
  2. 2. LENGUAJE HTML<br />Partes de un documento HTML Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales: <br />Lenguaje HTML<br />2<br />
  3. 3. LENGUAJE HTML<br />El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de índole informativo como por ejemplo el titulo de nuestra página. El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto. <br />Lenguaje HTML<br />3<br />
  4. 4. LENGUAJE HTML<br />Lenguaje HTML<br />Todas las TAGs de HTML van encerradas entre los caracteres menor que ( <) y mayor que ( >), como por ejemplo <HTML>. Además, la mayor parte de ellas son dobles, en el sentido de que hay una TAG de comienzo y otra de final; entre ambas está el texto afectado por dichas TAGs. La marca de final es como la de comienzo, pero incluyendo una barrra (/). Por ejemplo, la marca de final de <HTML> es </HTML>. De la misma forma, la TAG de final de <P> es </P>, y así con otras TAGs. <br />4<br />
  5. 5. ESTRUCTURA DEL LENGUAJE HTML<br />Lenguaje HTML<br /><html> <head>    Etiquetas y contenidos del encabezado    Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo, palabras clave,... </head> <body>    Etiquetas y contenidos del cuerpo    Parte del documento que será mostrada por el navegador: Texto e imágenes </body> </html><br />5<br />
  6. 6. CONSTRUCCIÓN DE UNA PÁGINA WEB EN HTML<br />Lenguaje HTML<br /><html> <head>    <title>Cocina Para Todos</title> </head> <body>    <p><b>Bienvenido,</b></p>    <p>Estás en la página <b>Comida para Todos</b>.</p>    <p>Aquí aprenderás recetas fáciles y deliciosas.</p> </body> </html> <br />6<br />
  7. 7. FORMATO DE PÁRRAFOS<br />Lenguaje HTML<br />7<br /> <P>Este es un ejemplo de cómo se  formatean los párrafos en lenguaje HTML</P> <br /><P>Los párrafos se separan con un espaciado  superior al correspondiente  a una nueva línea. <BR> Para tener un espaciado más compacto  puede utilizarse el Line Break,  como en este ejemplo.</P><br /><P>Líneas horizontales:</P>  <HR><HR WIDTH=80%><HR SIZE=4><HR NOSHADE><br />
  8. 8. FORMATO DE PÁRRAFOS<br />Lenguaje HTML<br />8<br /> <P> Los parrafos pueden indentarse.  <BLOCKQUOTE>Block quoteindenta un párrafo. Se   <br />deshace esta indentación con el fin de la TAG Block quote,</BLOCKQUOTE>  como se ve en el ejemplo.</P><br /><PRE>La TAG Preformatted permite  respetar la forma  original  en que se ha   escrito el texto.</PRE><br />
  9. 9. FORMATO DE TEXTO<br />Lenguaje HTML<br />9<br /> <FONT SIZE="+1" COLOR="red" FACE="Arial">  Define tipo de letra, tamaño y color a tu gusto  </FONT><br /><P>Una palabra o un fragmento de texto se  puede resaltar con el tag STRONG  o con el tag EM, que en la mayor  parte de los browsers se corresponden  con <STRONG>bold</STRONG> e  <EM>italic</EM></P><br /><P>En cualquier caso, también se  pueden utilizar los tags  <B>bold</B> (B) e <I>italic</I> (I).</P><br />
  10. 10. FORMATO DE TEXTO<br />Lenguaje HTML<br />10<br /><P>Para escribir con una <TT>letra de paso constante (estilo teletipo)</TT> se emplea la TagTeleType</P><br /><P>Para que el texto <BLINK>parpadee</BLINK>se emplea la TAG Blink.</P><br /><P>Títulos: <H1>1</H1><H2>2</H2><H3>3</H3>  <H4>4</H4><H5>5</H5><H6>6</H6></P><br />
  11. 11. FORMATO DE TEXTO<br />Lenguaje HTML<br />11<br /><P>Alineados:</P>  <br /><P ALIGN="LEFT">Izquierda</P>  <br /><P ALIGN="RIGHT">Derecha</P>  <br /><P ALIGN="CENTER">Centrado</P>  <br /></P><br />Otros efectos:   <P><U>subrayado</U>   <P><STRIKE>tachado</STRIKE>   <P><BIG>letra más grande que el estándar</BIG>   <P><SMALL>letra más pequeña que el estándar</SMALL>   <P>Texto tipo<SUB>subíndice</SUB>   <P>Texto tipo<SUP>superíndice</SUP><br />
  12. 12. LISTAS NO ORDENADAS<br />Lenguaje HTML<br />12<br /><P>Las listas no ordenadas: <UL> <br /><LI>Van precedidas por "bullets" <br /><LI>Se entiende que no importa el orden <br /><LI>Se utilizan con mucha frecuencia </UL><br />
  13. 13. LISTAS ORDENADAS<br />Lenguaje HTML<br />13<br />Las listas ordenadas: <P>Las listas ordenadas: <OL> <br /><LI>Van precedidas por números <br /><LI>La numeración es automática <br /><LI>Son también muy utilizadas<br /></OL><br />
  14. 14. LISTAS DE DEFINICIONES<br />Lenguaje HTML<br />14<br /><P>Las listas de definiciones: <DL> <DT>Primer término<DD>Definición del 1er término<DT>Segundo término<DD>Definición del 2º término </DL><br />
  15. 15. TABLAS<br />Lenguaje HTML<br />15<br /><TABLE BORDER=1> <br /><TR><TD>celda(1,1)</TD><TD>celda (1,2)</TD></TR> <br /><TR><TD>celda(2,1)</TD><br /><TD>celda (2,2)</TD><br /></TR> </TABLE> <CENTER><TABLE BORDER=1> <TR><TD>celda (1,1)</TD><TD>celda (1,2)</TD></TR> <TR><TD>celda (2,1)</TD><TD>celda (2,2)</TD></TR> </TABLE></CENTER><br />
  16. 16. ANCLAS<br />Lenguaje HTML<br />16<br /><p><a name "ancla"><br /><p>este link envía al ancla<p><a href="#ancla">al ancla</a><br />
  17. 17. LINKS<br />Lenguaje HTML<br />17<br /><P>Este link envía al Web de la Universidad<P><br /><A HREF="http://193.145.249.23">Al Web</A><br />
  18. 18. INSERCIÓN DE IMÁGENES<br />Lenguaje HTML<br />18<br /><IMG SRC="todo.gif"><br /><P><AHREF="#ancla"><IMG SRC="todo.gif"></A><br />
  19. 19. INSERCIÓN DE IMÁGENES SENSIBLES<br />Lenguaje HTML<br />19<br /><P><br /><IMG USEMAP="#mapadirec" SRC="mapa.gif"><br /><MAP NAME="mapadirec"><br /><AREA COORDS=0,0,47,46 HREF="http://193.145.249.23"><br /><AREA COORDS=47,0,96,46 HREF="#ancla"><br /></MAP><br />
  20. 20. FRAMES<br />Lenguaje HTML<br />20<br /><FRAMESET ROWS="50%,50%,*"><FRAME SCR="ejemplo.htm"><FRAME SCR="ejemplo.htm"></FRAMESET><br /><FRAMESET COLS="40%,60%"><FRAME SCR="ejemplo.htm"><FRAME SCR="ejemplo.htm"></FRAMESET><br />
  21. 21. FORMULARIOS<br />Lenguaje HTML<br />21<br /><FORM><br />Nombre: <INPUT NAME="nombre"><br /></FORM><br /><FORM><br />Nombre: <INPUT NAME="nombre"><P><br /><INPUT TYPE="radio" NAME="boton" CHECKED><br />boton radio 1<P><br /><INPUT TYPE="radio" NAME="boton" CHECKED><br />boton radio 2<P><br /><INPUT TYPE="checkbox" NAME="check"><br />checkbox<br /></FORM><br />
  22. 22. LAYERS<br />Lenguaje HTML<br />22<br /><LAYER NAME="uno" VISIBILITY="HIDE"> Esta es la capa uno </LAYER><br /><LAYER NAME="dos" VISIBILITY="SHOW"> Esta otra es la capa dos </LAYER><br />
  23. 23. Lenguaje HTML<br />23<br />
  24. 24. Lenguaje HTML<br />24<br />

×