GUÍA RÁPIDA DE COMANDOS HTML
HTML (HIPERTEXT MAKE UP LENGUAGE)
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 bgcolor="red"> Permite colocar un color uniforme de fondo a 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
Ver escala de Colores AA = tonalidad del color azul
[Link] deberá reemplazarse por el
nombre de la imagen. Se recomienda utilizar formatos
Imagen de Fondo <body background="[Link]"> .gif o .jpg
<body text="#RRVVAA" Permite definir los colores que se aplicarán en forma
Colores de texto genérica para el texto como para los enlaces. El color
Link ="#RRVVAA"
color de enlaces está representado por un número hexadecimal
Vlink ="#RRVVAA"
enlaces visitados
Alink ="#RRVVAA"
enlaces activos
Ver escala de Colores
Permite definir un estilo de fuente, color, tamaño, etc
Estilos <style> </style> para todo el documento.
Permite definir propiedades internas del documento.
<meta Name = "description" content = ”Será el resumen
con que se publicará en el buscador. No utilizar más
name="description" content="comentarios" de 25 palabras"
Meta </meta>
name="keywords" content="palabra1 palabra2 ... Name = "keywords" content = "podrán definirse
palabran"> palabras claves para que nuestro documento sea
encontrado por los buscadores"
<bgsound Ejecuta un archivo de sonido.
src="[Link]" [Link] se debe reemplazar por el nombre del archivo;
loop n indica la cantidad de veces que se repetirá.
loop=infinite/n> La etiqueta Embed con sus propiedades, se utiliza por
<embed las incompatibilidades de los navegadores.
Sonido src="[Link]" Con esta opción aparece una consola cuyas di-
width=200 height=55 mensiones se definen con Width o Height y que
autostart="true" puede ocultarse con Hidden = "true"
loop="true"
hidden="true">
Presentación de texto
Encabezamientos <h1><h2>....<h6> </h1></h2>....</h6> Opciones de formato de texto para encabezados,
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 renglón.
Superíndice <sup> </sup>
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-senta
Tamaño del
<font size="n">iuoiuyhotuihourhyo8urho </font> un número del 0 al 7 al que luego podrán agregarle
Texto los signos + o -
Tipo de fuente <font face="nombre de fuente"> </font> Permite definir un nombre de Fuente específico.
Formato de fuente Courier de tamaño menor
Estilo de fuente <tt> </tt> (Typewriter)
Texto Formato de fuente tipo Courier. Se representan los
<pre> </pre> espacios en blanco
preformateado
Permite que un texto tenga movimiento. Pueden
Texto en agregarse atributos para dimensionar la marquesina,
<marquee>(texto) </marquee> para alinear el texto, para modificar tamaño, fuente y
Movimiento
color.
Traza un línea horizontal cuyo grosor está
Línea Horizontal <hr="n"> No utiliza etiqueta de cierre
representado por “n”
Espacio en Representa un espacio en blanco.
  No utiliza etiqueta de cierre
