Html guia

HTML Introducción

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

Explicación Ejemplo

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 un título
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 LENGUAJE
HTML no es un lenguaje de programación, es un lenguaje de marcas
Un lenguaje de etiquetas es un conjunto de etiquetas de marcado
El propósito de las etiquetas son para describir el contenido de la página

Etiquetas HTML

HTML etiquetas de marcado generalmente se llaman las etiquetas HTML

Las etiquetas HTML son palabras clave (nombres de las etiquetas) rodeadas por paréntesis
angulares como <html>
Las etiquetas HTML que normalmente vienen en pares como <b> y </ b>
La primera etiqueta en un par es la etiqueta de inicio, la segunda etiqueta es la etiqueta de
cierre
La etiqueta final se escribe como la etiqueta de inicio, con una barra inclinada antes del
nombre de la etiqueta
Inicio y fin son también llamados etiquetas de apertura y cierre de etiquetas

< nombre de etiqueta > contenido </ nombre de etiqueta>

Elementos HTML

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

Pero estrictamente hablando, un elemento HTML es todo entre la etiqueta de inicio y la etiqueta de
cierre, incluyendo las etiquetas:

Elemento HTML:

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

Documentos HTML = Páginas Web

Documentos HTML describir páginas web
Los documentos HTML contienen etiquetas HTML y texto plano
Documentos HTML también se llama las 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
para 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 la página HTML:

< html>
< body>
< h1> Este es un encabezado </ h1>
< p> Esto es un párrafo. </ p>
< p> Esto es otro párrafo. </ p>
< / Body>
</ Html>

HTML Básico

Títulos HTML

Encabezados HTML se definen con la etiqueta h1 de <h6>.

Ejemplo
< h1>This is a heading</h1>

Párrafos HTML

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

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

Enlaces HTML

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

Ejemplo
< a href="http://www.w3schools.com">This is a link</a>

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

Imágenes HTML

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

Ejemplo
< img src="w3schools.jpg" width="104" height="142" />

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

HTML Elementos

Los documentos HTML se definen los elementos HTML.

Elementos HTML

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

Inicio * etiquetas Elemento de contenido * Fin etiqueta
<p> Este es un párrafo </ p>
<a href="default.htm"> Este es un enlace </ a>
<br />

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

Sintaxis de elementos de 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 entre el inicio y la etiqueta de cierre
Algunos de los 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

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

Elementos HTML anidadas

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

Documentos HTML consisten en elementos HTML anidadas.

Ejemplo de documento HTML
< !DOCTYPE html>
< html>
< body>
< p>This is my first paragraph.</p>
< /body>
< /html>

El ejemplo anterior contiene 3 elementos HTML.

Ejemplo HTML explicado

El elemento <p>:


El elemento <p> define un párrafo en el documento HTML.
El elemento tiene un <p> etiqueta de 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>
< /body>

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

El elemento <html>:

< html>
< body>
< /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 (el elemento del cuerpo).

No se olvide de la etiqueta de cierre

Algunos de los elementos HTML se muestre correctamente, incluso si se le olvida la etiqueta de cierre:

< p>This is a paragraph

El ejemplo anterior funciona en la mayoría de 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 la etiqueta de cierre.

Vaciar elementos HTML

Elementos HTML sin contenido se llaman elementos vacíos.

<br> es un elemento vacío, sin una etiqueta de cierre (la etiqueta <br> define un salto de línea).

Sugerencia: En XHTML, los elementos deben estar cerrados. Adición de una barra dentro de la
etiqueta de inicio, al igual que /> <br, es la forma correcta de cerrar los elementos vacíos en XHTML
(y XML).

HTML Consejo: utilizar 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 la World Wide Web Consortium (W3C)
recomienda minúsculas en HTML 4, y exige etiquetas minúsculas en XHTML.

HTML Atributos

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

Atributos HTML

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"

Ejemplo de atributos

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

Ejemplo
< a href="http://www.w3schools.com">This is a link</a>

Cita siempre los valores de atributo

Valores de los atributos siempre deben ir entre comillas.

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

Sugerencia: En algunas situaciones excepcionales, cuando el valor del atributo en sí contiene
comillas, es necesario el uso de comillas simples: nombre = "Juan" escopeta "Nelson"

HTML Consejo: utilizar los atributos en minúsculas

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

Sin embargo, la World Wide Web Consortium (W3C) recomienda minúsculas atributos y valores de
atributos en el código HTML 4 recomendación.

Las versiones más recientes de (X) HTML exigirá atributos en minúsculas.

HTML atributos de referencia

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
clase nombre de la clase Especifica un nombre de clase de un elemento
identificación identificación Especifica un identificador único para un elemento
estilo style_definition Especifica un estilo en línea de un elemento
título tooltip_text Especifica información adicional sobre un elemento (que se
muestra como una punta de la herramienta)

HTML títulos

Los títulos son importantes en los documentos HTML.

Títulos HTML

