Resumen HTML y Html5

HTML (HIPERTEXT MARKUP LENGUAGE)
1. INTRODUCCIN A HTML:
HTML se puede traducir al castellano como Lenguaje de Marcado de Hipertexto. A diferencia de

un lenguaje de scripting o programacin que usa secuencias de comandos para realizar procesos, un
lenguaje de marcado usa diferentes etiquetas para identificar el contenido.
Un ejemplo de etiqueta HTML: <p> Soy un prrafo </p>.
1.1. LA ESTRUCTURA DE LA WEB. DISEO WEB MODERNO
Saber HTML es esencial para cualquier diseador de web. El diseo habitual de una pgina web
actual se basa en:
- HTML: Estructura de la pgina

- CSS: Presentacin de la pgina
- JavaScript: Front-end, comportamiento (scripting del lado del cliente)
- PHP (o similar): Backend, Gestin dinmica de contenido (scripting del lado del servidor)
- CMS: Sistema de administracin de contenidos
1.2. ESTRUCTURA BSICA DE UN DOCUMENTO
Aunque se han lanzado varias versiones de HTML, sus fundamentos siguen siendo iguales
(Estructuras con etiquetas de apertura y cierre).
1.2.1. LA ETIQUETA <HTML>
La estructura de un documento HTML se asemeja a un sndwich. As como el sndwich tiene dos

rebanadas de pan, el documento HTML tiene etiquetas html de apertura y cierre. Estas etiquetas
envuelven todo lo dems:
<html>
</html>
1.2.2. LA ETIQUETA <HEAD>
Inmediatamente despus de la etiqueta de apertura <html> se encuentra la cabecera del documento,

que se identifica por las etiquetas head de apertura y cierre. La cabecera o head de un documento
contiene todos los elementos no visuales que ayudan a que la pgina funcione:
<html>
<head> </head>
</html>
1.2.3. LA ETIQUETA <BODY>
La etiqueta <body> sigue despus de la etiqueta head. Todos los elementos visuales estn
contenidos dentro de la etiqueta body.
Algunos de los elementos que puede contener la etiqueta body son: encabezados, prrafos, citas,
imgenes e hipervnculos.
Por tanto, la estructura bsica de un documento HTML es:
<html>
<head>
</head>
<body>
</body>
</html>
1.3. CREANDO TU PRIMERA PGINA CON HTML
Los archivos HTML son archivos de texto, por lo que se puede usar cualquier editor de texto plano
para crear la pgina web. Los archivos HTML se deben guardar con extensin .html o .htm.
1.3.1. LA ETIQUETA <TITLE>
Para colocar un ttulo en la pestaa que describa la pgina web, se agrega un elemento <title> en la
seccin head o cabecera:
<html>
<head>
<title> Ttulo de la pgina </title>
</head>
<body>
Esta es una lnea de texto
</body>
</html>
El ttulo es importante para describir la pgina y es el que usan los motores de bsqueda.
2. CONCEPTOS BSICOS DE HTML
2.1. PRRAFOS
2.1.1. EL ELEMENTO <P>
Para crear un prrafo, simplemente se escribe dentro del elemento <p>, entre las etiquetas de
apertura y cierre:
<html>
<head>
<title>Ttulo de la pgina</title>
</head>
<body>
<p>Esto es un prrafo</p>
<p>Esto es otro prrafo</p>
</body>
</html>
2.1.2. SALTO DE LNEA SENCILLO
Se usa la etiqueta <br/> para agregar un salto de lnea sin empezar un nuevo prrafo:
<html>
<head>
<title>Ttulo de pgina</tilte>
</head>
<body>
<p>Esto es un prrafo.</p>
<p>Esto es otro prrafo.</p>
<p>Esto es <br/> un salto de lnea.</p>
</body>
</html>
2.2. FORMATO DE TEXTO
2.2.1. ELEMENTOS DE FORMATO
En HTML hay una lista de elementos que especifican el estilo de texto. Los elementos de formato
fueron diseados para mostrar tipos especiales de texto:
Negrita <b>...</b> Grande <big>...</big> Cursiva <i>...</i>
Pequeo <small>...</small> Reforzado <strong>...</strong>
Subndice <sub>...</sub> Superndice <sup>...</sup> Insertado <ins>...</ins>
Borrado (Tachado) <del>...</del>
Cada uno de estos elementos de formato muestran un texto con las caractersticas especificadas.
2.3. ENCABEZADOS, LNEAS Y COMENTARIOS
2.3.1. ENCABEZADOS HTML
HTML incluye seis niveles de encabezados, clasificados segn su importancia numricamente.

