0% encontró este documento útil (0 votos)

0 vistas117 páginas

1 - HTML

Cargado por

edievale

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

0 vistas117 páginas

1 - HTML

Cargado por

edievale

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

HTML

HTML Introducción

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Ejemplo Explicado

• La declaración DOCTYPE define el tipo de documento

• El texto entre <html> y </ html> describe la página web
• El texto entre <body> y </ body> es el contenido de la página visible
• El texto entre h1 y </ h1> se muestra como una partida
• El texto entre <p> y </ p> se muestra como un párrafo

La declaración es la sintaxis para la última generación de HTML <DOCTYPE html!> - HTML5.

¿Qué es HTML?

HTML es un lenguaje para describir páginas web.

• HTML significa H Yper T ext M arkup L enguaje

• HTML no es un lenguaje de programación, es un lenguaje de marcas
• Un lenguaje de marcas es un conjunto de etiquetas de marcado
• El propósito de las etiquetas son para describir el contenido de la página

Etiquetas HTML

Etiquetas de formato HTML se llaman las etiquetas HTML

• Etiquetas HTML son palabras clave (nombres de las etiquetas) rodeadas por corchetes angulares como
<html>
• Etiquetas HTML que suelen venir en parejas como <b> y </ b>
• La primera etiqueta en una pareja es la etiqueta inicial, la segunda etiqueta es la etiqueta de cierre
• La etiqueta final se escribe como la etiqueta inicial, con una barra diagonal antes del nombre de la
etiqueta
• Inicio y fin son también llamados etiquetas de apertura y cierre de etiquetas
1
Página

<tagname> contenido </ TagName>

Elementos HTML

"HTML tags" y "elementos HTML" se utilizan a menudo para describir la misma cosa.

Pero, en rigor, un elemento HTML es todo entre la etiqueta inicial y la etiqueta de cierre, incluyendo las etiquetas:

Elemento HTML:

<p> Este es un párrafo. </ p>

Documentos HTML = Páginas Web

• Documentos HTML describir páginas web

• Los documentos HTML contienen etiquetas HTML y texto sin formato
• Los documentos HTML son también llamados páginas web

Navegadores Web

El propósito de un navegador web (Chrome, Internet Explorer, Firefox) es leer los documentos HTML y mostrarlos
como páginas web. El navegador no muestra las etiquetas HTML, pero utiliza las etiquetas de interpretar el
contenido de la página:

Estructura de una página HTML

A continuación se muestra una visualización de una estructura de página HTML:

<html>
<body>
<h1> Este es un título </ h1>
<p> Este es un párrafo. </ p>
<p> Esto es otro párrafo. </ p>
</ Body>
</ Html>
2
Página
HTML Básico - 4 Ejemplos
No se preocupe si los ejemplos utilizan etiquetas que no han aprendido.

Usted aprenderá acerca de ellos en los próximos capítulos.

Títulos HTML

Títulos HTML se definen con la <h1> a las etiquetas <h6>.

Ejemplo
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>

Párrafos HTML

Párrafos HTML se definen con la etiqueta <p>.

Ejemplo
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

HTML Links

Vínculos HTML se definen con la etiqueta <a>.

Ejemplo
<a href="[Link] is a link</a>

Nota: La dirección del enlace se especifica en el atributo href.

(Usted aprenderá acerca de los atributos en un capítulo posterior de este tutorial).

3
Página
Imágenes de HTML

Imágenes HTML se definen con la etiqueta <img>.

Ejemplo
<img src="[Link]" width="104" height="142" />

Nota: El nombre de archivo y el tamaño de la imagen se proporcionan como atributos.

HTML Elementos
Los documentos HTML se definen por elementos HTML.

Elementos HTML

Un elemento HTML de todo, desde la etiqueta de inicio para la etiqueta de cierre:

Inicio * etiqueta Elemento de contenido * Fin etiqueta

<p> Este es un párrafo </ P>
<a href="[Link]"> Este es un enlace </ A>
<br />

* La etiqueta de inicio se llama a menudo la etiqueta de apertura . La etiqueta final se llama a menudo
la etiqueta de cierre .

Sintaxis elemento HTML

• Un elemento HTML comienza con una etiqueta de inicio / etiqueta de apertura

• Un elemento HTML termina con un extremo de la etiqueta / etiqueta de cierre
• El contenido del elemento es todo lo que entre el inicio y el final de la etiqueta
• Algunos elementos HTML tienen contenido vacío
• Los elementos vacíos se cerró en la etiqueta de inicio
• Mayoría de los elementos HTML pueden tener atributos

Consejo: Usted aprenderá acerca de los atributos en el siguiente capítulo de este tutorial.

Anidados elementos HTML

Mayoría de los elementos HTML se pueden anidar (puede contener otros elementos de HTML).

Documentos HTML anidadas consisten en elementos HTML.

4
Página
Ejemplo de documento HTML

<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>

El ejemplo anterior contiene tres elementos HTML.

Ejemplo HTML explicado

El elemento <p>:

<p>This is my first paragraph.</p>

El elemento <p> define un párrafo en el documento HTML.

El elemento tiene un <p> inicio y una etiqueta de cierre </ p>.
El contenido de los elementos es la siguiente: Este es mi primer párrafo.

El elemento <body>:

<body>
<p>This is my first paragraph.</p>
</body>

El elemento <body> define el cuerpo del documento HTML.

El elemento tiene una etiqueta de inicio y <body> una etiqueta de cierre </ body>.
El contenido del elemento es otro elemento HTML (elemento PA).

El elemento <html>:

<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>

El elemento <html> define el documento HTML completo.

El elemento tiene una etiqueta de inicio <html> y una etiqueta de cierre </ html>.
El contenido del elemento es otro elemento HTML (elemento body).

No se olvide de la etiqueta de cierre

Algunos elementos HTML se muestren correctamente incluso si se olvida de la etiqueta de cierre:

<p>This is a paragraph
<p>This is a paragraph

El ejemplo anterior funciona en la mayoría de los navegadores, ya que la etiqueta de cierre se considera opcional.

Nunca confíe en esto. Muchos elementos HTML se producen resultados inesperados y / o errores si se olvida de la
etiqueta de cierre.
5
Página
Vaciar elementos HTML

Elementos HTML que no tienen contenido se llaman elementos vacíos.

MedlinePlus es un elemento vacío sin una etiqueta de cierre (la etiqueta MedlinePlus define un salto de línea).

Consejo: En XHTML, todos los elementos deben estar cerradas. Adición de una barra dentro de la etiqueta de
inicio, como /> <br, es la forma correcta de cerrar elementos vacíos en XHTML (y XML).

HTML Consejo: Utilice etiquetas en minúsculas

Las etiquetas HTML no distinguen entre mayúsculas y minúsculas: <P> significa lo mismo que <p>.Muchos sitios
web utilizan mayúsculas etiquetas HTML.

W3Schools utilizar las etiquetas en minúsculas porque el Consorcio World Wide Web
(W3C)recomienda minúsculas en HTML 4, y exige etiquetas minúsculas en XHTML.

Copiar Atributos
Los atributos proporcionan información adicional acerca de los elementos HTML.

Copiar Atributos

• Elementos HTML pueden tener atributos

• Los atributos proporcionan información adicional acerca de un elemento
• Los atributos siempre se especifican en la etiqueta de inicio
• Atributos vienen en pares nombre / valor como: nombre = "valor"

Atributo Ejemplo

Vínculos HTML se definen con la etiqueta <a>. La dirección del enlace se especifica en el atributo href :

Ejemplo
<a href="[Link] is a link</a>

Siempre Citar valores de atributo

Los valores de atributo siempre debe ir entre comillas.

Las comillas dobles estilo son los más comunes, pero las comillas simples de estilo también lo estarán.

Sugerencia: En algunos casos raros, cuando el valor del atributo en sí contiene comillas, es necesario utilizar
comillas simples: name = "John" Escopeta "Nelson"
6
Página
HTML Sugerencia: Utilizar atributos en minúsculas

Los nombres de atributos y valores de atributos distinguen entre mayúsculas y minúsculas.

Sin embargo, el World Wide Web Consortium (W3C) recomienda atributos en minúsculas / valores de los atributos
en su recomendación HTML 4.

Las nuevas versiones de (X) HTML exigirá atributos en minúsculas.

Copiar atributos de referencia

Una lista completa de los atributos legales para cada elemento HTML aparece en nuestro:

Ordenadas alfabéticamente
DTD : indica en qué HTML 4.01 / DTD XHTML 1.0 Se permite la etiqueta. S = estricta, T = Transición, y F =
Frameset

Etiqueta Descripción DTD

Define un comentario STF
<!DOCTYPE> Define el tipo de documento STF
<a> Define un ancla STF
<abbr> Define una abreviatura STF
<acronym> Define un acrónimo STF
<address> Define la información de contacto del autor / propietario de un documento STF
<applet> Desaprobado. Define un applet embebido TF
<area /> Define un área dentro de una imagen de mapa de STF
<b> Define el texto en negrita STF
<base /> Especifica la URL base / target para todas las URL relativa en un documento STF
<basefont /> Desaprobado. Especifica el color predeterminado, el tamaño o la fuente para todo el TF
texto en un documento
<bdo> Reemplaza la dirección del texto actual STF
<big> Define texto grande STF
<blockquote> Define una larga cita STF
<body> Define el cuerpo del documento STF
<br /> Define un solo salto de línea STF
<button> Define un botón que se pulse STF
<caption> Define un título de la tabla STF
<center> Desaprobado. Define texto centrado TF
<cite> Define una cita STF
<code> Define un trozo de código de computadora STF
<col /> Define los valores de atributo para una o varias columnas de una tabla STF
<colgroup> Especifica un grupo de una o más columnas en una tabla para formatear STF
<dd> Define la descripción de un elemento en una lista de definiciones STF
<del> Define el texto que ha sido borrado de un documento STF
<dfn> Define un término de definición STF
<dir> Desaprobado. Define una lista de directorios TF
<div> Define una sección de un documento STF
<dl> Define una lista de definición STF
<dt> Define un término (un elemento) en una lista de definiciones STF
<em> Define el texto subrayado STF
<fieldset> Grupos relacionados con los elementos de un formulario STF
<font> Desaprobado. Define la fuente, el color y el tamaño del texto TF
<form> Define un formulario HTML para entrada de usuario STF
<frame /> Define una ventana (un marco) en un conjunto de marcos F
<frameset> Define un conjunto de marcos F
<h1> to <h6> Define títulos HTML STF
<head> Define información sobre el documento STF
<hr /> Define una línea horizontal STF
<html> Define la raíz de un documento HTML STF
7

<i> Define el texto en cursiva STF

Página

<iframe> Define un marco en línea TF

<img /> Define una imagen STF
<input /> Define un control de entrada STF
<ins> Define texto que se ha insertado en un documento STF
<kbd> Define la entrada del teclado STF
<label> Define una etiqueta para un elemento <input> STF
<legend> Define un título para un elemento <fieldset> STF
<li> Define un elemento de la lista STF
<link /> Define la relación entre un documento y un recurso externo STF
<map> Define un cliente-lado de la imagen de mapa de STF
<menu> Desaprobado. Define una lista de menú TF
<meta /> Define los metadatos de un documento HTML STF
<noframes> Define un contenido alternativo para los usuarios que no soporten marcos TF
<noscript> Define un contenido alternativo para los usuarios que no son compatibles con STF
secuencias de comandos del lado del cliente
<object> Define un objeto incrustado STF
<ol> Define una lista ordenada STF
<optgroup> Define un grupo de opciones relacionadas en una lista desplegable STF
<option> Define una opción en una lista desplegable STF
<p> Define un párrafo STF
<param /> Define un parámetro para un objeto STF
<pre> Define el texto preformateado STF
<q> Define una breve cita STF
<s> Desaprobado. Define texto tachado TF
<samp> Define ejemplo de salida de un programa informático STF
<script> Define un script del lado del cliente STF
<select> Define una lista desplegable STF
<small> Define el texto más pequeño STF
<span> Define una sección de un documento STF
<strike> Desaprobado. Define texto tachado TF
<strong> Define texto fuerte STF
<style> Define la información de estilo para un documento STF
<sub> Define texto subíndice STF
<sup> Define el texto en superíndice STF
<table> Define una tabla STF
<tbody> Grupos el contenido del cuerpo de una tabla STF
<td> Define una celda de una tabla STF
<textarea> Define un control de entrada de varias líneas (área de texto) STF
<tfoot> Grupos del contenido pie de página en una tabla STF
<th> Define una celda de encabezado en una tabla STF
<thead> Grupos el contenido del encabezado de una tabla STF
<title> Define un título para el documento STF
<tr> Define una fila de una tabla STF
<tt> Define texto teletipo STF
<u> Desaprobado. Define el texto subrayado TF
<ul> Define una lista desordenada STF
<var> Define una variable STF
<xmp> Desaprobado. Define el texto preformateado

A continuación se muestra una lista de algunos de los atributos que son estándar para la mayoría de los elementos
HTML:

Atributo Valor Descripción

class classname Especifica un nombre de clase de un elemento
id identificación Especifica un identificador único para un elemento
style style_definition Especifica un estilo en línea para un elemento
title tooltip_text Especifica información adicional acerca de un elemento (que aparece
como información sobre herramientas)

Válido en todos los elementos, excepto: <base>, <head>, <html>, <meta>, <param>, <script>, <style> y
<title>.
8
Página
Atributos de Idiomas

Válido en todos los elementos, excepto: <base>, MedlinePlus, <frame>, <frameset>, <hr>, <iframe>, <param>
y <script>.

Atributo Descripción
dir Especifica la dirección del texto para el contenido de un elemento
lang Especifica el lenguaje del contenido del elemento
xml: lang Especifica el lenguaje del contenido del elemento (para documentos XHTML)

Atributos del teclado

Atributo Descripción
accesskey Especifica una tecla de acceso directo para activar / enfocar un elemento
tabindex Especifica el orden de tabulación de un elemento

HTML Headings
Los títulos son importantes en los documentos HTML.

Títulos HTML

Los encabezados se definen con la <h1> a las etiquetas <h6>.

<h1> define el título más importante. <h6> define el mínimo partida importante.

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
9

Nota: Los navegadores automáticamente añadir un poco de espacio vacío (el margen) antes y después de cada
Página

partida.
Los títulos son importantes

El uso de títulos HTML para los títulos solamente. No utilice encabezados para que el texto BIG onegrita .

Los motores de búsqueda utilizan los encabezados para indexar la estructura y el contenido de sus páginas web.

Dado que los usuarios pueden hojear sus páginas por sus títulos, es importante utilizar los títulos para mostrar la
estructura del documento.

Encabezamientos H1 se debe utilizar como encabezamientos principales, seguido por el correspondiente H2, a
continuación, los encabezamientos H3 menos importantes, y así sucesivamente.

HTML Líneas

El <hr /> etiqueta crea una línea horizontal en una página HTML. El elemento hr se puede utilizar para separar el
contenido:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
</body>
</html>

Comentarios HTML

Los comentarios se pueden insertar en el código HTML para que sea más legible y [Link] comentarios
son ignorados por el navegador y no se muestran.

Los comentarios se escriben así:

Ejemplo

Nota: No hay un signo de exclamación después del corchete de apertura, pero no antes de que el corchete de
cierre.
10
Página
HTML Tip - Cómo ver código fuente HTML

¿Alguna vez has visto una página Web y se preguntó "¡Hey! ¿Cómo hicieron eso?"

Para averiguarlo, haga clic derecho en la página y seleccione "Ver código fuente" (IE) o "fuente de la página View"
(Firefox), o similar para otros navegadores. Se abrirá una ventana que contiene el código HTML de la página.

Referencia de Etiquetas HTML

W3Schools referencia de etiqueta contiene información adicional sobre estos tags y sus atributos.

Usted aprenderá más acerca de las etiquetas HTML y atributos en los próximos capítulos de este tutorial.

Etiqueta Descripción
<html> Define un documento HTML
<body> Define el cuerpo del documento
<h1> a <h6> Define títulos HTML
<hr /> Define una línea horizontal
<-> Define un comentario

11
Página
HTML Párrafos
Los documentos HTML se dividen en párrafos.

Párrafos HTML

Los párrafos se definen con la etiqueta <p>.

Ejemplo
<p>This is a paragraph</p>
<p>This is another paragraph</p>

Nota: Los navegadores automáticamente agregar una línea en blanco antes y después de un párrafo.

Saltos de línea HTML

Utilice la etiqueta <br /> si quieres un salto de línea (una línea nueva) sin necesidad de iniciar un nuevo párrafo:

Ejemplo
<p>This is<br />a para<br />graph with line breaks</p>

El elemento <br /> es un elemento HTML vacía. No tiene etiqueta de cierre.

MedlinePlus o <br />

En XHTML, XML, elementos sin etiqueta de cierre (etiqueta de cierre) no están permitidos.

Incluso si las obras <br> en todos los navegadores, escribiendo /> <br vez funciona mejor en aplicaciones XHTML
y XML.

12
Página
Copiar el formato de texto

Formato de texto HTML

This text is bold

This text is big

This text is italic

This is computer output

superscript
This is subscript and

<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>

Etiquetas de formato HTML

HTML utiliza etiquetas como <b> y <i> para la salida de formato, como negrita o cursiva texto.

Estas etiquetas HTML se denominan etiquetas de formato (ver en la parte inferior de esta página para obtener una
referencia completa).

A menudo se representa como <strong> <b>, y <em> representa como <i>.

Sin embargo, hay una diferencia en el significado de las siguientes etiquetas: <b> o <i> define el texto en
negrita o cursiva solamente. <strong> o <em> significa que desea que el texto que se representa en una
forma que el usuario entiende como "importante". Hoy en día, todos los principales navegadores hacen
fuertes como negrita y cursiva como em. Sin embargo, si una de navegador día quiere hacer un texto
resaltado con el rasgo fuerte, que podría ser por ejemplo cursiva y negrita no!
13
Página
HTML Etiquetas de formato de texto

Etiqueta Descripción
<b> Define el texto en negrita
<big> Define texto grande
<em> Define el texto subrayado
<i> Define el texto en cursiva
<small> Define el texto pequeño
<strong> Define texto fuerte
<sub> Define texto subíndice
<sup> Define el texto en superíndice
<ins> Define el texto insertado
<del> Define el texto eliminado

HTML "salida de la computadora" Etiquetas

Etiqueta Descripción
<code> Define texto código informático
<kbd> Define texto teclado
<samp> Define el código de muestra ordenador
<tt> Define texto teletipo
<var> Define una variable
<pre> Define el texto preformateado

