Unidad 2 HTML

INTRODUCCIN
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>
Identificador del tipo de documento <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.
Ttulo de la pgina <title>
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>
A travs de la etiqueta <body> es posible establecer el color o la imagen de fondo de la pgina.
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>
Si no sabes cmo representar los colores en hexadecimal, o a qu nmero o nombre se

corresponde cada uno de ellos, puedes consultarlo en el Anexo 1 colores en HTML
La imagen de fondo puede establecerse a travs del atributo background, indicando la ruta en la
que se encuentra la imagen.
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>
En el caso de que la imagen no se encuentre en el mismo directorio que la pgina, y se encuentre

dentro de la carpeta imgenes, que s se encuentra en el mismo directorio que la pgina,
tendremos que escribir:
...
<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
Los colores en HTML se representan mediante un nmero hexadecimal.
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.
#000000 #000033 #000066 #000099 #0000CC #0000FF

#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#660033 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF
Anexo 1 colores en htmlcontinuacin
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.
Los buscadores consultan la informacin de la etiqueta <meta> de las pginas, buscando

coincidencias con lo que el usuario pretende encontrar.
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.
Los tipos de informacin ms utilizados son los siguientes:
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.
La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>.
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.
En esa carpeta tenemos:
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.
Una vez tenemos nuestros sitios organizados, podemos empezar a practicar.

Practica 1. Mi primera practica con HTML
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.
2. Escribiremos el siguiente cdigo. Ms adelante ya veremos qu es cada elemento:
<html>
<head>
<title>Practica 1</title>
</head>
<body>
<p>Aprendiendo HTML</p>
</body>
</html>
3. Vamos a continuar guardando la pgina. Pulsamos en el men Archivo y elegimos Guardar.

Introducimos el nombre, por ejemplo Primera Practica. Si ahora pulssemos Guardar, se guardara
con la extensin txt, que indica que es un documento de texto sin formato. Para guardarlo como
una pgina web, debemos de emplear la extensin .htm (o .html). Por lo que completamos el
nombre para que quede Primera.htm y pulsamos Guardar.
Practica 2.
1. Escriba la siguiente oracin, en un block de notas siguiendo los pasos del ejercicio anterior
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>La exploracin espacial</title>
</head>
<body>
<h2>La exploracin espacial</h2>
<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>
2. Guardar el archivo con el nombre Practica 2 en extensin HTML.

Procedimiento 3:
1. Si no tienes abierto el Bloc de notas, brelo para realizar el primer ejercicio.

2. Escribe el cdigo que aparece a continuacin:
<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).
3. Haz clic sobre el men Archivo.

4. Haz clic sobre la opcin Guardar como. Se abrir el cuadro de dilogo Guardar como.
5. En el recuadro Tipo: elige Todos los archivos.
6. Guarda el documento con el nombre inicio.htm, dentro de la carpeta Mis
documentos/ejercicios_html/animales de tu disco duro.
7. Abre el documento que acabas de crear en un navegador, y comprueba que obtienes una
pgina como la que te muestra el instructor. Fjate en el color de fondo de la pgina y en la
barra de ttulo.
Practica 4:
Escribe los siguientes cdigos y reconoce lo que sucede en tu pgina web
<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>
<h2>La primera sub-seccin</h2>
<p>Prrafo de contenido...</p>
<h2>Otra subseccin</h2>
<p>Ms prrafos de contenido...</p>

</body>
</html>
Practica 5. Estructura de una pgina Deportes
1. Abrir el documento quienes.htm, de la carpeta originales/deportes del curso.

2. Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis
documentos/ejercicios_html/deportes
3. Establecer #0099CC como color de fondo y 40 como tamao de los mrgenes.
4. Guardar los cambios y comprobar el funcionamiento con tu navegador, no te preocupes
por el formato del texto, lo arreglars en el tema siguiente
Ejercicio 6: Estructura de una pgina. Flores
1. Copiar la imagen fondo.gif que encontrars en la carpeta originales/flores/imagenes a tu