Estos son: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
Ejemplo:
<html>
<head>
<title>Ttulo de la pgina</title>
</head>
<body>
<h1> Encabezado 1 </h1>
</body>
</html>
2.2.2. LNEAS HORIZONTALES
Para crear una lnea horizontal, se usa la etiqueta <hr/>:

<html>
<head>
<title>Ttulo</title>
</head>
<body>
<p> Primer prrafo </p>
<hr/>
<p> Segundo prrafo</p>
</body>
</html>
2.2.3. COMENTARIOS
El explorador no muestra los comentarios, pero estos ayudan a documentar el cdigo HTML para
agregar descripciones, recordatorios y otras notas.
El modelo por defecto de los comentarios es:


2.4. ELEMENTOS
Los documentos HTML estn hechos de elementos HTML. Un elemento HTML se escribe usando
una etiqueta de inicio, una etiqueta de cierre, y con el contenido en medio de ambas etiquetas.
Los documentos HTML consisten en elementos HTML anidados. En el ejemplo siguiente, el

elemento body incluye las etiquetas <p>, <br/> y el contenido:
<html>
<head>
<title> Ttulo</title>
</head>
<body>
<p> Esto es un prrafo<br/></p>
</body>
</html>
Algunos elementos son bastante pequeos. Como no podemos agregar contenido dentro de una
etiqueta de salto de lnea (<br/>), este no tiene una etiqueta de apertura ni tampoco de cierre.
2.5. ATRIBUTOS
Los atributos proveen informacin adicional sobre un elemento o etiqueta, a la vez que lo
modifican. La mayora de atributos tienen un valor, el valor modifica el elemento.
<p align = center> Este texto est alineado hacia el centro </p>
En el ejemplo, el valor de center indica que el contenido dentro del elemento p debera estar
alineado hacia el centro.
2.5.1. ATRIBUTOS DE DIMESIN
Este tipo de atributos modifica el tamao de los elementos, como ejemplo, podemos modificar la
linea horizontal para que tenga un ancho de 50 pixels.
Esto se puede hacer usando el atributo width:

<hr width = 50px/>
Tambin se puede modificar el ancho de un elemento usando porcentajes: width=50%.
2.5.2. EL ATRIBUTO ALIGN
El atributo align se usa para especificar como alinear el texto. En el siguiente ejemplo, tendremos
un prrafo alineado hacia el centro y una lnea que est alineada hacia la derecha.
<html>
<head>
<title>Atributos</title>
</head>
<body>
<p align=center> Esto es un texto <br/>
<hr width=10% align=right/> Esto
tambin es un texto.
</p>
</body>
</html>
2.6. IMAGENES
2.6.1. LA ETIQUETA <IMG>
La etiqueta <img> se usa para insertar una imagen. Contiene slo atributos y no tiene una etiqueta
de cierre. La URL de la imagen (direccin) puede ser definida usando el atributo src:
<img src =imagen.jpg/>
2.6.2. UBICACIN DE LA IMAGEN
Para que el explorador web pueda desplegar una imagen, necesitamos colocar dentro de comillas la
ubicacin de la imagen como valor del atributo src.
Por ejemplo, si tenemos una foto llamada rbol.jpg en la misma carpeta que el archivo HTML, su
cdigo debera verse as:
<html>
<body>
<img src=tree.jpg alt=/>
</body>
</html>
En caso de que la imagen no pueda ser mostrada, el atributo alt especifica un texto alternativo que
describe la imagen en palabras. El atributo alt es requerido.
2.6.3. CAMBIAR EL TAMAO DE UNA IMAGEN
Para definir el tamao de una imagen, se usan los atributos width y height (ancho y alto). El valor
se puede especificar en pixeles o como un porcentaje.
La carga de imgenes toma tiempo, usar imgenes grandes puede volver lenta la pgina web, as
que se deben usar con precaucin.
2.6.4. BORDE DE UNA IMAGEN
Por defecto, una imagen no tiene bordes. Se usa el atributo border dentro de la etiqueta <img> para
crear un borde alrededor de la imagen:
<img src = arbo.jpg height = 150px width = 150px border = 1px alt = />
2.7. HIPERVNCULOS
Los hipervnculos tambin son una parte fundamental de cualquier pgina web. Se puede agregar
hipervnculos a textos o imgenes que luego permitirn al usuario hacer click en ellos para luego ser
dirigidos a otro archivo o pgina web.
2.7.1. LA ETIQUETA <a>
En HTML, los hipervnculos son definidos usando la etiqueta <a>. Usando el atributo href para
definir la direccin del hipervnculo:
<a href = direccin hipervnculo> Nombre del enlace </a>
2.7.2. EL ATRIBUTO TARGET
El atributo target especifica donde abrir el documento vinculado. Dndole un valor _blank al
atributo, abrir el hipervnculo en una nueva ventana o pestaa:
<a href = direccin hipervnculo target = _blank> Nombre del enlace </a>
2.8. LISTAS
2.8.1. LISTAS HTML OREDENADAS
Una lista ordenada empieza por la etiqueta <ol> (ordenated-list) y cada tem es definido por la
etiqueta <li> (list item). Por ejemplo:
<html>
<body>
<ol>
<li>Rojo</li>
<li>Azul</li>
<li>Verde</li>
</ol>
</body>
</html>
Los tems de la lista se marcaran automticamente con nmeros.