Citaciones HTML, citas y etiquetas Definición

Etiqueta Descripción
<abbr> Define una abreviatura
<acronym> Define un acrónimo
<address> Define la información de contacto del autor / propietario de un documento
<bdo> Define la dirección del texto
<blockquote> Define una larga cita
<q> Define una breve cita
<cite> Define una cita
<dfn> Define un término de definición

14
Página
HTML Editor

HTML escrito utilizando el Bloc de notas o TextEdit

HTML se pueden editar mediante un editor HTML profesional como:

• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor

Sin embargo, para el aprendizaje de HTML se recomienda un editor de texto como el Bloc de notas (PC) o TextEdit
(Mac). Creemos que con un editor de texto simple es una buena manera de aprender HTML.

Siga los 4 pasos para crear su primera página web con el Bloc de notas.

Paso 1: Inicie el Bloc de notas

Para iniciar el Bloc de notas, vaya a:

Inicio
Todos los programas
Accesorios
Bloc de notas

Paso 2: Editar HTML con el Bloc de notas

Escriba su código HTML en su Bloc de notas:

Paso 3: Guarde su HTML

Seleccione Guardar como .. en el menú archivo del Bloc de notas.

Cuando se guarda un archivo HTML, puede utilizar el htm. O la extensión. Html archivo. No hay ninguna
diferencia, es totalmente de usted.

Guarde el archivo en una carpeta que sea fácil de recordar, como w3schools.

Paso 4: Ejecutar el código HTML en el navegador

Inicie su navegador web y abrir el archivo html

del Archivo , Abrir menú, o simplemente navegar por la carpeta y
haga doble clic en el archivo HTML.

El resultado debe ser parecido a esto:

15
Página
HTML - CSS Styles
CSS (Cascading Style Sheets) se utiliza para aplicar estilo a los elementos HTML.

¡Mira! Los estilos y colores

Este texto está en Verdana y rojo

Este texto está en Times and blue

Este texto es de 30 píxeles de alto

Aplicar estilos HTML con CSS

CSS se introdujo junto con HTML 4, para proporcionar una mejor forma de estilo de los elementos HTML.

CSS se puede agregar a HTML de la siguiente manera:

• Inline - utilizando el estilo de atributo en los elementos HTML

• Interna - usando el <style> elemento en la sección head
• Externo - usando una CSS externa de archivos

La mejor forma de añadir CSS a HTML, es poner sintaxis CSS en archivos CSS.

Sin embargo, en este tutorial HTML que le dará a conocer CSS mediante el atributo style. Esto se hace para
simplificar los ejemplos. También hace que sea más fácil para usted para editar el código y pruébelo usted mismo.

Estilos en línea

Un estilo en línea puede ser utilizado si un estilo único es para ser aplicado a una sola ocurrencia de un elemento.

Para utilizar estilos en línea, utilice el atributo de estilo en la etiqueta correspondiente. El atributo de estilo puede
contener cualquier propiedad CSS. El siguiente ejemplo muestra cómo cambiar el color del texto y el margen
izquierdo de un párrafo:

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

Para obtener más información sobre las hojas de estilos, visite nuestro tutorial CSS .
16
Página
Ejemplo de Estilo HTML - Color de fondo

La propiedad background-color define el color de fondo de un elemento:

Ejemplo

<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>

Ejemplo de Estilo HTML - Fuente, Color y Tamaño

La familia de fuentes, el color y las propiedades font-size define el tipo de letra, color y tamaño del texto de un
elemento:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

Ejemplo de Estilo HTML - Alineación del texto

La propiedad text-align especifica la alineación horizontal del texto de un elemento:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
17
Página
Hoja de estilo interna

Una hoja de estilo interna se puede utilizar si un solo documento tiene un estilo único. Estilos internos se definen
en la sección head de una página HTML, utilizando la etiqueta <style>, así:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

Hoja de estilos externa

Una hoja de estilos externa es ideal cuando el estilo se aplica a muchas páginas. Con una hoja de estilos externa,
puede cambiar el aspecto de un sitio Web completo, cambiando un archivo. Cada página debe enlazar a la hoja de
estilo con la etiqueta <link>. La etiqueta <link> va dentro de la sección head:

Etiquetas HTML Estilo

Etiqueta Descripción
<style> Define la información de estilo para un documento
<link /> Define la relación entre un documento y un recurso externo

Tags y atributos desaprobados

En HTML 4, varias etiquetas y atributos fueron utilizados para los documentos de estilo. Estas etiquetas no son
compatibles con las nuevas versiones de HTML.

Evite el uso de los elementos <font>, <center> y <strike> y el color y los atributos bgcolor.

18
Página
HTML Links
Los enlaces se encuentran en casi todas las páginas Web. Links permiten a los usuarios hacer clic
en su camino a partir de una página a otra.

HTML Hipervínculos (Links)

Un hiperenlace (o link) es una palabra o grupo de palabras o una imagen que se puede hacer clic para saltar a un
nuevo documento o una nueva sección dentro del documento actual.

Al mover el cursor sobre un enlace en una página Web, la flecha se convierta en una manita.

Los enlaces se especifican en HTML usando la etiqueta <a>.

La etiqueta <a> se puede utilizar de dos maneras:

1. Para crear un vínculo a otro documento, utilizando el atributo href

2. Para crear un marcador dentro de un documento, utilizando el atributo de nombre

Sintaxis HTML Link

El código HTML de un enlace es simple. Se parece a esto:

<a href="url">Link text</a>

El atributo href especifica el destino de un enlace.

Ejemplo
<a href="[Link] W3Schools</a>

Al hacer clic en este hipervínculo enviará al usuario a la página principal W3Schools.

Consejo: El " Texto del enlace "no tiene por qué ser de texto. Puede ser una imagen o cualquier otro elemento
HTML.

HTML - Enlace del atributo de destino

El atributo de destino especifica dónde abrir el documento vinculado.

El siguiente ejemplo se abre el documento vinculado en una nueva ventana del navegador o una nueva pestaña:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<a href="[Link] target="_blank">Visit [Link]!</a>
<p>If you set the target attribute to "_blank", the link will open in a new
browser window/tab.</p>
</body>
</html>
19
Página
Enlaces - HTML el atributo de nombre

El atributo name especifica el nombre de un ancla.

El atributo de nombre se utiliza para crear un marcador dentro de un documento HTML.

Nota: El próximo estándar HTML5 sugiere utilizar el atributo id en lugar del atributo name para especificar el
nombre de un ancla. Usando el atributo id en realidad funciona también para HTML4 en todos los navegadores
modernos.

Favoritos no se muestran en ninguna forma especial. Ellos son invisibles para el lector.

Ejemplo

Un anclaje con nombre dentro de un documento HTML:

<a name="tips">Useful Tips Section</a>

Crear un enlace a la sección de "Consejos Útiles" dentro del mismo documento:

<a href="#tips">Visit the Useful Tips Section</a>

O bien, crear un enlace a la sección de "Consejos Útiles" de otra página:

Notas básicos - Consejos útiles

Nota: Siempre agregue una barra al final de referencias subcarpeta. Si se enlaza así: href =
"[Link] se generan dos solicitudes al servidor, el primer servidor agregará una barra a
la dirección, y luego crear una nueva solicitud como ésta : href = "[Link]

Sugerencia: anclajes con nombre se utiliza a menudo para crear "contenido" al principio de un documento
grande. Cada capítulo del documento se da un anclaje con nombre, y enlaces a cada uno de estos anclajes se
colocan en la parte superior del documento.

Etiquetas HTML Enlace

Etiqueta Descripción
<a> Define un ancla
20
Página
HTML Imágenes

Ejemplo

Norwegian Mountain Trip

<!DOCTYPE html>
<html>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/[Link]" alt="Pulpit rock" width="304"
height="228" />
</body>
</html>

Imágenes de HTML - La etiqueta <img> y el atributo Src

En HTML, las imágenes se definen con la etiqueta <img>.

La etiqueta <img> está vacío, lo que significa que contiene atributos solamente, y no tiene ninguna etiqueta de
cierre.

Para mostrar una imagen en una página, es necesario utilizar el atributo src. Src significa "fuente".El valor del
atributo src es la dirección URL de la imagen que desea mostrar.

Sintaxis para la definición de una imagen:

<img src="url" alt="some_text"/>

El URL apunta a la ubicación donde está almacenada la imagen. Una imagen llamada "[Link]", ubicado en el
directorio "imágenes" en "[Link]" tiene la URL: [Link]

El navegador muestra la imagen en la etiqueta <img> se presenta en el documento. Si usted pone una etiqueta
de imagen entre dos párrafos, el navegador muestra el primer párrafo, la imagen, y luego el segundo párrafo.

Imágenes - HTML el atributo ALT

El atributo alt requerida especifica un texto alternativo para una imagen, si la imagen no se puede mostrar.

El valor del atributo alt es un texto definido por el autor:

<img src="[Link]" alt="Big Boat" />

El atributo alt proporciona información alternativa para una imagen si un usuario por alguna razón no puede ver (a
Página

causa de conexión lenta, un error en el atributo src, o si el usuario utiliza un lector de pantalla).
Imágenes de HTML - Altura del dispositivo y la anchura de una imagen

Los atributos de altura y anchura se utilizan para especificar la altura y la anchura de una imagen.

Los valores de los atributos se especifican en píxeles por defecto:

<img src="[Link]" alt="Pulpit rock" width="304" height="228" />

Consejo: Es una buena práctica para especificar la altura y anchura de los atributos de una [Link] estos
atributos se establecen, el espacio requerido para la imagen está reservada cuando la página está cargada. Sin
embargo, sin estos atributos, el navegador no sabe el tamaño de la imagen. El efecto será que el diseño de la
página cambiará durante la carga (mientras que la carga de imágenes).

Notas básicos - Consejos útiles

Nota: Si un archivo HTML contiene diez imágenes - once archivos son necesarios para mostrar la página de la
derecha. Cargando imágenes toma tiempo, así que mi mejor consejo es: Usar las imágenes cuidadosamente.

Nota: Cuando una página web se carga, es el navegador, en ese momento, que en realidad tiene la imagen de un
servidor web y lo inserta en la página. Por lo tanto, asegúrese de que las imágenes realmente permanecer en el
mismo lugar, en relación con la página web, de lo contrario sus visitantes tendrán un icono de enlace roto. El icono
de enlace se muestra si el navegador no puede encontrar la imagen.

Etiquetas HTML imagen

Etiqueta Descripción
<img /> Define una imagen
<map> Define una imagen de mapa de
<area /> Define un área seleccionable dentro de una imagen de mapa de

22
Página
HTML Tablas
Tablas HTML
Fruta Porcentaje
Manzanas 44%
Plátanos 23%
Naranjas 13%
Otro 10%

Tablas HTML

Las tablas se definen con la etiqueta <table>.

Una tabla está dividida en filas (con la etiqueta <tr>), y cada fila se divide en celdas de datos (con la etiqueta
<td>). td representa los "datos de la tabla," y mantiene el contenido de una celda de datos. Una etiqueta <td>
pueden contener texto, enlaces, imágenes, listas, formularios, otras tablas, etc

Ejemplo

Cómo funciona el código HTML anterior se ve en un navegador:

fila 1, celda 1 fila 1, celda 2

fila 2, celda 1 fila 2, celda 2

Tablas HTML y el atributo border

Si no se especifica un atributo border, la tabla se mostrarán sin fronteras. A veces esto puede ser útil, pero la
mayor parte del tiempo, queremos que los márgenes para mostrar.

Para ver una tabla con bordes, especifique el atributo border:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
23
Página
Encabezados de tabla HTML

La información de encabezado en una tabla se definen con la etiqueta <th>.

Todos los principales navegadores muestran el texto en el elemento <th> en negrita y centrado.

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>

Cómo funciona el código HTML anterior se ve en su navegador:

Cabecera 1 Encabezado 2
fila 1, celda 1 fila 1, celda 2
fila 2, celda 1 fila 2, celda 2

Etiquetas de tabla HTML

Etiqueta Descripción
<table> Define una tabla
<th> Define un encabezado de tabla
<tr> Define una fila de la tabla
<td> Define una celda de la tabla
<caption> Define un título de la tabla
<colgroup> Define un grupo de columnas de una tabla, para el formato
<col /> Define los valores de atributo para una o varias columnas de una tabla
<thead> Grupos el contenido del encabezado de una tabla
<tbody> Grupos el contenido del cuerpo de una tabla
<tfoot> Grupos del contenido pie de página en una tabla
24
Página
HTML Listas
Las listas HTML más comunes son listas ordenadas y desordenadas:

Listas HTML

Lista Ordenada: Lista no ordenada:

1. The first list item • List item

2. The second list item • List item
3. The third list item • List item

HTML listas no ordenadas

Una lista no ordenada comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>.

Los elementos de la lista están marcados con puntos (círculos negros generalmente pequeñas).

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Cómo funciona el código HTML anterior se ve en un navegador:

• Café
• Leche

HTML listas ordenadas

Una lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta <li>.

Los elementos de la lista están marcados con los números.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Cómo funciona el código HTML anterior se ve en un navegador:

1. Café
2. Leche
25
Página
Definición listas HTML

Una lista de definición es una lista de elementos, con una descripción de cada elemento.

La etiqueta <dl> define una lista de definiciones.

La etiqueta <dl> se utiliza en conjunción con <dt> (define el elemento en la lista) y <dd> (describe el elemento
de la lista):

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>

<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Cómo funciona el código HTML anterior se ve en un navegador:

Café
- Bebida caliente negro
Leche
- Bebida blanco frío

Notas básicos - Consejos útiles

Consejo: Dentro de un elemento de la lista se puede poner texto, saltos de línea, imágenes, enlaces, listas de
otros, etc

Lista de etiquetas HTML

Etiqueta Descripción
<ol> Define una lista ordenada
<ul> Define una lista desordenada
<li> Define un elemento de la lista
<dl> Define una lista de definición
<dt> Define un elemento en una lista de definiciones
<dd> Define la descripción de un elemento en una lista de definiciones
26
Página
HTML <div> y <span>
Elementos HTML se pueden agrupar con <div> y <span>

Elementos HTML de bloque

Mayoría de los elementos HTML se define como nivel de bloque o como elementos inline elementos.

Elementos a nivel de bloque comienzan normalmente (y final) con una nueva línea cuando se muestra en un
navegador.

Ejemplos: <h1>, <p>, <ul>, <table>

Elementos HTML Inline

Los elementos en línea se muestra normalmente sin necesidad de iniciar una nueva línea.

Ejemplos: <B>, <td>, <A> <img>

El elemento HTML <div>

El elemento <div> HTML es un elemento de bloque que puede ser utilizado como un contenedor para agrupar
otros elementos HTML.

El elemento <div> no tiene ningún significado especial. Sólo que, ya que es un elemento de nivel de bloque, el
navegador mostrará un salto de línea antes y después de ella.

Cuando se usa junto con CSS, el elemento <div> se puede utilizar para establecer los atributos de estilo para
grandes bloques de contenido.

Otro uso común del elemento div, es para el diseño del documento. Sustituye a la "vieja manera" de la definición
de diseño utilizando tablas. Uso de tablas no es el uso correcto del elemento <table>.El propósito del elemento
<table> es mostrar datos tabulares.

El Elemento HTML <span>

El elemento HTML <span> es un elemento en línea que puede ser utilizado como un contenedor de texto.

El elemento <span> no tiene ningún significado especial.

Cuando se utiliza junto con CSS, el elemento <span> se puede utilizar para establecer los atributos de estilo para
las partes del texto.

Etiquetas HTML Agrupación

Etiqueta Descripción
<div> Define un div
<span> Define un lapso
27
Página
HTML Presentaciones
Diseño de páginas web es muy importante para hacer que su sitio web se vea bien.

Diseña tu página web diseño muy cuidado.

Diseños de página web

La mayoría de los sitios web han puesto su contenido en varias columnas (formato como una revista o un
periódico).

Varias columnas se crean mediante <div> o elementos <table>. CSS se utilizan para colocar elementos, o para
crear fondos o aspecto colorido de las páginas.

A pesar de que es posible crear diseños agradables con tablas HTML, tablas fueron diseñadas para
presentar datos tabulares - no como una herramienta de diseño!.

Presentaciones HTML - Uso de elementos <div>

El elemento div es un elemento de nivel de bloque utilizado para agrupar los elementos HTML.

El ejemplo siguiente utiliza cinco elementos div para crear un diseño de columna múltiple, con el mismo resultado
que en el ejemplo anterior:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>

<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</div>

<div id="content"
style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>

<div id="footer"
style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © [Link]
</div>
</div>
</body>
28

</html>
Página
Presentaciones HTML - Uso de las Tablas

Una manera simple de crear diseños es el uso de la etiqueta <table> HTML.

Varias columnas se crean mediante <div> o elementos <table>. CSS se utilizan para colocar elementos, o para
crear fondos o aspecto colorido de las páginas.

Uso de tablas no es el uso correcto del elemento <table>. El propósito del elemento <table> es mostrar
datos tabulares.

En el ejemplo siguiente, se utiliza una tabla con 3 filas y 2 columnas - la primera y última fila se extiende por
ambas columnas con el atributo colspan:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>

<td style="background-color:#EEEEEE;height:200px;width:400px;
text-align:top;">
Content goes here
</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © [Link]
</td>
</tr>
</table>
</body>
</html>
29
Página
Diseño HTML - Consejos útiles

Consejo: La mayor ventaja de la utilización de CSS es que, si coloca el código CSS en una hoja de estilos externa,
su sitio es mucho más fácil de mantener. Usted puede cambiar el diseño de todas las páginas editando un
archivo. Para obtener más información acerca de CSS, estudiar nuestrotutorial CSS .

Consejo: Debido a que los diseños avanzados de tomar tiempo para crear, una opción más rápida es utilizar una
plantilla. Búsqueda en Google de plantillas de sitios web gratuitos (se trata de pre-construidos diseños de página
web que puede utilizar y personalizar).

Etiquetas HTML Layout

Etiqueta Descripción
<div> Define una sección de un documento
<span> Define una sección de un documento

HTML Los formularios y entrada

Formularios HTML se utilizan para seleccionar los diferentes tipos de entrada del usuario.

HTML Forms

Los formularios HTML se utiliza para pasar datos a un servidor.

Un formulario puede contener elementos de entrada como campos de texto, casillas de verificación, botones de
radio-, botones de envío y mucho más. Un formulario puede contener listas de selección, textarea, fieldset,
legend, y elementos de la etiqueta.