Las partidas se definen con la etiqueta h1 de <h6>.

<h1> define la partida más importante. <h6> define el menos importante partida.

Ejemplo

Nota: Los navegadores de forma automática añadir un poco de espacio vacío (un margen), antes y
después de cada partida.

Las partidas son importantes

Utilice títulos HTML para sólo los títulos. No utilice encabezados para hacer el texto BIG o negrita .

Motores de búsqueda utilizan sus títulos al índice de 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 títulos para
mostrar la estructura del documento.

Encabezados H1 se debe utilizar como títulos principales, seguido de las partidas H2, H3, a
continuación las partidas menos importantes, y así sucesivamente.

Líneas de HTML

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

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

Comentarios HTML

Los comentarios pueden ser insertados en el código HTML para que sea más legible y comprensible.
Los comentarios son ignorados por el navegador y no se muestran.

Los comentarios se escriben así:

Ejemplo
< !-- This is a comment -->

Nota: No es un signo de exclamación después del paréntesis de apertura, pero no antes del
paréntesis de cierre.

HTML Consejo - Cómo Ver código fuente HTML

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

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

Referencia de Etiquetas HTML

Referencia W3Schools de etiqueta contiene información adicional sobre estas etiquetas y sus
atributos.

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

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

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 another paragraph</p>

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

No se olvide de la etiqueta de cierre

La mayoría de los navegadores mostrar HTML correctamente, incluso si se olvida la etiqueta de cierre:

Ejemplo
< p>This is another paragraph

El ejemplo anterior funcionará en la mayoría de los navegadores, pero no confíe en él. El olvido de la
etiqueta final puede producir resultados inesperados o errores.

Nota: La futura versión de HTML no permite que se salte las etiquetas de cierre.

Saltos de línea de 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.

<br> o <br />

En XHTML, XML, los elementos que no tienen etiqueta final (etiqueta de cierre) no están permitidos.

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

HTML de salida - Consejos útiles

No se puede estar seguro de cómo HTML se mostrarán. Las pantallas grandes o pequeñas, y las
ventanas redimensionadas a crear resultados diferentes.

Con HTML, no puede cambiar la salida mediante la adición de espacios o líneas adicionales en el
código HTML.

El navegador quitar los espacios adicionales y líneas adicionales cuando se muestra la página.
Cualquier número de líneas cuentan como una sola línea, y cualquier número de los espacios cuentan
como un solo espacio.

Saltos de línea
El uso de los saltos de línea en un documento HTML.

<!DOCTYPE html>
<html>
<body>
<p>This is<br />a para<br />graph with line breaks</p>
</body>
</html>

Referencia de Etiquetas HTML

Referencia W3Schools de etiqueta contiene información adicional sobre los elementos HTML y sus
atributos.

<p> Define un párrafo
<br /> Inserta un salto de línea única

HTML 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

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
una referencia completa).

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

Sin embargo, hay una diferencia en el significado de estas 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 fuerte como negrita y cursiva, como em. Sin embargo, si un
navegador un día quiere hacer un texto resaltado con la característica de fuerte, que podría
ser, por ejemplo, cursiva y la negrita no!

Formateo de texto
¿Cómo dar formato al texto en un documento HTML.

<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><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

Texto preformateado
¿Cómo controlar los saltos de línea y los espacios con la etiqueta previa.

<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>

Dirección
Cómo definir la información de contacto del autor / propietario de un documento HTML.

<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>

Siglas y acrónimos
Cómo manejar las abreviaturas y acrónimos.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

Dirección del texto
Cómo cambiar la dirección del texto.

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

Citas
Cómo manejar las citas largas y cortas.

<blockquote>

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This
is a long quotation.
</blockquote>
<q>This is a short quotation</q>

Eliminados y se inserta el texto
Cómo marcar texto eliminado y se inserta.

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

Etiquetas de formato de texto HTML

<b> Define el texto en negrita
<big> Define el texto se
<em> Define el texto subrayado
<i> Define el texto en cursiva
<small> Define el texto pequeño
<strong> Define texto fuerte
<sub> Define el texto subíndice
<sup> Define el texto en superíndice
<Ins> Define el texto insertado
<supr> Define el texto eliminado

HTML "resultados que el equipo" Tags

<code> Define el texto el código informático
<kbd> Define el texto del teclado
<samp> Define el código de ejemplo equipo
<tt> Define el texto de teletipo
<var> Define una variable
Si su canción Define el texto preformateado

Citaciones HTML, citas y Etiquetas Definición

<abbr> Define una abreviatura
<acronym> Define un acrónimo
<dirección> 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 citación
<dfn> Define un término de definición

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 simple editor de texto es una buena manera de aprender
HTML.

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

Paso 1: Inicie el Bloc de notas
Paso 2: Edita el código HTML con Notepad

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. Archivo html. No hay
ninguna diferencia, es totalmente de usted.

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

Paso 4: Ejecutar el código HTML en el navegador
HTML - CSS Estilos

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 y azul

