Aprende-Web
Resumen del Manual de HTML
Resumen HTML
Este es un resumen de lo visto en el manual de HTML de Aprende-Web.
http://aprende-web.net/html
Etiquetas Básicas
(cid:1) <html> ... </html> : Principio y fin de la página
(cid:1) <head> ... </head> : Cabecera
(cid:1) <body> ... </body> : Cuerpo
(cid:1) <title> ... </title> : Título de la página
Etiquetas de texto
Insertar texto
(cid:1) <h1> ... </h1> : Título de primer nivel
(cid:1) <h2> ... </h2> : Título de segundo nivel
(cid:1) <h3> ... </h3> : Título de tercer nivel
(cid:1) <h4> ... </h4> : Título de cuarto nivel
(cid:1) <h5> ... </h5> : Título de quinto nivel
(cid:1) <h6> ... </h6> : Título de sexto nivel
(cid:1) <p> ... </p> : Párrafo
Estilo de texto
(cid:1) <b> ... </b> : Texto en negrita
(cid:1) <i> ... </i> : Texto en cursiva
(cid:1) <u> ... </u> : Texto subrayado
(cid:1) <s> ... </s> : Texto tachado
(cid:1) <sub> ... </sub> : Texto en subíndice
(cid:1) <sup> ... </sup> : Texto en superíndice
(cid:1) <abbr> ... </abbr> : Marcar abreviaturas
(cid:1) <tt> ... </tt> : Letra en monospace
(cid:1) <blink> ... </blink> : texto parpadeante
(cid:1) <pre> ... </pre> : Texto preformateado conservando espacios.
(cid:1) <code> ... </code> : Texto preformateado sin conservar espacios.
Enlaces
<a href="ruta">Texto del enlace</a>
Tipos de rutas: Absolutas y relativas.
Tipos de enlaces: Externos, locales, internos, a e-mail, a archivos.
target="_blank" : Atributo para abrir el enlace en página o pestaña aparte.
1
Aprende-Web
Resumen del Manual de HTML
Listas
(cid:1) <ul> ... </ul> : Principio y fin de lista no numerada
(cid:1) <ol> ... </ol> : Principio y fin de lista numerada
(cid:1) <li> ... </li> : Elemento de una lista.
(cid:1) <dl> ... </dl> : Principio y fin de un lista de definición
(cid:1) <dt> ... </dt> : Término en una lista de definición
(cid:1) <dd> ... </dd> : Definición en una lista de definición.
Imágenes
<img src="ruta" alt="descripción"/>
otros atributos
(cid:1) width="medida" height="medida" : ancho y alto de la imagen
(cid:1) align="left/right" : alineación izquierda o derecha.
Mapas de imágenes
(cid:1) usemap="#nombre" Atributo dentro de la etiqueta de imagen que usaremos
como mapa.
(cid:1) <map> ...</map> Principio y fin del mapa de imágenes.
(cid:2) name="nombre" : Atributo de referencia a la imagen (el mismo que en
"usemap").
(cid:1) <area .../> Enlaces dentro del mapa de imagen, llevan los siguientes atributos:
(cid:2) href="ruta" : ruta del enlace.
(cid:2) shape="tipo" : tipo de área.
(cid:2) coords="lista_de_números" : coordenadas del área, los números van
separados por comas.
Tipos de área y coordenadas
Origen de coordenadas en esquina superior izquierda de la imagen (0,0). Medida en píxeles.
Tipo "rect". Coordenadas = x1, y1: Esquina superior izquierda, x2, y2, esquina inferior
derecha.
Tipo "circle". Coordenadas = a , b: Centro de la circunferencia, c: Radio de la
circunferencia.
Tipo "poly".Coordenadas = x1, y1: primer punto del polígono, x2, y2: segundo punto del
polígono ... xn, yn ultimo punto del polígono.
2
Aprende-Web
Resumen del Manual de HTML
Tablas
(cid:1) <table> ... </table> : Principio y fin de una tabla
(cid:1) <tr> ... </tr> : fila de una tabla
(cid:1) <td> ... </td> : celda normal de una tabla
(cid:1) <th> ... </th> : celda de cabecera de una tabla
(cid:1) <caption> ... </caption> : título de una tabla
(cid:1) <thead> ... </thead> : Sección cabecera de tabla
(cid:1) <tfoot> ... </tfoot> : Sección pie de tabla
(cid:1) <tbody> ... </tbody> : Sección del cuerpo de la tabla
(cid:1) <col> ... </col> : Referencia a la columna de la tabla.
(cid:1) <colgroup> ... </colgroup> : Referencia a un grupo de columnas. el
atributo span="num" indica el número de columnas.
Formularios
<form ... ></form>: Atributos de esta etiqueta:
(cid:1) action="ruta" : página, correo, etc, dónde es enviado el formulario.
(cid:1) method="get/post" : método de envío "get" o "post".
(cid:1) enctype="tipo_MIME" : Modo en que se envía: correo="text/plain";
archivos="multipart/form-data"
Campos del formulario
(cid:1) Texto : <input type="text" name="nombre" size="ancho_caja"
maxlength="max_caracteres" value="valor_defecto" />
(cid:1) Contraseña : <input type="password" name="nombre" size="ancho_caja"
maxlength="max_caracteres" />
(cid:1) Texto largo : <textarea name="nombre"> Valor_defecto </textarea>
(cid:1) Botón radio : <input type="radio" name="nombre" value="valor" />. name
debe ser igual en todos los botones relacionados.
(cid:1) Botón checkbox : <input type="checkbox" name="nombre" value="si" />
(cid:1) Lista desplegable : <select name="nombre" size="num"
multiple="multiple">... (etiquetas option) ...</select> size: Num
opciones que vemos a la vez. multiple: poder elegir más de una opción.
(cid:2) Etiquetas option: <option value="valor">texto</option>
(cid:1) Botón de envio : <input type="submit" value="Texto_del_botón" />
(cid:1) Botón de borrado : <input type="reset" value="Texto_del_botón" />
(cid:1) Enviar archivos : <input type="file" name="nombre" />
(cid:1) Campo oculto: <input type="hidden" name="nombre" />
(cid:1) Botón normal : <input type="button" name="nombre" />
(cid:1) Botón de imagen : <input type="image" name="nombre" src="ruta_imagen"
/>
3
Aprende-Web
Resumen del Manual de HTML
Otras etiquetas de formularios
(cid:1) <fieldset> ... </fieldset> : agrupar varios campos.
(cid:1) <legend> Texto </legend> : Texto para etiqueta fieldset.
(cid:1) <label for="ref"> Texto_referencia_al_campo </label> : referencia
del texto con un campo. En la etiqueta del campo incluiremos el atributo id="ref"
Etiquetas para diseño
(cid:1) <div> ... </div> : Selección de un bloque grande. Atributos:
(cid:2) id="nombre" : Referencia única para usar estilos CSS.
(cid:2) class="nombre" : Referencia no única para usar estilos CSS.
(cid:1) <span> ... </span> : Selección de un trozo pequeño (etiqueta en línea).
Etiquetas Doctype
Por ser las más usadas veremos sólo las de modo transicional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Etiquetas meta
Para buscadores
(cid:1) <meta name="author" content="autor_de_la _página">
(cid:1) <meta name="description" content="descripción_de_la _página">
(cid:1) <meta name="copyright" content="copyright_de_la_página">
(cid:1) <meta name="generator"
content="programa_para_hacer_la_página">
(cid:1) <meta name="languaje" content="idioma">
(cid:1) <meta name="revisit_after" content="tiempo de revision (en
inglés)">
(cid:1) <meta name="robots" content="index/noindex, follow/nofollow">
Para el servidor
(cid:1) <meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" /> : Indica el tipo de alfabeto usado.
(cid:1) <meta http-equiv="Refresh" content="tiempo_en_segundos" /> :
Indica cada cuanto debe actualizarse la página.
Redireccionamiento
(cid:1) <meta http-equiv="Refresh" content="tiempo_en_segundos;
URL=ruta" />
4
Aprende-Web
Resumen del Manual de HTML
Referencia a otros códigos y archivos
(cid:1) <link rel="stylesheet" href="ruta_del_archivo"
type="text/css" media="all" /> : archivo externo código CSS.
(cid:1) <script language="javascript" src="ruta_del_archivo"
type="text/javascript"> </script> : archivo externo código Javascript.
(cid:1) <style type="text/css"> ... </style> : Trozo de código CSS incrustado
en la cabecera.
(cid:1) <script type="text/javascript"> ... </script> : Trozo de código
javascript incrustado.
Otras etiquetas
Favicon: <link rel="shortcut icon" href="icono.ico">
Marquesina: <marquee> ... </marque> : Atributos específicos:
(cid:1) behavior="scroll/slide/alternate"
(cid:1) direction="left/right"
(cid:1) scrollamount="num" : píxeles que se desplaza en cada movimiento.
(cid:1) sc rolldelay="num" : Tiempo en milisegundos entre cada movimiento.
Atributos
Atributos generales
align="left|center|right|justify" : Se aplica a textos, imágenes, tablas, celdas de
tabla. En imágenes sólo funcionan los valores left y right; y para tablas y celdas de tabla todos
menos justify.
align="<num>|<porcentaje>" : Se aplica a elementos en bloque e imágenes. indica el
ancho y alto del elemento.
Atributos para la etiqueta body
text="<color>" : color del texto.
bgcolor="<color>" : color del fondo de la página.
background="<URL_imagen>" : Imagen de fondo indicada en la ruta.
Atributos para listas
Estilo en etiqueta ul, lista no numerada: tipos de viñetas:
(cid:1) type="square|disc|circle|none"
Estilo en etiqueta ol, lista numerada: tipos de viñetas:
(cid:1) type="1|a|A|I|i"
5
Aprende-Web
Resumen del Manual de HTML
Atributos en tablas
(cid:1) border="<num>" : grosor del borde (en tabla o en celdas).
(cid:1) valign="top|middle|bottom" : Alineación vertical de celdas. (la alineación
horizontal se hace mediante el atributo "align".
(cid:1) cellspacing="<num>" : separación entre celdas (0 = sin separación).
(cid:1) colspan="<num>" : fusión de celdas en una fila (el num indica cuántas celdas se
fusionan).
(cid:1) rowspan="<num>" : fusión de celdas en una columna (el num indica cuántas
celdas se fusionan).
Carácter
Caracteres especiales
Caracteres especiales fundamentales:
Entidad
<
>
&
"
'
(espacio en blanco)
<
>
&
"
'
Descripción
signo menor que
signo mayor que
ampersand
comillas
espacio en blanco
apóstrofo
Caracteres especiales para
Crear cuenta
Comentarios de: Resumen HTML (0)
No hay comentarios