La etiqueta <form> se utiliza para crear un formulario HTML:

<form>
.
input elements
.
</form>

HTML Forms - El elemento de entrada

El elemento más importante es la forma del elemento de entrada.

El elemento de entrada se utiliza para seleccionar la información del usuario.

Un elemento de entrada puede variar de muchas maneras, dependiendo del tipo de atributo. Un elemento de
entrada puede ser de tipo de campo de texto, casilla de verificación, la contraseña, botón de radio, botón de
envío, y mucho más.

Los tipos de entrada más utilizados se describen a continuación.

30
Página
Los campos de texto

<input type="text" /> define un campo de entrada de una sola línea que el usuario puede introducir texto en:

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

Cómo funciona el código HTML anterior se ve en un navegador:

Nombre:

Apellido:

Nota: El formulario en sí no es visible. También tenga en cuenta que el ancho predeterminado de un campo de
texto es de 20 caracteres.

Contraseña Campo

<input /> type="password" define un campo de contraseña:

<form>
Password: <input type="password" name="pwd" />
</form>

Cómo funciona el código HTML anterior se ve en un navegador:

Contraseña:

Nota: Los caracteres en un campo de contraseña están enmascarados (mostrado como asteriscos o círculos).

Botones de opción

<input /> type="radio" define un botón de radio. Los botones de opción permite a un usuario seleccionar sólo una
de un número limitado de opciones:

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

Cómo funciona el código HTML anterior se ve en un navegador:

Masculino
31

Femenino
Página
Casillas de verificación

<input /> type="checkbox" define una casilla de verificación. Las casillas de verificación permiten a un usuario
seleccionar cero o más opciones de un número limitado de opciones.

Cómo funciona el código HTML anterior se ve en un navegador:

Tengo una bicicleta

Tengo un coche

Enviar Button

<input type="submit" /> define un botón de envío.

Un botón de envío se utiliza para enviar los datos del formulario a un servidor. Los datos se envían a la página
especificada en el atributo de acción del formulario. El archivo se define en el atributo de acción suele hacer algo
con la información recibida:

<form name="input" action="html_form_action.asp" method="get">

Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Cómo funciona el código HTML anterior se ve en un navegador:

Presentar
Nombre de Usuario:

Si escribe algunos caracteres en el campo de texto y haga clic en el botón "Enviar", el navegador enviará sus
comentarios a una página llamada "html_form_action.asp". La página le mostrará las aportaciones recibidas.

Etiquetas del formulario HTML

Etiqueta Descripción
<form> Define un formulario HTML para entrada de usuario
<input /> Define un control de entrada
<textarea> Define un control de texto de varias líneas de entrada
<label> Define una etiqueta para un elemento de entrada
<fieldset> Define un borde alrededor de los elementos en una forma
<legend> Define un título para un elemento fieldset
<select> Define una lista de selección (lista desplegable)
<optgroup> Define un grupo de opciones relacionadas en una lista de selección
<option> Define una opción en una lista de selección
<button> Define un botón pulsador
32
Página
HTML Iframes
Un iframe se utiliza para mostrar una página web dentro de una página web.

Sintaxis para añadir un iframe:

El URL apunta a la ubicación de la página separada.

Iframe - Altura del dispositivo y ancho

Los atributos de altura y anchura se utilizan para especificar la altura y la anchura del iframe.

Los valores de atributo se especifica en píxeles por defecto, pero también pueden estar en por ciento (como
"80%").

Ejemplo

<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

<p>Some older browsers don't support iframes.</p>

<p>If they don't, the iframe will not be visible.</p>
</body>
</html>

Iframe - Quitar la Frontera

El atributo frameborder especifica si se mostrará o no un borde alrededor del iframe.

Establezca el valor del atributo a "0" para eliminar la frontera:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

<p>Some older browsers don't support iframes.</p>

<p>If they don't, the iframe will not be visible.</p>

</body>
Página

</html>
Utilice iframe como destino para un vínculo

Un iframe se puede utilizar como el marco de destino para un enlace.

El atributo de destino de un enlace debe hacer referencia al atributo nombre del iframe:

Ejemplo
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="[Link] target="iframe_a">[Link]</a></p>

Pruebe usted mismo »

HTML iframe Tag

Etiqueta Descripción
<iframe> Define una línea sub ventana (frame)

HTML Colors
Los colores se muestra la combinación de ROJO, VERDE, AZUL y la luz.

Valores de color

Colores HTML se definen utilizando una notación hexadecimal (HEX) para la combinación de rojo, verde y azul del
color (RGB).

El valor más bajo que se puede dar a una de las fuentes de luz es 0 (en HEX: 00). El valor más alto es 255 (en
HEX: FF).

Valores hexadecimales se especifican como 3 pares de números de dos dígitos, comenzando con un signo #.

Valores de color
Color Color HEX Color RGB
# 000000 rgb (0,0,0)
# FF0000 rgb (255,0,0)
# 00FF00 rgb (0,255,0)
# 0000FF rgb (0,0,255)
# FFFF00 rgb (255,255,0)
# 00FFFF rgb (0255255)
# FF00FF rgb (255,0,255)
# C0C0C0 rgb (192,192,192)
# FFFFFF rgb (255,255,255)
34
Página
16 millones de colores diferentes

La combinación de rojo, verde y azul que 0 a 255, da más de 16 millones de colores diferentes (256 x 256 x 256).

Si nos fijamos en la tabla de colores a continuación, podrás ver el resultado de la variación de la luz roja de 0 a
255, mientras se mantiene la luz verde y azul en cero.

Para ver la lista completa de color ROJO cuando se mezcla varía de 0 a 255, haga clic en uno de los valores RGB
HEX o abajo.

Rojo Color HEX Color RGB

# 000000 rgb (0,0,0)
# 080000 rgb (8,0,0)
# 100000 rgb (16,0,0)
# 180000 rgb (24,0,0)
# 200000 rgb (32,0,0)
# 280000 rgb (40,0,0)
# 300000 rgb (48,0,0)
# 380000 rgb (56,0,0)
# 400000 rgb (64,0,0)
# 480000 rgb (72,0,0)
# 500000 rgb (80,0,0)
# 580000 rgb (88,0,0)
# 600000 rgb (96,0,0)
# 680000 rgb (104,0,0)
# 700000 rgb (112,0,0)
# 780000 rgb (120,0,0)
# 800000 rgb (128,0,0)
# 880000 rgb (136,0,0)
# 900000 rgb (144,0,0)
# 980000 rgb (152,0,0)
# A00000 rgb (160,0,0)
# A80000 rgb (168,0,0)
# B00000 rgb (176,0,0)
# B80000 rgb (184,0,0)
# C00000 rgb (192,0,0)
# C80000 rgb (200,0,0)
# D00000 rgb (208,0,0)
# D80000 rgb (216,0,0)
# E00000 rgb (224,0,0)
# E80000 rgb (232,0,0)
# F00000 rgb (240,0,0)
# F80000 rgb (248,0,0)
# FF0000 rgb (255,0,0)
35
Página
Tonos grises

Colores grises se crean mediante el uso de una cantidad igual de energía a todas las fuentes de luz.

Para hacerlo más fácil para que usted seleccione el tono correcto, hemos creado una tabla de tonalidades grises
para usted:

Gray Shades Color HEX Color RGB

# 000000 rgb (0,0,0)
# 080808 rgb (8,8,8)
# 101010 rgb (16,16,16)
# 181818 rgb (24,24,24)
# 202020 rgb (32,32,32)
# 282828 rgb (40,40,40)
# 303030 rgb (48,48,48)
# 383838 rgb (56,56,56)
# 404040 rgb (64,64,64)
# 484848 rgb (72,72,72)
# 505050 rgb (80,80,80)
# 585858 rgb (88,88,88)
# 606060 rgb (96,96,96)
# 686868 rgb (104,104,104)
# 707070 rgb (112,112,112)
# 787878 rgb (120,120,120)
# 808080 rgb (128,128,128)
# 888888 rgb (136,136,136)
# 909090 rgb (144,144,144)
# 989898 rgb (152,152,152)
# A0A0A0 rgb (160,160,160)
# A8A8A8 rgb (168,168,168)
# B0B0B0 rgb (176,176,176)
# B8B8B8 rgb (184,184,184)
# C0C0C0 rgb (192,192,192)
# C8C8C8 rgb (200,200,200)
# D0D0D0 rgb (208,208,208)
# D8D8D8 rgb (216,216,216)
# E0e0e0 rgb (224,224,224)
# E8E8E8 rgb (232,232,232)
# F0F0F0 rgb (240,240,240)
# F8F8F8 rgb (248,248,248)
# FFFFFF rgb (255,255,255)
36
Página
Colores Web seguro?

Hace algunos años, cuando las computadoras máxima admitida 256 colores diferentes, una lista de 216 "colores
Web Safe" fue propuesto como un estándar Web, reservándose 40 colores del sistema fijo.

El 216 cross-browser paleta de colores fue creado para asegurar que todos los equipos se mostraban
correctamente los colores cuando se ejecuta una paleta de 256 colores.

Esto no es importante hoy en día, ya que la mayoría de las computadoras pueden mostrar millones de colores
diferentes. De todos modos, aquí está la lista:

000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
37

FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF

Página

FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
HTML nombres de colores
Nombres de colores compatibles con todos los navegadores

147 nombres de colores se definen en el código HTML y CSS de color especificación (16 nombres de colores
básicos además de más 130). En la tabla siguiente se enumeran todos ellos, junto a sus valores hexadecimales.

Consejo: Los 16 nombres de colores básicos son: agua, negro, azul, fucsia, gris, verde, lima, marrón, azul
marino, oliva, púrpura, rojo, plata, azul, blanco y amarillo.

Haga clic en un nombre de color (o un valor hexadecimal) para ver el color como el color de fondo con los colores
de texto diferentes:

Ordenado por Nombre del color

Nombre del color HEX Color
AliceBlue # F0F8FF
AntiqueWhite # FAEBD7
Aqua # 00FFFF
Aquamarine # 7FFFD4
Azure # F0FFFF
Beige # F5F5DC
Bisque # FFE4C4
Black # 000000
BlanchedAlmond # FFEBCD
Blue # 0000FF
BlueViolet # 8A2BE2
Brown # A52A2A
BurlyWood # DEB887
CadetBlue # 5F9EA0
Chartreuse # 7FFF00
Chocolate # D2691E
Coral # FF7F50
CornflowerBlue # 6495ED
Cornsilk # FFF8DC
Crimson # DC143C
Cyan # 00FFFF
DarkBlue # 00008B
DarkCyan # 008B8B
DarkGoldenRod # B8860B
DarkGray # A9A9A9
DarkGrey # A9A9A9
DarkGreen # 006400
DarkKhaki # BDB76B
DarkMagenta # 8B008B
DarkOliveGreen # 556B2F
38

Darkorange # FF8C00
DarkOrchid # 9932CC
Página

DarkRed # 8B0000
DarkSalmon # E9967A
DarkSeaGreen # 8FBC8F
DarkSlateBlue # 483D8B
DarkSlateGray # 2F4F4F
DarkSlateGrey # 2F4F4F
DarkTurquoise # 00CED1
DarkViolet # 9400D3
DeepPink # FF1493
DeepSkyBlue # 00BFFF
DimGray # 696969
DimGrey # 696969
DodgerBlue # 1E90FF
FireBrick # B22222
FloralWhite # FFFAF0
ForestGreen # 228B22
Fuchsia # FF00FF
Gainsboro # DCDCDC
GhostWhite # F8F8FF
Gold # FFD700
GoldenRod # DAA520
Gray # 808080
Grey # 808080
Green # 008000
GreenYellow # ADFF2F
HoneyDew # F0FFF0
HotPink # FF69B4
IndianRed # CD5C5C
Indigo # 4B0082
Ivory # FFFFF0
Khaki # F0E68C
Lavender # E6E6FA
LavenderBlush # FFF0F5
LawnGreen # 7CFC00
LemonChiffon # FFFACD
LightBlue # ADD8E6
LightCoral # F08080
LightCyan # E0FFFF
LightGoldenRodYellow # FAFAD2
LightGray # D3D3D3
LightGrey # D3D3D3
LightGreen # 90EE90
LightPink # FFB6C1
LightSalmon # FFA07A
39

LightSeaGreen # 20B2AA
Página

LightSkyBlue # 87CEFA
LightSlateGray # 778899
LightSlateGrey # 778899
LightSteelBlue # B0C4DE
LightYellow # FFFFE0
Lime # 00FF00
LimeGreen # 32CD32
Linen # FAF0E6
Magenta # FF00FF
Maroon # 800000
MediumAquaMarine # 66CDAA
MediumBlue # 0000CD
MediumOrchid # BA55D3
MediumPurple # 9370D8
MediumSeaGreen # 3CB371
MediumSlateBlue # 7B68EE
MediumSpringGreen # 00FA9A
MediumTurquoise # 48D1CC
MediumVioletRed # C71585
MidnightBlue # 191970
MintCream # F5FFFA
MistyRose # FFE4E1
Moccasin # FFE4B5
NavajoWhite # FFDEAD
Navy # 000080
OldLace # FDF5E6
Olive # 808000
OliveDrab # 6B8E23
Orange # FFA500
OrangeRed # FF4500
Orchid # DA70D6
PaleGoldenRod # EEE8AA
PaleGreen # 98FB98
PaleTurquoise # AFEEEE
PaleVioletRed # D87093
PapayaWhip # FFEFD5
PeachPuff # FFDAB9
Peru # CD853F
Pink # FFC0CB
Plum # DDA0DD
PowderBlue # B0E0E6
Purple # 800080
Red # FF0000
RosyBrown # BC8F8F
40

RoyalBlue # 4169E1
Página

SaddleBrown # 8B4513
Salmon # FA8072
SandyBrown # F4A460
SeaGreen # 2E8B57
SeaShell # FFF5EE
Sienna # A0522D
Silver # C0C0C0
SkyBlue # 87CEEB
SlateBlue # 6A5ACD
SlateGray # 708090
SlateGrey # 708090
Snow # FFFAFA
SpringGreen # 00FF7F
SteelBlue # 4682B4
Tan # D2B48C
Teal # 008080
Thistle # D8BFD8
Tomato # FF6347
Turquoise # 40E0D0
Violet # EE82EE
Wheat # F5DEB3
White # FFFFFF
WhiteSmoke # F5F5F5
Yellow # FFFF00
YellowGreen # 9ACD32

41
Página
HTML 4.01 Lista rápida
Lista rápida de W3Schools HTML. Imprímalo, doblarla, y lo puso en su bolsillo.

Documento HTML básico

<! DOCTYPE html>

<html>
<head>
<title> Título del documento va aquí </ title>
</ head>

<body>
Visible texto va aquí ...
</ body>
</ html>

La partida Elementos
La partida más grande h1 </ h1>

<h2>. . . </ H2>

La partida más pequeña <h6> </ h6>

Elementos de texto

<p> Este es un párrafo </ p>

<br /> (salto de línea)
<hr /> (regla horizontal)
<pre> Este texto está preformateado </ pre>

Estilos lógicos

<em> Este texto está subrayado </ em>

<strong> Este texto es fuerte </ strong>
<code> Esto es código informático </ code>

Estilos físicos

<b> Este texto está en negrita </ b>

<i> Este texto está en cursiva </ i>
42
Página
Enlaces

Ordinary link: <a href="[Link] goes here</a>

Image-link: <a href="[Link] src="URL" alt="Alternate Text"
/></a>

Mailto link: <a href="[Link] e-mail</a>

<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>

Lista desordenada

<ul>
<li> artículo </ li>
<li> artículo </ li>
</ ul>

Lista ordenada

<ol>
<li> Primer elemento </ li>
<li> Segundo elemento </ li>
</ ol>

Definición lista

<dl>
<dt> Primer término </ dt>
<dd> definición </ dd>
<dt> plazo Siguiente </ dt>
<dd> definición </ dd>
</ dl>

Tablas

<table border="1">
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

Iframe

<iframe src="demo_iframe.htm"> </ iframe>

43
Página
Formularios

<form action="[Link] method="post/get">

<select>
<option> Manzanas </ option>
<option selected="selected"> Bananas </ option>
<option> Cerezas </ option>
</ select>

<textarea name="comment" rows="60" cols="20"> </ textarea>

</ form>

Entidades

< is the same as <

> is the same as >
© is the same as ©

Otros elementos

<blockquote>
Text quoted from a source.
</blockquote>

<address>
Written by [Link]<br />
<a href="[Link] us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>

Fuente: [Link] 44
Página
HTML <! DOCTYPE>
A <! DOCTYPE> ayuda del navegador para visualizar una página web correctamente.

El <! DOCTYPE> Declaración

Hay muchos documentos en la web. Un navegador sólo puede mostrar un documento correctamente, si se sabe
qué tipo de documento se trata.

También hay muchas versiones diferentes de HTML y un navegador sólo puede mostrar una página HTML
correctamente el 100% si se conoce exactamente la versión HTML que se utiliza en la pá[Link] es lo que <!
DOCTYPE> se utiliza.

<! DOCTYPE> no es una etiqueta HTML. Se trata de una información (una declaración) al navegador qué versión
del HTML se escribe pulg

En este tutorial se utiliza el DOCTYPE HTML5.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>
</html>

Versiones de HTML

Desde los primeros días de la web, ha habido muchas versiones de HTML:

Versión Año
HTML 1991
HTML + 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

Declaraciones comunes

HTML5
<!DOCTYPE html>

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
45

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
Página
HTML cabeza Elementos

El elemento HTML head

El elemento head es un contenedor para todos los elementos del cabezal. Elementos dentro <head> pueden
incluir scripts, instruir al navegador dónde encontrar las hojas de estilo, proporcionar información de la meta, y
más.

Las siguientes etiquetas se pueden añadir a la sección de la cabeza: <title>, <base>, <link>, <meta>, <script>,
y <style>.

El elemento HTML <title>

La etiqueta <title> define el título del documento.

El elemento de título es obligatorio en todos los documentos HTML / XHTML.

El elemento de título:

• define un título en la barra del navegador

• proporciona un título para la página cuando se añada a favoritos
• muestra el título de la página en los motores de búsqueda

Un documento HTML simplificada:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

El elemento HTML <base>

La etiqueta <base> especifica una dirección predeterminada o un destino predeterminado para todos los enlaces
de una página:

<head>
<base href="[Link] />
<base target="_blank" />
</head>
46
Página
El elemento HTML <link>