Este texto es de 30 píxeles de alto

Enlace que no está subrayado
Cómo hacer un enlace que no está subrayado, con el atributo de estilo.

<a href="http://www.w3schools.com" style="text-decoration:none;">Visit W3Schools.com!</a>

Enlace a una hoja de estilos externa
Cómo utilizar la etiqueta <link> para vincular a una hoja de estilos externa.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>I am formatted with an external style sheet</h1>
<p>Me too!</p>
</body>
</html>

El estilo HTML con CSS

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

CSS se pueden agregar al HTML de las siguientes maneras:

En línea - utilizando el estilo de atributo en los elementos HTML
Interior - con el <style> elemento en la sección <head>
Externo - con ayuda de una CSS externa archivo

La mejor forma de agregar CSS a HTML, es poner la sintaxis de CSS en archivos CSS.

Sin embargo, en este tutorial de HTML que le dará a conocer CSS mediante el atributo de estilo. Esto
se hace para simplificar los ejemplos. También hace que sea más fácil para usted para modificar 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 que debe aplicarse a una sola aparición de
un elemento.

Para utilizar estilos en línea, utilice el atributo de estilo en la etiqueta correspondiente. El atributo style
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>

Ejemplo del 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>

La propiedad background-color hace que el "viejo" atributo bgcolor obsoleto.

Ejemplo del estilo HTML - Fuente, color y tamaño

La fuente de la familia, el color y las propiedades font-size define el tipo de letra, color y tamaño del
texto en 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>

La fuente de la familia, el color y las propiedades font-size que la etiqueta <font> obsoleto.

Ejemplo del estilo HTML - Alineación de texto

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

Ejemplo
< !DOCTYPE html>
< html>
< body>
< h1 style="text-align:center;">Center-aligned heading</h1>
< p>This is a paragraph.</p>
< /body>
< /html>

La propiedad text-align hace que la etiqueta <center> obsoleto.

Hoja de estilo interna

Una hoja de estilo interna puede ser utilizado si un documento único, tiene un estilo único. Estilos
internos se definen en la sección <head> de una página HTML, mediante el uso de la etiqueta
<style>, de esta manera:

< 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 al cambiar un archivo. Cada
página debe enlazar con la hoja de estilo con la etiqueta <link>. La etiqueta <link> va dentro de la
sección <head>:

< head>
< link rel="stylesheet" type="text/css" href="mystyle.css" />
< /head>

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

Etiquetas y atributos desaprobados

En HTML 4, varias etiquetas y atributos se utiliza 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.

HTML Enlaces

Los enlaces se encuentran en las páginas web de casi todos. Enlaces permitir a los
usuarios hacer clic en su camino desde una página a otra.

HTML hipervínculos (Links)

Un hipervínculo (o enlace) es una palabra o grupo de palabras, o la imagen que usted 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 convertirá en una pequeña mano.

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

La etiqueta <a> puede utilizarse de dos maneras:

1. Para crear un enlace a otro documento, mediante el atributo href
2. Para crear un marcador en un documento, mediante el atributo de nombre

Sintaxis HTML Link

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

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

El atributo href especifica el destino de un vínculo.

Ejemplo
< a href="http://www.w3schools.com/">Visit W3Schools</a>

que muestra como esta: Visitar W3Schools

Haciendo clic en este enlace le enviará al usuario a la página principal de W3Schools.

Consejo: El " Texto del enlace "no tiene que ser un texto. Puede ser una imagen o cualquier elemento
HTML.

Enlaces HTML - El atributo de destino

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

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

Ejemplo
< a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

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 que se utilice 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 HTML 4 en
todos los navegadores modernos.

Favoritos no se muestran de un modo especial. Ellos son invisibles para el lector.

Ejemplo

Un anclaje con nombre dentro de un documento HTML:

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

Crea un enlace a la sección "Consejos útiles" en el interior del mismo documento:

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

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

< a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>

Notas básicas - Consejos útiles

Nota: Siempre añada una barra de referencias subcarpeta. Si usted se conecta de esta manera: href
= "http://www.w3schools.com/html", que va a generar dos peticiones al servidor, el primer servidor
agregará una barra a la dirección, y luego crear una nueva solicitud como ésta : href =
"http://www.w3schools.com/html/".

Sugerencia: Los 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.

Una imagen como un enlace
Cómo utilizar una imagen como un enlace.

<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>

Enlace a una ubicación en la misma página
¿Cómo vincular a un marcador.
<p><a href="#C4">See also Chapter 4.</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>
<h2><a name="C4">Chapter 4</a></h2>
<h2>Chapter 5</h2>
<h2>Chapter 6</h2>
<h2>Chapter 7</h2>
<h2>Chapter 8</h2>
<h2>Chapter 9</h2>
<h2>Chapter 10</h2>
<h2>Chapter 11</h2>
<h2>Chapter 12</h2>
<h2>Chapter 13</h2>
<h2>Chapter 14</h2>
<h2>Chapter 15</h2>
<h2>Chapter 16</h2>
<h2>Chapter 17</h2>