Blanco
Comentario <!- comentario> -> Comentarios que no serán visibles en la pantalla.
Permiten que los caracteres especiales sean leídos por
todos los navegadores en sus distintas versiones.
Escribo Para ver Escribo Para ver
< < É É 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 sufrirá
Alineaciones <left> </left> esa alineación .
<right> </right>
Sangría <blockquote> </blockquote> Se utiliza para destacar una cita.
Realiza la separación entre párrafos, y la alineación
Parrafo de estos.
<p align= center*left*right*justify> </p>
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 deberá estar
Imagen ubicado en la misma carpeta que la página, caso
<img src="[Link]"> contrario se deberá indicar su ruta de acceso
Individual
Coloca un texto que podrá leerse al pasar el puntero
Texto de la del ratón sobre la imagen o cuando ésta no se carga.
<img src="[Link]" alt="texto">
imagen
Indicará la posición en que ubicaremos al texto que
acompaña a la imagen
Alineación del <img src="[Link]" Top Arriba * Middle Medio * Bottom Abajo
texto align= top * middle * bottom>
<img src="[Link]" Define el tamaño de la imagen
Ancho Width = ancho * height = altura n = será un valor en
width="n"
Alto pixeles
height="n">
<img dynsrc="[Link]" Permite agregar archivos de video.
Videos loop=infinite controls
start= mouseover>
Listas
<ol type= A * a * I * i start=n> Se utiliza cuando las opciones deben ser numerados.
<lh> título de la lista </lh> La opción type representan número o letras y start
indicará el número con que inicia.
Lista numerada <li> Primera opción </ol>
<li> Segunda opción
<li> Tercera opción
<ul type=square * circle * disk> Se utiliza cuando las opciones no presentan un orden
<lh> título de la lista </lh> determinado. La opción type representa la viñeta.
Lista no
<li> Primera opción </ul>
ordenada
<li> Segunda opción
<li> Tercera opción
<dl> Se utiliza cuando las opciones llevan un título y una
<lh> título de la lista </lh> 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 destino
Enlace a otro del enlace.
<a href="[Link] Youtube </a> yyy es el texto indicativo que se leerá en la página.
URL
Te permite un enlace directo a tu cliente de correo
Enlace a un <a href = "[Link] e-mail"> texto predeterminado
</a>
e-mail indicativo del enlace
Marca para Referencia una posición a la que luego se accederá.
enlace dentro de
<a href="#marca"> Texto de enlace al ancla </a>
la misma página
(Ancla - Anchor)
Localizar enlace Enlaza una posición previamente marcada, dentro de
<a name="marca"> texto del ancla </a> la misma página
anterior
Enlace a otra Enlaza a la posición establecida en marca, en la
página con <a href="[Link]#marca"> texto indicativo del página [Link]
</a>
marca, dentro enlace
del mismo sitio
xxx se debe reemplazar por la dirección URL destino
del enlace.
[Link] se debe reemplazar por el nombre
Enlace con de imagen seleccionado
<a href="xxx"><img src="[Link]"> </a>
imagenes Enlaza a la dirección URL haciendo un click sobre la
imagen.
Tablas
Definición <table> </table> Crea una tabla
<table border=n bordercolor="#RRVVAA"> n = representa al grosor del borde. También se podrá
Bordes especificar el color del borde
Color de Bordes
Ver escala de Colores
Las celdas podrán separarse por el n valor
Separación entre
<table cellspacing=n>
celdas
Separación entre El contenido podrá estar separado del borde por el
<table cellpadding=n> valor indicado en n
el borde y el
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 bgcolor="#RRVVAA" Se puede establecer un color de fondo de toda la tabla
Color de Fondo o background="[Link]"> o colocar una imagen de fondo
Imagen de Fondo
Ver escala de Colores
<caption Posibilita colocar un título a la tabla alineado
Título </caption> top=arriba o bottom=abajo
align=top * bottom> texto del título
<tr Por cada fila que tenga la tabla deberá utilizarse esta
Definición de etiqueta: se podrá establecer la alineación del
align=left*center*right valign=top*middle*bottom </tr> contenido, la ubicación dentro de la fila y el color de
filas
bgcolor="#RRVVAA"> fondo.
<th align=left*center*right*justify*decimal Permite definir los nombres de las columnas.
Definición de
valign=top*middle*bottom*baseline </th>
títulos
bgcolor="#RRVVAA">
Definición de <td align=left*center*right*justify*decimal Coloca contenidos a cada celda
datos o valign=top*middle*bottom*baseline </td>
contenidos bgcolor="#RRVVAA">
Celda que ocupa Se puede combinar una celda para que ocupe muchas
<td rowspan=numero de filas> </td> filas.
muchas filas
Celda que ocupa Se puede combinar una celda para que ocupe muchas
muchas <td colspan=numero de columnas> </td> columnas.
columnas
Formularios
Inicia un formulario. Se utiliza para la entrada o el
Definición <form> envío de datos.
Envía la respuesta inmediatamente a la dirección
<form action="[Link] especificada en formato de texto.
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 tamaño
Introducción de name="nombre del campo formulario" máximo de visualización del campo y el tamaño
datos value="asignación de un dato" máximo de caracteres que puede tener ese campo.
size="número" Con el type = "text" no se asigna Value
maxlenght="número">
checkbox = se visualiza un cuadro de verificación, si
deseamos que aparezca tildado agregamos
button CHECKED.
password = el ingreso se representa con asteriscos.
checkbox radio = visualiza botones de radio y permite que el
file usuario elija una opción entre varias. Se agregan
hidden tantos input como opciones deseamos.
Opciones de image reset = visualiza un botón que al hacerle click borrará
type password los datos.
submit = visualiza un botón que al hacerle click
radio enviará los datos.
reset text = crea un campo para ingresar caracteres alfa-
submit numéricos
text
<textarea Permite ingresar un texto extenso, por ejemplo
Ingreso de un comentarios
name="nombre del campo formulario"
texto que ocupa </textarea>
rows="cantidad de filas"
muchas líneas
cols="cantidad de columnas">
Permite optar por los datos de un menú
<select name="nombre del campo formulario">
Ingreso por
<option>1º opción
medio de un </select>
<option>2º opción
menú
<option>3º opción
Frames o Marcos
Definición <frameset> </frameset> Inicia la definición de un frame.
Frames en <frameset cols="20%,80%"> Define dos frame en columnas ocupando uno el 20%
de la pantalla y el otro el 80% restante.
columnas Define dos frame en filas ocupando una el 30% de la
Frame en filas <frameset rows="30%,70%> pantalla y la otra el 70% restante
Define en que frame se cargará cada página.
Contenido de <frame src="[Link]">
Se asignará un name en este caso principal para
cada frame <frame src="[Link]" name="principal"> indicar 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 nave-
gador y se visualizará en ella.
"_self" = el enlace se carga en el propio frame.
Destino del "_top" = el enlace se carga a pantalla completa en la
target="principal" misma ventana, suprimiendo los otros frame.
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
marginwidth y marginheight = definen el ancho y
frameborder="no" alto de los margenes del frame.
marginheight="número" name = define el nombre del frame.
Noresize = indica que el fram no podrá redimen-
marginwidth="número"
Atributos del tag sionarse.
name="nombre del frame" scrolling = inidca si tendrá o no barra de desplaza-
frame
noresize miento.
scrolling="yes/no/auto" src = indica el contenido del frame.
src="direcció[Link]"
Si el navegador no cuenta con la posibilidad de incluir
Frames, con este tag puede definirse una dirección
Si el frame no alternativa. Se coloca luego de los tag FRAME y
puede <noframes> </noframes> llevan dentro un texto definifo entre los tag <body>
</body>
visualizarse