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