Guía Rápida HTML - Cervera Benítez Karla M.

Universidad Mexiquense del Bicentenario
Tecámac
PÁGINAS WEB
Y
COMECIO ELECTRÓNICO
PROFA. ROMERO GUEVARA MABILIA
CERVERA BENÍTEZ KARLA MONTSERRAT
15LI291
LIC. INFORMATICA
GUÍA RÁPIDA - HTML
COMANDOS HTML
 <! DOCTYPE html>

Todos los documentos HTML deben comenzar con una declaración <! DOCTYPE>
La declaración no es una etiqueta HTML. Es una "información" para el navegador sobre
qué tipo de documento esperar.
 <html> ... </html>

Indica el comienzo y fin de un archivo HTML. Toda la codificación debe estar incluida en
esta etiqueta.
 <head> … </head>
Indica el comienzo y fin de un encabezado (aquí se coloca generalmente el título).
 <title> ... </title>

Es el texto que aparece en la barra de títulos del navegador.
 < body > ... < /body >
Indica el comienzo y fin del cuerpo de la página.
 
Para escribir comentarios, los cuales son ignorados por el Navegador.
 <body bgcolor="#RRVVAA">
Permite colocar un color uniforme de fondo a toda la página. Este color estará formado
por 3 números hexadecimales que indiquen:
RR = tonalidad de color rojo
VV = tonalidad del color verde
AA = tonalidad del color azul
 <body background="nombreimagen.gif">
¨Permite colocar una imagen de fondo, donde “nombreimagen.gif” deberá reemplazarse
por el nombre de la imagen. Se recomienda utilizar formatos .gif o .jpg
2
 <body text="#RRVVAA">
Colores de texto Permite definir los colores que se aplicarán en forma genérica para el
texto El color está representado por un número hexadecimal.
 <p> ... </p>
Indica comienzo y fin de un párrafo.
 <style> … </style>
Permite definir un estilo de fuente, color, tamaño, etc. para todo el documento.
 <h1><h2>....<h6> … </h1></h2>....</h6>
Hacen que el texto encerrado aparezca como encabezado (un subtítulo).
 <b>...< /b>
Resalta en Negritas el Texto encerrado.
 <br>
Inserta una línea o renglón de línea en blanco.
 <center> … < /center>

Centra los objetos que contiene. Este comando puede centrar cualquier cosa incluyendo
imágenes, texto, tablas, formularios, etc.
 <div align="> ... < /div>

Especifica el alineamiento de los elementos que contiene. Se puede usar para dividir el
documento que tiene secciones alineadas en forma diferente.
 align="..."
Fija el alineamiento, por ejemplo: "center", "right", o "left".
 <font atributo="> ... < /font>

Fija las propiedades y el tipo de letra del texto que contiene.
 size="..."
Fija el tamaño de las letras desde valores entre 1 y 7 donde 3 es el valor por omisión. Se
puede especificar valores relativos, ejemplo. SIZE=”3”.
 face="..."
Especifica el tipo de letra. Se puede definir una lista separada por comas. Por ejemplo:
Arial, Verdana, etc.
3
 color="..."
Especifica el color de las letras.
 <hr atributo1="..." atributo2="...">

Inserta una línea horizontal.
 width="..."
Especifica la longitud de la línea como porcentaje de la página, ejemplo. WIDTH=70% .
 align="..."
Especifica el alineamiento: RIGHT, LEFT, o CENTER.
 noshade
Muestra la línea como sólido.
 <table> … </table>
Definición para crear una tabla.
 <table border=n bordercolor="#RRVVAA">

Definir el grosor del borde n = representa al grosor del borde. También se podrá
especificar el color del borde. También se podrá especificar el color del borde.
 <table cellspacing=n>
Separación entre celdas, las celdas podrán separarse por el n valor.
 <table cellpadding=n>
Separación entre el borde y el contenido, el contenido podrá estar separado del borde
por el valor indicado en n.
4
 <table height=n o porcentaje width=n o porcentaje>

Se puede establecer un valor o un porcentaje para definir el tamaño alto y ancho de la
tabla.
 <table bgcolor="#RRVVAA" background="imagen.gif">

Separación entre el borde y el contenido, el contenido podrá estar separado del borde
por el valor indicado en n.
 width="..."
Especifica el ancho de la tabla en la página.
 cellspacing="..."