2.8.2. LISTAS HTML SIN ORDENAR
Una lista HTML sin ordenar tiene exactamente la misma estructura, pero su etiqueta es <ul>
(unordenated-list) en vez de ser <ol>. Los tems de la lista se marcan con vietas.
2.9. TABLAS
Las tablas se definen con las etiquetas <table>. Las tablas se dividen en filas con la etiqueta <tr>
(table row). Las filas de la tabla se dividen en columnas (datos de la tabla) con la etiqueta <td>
(table data).
Ejemplo de una tabla 1x3:

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Las etiquetas de los datos de tabla <td> actan como contenedores de datos dentro de la tabla.
Pueden contener todo tipo de elementos HTML como texto, imgenes, listas, otras tablas y dems.
2.9.1. LOS ATRIBUTOS BORDER Y COLSPAN
Un borde puede ser agregado a una tabla usando el atributo border:

<table border =2 />
La celda de una tabla, puede expandirse entre dos o ms columnas usando el atributo colspan
(columns expand) o entre dos o ms filas usando el atributo rowspan (rows expand):
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td><br/></td>
<td colspan = 2></td>
</tr>
</table>
2.9.2. LOS ATRIBUTOS ALIGN Y BGCOLOR
Para cambiar la posicin de una tabla, usamos el atributo align dentro de la etiqueta table:
<table align = center />
La tabla de el ejemplo anterior estar alineada en el centro de la pgina web.