carpeta Mis documentos/ejercicios_html/flores/imagenes
2. Copiar el documento inicio.htm, de la carpeta originales/flores a tu carpeta Mis
documentos/ejercicios_html/flores.
3. Abrir el documento Mis documentos/ejercicios_html/flores/inicio.htm con el Bloc de
notas.
4. Establecer como imagen de fondo la imagen fondo.gif de la carpeta
ejercicios_html/flores/imagenes.
5. Guardar los cambios y comprobar el funcionamiento en tu navegador.
Resolucin del ejercicio 5: Estructura de una pgina (Deportes)
1. Abrir el documento quienes.htm, de la carpeta originales/deportes del curso.

2. Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis
documentos/ejercicios_html/deportes
3. Establecer #0099CC como color de fondo y 40 como tamao de los mrgenes.
4. Guardar los cambios y comprobar el funcionamiento con tu navegador, no te preocupes por el formato
del texto, lo arreglars en el tema siguiente.
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.
Resolucin del ejercicio 6: Estructura de una pgina. (Flores)
1. Copiar la imagen fondo.gif que encontrars en la carpeta originales/flores/imagenes a tu carpeta Mis

documentos/ejercicios_html/flores/imagenes
2. Copiar el documento inicio.htm, de la carpeta originales/flores a tu carpeta Mis
documentos/ejercicios_html/flores.
3. Abrir el documento Mis documentos/ejercicios_html/flores/inicio.htm con el Bloc de notas.
4. Establecer como imagen de fondo la imagen fondo.gif de la carpeta ejercicios_html/flores/imagenes.
5. Guardar los cambios y comprobar el funcionamiento en tu navegador
Apartado 3 Hacer clic sobre el men Archivo, y elegir la opcin Abrir.

En la nueva ventana, elegir Todos los archivos en Tipo:
Seleccionar el documento inicio.htm, de la carpeta ejercicios_html/flores.
Pulsar sobre el botn Abrir.
Apartado 4 Buscar la lnea en la que aparezca <body.
Aadir background="imagenes/fondo.gif" delante del smbolo > de cierre de la etiqueta body.
Apartado 5 Hacer clic sobre la opcin Guardar, del men Archivo.
Abrir el documento inicio.htm en un navegador, y comprobar el fondo de la pgina es de color rosa, con flores.

Unidad 2 HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Unidad 2 HTML

Hochgeladen von

Copyright:

Verfügbare Formate

INTRODUCCIN

Identificador del tipo de documento <html>

Ttulo de la pgina <title>

A travs de la etiqueta <body> es posible establecer el color o la imagen de fondo de la pgina.

Si no sabes cmo representar los colores en hexadecimal, o a qu nmero o nombre se

En el caso de que la imagen no se encuentre en el mismo directorio que la pgina, y se encuentre

Los colores en HTML se representan mediante un nmero hexadecimal.

#000000 #000033 #000066 #000099 #0000CC #0000FF

Los buscadores consultan la informacin de la etiqueta <meta> de las pginas, buscando

Los tipos de informacin ms utilizados son los siguientes:

La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>.

En esa carpeta tenemos:

Una vez tenemos nuestros sitios organizados, podemos empezar a practicar.

2. Escribiremos el siguiente cdigo. Ms adelante ya veremos qu es cada elemento:

3. Vamos a continuar guardando la pgina. Pulsamos en el men Archivo y elegimos Guardar.

<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<h2>La exploracin espacial</h2>

2. Guardar el archivo con el nombre Practica 2 en extensin HTML.

1. Si no tienes abierto el Bloc de notas, brelo para realizar el primer ejercicio.

3. Haz clic sobre el men Archivo.

Escribe los siguientes cdigos y reconoce lo que sucede en tu pgina web

<h2>La primera sub-seccin</h2>

<p>Ms prrafos de contenido...</p>

1. Abrir el documento quienes.htm, de la carpeta originales/deportes del curso.

Ejercicio 6: Estructura de una pgina. Flores

1. Copiar la imagen fondo.gif que encontrars en la carpeta originales/flores/imagenes a tu

1. Abrir el documento quienes.htm, de la carpeta originales/deportes del curso.

Resolucin del ejercicio 6: Estructura de una pgina. (Flores)

1. Copiar la imagen fondo.gif que encontrars en la carpeta originales/flores/imagenes a tu carpeta Mis

Apartado 3 Hacer clic sobre el men Archivo, y elegir la opcin Abrir.

Das könnte Ihnen auch gefallen