Vous êtes sur la page 1sur 10

HTML................................................................................................................................1 ETIQUETAS PRINCIPALES...........................................................................................1 ETIQUETAS DE TTULOS, PRRAFOS Y SEPARACIONES....................................3 FORMATO DE TEXTO...................................................................................................5 LISTAS..............................................................................................................................6 ENLACES E IMGENES................................................................................................7 TABLAS............................................................................................................................

HTML
Las pginas web son documentos de texto, escritos con un lenguaje especial llamado HTML (Hypertext Markup Language). En este lenguaje, se utilizan etiquetas para codificar las distintas partes de la pgina, dar formato al texto, crear tablas, insertar imgenes o enlaces Las etiquetas empiezan con el signo <, y acaban con >. Entre ambos signos se pone el nombre de la etiqueta (que identifica su funcin), as como atributos, que pueden modificar de algn modo su funcin. Las etiquetas se abren y se cierran. Al abrir se pone el nombre de la etiqueta (por ejemplo <HTML>), mientras que al cerrar se aade el signo / antes del nombre (</HTML>). Todo el contenido que se encuentra entre la apertura y cierre se ven afectados por la etiqueta. Las etiquetas se pueden escribir en maysculas o en minsculas, pero en el manual usaremos maysculas para diferenciarlas ms rpidamente. Aunque existen muchas etiquetas, aqu vamos a explicar algunas de las ms importantes.

ETIQUETAS PRINCIPALES
Existen 3 etiquetas principales, que separan las distintas partes del documento: <HTML>: identifica el tipo de archivo. Debe ser lo primero que aparece en el documento, y su etiqueta de cierre lo ltimo. <HEAD>: identifica la cabecera del documento. Va justo despus de la etiqueta anterior. En esta parte se pone informacin sobre la pgina, que no aparecer en el navegador, como puede ser el ttulo, el autor, una pequea descripcin o las palabras que la identifican (para que los navegadores como google la encuentren mejor). La parte ms importante de la cabecera es el ttulo, que usa la etiqueta <TITLE>. El ttulo aparecer en la barra de ttulo del navegador. <BODY>: identifica el cuerpo del documento. Va justo debajo de la cabecera. En esta parte se escribe el contenido que queremos que aparezca en el navegador. La etiqueta de cierre (</BODY>) aparece justo antes que el cierre de </HTML>. Este sera un ejemplo de un documento HTML, y cmo se vera en el navegador:

Los atributos, como se ha dicho antes, modifican la funcin de las etiquetas. Se escriben detrs del nombre de la etiqueta, y antes del signo >. En la etiqueta <BODY> se pueden utilizar varios atributos, como son: -bgcolor: cambia el color de fondo de la pgina web. En todos los atributos, el color se puede escribir con el nombre en ingls (soporta los siguientes colores: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow), o usando el cdigo RGB con el smbolo # delante (por ejemplo: Negro: #000000, Rojo: #FF0000, Amarillo: #FFFF00, Blanco: #FFFFFF, Verde: #00FF00, Prpura: #FF00FF, Azul: #0000FF, Celeste: #00FFFF). NOTA: Cualquier color SIEMPRE se configura as (letras, bordes, relleno) -text: cambia el color del texto de la pgina web. -background=nombredelaimagen.ext: puede poner una imagen de fondo en la pgina web. Hay que poner el nombre y la extensin. Aqu hay un ejemplo en el que se ha cambiado el fondo a verde (usando el nombre) y el texto a blanco (usando el cdigo RGB).

Dentro de la cabecera se puede instroducir informacin fuera del contenido en lo que se denomina meta datos. Esta informacin ayuda despus a los buscadores a saber ms sobre la pgina. La etiqueta que se utiliza es META y tiene 3 atributos posibles:

-NAME: nos dice el tipo de informacin que nos da la etiqueta Por ejemplo author, keyword (palabras que describen el contenido de la pgina), description (para una descripcin de la pgina), generator (para el programa con el que hacemos la pgna). -HTTP-EQUIV: para informacin de HTTP. Suele utilizarseel valor refresh para decir cada cuanto se tiene que actualizar la pgina, o redirigir automticamente a otra web. -CONTENT: informacin que damos y que complementa a los otros 2 atributos. Generalmente se ponen varias etiquetas META en el mismo documento HTML.

ETIQUETAS DE TTULOS, PRRAFOS Y SEPARACIONES


Para escribir un ttulo se usa la etiqueta <HN>, donde la letra N se sustituye por un nmero, de 1 a 6, para poner los ttulos de ms grande a ms pequeo. Adems, pone el ttulo en un prrafo distinto.

La etiqueta <HR> aade una lnea horizontal de separacin. Esta etiqueta no es necesario cerrarla.

El texto del contenido aparecer en el navegador todo seguido. Aunque pongamos varios espacios de separacin, slo pondr uno. Del mismo modo, aunque pongamos en el cdigo de la pgina saltos de lnea (Enters), el texto aparecer seguido en la pgina web. Para poner un salto de lnea, se usa la etiqueta <BR>, que tampoco se tiene que cerrar. Para aadir ms de un espacio seguido, en vez de una etiqueta, se usa el cdigo de escape &nbsp; para cada espacio que se quiera poner. As mismo, no es necesario separar las distintas lneas o etiquetas con Enters, porque el navegador lo interpretar igual aunque est todo el cdigo seguido. Si queremos aadir comentarios en el documento, que no aparezcan despus en el navegador, se usa el siguiente formato: <!-- texto del comentario-->.