Tambin podemos especificar un color de fondo para una casilla determinada, una fila entera o toda
la tabla usando el atributo bgcolor (back-ground color):
<table border = 2>
<tr>
<td bgcolor = red> Casilla Roja </td>
<td> Bla bla bla </td>
</tr>
</table>
Para dar estilo, CSS es ms efectivo que HTML, y por ello el uso de CSS es ms frecuente para
estilizar pginas.
2.10. ELEMENTOS INLINE Y BLOCK
En HTML la mayora de elementos son definidos como elementos a nivel de bloque (block) o a
nivel de lnea (line).
Los elementos a nivel de bloque empiezan desde una nueva lnea. Por ejemplo: (<h1>, <form>,
<li>, <ul>, <ol>, <p>, <pre>, <table>, <div>, etc.).
Los elementos a nivel de lnea son normalmente desplegados sin los saltos de lnea. Por ejemplo:
(<b>, <a>, <strong>, <img>, <input>, <em>, <span>, etc.).
El elemento <div> es un elemento a nivel de bloque que es a menudo utilizado como contenedor
para otros elementos HTML. Cuando se utiliza en conjunto con CSS, el elemento <div> puede ser
utilizado para darle estilo a los bloques de contenido:
<html>
<body>
<h1>Encabezado</h1>
<div style = background-color:green; color:white; padding:20px;>
<p> Prrafo de contenido </p>
<p> Otro prrafo de contenido </p>
</div>
</body>
</html>
El elemento <span> es un elemento a nivel de lnea que a menudo es utilizado como contenedor
para algn texto. Cuando se utiliza en conjunto con CSS, el elemento <span> puede ser utilizado
para darle estilo a partes del texto:
<html>
<body>
<h2>Algun mensaje <span style = color:red> importante</span></h2>
</body>
</html>
2.10.1. TIPOS DE ELEMENTOS
Otros elementos pueden ser usados como elementos de nivel de bloque o elementos de nivel de
lnea. Esto incluye los siguientes elementos:
APPLET applet de Java embebido
INFRAME marco de lnea
INS texto insertado
MAP mapa de imagen
OBJECT objeto incrustado
SCRIPT secuencia de comandos dentro de un documento HTML
Se pueden insertar elementos de nivel de lnea dentro de elementos de nivel de bloque. Por ejemplo,
se puede tener diversos elementos <span> dentro de un elemento <div>. Pero los elementos de
nivel de lnea no pueden contener ningn elemento de nivel de bloque.
2.11. FORMULARIOS
2.11.1. EL ELEMENTO <form>
Los formularios HTML son usados para recoger informacin del usuario. Los formularios son
definidos usando el elemento <form>, con sus etiquetas de apertura y cierre:
<body>
<form>...</form>
</body>
Se puede usar el atributo action para apuntar a la pgina web que cargar despus de que el usuario
enve el formulario.
<form action = http://www.paginawebinventada.com>...</form>
Normalmente, el formulario se enva a una pgina web en un servidor web.
2.11.2. LOS ATRIBUTOS METHOD Y NAME
El atributo method especifica el mtodo HTTP (GET o POST) a ser usado cuando los formularios
son enviados.
<form action = url method = GET>...</form> o bien,
<form action = url method = POST>...</form>
Cuando usamos el mtodo GET, los datos del formulario sern visibles en la direccin de la pgina.
Utilizamos POST si el formulario est actualizando datos o incluye informacin sensible
(contraseas). POST ofrece mayor seguridad porque los datos enviados no son visibles en la
direccin de la pgina.
El atributo name especifica un nombre para el formulario.
Para capturar los datos de entrada del usuario, necesitamos los elementos del formulario
correspondientes, como por ejemplo los campos de texto.
El elemento <input> tiene muchas variaciones, dependiendo del tipo de atributo que se le asocie.
Puede ser texto, contrasea, radio, URL, envo, etc.
El siguiente ejemplo muestra un formulario solicitando el nombre de usuario y contrasea, por

tanto, usar el mtodo POST, ya que maneja informacin sensible.
<form action =url method = POST>
<input type=text name = usuario/> <br/>
<input type=password name=contrasea/>
</form>
2.11.3. ATRIBUTOS DE <input>
Ya hemos visto el atributo type y name. Si cambiamos el tipo input a radio, permitiremos al
usuario seleccionar slo una de un nmero de opciones desplegadas:
<input type = radio name = gender value = male/> Masculino <br/>
<input type = radio name = gender value = female/> Femenino <br/>
El tipo checkbox permite al usuario seleccionar ms de una opcin:

<input type = checkbox name = gender value=1/> Masculino <br/>
El tipo submit enva el formulario a la direccin especificada en su atributo action:

<input type = submit value = Enviar />
Despus de que el formulario es enviado, los datos deberan ser procesados en el servidor usando un
lenguaje de programacin, como PHP.
2.14. COLORES HTML
Los colores en HTML se expresan como valores hexadecimales. Se pueden consultar en la escala de
colores hexadecimal
2.14.1. COLORES DE FONDO Y DE FUENTE
Los atributos bgcolor y la etiqueta font pueden ser usados, respectivamente, para cambiar el color
de fondo de la pgina web o el color de la fuente (texto). Veamos un ejemplo de fondo azul oscuro
con un encabezado blanco.
<html>
<body bgcolor = #000099>
<h1>
<font color = #FFFFFF> Encabezado blanco </font>
</h1>
</body>
</html>
2.15. MARCOS
2.15.1. LA ETIQUETA <frame>
Una pgina puede dividirse en marcos usando un documento especial de marco. La etiqueta
<frame> define una ventana especfica (marco) dentro de un <frameset>. Cada <frameset> puede
tener diferentes atributos, como borde, desplazamiento, la habilidad de redimensionar, etc.
El elemento <frameset> especifica el nmero de columnas o filas en el conjunto de marcos o

