GUÍA RÁPIDA DE COMANDOS HTML
El HTML (HIPERTEXT MAK L páginas WEB.
A continuación hay una lista con algunos de los comandos usados en HTML.
DESCRIPCION INICIO FINAL COMENTARIOS
Obligatorias
Principio de Toda la codificación debe estar incluida en estas
<html> </html> etiquetas
Documento
Encabezado <head> </head> Dentro del encabezado se encontrará el título.
Es el texto que aparece en la barra de títulos del
Título <title> </title> navegador
Cuerpo <body> </body> Cuerpo de la página
Para toda la página
<body Permite colocar un color uniforme de fondo a
bgcolor="#RRVVAA"> toda la página. Este color estará formado por 3
números hexadecimales que indiquen:
Color de Fondo RR = tonalidad de color rojo
VV = tonalidad del color verde
AA = tonalidad del color azul
<body nombreimagen.gif deberá reemplazarse por el
nombre de la imagen. Se recomienda utilizar
Imagen de Fondo background="nombreimage
formatos .gif o .jpg
n.gif">
Colores de texto <body text="#RRVVAA" Permite definir los colores que se aplicarán en
forma genérica para el texto como para los
color de enlaces Link ="#RRVVAA" enlaces. El color está representado por un número
enlaces visitados Vlink ="#RRVVAA" hexadecimal
enlaces activos Alink ="#RRVVAA"
Permite definir un estilo de fuente, color, tamaño,
Estilos <style> </style> etc para todo el documento.
Permite definir propiedades internas del
<meta documento.
name="description" Name = "description" content = ”Será el
content="comentarios" resumen con que se publicará en el buscador. No
Meta </meta> utilizar más de 25 palabras"
name="keywords"
Name = "keywords" content = "podrán
content="palabra1 palabra2
definirse palabras claves para que nuestro
... palabran"> documento sea encontrado por los buscadores"
<bgsound Ejecuta un archivo de sonido.
xx.wav se debe reemplazar por el nombre del
src="xx.wav" archivo; loop n indica la cantidad de veces que se
loop=infinite/n> repetirá.
<embed La etiqueta Embed con sus propiedades, se utiliza
Sonido src="xx.wav" por las incompatibilidades de los navegadores.
width=200 height=55 Con esta opción aparece una consola cuyas di-
mensiones se definen con Width o Height y que
autostart="true" puede ocultarse con Hidden = "true"
loop="true"
hidden="true">
Presentación de texto
</h1></h2>....< Opciones de formato de texto para encabezados,
Encabezamientos <h1><h2>....<h6>
/h6>
Negrita <b> </b> Coloca el texto incluido con éstos formatos.
Cursiva <i> </i>
Subrayado <u> </u>
Parpadeo <blink> </blink> El texto estará parpadeante
Grande <big> </big> Agranda el texto
Pequeña <small> </small> Disminuye el texto
Subíndice <sub> </sub> Representa el texto sobre el renglón o bajo el
Superíndice <sup> </sup> renglón.
Permite colocar un color a la fuente. El color está
Color del Texto <font color="#RRVVAA"> </font> representado por un número hexadecimal.
Define un tamaño de fuente específico. n repre-
Tamaño del
<font size="n"> </font> senta un número del 0 al 7 al que luego podrán
Texto agregarle los signos + o -
<font face="nombre de Permite definir un nombre de Fuente específico.
Tipo de fuente </font>
fuente">
Formato de fuente Courier de tamaño menor
Estilo de fuente <tt> </tt> (Typewriter)
Texto Formato de fuente tipo Courier. Se representan
<pre> </pre> los espacios en blanco
preformateado
Permite que un texto tenga movimiento. Pueden
Texto en agregarse atributos para dimensionar la
<marquee>(texto) </marquee> marquesina, para alinear el texto, para modificar
Movimiento
tamaño, fuente y color.
No utiliza etiqueta Traza un línea horizontal cuyo grosor está
Línea Horizontal <hr="n"> representado por “n”
de cierre
No utiliza etiqueta Representa un espacio en blanco.
Espacio en Blanco  
de cierre
Comentario <!- comentario> -> Comentarios que no serán visibles en la pantalla.
Permiten que los caracteres especiales sean leídos
Escribo Para ver por todos los navegadores en sus distintas
< < versiones.
> > La escritura de cada carácter comienza con el
& & signo ampersand (&) y debe terminar con punto y
coma (;)
" "
á á En esta tabla vemos como escribir algunos
símbolos, signos, las letras Ñ y ñ, y las vocales
é é acentuadas en mayúscula y minúscula.
í í
ó ó
ú ú
Caracteres
Á Á
especiales
É É
Í Í
Ó Ó
Ú Ú
ñ ñ
Ñ Ñ
ü ü
Ü Ü
¿ ¿
¡ ¡
Presentación de párrafos
<center> </center> Todo texto que se escriba entre estas etiquetas
Alineaciones <left> </left> sufrirá esa alineación.
<right> </right>
Sangría <blockquote> </blockquote> Se utiliza para destacar una cita.
Realiza la separación entre párrafos, y la
Parrafo <p align= alineación de estos.
</p>
center*left*right*justify>
Renglones en Permite dejar renglones en blanco
<br>
blanco
Tratamiento de imágenes
Permite insertar una imagen en la página que
estamos diseñando. El archivo de la imagen
Imagen <img deberá estar ubicado en la misma carpeta que la
Individual src="nombreimagen.gif"> página, caso contrario se deberá indicar su ruta de
acceso
<img Coloca un texto que podrá leerse al pasar el
Texto de la puntero del ratón sobre la imagen o cuando ésta
src="nombreimagen.gif"
imagen no se carga.
alt="texto">
<img Indicará la posición en que ubicaremos al texto
que acompaña a la imagen
Alineación del src="nombreimagen.gif" Top Arriba * Middle Medio * Bottom Abajo
texto align= top * middle *
bottom>
Define el tamaño de la imagen
Ancho <img Width = ancho * height = altura n = será un
Alto src="nombreimagen.gif" valor en pixeles
width="n"
height="n">
<img dynsrc="archivi.avi" Permite agregar archivos de video.
Videos loop=infinite controls
start= mouseover>
Listas
<ol type= A * a * I * i Se utiliza cuando las opciones deben ser
start=n> numerados. La opción type representan número o
letras y start indicará el número con que inicia.
<lh> título de la lista </lh>
Lista numerada </ol>
<li> Primera opción
<li> Segunda opción
<li> Tercera opción
<ul type=square * circle * Se utiliza cuando las opciones no presentan un
disk> orden determinado. La opción type representa la
viñeta.
<lh> título de la lista </lh>
Lista no ordenada </ul>
<li> Primera opción
<li> Segunda opción
<li> Tercera opción
<dl> Se utiliza cuando las opciones llevan un título y
<lh> título de la lista </lh> una definición
<dt> Primer tema
Lista con <dd> Primer detalle
</dl>
sangrado <dd> Segundo detalle
<dt> Segundo tema
<dd> Tercer detalle
<dd> Cuarto detalle
Enlaces o Links
xxx se debe reemplazar por la dirección URL
Enlace a otro destino del enlace.
<a href="xxx"> yyy </a> yyy es el texto indicativo que se leerá en la
URL
página.
<a href = "mailto:dirección Te permite un enlace directo a tu cliente de correo
Enlace a un predeterminado
e-mail"> texto indicativo del </a>
e-mail
enlace
Marca para Referencia una posición a la que luego se
accederá.
enlace dentro de <a href="#marca"> Texto de
</a>
la misma página enlace al ancla
(Ancla - Anchor)
Localizar enlace <a name="marca"> texto del Enlaza una posición previamente marcada, dentro
</a> de la misma página
anterior ancla
Enlace a otra Enlaza a la posición establecida en marca, en la
página con <a href="ab.htm#marca"> página ab.htm
</a>
marca, dentro del texto indicativo del enlace
mismo sitio
xxx se debe reemplazar por la dirección URL
destino del enlace.
nombreimagen.gif se debe reemplazar por el
Enlace con <a href="xxx"><img
</a> nombre de imagen seleccionado
imagenes src="nombreimagen.gif"> Enlaza a la dirección URL haciendo un click
sobre la imagen.
Tablas
Definición <table> </table> Crea una tabla
<table border=n n = representa al grosor del borde. También se
Bordes podrá especificar el color del borde
bordercolor="#RRVVAA">
Color de Bordes
Separación entre Las celdas podrán separarse por el n valor
<table cellspacing=n>
celdas
Separación entre El contenido podrá estar separado del borde por el
el borde y el <table cellpadding=n> valor indicado en n
contenido
Alto <table height=n o porcentaje Se puede establecer un valor o un porcentaje para
ancho width=n o porcentaje> definir el tamaño de la tabla
<table Se puede establecer un color de fondo de toda la
Color de Fondo o bgcolor="#RRVVAA" tabla o colocar una imagen de fondo
Imagen de Fondo background="imagen.gif">
<caption Posibilita colocar un título a la tabla alineado
Título align=top * bottom> texto </caption> top=arriba o bottom=abajo
del título
<tr Por cada fila que tenga la tabla deberá utilizarse
align=left*center*right esta etiqueta: se podrá establecer la alineación del
Definición de filas </tr> contenido, la ubicación dentro de la fila y el color
valign=top*middle*bottom de fondo.
bgcolor="#RRVVAA">
<th Permite definir los nombres de las columnas.
align=left*center*right*justi
Definición de fy*decimal
</th>
títulos valign=top*middle*bottom*
baseline
bgcolor="#RRVVAA">
<td Coloca contenidos a cada celda
align=left*center*right*justi
Definición de
fy*decimal
datos o </td>
valign=top*middle*bottom*
contenidos
baseline
bgcolor="#RRVVAA">
Celda que ocupa <td rowspan=numero de Se puede combinar una celda para que ocupe
</td> muchas filas.
muchas filas filas>
Celda que ocupa <td colspan=numero de Se puede combinar una celda para que ocupe
</td> muchas columnas.
muchas columnas columnas>
Formularios
Inicia un formulario. Se utiliza para la entrada o el
Definición <form> envío de datos.
<form Envía la respuesta inmediatamente a la dirección
action="mailto:direccion@e especificada en formato de texto.
mail"
Acciones
method=post
enctype="text/plain">Texto
referente
<input Ingresa un objeto dentro del formulario, se deberá
type="text" definir el tipo de objeto, el nombre del campo
formulario, el valor inicial que se le asigna, el
name="nombre del campo tamaño máximo de visualización del campo y el
Introducción de formulario" tamaño máximo de caracteres que puede tener ese
datos value="asignación de un campo.
dato" Con el type = "text" no se asigna Value
size="número"
maxlenght="número">
checkbox = se visualiza un cuadro de
button verificación, si deseamos que aparezca tildado
agregamos CHECKED.
checkbox
password = el ingreso se representa con
file asteriscos.
hidden radio = visualiza botones de radio y permite que
Opciones de image el usuario elija una opción entre varias. Se
type password agregan tantos input como opciones deseamos.
reset = visualiza un botón que al hacerle click
radio
borrará los datos.
reset submit = visualiza un botón que al hacerle click
submit enviará los datos.
text text = crea un campo para ingresar caracteres
alfanuméricos
<textarea Permite ingresar un texto extenso, por ejemplo
name="nombre del campo comentarios
Ingreso de un
formulario"
texto que ocupa </textarea>
rows="cantidad de filas"
muchas líneas
cols="cantidad de
columnas">
<select name="nombre del Permite optar por los datos de un menú
Ingreso por campo formulario">
medio de un <option>1º opción </select>
menú <option>2º opción
<option>3º opción
Frames o Marcos
Definición <frameset> </frameset> Inicia la definición de un frame.
<frameset Define dos frame en columnas ocupando uno el
Frames en cols="20%,80%"> 20% de la pantalla y el otro el 80% restante.
Define dos frame en filas ocupando una el 30%
columnas de la pantalla y la otra el 70% restante
Frame en filas <frameset
rows="30%,70%>
<frame src="frame1.htm"> Define en que frame se cargará cada página.
Contenido de Se asignará un name en este caso principal para
<frame src="frame2.htm"
cada frame indicar que se visualicen allí los futuros enlaces
name="principal">
Se utiliza como atributo de un enlace e indica en
que frame deberá visualizarse ese enlace.
"_ blank" = se abrirá una nueva ventanadel nave-
Destino del frame target="principal" gador y se visualizará en ella.
"_self" = el enlace se carga en el propio frame.
"_top" = el enlace se carga a pantalla completa en
la misma ventana, suprimiendo los otros frame.
Border = 0 indica que no habrá huecos de
separación entre frames (para Netscape).
Atributos del tag border=0 frameborder = 0 indica que no habrá borde de
frameset frameborder=0 separación entre frames.
framespacing=0 framespacing = 0 indica que no habrá huecos de
separación entre frames (para Explorer).
Frameborder = elimina los bordes de un frame
frameborder="no" marginwidth y marginheight = definen el ancho
marginheight="número" y alto de los margenes del frame.
marginwidth="número" name = define el nombre del frame.
Atributos del tag Noresize = indica que el fram no podrá redimen-
name="nombre del frame"
frame sionarse.
noresize
scrolling = inidca si tendrá o no barra de
scrolling="yes/no/auto" desplazamiento.
src="dirección.htm" src = indica el contenido del frame.
Si el navegador no cuenta con la posibilidad de
incluir Frames, con este tag puede definirse una
Si el frame no
<noframes> </noframes> dirección alternativa. Se coloca luego de los tag
puede visualizarse FRAME y llevan dentro un texto definifo entre
los tag <body> </body>
Código más utilizado
......Descripción...... ..............INICIO.......... ..........F I N A L..........
Principo de Documento ..<html>... </html>
Encabezado y Título <head><title>....(titulo del archivo).... </title></head>
Color de Fondo de Página <body bgcolor="#RRVVAA"> ----
Imágen de Fondo <body background="XXX.gif (o jpg)"> ----
Imágen Individual <img src="YYY.gif (o jpg)"> ----
Imágen(Ancho*Alto) <img src=".." width="n" height="n"> -----
Espacio "libre" <img src=".." hspace="n"> -----
Color del Texto (parcial) <font color="#RRVVAA"> </font>
Tamaño del Texto (parcial) <font size="n"> </font>
Punto y a Parte <br> -----
Linea(s) en blanco <p> -----
"As you See" <pre> </pre>
Linea Embebida <hr="n"> -----
Negrita*Cursiva*Subray <b> * <I> * <U> </b> * </I> * </U>
Subíndice * Superíndice <sub> * <sup> </sub> * </sup>
Centrado*Izquierda*Derecha <center>*<left>*<right> </center>*</left>*</right>
Enlace "lejano" <a href="http://..."> ....</a>
Enlace "ab.html" en tu PC <a href="ab.html"> ....</a>
Enlace misma página <a href="#pepe"> ....</a>
Localiz.anterior <a name="pepe"> ....</a>
Enlace Correo <a herf="mailto: dir.mail..."> ...</a>
Arch.de Sonido <bgsound src="xx.wav"> (o .mid) -----
Desplazam. Marquesina <marquee>(texto) </marquee>
Diana Nicté ha
