ETIQUETAS PRINCIPALES

Transcripción

1 HTML... 1 ETIQUETAS PRINCIPALES... 1 ETIQUETAS DE TÍTULOS, PÁRRAFOS Y SEPARACIONES... 3 FORMATO DE TEXTO... 5 LISTAS... 6 ENLACES E IMÁGENES... 7 TABLAS... 9 HTML Las páginas 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 página, dar formato al texto, crear tablas, insertar imágenes o enlaces Las etiquetas empiezan con el signo <, y acaban con >. Entre ambos signos se pone el nombre de la etiqueta (que identifica su función), así como atributos, que pueden modificar de algún modo su función. Las etiquetas se abren y se cierran. Al abrir se pone el nombre de la etiqueta (por ejemplo <HTML>), mientras que al cerrar se añade 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 mayúsculas o en minúsculas, pero en el manual usaremos mayúsculas para diferenciarlas más rápidamente. Aunque existen muchas etiquetas, aquí vamos a explicar algunas de las más 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 después de la etiqueta anterior. En esta parte se pone información sobre la página, que no aparecerá en el navegador, como puede ser el título, el autor, una pequeña descripción o las palabras que la identifican (para que los navegadores como google la encuentren mejor). La parte más importante de la cabecera es el título, que usa la etiqueta <TITLE>. El título aparecerá en la barra de título 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 sería un ejemplo de un documento HTML, y cómo se vería en el navegador:

2 Los atributos, como se ha dicho antes, modifican la función de las etiquetas. Se escriben detrás 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 página web. En todos los atributos, el color se puede escribir con el nombre en inglés (soporta los siguientes colores: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow), o usando el código RGB con el símbolo # delante (por ejemplo: Negro: #000000, Rojo: #FF0000, Amarillo: #FFFF00, Blanco: #FFFFFF, Verde: #00FF00, Púrpura: #FF00FF, Azul: #0000FF, Celeste: #00FFFF). NOTA: Cualquier color SIEMPRE se configura así (letras, bordes, relleno ) -text: cambia el color del texto de la página web. -background= nombredelaimagen.ext : puede poner una imagen de fondo en la página web. Hay que poner el nombre y la extensión. Aquí hay un ejemplo en el que se ha cambiado el fondo a verde (usando el nombre) y el texto a blanco (usando el código RGB). Dentro de la cabecera se puede instroducir información fuera del contenido en lo que se denomina meta datos. Esta información ayuda después a los buscadores a saber más sobre la página. La etiqueta que se utiliza es META y tiene 3 atributos posibles:

3 -NAME: nos dice el tipo de información que nos da la etiqueta Por ejemplo author, keyword (palabras que describen el contenido de la página), description (para una descripción de la página), generator (para el programa con el que hacemos la págna). -HTTP-EQUIV: para información de HTTP. Suele utilizarseel valor refresh para decir cada cuanto se tiene que actualizar la página, o redirigir automáticamente a otra web. -CONTENT: información que damos y que complementa a los otros 2 atributos. Generalmente se ponen varias etiquetas META en el mismo documento HTML. ETIQUETAS DE TÍTULOS, PÁRRAFOS Y SEPARACIONES Para escribir un título se usa la etiqueta <HN>, donde la letra N se sustituye por un número, de 1 a 6, para poner los títulos de más grande a más pequeño. Además, pone el título en un párrafo distinto. La etiqueta <HR> añade una línea horizontal de separación. Esta etiqueta no es necesario cerrarla.

4 El texto del contenido aparecerá en el navegador todo seguido. Aunque pongamos varios espacios de separación, sólo pondrá uno. Del mismo modo, aunque pongamos en el código de la página saltos de línea (Enters), el texto aparecerá seguido en la página web. Para poner un salto de línea, se usa la etiqueta , que tampoco se tiene que cerrar. Para añadir más de un espacio seguido, en vez de una etiqueta, se usa el código de escape para cada espacio que se quiera poner. Así mismo, no es necesario separar las distintas líneas o etiquetas con Enters, porque el navegador lo interpretará igual aunque esté todo el código seguido. Si queremos añadir comentarios en el documento, que no aparezcan después en el navegador, se usa el siguiente formato: . Cada párrafo se identifica con la etiqueta . La diferencia entre un salto de línea y un párrafo son las siguientes: -La etiqueta de párrafo se abre y se cierra. -La separación con la siguiente línea es más grande en el párrafo. -El párrafo puede llevar atributos como son: -align: permite alinear el texto.