framset, y tambin el porcentaje o nmero de pxeles de espacio que cada uno ocupa:
<frameset cols = 100, 25%, *>...</frameset>
<frameset rows = 100, 25%, *>...</frameset>
La etiqueta <frameset> no est soportada en HTML5.
2.15.2. TRABAJANDO CON MARCOS
Use el atributo noresize para impedir que el usuario pueda redimensionar un elemento <frame>:
<frame noresize = noresize>
El contenido del marco debe ser definido usando el atributo src. Finalmente, el elemento
<noframes> provee una alternativa para los exploradores que no soportan marcos para visualizar la
pgina. El elemento puede contener una pgina alternativa, completa con una etiqueta body y otros
elementos.
<frameset cols = 25%, 50%, 25%>
<frame src = a.htm />
<frame src = b.htm />
<frame src = c.htm />
<noframes> Los marcos no son soportados </noframes>
</frameset>
La etiqueta <frame> no est soportada en HTML5.
HTML 5
1. INTRODUCCIN A HTML 5
Una de las primeras caractersticas que se nota al escribir un documento en HTML 5 es la

declaracin del DOC TYPE (tipo de documento):
<!DOCTYPE HTML>
La codificacin de caracteres (charset character set) tambin ha sido simplificada. La

codificacin de caracteres por defecto en HTML 5 es UFT-8:
<meta charset = UTF-8>
NUEVOS ELEMENTOS DE HTML 5:

<article>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <footer>, <header>,
<nav>, <output>, <progress>, <section>, <video>, y ms.
NOVEDADES EN HTML 5:
Formularios
La especificacin de Formularios Web 2.0 permite la creacin de formularios ms potentes y con
experiencias de usuario ms enriquecedoras.
Selectores de fecha, selectores de color, y controles de paso numricos han sido agregados.
Los tipos de campo de entrada ahora incluyen email, bsqueda y URL.
Los mtodos de formulario PUT y DELETE son ahora soportados.
API integrada (Interfaces de Programacin de Aplicaciones)

Arrastrar y Soltar
Audio y Video
Aplicaciones Web sin conexin
Historial
Almacenamiento Local
Geolocalizacin
Mensajera Web
2. MODELOS DE CONTENIDO
En HTML los elementos pertenecan tpicamente al modelo de contenido a nivel de bloque o a nivel
de lnea. En HTML 5 se introducen siete modelos de contenido principales.
Metadata
Embedded (Incrustado)
Interactive (Interactivo)
Heading (Encabezado)
Phrasing (Expresin)
Flow (Flujo)
Sectioning (Seccionamiento)
Los modelos de contenido de HTML 5 se han diseado para hacer la estructura de marcado ms til
para el explorador y el diseo web.
Metadata: Contenido que define la presentacin o comportamiento del resto del contenido. Estos
elementos son encontrados en el head (la cabecera) del documento.
Elementos: <base>, <link>, <meta>, <noscript>, <script>, <style>, <title>
Incrustado: Contenido que importa otros recursos al documento.

Elementos: <audio>, <video>, <canvas>, <iframe>, <img>, <math>, <object>, <svg>
Interactivo: Contenido especficamente destinado para la interaccin con el usuario.

Elementos: <a>, <audio>, <video>, <button>, <details>, <embed>, <iframe>, <img>, <input>,
<label>, <object>, <select>, <textarea>
Encabezado: Define un encabezado de seccin.

Elementos: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>
Expresin: Este modelo tiene un nmero de elementos a nivel de lnea en comn con HTML 4.
Elementos: <img>, <span>, <strong>, <label>, <br/>, <small>, <sub> y ms.
Flujo: Contiene la mayora de los elementos HTML 5 que seran incluidos en el flujo normal del
documento.
Seccionamiento: Define el alcance de encabezados, contenido, navegacin y pies de pgina.

Elementos: <article>, <aside>, <nav>, <section>
Como vemos, el mismo elemento puede pertenecer a ms de un modelo de contenido. Los distintos
modelos de contenido se sobreponen en ciertas reas, dependiendo de cmo estn siendo usados.
3. ESTRUCTURA DE PGINA HTML 5
Una estructura de pgina genrica HTML 5 se ve as:
puede ser que no se necesiten algunos de estos elementos, dependiendo de la estructura de la

