Introducción Al HTML

Introduccin al HTML
Qu significa HTML? y un primer ejemplo de sitio.
Qu es HTML?
HTML (HyperText Markup Language) o "Lenguaje para Marcado de

Hipertexto".
HTML es el lenguaje que te permite describir y dar forma a ts pginas Web.
Publica tus propias pginas con fotos, listas, tablas, etc.
Obtn informacin de los visitantes de tu sitio.
Disea los formularios que te permitirn contactar tus futuros clientes.
Crea un sitio para vender ts productos o servicios.
Incluye video clips, msica, sonidos, y otras aplicaciones que darn vida a ts
pginas Web
Qu conocimientos previos debes poseer?

Para estudiar HTML no se requiere de conocimientos previos en programacin.
Es muy simple de aprender ya que no es un lenguaje de programacin sino que es un
lenguaje de marcas.
Los archivos HTML
Los archivos HTML deben tener una extensin htm o html (ej. misitio.htm o
misitio.html).
Para crear un archivo HTML solo hace falta un editor de texto.
Un archivo HTML est compuesto por etiquetas.
Las etiquetas le dicen al navegador(Ej: Internet Explorer, Firefox, Google
Chrome, Opera, Safary, etc.) como mostrar la pgina Web.
Vamos a hacer nuestro primer sitio!

Si ests usando Windows, abre el "Block de Notas".
Si usas Mac, abre "Simpletext".
Ejemplo
Escribe en el mismo, el siguiente texto:
Cdigo
Resultado
<html>
<head>
<title>Mi primera pgina Web</title>
</head>
Hola a todos.
<body>
Hola a todos.
</body>
</html>
Guarda el archivo como "pagina1.html" (las extensiones ".htm" o ".html" tienen el
mismo significado y nos indican que se trata de un archivo HTML).
Abre el navegador Internet(Internet Explorer, Firefox, Chrome, etc.).
Selecciona "File" y luego "Open".
Se abrir una ventana, selecciona "Browse" y ubica el archivo que acabas de

guardar -"pagina1.html"- elgelo y presiona "Open".
Ahora t ves la direccin, por ejemplo "C:\My Documents\pagina1.html".
Presiona "OK" y el navegador mostrar la pgina recin creada.
Expliquemos el ejemplo
<html> --> Indica al navegador que abre un archivo HTML.
<head> --> Apertura de la cabecera del documento. Seccin que no se muestra en la
pantalla.
<title>Mi primera pgina Web</title> --> Ttulo de la pgina.
</head> --> Cierre de la cabecera del documento.
<body> --> Apertura del cuerpo del documento. Esta seccin aparece en la pantalla.
Hola a todos. --> Texto que va a ser mostrado por el navegador.
</body> --> Cierre del cuerpo del documento.
</html> --> Cierre del archivo HTML
La primera etiqueta del archivo es <html>. Esto le indica al navegador que se trata de
un archivo HTML. Para cerrar el archivo usamos </html>. Todo lo que se encuentra
entre las dos etiquetas es el cdigo HTML de la pgina.
Luego vemos la etiqueta <head>. Lo que sigue a continuacin hasta su
cierre </head>, es la cabecera del documento y no se muestra en la pantalla. Aqu
colocamos informacin tal como el ttulo de la pgina(<title>Mi primera pgina
Web</title>), palabras claves para los motores de bsqueda, una descripcin de la
pgina y otros datos del documento.
Entre las etiquetas <body> y </body> se encuentra el cuerpo del documento y el
contenido que se coloque en esta seccin es el que veremos en pantalla, como por
ejemplo, "Hola a todos.".
Nota: observa que todas las etiquetas de cierre se diferencian de las de apertura por
llevar "/"antes del nombre.
La estructura del sitio
En los prximos captulos, encontrars una explicacin sobre los distintos elementos
que conforman HTML, con una completa gua de referencias y mltiples ejemplos que
harn ms simple el proceso de aprendizaje.
Elementos y etiquetas de
HTML
Las etiquetas HTML son las encargadas de dar forma a nuestro sitio.
Los elementos
Los elementos son declaraciones para visualizar o dar forma a una pgina Web.
Las etiquetas
Las etiquetas(en ingls: tags) son marcas insertadas en un documento HTML para
proporcionar informacin sobre una unidad o contenido.
Reglas bsicas
Las etiquetas estn encerradas entre los signos "<" y ">".
Generalmente vienen en pares <p> y <p>.
La primera es de apertura y la segunda de cierre.
El texto que se encuentra entre dos etiquetas es el contenido del elemento.
Las etiquetas no son sensibles a las maysculas y minsculas, o sea <b> es lo

mismo que <B>.
Etiquetas de HTML
Veamos un ejemplo.
<html>
<head>
<title>Una pgina Web</title>
</head>
<body>
Hola a todos. <b>Este texto es en negrita</b>
</body>
</html>
Esta es una etiqueta HTML:
<b>Este texto es en negrita.</b>
El elemento HTML comienza con la etiqueta de apertura <b>(etiqueta que nos
muestra el texto en negrita).
El contenido de dicho elemento es: Este texto es en negrita.
El fin del elemento HTML es con la etiqueta de cierre </b>.
Otro elemento HTML en el ejemplo es:

<body>
</body>
EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que
define el cuerpo del documento).
El contenido de dicho elemento es: Hola a todos. <b>Este texto es en
negrita</b>.
El fin del elemento HTML es con la etiqueta de cierre </body>.
Qu son los atributos de las etiquetas?

Muchas etiquetas llevan atributos. Los mismos proveen de mayor informacin a los
elementos HTML.
Los atributos siempre van con la estructura: nombre="valor".
Los atributos siempre van en la etiqueta de apertura.
Los valores siempre hay que ponerlos entre comillas.

Un ejemplo de los atributos sera:
Ejemplo
Cdigo
<body bgcolor="#FFFF00">
</body>
Resultado
Hola a todos. Este texto es en negrita
En la etiqueta <body> podemos observar el atributo bgcolor=(color de fondo) y el

valor"#FFFF00"(representa el color amarillo en hexadecimal).
Esto quiere decir que el color de fondo de la pgina ser amarillo.
Un consejo con respecto al uso de minsculas.

Si bien HTML acepta tanto etiquetas en mayscula <B> como en minscula <b>, el
World Wide Web Consortium (W3C) recomienda el uso de minsculas. Adems XHTML
(la siguiente versin de HTML) acepta solo minsculas.
Es por eso que recomendamos acostumbrarse a usar minsculas cuando escribas tus
cdigos HTML.
Etiquetas bsicas de HTML

Las etiquetas ms simples y de uso ms comn en HTML.
Etiquetas Bsicas
Headings
Nos definen el tamao de un ttulo o cabecera.
<h1> nos d el tipo de letra ms grande.
<h6> nos d el tipo de letra ms pequeo.
HTML agrega automaticamente un espacio antes y despus de cada ttulo.
<h1> al ser usado como ttulo de una pgina Web, es de suma importancia ya que es
uno de los parmetros que Google y dems buscadores tiene en cuenta, a la hora de
indexar un sitio web.
Ejemplo
Cdigo
<html>
Resultado
<head>
<title>Headings</title>
</head>
Heading 1
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Prrafos
Los prrafos se definen con la etiqueta <p>.
Ejemplo
Cdigo
<html>
<head>
<title>Prrafos</title>
</head>
Resultado
Este es el primer prrafo.
Y este es el segundo prrafo.
<body>
<p>Este es el primer prrafo.</p>
<p>Y este es el segundo prrafo.</p>
</body>
</html>
Comentarios
La etiqueta  se utiliza para insertar un comentario dentro del cdigo que
estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los
comentarios nos sirven para explicar mejor el cdigo y son de gran ayuda en el
momento que necesitemos editarlo.

* Nota que el signo de exclamacin se coloca solo al principio del cdigo.
Salto de lnea
El salto de lnea est definido con la etiqueta <br>. Es utilizado cuando queremos
cortar una lnea sin necesidad de terminar con el prrafo. La etiqueta <br> obliga a
saltar de lnea dondequiera que la ubiquemos.
Ejemplo
Cdigo
Esto es <br> un salto de l<br>nea.
Resultado
Esto es
un salto de l
nea.
Trazar una lnea

La etiqueta <hr> nos permite trazar una lnea horizontal como las que separan las
distintas secciones de este tutorial.
La etiqueta <hr> no tiene cierre.
Ejemplo
Cdigo
Resultado
<hr>
Tabla con las etiquetas bsicas

Etiquetas
Descripcin
<h1> a <h6>
Define el tamao de los encabezados
<p>
Define un prrafo
Ej.

Define un comentario
<br>
Define un salto de lnea
<hr>
Define una lnea horizontal
Formato de texto con HTML

Elige como decorar y visualzar los textos de tu sitio.
Formato bsico del texto

HTML nos permite definir el formato de visualizacin del texto en la pantalla.
Muy til para cuando queramos resaltar o enfatizar un texto en especial.
Tambin muy usado para subrayar o escribir subndices o superndices.
Estos, son solo algunos ejemplos de lo que podemos hacer con estos elementos
Para ello utilizamos las siguientes etiquetas:
Ejemplo
Cdigo
<b>Texto en negrita</b>
<big>Texto grande</big>
<em>Texto enfatizado</em>
<i>Texto en itlica</i>
<small>Texto pequeo</small>
<strong>Texto fuerte</strong>
<sub>Texto subndice</sub>
<sup>Texto superndice</sup>
<ins>Texto subrayado</ins>
<del>Texto tachado</del>
<tt>Texto teletipo</tt>
Resultado
Texto normal Texto en negrita
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Texto
Texto
normal
normal
normal
normal
normal
normal
normal
normal
normal
Texto grande
Texto enfatizado
Texto en itlica
Texto pequeo
Texto fuerte
Texto subndice
Texto superndice
Texto subrayado
Texto tachado
Texto normal Texto teletipo
Etiquetas para dar forma al texto

Etiquetas
Descripcin
<b>
Define un texto en negrita
<big>
Define un texto grande
<em>
Define un texto enfatizado
<i>
Define un texto en itlica
<small>
Define un texto pequeo
<strong>
Define un texto fuerte
<sub>
Define un texto subndice
<sup>
Define un texto superndice
<ins>
Define un texto subrayado
<del>
Define un texto tachado
<tt>
Define un texto de teletipo
<s>
Define un texto tachado. Desaprobado. Use <del> en su lugar
<strike>
Define un texto tachado. Desaprobado. Use <del> en su lugar
<u>
Define un texto subrayado. Desaprobado. Use <ins> en su lugar
Etiquetas de "Texto estructurado"

