Html guia

607 views

Published on

  • Be the first to comment

Html guia

  1. 1. HTML IntroducciónEjemplo< !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áginaEtiquetas HTMLHTML 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.
  2. 2. Pero estrictamente hablando, un elemento HTML es todo entre la etiqueta de inicio y la etiqueta decierre, 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 webNavegadores WebEl propósito de un navegador web (Chrome, Internet Explorer, Firefox) es leer los documentos HTML ymostrarlos como páginas web. El navegador no muestra las etiquetas HTML, pero utiliza las etiquetaspara interpretar el contenido de la páginaEstructura de una página HTMLA 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ásicoTítulos HTMLEncabezados 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 HTMLPárrafos HTML se definen con la etiqueta <p>.Ejemplo< p>This is a paragraph.</p>< p>This is another paragraph.</p>Enlaces HTML
  3. 3. 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 HTMLImá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 ElementosLos documentos HTML se definen los elementos HTML.Elementos HTMLUn 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 amenudo 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 atributosSugerencia: Usted aprenderá acerca de los atributos en el siguiente capítulo de este tutorial.Elementos HTML anidadasMayoría de los elementos HTML se pueden anidar (puede contener otros elementos de HTML).
  4. 4. 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 explicadoEl 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 cierreAlgunos 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 paragraphEl ejemplo anterior funciona en la mayoría de navegadores, ya que la etiqueta de cierre se consideraopcional.
  5. 5. Nunca confíe en esto. Muchos elementos HTML se producen resultados inesperados y / o errores si seolvida la etiqueta de cierre.Vaciar elementos HTMLElementos 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 laetiqueta 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úsculasLas 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 AtributosLos 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 atributosVínculos HTML se definen con la etiqueta <a>. La dirección del enlace se especifica en el atributohref :Ejemplo< a href="http://www.w3schools.com">This is a link</a>Cita siempre los valores de atributoValores 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 loestarán. Sugerencia: En algunas situaciones excepcionales, cuando el valor del atributo en sí contienecomillas, es necesario el uso de comillas simples: nombre = "Juan" escopeta "Nelson"HTML Consejo: utilizar los atributos en minúsculas
  6. 6. 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 deatributos en el código HTML 4 recomendación.Las versiones más recientes de (X) HTML exigirá atributos en minúsculas.HTML atributos de referenciaA continuación se muestra una lista de algunos de los atributos que son estándar para la mayoría delos elementos HTML:Atributo Valor Descripciónclase nombre de la clase Especifica un nombre de clase de un elementoidentificación identificación Especifica un identificador único para un elementoestilo style_definition Especifica un estilo en línea de un elementotítulo tooltip_text Especifica información adicional sobre un elemento (que se muestra como una punta de la herramienta)HTML títulosLos títulos son importantes en los documentos HTML.Títulos HTMLLas 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 ydespués de cada partida.Las partidas son importantesUtilice 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 paramostrar la estructura del documento.Encabezados H1 se debe utilizar como títulos principales, seguido de las partidas H2, H3, acontinuación las partidas menos importantes, y así sucesivamente.
  7. 7. Líneas de HTMLEl <hr /> etiqueta crea una línea horizontal en una página HTML. El elemento h se puede utilizar paraseparar el contenido:Ejemplo< p>This is a paragraph</p>< hr />< p>This is a paragraph</p>< hr />< p>This is a paragraph</p>Comentarios HTMLLos 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 delparé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áginaView" (Firefox), o similar para otros navegadores. Esto abrirá una ventana que contiene el códigoHTML de la página.Referencia de Etiquetas HTMLReferencia W3Schools de etiqueta contiene información adicional sobre estas etiquetas y susatributos.Usted aprenderá más acerca de las etiquetas y atributos HTML en los próximos capítulos de estetutorial.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
  8. 8. HTML PárrafosLos documentos HTML se dividen en párrafos.Párrafos HTMLLos 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 cierreLa 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 paragraphEl ejemplo anterior funcionará en la mayoría de los navegadores, pero no confíe en él. El olvido de laetiqueta 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 HTMLUtilice la etiqueta <br /> si quieres un salto de línea (una línea nueva) sin necesidad de iniciar unnuevo 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 enaplicaciones XHTML y XML.HTML de salida - Consejos útilesNo se puede estar seguro de cómo HTML se mostrarán. Las pantallas grandes o pequeñas, y lasventanas redimensionadas a crear resultados diferentes.
  9. 9. Con HTML, no puede cambiar la salida mediante la adición de espacios o líneas adicionales en elcó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 cuentancomo 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 HTMLReferencia W3Schools de etiqueta contiene información adicional sobre los elementos HTML y susatributos.Etiqueta Descripción<p> Define un párrafo<br /> Inserta un salto de línea únicaHTML Formato de textoFormato de texto HTMLThis text is boldThis text is bigThis text is italicThis is computer output superscriptThis is subscript andEtiquetas de formato HTMLHTML 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 parauna 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
  10. 10. 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:us@example.org">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>
  11. 11. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. Thisis 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 HTMLEtiqueta Descripción<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 eliminadoHTML "resultados que el equipo" TagsEtiqueta Descripción<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 variableSi su canción Define el texto preformateadoCitaciones HTML, citas y Etiquetas DefiniciónEtiqueta Descripció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
  12. 12. HTML EditorHTML escrito utilizando el Bloc de notas o TextEditHTML se pueden editar mediante un editor HTML profesional como: Adobe Dreamweaver Microsoft Expression Web CoffeeCup HTML EditorSin 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 aprenderHTML.Siga los 4 pasos para crear tu primera página web con el Bloc de notas.Paso 1: Inicie el Bloc de notasPaso 2: Edita el código HTML con NotepadEscriba su código HTML en su Bloc de notasPaso 3: Guarde su HTMLSeleccione 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 hayninguna 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 navegadorHTML - CSS EstilosCSS (Cascading Style Sheets) se utiliza para aplicar estilo a los elementos HTML.¡Mira! Los estilos y coloresEste texto está en Verdana y rojoEste texto está en Times y azulEste texto es de 30 píxeles de alto
  13. 13. 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 CSSCSS fue presentado junto con HTML 4, para proporcionar una mejor forma de estilo de los elementosHTML.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 archivoLa 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. Estose hace para simplificar los ejemplos. También hace que sea más fácil para usted para modificar elcódigo y pruébelo usted mismo.Estilos en líneaUn estilo en línea puede ser utilizado si un estilo único es que debe aplicarse a una sola aparición deun elemento.Para utilizar estilos en línea, utilice el atributo de estilo en la etiqueta correspondiente. El atributo stylepuede contener cualquier propiedad CSS. El siguiente ejemplo muestra cómo cambiar el color deltexto 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 fondoLa propiedad background-color define el color de fondo de un elemento:Ejemplo
  14. 14. < !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ñoLa fuente de la familia, el color y las propiedades font-size define el tipo de letra, color y tamaño deltexto 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 textoLa 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 internaUna hoja de estilo interna puede ser utilizado si un documento único, tiene un estilo único. Estilosinternos 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;}
  15. 15. < /style>< /head>Hoja de estilos externaUna hoja de estilos externa es ideal cuando el estilo se aplica a muchas páginas. Con una hoja deestilos externa, puede cambiar el aspecto de un sitio Web completo al cambiar un archivo. Cadapágina debe enlazar con la hoja de estilo con la etiqueta <link>. La etiqueta <link> va dentro de lasección <head>:< head>< link rel="stylesheet" type="text/css" href="mystyle.css" />< /head>Etiquetas HTML EstiloEtiqueta Descripción<style> Define la información de estilo para un documento<link /> Define la relación entre un documento y un recurso externoEtiquetas y atributos desaprobadosEn HTML 4, varias etiquetas y atributos se utiliza para los documentos de estilo. Estas etiquetas noson 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 EnlacesLos enlaces se encuentran en las páginas web de casi todos. Enlaces permitir a losusuarios 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 clicpara 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 nombreSintaxis HTML LinkEl código HTML de un enlace es muy sencillo. Se parece a esto:
  16. 16. < 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 W3SchoolsHaciendo 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 elementoHTML.Enlaces HTML - El atributo de destinoEl 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 unanueva pestaña:Ejemplo< a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>Enlaces HTML - El atributo de nombreEl 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 paraespecificar el nombre de un ancla. Usando el atributo id en realidad funciona también para HTML 4 entodos los navegadores modernos.Favoritos no se muestran de un modo especial. Ellos son invisibles para el lector.EjemploUn 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>
  17. 17. Notas básicas - Consejos útilesNota: 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 servidoragregará 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 undocumento grande. Cada capítulo del documento se da un anclaje con nombre, y enlaces a cada unode 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>
  18. 18. 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:someone@example.com?Subject=Hello%20again">Send Mail</a></p>Crear un enlace mailto 2Otro enlace mailto.<p>This is another mailto link:<ahref="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a></p>Etiquetas HTML LinkEtiqueta Descripción<a> Define un anclaHTML ImágenesEjemplo Norwegian Mountain TripInsertar 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.
  19. 19. <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 SrcEn 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 tieneetiqueta de cierre.Para mostrar una imagen en una página, es necesario utilizar el atributo src. Src significa "fuente". Elvalor 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 unaetiqueta de imagen entre dos párrafos, el navegador muestra el primer párrafo, a continuación, laimagen y, a continuación del segundo párrafo.HTML Imágenes - El atributo altEl atributo alt especifica requerida de un texto alternativo para una imagen, si la imagen no se puedemostrar.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 nolo puede ver (debido a la conexión lenta, un error en el atributo src, o si el usuario utiliza un lector depantalla).Imágenes de HTML - Altura Set y anchura de una imagenLos 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 secarga la página. Sin embargo, sin estos atributos, el navegador no sabe el tamaño de la imagen. Elefecto será que el diseño de página cambiará durante la carga (mientras que la carga de imágenes).
  20. 20. Notas básicas - Consejos útilesNota: Si un archivo HTML contiene diez imágenes - once archivos son necesarios para mostrar lapágina de la derecha. Carga de imágenes lleva tiempo, así que mi mejor consejo es: Utiliza lasimágenes cuidadosamente.Nota: Cuando una página web se carga, es el navegador, en ese momento, que en realidad obtiene laimagen de un servidor web y los inserta en la página. Por lo tanto, asegúrese de que las imágenes enrealidad me alojo en el mismo lugar en relación con la página web, de lo contrario los visitantestendrán un icono de enlace roto. El icono de enlace se muestra si el navegador no puede encontrar laimagen.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 theleft 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 tothe 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 unhiperví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>
  21. 21. Etiquetas HTML de imagenEtiqueta Descripción<img /> Define una imagen<map> Define una imagen de mapa de<AREA /> Define un área de hacer clic dentro de una imagen de mapa deHTML TablasTablas HTMLManzanas 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>
  22. 22. Tablas HTMLLas 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 laetiqueta <td>). td significa "datos de la tabla," y mantiene el contenido de una celda de datos. Unaetiqueta <td> pueden contener texto, enlaces, imágenes, listas, formularios, otras tablas, etcTabla 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 2la fila 2, celda 1 la fila 2, la celda 2Tablas HTML y el atributo borderSi no se especifica un atributo de la frontera, la tabla se muestran sin fronteras. A veces esto puedeser ú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 HTMLLa 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>
  23. 23. < 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 2fila 1, celda 1 fila 1, celda 2la fila 2, celda 1 la fila 2, la celda 2Tablas 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>
  24. 24. <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 susfronteras.<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">
  25. 25. <tr> <td>First</td> <td>Row</td></tr><tr> <td>Second</td> <td>Row</td></tr></table>Etiquetas de tabla HTMLEtiqueta Descripción<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 tablaHTML listasLas listas HTML más comunes son listas ordenadas y desordenadas:Listas de HTMLAn 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 itemLista 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.
  26. 26. <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>HTML listas no ordenadasUna 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>¿Cómo el código HTML anterior se ve en un navegador: Café LecheHTML listas ordenadasUna 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>¿Cómo el código HTML anterior se ve en un navegador: 1. Café 2. LecheHTML listas de definición deUna 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 elelemento de la lista):
  27. 27. < dl>< dt>Coffee</dt>< dd>- black hot drink</dd>< dt>Milk</dt>< dd>- white cold drink</dd>< /dl>¿Cómo el código HTML anterior se ve en un navegador:Café - Bebida caliente negroLeche - Bebida fría blancoNotas básicas - Consejos útilesSugerencia: Dentro de un elemento de la lista que usted puede poner el texto, los saltos de línea,imágenes, enlaces, listas de otros, etcLos 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><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>
  28. 28. <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>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>
  29. 29. <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 HTMLEtiqueta Descripción<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 definicionesHTML <div> y <span>Los elementos HTML se pueden agrupar con <div> y <span>Elementos HTML de bloqueMayoría de los elementos HTML se define como nivel de bloque o como elementos en líneaelementos.Los elementos de bloque de nivel normalmente comienzan (y final) con una nueva línea cuando semuestra en un navegador.Ejemplos: <h1>, <p>, <ul>, <table>
  30. 30. Elementos HTML en LíneaLos 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 contenedorpara agrupar otros elementos HTML.El elemento <div> no tiene ningún significado especial. Sólo que, debido a que es un elemento denivel 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 atributosde 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 dela definición de diseño utilizando tablas. Uso de tablas no es el correcto uso del elemento <table>. Elpropósito del elemento <table> es mostrar datos tabulares.El código HTML <span> ElementoEl elemento HTML <span> es un elemento en línea que puede ser utilizado como un contenedor parael 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 atributosde estilo para las partes del texto.Etiquetas HTML AgrupaciónEtiqueta Descripción<div Define un div<span> Define un período deHTML LayoutsDiseñ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 WebLa mayoría de los sitios web han puesto su contenido en varias columnas (el mismo formato que unarevista o periódico).Varias columnas se crean mediante el uso de <div> o elementos <table>. CSS se utiliza para colocarlos elementos, o para crear fondos o aspecto colorido de las páginas.
  31. 31. 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 claveEl 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úHTMLCSSJavaScriptEl contenido va aquí Derechos de autor © W3Schools.comPresentaciones del HTML - Uso de las TablasUna 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 colocarlos elementos, o para crear fondos o aspecto colorido de las páginas.
  32. 32. 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 porlas 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 webMenú El contenido va aquíHTMLCSSJavaScript Derechos de autor © W3Schools.com
  33. 33. Diseño de HTML - Consejos útilesConsejo: Debido a que los diseños avanzados de tener tiempo para crear, una opción más rápida esutilizar 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 LayoutEtiqueta Descripción<div Define una sección de un documento<span> Define una sección de un documentoHTML y formularios de entradaFormularios HTML se utilizan para seleccionar los diferentes tipos de entrada delusuario.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 HTMLFormularios 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 deselecció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
  34. 34. 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. Unelemento de entrada puede ser de campo de tipo texto, casilla de verificación, contraseña, botón deradio, 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 textoen:< form>First name:< input type="text" name="firstname" /><br />Last name:< input type="text" name="lastname" />< /form>¿Cómo el código HTML anterior se ve en un navegador:Nombre:Apellido:Nota: El formulario en sí mismo no es visible. También tenga en cuenta que el ancho predeterminadode un campo de texto es de 20 caracteres.Contraseña Campo<input type="password" /> define un campo de contraseña:< form>Password:< input type="password" name="pwd" />< /form>¿Cómo el código HTML anterior se ve en un navegador:Contraseña:Nota: Los caracteres de un campo de contraseña están enmascaradas (mostrado como asteriscos ocírculos).Botones de opción<input type="radio" /> define un botón de radio. Los botones de opción permite que un usuarioseleccione sólo una de un número limitado de opciones:< form>< input type="radio" name="sex" value="male" /> Male<br />
  35. 35. < input type="radio" name="sex" value="female" /> Female< /form>¿Cómo el código HTML anterior se ve en un navegador: Masculino FemeninoCasillas de verificación<input type="checkbox" /> define una casilla de verificación. Las casillas de verificación permitir queun 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>¿Cómo el código HTML anterior se ve en un navegador: Tengo una bicicleta Tengo un cocheBotó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 lapágina especificada en el atributo action del formulario. El archivo se define en el atributo de acciónpor 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>¿Cómo el código HTML anterior se ve en un navegador: PresentarNombre de Usuario:Si escribir algunos caracteres en el campo de texto y haz clic en el botón "Enviar", el navegadorenviará sus comentarios a una página llamada "html_form_action.asp". La página le mostrará lasaportaciones recibidas.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>
  36. 36. Casillas de verificación¿cómo crear casillas de verificación. Un usuario puede seleccionar o deseleccionar una casilla deverificació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 puedeescribir 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" />
  37. 37. </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: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 HTMLEtiqueta Descripción<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
  38. 38. <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 pulsadorHTML IframesUn 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 anchoLos 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 tantopor ciento (al igual que "80%").Ejemplo< iframe src="demo_iframe.htm" width="200" height="200"></iframe>Iframe - Retirar de la FronteraEl 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 deUn 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
  39. 39. Etiqueta Descripción<iframe> Define una ventana de línea secundaria (cuadro)HTML ColorsLos colores se muestra la combinación de rojo, verde y azul.Los valores de colorColores HTML se definen mediante una notación hexadecimal (HEX) para la combinación de rojo,verde, y los valores de color azul (RGB).El valor más bajo que se puede dar a una de las fuentes de luz es 0 (en HEX: 00). El valor más alto es255 (en HEX: FF).Valores hexadecimales se especifican como 3 pares de números de dos dígitos, comenzando con unsigno #.16 millones de colores diferentesLa combinación de rojo, verde y azul 0 a 255, ofrece más de 16 millones de colores diferentes (256 x256 x 256).HTML nombres de coloresLos nombres de color compatibles con todos los navegadores147 nombres de los colores se definen en el HTML y CSS de color especificación (16 nombres decolores básicos, además de más 130). La siguiente tabla muestra a todos ellos, junto con sus valoreshexadecimales. Consejo: Los 16 nombres de colores básicos son: aqua, black, blue, fuchsia, gray, green, lime,maroon, navy, olive, purple, red, silver, teal, white, and yellow.Haga clic en un nombre de color (o un valor hexadecimal) para ver el color que el fondo de color,junto con los colores de texto diferentes:HTML 4.01 Lista rápidaLista rápida de W3Schools HTML. Imprimirlo, doblarlo y ponerlo en tu bolsillo.HTML básico Documento<! DOCTYPE html>< html>< head>< title> Título del documento va aquí </ title>< / head>
  40. 40. < 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>EnlacesEnlace 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>
  41. 41. < 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<TablaIframe<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>
  42. 42. Fuente: http://www.w3schools.com/html/html_quick.aspHTML <! 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áginaHTML correctamente el 100% si se conoce la versión exacta HTML que se utiliza en la página. Esto eslo que <! DOCTYPE> se utiliza para.<! DOCTYPE> no es una etiqueta HTML. Se trata de una información (una declaración) en elexplorador de lo que la versión del HTML se escribe pulgEn este tutorial se usa el DOCTYPE HTML5.EjemploUn 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 HTMLDesde los primeros días de la web, ha habido muchas versiones de HTML:Versión AñoHTML 1991HTML + 1993HTML 2.0 1995HTML 3.2 1997
  43. 43. HTML 4.01 1999XHTML 1.0 2000HTML5 2012XHTML5 2013Declaraciones comunesHTML5< !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 referenciaDOCTYPE .HTML cabeza ElementosEl 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>
  44. 44. 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 deestilo, 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úsquedaUn 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 todoslos 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>
  45. 45. 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 unnavegador:< 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 lapágina), los motores de búsqueda (palabras clave), u otros servicios web.Palabras clave para motores de búsquedaAlgunos motores de búsqueda a utilizar el nombre y los atributos de contenido del elemento METApara 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 HTMLLa 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
  46. 46. Etiqueta Descripción<head> Define información sobre el documento<title> Define el título de un documento<base /> Define una dirección predeterminada o un destino predeterminado para todos los enlaces 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 documentoHTML Secuencias de comandosJavaScript 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 decomandos.<script type="text/javascript">document.write("Hello World!")</script><noscript>Sorry, your browser does not support JavaScript!</noscript>El elemento de secuencia de comandos HTMLLa 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 unarchivo 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, ylos 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>
  47. 47. Sugerencia: Para obtener más información acerca de JavaScript, visite nuestro tutorial deJavaScript !El código HTML noscript ElementoLa etiqueta <noscript> se utiliza para proporcionar un contenido alternativo para los usuarios que handeshabilitado los scripts en su navegador o tener un navegador que no soporta el lado del cliente desecuencias de comandos.El elemento noscript puede contener todos los elementos que se pueden encontrar en el interior delelemento 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 comandosEtiqueta 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 clienteHTML EntidadesReservados caracteres en HTML debe ser reemplazado por las entidades decaracteres.HTML EntidadesAlgunos 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 vaa mezclar con las etiquetas.Para mostrar los caracteres reservados en realidad, tenemos que usar entidades de caracteres en elcódigo fuente HTML.Una entidad de caracteres es la siguiente:&entity_name;OR
  48. 48. & #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 nombrees más fácil de recordar. Sin embargo, la desventaja es que los navegadores pueden no admitir todoslos nombres de entidad (el soporte para los números de la entidad es muy bueno).Espacio de no separaciónUna 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 eltexto, 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 HTMLExperimente con las entidades de caracteres HTML: Pruébelo usted mismoHTML Entidades de caracteres de interésNota: 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 &nbsp;  < 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 referencialas entidades HTML .HTML Localizadores Uniformes de RecursosUn URL es otra palabra para una dirección web.Una URL puede estar compuesta de palabras, como "w3schools.com", o unprotocolo de Internet (IP): 192.68.20.50. La mayoría de la gente escriba el nombre
  49. 49. de la página web de la hora de navegar, porque los nombres son más fáciles dememorizar que los números.URL - Uniform Resource LocatorAl hacer clic en un enlace en una página HTML, una etiqueta <a> subyacente apunta a una direcciónen 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 reglasde sintaxis:scheme://host.domain:port/path/filenameExplicació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 / recursoLos regímenes comunes de URLLa 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 hipertextohttps Secure Hypertext Transfer Protocol Asegure las páginas web. Toda la información intercambiada se cifranftp File Transfer Protocol Para descargar o cargar archivos a un sitio web. Útil para el mantenimiento de dominioexpediente Un archivo en su ordenadorHTML codificación de direcciones URLCodificación URL convierte los caracteres en un formato que puede ser transmitidaa través de Internet.URL - Uniform Resource LocatorNavegadores web, las páginas de los servidores Web mediante una dirección URL.
  50. 50. La dirección URL es la dirección de una página web, como: http://www.w3schools.com.URL de codificaciónURL 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óntiene 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 unsigno +.Inténtelo usted mismoSi hace clic en el botón "Enviar" a continuación, la URL del navegador codificará la entrada antes deque se envíe al servidor. Una página en el servidor mostrará la información recibida. Hello Günter PresentarPruebe algunos otros insumos, y haga clic en Enviar de nuevo.Ejemplos de codificación URLCarácter La codificación URL€ 80%EUR A3%© % A9® % EAÀ % C0Á % C1Â % C2Ã % C3Ä % C4Å % C5Para una referencia completa de todas las codificaciones de direcciones URL, visite nuestra referenciade codificación URL .HTML Web ServerPara hacer que su sitio web visibles para el mundo, usted tendrá que almacenar enun servidor web.El alojamiento de su propio sitio Web
  51. 51. El alojamiento de su sitio web en su propio servidor es siempre una opción. Aquí están algunos puntosa considerar:Los gastos de hardwarePara ejecutar un "verdadero" sitio web, usted tendrá que comprar un poco de hardware de servidor degran 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 softwareRecuerde que el servidor de licencias a menudo son más altos que los clientes de licencias. Tambiéntenga en cuenta que el servidor de licencias puede tener límites en el número de usuarios.Los gastos de mano de obraNo espere que los gastos bajos de mano de obra. Usted tiene que instalar su propio hardware ysoftware. Usted también tiene que lidiar con los insectos y virus, y mantener el servidor funcionandoconstantemente en un ambiente donde "todo puede pasar".El uso de un proveedor de servicios InternetEl 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ónLa mayoría de los ISPs tienen conexiones muy rápidas a Internet.Hardware de gran alcanceISP 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 deseguridad necesarias.Seguridad y EstabilidadLos ISP son especialistas en web hosting. Esperan que sus servidores a tener más del 99% deltiempo, los últimos parches de software, y la mejor protección contra virus.Cosas a tener en cuenta con un ISP24 horas de apoyoAsegúrese de que su ISP ofrece 24 horas de apoyo. No te pongas en una situación en la que no puederesolver los problemas críticos sin tener que esperar hasta el siguiente día hábil. Número de teléfonogratuito podría ser vital si no quieren pagar por llamadas de larga distancia.
  52. 52. Copia de seguridad diariaAsegúrese de que su ISP ejecuta una rutina de copia de seguridad diaria, de lo contrario puedenperder algunos datos valiosos.Volumen de TráficoEstudio de las restricciones del ISP volumen de tráfico. Asegúrese de que usted no tiene que pagaruna fortuna para el alto tráfico inesperado si su sitio web se convierte en popular.Tráfico o Restricciones de contenidoEstudio de ancho de banda del ISP y las restricciones de contenido. Si desea publicar o difundirimágenes de vídeo o de sonido, asegúrese de que usted pueda.Capacidades de correo electrónicoAsegúrese de que su proveedor de Internet compatible con las capacidades de correo electrónico queusted necesita.Base de datos AccessSi usted planea usar los datos de bases de datos en su sitio web, asegúrese de que su ISP admite elacceso de base de datos que usted necesita.Antes de seleccionar un proveedor de Internet, asegúrese de leer W3Schools Tutorial de Web Hosting.

×