Académique Documents
Professionnel Documents
Culture Documents
Etiquetas Bsicas
Headings
Nos definen el tamao de un ttulo o cabecera.
<h1> nos da el tipo de letra ms grande.
<h6> nos da el tipo de letra ms pequeo.
HTML agrega automticamente 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>
<head>
<title>Headings</title>
</head>
<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>
Prrafos
Los prrafos se definen con la etiqueta <p>.
Resultado
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
<!-- Esto es un comentario. -->
* 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.
Ejemplo
Cdigo
Resultado
<hr>
Descripcin
<h1> a <h6>
<p>
Define un prrafo
<!-- -->
Define un comentario
<br>
<hr>
Ej.
Ejemplo
Cdigo
<b>Texto en negrita</b>
<big>Texto grande</big>
<em>Texto enfatizado</em>
<i>Texto en itlica</i>
Resultado
Texto
Texto
Texto
Texto
normal
normal
normal
normal
Texto en negrita
Texto grande
Texto enfatizado
Texto en itlica
<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>
Texto
Texto
Texto
Texto
Texto
Texto
Texto
normal
normal
normal
normal
normal
normal
normal
Texto pequeo
Texto fuerte
Texto subndice
Texto superndice
Texto subrayado
Texto tachado
Texto teletipo
Descripcin
<b>
<big>
<em>
<i>
<small>
<strong>
<sub>
<sup>
<ins>
<del>
<tt>
<s>
<strike>
<u>
Descripcin
<code>
<kbd>
<samp>
<var>
<pre>
<listing>
<plaintext>
<xmp>
Descripcin
<abbr>
<acronym>
<address>
<bdo>
<blockquote>
<q>
<cite>
<dfn>
Caracteres especiales
Muchas veces necesitamos incluir en nuestros textos, signos que tienen un significado
especial en HTML
Descripcin
Nombre
Nmero
Espacio en blanco
 