La etiqueta <link> define la relación entre un documento y un recurso externo.

La etiqueta <link> es el más utilizado para acceder a las hojas de estilo:

El elemento HTML <style>

La etiqueta <style> se utiliza para definir la información de estilo para un documento HTML.

En el interior del elemento de estilo que especifique cómo los elementos HTML debe hacer en un navegador:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

El elemento HTML <meta>

Los metadatos son información sobre los datos.

La etiqueta <meta> proporciona metadatos sobre el documento HTML. Los metadatos no se muestra en la página,
pero será legible por máquina.

Meta elementos se utilizan normalmente para especificar descripción de páginas, palabras clave, autor del
documento, la última modificación, y otros metadatos.

La etiqueta <meta> siempre va dentro del elemento head.

Los metadatos pueden ser utilizados por los navegadores (como mostrar el contenido de la página o reload), los
motores de búsqueda (palabras clave), u otros servicios web.

Palabras clave para Motores de Búsqueda

Algunos motores de búsqueda a utilizar el nombre y atributos de contenido del elemento meta para indexar sus
páginas.

El elemento meta siguiente se define una descripción de una página:

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

El elemento meta siguiente define palabras clave de una página:

<meta name="keywords" content="HTML, CSS, XML" />

La intención de los atributos de nombre y el contenido es para describir el contenido de una página.
Página
El elemento HTML <script>

La etiqueta <script> se utiliza para definir un script del lado del cliente, tal como un JavaScript.

El elemento de secuencia de comandos se explican en un capítulo posterior.

Elementos HTML de la cabeza

Etiqueta Descripción
<head> Define información sobre el documento
<title> Define el título de un documento
<base /> Define una dirección predeterminada o un destino predeterminado para todos los
enlaces de una página
<link /> Define la relación entre un documento y un recurso externo
<meta /> Define los metadatos de un documento HTML
<script> Define un script del lado del cliente
<style> Define la información de estilo para un documento

48
Página
HTML Scripts
JavaScripts hacer que las páginas HTML más dinámica e interactiva.

El elemento de secuencia de comandos HTML

La etiqueta <script> se utiliza para definir un script del lado del cliente, tal como un JavaScript.

El elemento de secuencia de comandos, o bien contiene declaraciones de secuencias de comandos o señala a un

archivo de script externo mediante el atributo src.

El atributo tipo requerido especifica el tipo MIME de la secuencia de comandos.

Los usos más comunes de JavaScript son la manipulación de imágenes, validación de formularios, y los cambios
dinámicos de contenido.

Ejemplo

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
[Link]("Hello World!")
</script>
</body>
</html>

El Elemento HTML noscript

La etiqueta <noscript> se utiliza para proporcionar un contenido alternativo para los usuarios que han
deshabilitado scripts en su navegador o tener un navegador que no es compatible con secuencias de comandos del
lado del cliente.

El elemento noscript puede contener todos los elementos que se pueden encontrar dentro del elemento cuerpo de
una página HTML normal.