5 FORMATO DE TEXTO Las principales etiquetas de formato son: : pone el texto en negrita. : subraya el texto : pone el texto en cursiva <BIG>: aumenta una unidad el tamaño del texto. Si se pone varias veces se hace cada vez más grande. : disminuye una unidad el tamaño del texto. Si se pone varias veces se hace cada vez más pequeño. Además, una etiqueta BIG anula el cambio producido por una SMALL y viceversa. Se pueden poner varias etiquetas que afectarán a la vez. Se tienen que cerrar en orden inverso al que se abren. : permite cambia el formato de la fuente. Soporta los atributos color, size (tamaño), FACE (fuente; puede valer cualquier fuente, pero si el usuario no la tiene, se verá con una estándar)

6 LISTAS Los documentos HTML soportan dos tipos de listas: numeradas y no numeradas. El resultado es similar a aplicar numeración y viñetas 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 añadir un atributo para cambiar la forma de la viñeta o numeración. El atributo se denomina TYPE Los valores que puede tener son DISC (para círculos rellenos), SQUARE (para cuadrados) y CIRCLE (para círculos huecos) en las listas no numeradas; y 1 (para números enteros), A (para letras mayúsculas), a (para letras minúsculas), I (para números romanos en mayúsculas) e i (para números romanos en minúsculas)..

7 ENLACES E IMÁGENES Para escribir un enlace a otra página se utiliza la etiqueta <A>. Debe tener un atributo obligatorio, llamado href con el que se indica la dirección de la página a la que apunta el enlace. Así pues, un enlace quedaría así: <A HREF= url >Texto del enlace</a> En la url se puede poner la dirección completa ( si está en otro servidor, o el nombre del archivo (pagina2.html) si está en el mismo servidor. Puede llevar también el atributo target= _blank para decir que el enlace se abrirá en otra ventana del navegador. Una imagen usa la etiqueta IMG. Tiene también un atributo obligatorio, src, con el que se indica la imagen que se quiere insertar. Además puede llevar varios atributos: -width y height, con los que cambiar la altura y anchura de la foto en la página web. (NOTA: si queremos una imagen pequeña es mejor reducirla en un programa de dibujo en vez de usar estas etiquetas, ya que si la imagen es grande, aunque se vea más pequeña, tardará más en cargarse) -alt con el que se indicaría un texto que aparecerá en caso de que falle la carga de la imagen. -align que indica cómo se alinea el texto alrededor de la imagen. Puede tomar los valores de top, middle y bottom, que permitirían poner sólo una línea a un lado de la imagen arriba, en el medio y abajo respectivamente; y right y left para poner varias líneas 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. También es posible poner un enlace en una foto, cambiando el texto del enlace por toda la etiqueta de una foto.

8 También se pueden poner enlaces a un punto de la página que no sea el principio. Para ello se tiene que añadir #nombre (se sustituye nombre por la identificación que queramos poner en el enlace) al final de la url dentro de la parte del href. Después, en la página 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 página, sólo se pondrá #nombre en la parte href. Ej: <A href= otrapagina.html#punto >Texto enlace</a>: Enlace al apartado punto de la página otrapagina. <A href= #punto >Texto enlace</a>: Enlace al apartado punto de la misma página <A name= punto >Texto enlace</a>: Aquí es donde apuntarán los enlaces anteriores.

9 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 número se sustituye por el número de píxeles que quieres que tenga el borde (más alto, más gordo). -align=left, right, center: alineación del texto interno. -bgcolor=color: igual que el del BODY -width= número o porcentaje : anchura de la tabla en píxeles o porcentaje de la ventana que ocupará. -height=numero: número mínimo 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 también los atributos align, valign, bgcolor, height o width (si se pone en porcentaje es sobre toda la tabla). También hay dos atributos que se usan para que una celda ocupe lo mismo que otras dos o más de ancho y de alto (como combinar celdas en las tablas de Excel/Calc o Word/Writer). Son: -colspan=numero: indica cuántas columnas se quiere que ocupe la celda -rowspan=numero: indica cuántas filas se quiere que ocupe la celda El contenido de la tabla se pondrá en la etiqueta de celda <TD>. Ejemplo de tabla básica:

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