El HTML, es el sistema de formateo de las páginas web, los navegadores interpretan las etiquetas de los documentos para darle formato adecuado a cada palabra y representarlo adecuadamente.

Aunque hoy en día tenemos la ayuda de los editores gráficos para desarrollar páginas webs, siempre es recomendable tener algunas nociones de HTML para solucionar algún problema que se nos pueda plantear que no solucione el editor con el que trabajemos.

Aprender HTML es fácil y rápido, para trabajar con él sólo necesitaremos un editor de texto y un navegador.

A continuación mostramos un resumen de las etiquetas más usadas:

Etiquetas básicas

Estructura

<html></html>

Crea un documento HTML

<head></head>

Define el encabezado, donde se pone información de configuración de la página.

<body></body>

Define la parte de contenido del documento HTML

Header Tags

Etiquetas ubicadas en el <HEAD>

<title></title>

Pone el nombre del documento en la barra del título

Body Tags

Atributos del Body

<body bgcolor=?>

Cambia el color de fondo de la página, usando nombres o valores hexadecimales.

<body text=?>

Cambia el color del texto, usando nombres o valores valores hexadecimales.

<body link=?>

Cambia el color de los enlaces.

<body vlink=?>

Cambia el color de los enlaces visitados.

<body alink=?>

Cambia el color de los enlaces al ser presionados.

Etiquetas de formato de texto

Tipos de párrafos

<p></p>

Crea párrafos de texto

<p align=?>

Alinea un párrafo (left, center, rigth)

<br>

Inserta un salto de línea

<blockquote>
 </blockquote>

Justifica el texto a ambos lados

<hl></hl>

Crea un título grande

…

<h6></h6>

Crea un título pequeño

<div align=?></div>

Un tag genérico utilizado para formatear grandes bloques de HTML, también usado para hojas de estilo.

<hr>

Inserta una linea horizontal

<hr size=?>

Cambia la altura de una línea

<hr width=?>

Setea el ancho de la linea, en porcentaje o números absolutos

<hr noshade>

Inserta una línea horizontal sin sombra

Estilos de texto

<b></b> ó <strong></strong>

Crea texto en negritas

<i></i> ó <em></em>

Crea texto en itálicas

<cite></cite>

Crea una cita, usando itálicas

<font size=?></font>

Cambia el cuerpo de la fuente de 1 a 7

<font color=?></font>

Setea el color de la fuente, usando nombres o valores hex

Enlaces

<a href=”URL”></a>

Crea un hipervínculo

<a href=”mailto:EMAIL”></a>

Crea un enlace de email

<a name=”NAME”></a>

Crea un enlace dentro del documento

<a href=”#NAME”></a>

Vincula a ese target dentro del documento

Listas

Listas de definición

<dl></dl>

Crea un lista de definición

<dt>

Precede cada término de definición

<dd>

Precede cada definición

Listas ordenadas

<ol></ol>

Crea un lista numerada

<li></li>

Precede cada ítem de una lista y le agrega un número

Listas de desordenadas

<ul></ul>

Crea una lista con puntos

<li></li>

Precede cada ítem de una lista y le agrega un número

Elementos Gráficos

<img src=”URL”>

Agrega una imagen

<img src=”URL” align=?>

Alinea una imagen an image

<img src=”name” border=?>

Setea el grosor del borde de la imagen

Tablas

<table></table>

Crea una tabla

<tr></tr>

Crea cada row de la tabla

<td></td>

Cambia cada celda de la tabla

<th></th>

Setea el header de la tabla (una celda normal, con texto centrado y resaltado)

Atributos de las Tablas

<table border=#>

Cambia el grosor del borde de la tabla

<table cellspacing=#>

Setea la cantidad de espacio entre las celdas

<table cellpadding=#>

Setea la cantidad de espacio entre el borde de las celdas y su contenido

<table width=# or %>

Setea el ancho de la tabla – en pixel o en porcentaje de acuerdo al ancho del documento

<tr align=?> or <td align=?>

Setea la alineación delas celdas (izquierda, centro, derecha)

<tr valign=?> or <td valign=?>

Setea la alineación vertical de las celdas (arriba, medio, abajo)

<td colspan=#>

Setea la cantidad de columnas dentro de una celda

<td rowspan=#>

Setea la cantidad de rows que una celda despliega (por defecto=1)

<td nowrap>

Previene que se rompa una linea dentro de la celda

Frames

<frameset></frameset>

tag dentro de un documento de frames

<frameset rows=”value,value”>

Define las filas de un frame, usando números o porcentaje para definir el largo

<frameset cols=”value,value”>

Define las columnas de un frame, usando números o porcentaje para definir el largo

<frame>

Define un solo frame – o región – dentro de frameset

<noframes></noframes>

Define lo que aparecerá en navegadores que no soporten frames

Se define una marco donde se muestra una página web externa:

Atributos de los Frames

<frame src=”URL”>

Especifica que documento html será desplegado

<frame name=”name”>

Nombra al frame or región, para que pueda ser llamado desde otro frame

<frame marginwidth=#>

Define los márgenes derecho e izquierdo del frame; debe ser igual o mayor a 1

<frame marginheight=#>

Define los márgenes de arriba y abajo del frame; debe ser igual o mayor a 1

<frame scrolling=VALUE>

Setea si el frame tendrá barra de desplazamiento o no; el valor debe ser “yes,” “no,” o “auto. ” El default es “auto”.

<frame noresize>

Previene al usuario de cambiar el tamaño del marco

<iframe width="" height=""></iframe>

Determina el ancho y alto del marco

<iframe frameborder=1/0></iframe>

Determina si el marco tiene borde o no

Formularios

Para formularios funcionales, deberá correr un script de CGI.
El HTML sólo crea la apariencia del formulario.

<form></form>

Crea el formulario

<select multiple name=”NAME” size=?></select>

Crea un menú de desplazamiento. Size setea el número de ítems visibles antes de tener que desplazarse.

<option>

Setea cada ítem del menú

<select name=”NAME”></select>

Crea un menú desplegable

<textarea name=”NAME” cols=40 rows=8></textarea>

Crea una área de texto.

<input type=”checkbox” name=”NAME”>

Crea una checkbox.

<input type=”radio” name=”NAME” value=”x”>

Crea un radio button.

<input type=text name=”foo” size=20>

Crea un área de texto de una sola línea. Size setea el largo en caracteres.

<input type=”submit” value=”NAME”>

Crea un botón de envio.

<input type=”image” border=0 name=”NAME” src=”name.gif”>

Crea un botón de envio utilizando una imagen.

HTML Básico