El contenido dentro del elemento noscript sólo se mostrará si los scripts no son compatibles, o se desactivan en el
navegador del usuario:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
[Link]("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

<p>A browser without support for JavaScript will show the text in the noscript
element.</p>
</body>
</html>
49
Página
Etiquetas HTML script

Etiqueta Descripción
<script> Define un script del lado del cliente
<noscript> Define un contenido alternativo para los usuarios que no son compatibles con
secuencias de comandos del lado del cliente

HTML Entidades
Caracteres reservados en HTML debe ser reemplazado por entidades de caracteres.

Las entidades HTML

Algunos personajes son reservados en HTML.

No es posible utilizar el menor que (<) o mayor que (>) signos en su texto, ya que el navegador los mezclan con
las etiquetas.

Para mostrar caracteres reservados en realidad, debemos usar entidades de caracteres en el código fuente HTML.

Una entidad de caracteres es el siguiente:

&entity_name;

&#entity_number;

Para mostrar un signo menor que debemos escribir: < o <

Consejo: La ventaja de utilizar un nombre de entidad, en lugar de un número, es que el nombre es más fácil
de recordar. Sin embargo, la desventaja es que los navegadores no admitan todos los nombres de entidad (el
soporte para los números de la entidad es muy bueno).

HTML Entidades carácter útil

Nota: los nombres de entidad entre mayúsculas y minúsculas!

Resultar Descripción Nombre de la Entidad Entidad Número

espacio de no separación    
< menos que < <
> más que > >
Y signo & Y Y
¢ centavo ¢ ¢
£ libra £ £
¥ yen ¥ ¥
€ euro € €
§ sección § §
© derechos de autor © ©
® marca registrada ® ®
™ marca ™ ™
50
Página

Para una referencia completa de todas las entidades de caracteres, visite nuestro Referencia entidades HTML .
HTML Localizadores Uniformes de Recursos
Un URL es otra palabra para una dirección Web.

Una URL puede estar compuesto de palabras, como "[Link]", o un protocolo de Internet
(IP): [Link]. La mayoría de las personas entran en el nombre del sitio web al navegar,
porque los nombres son más fáciles de recordar que los números.

URL - Uniform Resource Locator

Al hacer clic en un enlace en una página HTML, una etiqueta <a> subyacente apunta a una dirección en la World
Wide Web.

Un localizador uniforme de recursos (URL) se utiliza para tratar un documento (u otros datos) en el mundo Wide
Web.

Una dirección web, así: [Link] sigue estas reglas de sintaxis:

scheme://[Link]:port/path/filename

Explicación:

• sistema - define el tipo de servicio de Internet. El tipo más común es http

• anfitrión - define el host de dominio (el equipo por defecto para HTTP es www )
• dominio - define el Internet nombre de dominio , como [Link]
• : Puerto - define el número de puerto en el host (el puerto por defecto para HTTP es 80 )
• camino - define un camino en el servidor (Si se omite, el documento debe ser almacenado en el
directorio raíz del sitio web)
• Nombre de archivo - define el nombre de un documento / recurso

Esquemas comunes de URL

La tabla siguiente muestra algunos esquemas comunes:

Esquema Corto para .... ¿Qué páginas se el esquema ser utilizados ...
http HyperText Transfer Protocol Páginas web comunes comienza con [Link] No
cifrado
https Secure Hypertext Transfer Asegure las páginas web. Toda la información
Protocol intercambiada se cifran
ftp File Transfer Protocol Para descargar o cargar archivos a un sitio web.Útil
para el mantenimiento de dominio
expediente Un archivo en su computadora 51
Página
HTML codificación URL
Codificación URL convierte los caracteres en un formato que puede ser transmitido a través de
Internet.

URL - Uniform Resource Locator

Navegadores Web solicita páginas de servidores Web mediante una dirección URL.

La URL es la dirección de una página web, como: [Link]

URL Encoding

URLs solo pueden ser enviados a través de Internet utilizando el juego de caracteres ASCII .

Puesto que las direcciones URL a menudo contienen caracteres fuera del conjunto ASCII, el URL tiene que ser
convertido a un formato ASCII válidos.

Codificación URL reemplaza caracteres no ASCII con un "%" seguido de dos dígitos hexadecimales.

URL no puede contener espacios. Codificación URL normalmente sustituye a un espacio con un signo +.

Pruebe usted mismo

Si hace clic en el botón "Enviar" a continuación, el navegador URL codificará la entrada antes de que se envíe al
servidor. Una página en el servidor mostrará la información recibida.

Hello Günter Presentar

Pruebe alguna otra entrada y haga clic en Enviar de nuevo.

Ejemplos de codificación URL

Carácter La codificación URL

€ 80%
£ % A3
© % A9
® % AE
À % C0
Á % C1
Â % C2
Ã % C3
Ä % C4
Å % C5

Para una referencia completa de todas las codificaciones de URL, visite nuestro Referencia codificación URL .
52
Página
HTML Web Server
Para hacer que su sitio web visibles para el mundo, tendrá que almacenarlo en un servidor web.

El alojamiento de su propio sitio web

El alojamiento de su sitio web en su propio servidor es siempre una opción. He aquí algunos puntos a considerar:

Los gastos de hardware

Para ejecutar un "verdadero" sitio web, usted tendrá que comprar un poco de hardware de servidor de gran
alcance. No hay que esperar que un PC de bajo costo puede hacer el trabajo. Usted también necesitará una
permanente (24 horas al día) de alta velocidad de conexión.

Los gastos de Software

Recuerde que los servidores de las licencias a menudo son más altos que los clientes de [Link]én tenga
en cuenta que las licencias de servidor puede tener límites en el número de usuarios.

Gastos Laborales

No espere que los gastos laborales bajos. Usted tiene que instalar su propio hardware y [Link] también
tiene que lidiar con los insectos y los virus, y mantener el servidor funcionando constantemente en un ambiente
donde "todo puede pasar".

El uso de un proveedor de servicios de Internet

El alquiler de un servidor de un proveedor de servicios de Internet (ISP) es una opción común.

La mayoría de empresas pequeñas almacenar su sitio web en un servidor proporcionado por un ISP. Aquí están
algunas ventajas:

Velocidad de conexión

La mayoría de los ISP tienen conexiones muy rápidas a Internet.

Potente Hardware

ISPs a menudo tienen potentes servidores web que pueden ser compartidos por varias [Link]én se
puede esperar que tengan un equilibrio de la carga efectiva, y los servidores de copia de seguridad necesarias.

Seguridad y Estabilidad

Los ISP son especialistas en web hosting. Espere que sus servidores tengan más de un 99% más que el tiempo,
los últimos parches de software, y la mejor protección contra virus.

Cosas a tener en cuenta con un ISP

Asistencia 24 horas
53

Asegúrese de que su ISP ofrece 24 horas de apoyo. No te pongas en una situación donde usted no puede arreglar
los problemas críticos sin tener que esperar hasta el día hábil siguiente. Línea gratuita de teléfono podría ser vital
Página

si no quieren pagar por las llamadas de larga distancia.

Copia de seguridad diaria

Asegúrese de que su proveedor de Internet se ejecuta una rutina de copia de seguridad diaria, de lo contrario es
posible que pierda algunos datos valiosos.

Volumen de Tráfico

Estudio de las restricciones del ISP volumen de tráfico. Asegúrese de que usted no tiene que pagar una fortuna
para el alto tráfico inesperado si su sitio web se convierte en popular.

Tráfico o Restricciones de contenido

Estudiar el ancho de banda del ISP y restricciones de contenido. Si va a publicar o difundir imágenes de vídeo o de
sonido, asegúrese de que usted puede.

Capacidades de correo electrónico

Asegúrese de que su ISP soporta las capacidades de correo electrónico que usted necesita.

Base de datos Access

Si va a utilizar los datos de las bases de datos en su sitio web, asegúrese de que su ISP admite el acceso de base
de datos que necesita.

Antes de seleccionar un proveedor de Internet, asegúrese de leer W3Schools tutorial de Web Hosting .

54
Página
XHTML
XHTML Introducción
XHTML es HTML escrito como XML

¿Qué es XHTML?

• XHTML es sinónimo de lenguaje extensible de marcado de hipertexto

• XHTML es casi idéntico al HTML 4.01
• XHTML es una versión más estricta y limpia de HTML
• XHTML es HTML define como una aplicación XML
• XHTML es una Recomendación del W3C de enero 2000 .
• XHTML es compatible con todos los principales navegadores.

¿Por qué XHTML?

Muchas páginas en Internet contienen "malo" HTML.

El código HTML siguiente funcionará bien si lo ve en un navegador (incluso si no sigue las reglas HTML):

<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>

XML es un lenguaje de marcado que los documentos deben estar marcados de forma correcta y "bien formado".

Si quieres estudiar XML, Lea nuestro tutorial XML .

El mercado actual se compone de tecnologías de navegación diferentes. Algunos navegadores se ejecutan en las
computadoras, y algunos navegadores se ejecutan en teléfonos móviles u otros dispositivos
pequeños. Dispositivos más pequeños a menudo carecen de los recursos o el poder de interpretar una "mala"
lenguaje de marcas.

Por lo tanto - al combinar los puntos fuertes de HTML y XML, XHTML se ha desarrollado. XHTML es HTML
rediseñado como XML.

Las diferencias más importantes de HTML:

Estructura del documento

• DOCTYPE XHTML es obligatorio

• El atributo de espacio de nombres XML en <html> es obligatorio
• <head> <html>, <title>, y <body> es obligatorio

Elemento de sintaxis
55

• Elementos XHTML deben estar correctamente anidados

• Elementos XHTML debe estar siempre cerrado
Página

• Elementos XHTML deben estar en minúsculas

• Los documentos XHTML deben tener un elemento raíz
La Sintaxis

• Nombres XHTML atributos deben estar en minúsculas

• XHTML valores de los atributos deben ser citado
• Minimización XHTML atributo está prohibido

<! DOCTYPE ....> es obligatorio

Un documento XHTML deben tener una declaración DOCTYPE XHTML.

Una lista completa de doctypes XHTML se encuentra en referencia W3Schools 'Etiquetas .

El <head> <html>, <title>, y elementos <body> también debe estar presente, y el atributo xmlns en <html>,
debe especificar el espacio de nombres XML para el documento.

El siguiente ejemplo muestra un documento XHTML con un mínimo de variables necesarias:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"[Link]

<html xmlns="[Link]
<head>
<title>Title of document</title>
</head>

Cómo convertir de HTML a XHTML

1. Añadir una XHTML <! DOCTYPE> para la primera línea de cada página
2. Agregue un atributo xmlns al elemento html de cada página
3. Cambiar todos los nombres de los elementos en minúsculas
4. Cierre todos los elementos vacíos
5. Cambiar todos los nombres de los atributos a minúsculas
6. Citar todos los valores de los atributos

Validar XHTML con el validador del W3C

Ponga su dirección web en el cuadro siguiente:

[Link] w w .w [Link]/html/demo_xhtml.asp

Validar la página
56
Página
XHTML - Elements
Elementos XHTML escritas son elementos HTML como XML

XHTML Elements - Reglas de sintaxis

• Elementos XHTML deben estar correctamente anidados

• Elementos XHTML debe estar siempre cerrado
• Elementos XHTML deben estar en minúsculas
• Los documentos XHTML deben tener un elemento raíz

Los elementos XHTML deben estar correctamente anidados

En HTML, algunos elementos pueden ser incorrectamente anidados unos dentro de otros, así:

<b><i>This text is bold and italic</b></i>

En XHTML, todos los elementos deben estar correctamente anidados unos dentro de otros, así:

<b><i>This text is bold and italic</i></b>

Los elementos XHTML deben estar siempre

Esto es incorrecto:

<p>This is a paragraph
<p>This is another paragraph

Esto es correcto:

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Elementos vacíos también deben cerrarse

Esto es incorrecto:

A break: <br>
A horizontal rule: <hr>
An image: <img src="[Link]" alt="Happy face">

Esto es correcto:

A break: <br />

A horizontal rule: <hr />
An image: <img src="[Link]" alt="Happy face" />
57
Página
Los elementos XHTML deben estar en minúsculas

Esto es incorrecto:

<BODY>
<P>This is a paragraph</P>
</BODY>

Esto es correcto:

<body>
<p>This is a paragraph</p>
</body>

XHTML - Atributos
Atributos XHTML son atributos HTML escrito como XML

Atributos XHTML - Reglas de sintaxis

• Los nombres de atributos deben estar en minúsculas

• Los valores de atributo debe ser citado
• Minimización de atributos se prohíbe

Los nombres de atributo deben estar en minúsculas

Esto es incorrecto:

Esto es correcto:

Los valores de atributo deben ponerse entre comillas

Esto es incorrecto:

Esto es correcto:

<table width="100%">
58
Página
Minimización atributo Es prohibido

Esto es incorrecto:

Esto es correcto:

<input checked="checked" />

59
Página
HTML5

HTML5 es el nuevo estándar HTML

HTML5
• Nuevos elementos
• Nuevos atributos
• Soporte completo de CSS3
• Video y Audio
• Gráficos 2D/3D
• Almacenamiento local
• Local base de datos SQL
• Aplicaciones Web

Con nuestro editor HTML, puede editar el HTML y haga clic en un botón para ver el resultado.
Ejemplo

<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="[Link]" type="video/ogg" />
<source src="[Link]" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>

60
Página
HTML5 Introducción
HTML5 es la siguiente generación de HTML.

¿Qué es el HTML5?

HTML5 será el nuevo estándar de HTML.

La versión anterior de HTML, HTML 4.01, se produjo en 1999. La web ha cambiado mucho desde entonces.

HTML5 es todavía un trabajo en progreso. Sin embargo, los principales navegadores apoyan muchos de los
elementos de HTML5 y nuevas APIs.

¿Cómo resultó HTML5 empezar?

HTML5 es una colaboración entre el Consorcio World Wide Web (W3C) y la Red de hipertexto Aplicación de
Tecnología del Grupo de Trabajo (WHATWG).

WHATWG estaba trabajando con los formularios web y aplicaciones, y estaba trabajando con W3C XHTML 2.0. En
2006, decidieron cooperar y crear una nueva versión de HTML.

Algunas reglas para HTML5 se establecieron:

• Las nuevas características se basa en HTML, CSS, DOM y JavaScript

• Reducir la necesidad de plugins externos (como Flash)
• Mejor manejo de errores
• Más marcado para reemplazar secuencias de comandos
• HTML5 debe ser independiente del dispositivo
• El proceso de desarrollo debe ser visible para el público

El HTML5 <! DOCTYPE>

En HTML5 hay una sola declaración, y es muy simple <Vendor!>:

<!DOCTYPE html>

Documento HTML5 mínima

A continuación se muestra un documento HTML5 simple, con el mínimo de etiquetas necesarias:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>
</html>
61
Página

HTML5 - Nuevas funciones

Algunas de las nuevas características más interesantes de HTML5:

• El elemento <canvas> para el dibujo 2D

• Los elementos <video> y <audio> para la reproducción de medios
• Soporte para almacenamiento local
• Nuevos elementos de contenido específico, como <article>, <footer>, <header>, <NAV>, <section>
• Los nuevos controles de formulario, como el calendario, la fecha, hora, dirección de correo electrónico,
URL, búsqueda

Soporte del navegador para HTML5

HTML5 todavía no es un estándar oficial, y no los navegadores tienen soporte HTML5 completo.

Sin embargo, todos los principales navegadores (Safari, Chrome, Firefox, Opera, Internet Explorer) continúan
agregando nuevas características HTML5 a sus últimas versiones.

HTML5 Nuevos elementos

Nuevos elementos en HTML5

El Internet ha cambiado mucho desde HTML 4.01 convirtió en un estándar en 1999.

Hoy en día, algunos elementos de HTML 4.01 han quedado obsoletos, nunca utilizados, o no se usa la forma en
que se pretende. Estos elementos se han eliminado o re-escrito en HTML5.

Para manejar mejor el uso actual de Internet, HTML5 incluye nuevos elementos para una mejor estructura, un
mejor manejo de formularios, el dibujo y el contenido de los medios de comunicación.

Nuevos elementos semánticos / Estructural

HTML5 ofrece nuevos elementos para su estructura:

Etiqueta Descripción
<article> Define un artículo
<aside> Define el contenido aparte del contenido de la página
<bdi> Aísla una parte de texto que puede ser formateado en una dirección distinta de otro
texto fuera de ella
<command> Define un botón de comando que un usuario puede invocar
<details> Define los detalles adicionales que el usuario puede ver o esconder
<summary> Define un título para un elemento visible <details>
<figure> Especifica autónomo de contenido, como ilustraciones, diagramas, fotos, listados
de código, etc
<figcaption> Define un título para un elemento <figure>
<footer> Define un pie de página de un documento o sección
<header> Define un encabezado de un documento o sección
<hgroup> Agrupa un conjunto de elementos para <h1> <h6> cuando un título tiene varios
niveles
<mark> Define el texto marcado / resaltado
<meter> Define una medida escalar dentro de un rango conocido (a medida)
<nav> Define vínculos de exploración
<progress> Representa el progreso de una tarea
<ruby> Define una anotación ruby (para el Este de Asia tipografía)
<rt> Define una explicación / pronunciación de los caracteres (para el Este de Asia
tipografía)
62

<rp> Define qué mostrar en navegadores que no soportan anotaciones ruby

<section> Define una sección de un documento
Página

<time> Define una fecha / hora

<wbr> Define un posible salto de línea
Nuevos Elementos de Medios

HTML5 ofrece nuevos elementos para el contenido de los medios de comunicación:

Etiqueta Descripción
<audio> Define el contenido de sonido
<video> Define un vídeo o una película
<source> Define los recursos de medios múltiples para <video> y <audio>
<embed> Define un contenedor para una aplicación externa o contenido interactivo (plug-in)
<track> Define pistas de texto para <video> y <audio>

El elemento nuevo <canvas>

Etiqueta Descripción
<canvas> Se utiliza para dibujar gráficos, sobre la marcha, a través de secuencias de
comandos (normalmente JavaScript)

Nuevos elementos de formulario

HTML5 ofrece nuevos elementos de formulario, para una mayor funcionalidad:

Etiqueta Descripción
<datalist> Especifica una lista de opciones predefinidas para los controles de entrada
<keygen> Define un campo generador de par de claves (para formularios)
<output> Define el resultado de un cálculo

Elementos eliminados
Los siguientes elementos HTML 4.01 se quitan de HTML5:

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>
63
Página
HTML5 video
Muchos sitios web modernos mostrar videos. HTML5 proporciona un estándar para mostrarlos.

Video en la Web

Hasta ahora, no ha sido un estándar para mostrar un vídeo / película en una página web.

Hoy en día, la mayoría de los vídeos se muestra a través de un plug-in (como flash). Sin embargo, los diferentes
navegadores pueden tener diferentes plug-ins.

HTML5 define un nuevo elemento que especifica un método estándar para incrustar un vídeo / película en una
página web: el elemento <video>.

Compatibilidad con exploradores

Internet Explorer 9, Firefox, Opera, Chrome, Safari y apoyar el elemento <video>.

Nota: Las versiones de Internet Explorer 8 y versiones anteriores, no son compatibles con el elemento <video>.

HTML5 Video - ¿Cómo funciona?

Para mostrar un vídeo en HTML5, esto es todo lo que necesita:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="[Link]" type="video/ogg" />
Your browser does not support the video tag.
</video>
</body>
</html>

El atributo de control añade controles de vídeo, como reproducción, pausa y volumen.

También es una buena idea incluir siempre los atributos de anchura y altura. Si la altura y la anchura se establece,
64

el espacio requerido para el vídeo está reservada cuando la página está cargada. Sin embargo, sin estos atributos,
el navegador no sabe el tamaño del vídeo, y no puede reservar el espacio adecuado para ello. El efecto será que el
Página

diseño de la página cambiará durante la carga (mientras se carga el vídeo).

También debe insertar el contenido del texto entre el <video> y </ video> etiquetas para los navegadores que no
soportan el elemento <video>.

El elemento <video> permite que varios elementos <source>. elementos <source> puede vincular a los archivos
de vídeo diferentes. El navegador utiliza el primer formato reconocido.

Formatos de vídeo y Soporte del navegador

Actualmente, hay 3 formatos de vídeo con soporte para el elemento <video>: MP4, WebM y Ogg:

Navegador MP4 WebM Ogg

Internet Explorer 9 SI NO NO
Firefox 4.0 NO SI SI
Google Chrome 6 SI SI SI
Apple Safari 5 SI NO NO
Opera 10.6 NO SI SI

• MP4 = MPEG 4 archivos con códec de vídeo H264 y AAC audio codec
• WebM WebM = archivos con códec de vídeo VP8 y el audio codec Vorbis
• Ogg = Ogg Theora archivos con códec de vídeo y audio codec Vorbis

HTML5 Video Tags

Etiqueta Descripción
<video> Define un vídeo o una película
<source> Define múltiples recursos multimedia para elementos multimedia, como
<video> y <audio>
<track> Define pistas de texto en mediaplayers

65
Página
HTML5 Video + DOM
HTML5 <video> - tomar el control usando el DOM

El elemento <video> HTML5 también tiene métodos, propiedades y eventos.

Hay métodos para reproducir, pausar, y la carga, por ejemplo. Hay propiedades (por ejemplo, duración, volumen,
búsqueda) que se pueden leer o establecer. También hay eventos DOM que se le notifican, por ejemplo, cuando el
elemento <video> comienza a jugar, está en pausa, se acabó, etc

Los ejemplos siguientes ilustran, de una manera sencilla, la forma de abordar un elemento <video>, leer y
establecer las propiedades, y métodos de llamadas.

Ejemplo 1

Cree simple juego / pausa + controles de cambio de tamaño de un vídeo:

Play/Pause Big Small Normal

Video courtesy of Big Buck Bunny.

El ejemplo anterior llama a dos métodos: play () y pausa (). También utiliza dos propiedades: una pausa y
anchura.

<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br />

<video id="video1" width="420">

<source src="mov_bbb.mp4" type="video/mp4" />
<source src="mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>

function playPause()
{
if ([Link])
[Link]();
else
[Link]();
}

function makeBig()
{
66

[Link]=560;
}
Página
function makeSmall()
{
[Link]=320;
}

function makeNormal()
{
[Link]=420;
}
</script>

<p>Video courtesy of
<a href="[Link] target="_blank">
Big Buck Bunny
</a>.
</p>
</body>
</html>

HTML5 <video> - Métodos, propiedades y eventos

En la tabla siguiente se enumeran los métodos de vídeo, propiedades y eventos apoyados por la mayoría de
navegadores:

Métodos Propiedades Eventos

play () currentSrc jugar
pause () horaActual pausa
load () videoWidth progreso
canPlayType videoHeight error
duración timeupdate
terminó terminó
error abortar
pausa vacío
apagado vaciado
la búsqueda de espera
volumen loadedmetadata
altura
ancho

Nota: De las propiedades de vídeo, sólo videoWidth videoHeight y están disponibles inmediatamente. Las otras
propiedades están disponibles a partir de datos del vídeo meta se ha cargado.
67
Página
HTML5 Audio
HTML5 proporciona un estándar para la reproducción de archivos de audio.

Audio en la Web

Hasta ahora, no ha sido un estándar para la reproducción de archivos de audio en una página web.

Hoy en día, la mayoría de archivos de audio se reproduce a través de un plug-in (como flash). Sin embargo, los
diferentes navegadores pueden tener diferentes plug-ins.

HTML5 define un nuevo elemento que especifica un método estándar para insertar un archivo de audio en una
página web: el elemento <audio>.

Compatibilidad con exploradores

Internet Explorer 9, Firefox, Opera, Chrome, Safari y apoyar el elemento <audio>.

Nota: Las versiones de Internet Explorer 8 y versiones anteriores, no son compatibles con el elemento <audio>.

HTML5 Audio - ¿Cómo funciona?

Para reproducir un archivo de audio en HTML5, esto es todo lo que necesita:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="[Link]" type="audio/ogg" />
<source src="horse.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</body>
</html>

El atributo de control añade controles de audio, como reproducción, pausa y volumen.

También debe insertar el contenido del texto entre el <audio> y </ audio> etiquetas para los navegadores que no
soportan el elemento <audio>.

El elemento <audio> permite que varios elementos <source>. elementos <source> puede vincular a los distintos
archivos de audio. El navegador utiliza el primer formato reconocido.
68
Página
Y formatos de audio Soporte del navegador

Actualmente, hay 3 formatos de archivo admitidos para el elemento <audio>: MP3, WAV y OGG:

Navegador MP3 Wav Ogg

Internet Explorer 9 SI NO NO
Firefox 4.0 NO SI SI
Google Chrome 6 SI SI SI
Apple Safari 5 SI SI NO
Opera 10.6 NO SI SI

HTML5 Audio Tags

Etiqueta Descripción
<audio> Define el contenido de sonido
<source> Define múltiples recursos multimedia para elementos multimedia, como
<video> y <audio>

69
Página
HTML5 Drag and Drop
Arrastrar y soltar es una parte del estándar HTML5.

Arrastrar y soltar

Arrastrar y soltar es una característica muy común. Es cuando "agarrar" un objeto y arrastrarlo a una ubicación
diferente.

En HTML5, arrastrar y soltar es parte de la norma, y cualquier elemento puede arrastrarse.

HTML5 Drag and Drop Ejemplo

El siguiente ejemplo es un simple arrastrar y soltar ejemplo:

Ejemplo

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

function allowDrop(ev)
{
[Link]();
}

function drag(ev)
{
[Link]("Text",[Link]);
}

function drop(ev)
{
[Link]();
var data=[Link]("Text");
[Link]([Link](data));
}
</script>
</head>

<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
70
Página

Puede parecer complicado, pero vamos a ir a través de todas las diferentes partes de un evento de arrastrar y
soltar.
Hacer una arrastrable Element

En primer lugar: Para hacer una arrastrable elemento, establezca el atributo arrastrarse en true:

<img draggable="true" />

Qué Arrastre - ondragstart y setData ()

A continuación, especifique lo que debe suceder cuando el elemento se arrastra.

En el ejemplo anterior, el atributo ondragstart llama a una función, arrastre (evento), que especifica los datos para
ser arrastrada.

El [Link] () método establece el tipo de datos y el valor de los datos arrastrados:

function drag(ev)
{
[Link]("Text",[Link]);
}

En este caso, el tipo de datos es "Texto" y el valor es el id del elemento arrastrable ("drag1").

Dónde Drop - onDragOver

El evento ondragover especifica que los datos arrastrados se pueden quitar.

De forma predeterminada, los datos / elementos no pueden ser dejados en otros elementos. Para permitir una
caída, hay que evitar que el tratamiento predeterminado del elemento.

Esto se hace llamando a la [Link] () método para el evento ondragover:

[Link]()

Haga lo Drop - ondrop

Cuando los datos arrastrado se coloca, se produce un evento de colocación.

En el ejemplo anterior, el atributo ondrop llama a una función, gota (evento):

function drop(ev)
{
[Link]();
var data=[Link]("Text");
[Link]([Link](data));
}

Código explicó:

• Llame a preventDefault () para evitar la manipulación por defecto del navegador de los datos (por defecto
es abierto como enlace en la gota)
•
71

Obtener los datos arrastrados con el [Link] ("Texto") método. Este método devolverá todos
los datos que se estableció al mismo tipo en el setData () método
• Los datos arrastrando es el id del elemento arrastrado ("drag1")
Página

• Añadir el elemento arrastrado en la caída de elemento

HTML5 Canvas
El elemento <canvas> se utiliza para dibujar gráficos, sobre la marcha, en una página web.

Dibuje un rectángulo rojo, un rectángulo degradado, un rectángulo multicolor, multicolor y un

poco de texto en el lienzo:

¿Qué es el lienzo?

El elemento <canvas> HTML5 se utiliza para dibujar gráficos, sobre la marcha, a través de secuencias de
comandos (normalmente JavaScript).

El elemento <canvas> es sólo un contenedor para gráficos. Se debe utilizar una secuencia de comandos para
dibujar en realidad los gráficos.

Canvas tiene varios métodos para rutas de dibujo, cajas, círculos, personajes e imágenes agregando.

Crear un lienzo

Un lienzo es un área rectangular en una página HTML, y se especifica con el elemento <canvas>.

Nota: De forma predeterminada, el elemento <canvas> no tiene borde y el contenido no.

El marcado es el siguiente:

<canvas id="myCanvas" width="200" height="100"></canvas>

Nota: Siempre especifique un atributo id (que se denominará en una secuencia de comandos), y un atributo de
anchura y altura para definir el tamaño de la tela.

Consejo: Usted puede tener múltiples elementos <canvas> en una página HTML.

Para añadir un borde, utilice el atributo de estilo:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>
72
Página
Dibuja en la tela con JavaScript

Todos los dibujos en el lienzo se debe hacer dentro de un JavaScript:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"width="200"height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

Ejemplo explicó:

En primer lugar, encontrar el elemento <canvas>:

var c=[Link]("myCanvas");

Luego, llame a su getContext () método (hay que pasar la cadena "2d" al getContext () método):

var ctx=[Link]("2d");

El getContext ("2d") es un objeto incorporado en HTML5, con muchas propiedades y métodos para las rutas de
dibujo, cuadros, círculos, texto, imágenes, y mucho más.

Las siguientes dos líneas se dibuja un rectángulo rojo:

[Link]="#FF0000";
[Link](0,0,150,75);

La propiedad fillStyle puede ser un color CSS, un degradado o un motivo. El fillStyle predeterminado es # 000000
(negro).

El fillRect ( x, y, ancho, altura método) dibuja un rectángulo relleno con el estilo de relleno actual.
73
Página
Coordenadas lienzo

La tela es una rejilla de dos dimensiones.

En la esquina superior izquierda del lienzo tiene coordenadas (0,0)

Así, la fillRect () método anterior tenía los parámetros (0,0,150,75).

Esto significa: Comienza en la esquina superior izquierda (0,0) y dibujar un rectángulo 150x75 píxeles.

Coordenadas Ejemplo

Pase el ratón sobre el rectángulo de abajo para ver sus coordenadas X e Y:

Lienzo - Senderos

Para dibujar líneas rectas en un lienzo, vamos a utilizar los dos métodos siguientes:

• moveTo ( x, y ) define el punto inicial de la línea

• lineTo ( x, y ) define el punto final de la línea

Para dibujar la línea en realidad, hay que utilizar uno de los métodos de "tinta", como accidente cerebrovascular
().

Ejemplo

Definir un punto de partida en la posición (0,0), y un punto final en la posición (200,100). A continuación, utilice el
trazo de método () para dibujar en realidad la línea:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

var c=[Link]("myCanvas");
var ctx=[Link]("2d");
[Link](0,0);
[Link](200,100);
[Link]();

</script>

</body>
</html>
74
Página
Para dibujar el círculo en realidad, hay que utilizar uno de los métodos de "tinta", como accidente cerebrovascular
() o rellenar ().

Ejemplo

Crear un círculo con el método de arco ():

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

Canvas - Texto

Para dibujar texto en un lienzo, la propiedad más importante y los métodos son los siguientes:

• font - define las propiedades de fuente para el texto

• fillText ( texto, x, y ) - Dibuja "lleno" de texto en el lienzo
• strokeText ( texto, x, y ) - Dibuja el texto en el lienzo (sin relleno)

Uso de fillText ()

Ejemplo

Escribir un texto 30px alto lleno en el lienzo, utilizando el tipo de letra "Arial":

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

var c=[Link]("myCanvas");
var ctx=[Link]("2d");
[Link]="30px Arial";
[Link]("Hello World",10,50);

</script>
75

</body>
</html>
Página
Uso de strokeText ():

Ejemplo

Escribir un texto 30px de alto (sin relleno) en el lienzo, utilizando el tipo de letra "Arial":

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

var c=[Link]("myCanvas");
var ctx=[Link]("2d");
[Link]="30px Arial";
[Link]("Hello World",10,50);

</script>

</body>
</html>

Lienzo - Degradados

Los gradientes se puede utilizar para rellenar rectángulos, círculos, líneas, texto, formas, etc en el lienzo no se
limitan a los colores sólidos.

Hay dos tipos diferentes de gradientes:

• createLinearGradient ( x, y, x1, y1 ) - Crea un degradado lineal

• createRadialGradient ( x, y, r, x1, y1, r1 ) - Crea un degradado radial / circular

Una vez que tenemos un objeto degradado, hay que añadir dos o más escalas de color.

El addColorStop () método especifica las paradas de color, y su posición a lo largo del [Link] de
gradiente puede estar en cualquier lugar entre 0 y 1.

Para usar el degradado, establezca la propiedad fillStyle o strokeStyle al degradado, y luego dibujar la forma,
como un rectángulo, texto, o una línea.
76
Página
Uso de createLinearGradient ():

Ejemplo

Crear un degradado lineal. Rellene rectángulo con el gradiente:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

// Create gradient
var grd=[Link](0,0,200,0);
[Link](0,"red");
[Link](1,"white");

// Fill with gradient

[Link]=grd;
[Link](10,10,150,80);
</script>
</body>
</html>

Uso de createRadialGradient ():

Ejemplo

Crear un degradado radial / circular. Rellene rectángulo con el gradiente:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200"height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

// Create gradient
var grd=[Link](75,50,5,90,60,100);
[Link](0,"red");
[Link](1,"white");

// Fill with gradient

[Link]=grd;
[Link](10,10,150,80);
</script>
77

</body>
</html>
Página
Lienzo - Imágenes

Para dibujar una imagen en un lienzo, se utilizará el siguiente método:

• drawImage ( imagen, x, y )

Ejemplo

Dibuja la imagen en el lienzo:

<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="the_scream.jpg" alt="The Scream"width="220" height="277"/>

<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300"style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

HTML5 Canvas objeto de referencia

Para una referencia completa de todas las propiedades y métodos que se pueden utilizar con el objeto Canvas
(con try-it ejemplos de cada propiedad y método), vaya a nuestro Referencia Canvas de HTML5.

HTML5 Tag <canvas>

Etiqueta Descripción
<canvas> Se utiliza para dibujar gráficos, sobre la marcha, a través de secuencias de
comandos (normalmente JavaScript)
78
Página
HTML5 Inline SVG
HTML5 tiene soporte para Inline SVG.

¿Cuál es SVG?

• SVG significa Scalable Vector Graphics

• SVG se utiliza para definir los vectores basados en gráficos para la Web
• SVG define los gráficos en formato XML
• Gráficos SVG no se pierde ninguna calidad si has cambiado de tamaño o
• Cada elemento y cada atributo en archivos SVG se pueden animar
• SVG es una recomendación del W3C

Ventajas SVG

Ventajas del uso de SVG a través de otros formatos de imagen (como JPEG y GIF) son:

• Imágenes SVG se pueden crear y editar con cualquier editor de texto

• Imágenes SVG se pueden buscar, indexado, con guión y comprimido
• Imágenes SVG son escalables
• Imágenes SVG pueden ser impresos con alta calidad en cualquier resolución
• Imágenes SVG son zoomable (y la imagen se puede ampliar sin degradación)

Insertar SVG directamente en páginas HTML

En HTML5, puede incrustar elementos SVG directamente en su página HTML:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<svg xmlns="[Link] version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;
stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
79
Página
HTML5 Canvas vs SVG
Ambos lienzos y SVG permite crear gráficos dentro del navegador, pero son fundamentalmente
diferentes.

SVG

SVG es un lenguaje para describir gráficos 2D en XML.

SVG es basado en XML, lo que significa que cada elemento está disponible dentro del DOM [Link] asociar
controladores de eventos de JavaScript para un elemento.

En SVG, cada figura dibujada es recordado como un objeto. Si los atributos de un objeto SVG se cambian, el
navegador automáticamente se puede volver a hacer la forma.

Lienzo

Lienzo dibuja gráficos 2D, sobre la marcha (con un JavaScript).

Lienzo se representa pixel por pixel.

En la lona, una vez que el gráfico se dibuja, se olvida por el navegador. Si su posición debe ser cambiado, toda la
escena tiene que ser rediseñados, incluyendo los objetos que podrían haber sido incluidos en el gráfico.

Comparación de la lona y SVG

La siguiente tabla muestra algunas diferencias importantes entre lienzos y SVG.

Lienzo SVG
• Resolución dependiente • Resolución independiente
• No hay soporte para controladores de • Apoyo a los controladores de eventos
eventos • Especialmente indicados para aplicaciones
• Pobres capacidades de representación de con grandes áreas de representación (Google
texto Maps)
• Puede guardar la imagen resultante como. • Representación lenta si complejo (cualquier
Gif o. Jpg cosa que utiliza el DOM mucho va a ser
• Lo más conveniente para juegos con gráficos lento)
intensivos, donde muchos objetos se vuelven • No adecuado para aplicaciones de juegos
a dibujar con frecuencia

80
Página
HTML5 Geolocation
Geolocalización HTML5 se utiliza para localizar la posición de un usuario Pruébelo

Busque la posición del usuario

El HTML5 Geolocation API se utiliza para obtener la posición geográfica de un usuario.

Dado que esto puede comprometer la privacidad del usuario, la posición no está disponible a menos que el usuario
lo apruebe.

HTML5 - Uso de Geolocalización

Utilice el método getCurrentPosition () para obtener la posición del usuario.

El ejemplo siguiente es un ejemplo sencillo Geolocalización devolver la latitud y longitud de la posición del usuario:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=[Link]("demo");
function getLocation()
{
if ([Link])
{
[Link](showPosition);
}
else{[Link]="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
[Link]="Latitude: " + [Link] +
"<br />Longitude: " + [Link];
}
</script>
</body>
</html>

Ejemplo explicó:

• Compruebe si se admite Geolocalización

• Si se admite, ejecute el getCurrentPosition () método. Si no, mostrar un mensaje al usuario
• Si el getCurrentPosition () método tiene éxito, devuelve un objeto coordenadas a la función especificada
81

en el parámetro (ShowPosition)
• El ShowPosition () función obtiene la muestra la Latitud y Longitud
Página

El ejemplo anterior es un script de Geolocalización muy básico, sin control de errores.

Controlar errores y rechazos

El segundo parámetro del método getCurrentPosition () se utiliza para controlar los errores. En él se especifica una
función a ejecutar en caso de no obtener la ubicación del usuario:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>

function getLocation()
{
if ([Link])
{
[Link](showPosition,showError);
}
else
{
[Link]="Geolocation is not supported by this browser.";
}
}

function showPosition(position)
{
[Link]="Latitude: " + [Link] +
"<br />Longitude: " + [Link];
}

function showError(error)
{
switch([Link])
{
case error.PERMISSION_DENIED:
[Link]="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
[Link]="Location information is unavailable."
break;
case [Link]:
[Link]="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
[Link]="An unknown error occurred."
break;
}
}
</script>
</body>
</html>

Códigos de error:

• Permiso denegado - el usuario no permitió Geolocalización

• Coloque disponible - No es posible obtener la ubicación actual

• Timeout - La operación ha agotado
Página
Visualización del resultado en un mapa

Para mostrar el resultado en un mapa, usted necesita el acceso a un servicio de mapas que se pueden utilizar
latitud y longitud, como Google Maps:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>

function getLocation()
{
if ([Link])
{
[Link](showPosition,showError);
}
else
{
[Link]="Geolocation is not supported by this browser.";
}
}

function showPosition(position)
{
var latlon=[Link]+","+[Link];
var img_url="[Link]
+latlon+"&zoom=14&size=400x300&sensor=false";

[Link]("mapholder").innerHTML="<img src='"+img_url+"' />";

}

En el ejemplo anterior usamos la latitud regresó y datos de longitud para mostrar la ubicación en un mapa de
Página

Google (utilizando una imagen estática).

Cómo utilizar una secuencia de comandos para mostrar un mapa interactivo con un marcador, el zoom y las
opciones de arrastre.

Obtener información específica sobre

Esta página demuestra cómo mostrar la posición del usuario en un mapa. Sin embargo, Geolocation es también
muy útil para la localización de información específica.

Ejemplos:

• Hasta al día la información local

• Mostrando Puntos de interés cerca del usuario
• Turn-by-Turn Navigation (GPS)

Método El getCurrentPosition () - Devolver datos

El getCurrentPosition () devuelve un objeto si tiene éxito. Las propiedades de la latitud, longitud y precisión
siempre se devuelven. Las demás propiedades se devuelven a continuación si está disponible.

Propiedad Descripción
[Link] La latitud como un número decimal
[Link] La longitud como un número decimal
[Link] La precisión de posición
[Link] La altitud en metros sobre el nivel medio del mar
[Link] La precisión de la posición de altitud
[Link] La partida que grados respecto al norte
[Link] La velocidad en metros por segundo
fecha y hora La fecha / hora de la respuesta

Objeto Geolocation - Otros métodos interesantes

watchPosition () - Devuelve la posición actual del usuario y continúa devolviendo posición actualizada a medida
que el usuario (como el GPS en un coche).

clearWatch () - Detiene el watchPosition () método.

El siguiente ejemplo muestra el método watchPosition (). Usted necesita un dispositivo GPS preciso para probar
esto (como el iPhone):
84
Página
Ejemplo

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>

function getLocation()
{
if ([Link])
{
[Link](showPosition);
}
else
{
[Link]="Geolocation is not supported by this browser.";
}
}

function showPosition(position)
{
[Link]="Latitude: " + [Link] +
"<br />Longitude: " + [Link];
}
</script>
</body>
</html>

85
Página
HTML5 Web Storage
HTML5 web de almacenamiento, un almacenamiento local mejor que las galletas.

¿Qué es el HTML5 Web Storage?

Con HTML5, las páginas web pueden almacenar información localmente en el navegador del usuario.

Anteriormente, esto se hizo con las cookies. Sin embargo, el almacenamiento en Web es más seguro y más
rápido. Los datos no se incluye con cada petición del servidor, pero es usado solamente cuando se le
pide. También es posible almacenar grandes cantidades de datos, sin afectar el rendimiento del sitio web.

localStorage y sessionStorage

Hay dos nuevos objetos para el almacenamiento de datos en el cliente:

• localStorage - almacena los datos sin fecha de caducidad

• sessionStorage - almacena los datos para un período de sesiones

Antes de utilizar el almacenamiento web, compruebe la compatibilidad con exploradores para localStorage y
sessionStorage:

if(typeof(Storage)!=="undefined")
{ // Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}

El objeto localStorage

El objeto localStorage almacena los datos sin fecha de caducidad. Los datos no se eliminan cuando el navegador
se cierra, y estará disponible el próximo día, semana o año.

Ejemplo

<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
[Link]="Smith";
[Link]("result").innerHTML="Last name: " +
[Link];
}
else
{
[Link]("result").innerHTML="Sorry, your browser does not
support web storage...";
}
</script>
86

</body>
</html>
Página
Ejemplo explicó:

• Crear un localStorage par clave / valor con la tecla = "apellido" y el valor = "Smith"
• Recuperar el valor de la "apellido" clave y la inserta en el elemento con id = "número"

Consejo: clave / valor siempre se almacenan como cadenas. Recuerde que debe convertir a otro formato cuando
sea necesario.

El ejemplo siguiente se cuenta el número de veces que un usuario ha hecho clic en un botón. En este código de la
cadena de valor se convierte a un número para ser capaz de aumentar el contador:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if ([Link])
{
[Link]=Number([Link])+1;
}
else
{
[Link]=1;
}
[Link]("result").innerHTML="You have clicked the
button " + [Link] + " time(s).";
}
else
{
[Link]("result").innerHTML="Sorry, your browser does
not support web storage...";
}
}
</script>
</head>

