Crear Un Documento HTML

HTML
What is HTML?
HTML is a markup language for describing web documents (web pages).
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content
Ejemplo HTML
<!DOCTYPE html>
<html>
<head>
<title>Ttulo de la Pgina El ttulo es un metadato</title>
</head>
<body>
<h1>Mi primer encabezado</h1>

<p>Mi primer prrafo.</p>
</body>
</html>
Explicacin:
The DOCTYPE declaration defines the document type to be HTML
The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the document
The text between <title> and </title> provides a title for the document, es un metadato
The text between <body> and </body> describes the visible page content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph
Usando esta descripcin, un navegador web puede mostrar un documento

con un encabezado y un prrafo.
HTML Tags (Etiquetas)
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
HTML tags normally come in pairs like <p> and </p>

The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a slash before the
tag name
Navegador Web
El propsito de un navegador web (Chrome, IE, Firefox, Safari) es leer documentos HTML y
mostrarlos.
El navegador web no muestra los HTML tags (etiqueta), pero los usa para determinar cmo
mostrar el documento.
Estructura HTML
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Slo se muestra la parte del cuerpo en el navegador.

La declaracin <!DOCTYPE>
Esta declaracin ayuda al navegador a mostrar la pgina web correctamente.
Para mostrar un documento correctamente, el navegador debe conocer el tipo y la versin.
Para la declaracin doctype, algunos casos son aceptados:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
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">
Versiones HTML:
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
Escribir en HTML usando un editor de texto
Abrir un editor de texto, en mi caso el Blog de Notas
Escribir el cdigo HTML
Guardar con un nombre y una extensin .html (es posible guardar con la extensin .htm o .html)
Encoding preferiblemente UTF-8 (ANSI es para caracteres de EEUU y de Europa Occidental).
Abrir el Documento HTML
Se presiona click derecho en el documento guardado como HTML y se selecciona abrir con, a
continuacin se selecciona un navegador web.
Documentos HTML
Todo documento HTML debe empezar con la declaracin <!DOCTYPE html>
Un documento HTML en s empieza con <html> y termina con </html>
La parte visible del documento se encuentra entre <body> and </body>
La cabecera HTML
Se definen entre <head> and </head>
El elemento heading <head> se lo pone entre la etiqueta <html> y el cuerpo <body>
La cabecera contiene los datos tipo meta data, los me ta data no son visibles
Un meta dato significa datos acerca de datos. Los meta datos html son datos acerca del
documento html.
HTML Ttulos
Los ttulos se definen desde la etiqueta <h1> to <h6>
HTML Paragraphs
Los prrafos se definen con la etiqueta <p>

Imgenes HTML
Las imgenes se definen con la etiqueta <img>
The source file (src), alternative text (alt), and size (width and height) are provided as attributes:
Ejemplo:
<img src="foto.jpg" alt="sinohayimagenaparece" width="104" height="142">
alt: Texto alternativo que se muestra cuando la imagen no est disponible.
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html>
Siempre se debe especificar el tamao de la imagen.
Es mejor utilizar style para las imgenes, ya que previene que la imagen cambie del tamao
original.
Imgenes de otras carpetas
Se requiere especificar la carpeta donde se encuentra la imagen:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Imgenes en otro servidor
Se puede acceder a cualquier imagen de la web en cualquier sevidor, solo se requiere la url:
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Imgenes Animadas (Gif)
Son imgenes .gif
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Usar una imgen como link
Se debe poner la etiqueta <img> dentro de la etiqueta <a>:
<!DOCTYPE html>
<html>
<body>
<a href="http://www.w3schools.com">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px">
</a>
</body>
</html>
Se aade border para evitar problemas en algunos navegadores
Imagen Flotante
La imagen aparecer a la derecha o a la izquierda:
<!DOCTYPE html>
<html>
<body>
<p><strong>Float the image to the right:</strong></p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating
image.
</p>
<p><strong>Float the image to the left:</strong></p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating
image.
</p>
<p>Please use the CSS float property. The align attribute is deprecated in HTML 4, and not
supported in HTML5.</p>
</body>
</html>
Mapas de Imagen
Se usa <map>, un map es una imagen con reas clickeables.
El atributo <map> se relaciona con la imagen.
La etiqueta <map> contiene una serie de etiquetas <area>, que define las reas se puede hacer clic
en la imagen.
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<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>
</body>
</html>
Resumen
Use the HTML <img> element to define an image

Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
Use the HTML width and height attributes to define the size of the image
Use the CSS width and height properties to define the size of the image (alternatively)
Use the CSS float property to let the image float
Use the HTML <map> element to define an image-map
Use the HTML <area> element to define the clickable areas in the image-map
Use the HTML <img>'s element usemap attribute to point to an image-map
Loading images takes time. Large images can slow down your page. Use images carefully.
PNG > Calidad que jpeg.