Especifica los espacios entre las celdas.
 cellpadding="..."
Especifica los espacios entre la celda y el texto.
 rows
Muestra los bordes entre filas.
 cols
Muestra los bordes entre columnas.
 height="..."
Especifica el alto de la celda.
 rowspan="..."
Especifica el número de filas a unir.
 colspan="..."
Especifica el número de columnas a unir.
 width="..."
Especifica el ancho de la celda.
 align="..."
Indica el alineamiento de los datos en la fila. Por ejemplo; LEFT, RIGHT, y CENTER.
 <marquee atributo1 atributo2>...< /marquee>

Fija un texto que se desplaza por la pantalla.
 <tr> … </tr>
Define una fila de celdas en una tabla. Estas pueden ser una mezcla de
elementos <td> y <th>.
5
 <td> … </td>
Define la celda de una tabla que contiene datos. Esta participa en el modelo de tablas.
 <th> … </th>
Define una celda como encabezado de un grupo de celdas en una tabla.
 <form> … </form>
Representa una sección de un documento que contiene controles interactivos que
permiten a un usuario enviar información a un servidor web.
 action="..."
Especifica la dirección de la acción de salida del form. Usualmente es la dirección de un
archivo CGI. También se puede especificar una dirección de correo.
 method="..."
Indica el metodo usado para enviar la información. Los valores posibles son: POST o GET.
Cuando se usa GET, el servido adjunta los argumentos al final de la dirección fijada en
ACTION. Cuando se usa POST. La información es enviada como un formato HTTP.
 name="..."
El nombre del formulario. En HTML4 ha quedado en desuso (debe usarse un id en su

lugar).
 enctype="..."
El atributo enctype especifica cómo se deben codificar los datos del formulario al enviarlos
al servidor.
Nota: El atributo enctype solo se puede utilizar si method = "post".
 <input> … </input>
Se usa para crear controles interactivos para formularios basados en la web con el fin de
recibir datos del usuario. Hay disponible una amplia variedad de tipos de datos de entrada
y widgets de control, que dependen del dispositivo y el agente de usuario (user agent).El
elemento <input> es uno de los más potentes y complejos en todo HTML debido a la gran
cantidad de combinaciones de tipos y atributos de entrada.
 type="..."
El tipo de control a mostrar. Su valor predeterminado es text, si no se especifica este
atributo. Los posibles valores son:
 button="..."
Botón sin un comportamiento específico.
6
 checkbox="..."
Casilla de selección. Se debe usar el atributo value para definir el valor que se enviará por
este elemento. Se usa el atributo checked para indicar si el elemento está seleccionado.
También se puede usar el atributo indeterminate (el cual solo se puede establecer
programaticamente) para indicar que la casilla está en un estado indeterminado (en la
mayoría de las plataformas, se dibuja una línea horizontal a través de la casilla).
 email="..."
Campo para introducir una dirección de correo electrónico. El valor introducido se válida
para que contenga una cadena vacía o una dirección de correo válida antes de
enviarse. Las pseudo-clases :valid y :invalid son aplicadas segun corresponda.
 hidden="..."
Control que no es mostrado en pantalla, pero cuyo valor es enviado al servidor.
 number="..."
Control para introducir un número de punto flotante.
 password="..."
Control de línea simple cuyo valor permanece oculto. Se puede usar el

atributo maxlength para especificar la longitud máxima del valor que se puede introducir.
 radio="..."
Botón radio. Se debe usar el atributo value para definir el valor que se enviará por este
elemento. Se usa el atributo checked para indicar si el elemento está seleccionado de
forma predeterminada. Los botones radio que tengan el mismo valor para su
atributo name están dentro del mismo "grupo de botones radio". Solo un botón radio
dentro de un grupo puede ser seleccionado a la vez.
 reset="..."
Botón que restaura los contenidos de un formulario a sus valores predeterminados.
 submit ="..."
Botón que envía el formulario.
7
 tel="..."
Control para introducir un número telefónico. Los saltos de línea son eliminados
automáticamente del valor introducido, pero no hay otra sintaxis forzada. Se pueden usar
atributos como pattern y maxlength para restringir los valores introducidos en este
control.
 text="..."
Campo de texto de línea simple. Los saltos de línea son eliminados automáticamente del
valor introducido.
 selected="..."