<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will
continue to count (is not reset).</p>
</body>
</html>
87
Página
El objeto sessionStorage

El objeto sessionStorage es igual al objeto localStorage, excepto que almacena los datos para una sola
sesión. Los datos se eliminan cuando el usuario cierra la ventana del navegador.

El ejemplo siguiente cuenta el número de veces que un usuario ha hecho clic en un botón, en la sesión actual:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if ([Link])
{
[Link]=Number([Link])+1;
}
else
{
[Link]=1;
}

<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>

<p>Close the browser tab (or window), and try again, and the counter is
reset.</p>
</body>
</html>
88
Página
HTML5 memoria caché de aplicaciones
Con HTML5 es fácil hacer una versión sin conexión de una aplicación web mediante la creación de
un archivo de manifiesto de caché.

¿Qué es la memoria caché de aplicaciones?

HTML5 introduce caché de la aplicación, lo que significa que una aplicación web se almacena en caché y accesible
sin conexión a internet.

Caché de la aplicación ofrece una aplicación de tres ventajas:

1. Navegación fuera de línea - los usuarios pueden utilizar la aplicación cuando está fuera de línea
2. Velocidad - recursos almacenados en caché se cargan más rápido
3. Reducción de la carga del servidor - el único navegador se descargará recursos actualizados / cambiado
desde el servidor

Caché HTML5 Manifiesto Ejemplo

El siguiente ejemplo muestra un documento HTML con un manifiesto de caché (para navegar sin conexión):

Ejemplo

<!DOCTYPE html>
<html manifest="demo_html.appcache">
<body>
<script src="demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>
<p><img src="img_logo.gif" width="336" height="69" /></p>
<p>Try opening <a href="tryhtml5_html_manifest.htm" target="_blank">this page</a>, then
go offline, and reload the page. The script and the image should still work.</p>
</body>
</html>

Fundamentos de caché Manifest

Para habilitar la caché de la aplicación, incluya el atributo de manifiesto en la etiqueta <html> del documento:

<!DOCTYPE HTML>
<html manifest="[Link]">
...
</html>

Cada página con el atributo especificado manifiesto se almacenan en caché cuando el usuario lo visita. Si el
atributo manifiesto no se especifica, la página no se almacenan en caché (a menos que la página se especifica
directamente en el archivo de manifiesto).
89

La extensión de archivo recomendada para los archivos de manifiesto es: "AppCache".

Página
Un archivo de manifiesto debe ser servido con el tipo MIME correcto , que es "text / cache-manifiesto". Se
debe configurar en el servidor web.

El archivo de manifiesto

El archivo de manifiesto es un archivo de texto simple, que le dice al navegador qué almacenar en caché (y que
nunca caché).

El archivo de manifiesto consta de tres secciones:

• MANIFIESTO CACHE - Los archivos que figuran en esta cabecera se almacenan en caché después de
haber sido descargado por primera vez
• RED - Los archivos que figuran en esta cabecera requieren una conexión con el servidor, y no se
almacenan en caché
• RÉPLICA - Los archivos que figuran en esta cabecera especifica las páginas de reserva si una página es
inaccesible

CACHE MANIFEST

La primera línea, manifiesto de la caché, se requiere:

CACHE MANIFEST
/[Link]
/[Link]
/[Link]

El archivo de manifiesto anteriormente enumera tres recursos: un archivo CSS, una imagen GIF, y un archivo
JavaScript. Cuando el archivo de manifiesto se carga, el navegador descargará los tres archivos del directorio raíz
del sitio web. Entonces, siempre que el usuario no está conectado a Internet, los recursos todavía estará
disponible.

RED

La sección de la red a continuación especifica que el archivo "[Link]" nunca debe ser almacenado en caché, y
no estarán disponibles sin conexión:

NETWORK:
[Link]

Un asterisco puede ser utilizado para indicar que todos los demás recursos / archivos requieren una conexión a
Internet:

NETWORK:
*

RÉPLICA

La sección FALLBACK abajo se especifica que "[Link]" se sirve en lugar de todos los archivos en el catálogo /
html5 /, en el caso de una conexión a Internet no se puede establecer:

FALLBACK:
/html5/ /[Link]

Nota: El primero es el URI de recursos, la segunda es la de reserva.

90
Página
La actualización del caché

Una vez que la aplicación se almacena en caché, se mantiene en caché hasta que uno de los casos siguientes:

• El usuario borra la caché del navegador

• El archivo de manifiesto es modificado (ver siguiente consejo)
• El caché de la aplicación mediante programación actualizado

Ejemplo - Archivo Completo Manifiesto caché

CACHE MANIFEST
# 2012-02-21 v1.0.0
/[Link]
/[Link]
/[Link]

NETWORK:
[Link]

FALLBACK:
/html5/ /[Link]

Consejo: Las líneas que empiezan con un "#" son líneas de comentario, pero también puede servir a otro
propósito. Caché de una aplicación sólo se actualiza cuando cambia su archivo de manifiesto. Si edita una imagen
o cambiar una función de JavaScript, los cambios no serán re-caché.Actualización de la fecha y la versión en línea
de comentario es una manera de hacer que el navegador re-caché de sus archivos.

Notas sobre la memoria caché de aplicaciones

Tenga cuidado con lo que te cache.

Una vez que el archivo se almacena en caché, el navegador seguirá mostrando la versión en caché, incluso si
cambia el archivo en el servidor. Para asegurarse de que las actualizaciones del navegador la caché, es necesario
cambiar el archivo de manifiesto.

Nota: Los navegadores pueden tener diferentes límites de tamaño para los datos almacenados en caché (algunos
navegadores tienen un límite de 5 MB por sitio).

91
Página
HTML5 Web Workers
Un trabajador de web es un JavaScript que se ejecuta en segundo plano, sin afectar el
rendimiento de la página.

¿Qué es un Trabajador Web?

Al ejecutar secuencias de comandos en una página HTML, la página deja de responder hasta que el guión esté
terminado.

Un trabajador de web es un JavaScript que se ejecuta en segundo plano, de forma independiente de otras
secuencias de comandos, sin afectar el rendimiento de la página. Usted puede seguir haciendo lo que quieras:
hacer clic, seleccionar las cosas, etc, mientras que el trabajador web se ejecuta en segundo plano.

Compatibilidad con exploradores

HTML5 Web Workers Ejemplo

El ejemplo siguiente crea un trabajador web simple que los números de recuento en el fondo:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />

<script>
var w;

function stopWorker() { [Link](); }

</script>
92

</body>
</html>
Página
Compruebe Web Support Worker

Antes de crear un trabajador web, comprobar si el navegador del usuario soporta:

if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}

Crear un archivo de Web Worker

Ahora, vamos a crear nuestra web en un trabajador JavaScript externo.

A continuación, creamos un script que cuenta. La secuencia de comandos se almacena en el archivo

"demo_workers.js":

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

La parte importante del código anterior es la postMessage () método - que se utiliza para los mensajes de un
mensaje de vuelta a la página HTML.

Crear un objeto Web Worker

Ahora que ya tenemos el archivo de trabajador web, tenemos que llamarlo desde una página HTML.

Las siguientes líneas comprueba si el trabajador ya existe, si no - se crea un objeto nuevo trabajador web y se
ejecuta el código en "demo_workers.js":

if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}

Entonces podemos enviar y recibir mensajes de la trabajadora web.

Añada un "onmessage" detector de eventos para el trabajador web.

[Link]=function(event)
{
[Link]("result").innerHTML=[Link];
};
93

Cuando los puestos de trabajo web un mensaje, el código dentro del detector de eventos se ejecuta. Los datos del
Página

trabajador Web se almacena en [Link].

Despedir a un trabajador Web

Cuando un objeto se crea trabajador web, continuará para escuchar los mensajes (incluso después de que el script
externo ha terminado) hasta que se termina.

Para despedir a un trabajador web, y liberar recursos del navegador / ordenador, utilice el terminate () método:

[Link]();

Trabajador Completo Web Ejemplo de código

Ya hemos visto el código de los trabajadores en el archivo. Js. A continuación se muestra el código de la página
HTML:

Ejemplo

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}

function stopWorker()
{
[Link]();
}
</script>
</body>
</html>
94
Página
HTML5 Server-Sent Events
Eventos HTML5 Server-Sent permitir que una página web para obtener actualizaciones desde un
servidor.

Eventos enviados del servidor - One Way Mensajería

Un evento en el servidor envía es cuando una página web se actualiza automáticamente desde un servidor.

Esto también fue posible antes, pero la página web tendría que preguntar si hay actualizaciones disponibles. Con
servidores enviados por los acontecimientos, las actualizaciones vienen automáticamente.

Ejemplos: Facebook / Twitter actualizaciones, actualizaciones de precios de acciones, noticias, resultados