Elementos HTML vacos
Son elementos HTML sin contenidos
<br> es un elemento vaco sin la etiqueta de finalizacin. <br> significa salto de lnea.
Los elementos vacos pueden ser cerrados en el inicio, as: <br />
HTML5 no require que elementos vacos sean cerrados, pero para estricta validacin o para XML
papers, se deben cerrar estos elementos.
Atributos HTML
Dan informacin adicional de los elementos HTML.
HTML elements can have attributes
Attributes provide additional information about an element

Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Atributo lang
El idioma del documento se declara con el atributo lang.
Declarar el idioma es importante para el acceso a las aplicaciones (lectores) y bsquedas de

ingeniera.
<!DOCTYPE html>
<html lang="en-US">
</html>
Las primeras 2 letras indican el idioma, si hay un dialecto, se usan dos letras ms.
Atributo Ttulo
Se puede agregar un ttulo a un prrafo como se muestra a continuacin:
<p title="About W3Schools">
W3Schools is a web developer's site.
It provides tutorials and references covering many aspects of web programming, including HTML,
CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
Cuando se ubique el mouse sobre el prrafo, se mostrar el ttulo que pusimos.
Comillas
Se recomienda siempre usar comillas cuando se utiliza atributo ttulo, ya que omitirlas puede
producir errores; cuando se pone un ttulo que hay varias palabras y no se usa comillas, solo se
muestra la primera palabra; es necesario usar comillas.
Las comillas dobles son las ms comunes en HTML, pero se pueden utilizar las simples.
En algunas situaciones, cuando el atributo por s mismo contiene comillas dobles, es necesario
poner comillas simples:
<p title='John "ShotGun" Nelson'>
Aqu va el prrafo con ttulo

</p>
O viceversa:
<p title="John 'ShotGun' Nelson">
Aqu va el prrafo 1
</p>
Resumen del Captulo
All HTML elements can have attributes
The HTML title attribute provides additional "tool-tip" information, es un metadato
The HTML href attribute provides address information for links
The HTML width and height attributes provide size information for images
The HTML alt attribute provides text for screen readers
At W3Schools we always use lowercase HTML attribute names
At W3Schools we always quote attributes with double quotes
Lista de Atributos HTML
Attribute Description
alt Specifies an alternative text for an image
disabled Specifies that an input element should be
disabled
href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element
(displayed as a tool tip)
HTML Reglas Horizontales
La etiqueta <hr> crea una lnea horizontal en html.
Elemento <meta>
Puede ser usado para definir un carcter u otra informacin acerca del documento HTML.
<style> es un metadato usado para definir el estilo de la hoja.