Estas estiquetas son usadas comunmente para mostrar cdigos de programacin.
Etiquetas
<code>
Descripcin
Define un texto en cdigo de computadora
<kbd>
Define un texto del teclado
<samp>
Define un texto ejemplo de cdigo de computadora
<var>
Define una variable
<pre>
Define un texto preformateado
<listing>
Desaprobado. Use <pre> en su lugar
<plaintext>
<xmp>
Etiquetas de citaciones y definiciones

Etiquetas
Descripcin
<abbr>
Indica una forma abreviada (p.ej., WWW, HTTP, etc.)
<acronym>
Indica un acrnimo (p.ej., WAC ,radar, autobs, etc.)
<address>
Define la informacin sobre el autor
<bdo>
Define la direccin del texto (p.ej., de izq. a der., de der. a izq.)
<blockquote>
Designa una cita larga
<q>
Designa una cita corta
<cite>
Contiene una cita o una referencia a otras fuentes
<dfn>
Indica que aqu es donde se define el trmino encerrado
Caracteres Especiales en HTML

Uso de acentos, signos de apertura de interrogacin y exclamacin, ees, espacio
en blanco, etc.
Caracteres especiales
Muchas veces necesitamos incluir en nuestros textos, signos que tienen un significado
especial en HTML
(por ej. "<" - menor que).
Para poder mostrarlos, debemos usar su nombre en cdigo.
Los nombres de las entidades estn compuestos por el signo(&), luego el nombre de la
entidad y al final (";" - punto y coma).
Los nmeros de estos caracteres estn compuestos por (&), luego (# - numeral), el
nmero de la entidad y al final (";" - punto y coma).
Por ejemplo para mostrar el signo "<" debemos escribir < o <.
El uso ms comn de los caracteres especiales es el espacio en blanco. Si en un texto
figuran 5 espacios en blanco seguidos, HTML automaticamente borra 4.
Para ingresar espacios en blanco usamos " " y HTML los dejar en su lugar.
Otro uso muy frecuente es el de insertar acentos en el cdigo html por medio de los
nmeros de las entidades
Caracteres especiales de uso frecuente

Resultado
Descripcin
Nombre
Nmero
Espacio en blanco

<
Menor que
<
<
>
Mayor que
>
>
&
&
&
"
Comillas
"
"
Apertura signo de exclamacin
¡
¡
Apertura signo de interrogacin
¿
¿
Marca registrada
®
®
Derecho de autor
©
©
Euro
€
€
a minscula con acento
á
á
e minscula con acento
é
é
i minscula con acento
í
í
o minscula con acento
ó
ó
u minscula con acento
ú
ú
minscula
ñ
ñ
u minscula con diresis
ü
ü
A mayscula con acento
Á
Á
E mayscula con acento
É
É
I mayscula con acento
Í
Í
O mayscula con acento
Ó
Ó
U mayscula con acento
Ú
Ú
mayscula
Ñ
Ñ
U mayscula con diresis
Ü
Ü
Si quiere ver la gua completa de todas los caracteres especiales dirijase a HTML Gua
de referencia de los caracteres especiales.
Enlaces en HTML
La propiedad ms importante de Internet, es la posibilidad de conectarse los unos
con los otros.
Los Enlaces o Links

Los enlaces o links(en Ingls) nos permiten conectarnos con otros documentos:
una imagen
un video
un archivo de sonido
sitios en la web(otra pgina web)
mandar un email
Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la
palabraanchor(ancla).
La etiqueta <a> tiene como cierre </a>.
Sintaxis
<a atributo="valor">Texto del enlace</a>
Ejemplo
Vamos a crear un enlace hacia la home de Virtualnauta.com
Cdigo
<body>
<a href="/http://www.virtualnauta.com/">La home de Virtualnauta</a>
</body>
Resultado
La home de Virtualnauta
EL atributo target
Se utiliza para definir donde queremos que se abra el documento al presionar sobre el
enlace.
Ejemplo
Vamos a abrir el documento en una nueva pgina del navegador.
Cdigo
<body>
<a href="http://www.vitualnauta.com/" target="_blank">La home de Virtualnauta</a>
</body>
Resultado
La home de Virtualnauta
EL atributo name
Este atributo se usa para definir una determinada ubicacin dentro de la pgina.
Supongamos que definimos un destino de vnculo llamado "destino-uno" en el archivo
"uno.html".
Sintaxis
...texto antes del destino de vnculo...
<a name="destino-uno">Captulo 1</a> 
...texto despus del destino de vnculo...
Y en otra parte de la pgina, del mismo sitio o de otro sitio, creamos un enlace
a Captulo 1. Para ello utilizamos el signo # seguido del nombre del enlace.
<a href="http://www.misitio.com/uno.html#destino-uno">Ir al Captulo 1</a>
O en caso que el enlace est definido en el mismo documento:
<a href="/#destino-uno">Ir al Captulo 1</a>
Creando un enlace a un email

Se utiliza en caso que queramos que un enlace mande un email.
En el momento que presionamos dicho link se abrir automaticamente el programa de
email que tenemos definido por defecto.
Ejemplo
Cdigo
<body>
<a href="/mailto: alguien@gmail.com">Mandar email</a>
</body>
Resultado
Mandar email
mailto: nos indica la direccin email a la que va dirigida, en este
ejemplo: alguien@gmail.com.
Un enlace a partir de una imagen

Muchas veces queremos usar una imagen como enlace a otro documento. Para ello
debemos colocar la etiqueta <img> entre las etiquetas <a> y </a> en lugar del
texto.
Ejemplo
Cdigo
<body>
<a href="http://www.google.com/"><img src="/../graficos/google.gif"></a>
</body>
Resultado
Etiquetas y atributos de los enlaces

Etiqueta
s
Atributo
s
Valor
<a>
Descripcin
Define un vnculo
href
URL
Direccin URL a conectar.
Ej.
hreflang
cdigo de
lenguaje
Especifica el lenguaje de la URL.
name
nombre de
seccin
Para crear un marcapginas dentro de un

documento.
rel
alternate
Especifica la relacin entre el documento actual y

el destino del vnculo.
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
apendix
help
bookmark
nofollow
rev
alternate
designates
Especifica la relacin entre el destino del vnculo y

el documento actual(vnculo inverso).
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
apendix
help
bookmark
coords
coordenadas
shape
Especifica las coordenadas de la superficie que

contiene el enlace.
Define la forma del rea.
rect
Usamos coords="izquierda, arriba, derecha, abajo"
rectangle
circ
Usamos coords="centro x, centro y, radio"
circle
poly
Usamos coords="x1, y1, x2, y2, .., xn, yn"
polygon
target
type
Indica donde abrir el URL.

_blank
El URL se abrir en una nueva ventana.
_parent
El URL se abrir en el frameset padre.
_self
El URL se abrir en el mismo frame donde fue

apretado.
_top
El URL se abrir en una ventana de tamao

completo.
tipo de
contenido
Especifica el tipo de contenido a conectar.
Atributos estndard
id, class, title, style, dir, lang, tabindex, accesskey
Si desea una descripcin completa, dirjase a: atributos estndard.
Eventos intrnsecos
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
Si desea una descripcin completa, dirjase a: eventos intrnsecos.
Frames en HTML
Dividimos la pgina en partes ms pequeas y en cada una de ellas visualizamos
documentos diferentes.
Los Frames
Los frames(marcos en espaol) permiten a los autores presentar documentos con
vistas mltiples.
Esto posibilita mantener cierta informacin visible mientras otras vistas se desplazan o
se sustituyen.
Cada vista es un documento independiente de los otros.
La etiqueta frameset
La etiqueta <frameset> se usa para dividir la ventana del navegador en diferentes
marcos y a cada uno asignarle una medida distinta.
Cada frameset define un grupo de filas y columnas.
Sintaxis
<frameset rows="valor1, valor2, valor_n" cols="valor3, valor4, valor_n">
...el resto de la definicin...
</frameset>
Los posibles valores para definir el tamao de las filas y de las columnas
pixels | % | *
La etiqueta frame
La etiqueta <frame> asigna que documento colocaremos en cada marco.
Sintaxis
<frameset cols="25%,75%"> 
<frame src="/URL_1">
<frame src="/URL_2">
</frameset>
Nota: La etiqueta <frame> no debe llevar etiqueta de cierre
La etiqueta noframes
La etiqueta <noframes> muestra un texto para los navegadores que no soportan
frames.
<noframes> se coloca dentro de la etiqueta frameset
si el navegador soporta frames, el texto del <noframes> no se mostrar
si usamos la etiqueta <noframes> el texto de la misma debe ir entre las

etiquetas <body> </body>
<frameset rows="25%,75%">
<noframes>
<body>
Su navegador no soporta frames
</body>
</noframes>
<frame src="/frame1.htm">
<frame src="/frame2.htm">
</frameset>
La etiqueta iframe
La etiqueta <iframe> se usa para crear un frame en lnea que contiene otro
documento.
El iframe puedo mostrar una ventana que contenga otra pgina Web dentro de la
pgina que estamos diseando
Sintaxis
<iframe src="/URL del sitio que desea mostrar">
Ejemplo
Cdigo
<iframe src="/http://www.virtualnauta.com" width="100%">
</iframe>
Resultado
En este ejemplo podemos observar que la ventana del resultado nos est mostrando la
pgina principal de Virtualnauta.com.
Etiquetas y atributos de los marcos

Etiquetas
Atributos
Valor
<frameset>
Descripcin
Organiza ventanas mltiples.
cols
pixels
%
Asigna el nmero y el tamao de las

columnas.
*
rows
pixels
Asigna el nmero y el tamao de las filas.
%
*
<frame>
Define una subventana.

frameborder
0
1
Especifica si se mostrar o no el borde

alrededor del frame.
longdesc
URL
URL con una larga descripcin del contenido

del frame (se usa para navegadores que no
soportan frames).
marginheight
pixels
Define el margen superior e inferior del

frame.
marginwidth
pixels
Define el margen izquierdo y derecho del

frame.
Ej
name
frame_name
Define un nombre para el frame.
noresize
noresize
No le permite al usuario modificar el tamao

del frame.
scrolling
yes
Determina la accin de la barra de

desplazamiento.
no
auto
src
URL
Archivo que va a ser mostrado en el frame.
<noframes>
Muestra un texto para los navegadores que

no soportan frames.
<iframe>
Crea un frame en lnea que contiene otro

documento.
align
left
Alineacin del iframe con respecto al texto.
right
top
middle
bottom
frameborder
0
1
height
pixels
Especifica si se mostrar o no el borde

alrededor del iframe.
Define la altura del iframe.
%
longdesc
URL
URL con una larga descripcin del contenido

del iframe (se usa para navegadores que no
soportan frames).
marginheight
pixels
Define el margen superior e inferior del

iframe.
marginwidth
pixels
Define el margen izquierdo y el derecho del

iframe.
name
nombre
Define un nombre para el iframe.
scrolling
yes
Determina la accin de la barra de

desplazamiento.
no
auto
src
URL
Archivo que va a ser mostrado en el iframe.
width
pixels
Define el ancho del iframe.
Atributos estndard
id, class, title, style, lang
Si deseas una descripcin completa, dirgete a: atributos estndard.
Eventos intrnsecos
onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover,

Si deseas una descripcin completa, dirgete a: eventos intrnsecos.
Tablas de HTML
Las usamos para componer un sitio o simplemente como tabla de datos.
Las tablas
Las tablas son herramientas muy tiles para presentar datos en forma de tablas y para
el diseo de pginas y ubicacin de textos y grficos dentro de las mismas.
Caractersticas de las tablas

Definimos las tablas con la etiqueta <table>.
La tabla est dividida en filas definidas con la etiqueta <tr>.
Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>.
Las celdas pueden contener texto, imgenes, formularios, listas, otras tablas, etc.
Sintaxis
<table>
<tr>
<td>contenido celda 1</td>
<td>contenido celda 2</td>
</tr>
</table>
Ejemplo
Vamos a crear una pequea tabla para ver su comportamiento
Cdigo
Resultado
<table border="1px">
<tr>
<td>Nombre</td>
<td>Apellido</td>
</tr>
<tr>
<td>Pedro</td>
<td>Garcia</td>
</tr>
</table>
Nombre
Apellido
Pedro
Garcia
Bordes de las tablas

Para que se visualicen los bordes de una tabla, debemos agregar el
atributo border junto con el valor expresado en pixels, de lo contrario no se vern los
bordes que dividen las celdas de la tabla.
Ejemplo
Cdigo
<tr>
<td>Borde</td>
<td>3 pixels</td>
</tr>
</table>
Resultado
Borde
3 pixels
Veamos un ejemplo sin bordes
Ejemplo
Cdigo
<table>
<tr>
<td>Esta tabla es</td>
<td>Sin bordes</td>
</tr>
</table>
Resultado
Esta tabla es
Sin bordes
Nota: al no colocar el atributo border, los bordes no se visualizan pero la tabla existe.
Encabezados de las tablas

Los encabezados de una tabla se definen con la etiqueta <th>.
Ejemplo
Cdigo
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
<td>Pedro</td>
<td>Garcia</td>
</tr>
<tr>
<td>Juan</td>
<td>Perez</td>
</tr>
</table>
Resultado
Nombre
Apellido
Pedro
Garcia
Juan
Perez
La etiqueta <th> siempre muestra los encabezados remarcados.
Mrgenes de las celdas

Es el espacio que se encuentra entre los bordes de la celda y su contenido.
Definimos los mrgenes con el atributo cellpadding.
Ejemplo
Cdigo
<table border="1px" cellpadding="20px">
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
<td>Pedro</td>
Resultado
Nombre
Pedro
Apellido
Garca
<td>Garcia</td>
</tr>
</table>
Nota: en este ejemplo podemos observar que el atributo cellpadding deja 20 pixels mnimo
entre las palabras dentro de cada celda y los bordes de las mismas.
Espaciado entre celdas

Es el espacio que se encuentra entre celda y celda.
El mismo est definido con el atributo cellspacing.
Ejemplo
Cdigo
Resultado
<table border="1px" cellspacing="15px">

<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
<td>Pedro</td>
<td>Garcia</td>
</tr>
</table>
Nombre
Pedro
Apellido
Garcia
Nota: en este ejemplo el atributo cellspacing deja un espacio de 15 pixels entre las celdas de la
tabla.
Etiquetas y atributos de las tablas

Etiquetas
Atributos
Valor
<table>
Descripcin
Define una tabla.
align
Desaprobado
left
center
right
Alnea las tablas. Use la propiedad position

de CSS en su lugar.
Ej
bgcolor
Desaprobado
rgb(x,x,x)
Color de fondo de las tablas. Use la

propiedad background de CSS en su lugar.
#xxxxxx
nombre_color
border
pixels
Espesor del borde de la tabla.
cellpadding
pixels
Espacio entre la pared de la celda y el

contenido.
%
cellspacing
pixels
Espacio entre celdas.
%
frame
void
Especifica cual de los bordes alrededor de

la tabla ser visible.
above
below
hsides
lhs
rhs
vsides
box
border
rules
none
groups
rows
cols
all
Especifica las lneas divisorias horizontales

y verticales.
summary
texto
Resumen del contenido de la tabla para

navegadores sin visualizador.
width
Especifica el ancho de la tabla.
pixels
<tr>
Define una fila.

align
right
Alnea horizontalmente el texto en la

celda.
left
center
justify
char
bgcolor
Desaprobado
rgb(x,x,x)
Color de fondo de las celdas. Use la

#xxxxxx
nombre_color
char
carcter
Especifica que un carcter ("."o",") acte

como eje de alineacin.
Nota: usar junto con align="char".
charoff
pixels
Especifica la distancia entre el borde y el

primer carcter de alineacin en cada
lnea.
%
valign
top
Especifica la posicin vertical de los datos

dentro de la celda.
middle
bottom
baseline
<td>
<th>
Define una celda.

Define los encabezados de una tabla.
abbr
texto abreviado
Especifica una versin abreviada del

contenido de una celda.
align
left

celda.
right
center
justify
char
axis
nombre de la
categora
Sita una celda en categoras

conceptuales.
bgcolor
Desaprobado
rgb(x,x,x)
Color de fondo de las celdas. Use la

#xxxxxx
nombre_color
char
carcter
Especifica que un carcter acte como eje

de alineacin.
charoff
pixels

lnea.
%
colspan
nmero
Indica el nmero de columnas que esta

celda debe anexar.
headers
lista de nombres Lista de celdas de encabezado que

de celdas
proporcionan informacin de encabezado
para la celda de datos actual.
height
Desaprobado
pixels
Especifica la altura de la celda. Use la

propiedad height de CSS en su lugar.
nowrap
Desaprobado
nowrap
Si est presente, deshabilita el ajuste

automtico de lneas. Use CSS en su lugar.
rowspan
nmero
Indica el nmero de filas que esta celda

debe anexar.
scope
col
colgroup
Este atributo especifica el conjunto de

celdas de datos para las cuales la celda de
encabezado actual proporciona informacin
de encabezado.
row
rowgroup
valign
top

dentro de una celda.
middle
bottom
baseline
width
Desaprobado
pixels
Especifica el ancho de la celda. Use la

propiedad width de CSS en su lugar.
%
<caption>
Define el ttulo de la tabla.

align
Desaprobado
top
bottom
Ubicacin del ttulo con respecto a la tabla.

Use la propiedad caption-side de CSS en
su lugar.
left
right
<colgroup>
<col>
Crea un grupo explcito de columnas.

Permite a los autores compartir atributos
entre varias columnas.
align
right
left
Alnea horizontalmente el contenido en el

grupo de columnas.
center
justify
char
char
carcter
de alineacin.
charoff
pixels
%

lnea.
span
nmero
Especifica el nmero de columnas de un

grupo de columnas.
valign
top
Alnea verticalmente el contenido en el

grupo de columnas.
middle
bottom
baseline
width
Define el ancho del grupo de columnas.
pixels
longitud relativa
<thead>
<tbody>
<tfoot>
Las filas de una tabla pueden agruparse en

una cabecera de tabla <thead>, un pie de
tabla <tfoot> y una o ms secciones de
cuerpo de tabla <tbody>.
align
right
left

celda.
center
justify
char
char
character

de alineacin.
charoff
pixels

lnea.
valign
top
middle

dentro de la celda.
bottom
baseline
Atributos estndard
id, class, title, style, dir, lang
Eventos intrnsecos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup
Listas - Listados
Las listas son ideales para el diseo de mens.
Las listas
Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura.
Tenemos tres tipos de listas:
Ordenadas.
Desordenadas.
De definicin.
Listas Ordenadas
Son aquellas que ordenan la lista anteponiendo nmeros ,letras o signos.

Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de
la misma, utilizamos la etiqueta <li>.
Ejemplo
Vamos a crear una lista ordenada
Cdigo
Resultado
1.
2.
3.
<ol>
<li>Naranjas</li>
<li>Manzanas</li>
<li>Bananas</li>
</ol>
Naranjas
Manzanas
Bananas
Dentro de cada Item se pueden agregar imgenes, prrafos, otras listas, etc.
Listas Desordenadas
Exponen la lista anteponiendo un punto, cuadrado o tringulo negro.
Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items
de la misma utilizamos la etiqueta <li>.
Ejemplo
Cdigo
<ul>
<li>Tomates</li>
<li>Pepinos</li>
<li>Cebollas</li>
</ul>
Resultado
Tomates
Pepinos
Cebollas
Listas de definicin
Se utilizan para definir trminos.
Las listas de definicin se representan con la etiqueta <dl>.
Los trminos de las mismas con <dt>.
La definicin de esos trminos comienza con <dd>.
Ejemplo
Cdigo
<dl>
<dt>Chocolate</dt>
<dd>Elaborado a base de cacao</dd>
Resultado
Chocolate
Elaborado a base de cacao
Caramelo
Elaborado a base de azucar
<dt>Caramelo</dt>
<dd>Elaborado a base de azcar</dd>
</dl>
Dentro de las etiquetas <dd> se pueden agregar imgenes, prrafos, otras listas, etc.
Etiquetas y atributos de las listas

Etiquetas
Atributos
Valor
<ol>
Descripcin
Define una lista ordenada.
compact
Desaprobado
Representa la lista de un modo ms

compacto. Use las propiedades de las
listas en CSS en su lugar.
start
Desaprobado
nmero del 1
objeto
Especifica el nmero del primer objeto de

una lista. Use las propiedades de las listas
en CSS en su lugar.
type
Desaprobado
Especifica el estilo de un objeto de lista.

Use las propiedades de las listas en
CSSen su lugar.
a
I
i
1
<ul>
Define una lista desordenada.

compact
Desaprobado
type
Desaprobado
Representa la lista de un modo ms

compacto. Use las propiedades de las
listas en CSS en su lugar.
disc
square

CSSen su lugar.
circle
<li>
Define el comienzo del Item.

type
Desaprobado
disc
square

CSSen su lugar.
circle
A
a
I
i
1
value
Desaprobado
nmero del
objeto
Establece el nmero del objeto de lista

actual. Use las propiedades de las listas
Ej.
en CSS en su lugar.
<dl>
Define una lista de definicin.
<dt>
Trminos de los objetos de lista.
<dd>
Descripcin de los objetos de lista.
<dir>
Desaprobado
Acta como <ul>.
<menu>
Desaprobado
Acta como <ul>.
Atributos estndard
Si deseas una descripcin completa, dirjete a: atributos estndard.
Eventos intrnsecos
Si desea una descripcin completa, dirjete a: eventos intrnsecos.
Formularios en HTML
Gua prctica de como disear los formularios HTML para tu sitio.
Los formularios
Los formularios son usados para que el usuario ingrese datos.
Esos datos son enviados a un documento, que se encuentra en un servidor, para que
los procese (por ej., a un servidor web, a un servidor de email, etc.).
La etiqueta form
La etiqueta <form> se utiliza para definir un formulario.
El atributo action es obligatorio y nos indica el documento que procesar los datos del
formulario enviado.
Tambin contamos con el atributo method que nos define el mtodo por el cual se
enviarn los datos del usuario al servidor.
Sintaxis
<form action="URL" method="valor">

...
</form>
La etiqueta input
Nos define el registro donde el usuario puede ingresar los datos.
Los usuarios interaccionan con los formularios a travs de las llamados controles.
Tipos de controles:
Botones (buttons)
Casillas de verificacin (checkboxes)
Radiobotones (radio buttons)
Menes (menus)
Entrada de texto (text input)
Seleccin de ficheros (file select)
Controles ocultos (hidden controls)
Controles tipo objeto (object controls)

El atributo type especifica el tipo de control a crear.
Sintaxis
</form>
<input type="control" atributo="valor">
</form>
El control "text"
Crea un control que nos permite ingresar un texto en una lnea.
Ejemplo
Cdigo
<form action="datos.php" method="get">
Nombre: <input type="text" name="nombre">
Apellido: <input type="text" name="apellido">
</form>
Resultado
Nombre:
Apellido:
Nota: la propiedad name le asigna un nombre al elemento que luego puede ser usado en scripts
o en hojas de estilo
El control "radio"
Se usa cuando queremos que el usuario elija una sola opcin de entre una serie de
posibilidades.
Ejemplo
Cdigo
<form action="edades.asp" method="post">
Edad?
<input type="radio" name="edad" value="menor">menor de 17
<input type="radio" name="edad" value="adulto">entre 18 y 60
<input type="radio" name="edad" value="mayor">mayor de 61
</form>
Resultado
Edad?
menor de 17
entre 18 y 60
mayor de 61
Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de radio.
La propiedad value asigna un valor al elemento que ser utilizado por el documento que procese
el formulario.
El control "checkbox"
Permite al usuario elegir varias opciones entre todas las posibilidades.
Ejemplo
Cdigo
<form action="hobbie.php" method="get">
Pasatiempos?
<input type="checkbox" name="pasa" value="tv">TV
<input type="checkbox" name="pasa" value="libros">Libros
<input type="checkbox" name="pasa" value="musica">Msica
<input type="checkbox" name="pasa" value="otros">Otros
</form>
Resultado
Pasatiempos?
TV
Libros
Msica
Otros
Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de checkbox.
La propiedad value asigna un valor al elemento que ser utilizado por el documento que procese
el formulario.
El control "password"
Funciona igual que text, pero el texto introducido se presenta mediante una serie de
puntitos. Es utilizado generalmente para ingresar contraseas.
Ejemplo
Cdigo
<form action="verificacion.php" method="post">
Password: <input type="password" name="pass">
</form>
Resultado
Nombre:
Password:
El control "submit" y el control "reset"
El control submit es el botn de envio de datos del formulario y el control reset es el

botn de reinicializacin. Al ser pulsado reinicializa todos los controles a sus valores
iniciales.
Ejemplo
Cdigo
<form action="datos_personales.php" method="post"> Nombre:
Contrasea: <input type="password" name="secreto">
Contrasea:
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</form>
Enviar
Resultado
Borrar
Nota: el valor de la propiedad value define el texto dentro del botn.
El control "file"
El control file nos permite enviar archivos por medio de un formulario.
Ejemplo
Cdigo
<form action="archivo.php" method="post">
Ingrese la
foto: <input type="file"name="foto">
</form>
Resultado
Ingrese la foto:
El control "hidden"
El control hidden nos permite enviar informacin oculta a los ojos del usuario.
Ejemplo
Cdigo
<form action="oculto.php" method="post">
Contrasea: <input type="password" name="contra">
<input type="hidden" value="cookie">
</form>
Resultado
Nombre:
Contrasea:
El control "image"
El control image nos permite utilizar una imagen personalizada como botn de un
formulario.
Ejemplo
Cdigo
<form action="archivo.php" method="post">
Resultado

Contrasea: <input type="password" name="contra">
<input type="image" src="/enviar.jpg">
</form>
Nombre:
Contrasea:
Las etiquetas select y option

La etiqueta <select> es usada para crear un men desplegable.
Cada opcin ofrecida por el men se representa con la etiqueta <option>
Ejemplo
Cdigo
<form action="continentes.php" method="get">
<select name="continente">
<option value="america">Amrica</option>
<option value="asia">Asia</option>
<option value="europa">Europa</option>
<option value="oceania">Oceana</option>
<option value="africa">Africa</option>
</select>
</form>
Resultado
La etiqueta textarea
Se usa para crear un control de entrada de texto multilnea.
Los atributo rows y cols nos indican la cantidad de filas y columnas que tendr el
recuadro del rea de texto.
Ejemplo
Cdigo
<form action="texto.php" method="post">
<textarea name="eltexto" rows="5" cols="30">
Aqu podemos ingresar un texto introductorio si lo
deseamos.
</textarea>
</form>
Etiquetas y atributos de los formularios
Resultado
Etiquetas
Atributos
Valor
<form>
Descripcin
Define un formulario para el ingreso de
datos.
action
Obligatorio
URL
Especifica un archivo procesador del

formularios.
accept
Lista de tipos de
contenido
Especifica una lista de tipos de

contenido separados por comas, que
un servidor procesador de formularios
manejar correctamente.
accept-charset
Lista de
codificacin de
caracteres
Especifica la lista de codificacin de

caracteres para los datos introducidos
que son aceptados por el servidor que
procesa este formulario.
enctype
tipo de contenido Especifica el tipo de contenido usado

para enviar el formulario al servidor.
method
Especifica que mtodo HTTP se usar

para enviar el conjunto de datos del
formulario.
get
Debera usarse cuando los datos del

formulario no tienen efectos
secundarios.
post
Debera usarse cuando el formulario

causa efectos secundarios(p.ej.,
subscripcin a un servicio o modificar
una base de datos.
name
cdata
Da nombre al elemento de modo que

se pueda hacer referencia a l desde
hojas de estilos o scripts.
target
_blank
El URL se abrir es una nueva ventana.
_self
El URL se abrir en el mismo frame

donde fue apretado.
_parent
_top
El URL se abrir en una ventana de

tamao completo.
<input>
Define el tipo de control de entrada.

accept
Lista de tipos de
contenido
Especifica una lista de tipos de

contenido separados por comas, que
un servidor procesador de formularios
manejar correctamente.
Nota: Usar solo con type="file".
align
left
Define el alineamiento del texto

siguiente a la imagen.
Nota: Usar solo con type="image".
right
top
texttop
middle
Ej
absmiddle
baseline
bottom
absbottom
alt
texto
Define un texto alternativo para la

imagen.
Nota: Usar solo con type="imagen".
checked
Especifica que el botn esta

marcado("on").
Nota: Usar solo con type="radio" o
type="checkbox".
disabled
Deshabilita el control para la entrada

de datos por parte del usuario.
Nota: No debe usarse con
type="hidden".
maxlength
nmero
Nmero mximo de caracteres que

puede introducir el usuario.
Nota: Usar solo con type="text" o
type="password".
name
nombre de
control
Asigna el nombre de control.

Nota: Este atributo es requerido para
type="button", type="checkbox",
type="file", type="hidden",
type="image", type="password",
type="text", type="radio".
readonly
Indica que el valor no puede ser

modificado por el usuario .
Nota: Usar solo con type="text".
size
nmero de
caracteres
Define el tamao del elemento input.

Nota: No debe usarse con
type="hidden".
src
URL
Define el URL de la imagen a mostrar.

Nota: Usar solo con type="image".
type
checkbox
Especifica el tipo de control a crear.
file
hidden
image
password
radio
reset
submit
text
value
valor
Para los botones:

reset y submit: define el texto en el
botn.
checkbox y radio: (requerido) define
el resultado del elemento input cuando
es pulsado.
hidden, password y text: define el
valor por defecto del elemento.
<textarea>
Define un rea de texto(multi-lnea).

col
Obligatorio
nmero
Nmero de columnas visibles en el

rea de texto.
rows
Obligatorio
nmero
Nmero de filas visibles en el rea de

texto.
disabled
name
Deshabilita los controles de entrada.

nombre del rea
de texto
readonly
Especifica un nombre para el rea de

texto.
El usuario no puede modificar el
contenido en el rea de texto.
<label>
Adjunta informacin a los controles.

for
idref
Referencia a una palabra ID definida

por otro atributo.
<fieldset>
Dibuja un recuadro alrededor de los

elementos.
<legend>
Permite a los autores asignar un ttulo

a un fieldset.
align
Desaprobado
top
bottom
left
Especifica la posicin de la leyenda con

respecto al fieldset.Use las
propiedades de ubicacin de CSS en su
lugar.
right
<select>
Crea un men desplegable.

disabled
Deshabilita el men.
multiple
Si est activado permite selecciones

mltiples.
name
nombre
Define un nico nombre para un men

desplegable.
size
nmero
Define el nmero visible de Items en el

men desplegable.
<optgroup>
Permite a los autores agrupar opciones

logicamente.
label
Obligatorio
disabled
<option>
texto
Especifica el rtulo del grupo de

opcin.
Deshabilita los controles de entrada.No
funciona en IE
Define una opcin en los mens
desplegables.
label
texto
Permite escribir de forma sintetizada el

conternido del atributo <option>. El
navegador debera mostrar este valor
en lugar del contenido de <option>.
disabled
Deshabilita los controles de opcin. No

funciona en IE
selected
Especifica que opcin aparecer como

seleccionada.
value
texto
<button>
Especifica el valor inicial del control.

Define un botn.
disabled
Deshabilita el botn.
name
nombre
Especifica un nombre para el botn.
type
button
Define el tipo de botn.
reset
submit
value
<isindex>
Desaprobado
valor
Asigna un valor inicial al botn.

Use <input> en su lugar.
Atributos estndard
id, class, title, style, dir, lang, acceskey, tabindex
Eventos intrnsecos
onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur,
onselect, onchange
Imgenes en HTML
Las imgenes, grficos y fotos le dan vida y color a las pginas web.
Las imgenes
Para insertar imgenes en un sitio usaremos la etiqueta <img>.
Esta etiqueta debe ir acompaada del atributo src que es el que contiene el URL de la
ubicacin del archivo de la imagen.
El atributo alt se utiliza para dar una breve descripcin de la imagen, la cual podremos
observar en caso que el navegador del usuario, por alguna razn, no muestre la
misma.
La etiqueta <img> no tiene cierre.
Sintaxis
<img src="/URL" alt="texto descriptivo">
Ejemplo
Cdigo
Resultado
<img src="/../imagenes/foto1.jpg" alt="Dos nias de la mano">
Las etiquetas map y area

La etiqueta map especifica un mapa de imgenes.
Un mapa de imgenes es una imagen que permite clickear diferentes reas de la
misma.
Esta etiqueta requiere del atributo name, con el mismo nombre usado en el atributo
usemap de la etiqueta img. De esta forma se establece la relacin imagen-mapa.
La etiqueta area se utiliza para definir regiones o reas dentro de un mapa de
imgenes y los enlaces asociados a esas regiones.
Ejemplo
Cdigo
<img src="/../imagenes/formas.gif" usemap="#map1">
<map name="map1">
<area href="/cuadrado.html" shape=rect coords="0,75,100,175">
<area href="/circulo.html" shape=circle coords="175,50,50">
<area href="/triangulo.html" shape=poly coords="125,250,
Resultado
225,250,175,165">
</map>
Etiquetas y atributos de las imgenes

Etiquetas
Atributos
Valor
<img>
Descripcin
Define una imagen.
alt
Requerido
text
Breve descripcin de la imagen.
src
Requerido
URL
Direccin URL de la imagen a mostrar.
align
Desaprobado
top
Alnea la imagen de acuerdo al texto

circundante. Use las propiedades de
ubicacin de CSS en su lugar.
bottom
middle
left
right
border
Desaprobado
pixels
Define el borde alrededor de la imagen.

Use las propiedades de los bordes de
CSSen su lugar.
height
pixels
Define la altura de la imagen.
Ej.
hspace
Desaprobado
pixels
Deja espacios en blanco a derecha e

izquierda de la imagen. Use las
propiedades de ubicacin de CSS en su
lugar.
ismap
URL
Define el mapa de la imagen del lado del

servidor.
longdesc
URL
La URL a un documento con una larga

descripcin de la imagen.
usemap
URL
Define el mapa de una imagen del lado

del cliente.
vspace
Desaprobado
pixels
Deja espacios en blanco arriba y abajo

de la imagen. Use las propiedades de
ubicacin de CSS en su lugar.
width
pixels
Define el ancho de la imagen.
%
<map>
Define el mapa de una imagen del lado

del cliente.
name
nombre nico
<area>
Define un nico nombre para la etiqueta

<map>.
Define una regin en el mapa de una
imagen.
alt
Requerido
text
coords
Breve descripcin de la imagen.
Especifica las coordinadas en donde se

puede apretar.
href
URL
Direccin URL del rea.
nohref
true
Excluye un rea en el mapa de la

imagen.
false
shape
Define la forma del rea.

rect
rectangle
Usamos
coords="izquierda,arriba,derecha,abajo".
circ
circle
poly
Usamos coords="centro x,centro y,

radio".
Usamos coords="x1,y1,x2,y2,..,xn,yn".
polygon
target

_blank
_parent
_self
El URL se abrir en el mismo frame

donde fue apretado.
_top
El URL se abrir en una ventana de

tamao completo.
<applet>
Desaprobado
Permite incluir un applet Java en un

documento HTML. Use la
etiqueta<object> en su lugar.
Atributos estndard
id, class, title, style, dir, lang, tabindex, accesskey
Eventos intrnsecos
onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur
Avanzado
Diseo de Pginas Web

Es la forma en que componemos nuestra pgina web. La ubicacin de cada
elemento en su lugar.
Disposicin de los elementos de una

pgina
La disposicin del contenido de nuestra pgina es importante para que esta sea ms
simple de navegar o ms atractiva al usuario.
La divisin de las diferentes secciones de una pgina(logo, men, banners, publicidad o
el contenido mismo) se puede definir por medio de este sistema.
Muchas veces deseamos que el contenido de nuestra pgina est dividido en 2 o ms
columnas.
Otras veces queremos insertar una imagen en algn lugar determinado de la pgina.
Para ello nos valemos del uso de las tablas, sin bordes y definiendo los diferentes
anchos de cada una de las columnas.
Otro sistema ms efectivo, es el uso de estilos para la disposicin de los diferentes
elementos dentro de la pgina. Pero ese tema lo estudiaremos en el tutorial de CSS.
Usando tablas para disear una pgina Web
El uso ms comn es el de las tablas para dar

forma a la disposicin de los textos en la
pgina.
Esta seccin de la pgina est diseada en dos
columnas.
El secreto est en usar la tabla sin bordes y

agregarle un pequeo valor a cellpadding.
Se puede disear mucho ms de dos
columnas.
Para lograr este efecto debemos usar la

etiqueta <table> y dividir el texto en 2
columnas.
No importa cuanto texto le agregue a la

pgina, siempre estar dentro de los bordes
de la columna.
Cdigo del ejemplo

<html>
<head>
<title>Disposicin del texto</title>
</head>
<body>
<table width="100%" border="0" cellpadding="5">
<tr>
<td>Texto de la primera columna.</td>
<td>Texto de la segunda columna.</td>
</tr>
</table>
</body>
</html>
Disposicin de una pgina estndard

Este es un pequeo ejemplo de como disear una pgina estndard.
Por supuesto que a cada seccin se le puede agregar un color distinto o grfica que le
de vida a la pgina.
Ac ubicamos el logo o un banner
Men
Ac va el contenido
Vnculo 1
Vnculo 2
Vnculo 3
Cdigo del ejemplo

<table width="100%" height="250px" cellspacing="1px" border="1px">
<tr height="50px">
<td colspan="2px">
<table title="Banner" border="0">
<tr>
<td>Ac ubicamos el logo o un banner</td>
</tr>
</table>
</td>
</tr>
<tr height="200px">
<td>
<table title="Menu" border="0" width="100px">
<tr><td>Men</td></tr>
<tr><td>Vnculo 1</td></tr>
</table>
</td>
<td>
<table title="Contenido" border="0" width="400px">
<tr>
<td>Ac va el contenido</td>
</tr>
</table>
</td>
</tr>
</table>
Explicacin del ejemplo

La primera etiqueta <table> define el tamao general de la pgina.
La segunda etiqueta <table> define la seccin superior de la pgina, donde se coloca
generalmente el logo o un banner.
La tercera seccin est definida por la etiqueta <table> y en el ejemplo colocamos el
men. La ltima etiqueta <table> nos define el sector que lleva todo el contenido de
la pgina.
Nota: por supuesto que cada una de las secciones se puede seguir subdividiendo
cuantas veces sea necesario.
Hojas de estilo en cascada

El uso de CSS es el complemento ideal de HTML para el diseo de tu sitio.
Hojas de Estilo
Las hojas de estilo en cascada (CascadingStyle Sheets, CSS) son un lenguaje usado
para definir la presentacin de un documento escrito en HTML.
Con la versin HTML 4.0 todos los formatos de texto pueden ser definidos en una hoja
de estilo por separado o dentro del mismo documento HTML.
El uso de CSS es la manera ms adecuada de disear un sitio Web, ya que nos permite
mucho ms flexibilidad a la hora de realizar cambios en el sitio.
Cmo se usan las hojas de estilos?

Cuando un navegador lee una hoja de estilos, este formatea el documento de acuerdo
a la misma.
Hay 3 formas de insertar una hoja de estilos:
1.
2.
3.
Entre lneas
Hojas de estilo interna
Hojas de estilo externas
1. Entre lneas
Debemos usar esta forma cuando un nico estilo es aplicado a un solo elemento.
Su uso est dado por el atributo style que se encuentra en casi todas las etiquetas.
En este ejemplo aplicaremos un estilo(color rojo y un margen izquierdo de 30
pixels) a la etiqueta <p>, la cual determina que todo el contenido de la misma ser
afectado.
Ejemplo
Cdigo
<p style="color:red; margin-left:30px">
Este prrafo es de color rojo y se encuentra a 30 pixels
del margen izquierdo.
</p>
Resultado
Este prrafo es de color rojo y se encuentra
a 30 pixels del margen izquierdo.
2. Hojas de estilo interna

Las hojas de estilo interna deben usarse cuando una sola pgina tiene un estilo nico.
Las definimos con la etiqueta <style> en la cabecera del documento entre las
etiquetas <head> y </head>
Ejemplo
Cdigo
<head>
<style type="text/css">
body {background-color:blue}
p {color:white}
</style>
</head>
Resultado
Fuentes blancas sobre fondo azul
<body>
<p>Fuentes blancas sobre fondo azul</p>
</body>
En este ejemplo se muestra que la etiqueta <style> con su atributo type define una
hoja de estilo por medio del valor text/css.
En este ejemplo podemos observar que le hemos aplicado estilos a los siguientes
elementos:
body : define el color de fondo de la pgina en azul.
p : define todas las fuentes de color blanco.
3. Hojas de estilo externas

Esta es la forma ideal para cuando queremos definir un sitio entero con una misma
estructura y estilo. Para ello definimos todos los estilos en un documento en comn
que se utilizar para todas las pginas del sitio Web.
Con realizar los cambios en ese documento, podemos cambiar el aspecto de todo el
sitio Web.
Cada pgina del sitio debe vincularse con la hoja de estilos usando la
etiqueta <link> ubicada en la cabecera del documento.
Ejemplo de un enlace a una hoja de estilo
<head>
<link rel="stylesheet" type="text/css" href="/estilos.css">
</head>
Las hojas de estilo deben llevar la terminacin (.css).
Si desea estudiar ms en profundidad sobre las hojas de estilo, visite nuestro tutorial
de CSS.
Etiquetas y atributos de las hojas de estilo.

Etiquetas
Atributos
Valor
<style>
Descripcin
Define un estilo.
type
text/css
media
Define el tipo de contenido.

El medio para la informacin del estilo.
screen
Para pantallas no paginadas de computadora.
tty
Para medios que utilicen una cuadrcula de

caracteres de ancho fijo, como teletipos.
tv
Para dispositivos tipo televisin .
projection
Para proyectores.
handheld
Para dispositivos de mano (pantalla pequea,

monocromos,etc).
print
Para material paginado, opaco, y para

documentos que se ven en una pantalla en
modo de presentacin preliminar a la
impresin.
braille
Para dispositivos tctiles braille.
aural
Para sintetizadores de voz.
all
Apropiado para todos los dispositivos.
<div>
Define una seccin o un documento.

align
Desaprobado
left
right
Como alinear el texto en el elemento div.

UseCSS Ubicacin en su lugar.
center
justify
<span>
Agrupa los elementos de una lnea para

aplicarles estilos.
<font>
Desaprobado
Define el tipo, color y tamao del texto.

UseCSS Fuentes en su lugar.
color
rgb
#xxxxxx
Define el color del texto. Use CSS Fuentes en

su lugar.
nombre del
color
face
listado de
nombres de
Define el nombre de la letra. Use CSS

Fuentesen su lugar.
letras
size
Un nmero
entre 1 y 7. Si
se ha definido
basefont debe
especificar un
nmero entre
-6 y 6.
<basefont>
Desaprobado
Define el tamao de la letra. Use CSS

Fuentesen su lugar.
Define la letra base. Use CSS Fuentes en su

lugar.
color
rgb
#xxxxxx
Define el color del texto. Use CSS Fuentes en

su lugar.
nombre del
color
face
listado de
nombres de
letras
Define el nombre de la letra. Use CSS

Fuentesen su lugar.
size
Un nmero
entre 1 y 7.
Define el tamao de la letra. Use CSS

Fuentesen su lugar.
<center>
Desaprobado
Centra un texto horizontalmente. Use CSS

Ubicacin en su lugar.
Atributos estndard
Si desea una descripcin completa, dirgete a: atributos estndard.
Eventos intrnsecos
Si desea una descripcin completa, dirgete a: eventos intrnsecos.
La seccin Head de HTML

Aqu ubicamos datos de importancia para el navegador y para los buscadores
El elemento head
Este elemento est determinado por las etiquetas <head> y </head>. Dentro de las
mismas queda determinada la seccin head la cual contiene toda la informacin sobre
el documento.
Esta informacin no ser mostrada por el navegador pero es de suma importancia para
los navergadores y para los motores de bsqueda.
De acuerdo a los estndares de HTML solo un nmero reducido de etiquetas pueden
incluirse en la seccin head:
1.
2.
3.
4.
5.
6.
<base>
<link>
<meta>
<title>
<style>
<script>
El elemento base
En HTML, los vnculos y las referencias a recursos externos como imgenes, hojas de
estilo, etc., se especifican siempre mediante una direccin URL.
Sintaxis
<head>
<title>Ttulo del documento</title>
<base href="http://www.virtualnauta.com/imagenes/">
</head>
En este ejemplo podemos observar que la direccin de referencia sirve de base para
todas las imagenes que se inserten en la pgina.
Es decir, que en la seccin body para cada imagen que deseo ingresar solo debo
escribir:
<body>
<img src="/paisaje.jpg">
</body>
En lugar de:
<img src="http://www.virtualnauta.com/imagenes/paisaje.jpg">
El elemento link
Este elemento est definido por la etiqueta <link> y establece un enlace que solo
puede aparecer en la seccin head.
Sintaxis
<head>
<link href="http://www.susitio.com/fuentes.css" type="text/css" rel="stylesheet">
</head>
En este ejemplo podemos observar como definir un enlace hacia un archivo de hojas
de estilo externo.
El elemento meta
Este elemento est definido por la etiqueta <meta> y puede ser usado para identificar
propiedades de un documento(autor, descripcin, palabras claves, etc.)
Sintaxis
<head>
<meta name="author" content="Jorge Perez">
<meta name="description" content="La seccin head de html contiene informacin
sobre el sitio web">
</head>
En este ejemplo podemos observar como definir el autor y la descripcin de un sitio.
Si deseas etudiar en profundidad el uso de las etiquetas <meta>, dirgete a las meta
etiquetas
El elemento title
Este elemento debe figurar en la seccin head y nos define el ttulo de la pgina Web.
Para ello utilizamos las etiquetas <title> y </title>.
Es recomendable poner ttulos ricos en contexto ya que estos aparecen en los motores
de bsqueda y ayudan al usuario a identificar el contenido de la pgina.
Sintaxis
<head>
<title>Curso introductorio al diseo de pginas Web</title>
</head>
El elemento style
Este elemento define estilos dentro del documento y utiliza las
etiquetas <style> y </style>.
Sintaxis
<head>
<style type="text/css">
p {color:blue}
h2 {color:red}
</style>
</head>
Si deseas etudiar como funcionan las hojas de estilo dirgete al tutorial de CSS
El elemento script
El elemento script se utiliza para insertar scripts en el documento.
Lo definimos por medio de las etiquetas <script> y </script>
Sintaxis
<head>
<script type="text/javascript" src="http://misitio.com/calculos/calculos.js">
</script>
</head>
Para ms informacin sobre scripts dirgete a HTML Scripts
Etiquetas y atributos de los elementos en la seccin head

Etiquetas
<head>
Atributos
profile
Valor
URL
<title>
Descripcin
Especifica la localizacin de uno o ms perfiles de
metadatos.
Define el ttulo del documento.
<meta>
Especifica una pareja propiedad/valor del documento.

name
author
Identifica un nombre de propiedad.
description
keywords
generator
revised
otros
http-equiv
contenttype
Los servidores HTTP utilizan este atributo para obtener

informacin sobre los encabezados.
expires
refresh
set-cookie
content
valor
Este atributo especifica el valor de una propiedad.
scheme
valor
Proporciona a los agentes de usuario ms contexto

para la interpretacin correcta de los datos.
<link>
Define un vnculo. Solo puede aparecer en la seccin

head de un documento.
charset
codif. de
Especifica la codificacin de caracteres.
caracteres Valor por defecto: ISO=8859-1.
href
URL
hreflang
cdigo de Especifica el lenguaje de la URL.

lenguaje
media
Especifica la localizacin de un recurso de la web.
El medio para la informacin del estilo.

screen
Para pantallas no paginadas de computadora.
tty
Para medios que utilicen una cuadrcula de caracteres

de ancho fijo, como teletipos.
tv
Para dispositivos tipo televisin.
projection Para proyectores.

handheld
Para dispositivos de mano (pantalla pequea,

monocromos,etc).
print
Para material paginado, opaco, y para documentos

que se ven en una pantalla en modo de presentacin
preliminar a la impresin.
braille
Para dispositivos tctiles braille.
aural
Para sintetizadores de voz.
all
Apropiado para todos los dispositivos.
alternate
Especifica la relacin entre el documento actual y el

destino del vnculo.
rel
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
apendix
help
bookmark
rev
alternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
Especifica la relacin entre el destino del vnculo y el

documento actual(vnculo inverso).
section
subsection
apendix
help
bookmark
target
<base>

_blank
_parent
_self

apretado.
_top
El URL se abrir en una ventana de tamao completo.
type
tipo de
Especifica el tipo de contenido a conectar.
contenido
href
URL
target
Especifica la URL base que ser usada para todos los

vnculos de la pgina.
_blank
_parent
_self

apretado.
_top
El URL se abrir en una ventana de tamao completo.
<script>
Coloca un script dentro del documento.

src
URL
Especifica la localizacin de un script externo.
type
tipo de
Especifica el lenguaje de scripts de los contenidos del
contenido elemento.
language
Desaprobado
javascript Use el atributo type en su lugar.

livescript
vbscript
otros
defer
Indica al agente de usuario que el script no va a

generar ningn contenido en el documento.
Atributos estndard
Si desea una descripcin completa, dirgete a: atributos estndard.
Eventos intrnsecos
Si desea una descripcin completa, dirgete a: eventos intrnsecos.
Meta HTML
Aqu veremos la relacin que hay entre las etiquetas meta y los buscadores como
Google
Etiqueta <meta>
La etiqueta <meta> se utiliza para identificar propiedades de un documento(p.ej.,el
autor, una lista de palabras claves, la descripcin de una pgina, etc.) y para asignar
valores a esas propiedades.
Para ello nos servimos del atributo name que especifica la propiedad a usar y del
atributocontent para definir el contenido de dicha propiedad.
El siguiente ejemplo nos muestra un valor para la propiedad author:
<head>
<meta name="author" content="Jorge Perez">
</head>
La etiqueta <meta> debe ubicarse en la seccin head del documento, entre las
etiquetas <head> y </head>.
La etiqueta <meta> no tiene cierre.
Meta y los motores de bsqueda

keywords
Uno de los usos ms importantes de la etiqueta <meta>, es especificar una lista de
palabras claves relacionadas con el contenido de la pgina. Estas palabras claves
(keywords) sern usadas por los motores de bsqueda para identificar el contenido
de la pgina y de esa forma mejorar la calidad de los resultados de una bsqueda.
Las palabras claves deben separarse con una coma (,) y se pueden escribir una, dos o
ms palabras juntas.
<meta name="keywords" content="vacaciones, vacaciones en el Caribe,
Caribe, islas, playas del Caribe, sol">
Nota: observe que "vacaciones en el Caribe" y "Caribe" son trminos diferentes.

"vacaciones en el Caribe" es un trmino ms preciso que la palabra "Caribe". Esto
es importante ya que ayuda a los motores de bsqueda a encontrar trminos que se
adecan a las exigencias de los usuarios. Lo que nos lleva a entender que hay ms
posibilidades de aparecer en puestos superiores en los resultados de bsqueda.
description
Tambin es importante dar una descripcin lo ms precisa posible de la pgina Web.
<meta name="description" content="Sus prximas vacaciones en el Caribe">
Nota: esta descripcin es la que aparece muchas veces por debajo del ttulo del sitio,
en los resultados de los motores de bsqueda. Es por eso que debe ser una oracin o
frase que refleje exactamente el contenido de la pgina.
Importante: es muy recomendable definir diferentes keywords y descriptions para
cada una de las pginas de un sitio.
Meta e informacin por defecto

Las etiquetas <meta> pueden utilizarse para especificar la informacin por defecto de
un documento en los siguientes aspectos:
El lenguaje de scripts por defecto.
El lenguaje de hojas de estilo por defecto.
La codificacin de caracteres del documento.

Para ello nos servimos del atributo http-equiv

<meta http-equiv="Content-Script-Type" content="text/javascript">

<meta http-equiv="Content-Style-Type" content="text/css">

<meta http-equiv="Content-Type" content="text/html; charset=ISO-88595">
Etiquetas y atributos de meta.
Etiquetas
Atributos
Valor
<meta>
Descripcin
Especifica una pareja propiedad/valor del
documento.
name
author
Identifica un nombre de propiedad.
description
keywords
generator
revised
otros
http-equiv
content-type
expires
Los servidores HTTP utilizan este atributo para

obtener informacin sobre los encabezados.
refresh
set-cookie
content
valor
Este atributo especifica el valor de una propiedad.
scheme
valor
Proporciona a los navegadores ms contexto para

la interpretacin correcta de los datos.
Atributos estndard
lang, dir
La direccin URL
Nos permite encontrar cualquier sitio web en Internet.
Qu es la URL?
El URL (Uniform Resource Locator - Localizador Uniforme de Recursos) le permite al

navegador encontrar una direccin o sitio en Internet.
El URL combina el nombre del servidor que proporciona la informacin, el directorio
donde se encuentra, el nombre del fichero y el protocolo o sistema a usar para
recuperar los datos.
Sintaxis de la direccin URL

Una direccin Internet completa como esta:
http://www.virtualnauta.com/es/html/una-pagina.html
Sigue estas reglas de sintaxis.
esquema://host.dominio:puerto/ruta/nombre_de_archivo
esquema:
define el tipo de servicio Internet. El ms comn es http.
host:
por defecto para http es www.
dominio:
define el nombre del dominio como por ej.: virtualnauta.com.
puerto:
define el nombre de puerto en el host. Por lo general este nmero es omitido. El
nmero por defecto para http es 80.
ruta:
define el camino o subdirectorio en el servidor. Si es omitido, el documento
debe encontrarse en el directorio principal, de lo contrario no ser localizado.
nombre de archivo:
define el nombre del documento. Se usan como nombres de archivo por
defecto default.htmo index.htm.
Esquemas URL
El esquema indica el protocolo de red que se usa para recuperar informacin a travs
de la red.
Algunos ejemplos de esquemas URL:
http : recursos http (Hypertext Transfer Protocol - Protocolo de Transferencia

de Hipertexto).
https : http sobre ssl (Secure Sockets Layer) proporciona comunicaciones
seguras en Internet.
ftp : File Transfer Protocol - Protocolo de Transferencia de Archivos.
mailto : direcciones Email.
file : recursos disponibles en el ordernador local, o en una red local.
news : grupo de noticias Usenet.
telnet : el protocolo telnet, sirve para acceder mediante una red a otra
mquina.
Enlace a un sistema de correo electrnico

Si deseas crear un enlace a un Email, debes usar el siguiente cdigo:
<a href="/mailto: sunombre@susitio.com"> sunombre@susitio.com</a>
Nota: en este ejemplo, al presionar sobre el enlace, se abrir automaticamente el
programa de correo electrnico definido por defecto en el ordenador.
Acceder a un grupo de noticias (Newsgroup).

Los grupos de noticias, son un medio de comunicacin en el cual los usuarios leen y
envan mensajes textuales a distintos tablones distribuidos entre servidores con la
posibilidad de enviar y contestar a los mensajes.
Hay nueve jerarquas dedicadas a discusiones sobre distintos temas:
comp.* : Temas relacionados con las computadoras.
news.* : Discusin de grupos de usuarios.
sci.* : Temas cientficos.
humanities.* : Discusin de humanidades (como literatura o filosofa).
rec.* : Discusin de actividades recreativas (como juegos y aficiones).
soc.* : Socializacin y discusin de temas sociales.
talk.* : Temas polmicos, como religin y poltica.
misc.* : Miscelnea (todo lo que no entra en las restantes jerarquas).
alt.* : Sali como alternativa a talk, pero es usada por los usuarios P2P.
Si deseas crear un enlace hacia un grupo de noticias, usa este cdigo:
<a href="/news:news.html">HTML grupo de noticias</a>
Transferencias ftp
Es un protocolo de transferencia de archivos, de manera que desde un equipo cliente
nos podemos conectar a un servidor para descargar archivos desde l o para enviarle
nuestros propios archivos.
Si deseas crear un enlace para bajar un archivo, usa un cdigo como este:
<a href="/ftp://www.susitio.com/ftp/archivo-a-bajar.zip>Download</a>
Scripts dentro de HTML

Diseo de pginas dinmicas que interactan con el usuario.
Los scripts
Los scripts nos permiten crear pginas Web ms dinmicas y atractivas.
Un script es un programa que puede acompaar a un documento HTML o que puede
estar insertado en l.
El programa se ejecuta en el navegador del cliente cuando se carga el documento o
junto con los eventos, como por ejemplo cuando se activa un enlace, o cuando se pasa
el puntero del mouse por alguna imagen, etc.
Un cdigo script puede ser ubicado tanto en la seccin head como en la
seccin body de un documento.
Insertando un script dentro de un documento HTML

Para insertar un script dentro de HTML, debemos utilizar la etiqueta <script> junto
con el atributotype para especificar el lenguaje de scripts que vamos a utilizar.
Ejemplo
Cdigo
<html>
<head>
<title>Insercin de un Script</title>
</head>
Resultado
Este es un script en javascript
<body>
<script type="text/javascript">
document.write("Este es un script en javascript")
</script>
</body>
</html>
Nota: en este ejemplo el tipo de script insertado "text/javascript" es en JavaScript.
El elemento object
El elemento object est definido por las etiquetas <object> y </object> y se utiliza
para insertar objetos dentro de una pgina Web.
Entendemos por objetos:
documentos HTML
imgenes
audio
video
Flash
documentos PDF
ActiveX
Java applets
etc.
Ejemplo de como insertar una imagen JPEG
Ejemplo
Cdigo
Resultado
<object data="fotos/flores.jpg"
type="image/jpeg"style="width:100px; height:100px">
</object>
Nota: el atributo data="flores.jpg" nos especifica la direccin del documento a insertar. El
atributo type="image/jpeg" el tipo de documento o archivo a insertar.
El elemento param
El elemento param est definido por la etiqueta <param> y se utiliza para especificar
parmetros que pueden ser necesarios, para un objeto insertado con el elemento
object, en tiempo de ejecucin.
Veamos este ejemplo de un archivo de audio.
Ejemplo
Cdigo
<object data="media/applause.wav" type="audio/xwav" style="width: 100%; height: 50px">
<param name="src" value="media/applause.wav">
<param name="autoplay" value="false">
<param name="autostart" value="0">
</object>
Resultado
Notas:
name="src" junto con value="media/applause.wav" - Internet

Explorer necesita la direccin src para ubicar el archivo a ejecutar.
name="autoplay" se usa para ejecutar Quicktime - value="false" es para
que no se autoejecute al cargar la pgina.
name="autostart" se usa para ejecutar Windows Media Player y Real
Audio - value="0" es para que no se autoejecute al cargar la pgina.
Etiquetas y atributos de los scripts
Etiquetas
Atributos
Valor
Descripcin
Ej
<script>
Coloca un script dentro de un documento.

src
URL
Especifica la localizacin de un script

externo.
type
Obligatorio
tipo de
contenido
Especifica el lenguaje de scripts.
lenguaje
Desaprobado
Especifica el lenguaje de scripts. Use type

en su lugar.
defer
Indica al navegador, que el script no va a

generar ningn contenido en el
documento.
charset
codificacin de
caracteres
Define la codificacin de caracteres usadas

en el script.
<noscript>
Texto alternativo en caso que el script no

se ejecute.
<object>
Define un objeto embebido. Usado para

insertar multimedia a la pgina
align
Desaprobado
left
right
Alineamiento del texto alrededor del

objeto.
Use CSS en su lugar.
top
bottom
archive
lista URLs
Especifica una lista de URLs, separados por

espacios, de archivos que contienen
recursos relevantes para el objeto.
border
Desaprobado
pxeles
Define un borde alrededor del objeto.

Use CSS Bordes en su lugar.
classid
URL
Especifica la localizacin de la
implementacin de un objeto. Puede
usarse junto con el atributo data.
codebase
URL
Especifica la ruta de acceso base de los

URLs especificados por los
atributosclassid, data y archive.
codetype
tipo de
contenido
Tipo de contenido de datos cuando se

carga el objeto especificado por classid.
data
URL
Especifica la localizacin de los datos del

objeto.
declare
declaracin
Hace que la definicin actual de objectsea

solamente una declaracin.
height
Desaprobado
pxeles
Define la altura del objeto.

Use CSS Height en su lugar.
hspace
Desaprobado
pxeles
Define los espacios horizontales alrededor

del objeto.
Use CSS Padding en su lugar.
name
nombre nico
Asigna el nombre de control.
standby
texto
Especifica un mensaje que puede

presentar un navegador mientras carga los
datos del objeto.

type
tipo de
contenido
Especifica el tipo de contenido de los datos

especificados por data.
usemap
URL
Asocia un mapa de imgenes con un

elemento.
vspace
Desaprobado
pxeles
Define los espacios verticales alrededor del

objeto.
Use CSS vertical-align en su lugar.
width
Desaprobado
pxeles
Define el ancho del objeto.

Use CSS width en su lugar.
<param>
Especifica los parmetros para un objeto

insertado en el documento.
name
nombre nico
Define el nombre de un parmetro de

ejecucin que se supone que el objeto
insertado conoce.
type
tipo de
contenido
Especifica el tipo de medio para el

parmetro.
value
valor
Especifica el valor del parmetro de

ejecucin especificado por name.
valuetype
data
Especifica el tipo de atributo value.
ref
object
Atributos estndard
Eventos intrnsecos
accesskey, tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
Si deseas una descripcin completa, dirgete a: eventos intrnsecos.
Atributos estndard de HTML

Lista de los atributos que son comunes para casi todas las etiquetas.
Atributos Comunes
En esta pgina se encuentran los atributos ms comunes de HTML.
Los dividimos en tres grupos de acuerdo a la funcin que tiene cada uno.
Atributos identificadores
Atributos de lenguaje
Atributos del teclado
Atributos identificadores
Vlido para todos los elementos excepto: base, head, html, meta, script, style, title.
Atributos
id
Valor
nombre
Descripcin
Asigna un nombre a un elemento.
El atributo id acta:
Como selector para las hojas de estilo(CSS).
Como vnculo destino para vnculos de

hipertexto.
Como medio de hacer referencia a un elemento
en particular desde un script.
Como nombre de un elemento object declarado.
Para procesos generales por parte del usuario.
class
nombre de clase
Asigna un nombre de clase.

El atributo class acta:
Como selector para las hojas de estilo(CSS),

cuando se asigna informacin de estilo a un
conjunto de elementos.
Para procesos generales por parte del usuario.
style
estilo
Este atributo especifica informacin de estilo para el

elemento actual.
title
texto
Este atributo ofrece informacin consultiva sobre el

elemento para el cual se establece.
Atributos de lenguaje
Vlido para todos los elementos excepto: applet, base, basefont, br, frame, frameset,
iframe, param, script.
Atributos
lang
Valor
cdigo de lenguaje
Descripcin
Especifica el idioma base de los valores de los atributos
y del texto contenido en un elemento.
El atributo lang es til para:
Ayudar a los motores de bsqueda.
dir
ltr
Ayudar a los sintetizadores de voz.

Ayudar al agente de usuario a hacer decisiones
sobre separacin de palabras, ligaduras, y
espaciado.
Ayudar a los verificadores de ortografa y
gramtica.
Especifica la direccin del texto.

Valores posibles:
ltr : De izquierda a derecha (left to right).
rtl
rtl : De derecha a izquierda (right to lleft).
Atributos del teclado

Vlido para los elementos: a, area, button, input, label, legend, textarea.
Atributos
Valor
Descripcin
accesskey
caracter
Asigna una tecla de acceso a un elemento. Al pulsar

esa tecla el foco se dirige hacia ese elemento.
tabindex
nmero
Especifica el orden de tabulacin del elemento dentro

del documento actual
Eventos en HTML
Los eventos dinmicos son los encargados de activar determinados scripts de una
pgina web.
Los eventos
HTML cuenta con una serie de atributos que le permiten al navegador ejecutar un
evento.
Un evento puede ser, por ejemplo, un script de JavaScript que se ejecuta al presionar
algn elemento del documento o al cargar la pgina web.
Presentamos aqu una lista de los atributos que activan eventos, clasificados de
acuerdo al tipo de accin que realizan y que pueden ser insertados dentro de las
etiquetas de HTML.
Eventos del documento

Usar solo con body y frameset.
Atributos
Valor
Descripcin
onload
script
El script corre cuando el documento es cargado.
onunload
script
El script corre cuando el usuario elimina un documento de

una ventana o marco.
Eventos de los formularios

Usar con los elementos de los formularios.
Atributos
Valor
Descripcin
onchange
script
El script corre cuando el valor de entrada ha sido

modificado.
onsubmit
script
El script corre cuando se enva un formulario.
onreset
script
El script corre cuando se reinicializa un formulario.
onselect
script
El script corre cuando el usuario selecciona texto de un

campo de texto.
onblur
script
El script corre cuando el elemento pierde el foco ya sea con

el mouse o por navegacin con tabulador.
onfocus
script
El script corre cuando el foco se dirige hacia un elemento,

ya sea con el mouse o por navegacin con tabulador.
Eventos del teclado

Usar con todos los elementos excepto con:
base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, y title.
Atributos
Valor
Descripcin
onkeydown
script
El script corre cuando se pulsa una tecla.
onkeypress
script
El script corre cuando se pulsa y se suelta una tecla.
onkeyup
script
El script corre cuando una tecla se suelta.
Eventos del mouse

Usar con todos los elementos excepto con:
base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, y title.
Atributos
Valor
Descripcin
onclick
script
El script corre cuando se hace clic con el mouse.
ondblclick
script
El script corre cuando se hace doble clic con el mouse.
onmousedown
script
El script corre cuando el botn del mouse se pulsa cuando

est encima de un elemento.
onmousemove
script
El script corre cuando el mouse se mueve mientras est

sobre un elemento.
onmouseout
script
El script corre cuando el mouse se aparta de un elemento.
onmouseover
script
El script corre cuando el mouse se sita sobre un elemento.
onmouseup
script
El script corre cuando el botn del mouse se suelta cuando

est encima de un elemento.
Servidor Web
A la hora de subir nuestro sitio a la red, debemos alojar todos los archivos en un
servidor web para que sean accesibles a todo el mundo.
Sube tu sitio a la Web

Si quieres que otras personas vean t trabajo, debes publicarlo.
Para publicar t sitio, tienes que copiar tus archivos a un servidor Web.
Un servidor Web es tanto el ordenador como el programa que implementa el protocolo
HTTP(Hipertext Transfer Protocol - Protocolo de transferencia de hipertexto), diseado
para transferir lo que llamamos hipertextos, pginas Web o pginas HTML.
El navegador de un cliente particular realiza una peticin al servidor y ste le responde
con el contenido que el cliente solicit.
Alojamiento Web (Web Hosting)
Es el servicio que provee a los usuarios de Internet un sistema para poder almacenar
cualquier contenido accesible va Web.
Las Web Host son compaias que proporcionan espacio de un servidor a sus clientes.
Tipos de alojamientos Web

El alojamiento Web se divide en cuatro tipos:
Tipo
Detalles
Gratuito
Estos servicios son buenos para pginas personales, hobbies, pginas

familiares, etc.
No se recomienda el servicio gratuito para los negocios o para un alto trfico.
Por lo general no puede usar de su propio dominio y debe usar el del
proveedor como por ej.: www.sitiogratis.com/usuarios/susitio.html.
No es muy profesional.
Ventajas
Desventajas
Sin ningn costo.

Bueno para sitios muy
pequeos.
Email generalmente gratis.
No cuenta con dominio propio.
Mucha publicidad en el sitio.
Espacio limitado.
Trfico limitado.
Seguridad limitada.
Generalmente no soporta base

de datos.
Soporte tcnico limitado o
nulo.
Detalles
Compartido
(Shared Hosting)
En este tipo de servicio su sitio es almacenado en un servidor muy potente

junto con otros cientos de sitios.
Puede hacer uso de su propio dominio y cuenta con gran cantidad de
software a su disposicin.
Es el tipo de alojamiento ms comn y usado en el mundo.
Ventajas
Desventajas
Servicio econmico.
Ideal para pequeos y

medianos clientes.
Varias opciones de software.
Uso de dominio propio.
Buen soporte tcnico.
Restriccin el volumen de
trfico.
Restriccin en el soporte de
base de datos.
Restriccin en el soporte de
software.
Detalles
Servidor dedicado Se refiere al alojamiento Web en el cual el cliente alquila o compra un
ordenador completo, y por lo tanto tiene el control y la responsabilidad de
administrarlo.
El cuidado fsico del equipo y de la conectividad a Internet es tarea de la

empresa de alojamiento.
Ventajas
Desventajas
Bueno para grandes espresas.
Bueno para alto trfico.
Uso de mltiples dominios.
Herramientas avanzadas de
email.
Soporta potentes bases de
datos.
Soporte sn lmite de software.
Alto costo.
Requiere de habilidades en el
tema.
Detalles
Colocacin
El cliente compra su propio equipo y lo coloca en la empresa que presta el

servicio.
La empresa de Host le suministra la corriente y la conexin a Internet.
Es como tener su propio sevidor en la oficina solo que se encuentra en un
lugar ms apropiado para eso.
Ventajas
Gran ancho de banda.

Alto funcionamiento sn
interrupciones.
Mucha seguridad.
Opciones de software sin
lmites.
Desventajas
Alto costo.
Requiere de habilidades en el
tema.
Complicado de configurar y
depurar.

Introducción Al HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Introducción Al HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Introduccin al HTML

Qu significa HTML? y un primer ejemplo de sitio.

HTML (HyperText Markup Language) o "Lenguaje para Marcado de

Publica tus propias pginas con fotos, listas, tablas, etc.

Obtn informacin de los visitantes de tu sitio.

Disea los formularios que te permitirn contactar tus futuros clientes.

Crea un sitio para vender ts productos o servicios.

Qu conocimientos previos debes poseer?

Los archivos HTML

Vamos a hacer nuestro primer sitio!

Abre el navegador Internet(Internet Explorer, Firefox, Chrome, etc.).

Selecciona "File" y luego "Open".

Se abrir una ventana, selecciona "Browse" y ubica el archivo que acabas de

La estructura del sitio

Las etiquetas estn encerradas entre los signos "<" y ">".

Generalmente vienen en pares <p> y <p>.

La primera es de apertura y la segunda de cierre.

El texto que se encuentra entre dos etiquetas es el contenido del elemento.

Las etiquetas no son sensibles a las maysculas y minsculas, o sea <b> es lo

Otro elemento HTML en el ejemplo es:

Qu son los atributos de las etiquetas?

Los atributos siempre van con la estructura: nombre="valor".

Los atributos siempre van en la etiqueta de apertura.

Los valores siempre hay que ponerlos entre comillas.

En la etiqueta <body> podemos observar el atributo bgcolor=(color de fondo) y el

Un consejo con respecto al uso de minsculas.

Etiquetas bsicas de HTML

* Nota que el signo de exclamacin se coloca solo al principio del cdigo.

Trazar una lnea

Tabla con las etiquetas bsicas

Define el tamao de los encabezados

Define un salto de lnea

Define una lnea horizontal

Formato de texto con HTML

Formato bsico del texto

Texto normal Texto teletipo

Etiquetas para dar forma al texto

Define un texto en negrita

Define un texto grande

Define un texto enfatizado

Define un texto en itlica

Define un texto pequeo

Define un texto fuerte

Define un texto subndice

Define un texto superndice

Define un texto subrayado

Define un texto tachado

Define un texto de teletipo

Define un texto tachado. Desaprobado. Use <del> en su lugar

Define un texto tachado. Desaprobado. Use <del> en su lugar

Define un texto subrayado. Desaprobado. Use <ins> en su lugar

Etiquetas de "Texto estructurado"

Define un texto del teclado

Define un texto ejemplo de cdigo de computadora

Define una variable

Define un texto preformateado

Desaprobado. Use <pre> en su lugar

Desaprobado. Use <pre> en su lugar

Desaprobado. Use <pre> en su lugar

Etiquetas de citaciones y definiciones

Indica una forma abreviada (p.ej., WWW, HTTP, etc.)

Indica un acrnimo (p.ej., WAC ,radar, autobs, etc.)

Define la informacin sobre el autor

Define la direccin del texto (p.ej., de izq. a der., de der. a izq.)