Salir de un marco
Cómo salir de un marco (si su sitio está bloqueado en un marco).

<a href="http://www.w3schools.com/" target="_top">Click here!</a>

Crear un enlace mailto
¿Cómo vincular a un mensaje de correo electrónico (sólo funcionará si tiene correo instalado).

<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again">
Send Mail</a>
</p>

Crear un enlace mailto 2
Otro enlace mailto.

<p>
This is another mailto link:
<a
href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@exampl
e.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%2
0party!">Send mail!</a>
</p>

Etiquetas HTML Link
<a> Define un ancla
HTML Imágenes

Ejemplo
Norwegian Mountain Trip

Insertar imágenes
cómo insertar imágenes en un documento HTML.

<p>
An image:
<img src="smiley.gif" alt="Smiley face" width="32" height="32" />
</p>

Insertar imágenes desde diferentes lugares
Cómo insertar una imagen de otra carpeta o en otro servidor.

<p>An image from another folder:</p>
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32" />
<p>An image from W3Schools:</p>
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"
width="104" height="142" />

HTML Imágenes - 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 los atributos solamente, y no tiene
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"/>

La dirección URL señala a la ubicación donde se almacena la imagen. Una imagen con el nombre
"boat.gif", ubicado en el directorio "imágenes" en "www.w3schools.com" tiene la URL:
http://www.w3schools.com/images/boat.gif.

El navegador muestra la imagen en la etiqueta <img> se produce en el documento. Si pones una
etiqueta de imagen entre dos párrafos, el navegador muestra el primer párrafo, a continuación, la
imagen y, a continuación del segundo párrafo.

HTML Imágenes - El atributo alt

El atributo alt especifica requerida de 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="boat.gif" alt="Big Boat" />

El atributo alt proporciona información alternativa para una imagen, si un usuario por alguna razón no
lo puede ver (debido a la conexión lenta, un error en el atributo src, o si el usuario utiliza un lector de
pantalla).

Imágenes de HTML - Altura Set y anchura de una imagen

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

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

< img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />

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


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

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

Alineación de imágenes
Cómo alinear una imagen dentro del texto.

<p>An image
<img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" />
with align="bottom".</p>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" />
with align="middle".</p>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />
with align="top".</p>
<p><b>Tip:</b> align="bottom" is default!</p>
<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" />
An image before the text.</p>
<p>An image after the text.
<img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p>

Deje que la imagen flote
¿Cómo hacer que un flotador de la imagen a la izquierda oa la derecha de un párrafo.

<p>
<img src="smiley.gif" alt="Smiley face" align="left" width="32" height="32" />
A paragraph with an image. The align attribute of the image is set to "left". The image will float to the
left of this text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" align="right" width="32" height="32" />
A paragraph with an image. The align attribute of the image is set to "right". The image will float to
the right of this text.
</p>

Crear un mapa de imagen
¿Cómo crear un mapa de imagen, con las regiones seleccionables. Cada una de las regiones es un
hipervínculo.

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>

Etiquetas HTML de imagen

<img /> Define una imagen
<map> Define una imagen de mapa de
<AREA /> Define un área de hacer clic dentro de una imagen de mapa de
HTML Tablas

Tablas HTML

Manzanas 44%
Plátanos 23%
Naranjas 13%
Otro 10%

Tablas
cómo crear tablas en un documento HTML.

<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

Tabla que bordea
Cómo especificar las fronteras de diferentes tablas.

<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

Tablas HTML

Las tablas se definen con la etiqueta <table>.

Un cuadro está dividido en filas (con la etiqueta <tr>), y cada fila se divide en celdas de datos (con la
etiqueta <td>). td significa "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

Tabla de ejemplo
< table border="1">
< tr>
< td>row 1, cell 1</td>
< /tr>
< tr>
< /tr>
< /table>

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

fila 1, celda 1 fila 1, celda 2
la fila 2, celda 1 la fila 2, la celda 2

Tablas HTML y el atributo border

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

Para mostrar una tabla con bordes, especificar el atributo de la frontera:

< table border="1">
< tr>
< td>Row 1, cell 1</td>
< td>Row 1, cell 2</td>
< /tr>
< /table>

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>
< tr>

< /tr>
< tr>
< /tr>
< /table>

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

Encabezado 1 Encabezado 2
fila 1, celda 1 fila 1, celda 2
la fila 2, celda 1 la fila 2, la celda 2

Tablas sin fronteras
¿cómo crear tablas, sin fronteras.

<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

Cabeceras de la tabla
Cómo crear encabezados de tabla.

<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

Celdas de la tabla que abarcan más de una fila / columna
¿Cómo definir las celdas de tabla que abarcan más de una fila o una columna.

<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>

<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

Etiquetas dentro de una tabla
Cómo mostrar elementos dentro de otros elementos.