<link> es un metadato usado para definir estilos externos de la hoja.
Resumen
Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<head> Defines the document's head element
<h1> to <h6> Defines HTML headings
<hr> Defines a horizontal line
El elemento HTML <pre>
El elemento <pre> define un texto preformateado.
El texto que est dentro de <pre> y </pre> se muestra con una fuente fija (generalmente courier)
y preserva tanto espacios como lneas.
Resumen
Tag Description
<p> Defines a paragraph
<br> Inserts a single line break
<pre> Defines pre-formatted text
Estilos
Se utiliza el atributo style con la siguiente sintaxis:
style="propiedad:valor;"
<h2 style="color:red;">I am red</h2>
<h2 style="color:blue;">I am blue</h2>
Color de Fondo
Define un color de fondo
<body style="background-color:lightgrey;">
</body>
Color de Fondo de Texto (Resaltado)
<h2 style="background-color:red">
Background-color set by using red
</h2>
Color de fondo RGB
<h2 style="background-color:rgb(0,0,255)">
Background-color set by using rgb(0,0,255)
</h2>
Sombras
<h2 style="background-color:rgb(0,0,0);color:white">
</h2>
<h2 style="background-color:rgb(128,128,128);color:white">
</h2>
<h2 style="background-color:rgb(255,255,255);">
</h2>
Colores Hexadecimal
<h2 style="background-color:#00FFFF">
Background-color set by using #00FFFF
</h2>
Sombras Hexadecimal
<h2 style="background-color:#000000;color:white">
Background-color set by using #000000
</h2>
Color de texto
Define el color de texto para un element html
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Tipo de letra
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Tamao del texto
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160px;">This is a paragraph.</p>
Alineacin
<body style="text-align:center">
<h1 style="text-align:center;">Centered Heading</h1>
Internal Style
Define el estilo del documento en el encabezado <head>
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;font-family:courier}
h1 {color: blue;}
p {color: green;}
</style>
</head>
<body>
</body>
</html>
</body>
</html>
Estilo Externo: Se puede usar un estilo externo previamente guardado en un archivo .ccs
Para usar el estilo externo, se aade una lnea en <head>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
Se debe crear otro archive con la extensin css, este archivo no debe contener ninguna etiqueta
html, en este caso se crea el archivo styles.css en blog de notas:
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p{
color:green;
}
Fuentes CSS
Se puede definir tanto color, family (tipo de letra), size (tamao) en el encabezado <head>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
</body>
</html>
Box Model (Border) Caja

Todos los elementos HTML tienen una caja alrededor de ellos incluso si no son visibles.
border define un borde visible alrededor del elemento.
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px solid grey;
}
</style>
</head>
<body>
</body>
</html>
Padding: Espacio dentro del borde

<!DOCTYPE html>
<html>
<head>
<style>
p{
padding: 10px;
}
</style>
</head>
<body>
</body>
</html>
Margin: Espacio Fuera de Borde

<!DOCTYPE html>
<html>
<head>
<style>
p{
padding: 10px;
margin: 30px;
}
</style>
</head>
<body>
</body>
</html>
Id: Estilo especfico para un elemento

<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
color: blue;
}
</style>
</head>
<body>
<p id="p01">I am different.</p>
</body>
</html>
Class: Define un estilo especial para un elemento

<!DOCTYPE html>
<html>
<head>
<style>
p.error {
color: red;
}
</style>
</head>
<body>
<p class="error">I am different.</p>
<p class="error">I am different too.</p>
</body>
</html>
Ejemplo 2
<!DOCTYPE html>
<html>
<head>
<style>
p.intro {
background-color:black;
color:white;
border:1px solid grey;
padding:10px;
margin:30px;
font-size:150%;
}
</style>
</head>
<body>
<p class="intro">This is a paragraph.</p>
</body>
Se usa id para elementos singulares, class para grupos de elementos
Resumen
Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment
Resumen
Use the HTML style attribute for inline styling

Use the HTML <style> element to define internal CSS
Use the HTML <link> element to refer to an external CSS file
Use the HTML <head> element to store <style> and <link> elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for visible element borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
Formato de Elementos HTML
Diseados para mostrar tipos especiales de texto:
Bold text <b> </b>

