Scribd
Cargar
63 vistas

Resumen HTML

Este documento proporciona una guía de las etiquetas HTML más comunes. Explica las etiquetas básicas para estructurar una página, etiquetas para insertar texto, enlaces, imágenes, listas, tablas, formularios y más. También describe atributos comunes y caracteres especiales en HTML.

Cargado por

Sebastian Figueroa
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
63 vistas

Resumen HTML

Este documento proporciona una guía de las etiquetas HTML más comunes. Explica las etiquetas básicas para estructurar una página, etiquetas para insertar texto, enlaces, imágenes, listas, tablas, formularios y más. También describe atributos comunes y caracteres especiales en HTML.

Cargado por

Sebastian Figueroa
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

Resumen HTML

Etiquetas Básicas
 <!DOCTYPE html> : Última versión de html, recomendado ponerlo.
 <html> ... </html> : Principio y fin de la página
 <head> ... </head> : Cabecera de la página (lo que no se ve)
 <body> ... </body> : Cuerpo de la página
 <title> ... </title> : Título de la página (va en el head)

Etiquetas de texto
Insertar texto (Estos toman un espacio(una línea) por etiqueta)
 <h1> ... </h1> : Título de primer nivel
 <h2> ... </h2> : Título de segundo nivel
 <h3> ... </h3> : Título de tercer nivel
 <h4> ... </h4> : Título de cuarto nivel
 <h5> ... </h5> : Título de quinto nivel
 <h6> ... </h6> : Título de sexto nivel
 <p> ... </p> : Párrafo

Estilo de texto (Estos solo toman el espacio que necesitan)


 <b> ... </b> : Texto en negrita
 <i> ... </i> : Texto en cursiva
 <u> ... </u> : Texto subrayado
 <strike> ... </strike> : Texto tachado
 <small> ... </small> : Texto chico

Otros usos para los parráfos


 <br>: Salto de línea

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.
Ejemplo: <a href="https://google.com" target="_BLANK">>Click aqui</a>

1
Listas
 <ul> ... </ul> : Principio y fin de lista no numerada
 <ol> ... </ol> : Principio y fin de lista numerada
 <li> ... </li> : Elemento de una lista.
 <dl> ... </dl> : Principio y fin de un lista de definición
 <dt> ... </dt> : Término en una lista de definición
 <dd> ... </dd> : Definición en una lista de definición.

Etiquetas para diseño


 <div> ... </div> : Selección de un bloque grande. Atributos:
 id="nombre" : Referencia única para usar estilos CSS.
 class="nombre" : Referencia no única para usar estilos CSS.
 <span> ... </span> : Selección de un trozo pequeño (etiqueta en línea).

Imágenes
<img src="ruta" alt="descripción"/>
otros atributos
 width="medida" height="medida" : ancho y alto de la imagen (no es muy
recomendable, si se mencionan, con css no se puede modificar el tamaño)
 align="left/right" : alineación izquierda o derecha.

Mapas de imágenes
 usemap="#nombre" Atributo dentro de la etiqueta de imagen que usaremos
como mapa.
 <map> ...</map> Principio y fin del mapa de imágenes.
 name="nombre" : Atributo de referencia a la imagen (el mismo que en
"usemap").
 <area .../> Enlaces dentro del mapa de imagen, llevan los siguientes atributos:
 href="ruta" : ruta del enlace.
 shape="tipo" : tipo de área.
 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.

Videos y audios
<video src ="ruta" controls> ...</video> : Principio y fin de video.
<audio src ="ruta" controls> ...</audio> : Principio y fin de audio.
Formularios
<form ... ></form>: Atributos de esta etiqueta:
 action="ruta" : página, correo, etc, dónde es enviado el formulario.
 method="get/post" : método de envío "get" o "post"(servidor).
 enctype="tipo_MIME" : Modo en que se envía: correo="text/plain";
archivos="multipart/form-data"

Campos del formulario


 Texto : <input type="text">, para todos los campos se puede utilizar
required="", para que sea obligatorio su llenado. Para tener un valor
por defecto de algún campo, se utiliza value="valor_defecto".
 Contraseña : <input type="password">
 Número : <input type="number">
 Email : <input type="email">
 Color : <input type="color">
 Número en un rango: <input type="range" min="1" max="100">
 Fecha : <input type="date">
 Hora : <input type="time">
 Color : <input type="color">
 Botón normal : <input type="button" value="button">
 Botón de envio : <input type="submit">
 Área de texto : <textarea></textarea>, se puede utilizar el readonly=""
para que no se pueda modificar el texto dentro del área.
 Botón checkbox : <input type="checkbox" name="nombre" value="si" />
 Botón de borrado : <input type="reset" value="Texto_del_botón" />
 Enviar archivos : <input type="file" name="nombre" />
 Campo oculto: <input type="hidden" name="nombre" />
 Botón de imagen : <input type="image" name="nombre" src="ruta_imagen"
/>

Otras etiquetas de formularios


 <fieldset> ... </fieldset> : agrupar varios campos.
 <legend> Texto </legend> : Texto para etiqueta fieldset.
 <label for="ref"> Texto_referencia_al_campo </label> :
referencia del texto con un campo. En la etiqueta del campo incluiremos el atributo
id="ref"

Tablas
 <table> ... </table> : Principio y fin de una tabla
 <tr> ... </tr> : fila de una tabla
 <td> ... </td> : celda normal de una tabla
 <th> ... </th> : celda de cabecera de una tabla
 <caption> ... </caption> : título de una tabla
 <thead> ... </thead> : Sección cabecera de tabla
 <tfoot> ... </tfoot> : Sección pie de tabla
 <tbody> ... </tbody> : Sección del cuerpo de la tabla
 <col> ... </col> : Referencia a la columna de la tabla.
 <colgroup> ... </colgroup> : Referencia a un grupo de columnas. el
