MARCAS DE HTML

MARCAS BÁSICAS

<html></html> Al principio y al final de todo documento.

<head> Cabecera del documento. Dentro del head se pone la marca <title> que indica el título de la página que queramos que salga en la franja superior azul del navegador.

Tras cerrar el </head> se pone la marca <body> dentro de la cual insertaremos todo el resto del documento y que cerraremos </body> justo antes de </html>

<!-- cualquier comentario --> Lo que se escribe dentro lo ignora el navegador y no se verá en la página. Para aclaraciones 'privadas' del autor de la página.

FORMATEO DE TEXTOS

<b> </b> negrita también con <strong>

<i> cursiva

<u> subrayado

<pre> preformateado. Respeta espacios, saltos de línea y los retornos utilizados.

<blink> hace parpadear el texto (sólo Netscape)

<font size=X> ... </font> marca el tamaño de los caracteres, donde X es un valor del 1 a 7.

<big> amplia el tamaño de la fuente

<small> reduce el tamaño de la fuente

<blockquote> margen izquierdo

<CENTER> centrar el texto

<BR> salta a la siguiente línea

<P> nuevo párrafo

<P align=center> párrafo centrado

<P align=left> párrafo alineado a la izquierda

<P align=right> párrafo alineado a la derecha

COLORES

<body bgcolor="#xxyyzz"> marca un color de fondo en la página

<body bgcolor="#xxyyzz" text="#xxyyzz" link="#xxyyzz" vlink="#xxyyzz"> <body background="imagen.gif"> colocar un fondo en la pantalla

TEXT - color del texto
LINK - color de los enlaces
VLINK - color de los enlaces visitados

<br> salto de línea

<p> doble salto de línea

<font size=2> con esta marca se cambia el tamaño

<font size=2 face=”arial”> con esta marca se cambia el tamaño y la fuente

<font size=2 face=”arial” color="#ff0000"> con esta marca se cambia el tamaño, la fuente y el color.

<hr> <hr size=”30%”> línea horizontal

TABLAS:

Muy útiles para colocar textos y fotografías en la página.

<table border=2> Define la tabla y su borde. También aquí se puede definir el ancho (width) en píxeles o porcentaje. Con cellpadding=x se define el espacio en píxeles entre el borde y el texto. Con cellspacing=X, los píxeles entre celdas.

<tr> abre fila o línea de la tabla

<td>primera columna o celda</td>

<td height="60" width="468">segunda columna con medidas. También se pueden dar en porcentaje de ancho</td>

</tr> cierra fila

<tr>abre segunda fila...

</table>

rowspan="X" 'expande' esa celda a lo alto de X filas. (Va dentro de la marca td)

colspan="X" 'expande' esa celda a lo largo de X columnas. (Va dentro de la marca td)

Dentro de cada celda se puede alinear el texto o cualquier contenido, cambiar el color de fondo, con las marcas habituales dentro del td.

LISTAS

Lista no numerada

<UL>

<LI> antes de cada elemento de la lista

</UL> cierra lista

Lista numerada

<OL>

<LI> antes de cada elemento de la lista

</OL> cierra lista

Lista de glosario o definición

<DL>

<DT> ... </DT> término que se va a definir

<DD> ... </DD> explicación del término

</DL> cierra lista

IMÁGENES

<IMG SRC="dirección de la imagen” border=0 height="60" width="468"> con borde y medidas en píxeles

<img ... alt="texto explicativo"> aparecerá un texto al pasar sobre la imagen

<img ... align="bottom"> alineación inferior

<img ... align="middle"> alineación en el medio

<img ... align="top"> alineación superior

<img ... align="left"> alineación izquierda

<img ... align="right"> alineación derecha

<img ... hspace=X> Espacio horizontal entre la imagen y el texto

<img ... vspace=y> Espacio vertical entre la imagen y el texto

CÓMO CREAR UN LINK

<a href=”dirección página”>Texto subrayado del link</a>

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

<a href=”mailto:dirección de mail”> Vínculo a un correo-e

<a name=”marcador”> define un marcador en un punto concreto de una página

<a href=”#marcador”> dirige al punto concreto del marcador

<a href=”dirección página#marcador”> dirige a un punto concreto de esa página

PÁGINA CON FRAMES (no lleva body)

<HTML>
<HEAD>
<TITLE>Página con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="mipagind.html"> (Frame de la izquierda de 20% de ancho de pantalla)
<FRAME SRC="mipagpre.html" NAME="principal"> (Frame de la derecha de 80% de ancho)
</FRAMESET>
</HTML>

También se puede dividir la pantalla en franjas horizontales con
<frameset rows="...">

LÍNEAS HORIZONTALES SEPARADORAS

<HR> línea horizontal

<HR width="x%"> altura 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