<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>

Margen de celdas
Cómo utilizar cellpadding para crear más espacio en blanco entre el contenido de la celda y sus
fronteras.

<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

La célula espaciamiento
Como utilizar cellspacing para aumentar la distancia entre las células.

<table border="1" cellspacing="0">

<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

Etiquetas de tabla HTML

<table> Define una tabla
<th> Define un encabezado de la tabla
<tr> Define una fila de la tabla
<td> Define una celda de la tabla
<caption> Define una leyenda de la tabla
<colgroup> Define un grupo de columnas de una tabla, para el formato
<col /> Define los valores de los atributos de una o más columnas en una tabla
<thead> Grupos el contenido del encabezado de una tabla
<tbody> Grupos el contenido del cuerpo en una tabla
<tfoot> Grupos del contenido de pie de página en una tabla

HTML listas

Las listas HTML más comunes son listas ordenadas y desordenadas:

Listas de HTML

An ordered list: An unordered list:

1. The first list item List item
2. The second list item List item
3. The third list item List item

Lista desordenada
Cómo crear una lista desordenada en un documento HTML.

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

Lista ordenada
Cómo crear una lista ordenada en un documento HTML.

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

HTML listas no ordenadas

Una lista sin orden comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta
<li>.

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

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


Café
Leche

HTML listas ordenadas

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

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

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


1. Café
2. Leche

HTML listas de definición de

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 de 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>


Café

- Bebida caliente negro

Leche

- Bebida fría blanco


Sugerencia: Dentro de un elemento de la lista que usted puede poner el texto, los saltos de línea,
imágenes, enlaces, listas de otros, etc

Los diferentes tipos de listas ordenadas
Muestra los diferentes tipos de listas ordenadas.

<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>

<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Los diferentes tipos de listas desordenadas
Muestra los diferentes tipos de listas desordenadas.

<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

Lista anidada
muestra cómo se puede anidar listas.

<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Lista anidada 2
Muestra una lista anidada más complicado.

<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>

<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>

Lista de definiciones
Demuestra una lista de definiciones.
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Lista de etiquetas HTML


<ol> Define una lista ordenada

<ul> Define una lista desordenada

<li> Define un elemento de la lista

<dl> Define una lista de definiciones

<dt> Define un elemento en una lista de definiciones

<dd> Define una descripción de un elemento en una lista de definiciones

HTML <div> y <span>

Los 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 en línea
elementos.

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

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

Elementos HTML en Línea

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 nivel bloque que puede ser utilizado como contenedor
para agrupar otros elementos HTML.

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

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

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

El código HTML <span> Elemento

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

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

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

Etiquetas HTML Agrupación

<div Define un div
<span> Define un período de

HTML Layouts

Diseño de páginas web es muy importante para hacer que su sitio se vea bien.

Diseña tu página web de diseño con mucho cuidado.

Diseños Web

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

Varias columnas se crean mediante el uso de <div> o elementos <table>. CSS se utiliza para colocar
los 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 de tabla - no como una herramienta de diseño!.

Presentaciones del HTML - Uso de elementos clave

El elemento div es un elemento de nivel bloque que se utiliza para agrupar los elementos HTML.

El siguiente ejemplo se utiliza cinco elementos div para crear una disposición de columnas múltiples,
creando 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>

< div id="menu" style="background-
color:#FFD700;height:200px;width:100px;float:left;">
< 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 © W3Schools.com</div>
< /div>
< /body>
< /html>

El código HTML anterior producirá el siguiente resultado:

Título principal de la página web
Menú
HTML
CSS
JavaScript
El contenido va aquí
Derechos de autor © W3Schools.com

Presentaciones del HTML - Uso de las Tablas

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

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

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

El siguiente ejemplo utiliza una tabla con 3 filas y 2 columnas - la primera y última fila se extiende por
las dos 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 © W3Schools.com</td>
< /tr>
< /table>
< /body>
< /html>

El código HTML anterior producirá el siguiente resultado:

Título principal de la página web
Menú El contenido va aquí
HTML
CSS
JavaScript

Derechos de autor © W3Schools.com

Diseño de HTML - Consejos útiles

Consejo: Debido a que los diseños avanzados de tener tiempo para crear, una opción más rápida es
utilizar una plantilla. Busque en Google para las plantillas libres del Web site (estos son pre-
construidos diseños de sitios web que usted puede utilizar y personalizar).

Etiquetas HTML Layout

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

HTML y formularios de entrada

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

Crear campos de texto
Cómo crear campos de texto. El usuario puede escribir texto en un campo de texto.

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

Crear campo de la contraseña
¿Cómo crear un campo de contraseña.

<form action="">
Username: <input type="text" name="user" /><br />
Password: <input type="password" name="password" />
</form>

Formularios HTML

Formularios HTML se utilizan 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. Una forma también puede contener listas de
selección, textarea, fieldset, la leyenda y elementos de la etiqueta.

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

