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>< h2>This is a heading</h2>< h3>This is a heading</h3>

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

< p>This is my first paragraph.</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>< p>This is my first paragraph.</p>< /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>< 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 (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< 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

< h1>This is a heading</h1>< h2>This is a heading</h2>< h3>This is a heading</h3>

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 />< p>This is a paragraph</p>< hr />< p>This is a paragraph</p>

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

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 a paragraph< 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íneaEl 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

This is subscript and superscript

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 ispreformatted text.It preserves both spacesand line breaks.</pre>

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

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

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

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

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

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

CitasCó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 textoCó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 coloresEste 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á subrayadoCó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 externaCó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

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 enlaceCó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><p>This chapter explains ba bla bla</p><h2>Chapter 3</h2><p>This chapter explains ba bla bla</p><h2><a name="C4">Chapter 4</a></h2><p>This chapter explains ba bla bla</p><h2>Chapter 5</h2><p>This chapter explains ba bla bla</p><h2>Chapter 6</h2><p>This chapter explains ba bla bla</p><h2>Chapter 7</h2><p>This chapter explains ba bla bla</p><h2>Chapter 8</h2><p>This chapter explains ba bla bla</p><h2>Chapter 9</h2><p>This chapter explains ba bla bla</p><h2>Chapter 10</h2><p>This chapter explains ba bla bla</p><h2>Chapter 11</h2><p>This chapter explains ba bla bla</p><h2>Chapter 12</h2><p>This chapter explains ba bla bla</p><h2>Chapter 13</h2><p>This chapter explains ba bla bla</p><h2>Chapter 14</h2><p>This chapter explains ba bla bla</p><h2>Chapter 15</h2><p>This chapter explains ba bla bla</p><h2>Chapter 16</h2><p>This chapter explains ba bla bla</p><h2>Chapter 17</h2><p>This chapter explains ba bla bla</p>

Salir de un marcoCó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:[email protected]?Subject=Hello%20again">Send Mail</a></p>

Crear un enlace mailto 2Otro enlace mailto.

<p>This is another mailto link:<a href="mailto:[email protected][email protected]&[email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a></p>

Etiquetas HTML LinkEtiqueta Descripción

<a> Define un ancla

HTML Imágenes

Ejemplo

Norwegian Mountain Trip

Insertar imágenescó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 lugaresCó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ágenesCó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%

Tablascó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 bordeaCó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>< td>row 1, cell 2</td>< /tr>< tr>< td>row 2, cell 1</td>< td>row 2, cell 2</td>< /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>< td>row 1, cell 1</td>< td>row 1, cell 2</td>< /tr>< tr>< td>row 2, cell 1</td>< td>row 2, cell 2</td>< /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 tablaCó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 tablaCó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 celdasCó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 espaciamientoComo 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:

1. The first list item2. The second list item3. The third list item

An unordered list:

List item List item List item

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

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

Lista ordenadaCó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>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists4


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

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered

<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 desordenadasMuestra 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 anidadamuestra 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>


http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered

Lista anidada 2Muestra 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 definicionesDemuestra 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

http://www.w3schools.com/tags/tag_dd.asp

http://www.w3schools.com/tags/tag_dt.asp

http://www.w3schools.com/tags/tag_dl.asp

http://www.w3schools.com/tags/tag_li.asp

http://www.w3schools.com/tags/tag_ul.asp

http://www.w3schools.com/tags/tag_ol.asp


http://www.w3schools.com/html/tryit.asp?filename=tryhtml_nestedlists2

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 webMenúHTML CSS JavaScriptEl 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úHTML CSS JavaScript

El contenido va aquí

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 textoCó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>


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.

Presentar

Los botones de radioCó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ónCómo crear un botón.

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

Fieldset todo tipo de datosCó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 EnviarCó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ónCómo crear un formulario con dos casillas de verificación y un botón de submit.

<form name="input" action="html_form_action.asp" method="get"><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 /><input type="submit" value="Submit" /></form>

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

<form name="input" action="html_form_action.asp" method="get"><input type="radio" name="sex" value="male" /> Male<br /><input type="radio" name="sex" value="female" /> Female<br /><input type="submit" value="Submit" /></form>

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

<form action="MAILTO:[email protected]" 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

< title> Título del documento va aquí </ title> < / head>< body> texto visible va aquí ... < / body></ Html>

Los elementos de encabezamientoLa 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:[email protected]"> <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:[email protected]"> 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 documentoLa etiqueta <title> define el título del documento.

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

Descripción del documentoUtilice 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 documentoUtilice 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>

http://www.w3schools.com/tags/tag_doctype.asp

http://www.w3schools.com/tags/tag_doctype.asp

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 scriptCó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">document.write("Hello World!")</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">document.write("Hello World!")< /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">document.write("Hello World!")< /script>< noscript>Sorry, your browser does not support JavaScript!</noscript>

Etiquetas HTML de secuencias de comandos

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

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 hipertexto

Páginas web comunes comienza por http://. Sin cifrar

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.

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.

Hello Günter Presentar

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 .

http://www.w3schools.com/hosting/default.asp

Html guia

Documents

Transcript of Html guia