Académique Documents
Professionnel Documents
Culture Documents
AL HTML
Capitulo II. Estructura de una pgina.
A lo largo de este tema vamos a aprender a crear una pgina bsica. La estructura bsica de una
pgina es:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Todas las pginas web escritas en HTML tienen que tener la extensin html o htm. Al mismo
tiempo, tienen que tener las etiquetas <html> y </html>.
Entre las etiquetas <html> y </html> estar comprendido el resto del cdigo HTML de la pgina.
Por ejemplo:
<html>
...
</html>
Cabecera de la pgina <head>
La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo.
Est formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la
etiqueta <html>.
Por ejemplo:
<html>
<head>
...
</head>
...
</html>
Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y ms se utilizan son:
<link>, <style>, <script>, <meta> y la etiqueta <title> que te explicamos a continuacin.
El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador, cuando
la pgina est cargada en l.
Para asignar un ttulo a una pgina es necesario escribir el texto deseado entre las etiquetas
<title> y </title>.
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y
</head>.
Por ejemplo:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
...
</html>
Cuerpo del documento <body>
El cuerpo del documento contiene la informacin propia del documento, es decir lo que queremos
que se visualice, el texto de la pgina, las imgenes, los formularios, etc.
Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van
justo debajo de la cabecera.
Por ejemplo:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
<body>
...
</body>
</html>
El color de fondo puede establecerse a travs del atributo bgcolor, al que es posible asignarle un
color representado en hexadecimal o por un nombre predefinido.
Por ejemplo, para hacer que el color de fondo de una pgina sea de color azul, tendremos que
escribir:
... ...
<body bgcolor="#0000FF"> <body bgcolor="blue">
... ...
</body> </body>
</html> </html>
Por ejemplo, para hacer que la imagen de fondo de una pgina sea la imagen fondo.gif, que se
encuentra en el mismo directorio en el que se encuentra guardada la pgina, tendremos que
escribir:
...
<body background="fondo.gif">
...
</body>
</html>
...
<body background="imagenes/fondo.gif">
...
</body>
</html>
A travs de la etiqueta <body> tambin es posible establecer el color del texto de la pgina a
travs del atributo text.
Por ejemplo, para hacer que el color del texto de una pgina sea de color rojo, tendremos que
escribir:
...
<body text="#FF0000">
...
</body>
</html>
Entre el borde de la ventana y el contenido de la pgina existe un margen, cuyo tamao en pxeles
puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen
superior). Estos atributos no funcionan para ciertos navegadores, pero s los atributos
marginwidth (anchura del margen) y marginheight (altura del margen).
Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero.
Por ejemplo, para hacer que una pgina no tenga margen superior, y tenga un margen izquierdo
de 20 pxeles, tendremos que escribir:
...
<body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" >
...
</body>
</html>
ANEXO 1 COLORES EN HTML
Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores del 0 al 9,
sino que puede tomar hasta diecisis valores distintos, que van del 0 al 9, y de la A a la F. Cada color estar
representado por un grupo de seis dgitos en hexadecimal, precedidos por una almohadilla, como por
ejemplo #FFFFFF. Existen 216 colores seguros para web. stos son los colores que se muestran de la misma
forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.
Tambin podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dgitos
que forman parte del nmero hexadecimal.
A continuacin se muestran los 216 colores seguros para web, para que puedas consultarlos cuando lo
necesites.
Existe otra forma de representar algunos colores, sin la necesidad de utilizar nmeros en
hexadecimal. Estos colores pueden representarse por su nombre, y son los siguientes:
Ejemplo: <meta>
La etiqueta <meta> se utiliza para aadir informacin sobre la pgina. Esta informacin puede ser
utilizada por los buscadores.
A travs de esta etiqueta pueden especificarse los atributos name y content. El atributo name
indica el tipo de informacin, y el atributo content indica el valor de dicha informacin.
Para indicar el tipo de informacin podemos utilizar cualquier palabra que deseemos, como puede
ser "Autor", "Palabras clave", "Descripcin", etc. Pero debido a que la mayora de buscadores
estn en ingls, es preferible que el tipo de informacin se especifique en ingls.
Tipo Significado
author Autor de la pgina
classification Palabras para clasificar la pgina en los buscadores
description Descripcin del contenido de la pgina
generator Programa utilizado para crear la pgina
keywords Palabras clave
La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible
indicar un tipo de informacin y su valor, pero es posible insertar varias etiquetas <meta> en un
mismo documento.
Por ejemplo, el siguiente cdigo indica que el autor de la pgina es capacitacin 602, que la
pgina trata sobre un curso de HTML, y especifica algunas palabras clave a ser consultadas por
los buscadores:
<html>
<head>
...
<meta name="author" content="capacitacin 602">
<meta name="description" content="Curso de HTML">
<meta name="keywords" content="cdigo HTML etiqueta pgina web gratis curso">
</head>
...
La etiqueta <meta> tambin se utiliza para indicarle al navegador alguna informacin o alguna
accin que debe realizar. En este caso se utiliza el atributo http-equiv, en lugar del atributo name.
Por ejemplo, imaginemos que por algn motivo queremos que nuestra pgina se actualice
automticamente cada 30 segundos. En ese caso, deberamos utilizar la accin Refresh
(actualizar). Podramos utilizar el siguiente cdigo:
<html>
<head>
...
<meta http-equiv="Refresh" content="30">
</head>
...
Tambin.
Ahora imaginemos que hemos cambiado la direccin en la que se encuentra nuestra pgina web,
y queremos que cuando algn usuario visite la pgina en la direccin antigua, a los 5 segundos el
navegador lo redirija automticamente a la direccin nueva. En ese caso podramos insertar el
siguiente cdigo en la pgina que se encuentra en la direccin antigua:
<html>
<head>
...
<meta http-equiv="Refresh" content="5; URL=http://www.capacitacin.com/index.htm">
</head>
...
De este modo, el navegador realizara la funcin de actualizar la pgina, pero cargando la que se
encontrara en la nueva direccin (URL=http://www.capacitacin.com/index.htm).
Prcticas. Unidad 1
Objetivo: Practicar las operaciones que hay que realizar para crear una pgina bsica.
El profesor te dar un archivo llamado ejercicios_htm. Debers extraer los archivos en la carpeta
Mis documentos de tu disco duro, ah se crear una carpeta ejercicios_html.
A lo largo del curso vamos a crear tres sitios web, cada sitio lo guardaremos en una carpeta dentro
de ejercicios_html.
La carpeta animales, donde guardaremos los archivos de un sitio web de una asociacin
ficticia de veterinarios que iremos creando a lo largo de los ejercicios paso a paso.
La carpeta deportes, donde guardaremos los archivos de un sitio web de una cadena de
centros deportivos que iremos creando a lo largo de los ejercicios propuestos.
La carpeta flores, donde guardaremos los archivos de un sitio web de una floristera que
iremos creando a lo largo de los ejercicios propuestos.
Cada carpeta contiene a su vez una carpeta imgenes y una carpeta varios donde iremos
guardando las imgenes y ficheros varios respectivamente.
1. Vamos a comenzar por escribir una pgina web muy sencilla. Para ello utilizaremos un editor de
texto sin formato, como puede ser el Bloc de notas (Notepad) includo en Windows. Puedes
encontrarlo en Todos los programas Accesorios. El aspecto del Bloc de notas es muy simple, una
hoja en blanco con una barra de mens.
<html>
<head>
<title>Practica 1</title>
</head>
<body>
<p>Aprendiendo HTML</p>
</body>
</html>
1. Escriba la siguiente oracin, en un block de notas siguiendo los pasos del ejercicio anterior
<body>
<p>La <strong>exploracin espacial</strong> designa los esfuerzos del hombre en estudiar el espacio y
sus astros desde el punto de vista cientfico y de su explotacin econmica. Estos esfuerzos pueden
involucrar tanto seres humanos viajando en naves espaciales como satlites con recursos de telemetra o
sondas teleguiadas enviadas a otros planetas (orbitando o aterrizando en la superficie de estos cuerpos
celestes).</p>
<p>Las personas que pilotan naves espaciales, o son pasajeros en ellas, se llaman astronautas (en Rusia:
<em>cosmonautas</em>; en China: <em>taikonautas</em>). Tcnicamente se considera astronauta a
todo aquel que emprenda un vuelo sub-orbital (sin entrar en rbita) u orbital a como mnimo 100 km de
altitud (considerado el lmite externo de la atmsfera).</p>
<p>El cielo siempre ha atrado la atencin y los sueos del hombre. Ya en 1634 se public la que se
considera primera novela de ciencia ficcin, <em>Somnium</em>, de <strong>Johannes Kepler</strong>,
que narra un hipottico viaje a la Luna. Ms tarde, en 1865, en una famosa obra de ficcin titulada
<em>"De la Terre la Lune"</em>, <strong>Julio Verne</strong> escribe sobre un grupo de hombres que
viaj hasta la Luna usando un gigantesco can.</p>
<p>En Francia, <strong>Georges Mlis</strong>, uno de los pioneros del cine, tomaba la novela de Verne
para crear <em>"Le voyage dans la Lune"</em> (1902), una de las primeras pelculas de ciencia ficcin en
la que describa un increble viaje a la Luna. En obras como <em>"The War of the Worlds"</em> (1898) y
<em>"The First Men in The Moon"</em> (1901), <strong>Herbert George Wells</strong> tambin se
concibieron ideas de exploracin del espacio y de contacto con civilizaciones extraterrestres.</p>
</body>
</html>
<html>
<head>
<title>Inicio</title>
</head>
<body bgcolor="#99CC99">
</body>
</html>
Con este cdigo estars creando un documento con el ttulo "Inicio", y con el color de fondo verde
(#99CC99).
<html>
<head>
<title>Ejemplo de elementos en lnea y elementos de bloque</title>
</head>
<body>
<p>Los prrafos son elementos de bloque.</p>
<a href="http://www.google.com">Los enlaces son elementos en lnea</a>
<p>Dentro de un prrafo, <a href="http://www.google.com">los enlaces</a>
siguen siendo elementos en lnea.</p>
</body>
</html>
Tambin este:
<html>
<head>
<title>Ejemplo de texto estructurado con secciones</title>
</head>
<body>
<h1>Titular de la pgina</h1>
<p>Prrafo de introduccin...</p>
<p>Prrafo de contenido...</p>
<h2>Otra subseccin</h2>
</html>
Practica 5. Estructura de una pgina Deportes
Resolucin:
Apartado 1 Hacer clic sobre el men Archivo, y elegir la opcin Abrir.
En la nueva ventana, elegir Todos los archivos en Tipo:
Seleccionar el documento quienes.htm, de la carpeta deportes.
Pulsar sobre el botn Abrir.
Apartado 2 Hacer clic sobre el men Archivo, y elegir la opcin Guardar como.
En la nueva ventana, elegir la carpeta ejercicios_html/deportes.
Dejar el mismo nombre de documento quienes.htm.
Pulsar sobre el botn Guardar.
Apartado 3 Buscar la etiqueta <body>.
Sustituirla por
bodybgcolor="#0099CC"leftmargin="40"topmargin="40"marginwidth="40"marginheight="40">.
Apartado 4 Hacer clic sobre la opcin Guardar, del men Archivo.
Abrir el documento quienes.htm en un navegador y comprobar que el fondo de la pgina es de color azul.