Guia de Referencia rapida de Etiquetas HTML

Lenguaje HTML Básico

<!DOCTYPE>
Es la primera parte de una página web, aún antes que la etiqueta <html>.
Le indica al navegador que especificación de HTML se está utilizando
HTML 4.01: los tipos de documento que define son: strict, transitional y frameset.

Strict
Se usa cuando se utilizan CSS.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

Transitional
Presenta elementos en proceso de transición de acuerdo a los estándares del W3C.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

FrameSet
Debe usarse en documentos que incluyen frames
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>

<html></html>
Abre y cierra un documento HTML
<head></head>
Encabezado de la página – aquí se coloca titulo, metatags, e informacion para buscadores entre otras cosas. Esta información no es visible.
<body></body>
Dentro de esta etiqueta va toda la parte visible de la página web. Es el cuerpo de la web.

Etiquetas del Encabezado

<title></title>
El título de la página web.

Atributos de la etiqueta Body

<body bgcolor=?>
Configura el color de fondo de la página, usando el valor del código de color hexadecimal.
<body text=?>
Configura el color por defecto del texto, usando el valor del código de color hexadecimal.
<body link=?>
Configura el color de las ligas, usando el valor del código de color hexadecimal.
<body vlink=?>
Configura el color de las ligas visitadas, usando el valor del código de color hexadecimal
<body alink=?>
Configura el color de las ligas al darle clic, usando el valor del código hexadecimal.

Etiquetas HTML de Texto

<pre></pre>
Texto pre-formateado
<hl></hl>
Título más grande
<h6></h6>
Título más pequeño
<b></b>
Negritas
<u></u>
Subrayado
<i></i>
Cursivas
<tt></tt>
Tipo máquina de escribir
<cite></cite>
Cita, en cursiva
<em></em>
Resalta una palabra, negrita o cursiva
<strong></strong>
Resalta una palabra o grupo de palabras
<font face=?></font>
Coloca el tipo de letra: por ejemplo, arial, verdana, courier,etc.
<font size=?></font>
Coloca tamaño de letra, de 1 a 7
<font color=?></font>
Configura el color, usand valor hexadecimal o nombre directo (blue, green, etc.)

Enlaces

<a href=»URL»></a>
Hipervínculo
<a href=»mailto:EMAIL»></a>
Hipervínculo mailto (para envío de correo)
<a name=»name»></a>
Enlaza en el mismo documento
<a href=»#name»></a>
Enlaza hacia algún lugar dentro del mismo sitio

Formato y presentación

<p></p>
Nuevo párrafo
<p align=?>
Alinea el párrafo hacia la izquierda, derecha o al centro
<br>
Inserta un interlineado suave. Crea otra línea
<blockquote></blockquote>
Texto indentado de ambos lados
<dl></dl>
Lista de definiciones (glosario)
<dt>
Precede a cada término en definiciones
<dd>
Precede cada definición
<ol></ol>
Lista ordenada
<li></li>
Entrada en una lista
<ul></ul>
Lista con viñetas sin ordenar
<div align=?>
Para formato a porciones grandes del documento html, incluyendo hojas de estilo

Elementos Gráficos

<img src=»name»>
Incorpora una imagen
<img src=»name» align=?>
Alinea la imagen: izquierda, derecha y centro
<img src=»name» border=?>
Determina el contorno de la imagen. Un valor 0 no tendrá contorno
<map></map>
Mapa de imágenes
<body background=»URL o ruta de archivo»></body>
Coloca la imagen como fondo de la página
<hr>
Linea horizontal
<hr size=?>
Tamaño de una linea horizontal
<hr width=?>
Ancho de linea horizontal, ya sea porcentaje o valor absoluto.
<hr noshade>
Linea horizontal sin sombra

Tablas

<table></table>
Crea tabla
<tr></tr>
Crea filas en una tabla
<td></td>
Crea celda en una fila
<th></th>
Encabezado de tabla, texto normal, negrita y centrado

Atributos de Tablas

<table border=#>
Coloca contorno en las celdas de la tabla
<table cellspacing=#>
Espacio entre las celdas de una tabla
<table cellpadding=#>
Espacio entre el contorno de una celda y su contenido
<table width=# or %>
Ancho de la tabla, en pixeles o porcentaje del ancho de la página
<tr align=?> or <td align=?>
Alineación para las celdas, izquierda derecha, centro
<tr valign=?> or <td valign=?>
Alineación vertical de las celdas, arriba, abajo,enmedio
<td colspan=#>
Expansión de una celda, en número de columnas
<td rowspan=#>
Expansión de una celda, en número de celdas
<td nowrap>
Texto continuo dentro de una celda

Marcos (frames)

<frameset></frameset>
Substituye a la etiqueta HTML body en documentos con frames. Puede insertarse en otros framesets
<frameset rows=»value,value»>
Número de lineas en un frameset, usando pixeles o porcentaje de ancho
<frameset cols=»value,value»>
Número de columnas en un frameset, usando pixeles o porcentaje de ancho
<frame>
Frame singular dentro de un framset
<noframes></noframes>
Texto que aparecerá en navegadores que no soportan frames

Atributos de Frames

<frame src=»URL»>
Especifica que página html se muestra
<frame name=»name»>
Nombra al frame para que sea identificado por otros frames y accesado
<frame marginwidth=#>
Margen izquierdo y derecho de un grame, debe ser igual o mayor que 1
<frame marginheight=#>
Margen superior e inferior de un grame, igual o mayor a 1
<frame scrolling=VALUE>
Determina si un frame tiene barra de desplazamiento, Puede ser yes, no, auto, el cual es por defecto
<frame noresize>
No permite al usuario modificar el tamaño de un frame

Formularios

<form></form>
Formulario
<select name=»name»></select>
Menú desplegable
<option></option>
Opción del menú desplegable
<textarea name=»name» cols=40 rows=8></textarea>
Crea una caja de texto, columnas es el ancho y las lineas la altura (cols y rows)
<input type=»checkbox» name=»name»>
Crea un checkbox.
<input type=»radio» name=»name» value=»x»>
Crea botón de radio.
<input type=text name=»name» size=20>
Crea una opción de texto para entrada de información o despliegue
<input type=»submit» value=»name»>
Crea botón de envío de forma tipo submit
<input type=»image» border=0 name=»name» src=»name.gif»>
Crea botón de envío con imagen
<input type=»reset»>
Crea botón de limpieza (reset). Vacía la forma

Otras Etiquetas HTML

<EMBED SRC=»url o ruta de archivo» VOLUME=»50″ HEIGHT=»50″ WIDTH=»130″>
Incorpora sonido con panel de control en la pantalla.

< object width=»600″ height=»300″>
<param name=»movie» value=»miarchivo.swf»>
<embed src=»miarchivo.swf» width=»600″ height=»300″>
</embed>
</object>

Para insertar una pelicula flash swf en html

<!– Este es un comentario –>
Inserta comentarios no visibles en la página.

<iframe src =»/mipagina.html»> … </iframe>
Inserta un frame dentro de una página. Inline Frame.

< script type=»text/javascript»>
document.write(«<h2>bienvenido!</h2>»)
</script>

Inserta un script dentro de una página html.

<span style=»color:#00FFFF;»> </span>
Aplica a un grupo de texto un estilo, por ejemplo font, tamaño, color.

Carlos Dk

Apasionado por la enseñanza y el SEO

5 comentarios en “Guia de Referencia rapida de Etiquetas HTML

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.