Señala al item o elemento pre-seleccionado cuando se cargue la lista.
 <select> … </select>
Representa un control que muestra un menú de opciones. Las opciones contenidas en el

menú son representadas por elementos <option>, los cuales pueden ser agrupados por
elementos <optgroup>. La opcion puede estar preseleccionada por el usuario.
 <option> … </option>
Se usa para representar un item dentro de un <select>, un <optgroup> .
 value="..."
El valor inicial del control. Este atributo es opcional, excepto cuando el

atributo type es radio o checkbox.
 <textarea> … </textarea>
Representa un control para la edición mutilínea de texto sin formato.
8
 <frameset atributo1="..." atributo2="...">...< /frameset>

Define una serie de ventanas que forman una página. Los comandos FRAME, y
NOFRAMES van dentro de FRAMESET. El comando FRAMESET se usa como el comando
BODY. Se puede incluir un comando BODY dentro del comando NOFRAMES para aquellos
browsers que no soportan frames.
 <frame atributo1="..." atributo2="...">
Define un frame simple.
 src="..."
Indica el archivo que contiene el frame.
 cols="..."
Especifica la longitud del texto.
 rows="..."
Especifica el número de líneas.
 <div> … </div>
La etiqueta <div> define una división. Esta etiqueta permite agrupar varios elementos de
bloque (párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los
navegadores no muestran nada especial cuando se crea una división, salvo que se dé
formato a la división con la hoja de estilo.
9
 <a> … </a>
Crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma

página, direcciones de correo, o cualquier otra URL.
 href="..."
Contiene una URL o un fragmento de URL al cual apunta el enlace.
Un fragmento de URL es un nombre ("name") precedido por el símbolo de número (#), el
cual especifíca una ubicación interna objetivo (un ID de un elemento HTML) dentro del
actual documento.
 target="..."
Especifica la ventana donde se mostrará la página. El target puede ser el nombre de un
frame o alguno de los siguientes valores:
"_blank"--Muestra la dirección en una página en blanco.

"_parent"--Muestra la dirección en la página que lo invocó.
"_self"--Muestra la dirección en la misma ventana. (por omisión)
"_top"--Muestra la dirección en la ventana actual usando todo el espacio.
10

Guía Rápida HTML - Cervera Benítez Karla M.

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guía Rápida HTML - Cervera Benítez Karla M.

Cargado por

Copyright:

Formatos disponibles

Universidad Mexiquense del Bicentenario

PROFA. ROMERO GUEVARA MABILIA

CERVERA BENÍTEZ KARLA MONTSERRAT

 <! DOCTYPE html>

 <html> ... </html>

 <title> ... </title>

 < body > ... < /body >

Indica el comienzo y fin del cuerpo de la página.

 <p> ... </p>

Indica comienzo y fin de un párrafo.

 <center> … < /center>

 <div align="> ... < /div>

 <font atributo="> ... < /font>

 <hr atributo1="..." atributo2="...">

 <table border=n bordercolor="#RRVVAA">

 <table height=n o porcentaje width=n o porcentaje>

 <table bgcolor="#RRVVAA" background="imagen.gif">

 <marquee atributo1 atributo2>...< /marquee>

El nombre del formulario. En HTML4 ha quedado en desuso (debe usarse un id en su

Botón sin un comportamiento específico.

Control que no es mostrado en pantalla, pero cuyo valor es enviado al servidor.

Control para introducir un número de punto flotante.

Control de línea simple cuyo valor permanece oculto. Se puede usar el

Botón que restaura los contenidos de un formulario a sus valores predeterminados.

Botón que envía el formulario.

Señala al item o elemento pre-seleccionado cuando se cargue la lista.

Representa un control que muestra un menú de opciones. Las opciones contenidas en el

Se usa para representar un item dentro de un <select>, un <optgroup> .

El valor inicial del control. Este atributo es opcional, excepto cuando el

Representa un control para la edición mutilínea de texto sin formato.

 <frameset atributo1="..." atributo2="...">...< /frameset>

 <frame atributo1="..." atributo2="...">

Define un frame simple.

Indica el archivo que contiene el frame.

Especifica la longitud del texto.

Especifica el número de líneas.

Crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma

"_blank"--Muestra la dirección en una página en blanco.

También podría gustarte