Strong <strong> </strong>
Important text
Italic text <i> </i>
Emphasized text <em> </em>
Marked text <mark> <mark>
Small text <small> </small>
Deleted text <del> </del>
Inserted text <ins> </ins>
Subscripts <sub> </sub>
Superscripts <sup> </sup>
El navegador muestral igual <strong> como <b>, y <em> como <i>.
Sin embargo existe una diferencia: <b> e <i> define negrita y texto italico, pero <strong> y <em>
significa que el texto es importante.
Resumen
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
HTML Links
Se definen con la etiqueta <a>
<a href="url">link text</a>
<a href="http://link de la pgina">Nombre del vnculo</a>
Ejemplo:
<a href="http://www.w3schools.com">This is a link</a>
Links locales
Un link local (al mismo sitio web) se especifica con una url relativa (sin http://www...)
<a href="html_images.asp">HTML Images</a>
Colores en el link
Cuando se posiciona sobre el link, dos cosas suceden:
El mouse se convierte en mano
El color del link cambiar
Un link tendr las siguientes caractersticas:
Un link sin visitar est subrayado y es azul
Un link visitado est subrayado y es prpura
Un link activo est subrayado y es rojo.
Se puede cambiar el color de los links:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: yellow;
text-decoration: underline;
}
</style>
</head>
<body>
<p>You can change the default colors of links</p>
<a href="html_images.asp" target="_blank">HTML Images</a>
</body>
</html>
Tarjet
Con este atributo especificaremos donde abrimos el documento
<!DOCTYPE html>
<html>
<body>
<a href="http://www.w3schools.com/html/" target="_blank">Visit our HTML tutorial!</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window or
tab.</p>
</body>
</html>
Target Value Description

_blank Opens the linked document in a new window
or tab
_self Opens the linked document in the same frame
as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of
the window
framename Opens the linked document in a named frame
Ejemplo:
<a href="http://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>
Imagen como link

<!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the
image.</p>
</body>
</html>
border:0 se utiliza para prevenir que se despliegue un borde en la figura, en IE9 y anteriores.
Bookmark Links
til cuando es un documento largo, se puede saltar directamente a otro lugar:
<!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>
<h2 id="C4">Chapter 4</h2>

<h2>Chapter 5</h2>
<h2>Chapter 6</h2>
<h2>Chapter 7</h2>
<h2>Chapter 8</h2>
<h2>Chapter 9</h2>
<h2>Chapter 10</h2>
<h2>Chapter 11</h2>
<h2>Chapter 12</h2>
<h2>Chapter 13</h2>
<h2>Chapter 14</h2>
<h2>Chapter 15</h2>
<h2>Chapter 16</h2>
<h2>Chapter 17</h2>
</body>
</html>
Elementos de Citacin
<q>: citas cortas (comillas)
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
<blockquote>:Comillas en un texto largo:
<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
<abbr>: Abreviacin o acrnimo, las abreviaciones den informacin til a los navegadores,
sistemas de traduccin y bsqueda, si se pone el cursor sobre la palabra, se leer la abreviacin.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<address>: Informacin de contacto (autor, poseedor) de un documento o artculo. Esta

informacin se despliega usualmente en italic.
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<cite> : Elemento que define el ttulo de un trabajo

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
<bdo>: Bidirectional override, escribe las letras de derecha a izquierda.

<bdo dir="rtl">This text will be written from right to left</bdo>
Resumen
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the
author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another
source
<cite> Defines the title of a work
<q> Defines a short inline quotation
Elementos de cdigo Computacional
<kbd>: Define una entrada por teclado (keyboard input)

<kbd>File | Open...</kbd>
<samp>: Define una ejemplo de salida de un programa:

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
<code>: Elemento que define una parte de un cdigo de programacin, puede ser utilizada con
<pre>
<pre>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
</pre>
<var>: Elemento que define una variable

Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
Resumen
HTML Computer Code Elements
Tag Description
<code> Defines programming code
<kbd> Defines keyboard input
<samp> Defines computer output
<var> Defines a variable
<pre> Defines preformatted text
Comentarios
:


Tablas
Se define una tabla con la etiqueta <table>

Las tablas se dividen en filas (table rows) <tr>
Los datos de una tabla (table data) <td> Contenido de la tabla: puede contener texto,
imgenes,
Una fila tambin puede ser dividida en encabezados (table heading) <th>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Tabla con atributo borde
<table border="1" style="width:100%">

<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Tabla con color
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid blue;
}
</style>
</head>
<body>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Tabla con un solo borde (no doble)

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Espacio entre filas (pading)
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the padding to 5px.</p>
</body>
</html>
Tabla Ttulos
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Alinear ttulo derecha y datos en el centro