pgina.
4. HEADER, NAV Y FOOTER
4.1. EL ELEMENTO <header>
En HTML 5, se define el encabezado con una simple etiqueta <header>. El elemento <header> es
apropiado para ser usado dentro de la etiqueta <body>:
<!DOCTYPE html>
<hmtl>
<head>...</head>
<body>
<header>
<h1> Encabezado ms importante </h1>
<h3> Encabezado menos importante </h3>
</header>
</body>
</html>
No se debe confundir la etiqueta <header> con la etiqueta <head>.

4.2. EL ELEMENTO <footer>
El elemento <footer> tambin es usado ampliamente. Generalmente, al hablar del footer nos
referimos a una seccin localizada en la parte inferior de la pgina web.
<footer>...</footer>
Dentro de las etiquetas <footer> anteriores se suele proveer la siguiente informacin:

- Informacin de contacto
- Poltica de Privacidad
- Iconos de redes sociales
- Trminos de Servicio
- Informacin sobre Derechos de Autor
- Mapa del sitio y documentos relacionados
4.3. EL ELEMENTO <nav>
Esta etiqueta representa una seccin de una pgina que conecta a otras pginas o a ciertas secciones
dentro de la pgina. Esto sera una seccin con hipervnculos de navegacin;
Ejemplo de bloque grande de hipervnculos de navegacin:
<nav>
<ul>
<li><a href = #> Home </a></li>
<li><a href = #> Servicios </a></li>
<li><a href = #> Sobre nosotros </a></li>
</ul>
</nav>
No todos los hipervnculos en un documento deberan estar dentro de un elemento <nav>. El

elemento <nav> est hecho slo para grandes bloques de hipervnculos de navegacin. Tpicamente,
el elemento <footer> tiene una lista de hipervnculos que no necesitan estar en un elemento <nav>.
5. ARTICLE, SECTION Y ASIDE
5.1. EL ELEMENTO <article>
El elemento <article> es una pieza autnoma, de contenido independiente que puede ser usada y
distribuida separadamente del resto de la pgina o sitio. Esto podra ser un post de un foro, una
revista o un artculo de revista, una entrada de blog, un comentario, un widget interactivo o gadget,
o cualquier otra pieza de contenido independiente.
El elemento <article> remplaza al elemento <div>, ampliamente usado en HTML 4.

<article>
<h1>El ttutlo del Artculo</h1>
<p>Contenidos del elemento artculo</p>
</article>
Cuando un elemento <article> es anidado, el elemento interior representa un artculo relacionado al

elemento exterior. Por ejemplo, comentarios de un post en un blog pueden ser elementos <article>
anidados en <article> representando el post del blog.
5.2. EL ELEMENTO <section>
<section> es un contenedor lgico de la pgina web o artculo. Las secciones pueden ser usadas
para dividir contenido dentro de un artculo.
Por ejemplo, una pgina principal podra tener una seccin para introducir a la compaa, otra para
tems de noticias y tambin otra para la informacin de contacto.
Cada <section> debera ser identificada, tpicamente incluyendo un encabezado (elemento h1-h6)
como un hijo del elemento <section>:
<article>
<h1>Bienvenido</h1>
<section>
<h1> Encabezado</h1>
<p> contenido o imagen </p>
</section>
</article>
Si tiene sentido ubicar separadamente el contenido de un elemento <section>, use mejor un

elemento <article>.
5.3. EL ELEMENTO <aside>
El elemento <aside> es contenido secundario o tangencial que podra ser considerado separado pero
indirectamente relacionado al contenido principal. Este tipo de contenido es a veces representado en
barras laterales. Cunado una etiqueta <aside> es usada dentro de una etiqueta <article>, el
contenido de <aside> debera estar especficamente relacionado a ese artculo.
<article>
<h1>Regalos para todos </h1>
<p> Este sitio web ser el mejor lugar para escoger regalos </p>
<aside>
<p> Los regalos sern entregados a usted dentro de las siguientes 24 horas </p>
</aside>
</article>
Cuando la etiqueta <aside> se usa fuera de la etiqueta <article>, su contenido debera estar
relacionado al contenido que est a su alrededor.