atributo span="num" indica el número de columnas.

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
 <meta name="author" content="autor_de_la _página">
 <meta name="description" content="descripción_de_la _página">
 <meta name="copyright" content="copyright_de_la_página">
 <meta name="generator"
content="programa_para_hacer_la_página">
 <meta name="languaje" content="idioma">
 <meta name="revisit_after" content="tiempo de revision (en
inglés)">
 <meta name="robots" content="index/noindex, follow/nofollow">

Para el servidor
 <meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" /> : Indica el tipo de alfabeto usado.
 <meta http-equiv="Refresh" content="tiempo_en_segundos" />
: Indica cada cuanto debe actualizarse la página.

Redireccionamiento
 <meta http-equiv="Refresh" content="tiempo_en_segundos;
URL=ruta" />
Referencia a otros códigos y archivos
 <link rel="stylesheet" href="ruta_del_archivo"
type="text/css" media="all" /> : archivo externo código
CSS.
 <script language="javascript" src="ruta_del_archivo"
type="text/javascript"> </script> : archivo externo código
Javascript.
 <style type="text/css"> ... </style> : Trozo de código CSS
incrustado en la cabecera.
 <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:
 behavior="scroll/slide/alternate"
 direction="left/right"
 scrollamount="num" : píxeles que se desplaza en cada movimiento.
 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:
 type="square|disc|circle|none"
Estilo en etiqueta ol, lista numerada: tipos de viñetas:
 type="1|a|A|I|i"
Atributos en tablas
 border="<num>" : grosor del borde (en tabla o en celdas).
 valign="top|middle|bottom" : Alineación vertical de celdas. (la alineación
horizontal se hace mediante el atributo "align".
 cellspacing="<num>" : separación entre celdas (0 = sin separación).
 colspan="<num>" : fusión de celdas en una fila (el num indica cuántas celdas se
fusionan).
 rowspan="<num>" : fusión de celdas en una columna (el num indica cuántas
celdas se fusionan).

Caracteres especiales
Caracteres especiales fundamentales:

Entida Carácter Descripción


d
&lt; < signo menor que
&gt; > signo mayor que
&amp; & ampersand
&quot; " comillas
&nbsp; (espacio en espacio en blanco
blanco)
&apos; ' apóstrofo

Caracteres especiales para el idioma español

Entida Caráct Descripción


d er
&ntilde ñ ñ - eñe minúscula
;
&Ntilde Ñ Ñ - eñe mayúscula
;
&aacute á á - a con acento minúscula
;
&eacute é é - e con acento minúscula
;
&iacute í í - i con acento minúscula
;
&oacute ó ó - o con acento minúscula
;
&uacute ú ú - u con acento minúscula
;
&Aacute Á Á - A con acento mayúscula
;
&Eacute É É - E con acento mayúscula
;
&Iacute Í Í - i con acento mayúscula
;
&Oacute Ó Ó - O con acento mayúscula
;
&Uacute Ú Ú - u con acento minúscula
;
&uuml; ü ü - u con diéresis minúscula
&Uuml; Ü Ü - u con diéresis mayúscula
&euro; € signo del euro
Frames
<frameset ...> ... </frameset> : Sustituye a la etiqueta body. Atributos
fundamentales:
 rows="num,*,num" : Partición en horizontal (filas)
 cols="num,*,num" : Partición en vertical (columnas)
Solo se admite uno de los dos, para poner los dos debemos anidar etiquetas.
<frame src="ruta" /> : incluidas dentro de etiqueta "frameset".

Atributos en frameset:
 border="num" : Grosor del borde.
 bordercolor="color" : Color del borde.
 frameborder="yes|no|0" : Mostrar/no mostrar el borde, no funciona en I.
Explorer.
 framespacing="num" : Grosor del borde em I. Explorer, con valor 0 se elimina
el borde.

Atributos en frame:
 marginwidth="num" : margen izquierdo y derecho.
 marginheight="num" : margen superior e inferior.
 scrolling="yes|no|auto" : comportamiento de las barras de
desplazamiento.
 noresize="noresize" : Elimina la posibilidad de redimensionarlos.
 bordercolor="color" : Color del borde.
 frameborder="yes|no|0" : Mostrar/no mostrar el borde

Redireccionar enlaces
Los enlaces en frames deben ser redireccionados mediante el atributo target. Valores:
 target="nombre" : Redirecciona hacia otro frame, el cual debe llevar el atributo:
name="nombre".
 target="_blank" : La página se abre en ventana o pestaña aparte en ventana
completa.
 target="_self" : La página se abre en la misma ventana o frame.
 target="_parent" : La página se abre en su elemento padre.
 target="_top" : La página se abre a ventana completa, se elimina la página
actual y todos los frames.

Etiqueta iframe: atributos


 src="ruta_URL" : Ruta donde esta el archivo.
 width="num" : Ancho de la ventana
 height="num" : Alto de la ventana
 scrolling="yes|no|auto" : comportamiento de las barras de
desplazamiento.
 name="nombre" : imprescindible para redireccionar enlaces mediante "target".
Insertar multimedia
 Mediante enlaces: <a href="ruta_archivo">Multimedia</a>
 Etiqueta embed: Atributos: src, loop,playcount, type, width, height.
 Etiqueta object: parámetros en etiqueta <param name="..." value="..." />
 Mediante aplicaciones externas: Youtube, Google videos, Goeart, etc.

También podría gustarte