ETIQUETAS HTML
MARCAS BÁSICAS
<html></html> Al principio y al final de todo documento.
<head> </head> Cabecera del documento. Dentro del head se
ponen las etiquetas:
<title> </title> indica el título de la página para el navegador.
<meta> permite aportar m eta información al documento, para su
mejor identificación e indexación por los motores de búsqueda. H ay
distintos tipos:
<meta name= "description" conten t= "Frase descriptiva de los
contenidos de la página">
<meta name= "keywords" content= " Palabras clave que resuman la
temática de los contenidos de la página”>
<meta name= "author" content= "Nombre/s del autor/es de la
página">
Tras cerrar el head el se pone la etiqueta:
<body> </body> Dentro de esta etiqueta se insertan los contenidos
del documento
El cierre de la eti queta </body> se coloca j usto antes del cie rre
</html>
PROPIEDADES DE LA PÁGINA
La etiqueta <body> puede llevar incluida información sobre las
propiedades de la página:
<body bgcolor="#xxyyzz"> define el color de fondo de la página.
<body text= "#xxyyzz"> define el color por defecto del texto en la
página.
<body link="#xxyyzz"> define el color de los enlaces.
<body vlink="#xxyyzz"> define el color de los enlaces visitados.
<body alink="#xxyyzz"> define el color de los enlaces activos.
<body background= "imagen.gif"> establece una imagen para el
fondo de la página.
Todos estos parámetros se pueden agrupar en una única etiqueta
<body>:
<body bgcolor="#xxyyzz" text="#xxyyzz" link="#xxyyzz"
vlink="#xxyyzz"
alink="#xxyyzz">
2
<!-- comentarios --> Sirve para anotar aclara ciones 'privadas' del
autor de la página. Lo que se escribe dentr o de esta etiquet a es
ignorado por el navegador y no se muestra en la página.
FORMATO DE TEXTOS
<b> </b> negrita (también sirve la etiqueta <strong>… </strong>)
<i> </i> cursiva (también sirve la etiqueta <em>…</em>)
<u> </u> subrayado (tambien sirve la etiqueta <ins> </ins>)
<font size= ”X”> …… </font> marca el tamaño de los ca racteres,
donde X es un valor del 1 a 7, o un valor relativo (+ 1-7).
<font color=”#XXYYZZ”> …… </font> define el color del texto, donde
XXYYZZ es un valor formado por letras y números que indica el color.
<font face=”arial”> …… </font> determina el tipo de la fuente.
La etiqueta <font> puede incluir los tres parámetros (tamaño, fuente
y color):
<font size=X color=#XXYYZZ face=fuente escogida> …… </font>
<pre> preformateado. Respeta espacios, sa ltos de línea y los
retornos utilizados.
<blink> hace parpadear el texto </blink> (no para Explorer)
FORMATO DE PÁRRAFOS
<p> salto de párrafo
<br> salto de línea
<blockquote> </blockquote> sangrado.
<center> centrar el texto </center>
<p align=center> párrafo centrado.
<p align=left> párrafo alineado a la izquierda.
<p align=right> párrafo alineado a la derecha.
CREACIÓN DE LISTAS
Lista no numerada:
<ul>
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
<li>tercer elemento de la lista</li>
</ul> cierra lista
Lista numerada:
<ol>
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
</ol> cierra lista.
3
Lista de glosario o definición:
<dl>
<dt>término que se va a definir</dt>
<dd>definición del término</dd>
</dl> cierra lista.
LÍNEAS HORIZONTALES SEPARADORAS
<hr> línea horizontal.
<hr width="x%"> anchura de la línea en porcentaje.
<hr width=x> anchura de la línea en píxeles.
<hr size=x> altura de la línea en píxeles.
<hr align=center> línea alineada en el centro.
<hr align=left> línea alineada a la izquierda.
<hr align=right> línea alineada a la derecha.
<hr noshade> línea sin efecto de sombra.
IMÁGENES
<img src="dirección de la imagen"> indica la ruta de la imagen.
<img ... border= ”X"> establece un borde de X pixels en torno a la
imagen.
<img ... height="XX" width="YY"> establece un tamaño de la imagen
(altura y anchura) en pixels.
<img ... alt= "texto explicativo"> se muestra un texto al pasar el
cursorsobre la imagen.
<img ... align="bottom"> alineación inferior del texto respecto de l a
imagen.
<img ... align= "middle"> alineación del texto en el medio de la
imagen.
<img ... align= "top"> alineación superior del texto respecto de la
imagen.
<img ... align="left"> alineación izquierda de la imagen en el párrafo.
<img ... align= "r ight"> alineación derecha de la imagen en el
párrafo.
<img ... hspace=X> espacio horizontal entre la imagen y el texto.
<img ... vspace=y> espacio vertical entre la imagen y el texto.
TABLAS:
Útiles para componer la página y para presentar datos tabulares.
<table>……</table> Define dónde comienza y termina la tabla
<table width="XX%"> Determina la anchura de la tabla. Puede darse
en píxeles (no lleva el símbolo %), o en porcentaje de la página.
<table height="XX> Determina la altura de la tabla en píxeles.
4
<table border= "X"> Establece el grosor en pí xeles del borde de la
tabla
<table cellspacing="X"> Define el espacio en píxeles entre las celdas
<table cellpadding="X"> Define el espacio en píxeles entre el borde y
exl texto
<tr>……<tr> determina cada una de las filas de la tabla
<td>……</td> determina cada una de la s columnas dentro de las
filas
Ejemplo de tabla de 2 filas y 3 columnas
<table width="100%" height="200" border="1" cellspacing="3" cellpadding="5">
<tr>
<td>primera columna de la fila 1</td>
<td>segunda columna de la fila 1</td>
<td>tercera columna de la fila 1</td>
</tr>
<tr>
<td>primera columna de la fila 2</td>
<td>segunda columna de la fila 2</td>
<td>tercera columna de la fila 2</td>
</tr>
</table>
<td rowspan= "2"> </td> une dos celdas de dos filas
adyacentes, en una única celda.
<td colspan= "2"> </td> une dos celdas de dos columnas
adyacentes en una sola celda.
Dentro de cada celda se puede alin ear el texto o cualquier contenido,
cambiar el color d e fondo, con las etiquetas habituales para texto,
párrafos o imágenes.
CREACIÓN DE ENLACES
<a href=”http://www.servidor.com/directorio/pagina.htm”>
Enunciado del enlace</a>
<a href= ”mailto:dirección de mail ”> Vínculo a una dirección de
correo-e.
<a name= ”marcador”> define un marcador (ancla) en un p unto
concreto de una página, para poder enlazarlo posteriormente.
<a href=”#marcador”> dirige un enla ce interno al punt o dónde está
el marcador.
<a href= ”dirección página# marcador”> dirige el enlace a un p unto
concreto de otra página.
Dentro del a href:
target="_blank" Abre la página en un nuevo navegador.
target=”_top” Abre la pá gina en toda la pantalla para evitar los
frames.
5
title=”texto descriptivo del enlace” pe rmite incluir una descripción del
destino del enlace
PÁGINA CON MARCOS (no lleva body)
<html>
<head>
<title>título de la página</title>
</head>
<frameset cols= "20%, 80%"> (divide la página en dos marcos en
forma de columnas, cada una con su anchura corre spondiente en
porcentaje)
<frame src= "menu.htm" na me= "navegacion"> (archivo menu. htm
que corresponde al marco de la izquierda, llamado “navegación”,
20% de anchura)
<frame src="principal.htm" name="contenidos"> (archivo
principal.htm que corresponde al marco de la derecha, llamado
“contenidos”, 80% de anchura)
</frameset>
</html>
Las páginas también se pueden di vidir en marcos horizontales
con
<frameset rows=" , ">
frameborder="NO" evita que se vea el borde entre los marcos
framespacing="2" establece 2 pixels de separación entre los marcos
scrolling="NO" evita que aparezca u na barra de scroll dentro del
marco scrolling="auto" mostrará la barra de scroll sólo si es necesario
Ejemplo de una página con tres marcos en forma de filas. La superior
y la inferior tienen un tamaño fijo d e 80 pixels; la d el medio es
adaptable. No se muestran los bordes entre los marcos
<frameset rows="80,*,80" frameborder="NO" border="0" framespacing="0">
<frame src="navegacion_up.htm" name="topFrame" scrolling="NO">
<frame src="principal.htm" name="mainFrame">
<frame src=" navegacion_down.htm " name="bottomFrame" scrolling="NO">
</frameset>