deportivos, etc

Compatibilidad con exploradores

Eventos enviados del servidor son compatibles con todos los principales navegadores, excepto Internet Explorer.

Recibe Server-Sent notificaciones de eventos

El objeto EventSource se utiliza para recibir notificaciones enviadas por el servidor de eventos:

Ejemplo

<!DOCTYPE html>
<html>
<body>
<h1>Getting server updates</h1>
<div id="result"></div>

• Crear un nuevo objeto EventSource y especifique la dirección URL de la página de envío de las
actualizaciones (en este ejemplo "demo_sse.php")
• Cada vez que se recibe una actualización, el evento se produce onmessage
• Cuando un evento ocurre onmessage, poner los datos recibidos en el elemento con id = "número"

Compruebe Server-Sent Events Support

En el ejemplo anterior tryit había algunas líneas adicionales de código para comprobar la compatibilidad del
explorador para eventos enviados del servidor:

if(typeof(EventSource)!=="undefined")
{
// Yes! Server-sent events support!
// Some code.....
}
else
{
// Sorry! No server-sent events support..
}

Server-Side Ejemplo de código

Para el ejemplo de arriba para trabajar, se necesita un servidor capaz de enviar actualizaciones de datos (como
PHP o ASP).

La sintaxis de eventos del lado del servidor corriente es simple. Ajuste el "Content-Type" de encabezado a "text /
event-stream". Ahora usted puede comenzar a enviar flujos de eventos.

Código en PHP (demo_sse.php):

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

Código en ASP (VB) (demo_sse.asp):

<%
[Link]="text/event-stream"
[Link]=-1
[Link]("data: " & now())
[Link]()
%>

Código explicó:

• Ajuste el "Content-Type" de encabezado a "text / event-stream"

• Especifique que la página no se debe almacenar en caché
• Salida de los datos a enviar ( siempre comenzar con "data:")
• Vaciar los datos de salida de nuevo a la página web
96
Página
El objeto EventSource

En los ejemplos anteriores hemos utilizado el evento onmessage recibir los mensajes. Sin embargo, otros
acontecimientos también están disponibles:

Eventos Descripción
OnOpen Cuando una conexión con el servidor se abre
onmessage Cuando se recibe un mensaje
onerror Cuando se produce un error

HTML5 Tipos de entrada

HTML5 Nuevos Tipos de entrada

HTML5 tiene varios tipos de entrada de nuevas formas. Estas nuevas características permiten un mejor control de
entrada y validación.

Este capítulo trata de los nuevos tipos de entrada:

• color • mes • tiempo

• fecha • número • url
• fecha y hora • alcance • semana
• datetime-local • buscar
• email • tel
•

Nota: No todos los principales navegadores soporta todos los tipos de entrada nuevos. Sin embargo, ya se puede
empezar a usarlas, y si no son compatibles, se comportarán como campos de texto normales.

Tipo de entrada: Color

El tipo de color se utiliza para campos de entrada que deben contener un color.

Ejemplo

Seleccione un color en el selector de colores:

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Select your favorite color: <input type="color" name="favcolor" /><br />
<input type="submit" />
</form>
</body>
</html>
97
Página
Tipo de entrada: Fecha

El tipo de fecha permite al usuario seleccionar una fecha.

Ejemplo

Definir un control de fecha:

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Birthday: <input type="date" name="bday" />
<input type="submit" />
</form>
</body>
</html>

Tipo de entrada: fecha y hora

El tipo datetime permite al usuario seleccionar una fecha y hora (con zona horaria).

Ejemplo

Definir la fecha y hora de control (con zona horaria):

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Birthday (date and time): <input type="datetime" name="bdaytime" />
<input type="submit" />
</form>
</body>
</html>
98
Página
Tipo de entrada: fecha y hora local

El tipo datetime-local permite al usuario seleccionar una fecha y hora (sin zona horaria).

Ejemplo

Definir un control de fecha y hora (sin zona horaria):

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Birthday (date and time): <input type="datetime-local" name="bdaytime" />
<input type="submit" />
</form>
</body>
</html>

Tipo de entrada: email

El tipo de correo electrónico se utiliza para campos de entrada que debe contener una dirección de e-mail.

Ejemplo

Definir un campo para una dirección de e-mail (será valida automáticamente cuando se presente):

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
E-mail: <input type="email" name="usremail" /><br />
<input type="submit" />
</form>
</body>
</html>

Consejo: Safari en el iPhone reconoce el tipo de correo electrónico, y cambia el teclado de la pantalla para que
coincida (añade @ y opciones de com.).
99
Página
Tipo de entrada: mes

El tipo meses permite al usuario seleccionar un mes y año.

Ejemplo

Definición de un mes y el año de control (sin zona horaria):

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Birthday (month and year): <input type="month" name="bdaymonth" />
<input type="submit" />
</form>
</body>
</html>

Tipo de entrada: número

El tipo de número se utiliza para campos de entrada que debe contener un valor numérico.

También puede establecer restricciones sobre qué números son aceptadas:

Ejemplo

Definir un campo numérico (con restricciones):

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
<input type="submit" />
</form>

</body>
</html>

Utilice los siguientes atributos para especificar restricciones:

• max - especifica el valor máximo permitido

• min - especifica el valor mínimo permitido
100

• step - especifica los intervalos de números legales

• value - Especifica el valor predeterminado
Página
Tipo de entrada: Rango

El tipo de cocina se utiliza para campos de entrada que deben contener un valor de un rango de números.

También puede establecer restricciones sobre qué números son aceptadas.

Ejemplo

Definir un control para introducir un número cuyo valor exacto no es importante (como un control deslizante):

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Points: <input type="range" name="points" min="1" max="10" />
<input type="submit" />
</form>
</body>
</html>

Tipo de entrada: búsqueda

El tipo de búsqueda se utiliza para los campos de búsqueda (un campo de búsqueda se comporta como un campo
de texto normal).

Ejemplo

Definir un campo de búsqueda (como una búsqueda en el sitio, o búsqueda de Google):

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Search Google: <input type="search" name="googlesearch" /><br />
<input type="submit" />
</form>
</body>
</html>
101
Página
Tipo de entrada: tel
Ejemplo

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Telephone: <input type="tel" name="usrtel" /><br />
<input type="submit" />
</form>
</body>
</html>

Tipo de entrada: tiempo

El tipo de tiempo permite al usuario seleccionar una hora.

Ejemplo

Definir un control para entrar en un tiempo (sin zona horaria):

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
Select a time: <input type="time" name="usr_time" />
<input type="submit" />
</form>

</body>
</html>

102
Página
Tipo de entrada: url

El tipo de URL se utiliza para los campos de entrada que debe contener una dirección URL.

El valor del campo URL se valida automáticamente cuando se envía el formulario.

Ejemplo

Definir un campo para introducir una URL:

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Add your homepage: <input type="url" name="homepage" /><br />
<input type="submit" />
</form>
</body>
</html>

Consejo: Safari en el iPhone reconoce el tipo de entrada de URL, y cambia el teclado de la pantalla para que
coincida (añade opción com.).

Tipo de entrada: la semana

El tipo semanas permite al usuario seleccionar una semana y año.

Ejemplo

Definir una semana y el control al año (sin zona de tiempo):

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Select a week: <input type="week" name="year_week" />
<input type="submit" />
</form>
</body>
</html>

HTML5 <input> Tag

Etiqueta Descripción
103

<input> Define un control de entrada

Página
HTML5 elementos de formulario

Nuevos elementos de formulario HTML5

HTML5 tiene los siguientes nuevos elementos de formulario:

• <datalist>
• <keygen>
• <output>

Nota: No todos los principales navegadores apoyar a todos los elementos de formulario nuevos. Sin embargo, ya
se puede empezar a usarlas, y si no son compatibles, se comportarán como campos de texto normales.

HTML5 <datalist> Element

El elemento <datalist> especifica una lista de opciones predefinidas para un elemento <input>.

El elemento <datalist> se utiliza para proporcionar una "autocompletar" en función de los elementos <input>. Los
usuarios podrán ver una lista desplegable de opciones predefinidas como entrada de datos.

Utilice el atributo <input> elemento de lista a la unen con un elemento <datalist>.

Ejemplo

Un elemento <input> con valores predefinidos en un <datalist>:

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser" />
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" />
</form>
</body>
</html>
104
Página
HTML5 <keygen> Element

El propósito del elemento <keygen> es proporcionar una forma segura para autenticar usuarios.

La etiqueta <keygen> especifica un campo generador de par de claves en un formulario.

Cuando se envía el formulario, dos claves se generan, uno público y otro privado.

La clave privada se almacena localmente, y la clave pública se envía al servidor. La clave pública se podría utilizar
para generar un certificado de cliente para autenticar al usuario en el futuro.

Ejemplo

Un formulario con un campo keygen:

<!DOCTYPE html>
<html>
<body>
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
</body>
</html>

HTML5 <output> Element

El elemento <output> representa el resultado de un cálculo (como uno realizado por un script).

Ejemplo

Realizar un cálculo y mostrar el resultado en un elemento <output>:

<!DOCTYPE html>
<html>
<body>
<form oninput="[Link]=parseInt([Link])+parseInt([Link])">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>
</body>
</html>

Nuevos elementos de formulario HTML5

105

Etiqueta Descripción
<datalist> Especifica una lista de opciones predefinidas para un elemento <input>
Página

<keygen> Especifica un campo generador de par de claves en un formulario

<output> Representa el resultado de un cálculo
HTML5 atributos forman

HTML5 Nuevos atributos forman

Los nuevos atributos para <form>:

 autocomplete
 novalidate

Los nuevos atributos para <input>:

 a u t o c o m p le t e  fo r m n o v a lid a t e  p a tte rn (re g e xp )

 a u t o fo c u s  fo r m t a r g e t  p la c e h o ld e r
 fo r m  h e ig h t a n d w id t h  r e q u ir e d
 fo r m a c t io n  lis t  ste p
 fo r m e n c t y p e  m in a n d m a x
 fo r m m e t h o d  m u lt ip le

<form> / <input> atributo autocomplete

El atributo autocomplete especifica si un campo de formulario o de entrada debe tener autocomplete encendido o
[Link] autocompletado está activado, el navegador automáticamente los valores completos basados en
los valores que el usuario ha introducido antes.

Sugerencia: Es posible tener autocomplete "on" para el formulario, y "off" para campos de entrada específicos, o
viceversa.

Nota: El atributo autocomplete trabaja con <form> y los tipos <input> siguientes: texto, búsqueda, url, teléfono,
correo electrónico, contraseña, datepickers, variedad y color.

Ejemplo

Un formulario HTML con autocompletado en (y fuera de un campo de entrada):

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
<p>Fill in and submit the form, ... see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the ... for the e-mail field.</p>
</body>
</html>
106

Sugerencia: En algunos navegadores puede que tenga que activar la función de autocompletar para que esto
funcione.
Página
<form> novalidate Atributo

El atributo novalidate es un atributo booleano.

Cuando está presente, especifica que la forma de datos (entrada) no debe ser validado cuando se presenten.

Ejemplo

Indica que el formulario no debe ser validado en presentar:

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
</body>
</html>

<input> atributo autofocus

El atributo autofocus es un atributo booleano.

Cuando está presente, especifica que un elemento <input> automáticamente debe recibir el foco cuando se carga
la página.

Ejemplo

Deje que el "Nombre" campo de entrada automáticamente obtendrá el foco cuando se carga la página:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
First name:<input type="text" name="fname" autofocus="autofocus" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" />
</form>

</body>
</html>
107
Página
<input> de atributo

El atributo de forma especifica una o más formas de un elemento <input> pertenece.

Consejo: Para hacer referencia a más de una forma, utilice una lista separada por espacios de identificadores de
formulario.

Ejemplo

Un campo de entrada situado fuera de la forma HTML (pero todavía una parte de la forma):

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" id="form1">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="Submit" />
</form>

<p>The "Last name" field below is outside the form element, but ... form.</p>

Last name: <input type="text" name="lname" form="form1" />

</body>
</html>

<input> atributo formAction

El atributo formAction especifica la dirección URL de un archivo que procesará el control de entrada cuando se
envía el formulario.

Nota: El atributo formAction se utiliza con type = "submit" y type = "image".

Ejemplo

Un formulario HTML con dos botones de envío, con diferentes acciones:

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
</form>
</body>
</html>
108
Página
<input> formenctype Atributo

El atributo formenctype especifica cómo se forman los datos deben ser codificados cuando se presenta al servidor
(sólo para formularios con method = "post"). El atributo formenctype reemplaza el atributo enctype del elemento
<form>.

Nota: El atributo formenctype se utiliza con type = "submit" y tipo "imagen" =.

Ejemplo

Envíe el formulario de datos que está codificado por omisión (el primer botón de envío), y codificado como
"multipart / form-data" (el segundo botón de envío):

<!DOCTYPE html>
<html>
<body>
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data" />
</form>
</body>
</html>

<input> formmethod Atributo

El atributo formmethod define el método HTTP para enviar form-data a la URL de la acción. El atributo
formmethod reemplaza el atributo method del elemento <form>.

Nota: El atributo formmethod se puede utilizar con type = "submit" y tipo "imagen" =.

Ejemplo

El segundo botón de envío reemplaza el método HTTP de la forma:

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formmethod="post" formaction="demo_post.asp"
value="Submit using POST" />
</form>
</body>
</html>
109
Página
<input> formnovalidate Atributo

El atributo novalidate es un atributo booleano. Cuando está presente, especifica que el elemento <input> no debe
ser validado cuando se presenten. El atributo formnovalidate reemplaza el atributo del elemento novalidate
<form>.

Nota: El atributo formnovalidate se puede utilizar con type = "submit".

Ejemplo

Un formulario con dos botones submit (con y sin validación):

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit" formnovalidate="formnovalidate"
value="Submit without validation" />
</form>
</body>
</html>

<input> atributo formtarget

El atributo formtarget especifica un nombre o una palabra clave que indica dónde se debe mostrar la respuesta
que se recibe después de enviar el formulario. El atributo formtarget reemplaza el atributo target del elemento
<form>.

Nota: El atributo formtarget se puede utilizar con type = "submit" y type = "image".

Ejemplo

Un formulario con dos botones de envío, con ventanas de destino diferentes:

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit as normal" />
<input type="submit" formtarget="_blank"
value="Submit to a new window/tab" />
</form>
</body>
</html>
110
Página
<input> atributos HEIGHT y WIDTH

Los atributos de altura y anchura especificar la altura y el ancho de un elemento <input>.

Consejo: Siempre especifique la altura y anchura de los atributos de las imágenes. Si la altura y la anchura se
establece, el espacio requerido para la imagen está reservada cuando la página está cargada.

Ejemplo

Definir una imagen como botón de enviar, con atributos height y width:

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="image" src="img_submit.gif" alt="Submit"
width="48" height="48"/>
</form>
<p><b>Note:</b> The input type="image" sends the X and Y ... image button.</p>
</body>
</html>

<input> atributo de lista

El atributo de lista se refiere a un elemento de <datalist> que contiene opciones predefinidas para un elemento
<input>.

Ejemplo

Un elemento <input> con valores predefinidos en un <datalist>:

</body>
</html>
Página
<input> min y max Atributos

El mínimo y máximo de los atributos de especificar el valor mínimo y máximo para un elemento <input>.

Nota: los valores mínimo y máximo de los atributos trabaja con los siguientes tipos de entrada: número, rango,
fecha, fecha y hora, fecha y hora local, mes, hora y semana.

Ejemplo

<input> elementos con valores mínimos y máximos:

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br />

Enter a date after 2000-01-01:

Quantity (between 1 and 5):

<input> múltiples atributos

El atributo múltiple es un atributo booleano. Cuando está presente, especifica que el usuario puede introducir más
de un valor en el elemento <input>. El atributo multiple trabaja con los siguientes tipos de entrada: correo
electrónico, y el archivo.

Ejemplo

Un campo de archivo de carga que acepta varios valores:

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Select images: <input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
<p>Try selecting more than one file when browsing for files.</p>
</body>
</html>
112
Página
<input> atributo patrón

El atributo de patrón especifica una expresión regular que el valor del elemento <input> se verifica en contra.

Nota: El atributo patrón funciona con los tipos de entrada siguientes: texto, búsqueda, url, teléfono, correo
electrónico y contraseña.

Consejo: Utilice el mundial título atributo para describir el patrón para ayudar al usuario.

Ejemplo

Un campo de entrada que puede contener sólo tres letras (no hay números o caracteres especiales):

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}"
title="Three letter country code" />
<input type="submit" />
</form>
</body>
</html>

<input> atributo placeholder

El marcador de posición atributo especifica una sugerencia corto que describe el valor esperado de un campo de
entrada (por ejemplo, un valor de la muestra o una breve descripción del formato de espera).

La pista se muestra en el campo de entrada cuando está vacío, y desaparece cuando el campo recibe el foco.

Nota: El atributo placeholder funciona con los siguientes tipos de entrada: texto, búsqueda, url, teléfono, correo
electrónico y contraseña.

Ejemplo

Un campo de entrada con un marcador de posición de texto:

<!DOCTYPE html>
<html>
<body>

</body>
</html>
113
Página
Atributo requerido <input>

El atributo requerido es un atributo booleano. Cuando está presente, especifica que un campo de entrada debe ser
completado antes de enviar el formulario.

Nota: El atributo requerido trabaja con los siguientes tipos de entrada: texto, búsqueda, url, teléfono, correo
electrónico, contraseña, selectores de fecha, número, checkbox, radio y archivo.

Ejemplo

Un campo de entrada requerida:

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Username: <input type="text" name="usrname" required="required" />
<input type="submit" />
</form>
</body>
</html>

<input> Atributo paso

El atributo de paso especifica los intervalos de números legales para un elemento <input>.

Consejo: El atributo de paso se puede utilizar junto con el máximo y el mínimo de atributos para crear una gama
de valores legales.

Nota: El atributo de paso funciona con los tipos de entrada siguientes: número, rango, fecha, fecha y hora, fecha
y hora local, mes, hora y semana.

Ejemplo

Un campo de entrada con un intervalos de números legales que se indican:

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
<input type="number" name="points" step="3" />
<input type="submit" />
</form>
</body>
</html>
114

HTML5 <input> Tag

Etiqueta Descripción
<form> Define un formulario HTML para entrada de usuario
Página

<input> Define un control de entrada

HTML5 Tag Referencia
HTML5