Cada prrafo se identifica con la etiqueta <P>. La diferencia entre un salto de lnea y un prrafo son las siguientes: -La etiqueta de prrafo se abre y se cierra. -La separacin con la siguiente lnea es ms grande en el prrafo. -El prrafo puede llevar atributos como son: -align: permite alinear el texto.

FORMATO DE TEXTO
Las principales etiquetas de formato son: <B>: pone el texto en negrita. <U>: subraya el texto <I>: pone el texto en cursiva <BIG>: aumenta una unidad el tamao del texto. Si se pone varias veces se hace cada vez ms grande. <SMALL>: disminuye una unidad el tamao del texto. Si se pone varias veces se hace cada vez ms pequeo. Adems, una etiqueta BIG anula el cambio producido por una SMALL y viceversa. Se pueden poner varias etiquetas que afectarn a la vez. Se tienen que cerrar en orden inverso al que se abren.

<FONT>: permite cambia el formato de la fuente. Soporta los atributos color, size (tamao), FACE (fuente; puede valer cualquier fuente, pero si el usuario no la tiene, se ver con una estndar)

LISTAS
Los documentos HTML soportan dos tipos de listas: numeradas y no numeradas. El resultado es similar a aplicar numeracin y vietas en un procesador de texto. En las listas numeradas se usa la etiqueta <OL>, y en las no numeradas <UL>. Cada uno de los elementos de la lista se identifica con la etiqueta <LI>.

En la etiqueta de lista se puede aadir un atributo para cambiar la forma de la vieta o numeracin. El atributo se denomina TYPE Los valores que puede tener son DISC (para crculos rellenos), SQUARE (para cuadrados) y CIRCLE (para crculos huecos) en las listas no numeradas; y 1 (para nmeros enteros), A (para letras maysculas), a (para letras minsculas), I (para nmeros romanos en maysculas) e i (para nmeros romanos en minsculas). .

ENLACES E IMGENES
Para escribir un enlace a otra pgina se utiliza la etiqueta <A>. Debe tener un atributo obligatorio, llamado href con el que se indica la direccin de la pgina a la que apunta el enlace. As pues, un enlace quedara as: <A HREF=url>Texto del enlace</A> En la url se puede poner la direccin completa (http://www.google.es) si est en otro servidor, o el nombre del archivo (pagina2.html) si est en el mismo servidor. Puede llevar tambin el atributo target=_blank para decir que el enlace se abrir en otra ventana del navegador. Una imagen usa la etiqueta IMG. Tiene tambin un atributo obligatorio, src, con el que se indica la imagen que se quiere insertar. Adems puede llevar varios atributos: -width y height, con los que cambiar la altura y anchura de la foto en la pgina web. (NOTA: si queremos una imagen pequea es mejor reducirla en un programa de dibujo en vez de usar estas etiquetas, ya que si la imagen es grande, aunque se vea ms pequea, tardar ms en cargarse) -alt con el que se indicara un texto que aparecer en caso de que falle la carga de la imagen. -align que indica cmo se alinea el texto alrededor de la imagen. Puede tomar los valores de top, middle y bottom, que permitiran poner slo una lnea a un lado de la imagen arriba, en el medio y abajo respectivamente; y right y left para poner varias lneas a la derecha o izquierda de la imagen. -hspace y vspace: para dejar un hueco entre la imagen y el texto a los lados, o arriba y abajo. Tambin es posible poner un enlace en una foto, cambiando el texto del enlace por toda la etiqueta de una foto.

Tambin se pueden poner enlaces a un punto de la pgina que no sea el principio. Para ello se tiene que aadir #nombre (se sustituye nombre por la identificacin que queramos poner en el enlace) al final de la url dentro de la parte del href. Despus, en la pgina se tendr que decir donde apunta ese enlace, usando la etiqueta A con el atributo NAME=nombre (en este caso sin el signo #). Si el enlace es a un punto de la misma pgina, slo se pondr #nombre en la parte href. Ej: <A href=otrapagina.html#punto>Texto enlace</A>: Enlace al apartado punto de la pgina otrapagina. <A href=#punto>Texto enlace</A>: Enlace al apartado punto de la misma pgina <A name=punto>Texto enlace</A>: Aqu es donde apuntarn los enlaces anteriores.

TABLAS
Para crear una tabla se utilizan 3 etiquetas: <TABLE>: Se pone al principio y al final de la tabla. Tiene varios atributos como pueden ser: -border=numero: donde nmero se sustituye por el nmero de pxeles que quieres que tenga el borde (ms alto, ms gordo). -align=left, right, center: alineacin del texto interno. -bgcolor=color: igual que el del BODY -width=nmero o porcentaje: anchura de la tabla en pxeles o porcentaje de la ventana que ocupar. -height=numero: nmero mnimo de puntos de la altura <TR>: se pone cada vez que queremos iniciar una fila. Tiene como atributos align, bgcolor, height (como TABLE) y valign=top, middle, bottom, baseline, que se usa para alinear el texto en vertical. <TD>: identifica cada celda dentro de la fila. Tiene tambin los atributos align, valign, bgcolor, height o width (si se pone en porcentaje es sobre toda la tabla). Tambin hay dos atributos que se usan para que una celda ocupe lo mismo que otras dos o ms de ancho y de alto (como combinar celdas en las tablas de Excel/Calc o Word/Writer). Son: -colspan=numero: indica cuntas columnas se quiere que ocupe la celda -rowspan=numero: indica cuntas filas se quiere que ocupe la celda El contenido de la tabla se pondr en la etiqueta de celda <TD>. Ejemplo de tabla bsica:

Ejemplo usando atributos, como colspan y rowspan, colores, anchura

Vous aimerez peut-être aussi