<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
td {
text-align: center;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Tabla con espacio del borde

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the border-spacing to 5px.</p>
</body>
</html>
Combinar filas
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two columns:</h2>

<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>
</body>
</html>
Combinar Columnas
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>

<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Tabla con ttulo

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Estilo especial para Tabla (color de Fondo, color de letra, fuente, tamao de fuente)
En general todas las tablas van a tener los primeros atributos, pero se definen otros atributos para
la tabla 01
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
color: blue;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Color de Letra en la tabla, distinto color de fondo dependiendo de filas pares o impares (ver)
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Resumen
Use the HTML <table> element to define a table
Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table
Listas
Listas no ordenadas <ul>

Por defecto se crean con vietas disco.
Para las listas se utiliza <li> </li> list tem
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Default Bullets</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Listas no ordenadas con atributo Style

Se utiliza para para aadir vietas:
Style Description
list-style-type:disc The list items will be marked with bullets
(default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc" >

<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Listas Ordenadas <ol>
Por defecto se crean los elementos numerados.
Para las listas se utiliza <li> </li>
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Atributos de las listas ordenadas
Se utiliza la palabra type

Type Description
type="1" The list items will be numbered with numbers
(default)
type="A" The list items will be numbered with uppercase
letters
type="a" The list items will be numbered with lowercase
letters
type="I" The list items will be numbered with uppercase
roman numbers
type="i" The list items will be numbered with lowercase
roman numbers
reverse En orden descendente
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1" reversed=reversed>

<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Listas Descriptivas
Se utiliza <dl> para listas descriptivas con:

<dt> Nombre del trmino
<dd> Descripcin del trmino
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Listas dentro de listas (ver)

Las listas pueden contener otras listas as como otros elementos HTML: imgenes, links, etc.
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<ol>
<li>ron</li>
<li>biela</li>
</ol>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Lista Horizontal
Despliga los elementos horizontalmente.
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>
Lista horizontal que cambia el color cuando pongo sobre un elemento y me dirige a otra pgina
(ver)
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li><a href="/html/default.asp">HTML</a></li>
<li><a href="/css/default.asp">CSS</a></li>
<li><a href="/js/default.asp">JavaScript</a></li>
<li><a href="/php/default.asp">PHP</a></li>
</ul>
</body>
</html>
Resumen
Use the HTML <ul> element to define an unordered list
Use the HTML style attribute to define the bullet style
Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Use the HTML <dl> element to define a description list
Use the HTML <dt> element to define the description term
Use the HTML <dd> element to define the description data
Lists can be nested inside lists
List items can contain other HTML elements
Use the CSS property display:inline to display a list horizontally
Bloques y Elementos en lnea
Un elemento en bloque siempre empieza en una nueva lnea y ocupa todo el ancho disponible (se
extiende hacia la izquierda y la derecha en la medida de lo que pueda)
Ejemplos de elemento en bloque

<div>
<h1> - <h6>
<p>
<form>
Elementos en lnea (misma lnea)
No empiezan en una nueva lnea y solo ocupan el ancho necesario:
Ejemplos de elemento en lnea
<span>
<a>
<img>
Elemento <div>
El elemento <div> es un elemento en bloque que se utiliza a menudo como un contenedor de

otros elementos HTML.
El elemento <div> no tiene ningn atributo necesario, pero el estilo (style) y las clases (class) son
comunes.
Cuando se utiliza junto con CSS, el elemento <div> se puede utilizar para bloques de estilo de
contenido:
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black; color:white; padding:200px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its
history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>
Elemento <span>
El elemento <span> es un elemento en lnea que se utiliza a menudo como un contenedor para un
pequeo texto.
El elemento <span> no tiene ningn atributo necesario, pero el estilo y la clase son comunes.
Cuando se utiliza junto con CSS, el elemento <span> se puede utilizar para piezas de estilo del
texto:
<!DOCTYPE html>
<html>
<body>
<h1>My <span style="color:red">Important</span> Heading</h1>
</body>
</html>
Resumen HTML Grouping Tags
Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
Clases HTML (Importante)
Clasificando elementos de bloque:
El atributo de clase HTML hace que sea posible definir estilos iguales para que elementos <div>
sean "iguales":
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
</div>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
<p>Situated on the Seine River, it is at the heart of the le-de-France region, also known as the
rgion parisienne.</p>
<p>Within its metropolitan area is one of the largest population centers in Europe, with over 12
million inhabitants.</p>
</div>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous
metropolitan area in the world.</p>
<p>It is the seat of the Japanese government and the Imperial Palace, and the home of the
Japanese Imperial Family.</p>
<p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million
people and the world's largest urban economy.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<h2>London</h2>
</div>
</body>
</html>
Clasificando elementos de lnea:

El atributo de clase HTML hace que sea posible definir estilos iguales para que elementos <span>
sean "iguales":
<!DOCTYPE html>
<html>
<head>
<style>
span.note {font-size:120%;color:red;}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>

<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.special {
color:red;
}
</style>
</head>
<body>
<h1>My <span class="special">Important</span> Heading</h1>
<p class="special">My important paragraph.</p>
</body>
</html>
Formularios
Utilizados para recoger datos de los usuarios.
El elemento <input> es el ms importante de los formularios:
Tiene variaciones dependiendo de sus atributos:
Type Description
text Defines normal text input
radio Defines radio button input (for selecting one of
many choices)
submit Defines a submit button (for submitting the
form)
Entrada text
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Entrada Radio button

<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Submit
Es un botn para enviar un formulario
Se utiliza en una pgina del servidor con una secuencia de comandos para el procesamiento de
datos de entrada.
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Atributo Accin
El atributo de accin define la accin que se realiza cuando se enva el formulario.
La forma habitual de presentar un formulario a un servidor, es mediante el uso de un botn de

envo.
Normalmente, el formulario se enva a una pgina web en un servidor web.
Si se omite el atributo de accin, la accin se establece en la pgina actual.
Atributo Mtodo
Especifica el mtodo HTTP a utilizar (GET oPOST).
<form action="action_page.php" method="get">
<form action="action_page.php" method="post">
Get: Si el envo del formulario es pasiva (como un motor de bsqueda consulta), y sin informacin
sensible.
Cuando se utiliza GET, los datos del formulario sern visibles en la direccin de la pgina:
action_page.php?firstname=Mickey&lastname=Mouse
Get se utiliza para tamaos pequeos de datos.
Post: Si la forma es la actualizacin de los datos, o incluye informacin sensible (contrasea).
Post ofrece una mayor seguridad ya que los datos presentados no estn visibles en la direccin de
la pgina.
<form action="action_page.php" method="get" target="_blank" accept-charset="UTF-8"

enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
</fieldset>
</form>
El atributo nombre: Para ser presentado correctamente, cada campo de entrada debe tener un
atributo de nombre.
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
</form>
El first name no tiene atributo nombre, as que este ser el resultado en el navegador:
Formulario de Datos Grupales:

<fieldset> grupo de elementos
<legend> ttulo
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
</fieldset>
</form>
Atributos formularios HTML

Para insetar atributos, usamos:
<form action="action_page.php" method="post" target="_blank" accept-charset="UTF-8"

enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
.
</form>
Resumen formularios:
Attribute Description
accept-charset Specifies the charset used in the submitted
form (default: the page charset).
action Specifies an address (url) where to submit the
form (default: the submitting page).
autocomplete Specifies if the browser should autocomplete
the form (default: on).
enctype Specifies the encoding of the submitted data
(default: is url-encoded).
method Specifies the HTTP method used when
submitting the form (default: GET).
name Specifies a name used to identify the form (for
DOM usage: document.forms.name).
novalidate Specifies that the browser should not validate
the form.
target Specifies the target of the address in the action
attribute (default: _self).
Elementos de Formulario
Elemento Input
Es el elemento ms importante de un formulario.
Elemento Select y option

Resulta una lista de opciones:
<select> lista de elementos seleccionables.

<option> Elementos de la lista.
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Opcion predefinida:
<p>You can preselect an option with the selected attribute.</p>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
Elemento rea de Texto

<textarea> Define una entrada de texto en mltiples lneas
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br>
</form>
Elemento Botn (Ver)
<button> define un botn clickeable
<body>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</body>
Alert: Crea mensajes de la pgina
Elemento Lista de Datos:

<datalist> Define una lista de una opcin predefinida para un elemento de entrada.
Necesita el atributo id.
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>
Elemento Keygen
El propsito del elemento <keygen> es proporcionar una forma segura de autenticar a los
usuarios.
El elemento <keygen> especifica un campo generador de par de claves en un formulario.
Cuando se enva el formulario, dos claves se generan, una privada y una pblica.
La clave privada se almacena localmente, y la clave pblica se enva al servidor.
La clave pblica se podra utilizar para generar un certificado de cliente para autenticar al usuario
en el futuro.
<body>
Username: <input type="text" name="user">
<br><br>
Encryption: <keygen name="security">
<br><br>
</form>
</body>
Elementos de Salida
<output> representa el resultado de un clculo. (como uno realizado por un script)
<form action="action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
</form>
Resumen:
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-
down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input
controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
Referencia:
http://www.w3schools.com/tags/

Crear Un Documento HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Crear Un Documento HTML

Transféré par

Droits d'auteur :

Formats disponibles

HTML

HTML is a markup language for describing web documents (web pages).

HTML stands for Hyper Text Markup Language

A markup language is a set of markup tags

HTML documents are described by HTML tags

Each HTML tag describes different document content

<h1>Mi primer encabezado</h1>

The DOCTYPE declaration defines the document type to be HTML

The text between <html> and </html> describes an HTML document

The text between <h1> and </h1> describes a heading

The text between <p> and </p> describes a paragraph

Usando esta descripcin, un navegador web puede mostrar un documento

HTML tags are keywords (tag names) surrounded by angle brackets:

HTML tags normally come in pairs like <p> and </p>

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

Slo se muestra la parte del cuerpo en el navegador.

Esta declaracin ayuda al navegador a mostrar la pgina web correctamente.

Para mostrar un documento correctamente, el navegador debe conocer el tipo y la versin.

Para la declaracin doctype, algunos casos son aceptados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

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

Abrir un editor de texto, en mi caso el Blog de Notas

Escribir el cdigo HTML

Encoding preferiblemente UTF-8 (ANSI es para caracteres de EEUU y de Europa Occidental).

Abrir el Documento HTML

Todo documento HTML debe empezar con la declaracin <!DOCTYPE html>

Un documento HTML en s empieza con <html> y termina con </html>

La parte visible del documento se encuentra entre <body> and </body>

Se definen entre <head> and </head>

El elemento heading <head> se lo pone entre la etiqueta <html> y el cuerpo <body>

Los ttulos se definen desde la etiqueta <h1> to <h6>

Los prrafos se definen con la etiqueta <p>

Las imgenes se definen con la etiqueta <img>

<img src="foto.jpg" alt="sinohayimagenaparece" width="104" height="142">

alt: Texto alternativo que se muestra cuando la imagen no est disponible.

Siempre se debe especificar el tamao de la imagen.

Imgenes de otras carpetas

Se requiere especificar la carpeta donde se encuentra la imagen:

Imgenes en otro servidor

Imgenes Animadas (Gif)

Son imgenes .gif

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Usar una imgen como link

Se debe poner la etiqueta <img> dentro de la etiqueta <a>:

La imagen aparecer a la derecha o a la izquierda:

<p><strong>Float the image to the right:</strong></p>

<p><strong>Float the image to the left:</strong></p>

El atributo <map> se relaciona con la imagen.

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

Use the HTML <img> element to define an image

PNG > Calidad que jpeg.

Son elementos HTML sin contenidos

Dan informacin adicional de los elementos HTML.

HTML elements can have attributes

Attributes provide additional information about an element

Attributes come in name/value pairs like: name="value"

El idioma del documento se declara con el atributo lang.

Declarar el idioma es importante para el acceso a las aplicaciones (lectores) y bsquedas de

Se puede agregar un ttulo a un prrafo como se muestra a continuacin:

<p title="About W3Schools">

W3Schools is a web developer's site.

Cuando se ubique el mouse sobre el prrafo, se mostrar el ttulo que pusimos.

<p title='John "ShotGun" Nelson'>