<
Menor que
<
<
>
Mayor que
>
>
&
&
&
"
Comillas
"
"
¡
¡
¿
¿
Marca registrada
®
®
Derecho de autor
©
©
Euro
€
€
á
á
é
é
í
í
ó
ó
ú
ú
minscula
ñ
ñ
ü
ü
Á
Á
É
É
Í
Í
Ó
Ó
Ú
Ú
mayscula
Ñ
Ñ
Ü
Ü
Enlaces en HTML
La propiedad ms importante de Internet, es la posibilidad de conectarse los unos
con los otros.
una imagen
un video
un archivo de sonido
mandar un email
Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la palabra
anchor(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> <!-- Definimos un destino en el Captulo
1 -->
...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>
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.
Ejemplo
Cdigo
<body>
<a href="http://www.google.com/"><img src="/../graficos/google.gif"></a>
</body>
Resultado
Atributo
s
Valor
Descripcin
Define un vnculo
Ej.
href
URL
hreflang
cdigo de
lenguaje
name
nombre de
seccin
rel
alternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
apendix
help
bookmark
nofollow
rev
alternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
apendix
help
bookmark
coords
coordenadas
shape
rect
rectangle
circ
circle
poly
polygon
target
type
_parent
_self
_top
tipo de
contenido
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
Frames en HTML
Dividimos la pgina en partes ms pequeas y en cada una de ellas visualizamos
documentos diferentes.
Los Frames
La etiqueta frameset
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%"> <!-- Dividimos la pantalla en una columna de 25% y
otra de 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.
<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.
Atributos
Valor
<frameset>
Descripcin
Organiza ventanas mltiples.
cols
pixels
%
*
rows
pixels
%
*
<frame>
Ej
frameborder
1
longdesc
URL
marginheight
pixels
marginwidth
pixels
name
frame_name
noresize
noresize
scrolling
yes
no
auto
src
URL
<noframes>
<iframe>
left
right
top
middle
bottom
frameborder
1
height
pixels
%
longdesc
URL
marginheight
pixels
marginwidth
pixels
name
nombre
scrolling
yes
no
auto
src
URL
width
pixels
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, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup
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.
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
<table border="1px">
<tr>
<td>Nombre</td>
<td>Apellido</td>
</tr>
<tr>
<td>Pedro</td>
<td>Garcia</td>
</tr>
</table>
Resultado
Nombre
Apellido
Pedro
Garcia
Ejemplo
Cdigo
<table border="3px">
<tr>
<td>Borde</td>
<td>3 pixels</td>
Resultado
Borde
3 pixels
</tr>
</table>
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.
Ejemplo
Cdigo
<table border="1px">
<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
Ejemplo
Cdigo
Resultado
Nombre
Pedro
Apellido
Garca
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.
Ejemplo
Cdigo
<table border="1px" cellspacing="15px">
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
<td>Pedro</td>
<td>Garcia</td>
</tr>
</table>
Resultado
Nombre
Pedro
Apellido
Garcia
Nota: en este ejemplo el atributo cellspacing deja un espacio de 15 pixels entre las celdas de la
tabla.
Atributos
Valor
<table>
Descripcin
Define una tabla.
align
left
Ej
Desaprobado
center
de CSS en su lugar.
right
bgcolor
Desaprobado
rgb(x,x,x)
#xxxxxx
nombre_color
border
pixels
cellpadding
pixels
%
cellspacing
pixels
%
frame
void
above
below
hsides
lhs
rhs
vsides
box
border
rules
none
groups
rows
cols
all
summary
texto
width
pixels
<tr>
right
left
center
justify
char
bgcolor
Desaprobado
rgb(x,x,x)
#xxxxxx
nombre_color
char
carcter
charoff
pixels
%
valign
top
middle
bottom
baseline
<td>
<th>
texto abreviado
align
left
right
celda.
center
justify
char
axis
nombre de la
categora
bgcolor
Desaprobado
rgb(x,x,x)
#xxxxxx
nombre_color
char
carcter
charoff
pixels
%
colspan
nmero
headers
height
Desaprobado
pixels
nowrap
Desaprobado
nowrap
rowspan
nmero
scope
col
colgroup
row
rowgroup
valign
top
middle
bottom
baseline
width
Desaprobado
pixels
%
<caption>
top
bottom
left
right
<colgroup>
<col>
right
left
center
justify
char
char
carcter
charoff
pixels
%
span
nmero
valign
top
middle
bottom
baseline
width
pixels
longitud relativa
<thead>
<tbody>
<tfoot>
right
left
center
justify
char
char
character
charoff
pixels
%
valign
top
middle
bottom
baseline
Atributos estndard
id, class, title, style, dir, lang
Si desea una descripcin completa, dirjase a: atributos estndard.
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
<ol>
<li>Naranjas</li>
<li>Manzanas</li>
<li>Bananas</li>
</ol>
Resultado
1. Naranjas
2. Manzanas
3. Bananas
Dentro de cada Item se pueden agregar imgenes, prrafos, otras listas, etc.
Listas Desordenadas
Ejemplo
Cdigo
Resultado
<ul>
<li>Tomates</li>
<li>Pepinos</li>
<li>Cebollas</li>
</ul>
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
Resultado
Chocolate
Elaborado a base de cacao
<dl>
<dt>Chocolate</dt>
<dd>Elaborado a base de cacao</dd>
<dt>Caramelo</dt>
<dd>Elaborado a base de azcar</dd>
</dl>
Caramelo
Elaborado a base de azucar
Dentro de las etiquetas <dd> se pueden agregar imgenes, prrafos, otras listas, etc.
Atributos
<ol>
Valor
Descripcin
Define una lista ordenada.
compact
Desaprobado
Ej.
start
Desaprobado
nmero del 1
objeto
type
Desaprobado
a
I
i
1
<ul>
circle
<li>
disc
square
circle
A
a
I
i
1
value
Desaprobado
nmero del
objeto
<dl>
<dt>
<dd>
<dir>
Desaprobado
<menu>
Desaprobado
Atributos estndard
id, class, title, style, dir, lang
Si deseas una descripcin completa, dirjete a: atributos estndard.
Eventos intrnsecos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup
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
Ejemplo
Cdigo
Resultado
Atributos
Valor
Descripcin
Define una imagen.
Ej.
alt
Requerido
text
src
Requerido
URL
align
Desaprobado
top
bottom
middle
left
right
border
Desaprobado
pixels
height
pixels
%
hspace
Desaprobado
pixels
ismap
URL
longdesc
URL
usemap
URL
vspace
Desaprobado
pixels
width
pixels
%
<map>
nombre nico
<map>.
<area>
text
coords
href
URL
nohref
true
false
shape
Usamos
coords="izquierda,arriba,derecha,abajo".
Usamos coords="centro x,centro y,
radio".
Usamos coords="x1,y1,x2,y2,..,xn,yn".
polygon
target
_parent
_self
_top
<applet>
Desaprobado
Atributos estndard
id, class, title, style, dir, lang, tabindex, accesskey
Eventos intrnsecos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur
Men
Vnculo 1
Vnculo 2
Vnculo 3
Ac va el contenido
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.
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.
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.
Si desea estudiar ms en profundidad sobre las hojas de estilo, visite nuestro tutorial
de CSS.
Atributos
Valor
<style>
Descripcin
Define un estilo.
type
text/css
media
screen
tty
tv
projection
Para proyectores.
handheld
braille
aural
all
<div>
left
right
center
justify
<span>
<font>
Desaprobado
rgb
#xxxxxx
nombre del
color
face
listado de
nombres de
letras
size
Un nmero
entre 1 y 7. Si
se ha definido
basefont debe
especificar un
nmero entre
-6 y 6.
<basefont>
Desaprobado
rgb
#xxxxxx
nombre del
color
face
listado de
nombres de
letras
size
Un nmero
entre 1 y 7.
<center>
Desaprobado
Atributos estndard
id, class, title, style, dir, lang
Si desea una descripcin completa, dirgete a: atributos estndard.
Eventos intrnsecos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup
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.
<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>
<title>Ttulo del documento</title>
<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>
<title>Ttulo del documento</title>
<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>
<title>Ttulo del documento</title>
<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>
<title>Ttulo del documento</title>
<script type="text/javascript" src="http://misitio.com/calculos/calculos.js">
</script>
</head>
Atributos
profile
Valor
URL
Descripcin
Especifica la localizacin de uno o ms perfiles de
metadatos.
<title>
<meta>
author
description
keywords
generator
revised
otros
http-equiv
contenttype
expires
refresh
set-cookie
content
valor
scheme
valor
<link>
codif. de
Especifica la codificacin de caracteres.
caracteres Valor por defecto: ISO=8859-1.
href
URL
hreflang
media
tty
tv
braille
aural
all
rel
alternate
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
section
subsection
apendix
help
bookmark
target
type
_parent
_self
_top
tipo de
Especifica el tipo de contenido a conectar.
contenido
<base>
href
URL
target
_parent
_self
_top
<script>
URL
type
tipo de
Especifica el lenguaje de scripts de los contenidos del
contenido elemento.
language
Desaprobado
defer
Atributos estndard
id, class, title, style, dir, lang
Si desea una descripcin completa, dirgete a: atributos estndard.
Eventos intrnsecos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup
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 nameque especifica la propiedad a usar y del
atributo content 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.
description
Tambin es importante dar una descripcin lo ms precisa posible de la pgina Web.
Atributos
Valor
<meta>
Descripcin
Especifica una pareja propiedad/valor del
documento.
name
author
description
keywords
generator
revised
otros
http-equiv
content-type
expires
refresh
set-cookie
content
valor
scheme
valor
Atributos estndard
lang, dir
La direccin URL
Nos permite encontrar cualquier sitio web en Internet.
Qu es la URL?
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:
telnet : el protocolo telnet, sirve para acceder mediante una red a otra
mquina.
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>
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.
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
Resultado
Atributos
Valor
<script>
Descripcin
Coloca un script dentro de un documento.
src
URL
type
tipo de
contenido
Obligatorio
lenguaje
Desaprobado
defer
charset
<noscript>
<object>
left
right
top
bottom
archive
lista URLs
border
pxeles
Desaprobado
Ej
classid
URL
Especifica la localizacin de la
implementacin de un objeto. Puede
usarse junto con el atributo data.
codebase
URL
codetype
tipo de
contenido
data
URL
declare
declaracin
height
pxeles
pxeles
name
nombre nico
standby
texto
type
tipo de
contenido
usemap
URL
vspace
pxeles
pxeles
Desaprobado
hspace
Desaprobado
Desaprobado
width
Desaprobado
<param>
nombre nico
type
tipo de
contenido
value
valor
valuetype
data
ref
object
Atributos estndard
id, class, title, style, dir, lang
Si deseas una descripcin completa, dirgete a: atributos estndard.
Eventos intrnsecos
accesskey, tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
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 identificadores
Vlido para todos los elementos excepto: base, head, html, meta, script, style, title.
Atributos
Valor
Descripcin
id
nombre
class
nombre de clase
style
estilo
title
texto
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:
dir
ltr
rtl
Vlido para los elementos: a, area, button, input, label, legend, textarea.
Atributos
Valor
Descripcin
accesskey
caracter
tabindex
nmero
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.
Valor
Descripcin
onload
script
onunload
script
Valor
Descripcin
onchange
script
onsubmit
script
onreset
script
onselect
script
onblur
script
onfocus
script
Valor
Descripcin
onkeydown
script
onkeypress
script
onkeyup
script
Valor
Descripcin
onclick
script
ondblclick
script
onmousedown
script
onmousemove
script
onmouseout
script
onmouseover
script
onmouseup
script
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.
Detalles
Gratuito
Desventajas
pequeos.
Email generalmente gratis.
Espacio limitado.
Trfico limitado.
Seguridad limitada.
Detalles
Compartido
(Shared Hosting)
Desventajas
Servicio econmico.
Restriccin el volumen de
trfico.
Restriccin en el soporte de
base de datos.
Restriccin en el soporte de
software.
Detalles
Herramientas avanzadas de
email.
Soporta potentes bases de
datos.
Soporte sn lmite de software.
Colocacin
Desventajas
Alto costo.
Requiere de habilidades en el
tema.
Detalles
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
Desventajas
Alto costo.
Requiere de habilidades en el
tema.
Complicado de configurar y
depurar.
Qu es la interfaz?
El concepto de interfaz es muy amplio y se refiere a todo sistema que permite el contacto
y la funcionalidad entre dos sistemas diferentes. Por ejemplo, los botones y la pantalla
del telfono celular conforman la interfaz, ya que permite que el usuario pueda emplear
las funciones que este aparato ofrece.
Sin embargo, en este artculo nos referiremos exclusivamente a la interfaz web, que es
unsistema grfico que permite a los usuarios acceder a los contenidos, realizar tareas,
comprender las funcionalidades y navegar por las diferentes pginas del sitio.
En definitiva, la interfaz web es el conjunto grfico que permite la presentacin y la
navegacin del sitio. Esto se consigue con la inclusin de elementos grficos comunes a
toda la web que son estndares, haciendo que los usuarios tengan completo control sobre
las funcionalidades del sitio desde el momento mismo de entrar a l sin que para ello
deba tener amplios conocimientos ni preparacin anterior alguna.
Una pgina web puede contar con los mejores contenidos en el gnero que se desarrolla,
pero indefectiblemente fracasar si su interfaz no permite un rpido y cmodo acceso a
los mismos por parte de los usuarios. Por el contrario, una pgina web cuyos contenidos
sean de menor calidad (sin que stos sean malos, por supuesto) pero cuya interfaz
permite que sus usuarios naveguen en forma sencilla, tengan acceso en forma inmediata
al contenido que desean e interactuen en forma sencilla, tendr un mayor xito.
Tener una
Hacer que refleje la visin del usuario con respecto al sitio, su informacin o sus
servicios.
La primera parece obvia, pero muchos sitios evolucionan sin una estructura original clara
hasta terminar en el caos ms absoluto.
Otro error frecuente es plantearla como una rplica de la estructura departamental de la
empresa, en lugar de hacerlo en funcin de la percepcin del usuario, a pesar de que as
sea ms sencillo distribuir las responsabilidades sobre el web a nivel interno.
La estructura debe estar determinada por las tareas que los usuarios quieren desarrollar,
incluso si ello supone mezclar en una pgina informacin de distintas reas de la
empresa.
Esta concepcin de la estructura, orientada en funcin de la percepcin del usuario
presenta respecto a aquella que pretende imponerles la decisin de la organizacin un
porcentaje de xito superior al 80% frente al 9% de la segunda opcin.
Estructura lineal
Esta estructura consiste en una lnea recta que recorre el sitio desde la pgina de inicio
hasta la pgina final.
Es muy til cuando se desea que el lector siga un camino fijo y guiado, adems el de
impedir que se distraiga con enlaces a otras pginas. Por otra parte se puede causar al
lector la sensacin de estar encerrado si el camino es muy largo o poco interesante.
Este tipo de estructura sera vlido para tutoriales de aprendizaje o tours de visita
guiada.
Estructura Jerrquica
La estructura jerrquica, como se observa en la siguiente figura:
Estructura Radial
En este modelo las pginas secundarias no se conectan entre s, y se debe navegar por
la pgina principal para ir de una secundaria a otra, es decir, la principal contiene enlaces
a todas las secundarias, pero las secundarias slo contienen un entorno a la principal, tal
cual se aprecia en la figura que sigue:
La ventaja de esta estructura es que facilita la navegacin, los visitantes slo tendrn que
efectuar uno o dos clics para retornar a la pgina principal; sin embargo, esto podra
tambin ser un inconveniente porque obliga al usuario a regresar siempre a la pgina de
inicio.
Estructura de Red
En ella se plantea un modelo en el que todas las pginas estn relacionadas entre s.
Es una estructura ideal para sitios especializados en un tema, en la que se le permite al
usuario una navegacin libre y sin limitaciones como la que vemos a continuacin:
Artculos de navegacin