< form>
.
input elements
.
< /form>

Formas HTML - El elemento de entrada

El elemento de forma más importante es el 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 campo de tipo texto, casilla de verificación, contraseña, botón de
radio, botón de enviar, y mucho más.

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

Campos de texto

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

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


Nombre:

Apellido:

Nota: El formulario en sí mismo 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>


Contraseña:

Nota: Los caracteres de un campo de contraseña están enmascaradas (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 que un usuario
seleccione 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>


Masculino

Femenino

Casillas de verificación

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

< form>
< input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
< input type="checkbox" name="vehicle" value="Car" /> I have a car
< /form>


Tengo una bicicleta

Tengo un coche

Botón para enviar

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

Un botón de envío se utiliza para enviar datos del formulario a un servidor. Los datos se envían a la
página especificada en el atributo action del formulario. El archivo se define en el atributo de acción
por lo general hace 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>


Presentar
Nombre de Usuario:

Si escribir algunos caracteres en el campo de texto y haz 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.

Los botones de radio
Cómo crear botones de radio.

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

Casillas de verificación
¿cómo crear casillas de verificación. Un usuario puede seleccionar o deseleccionar una casilla de
verificación.

<form action="">
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>

Simple lista desplegable
¿Cómo crear una simple lista desplegable.

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

Lista desplegable con un valor pre-seleccionado
¿Cómo crear una lista desplegable con un valor pre-seleccionado.

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

Área de texto
¿Cómo crear un control de texto de varias líneas de entrada. En un texto de área, el usuario puede
escribir un número ilimitado de caracteres.

<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>

Crear un botón
Cómo crear un botón.

<form action="">
<input type="button" value="Hello world!">
</form>

Fieldset todo tipo de datos
Cómo crear un borde alrededor de los elementos de un formulario.

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />

</fieldset>
</form>

Formulario con campos de texto y un botón Enviar
Cómo crear un formulario con dos campos de texto y un botón de submit.

<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="Mickey" /><br />
Last name: <input type="text" name="LastName" value="Mouse" /><br />
<input type="submit" value="Submit" />
</form>

Formulario con casillas de verificación
Cómo crear un formulario con dos casillas de verificación y un botón de submit.

<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
<br /><br />
</form>

Formulario con botones de radio
¿cómo crear un formulario con dos botones de radio, y un botón de envío.

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

Enviar por e-mail desde un formulario
Cómo enviar correo electrónico desde un formulario.

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="name" value="your name" /><br />
E-mail:<br />
<input type="text" name="mail" value="your email" /><br />
Comment:<br />
<input type="text" name="comment" value="your comment" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

Etiquetas del formulario HTML
<form> Define un formulario HTML para la entrada del 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

HTML Iframes

Un iframe se utiliza para mostrar una página Web en una página web.

Sintaxis para añadir un iframe:

< iframe src="URL"></iframe>

La dirección apunta a la ubicación de la página separada.

Iframe - Altura del dispositivo y el ancho

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

Los valores de los atributos se especifican en píxeles por defecto, pero también pueden ser en tanto
por ciento (al igual que "80%").

Ejemplo
< iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - Retirar de la Frontera

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

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

Ejemplo
< iframe src="demo_iframe.htm" frameborder="0"></iframe>

Use iframe como un destino para un vínculo de

Un iframe puede ser utilizado como el marco de destino para un enlace.

El atributo de destino de un vínculo debe referirse al atributo de nombre del iframe:

Ejemplo
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

HTML iframe Tag

< body>
texto visible va aquí ...
< / body>
</ Html>

Los elementos de encabezamiento
La partida más grande <h1> </ h1>

<h2>. . . </ H2>
< h3>. . . </ H3>
< h4>. . . </ H4>
< h5>. . . </ H5>

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

Elementos de texto
< p> Esto 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 se hace hincapié en </ em>
< strong> Este texto es fuerte </ strong>
< code> Esto es un código informático </ code>

Estilos físicos
< b> Este texto está en negrita </ b>
< i> Este texto está en cursiva </ i>

Enlaces
Enlace ordinario: href="http://www.example.com/"> <a Enlace de texto va aquí </ a>
Imagen de enlace: <a href="http://www.example.com/"> <img SRC="URL" alt="texto Text" /> </
a>
enlace mailto: href="mailto:webmaster@example.com"> <a Enviar por e-mail </ a>

Un anclaje con nombre:
name="tips"> <a Consejos Sección </ a>
< a href="#tips"> Ir a la sección de Sugerencias </ 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 de la lista
< dl>
< dt> Primer término </ dt>
< dd> Definición </ dd>
< dt> El próximo trimestre </ dt>
< dd> Definición </ dd>
< / dl>

Tablas

<Tabla

Iframe

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

Formularios
< form action="http://www.example.com/test.asp" method="post/get">

<input type="text" size="40" name="email" maxlength="50" />
< input type="password" />
< input type="checkbox" checked="checked" />
< input type = "radio" checked = "checked" />
< input type="submit" value="Send" />
< INPUT TYPE="reset" />
< input type="hidden" /> < select> < option> Manzanas </ option> < option selected="selected">
Bananas </ option> < option> Cerezas </ option> < / select>
<textarea name="comment" rows="60" cols="20"> </ textarea> < / form>

Entidades
< Es el mismo que <
> es la misma que>
© es el mismo que ©

Otros elementos

<- Esto es un comentario ->

<blockquote>
texto de la cita de una fuente.
< / span>

<dirección>
Escrito por W3Schools.com <br />
< a href="mailto:us@example.org"> Envíenos un correo electrónico </ a> <br />
Dirección: Box 564, Disneyland <br />
Teléfono: +12 34 56 78
< / address>

Fuente: http://www.w3schools.com/html/html_quick.asp

HTML <! DOCTYPE>

A <! DOCTYPE> ayuda a que el navegador muestre una página web correctamente.

El <! DOCTYPE>

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 la versión exacta HTML que se utiliza en la página. Esto es
lo que <! DOCTYPE> se utiliza para.

<! DOCTYPE> no es una etiqueta HTML. Se trata de una información (una declaración) en el
explorador de lo que la versión del HTML se escribe pulg

En este tutorial se usa el DOCTYPE HTML5.

Ejemplo

Un documento HTML con un DOCTYPE HTML5:

<!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"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Para obtener una lista completa de las declaraciones de tipo de documento, vaya a nuestra referencia
DOCTYPE .

HTML cabeza Elementos

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

<head>
<title>My first HTML page</title>
</head>

Descripción del documento
Utilice el elemento <meta> para describir el documento.

<head>
<meta name="author" content="Hege Refsnes" />
<meta name="revised" content="2010/06/20" />
</head>

Palabras clave del documento
Utilice el elemento <meta> para definir las palabras clave de un documento.

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

El elemento HTML <head>

El elemento <head> es un contenedor para todos los elementos del cabezal. Los elementos dentro
<head> puede incluir secuencias de comandos, indicarle al navegador dónde encontrar las hojas de
estilo, proporcionar información de la meta, y mucho más.

Las siguientes etiquetas se pueden agregar 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 título se requiere en todos los documentos HTML / XHTML.

El elemento de título:

define un título en la barra de herramientas del navegador
prevé un título para la página cuando se agrega a los favoritos
muestra un título para la página en los motores de búsqueda

Un documento HTML simplificado:

< !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 en una página:

< head>
< base href="http://www.w3schools.com/images/" />
< base target="_blank" />
< /head>

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:

< head>
< link rel="stylesheet" type="text/css" href="mystyle.css" />
< /head>

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 acerca de los datos.

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

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

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

Los metadatos pueden ser utilizados por los navegadores (como mostrar el contenido o recargar la
página), 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 los atributos de contenido del elemento META
para indexar sus páginas.

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

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

El elemento meta se define por las 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.

El elemento de script HTML

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

El elemento de script se explica en un capítulo posterior.

Elementos HTML en la cabeza

<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 en 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

HTML Secuencias de comandos

JavaScript hacer que las páginas HTML más dinámica e interactiva.

Inserte un script
Cómo insertar una secuencia de comandos en un documento HTML.

<script type="text/javascript">
document.write("Hello World!")
</script>

El uso de la etiqueta <noscript>
Cómo manejar los navegadores que no soporten scripts, o se han desactivado las secuencias de
comandos.

<script type="text/javascript">
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

El elemento de secuencia de comandos HTML

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

El elemento de script, o bien contiene declaraciones de secuencias de comandos o que apunte a un
archivo de script externo a través del atributo src.

El tipo de atributo 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.

La siguiente secuencia de comandos escribe Hello World! a la salida de HTML:

Ejemplo
< script type="text/javascript">
< /script>

Sugerencia: Para obtener más información acerca de JavaScript, visite nuestro tutorial de
JavaScript !

El código HTML noscript Elemento

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

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

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

Ejemplo
< script type="text/javascript">
< /script>
< noscript>Sorry, your browser does not support JavaScript!</noscript>

Etiquetas HTML de secuencias de comandos

<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

Reservados caracteres en HTML debe ser reemplazado por las entidades de
caracteres.

HTML Entidades

Algunos personajes están reservados en HTML.

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

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

Una entidad de caracteres es la siguiente:

&entity_name;

OR

& #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 pueden no admitir todos
los nombres de entidad (el soporte para los números de la entidad es muy bueno).

Espacio de no separación

Una entidad de carácter común que se usa en HTML es el espacio de no separación ().

Los navegadores siempre se trunca espacios en páginas HTML. Si usted escribe 10 espacios en el
texto, el navegador eliminará 9 de ellos, antes de mostrar la página. Para agregar espacios a su texto,
puede utilizar la entidad de carácter.

Entidades Ejemplo HTML

Experimente con las entidades de caracteres HTML: Pruébelo usted mismo

HTML Entidades de caracteres de interés

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

Resultado Descripción Nombre de la entidad Entidad Número
espacio de no separación    
< menos que < <
> mayor que > >
Y signo & Y Y
¢ ciento ¢ ¢
EUR libra EUR EUR
¥ yen ¥ ¥
€ euro € €
§ sección § §
© derechos de autor © ©
® marca registrada ® ®
™ marca ™ ™

Para una referencia completa de todas las entidades de caracteres, visite nuestra página de referencia
las entidades HTML .

HTML Localizadores Uniformes de Recursos

Un URL es otra palabra para una dirección web.

Una URL puede estar compuesta de palabras, como "w3schools.com", o un
protocolo de Internet (IP): 192.68.20.50. La mayoría de la gente escriba el nombre

de la página web de la hora de navegar, porque los nombres son más fáciles de
memorizar 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 hacer frente a un documento (u otros datos)
en la web todo el mundo.

Una dirección web, de esta manera: http://www.w3schools.com/html/default.asp sigue estas reglas
de sintaxis:

scheme://host.domain:port/path/filename

Explicación:

plan - define el tipo de servicio de Internet. El tipo más común es http
de acogida - define el host de dominio (el equipo por defecto para http es www )
de dominio - define a Internet de nombres de dominio , como w3schools.com
: Puerto - define el número de puerto en el host (el número de puerto por defecto para
HTTP es el 80 )
ruta - define una ruta de acceso 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

Los regímenes comunes de URL

La siguiente tabla muestra algunos esquemas comunes:

Esquema Corto para el .... Cuáles son las páginas que el esquema se utiliza
para ...
http Protocolo de transferencia de Páginas web comunes comienza por http://. Sin cifrar
hipertexto
https Secure Hypertext Transfer Protocol Asegure las páginas web. Toda la información
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 ordenador

HTML codificación de direcciones URL

Codificación URL convierte los caracteres en un formato que puede ser transmitida
a través de Internet.

URL - Uniform Resource Locator

Navegadores web, las páginas de los servidores Web mediante una dirección URL.

La dirección URL es la dirección de una página web, como: http://www.w3schools.com.

URL de codificación

URL sólo se pueden enviar a través de Internet utilizando el juego de caracteres ASCII .

Dado que las direcciones URL a menudo contienen caracteres fuera del conjunto ASCII, la dirección
tiene que ser convertida a un formato ASCII válido.

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

URL no pueden contener espacios. Normalmente, la codificación URL reemplaza un espacio con un
signo +.

Inténtelo usted mismo

Si hace clic en el botón "Enviar" a continuación, la URL del navegador 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 algunos otros insumos, y haga clic en Enviar de nuevo.

Ejemplos de codificación URL

Carácter La codificación URL
€ 80%
EUR A3%
© % A9
® % EA
À % C0
Á % C1
Â % C2
Ã % C3
Ä % C4
Å % C5

Para una referencia completa de todas las codificaciones de direcciones URL, visite nuestra referencia
de codificación URL .

HTML Web Server

Para hacer que su sitio web visibles para el mundo, usted tendrá que almacenar 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. Aquí están 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 esperes que un PC de bajo costo puede hacer el trabajo. Usted también necesitará
un permanente (24 horas al día) de alta velocidad de conexión.

Los gastos de software

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

Los gastos de mano de obra

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

El uso de un proveedor de servicios Internet

El alquiler de un servidor de un proveedor de servicios 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 ISPs tienen conexiones muy rápidas a Internet.

Hardware de gran alcance

ISP a menudo tienen potentes servidores web que pueden ser compartidos por varias compañías.
Tambié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. Esperan que sus servidores a tener más del 99% del
tiempo, los últimos parches de software, y la mejor protección contra virus.

Cosas a tener en cuenta con un ISP

24 horas de apoyo

Asegúrese de que su ISP ofrece 24 horas de apoyo. No te pongas en una situación en la que no puede
resolver los problemas críticos sin tener que esperar hasta el siguiente día hábil. Número de teléfono
gratuito podría ser vital si no quieren pagar por llamadas de larga distancia.

Copia de seguridad diaria

Asegúrese de que su ISP ejecuta una rutina de copia de seguridad diaria, de lo contrario pueden
perder 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

Estudio de ancho de banda del ISP y las restricciones de contenido. Si desea publicar o difundir
imágenes de vídeo o de sonido, asegúrese de que usted pueda.

Capacidades de correo electrónico

Asegúrese de que su proveedor de Internet compatible con las capacidades de correo electrónico que
usted necesita.

Base de datos Access

Si usted planea usar los datos de bases de datos en su sitio web, asegúrese de que su ISP admite el
acceso de base de datos que usted necesita.

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

Html guia

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (20)

Semelhante a Html guia

Semelhante a Html guia (20)

Mais de victdiazm

Mais de victdiazm (20)

Html guia