Este documento describe las partes principales de un documento HTML, incluyendo la etiqueta, encabezado y cuerpo. Explica que las etiquetas HTML van entre signos menor que y mayor que y la mayoría son pares con etiquetas de inicio y cierre. Además, proporciona ejemplos básicos de etiquetas HTML para formato de texto, párrafos, listas, tablas, enlaces e imágenes.
2. LENGUAJE HTML 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: Lenguaje HTML 2
3. LENGUAJE HTML 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. Lenguaje HTML 3
4. LENGUAJE HTML Lenguaje HTML 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. 4
5. ESTRUCTURA DEL LENGUAJE HTML Lenguaje HTML <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> 5
6. CONSTRUCCIÓN DE UNA PÁGINA WEB EN HTML Lenguaje HTML <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> 6
7. FORMATO DE PÁRRAFOS Lenguaje HTML 7 <P>Este es un ejemplo de cómo se formatean los párrafos en lenguaje HTML</P> <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> <P>Líneas horizontales:</P> <HR><HR WIDTH=80%><HR SIZE=4><HR NOSHADE>
8. FORMATO DE PÁRRAFOS Lenguaje HTML 8 <P> Los parrafos pueden indentarse. <BLOCKQUOTE>Block quoteindenta un párrafo. Se deshace esta indentación con el fin de la TAG Block quote,</BLOCKQUOTE> como se ve en el ejemplo.</P> <PRE>La TAG Preformatted permite respetar la forma original en que se ha escrito el texto.</PRE>
9. FORMATO DE TEXTO Lenguaje HTML 9 <FONT SIZE="+1" COLOR="red" FACE="Arial"> Define tipo de letra, tamaño y color a tu gusto </FONT> <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> <P>En cualquier caso, también se pueden utilizar los tags <B>bold</B> (B) e <I>italic</I> (I).</P>
10. FORMATO DE TEXTO Lenguaje HTML 10 <P>Para escribir con una <TT>letra de paso constante (estilo teletipo)</TT> se emplea la TagTeleType</P> <P>Para que el texto <BLINK>parpadee</BLINK>se emplea la TAG Blink.</P> <P>Títulos: <H1>1</H1><H2>2</H2><H3>3</H3> <H4>4</H4><H5>5</H5><H6>6</H6></P>
11. FORMATO DE TEXTO Lenguaje HTML 11 <P>Alineados:</P> <P ALIGN="LEFT">Izquierda</P> <P ALIGN="RIGHT">Derecha</P> <P ALIGN="CENTER">Centrado</P> </P> 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>
12. LISTAS NO ORDENADAS Lenguaje HTML 12 <P>Las listas no ordenadas: <UL> <LI>Van precedidas por "bullets" <LI>Se entiende que no importa el orden <LI>Se utilizan con mucha frecuencia </UL>
13. LISTAS ORDENADAS Lenguaje HTML 13 Las listas ordenadas: <P>Las listas ordenadas: <OL> <LI>Van precedidas por números <LI>La numeración es automática <LI>Son también muy utilizadas </OL>
14. LISTAS DE DEFINICIONES Lenguaje HTML 14 <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>
22. LAYERS Lenguaje HTML 22 <LAYER NAME="uno" VISIBILITY="HIDE"> Esta es la capa uno </LAYER> <LAYER NAME="dos" VISIBILITY="SHOW"> Esta otra es la capa dos </LAYER>