LENGUAJE HTML

Lenguaje HTML 1 Zenaida Rodríguez

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

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

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

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

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

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>

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>

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>

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>

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>

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>

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>

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>

TABLAS Lenguaje HTML 15 <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><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>

ANCLAS Lenguaje HTML 16 <p><a name "ancla"> <p>este link envía al ancla<p><a href="#ancla">al ancla</a>

LINKS Lenguaje HTML 17 <P>Este link envía al Web de la Universidad<P> <A HREF="http://193.145.249.23">Al Web</A>

INSERCIÓN DE IMÁGENES Lenguaje HTML 18 <IMG SRC="todo.gif"> <P><AHREF="#ancla"><IMG SRC="todo.gif"></A>

INSERCIÓN DE IMÁGENES SENSIBLES Lenguaje HTML 19 <P> <IMG USEMAP="#mapadirec" SRC="mapa.gif"> <MAP NAME="mapadirec"> <AREA COORDS=0,0,47,46 HREF="http://193.145.249.23"> <AREA COORDS=47,0,96,46 HREF="#ancla"> </MAP>

FRAMES Lenguaje HTML 20 <FRAMESET ROWS="50%,50%,*"><FRAME SCR="ejemplo.htm"><FRAME SCR="ejemplo.htm"></FRAMESET> <FRAMESET COLS="40%,60%"><FRAME SCR="ejemplo.htm"><FRAME SCR="ejemplo.htm"></FRAMESET>

FORMULARIOS Lenguaje HTML 21 <FORM> Nombre: <INPUT NAME="nombre"> </FORM> <FORM> Nombre: <INPUT NAME="nombre"><P> <INPUT TYPE="radio" NAME="boton" CHECKED> boton radio 1<P> <INPUT TYPE="radio" NAME="boton" CHECKED> boton radio 2<P> <INPUT TYPE="checkbox" NAME="check"> checkbox </FORM>

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>

LENGUAJE HTML

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a LENGUAJE HTML

Similar a LENGUAJE HTML (20)

Último

Último (20)

LENGUAJE HTML