HTML5 mejora la interoperabilidad y reduce los costes de desarrollo, mediante reglas precisas sobre la manera de
manejar todos los elementos HTML y cómo recuperarse de los errores.

Algunas de las nuevas características de HTML5 son funciones para incrustar audio, video, documentos gráficos,
del lado del cliente, almacenamiento de datos e interactivos. HTML5 también contiene nuevos elementos como
<nav>, <header>, <footer> y <figure>.

El grupo de trabajo HTML5 incluye AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, y cientos de otros
proveedores.

Nota: HTML5 no es una recomendación del W3C todavía!

Para leer acerca de las actividades del W3C HTML5, por favor lea nuestro tutorial del W3C .

Ordenadas alfabéticamente

Nuevo : Nuevas etiquetas en HTML5.

Etiqueta Descripción
 Define un comentario
<!DOCTYPE> Define el tipo de documento
<a> Define un hipervínculo
<abbr> Define una abreviatura
<acronym> No es compatible con HTML5
<address> Define la información de contacto del autor / propietario de un documento / artículo
<applet> No es compatible con HTML5
<area> Define un área dentro de una imagen de mapa de
<article> Nuevo Define un artículo
<aside> Nuevo Define el contenido aparte del contenido de la página
<audio> Nuevo Define el contenido de sonido
<b> Define el texto en negrita
<base> Especifica la URL base / target para todas las URL relativa en un documento
<basefont> No es compatible con HTML5
<bdi> Nuevo Aísla una parte de texto que puede ser formateado en una dirección distinta de otro
texto fuera de ella
<bdo> Reemplaza la dirección del texto actual
<big> No es compatible con HTML5
<blockquote> Define una sección en la que se cita de otra fuente
<body> Define el cuerpo del documento
<br> Define un solo salto de línea
<button> Define un botón que se pulse
<canvas> Nuevo Se utiliza para dibujar gráficos, sobre la marcha, a través de secuencias de comandos
(normalmente JavaScript)
<caption> Define un título de la tabla
<center> No es compatible con HTML5
<cite> Define el título de una obra
<code> Define un trozo de código de computadora
<col> Especifica las propiedades de columna para cada columna dentro de un elemento
<colgroup>
<colgroup> Especifica un grupo de una o más columnas en una tabla para formatear
<command> Nuevo Define un botón de comando que un usuario puede invocar
<datalist> Nuevo Especifica una lista de opciones predefinidas para los controles de entrada
<dd> Define la descripción de un elemento en una lista de definiciones
<del> Define un texto que ha sido borrado de un documento
<details> Nuevo Define los detalles adicionales que el usuario puede ver o esconder
115

<dfn> Define un término de definición

<dir> No es compatible con HTML5
<div> Define una sección de un documento
Página

<dl> Define una lista de definición

<dt> Define un término (un elemento) en una lista de definiciones
<em> Define el texto subrayado
<embed> Nuevo Define un contenedor para una aplicación externa (no HTML).
<fieldset> Grupos relacionados con los elementos de un formulario
<figcaption> Nuevo Define un título para un elemento <figure>
<figure> Nuevo Especifica autónomo contenido
<font> No es compatible con HTML5
<footer> Nuevo Define un pie de página de un documento o sección
<form> Define un formulario HTML para entrada de usuario
<frame> No es compatible con HTML5
<frameset> No es compatible con HTML5
<h1> to <h6> Define títulos HTML
<head> Define información sobre el documento
<header> Nuevo Define un encabezado de un documento o sección
<hgroup> Nuevo Grupos de partida (<h1> a <h6>) Elementos
<hr> Define un cambio en el contenido temático
<html> Define la raíz de un documento HTML
<i> Define una parte del texto en una voz alternativa o estado de ánimo
<iframe> Define un marco en línea
<img> Define una imagen
<input> Define un control de entrada
<ins> Define un texto que se ha insertado en un documento
<keygen> Nuevo Define un campo generador de par de claves (para formularios)
<kbd> Define la entrada del teclado
<label> Define una etiqueta para un elemento de entrada
<legend> Define un título para un <fieldset>, <figure> o elemento <details>
<li> Define un elemento de la lista
<link> Define la relación entre un documento y un recurso externo (el más utilizado para
acceder a las hojas de estilo)
<map> Define un cliente-lado de la imagen de mapa de
<mark> Nuevo Define el texto marcado / resaltado
<menu> Define una lista / menú de comandos
<meta> Define los metadatos de un documento HTML
<meter> Nuevo Define una medida escalar dentro de un rango conocido (a medida)
<nav> Nuevo Define vínculos de exploración
<noframes> No es compatible con HTML5
<noscript> Define un contenido alternativo para los usuarios que no son compatibles con
secuencias de comandos del lado del cliente
<object> Define un objeto incrustado
<ol> Define una lista ordenada
<optgroup> Define un grupo de opciones relacionadas en una lista desplegable
<option> Define una opción en una lista desplegable
<output> Nuevo Define el resultado de un cálculo
<p> Define un párrafo
<param> Define un parámetro para un objeto
<pre> Define el texto preformateado
<progress> Nuevo Representa el progreso de una tarea
<q> Define una breve cita
<rp> Nuevo Define qué mostrar en navegadores que no soportan anotaciones ruby
<rt> Nuevo Define una explicación / pronunciación de los caracteres (para el Este de Asia
tipografía)
<ruby> Nuevo Define una anotación ruby (para el Este de Asia tipografía)
<s> Define texto que ya no es correcta
<samp> Define ejemplo de salida de un programa informático
<script> Define un script del lado del cliente
<section> Nuevo Define una sección de un documento
<select> Define una lista desplegable
<small> Define el texto más pequeño
<source> Nuevo Define múltiples recursos multimedia para elementos multimedia (<video> y <audio>)
<span> Define una sección de un documento
<strike> No es compatible con HTML5
<strong> Define el texto importante
<style> Define la información de estilo para un documento
116

<sub> Define texto subíndice

<summary> Nuevo Define un título para un elemento visible <details>
<sup> Define el texto en superíndice
Página

<table> Define una tabla

<tbody> Grupos el contenido del cuerpo de una tabla
<td> Define una celda de una tabla
<textarea> Define un control de entrada de varias líneas (área de texto)
<tfoot> Grupos del contenido pie de página en una tabla
<th> Define una celda de encabezado en una tabla
<thead> Grupos el contenido del encabezado de una tabla
<time> Nuevo Define una fecha / hora
<title> Define un título para el documento
<tr> Define una fila de una tabla
<track> Nuevo Define pistas de texto para los elementos multimedia (<video> y <audio>)
<tt> No es compatible con HTML5
<u> Define el texto que debe ser estilísticamente diferente del texto normal
<ul> Define una lista desordenada
<var> Define una variable
<video> Nuevo Define un vídeo o una película
<wbr> Nuevo Define un posible salto de línea

117
Página

También podría gustarte

Introducción a HTML: Estructura y Etiquetas
Aún no hay calificaciones
Introducción a HTML: Estructura y Etiquetas
108 páginas
Curso de Html5
Aún no hay calificaciones
Curso de Html5
201 páginas
Teoría Básica de HTML
Aún no hay calificaciones
Teoría Básica de HTML
20 páginas
Ejemplos Básicos de Documentos HTML
Aún no hay calificaciones
Ejemplos Básicos de Documentos HTML
9 páginas
Introducción a HTML: Estructura y Ejemplos
Aún no hay calificaciones
Introducción a HTML: Estructura y Ejemplos
11 páginas
Introducción a HTML: Estructura y Elementos
Aún no hay calificaciones
Introducción a HTML: Estructura y Elementos
6 páginas
Estructura y Sintaxis de HTML Básico
Aún no hay calificaciones
Estructura y Sintaxis de HTML Básico
9 páginas
Introducción al Lenguaje HTML
Aún no hay calificaciones
Introducción al Lenguaje HTML
30 páginas
Introducción a HTML y sus Etiquetas
Aún no hay calificaciones
Introducción a HTML y sus Etiquetas
8 páginas
Informe #1 de HTML. Lenguaje de Programación I. Jesús Zavala
Aún no hay calificaciones
Informe #1 de HTML. Lenguaje de Programación I. Jesús Zavala
9 páginas
Guía de HTML y CSS para Principiantes
Aún no hay calificaciones
Guía de HTML y CSS para Principiantes
79 páginas
Introducción al Lenguaje HTML Básico
Aún no hay calificaciones
Introducción al Lenguaje HTML Básico
21 páginas
Introducción a HTML para Principiantes
Aún no hay calificaciones
Introducción a HTML para Principiantes
37 páginas
Estructura de un Documento HTML
Aún no hay calificaciones
Estructura de un Documento HTML
10 páginas
Ejemplos de etiquetas HTML básicas
Aún no hay calificaciones
Ejemplos de etiquetas HTML básicas
17 páginas
Curso de HTML y CSS para Principiantes
Aún no hay calificaciones
Curso de HTML y CSS para Principiantes
68 páginas
Curso de Programación HTML y CSS
Aún no hay calificaciones
Curso de Programación HTML y CSS
93 páginas
Introducción a HTML y Ejemplos Básicos
Aún no hay calificaciones
Introducción a HTML y Ejemplos Básicos
16 páginas
Introducción a etiquetas HTML básicas
Aún no hay calificaciones
Introducción a etiquetas HTML básicas
14 páginas
Introducción al Lenguaje HTML
Aún no hay calificaciones
Introducción al Lenguaje HTML
87 páginas
Guía de HTML para E-commerce de Ropa
Aún no hay calificaciones
Guía de HTML para E-commerce de Ropa
49 páginas
Anatomía de un Elemento HTML
Aún no hay calificaciones
Anatomía de un Elemento HTML
21 páginas
Elementos y Atributos en HTML
Aún no hay calificaciones
Elementos y Atributos en HTML
10 páginas
Investigación sobre HTML en Sonsonate
Aún no hay calificaciones
Investigación sobre HTML en Sonsonate
12 páginas
Introducción al Lenguaje HTML
Aún no hay calificaciones
Introducción al Lenguaje HTML
7 páginas
Definición de etiquetas HTML
Aún no hay calificaciones
Definición de etiquetas HTML
8 páginas
Introducción a las Etiquetas HTML
Aún no hay calificaciones
Introducción a las Etiquetas HTML
7 páginas
Introducción al Lenguaje HTML y Etiquetas
Aún no hay calificaciones
Introducción al Lenguaje HTML y Etiquetas
4 páginas
Introducción a HTML, CSS y JavaScript
Aún no hay calificaciones
Introducción a HTML, CSS y JavaScript
16 páginas
Introducción a HTML y CSS: Fundamentos
Aún no hay calificaciones
Introducción a HTML y CSS: Fundamentos
19 páginas
Conceptos Básicos de HTML para Principiantes
Aún no hay calificaciones
Conceptos Básicos de HTML para Principiantes
10 páginas
HTML
Aún no hay calificaciones
HTML
9 páginas
Separadores y Estructura en HTML
Aún no hay calificaciones
Separadores y Estructura en HTML
86 páginas
Guia Introduccion HTML
Aún no hay calificaciones
Guia Introduccion HTML
6 páginas
Guia Introduccion HTML
Aún no hay calificaciones
Guia Introduccion HTML
6 páginas
Guia Introduccion HTML
Aún no hay calificaciones
Guia Introduccion HTML
6 páginas
Guia Introduccion HTML
Aún no hay calificaciones
Guia Introduccion HTML
6 páginas
Anatomía de un elemento HTML
Aún no hay calificaciones
Anatomía de un elemento HTML
4 páginas
Introducción a HTML y su Estructura
Aún no hay calificaciones
Introducción a HTML y su Estructura
82 páginas
Estructuras Básicas en HTML
Aún no hay calificaciones
Estructuras Básicas en HTML
13 páginas
Sintaxis Básica de HTML
Aún no hay calificaciones
Sintaxis Básica de HTML
5 páginas
Glosario de etiquetas HTML esenciales
Aún no hay calificaciones
Glosario de etiquetas HTML esenciales
5 páginas
DiseÃ o Web Â HTML y CSS. PrÃ¡ctica HTML Etiquetas Bã¡sicas
Aún no hay calificaciones
DiseÃ o Web Â HTML y CSS. PrÃ¡ctica HTML Etiquetas Bã¡sicas
8 páginas
Sangría y Estructura en HTML
Aún no hay calificaciones
Sangría y Estructura en HTML
27 páginas
Introducción a HTML y sus Etiquetas
Aún no hay calificaciones
Introducción a HTML y sus Etiquetas
42 páginas
2.1+ +HTML Parte 1
Aún no hay calificaciones
2.1+ +HTML Parte 1
17 páginas
Cómo usar cursiva en HTML
Aún no hay calificaciones
Cómo usar cursiva en HTML
4 páginas
Introducción a HTML: Estructura y Etiquetas
Aún no hay calificaciones
Introducción a HTML: Estructura y Etiquetas
3 páginas
HTML Parte 1
Aún no hay calificaciones
HTML Parte 1
8 páginas
Introducción a HTML y sus elementos
Aún no hay calificaciones
Introducción a HTML y sus elementos
18 páginas
HTML
Aún no hay calificaciones
HTML
17 páginas
Estructura de una Página Web en HTML
Aún no hay calificaciones
Estructura de una Página Web en HTML
3 páginas
Introducción a la Bitácora Digital HTML
Aún no hay calificaciones
Introducción a la Bitácora Digital HTML
41 páginas
Semántica y Estructura en HTML5
Aún no hay calificaciones
Semántica y Estructura en HTML5
15 páginas
Introducción a HTML y sus elementos
Aún no hay calificaciones
Introducción a HTML y sus elementos
3 páginas
07 Manual Basico Fotografia Movil XXXXXXXXX
Aún no hay calificaciones
07 Manual Basico Fotografia Movil XXXXXXXXX
11 páginas
10 Manual Organizacion Viajes
Aún no hay calificaciones
10 Manual Organizacion Viajes
11 páginas
07 Manual Basico Fotografia Movil
Aún no hay calificaciones
07 Manual Basico Fotografia Movil
11 páginas
Expansión de Base Espacial para Wild Space
Aún no hay calificaciones
Expansión de Base Espacial para Wild Space
4 páginas
Carcassonne Mini4 - MinasDeOro Reglas
Aún no hay calificaciones
Carcassonne Mini4 - MinasDeOro Reglas
2 páginas
Instrucciones para Carcassonne: Despachos
Aún no hay calificaciones
Instrucciones para Carcassonne: Despachos
2 páginas
Uso de Moodle en UAPA para Aprendizaje
Aún no hay calificaciones
Uso de Moodle en UAPA para Aprendizaje
15 páginas
Introducción a OneDrive: Almacenamiento en la Nube
Aún no hay calificaciones
Introducción a OneDrive: Almacenamiento en la Nube
13 páginas
Guía para Descargar Comprobante de Pago
Aún no hay calificaciones
Guía para Descargar Comprobante de Pago
7 páginas
Vulnerabilidad Educativa en Distritos 2020
Aún no hay calificaciones
Vulnerabilidad Educativa en Distritos 2020
29 páginas
Diseño de Soluciones RPA: Documento DDS
Aún no hay calificaciones
Diseño de Soluciones RPA: Documento DDS
12 páginas
El Alfiler: Tragedia en Ticabamba
Aún no hay calificaciones
El Alfiler: Tragedia en Ticabamba
1 página
Política de Privacidad CMAC Huancayo S.A.
Aún no hay calificaciones
Política de Privacidad CMAC Huancayo S.A.
3 páginas
Guía DDT2000: Diagnóstico Renault DTC
Aún no hay calificaciones
Guía DDT2000: Diagnóstico Renault DTC
14 páginas
Examen Parcial de Telecomunicaciones
Aún no hay calificaciones
Examen Parcial de Telecomunicaciones
12 páginas
Acceso a Bases de Datos con pyodbc
Aún no hay calificaciones
Acceso a Bases de Datos con pyodbc
6 páginas
Activar Windows 10 Pro: Guía Paso a Paso
Aún no hay calificaciones
Activar Windows 10 Pro: Guía Paso a Paso
11 páginas
Informe sobre el uso del móvil en España
Aún no hay calificaciones
Informe sobre el uso del móvil en España
68 páginas
Bienvenida a DXN: Registro y Activación
Aún no hay calificaciones
Bienvenida a DXN: Registro y Activación
3 páginas
Generador de Letras Bob Esponja Online
Aún no hay calificaciones
Generador de Letras Bob Esponja Online
1 página
Seguridad Digital para Principiantes
Aún no hay calificaciones
Seguridad Digital para Principiantes
13 páginas
Evolución de la Escritura y sus Dibujos
Aún no hay calificaciones
Evolución de la Escritura y sus Dibujos
7 páginas
Detección de Oportunidades en Equipos
Aún no hay calificaciones
Detección de Oportunidades en Equipos
10 páginas
Obsesión Peligrosa en FictionMania
Aún no hay calificaciones
Obsesión Peligrosa en FictionMania
10 páginas
Normas APA 7: Guía y Ejemplos
Aún no hay calificaciones
Normas APA 7: Guía y Ejemplos
2 páginas
Cibersexo: Perfiles y Riesgos Asociados
Aún no hay calificaciones
Cibersexo: Perfiles y Riesgos Asociados
105 páginas
Guía de Copywriting Efectivo
Aún no hay calificaciones
Guía de Copywriting Efectivo
13 páginas
Uso de Internet y sus Aplicaciones
Aún no hay calificaciones
Uso de Internet y sus Aplicaciones
4 páginas
Guía para Obtener Número de Caso SGF
Aún no hay calificaciones
Guía para Obtener Número de Caso SGF
5 páginas
Crear Tienda Virtual en OpenCart
Aún no hay calificaciones
Crear Tienda Virtual en OpenCart
4 páginas
Carga y descarga USB en Central ZP2
Aún no hay calificaciones
Carga y descarga USB en Central ZP2
3 páginas
Efectos Negativos de las RRSS en Relaciones
100% (1)
Efectos Negativos de las RRSS en Relaciones
17 páginas
Impacto del Diseño Gráfico en Redes Sociales
Aún no hay calificaciones
Impacto del Diseño Gráfico en Redes Sociales
19 páginas
Manual de Soporte para PHPList
Aún no hay calificaciones
Manual de Soporte para PHPList
10 páginas
Guía de Configuración Night Owl Protect CMS
Aún no hay calificaciones
Guía de Configuración Night Owl Protect CMS
23 páginas
Mujeres Más Lindas del Mundo
Aún no hay calificaciones
Mujeres Más Lindas del Mundo
1 página