Resumen HTML y Html5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Resumen HTML y Html5

Uploaded by

Copyright:

Available Formats

HTML (HIPERTEXT MARKUP LENGUAGE)

HTML se puede traducir al castellano como Lenguaje de Marcado de Hipertexto. A diferencia de

Un ejemplo de etiqueta HTML: <p> Soy un prrafo </p>.

1.1. LA ESTRUCTURA DE LA WEB. DISEO WEB MODERNO

- HTML: Estructura de la pgina

1.2. ESTRUCTURA BSICA DE UN DOCUMENTO

1.2.1. LA ETIQUETA <HTML>

La estructura de un documento HTML se asemeja a un sndwich. As como el sndwich tiene dos

1.2.2. LA ETIQUETA <HEAD>

Inmediatamente despus de la etiqueta de apertura <html> se encuentra la cabecera del documento,

1.2.3. LA ETIQUETA <BODY>

1.3. CREANDO TU PRIMERA PGINA CON HTML

1.3.1. LA ETIQUETA <TITLE>

2. CONCEPTOS BSICOS DE HTML

2.1.1. EL ELEMENTO <P>

2.1.2. SALTO DE LNEA SENCILLO

2.2. FORMATO DE TEXTO

2.2.1. ELEMENTOS DE FORMATO

Negrita <b>...</b> Grande <big>...</big> Cursiva <i>...</i>

Pequeo <small>...</small> Reforzado <strong>...</strong>

Subndice <sub>...</sub> Superndice <sup>...</sup> Insertado <ins>...</ins>

Borrado (Tachado) <del>...</del>

2.3. ENCABEZADOS, LNEAS Y COMENTARIOS

2.3.1. ENCABEZADOS HTML

HTML incluye seis niveles de encabezados, clasificados segn su importancia numricamente.

Para crear una lnea horizontal, se usa la etiqueta <hr/>:

El modelo por defecto de los comentarios es:

Los documentos HTML consisten en elementos HTML anidados. En el ejemplo siguiente, el

Esto se puede hacer usando el atributo width:

Tambin se puede modificar el ancho de un elemento usando porcentajes: width=50%.

2.5.2. EL ATRIBUTO ALIGN

2.6.1. LA ETIQUETA <IMG>

2.6.2. UBICACIN DE LA IMAGEN

2.6.4. BORDE DE UNA IMAGEN

2.7.1. LA ETIQUETA <a>

2.7.2. EL ATRIBUTO TARGET

2.8.1. LISTAS HTML OREDENADAS

Los tems de la lista se marcaran automticamente con nmeros.

Ejemplo de una tabla 1x3:

2.9.1. LOS ATRIBUTOS BORDER Y COLSPAN

Un borde puede ser agregado a una tabla usando el atributo border:

2.9.2. LOS ATRIBUTOS ALIGN Y BGCOLOR

La tabla de el ejemplo anterior estar alineada en el centro de la pgina web.

2.10. ELEMENTOS INLINE Y BLOCK

2.10.1. TIPOS DE ELEMENTOS

2.11.1. EL ELEMENTO <form>

Normalmente, el formulario se enva a una pgina web en un servidor web.

2.11.2. LOS ATRIBUTOS METHOD Y NAME

El atributo name especifica un nombre para el formulario.

El siguiente ejemplo muestra un formulario solicitando el nombre de usuario y contrasea, por

2.11.3. ATRIBUTOS DE <input>

El tipo checkbox permite al usuario seleccionar ms de una opcin:

El tipo submit enva el formulario a la direccin especificada en su atributo action:

2.14. COLORES HTML

2.14.1. COLORES DE FONDO Y DE FUENTE

2.15.1. LA ETIQUETA <frame>

El elemento <frameset> especifica el nmero de columnas o filas en el conjunto de marcos o

2.15.2. TRABAJANDO CON MARCOS

La etiqueta <frame> no est soportada en HTML5.

Una de las primeras caractersticas que se nota al escribir un documento en HTML 5 es la

La codificacin de caracteres (charset character set) tambin ha sido simplificada. La

NUEVOS ELEMENTOS DE HTML 5:

API integrada (Interfaces de Programacin de Aplicaciones)

Incrustado: Contenido que importa otros recursos al documento.