Laborarorio 1: HTML
1. Introduccin
Internet, como est ahora, es una excelente herramienta para bsqueda de
informacin, independientemente de en qu punto del mundo se encuentre.
Las aplicaciones de negocios, de hecho, se afanan por dar a los usuarios
herramientas para crear nueva informacin a partir de cero.
Internet est al borde de una pequea revolucin que, aunque usted como
usuario no se d cuenta de ello, transformar no la forma en que est
diseada o construida, sino la manera en que usted la utilizar.
De todos los servicios que nos presta Internet, el segundo ms utilizado es
el World Wide Web o WWW.
Una vez que uno se encuentra en condiciones de utilizar los programas
clientes de Internet y en especial los Navegadores o Browsers (Mosaic,
Netscape Navigator o Microsoft Internet Explorer) tal vez se pregunte
Cmo se crean estas pginas Internet?
La respuesta es ..... con HTML
2. Qu es HTML?
HTML son las iniciales de Hiper Text Markup Language.
Es un conjunto o serie de etiquetas incluidas en archivos de texto que
definen la estructura de un documento WWW y sus vnculos con otros
documentos.
Los navegadores WWW leen estos archivos de texto e interpretan esas
etiquetas para determinar cmo desplegar la pgina Web.
Por dnde comenzar?
Lo primero es saber dnde crear el archivo texto que contendr las
instrucciones HTML
(Hipertexto), para lo cual tenemos varias opciones:
1. Utilizar programas creados para desarrollo de pginas WEB, entre los que
podemos citar: Microsoft Front Page
2. Utilizar un editor de texto y crear nuestro propio cdigo, el mismo que ya
no contendra cdigo basura.
La primera opcin es la ms sencilla y ms rpida, sin embargo est
limitada y es dependiente del software a utilizar, ya que es el software el
que se encarga de elaborar y ubicar los cdigos de la pgina WEB y uno
estara prcticamente Arando en el mar.
La segunda opcin es ms lenta y menos vistosa, pero esta opcin le
ensea a utilizar cada uno de los comandos y instrucciones HTML
(etiquetas) sin depender de ningn programa. Esto tiene sus beneficios y el
principal de ellos es que nuestras pginas ya no contarn con cdigo
excedente y/o cdigo basura, de modo que ocuparn menos espacio, por
ende sern ms rpidas al momento de ser cargadas por Internet y al
invertir menos tiempo en cargar una pgina, se gastar menos dinero
pagando al proveedor de Internet.
Como casi todos los sistemas ms comunes en PC funcionan bajo un
entorno Windows, para crear los Hipertextos utilizaremos un accesorio que
viene incluido en el sistema. El Bloc de Notas o Note Pad.
3. Pginas WEB
El Hipertexto es un archivo de texto que contiene instrucciones que pueden
ser interpretadas por un navegador de Internet. Estas instrucciones son
denominadas Etiquetas.
4. Etiquetas
Una etiqueta cumple su funcin de la siguiente manera:
<nombre de la etiqueta> Apertura de una etiqueta siempre entre
< >
texto/grfico/etiquetas A la cual se aplica la etiqueta
</nombre de la etiqueta> Cierra de la etiqueta siempre entre </
>
Al acabar de crear un hipertexto , este se deber grabar con la extensin
.html o bien .htm. Es bueno acotar que un archivo HTML es un archivo texto
que tiene una extensin definida. Este archivo de texto contiene etiquetas,
las mismas que son expresadas como instrucciones y el navegador WEB es
quien las interpreta.
5. Estructura bsica de una pgina WEB
Una pgina web est compuesta de 2 partes: el encabezamiento y el cuerpo
de la pgina.
Paralelamente a esto, existen tres etiquetas fundamentales, las mismas que
deben estar incluidas en el archivo HTML de manera obligatoria. Estas tres
etiquetas fundamentales son:
<html> </html> Indica al navegador que el documento texto que est
leyendo es un documento
HTML. Esta etiqueta se abre al inicio del archivo y se cierra al final del
mismo.
<head> </head> Ac se detalla el encabezado de la pgina WEB. Esta
etiqueta se abre luego de
<html>.
<body> </body> Cuerpo de la pgina donde se despliega el contenido
global. Esta etiqueta se abre luego de cerrar el encabezamiento con
</head> y se extiende hasta el final de la pgina, cerrndose antes de
</HTML>.
Ejemplo 1:
<html>
<head> </head>
<body>
Bienvenidos al curso de HTML
</body>
</html>
El hipertexto ser grabado con el nombre [Link] en su disquete o en
alguna ubicacin en el disco duro. Al asignar la extensin .html o .html ya se
crea un hipertexto.
Asegrese de ingresar [Link] como nombre a grabar en su bloque de
notas (incluidas las comillas) para evitar que se aada la extensin .txt.
Sin cerrar el programa de edicin de texto que estamos usando, abra su
navegador de WWW. En la pantalla de direccin WEB, introduzca la ruta
completa a su archivo [Link], y usted deber poder ver en su pantalla
su primera pgina WEB.
Importante:
Como se ve en el ejemplo 1. Toda etiqueta abierta debe cerrarse. En caso de
no cerrarse el error podra causar confusin al navegador.
Etiqueta: <title> </title>
Esta etiqueta va en la parte del encabezamiento de la pgina web, es decir
en el HEAD, y define en su contenido el ttulo de la pgina web, misma que
aparecer en la parte superior izquierda de la pantalla de su navegador.
Sin cerrar nuestro navegador de Internet, volvemos al editor de texto e
incluimos el campo
<title> entre las etiquetas de apertura y cierre del encabezado (head).
Ejemplo 2:
<html>
<head> <title>Curso de HTML</title> </head>
<body>
Bienvenidos al curso de HTML
</body>
</html>
El nuevo archivo HTML se grabar con el mismo nombre [Link], tan solo
usando la opcin de Grabar en su editor de Texto. Una vez realizado esto, y
sin cerrar su editor de texto, vamos al navegador en el que seleccionamos
la opcin de Actualizar/Refresh y nuestra nueva pgina estar visible.
Notar que el ttulo aparecer en la parte superior de la pgina.
Etiqueta <body> </body>
Todo el texto, las imgenes y el formato visibles al usuario deben
encontrarse entre las etiquetas
<body>...</body>. Esta etiqueta cuenta con los siguientes atributos:
Bgcolor define el color de fondo de la pgina
Text define el color del texto de la pgina
Link define el color de los vnculos en la pgina
Alink define el color del vnculo actual o activado en la pgina
Vlink define el color del vnculo ya visitado
Background define el archivo grfico que ser desplegado como fondo
Bgsound define el archivo de audio que se tocar en la [Link]
Bgproperties define el movimiento vertical del [Link]
Los atributos se incluyen en la etiqueta de apertura, separados por un
espacio.
6. Cmo se utilizan los colores en HTML?
Se pueden llegar a tener 16 millones de colores en una pgina web.
Existen dos formas para aplicar colores a una pgina web:
1. Se especifica el color deseado directamente con el nombre del color en
ingls: Ej: blue, green, yellow
2. Se especifica el color deseado mediante nmeros hexadecimales
mediante la siguiente estructura:
#RRVVAA
El color tiene un signo de numeral # antecediendo a los 6 nmeros.
Existen dos nmeros para cada color principal: rojo, verde y azul.
Cada uno de los nmeros vara hexadecimal mente {0,1,2....,9,A,B,...F}.
Utilizando estos datos, haremos una pgina con fondo celeste y letras
negras. Usaremos para este efecto los atributos bgcolor y text. :
Ejemplo 3:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor=#C0D9D9 text=#000000>
Bienvenidos al curso de HTML
</body>
</html>
Grabe este archivo seleccionando la opcin de Guardar/Grabar de su editor
de texto, de modo que se mantenga el nombre [Link]. Cuando usted
vaya a su navegador WWW y seleccione la opcin de Actualizar, notara el
cambio.
7. Texto en HTML
Una vez que ya se tiene una idea de cmo funcionan la etiqueta de
encabezamiento y parte de la etiqueta de definicin del cuerpo de la
pgina, trabajemos con el texto.
HTML fue creado en principio para el alfabeto en ingls, sin embargo se
buscaron modos para mostrar tambin caracteres o smbolos denominados
especiales.
Para utilizar caracteres especiales usaremos los smbolos & y ; para denotar
el inicio y final respectivamente de un smbolo especial.
La idea bsica para acentos y signos latinos es combinar dos teclas. Para
lograr una o con acento debemos combinar una o y un acento:
ó
Para entender un poco ms este proceso, veamos el siguiente ejemplo:
Ejemplo 4:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor=#C0D9D9 text=#000000>
Bienvenidos al curso de HTML
Cuando la temperatura es menor a 15°c hace bastante frío.
Este es un ejemplo de página WEB :)
</body>
</html>
Luego de realizar el proceso para grabar y actualizar la pgina notara que
se incluyen en la pgina los smbolos de grados, la i con acento y la a
con acento.
Notar tambin que el texto se encuentra de corrido en una sola fila, para
bajar de lnea utilizaremos la siguiente etiqueta especial.
8. Etiqueta <hr>
La etiqueta <hr> dibuja de manera predeterminada una regla horizontal
alineada automticamente, con una apariencia de tercera dimensin. Esta
etiqueta especial, por qu no necesita de cierre, tiene los siguientes
atributos:
Align establece que la regla se alinee a la izquierda, centro o derecha
LEFT,CENTER o RIGHT
NOSHADE quita el sombreado predeterminado de la regla
WIDTH permite especificar el ancho de la regla (en pixeles o porcentaje)
SIZE permite especificar el alto de la regla (en pixeles)
Ejemplo 5:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000">
Bienvenidos al curso de HTML<br>
<hr align=center width=50%><br>
Cuando la temperatura es menor a 15°c hace
bastante frío.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de página WEB :)<br>
</body>
</html>
9. Encabezados
Las etiquetas <h1> </h1> al <h6> </h6> (acrnimos de heading 1..6)
son encabezados del cuerpo del texto. El encabezamiento <h1> nos
proporciona las letras de mayor tamao. Notar que si usamos una etiqueta
de encabezamiento, automticamente se incluir un retorno de carro al final
del mismo. La etiqueta tiene el siguiente atributo:
Align Permite ubicar el encabezamiento a la izquierda, centro o derecha de
la pantalla (LEFT, CENTER,RIGHT)
Ejemplo 6:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000">
<h1 align="center">
Bienvenidos al curso de HTML</h1><br>
<hr align=center width=50%><br>
<h2>Bienvenidos</h2>
Cuando la temperatura es menor a 15°c hace
bastante frío.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de página WEB :)<br>
</body>
</html>
Luego de realizar el proceso de grabado/actualizacin notar las diferentes
dimensiones de las dos primeras lneas.
10.
Ubicacin, formato y atributos de texto
Etiqueta <center> </center>
Se utiliza para centrar el texto/imagen o datos que se encuentren entre la
apertura y el cierre.
Etiqueta <b> </b>
Esta es la etiqueta que nos posibilita un texto con negrillas.
Etiqueta <u> </u>
Etiqueta que posibilita resaltar un texto con subrayado.
Etiqueta <i> </i>
Etiqueta que permite resaltar el texto con inclinacin itlica.
Recuerde que puede combinar entre si todas estas etiquetas. Veamos un
ejemplo para demostrar el uso de las ltimas 4 etiquetas que se vieron.
Ejemplo 7:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000">
<h1 align="center">
Bienvenidos al curso de HTML</h1><br>
<hr align=center width=50%><br>
<h2>Bienvenidos</h2>
Cuando la temperatura es menor a 15°c hace
bastante frío.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de página WEB <b><i>:)</i></b><br>
<b>Este texto esta con negrillas</b><br>
<u>Este texto esta con subrayado</u><br>
<i>Este texto esta con inclinación itálica</i><br>
Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b>
todo.<br>
</body>
</html>
Note el cambio en la sentencia de la lnea o regla <hr>, se elimin
align=left. Notar que la nueva regla saldr al centro, pues esta es la
alineacin por defecto. Adems sacamos el punto final que exista en la
primera lnea que ahora aparece centrada.
11.
Etiqueta <font> </font>
Esta etiqueta proporciona al autor un medio de personalizar el texto con
respecto al tipo de fuente, tamao y color. Atributos:
Color determina el color que se aplica al texto
Size determina el tamao relativo del texto. Los tamaos vlidos son del 1
al 7, siendo el predeterminado el 3 y el ms grande el 1.
Face asigna una fuente o tipo de letra.
Ejemplificando, introduciremos lo siguiente: Per. Note que la primera B es
ms grande que el dems texto. Usaremos el tamao 7 para la letra B y el
tamao estndar (3) para las dems letras.
Ejemplo 8:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000">
<h1 align="center">
Bienvenidos al curso de HTML</h1><br>
<hr align=center width=50%><br>
<h2>Bienvenidos</h2>
Cuando la temperatura es menor a 15°c hace
bastante frío.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de página WEB <b><i>:)</i></b><br>
<b>Este texto esta con negrillas</b><br>
<u>Este texto esta con subrayado</u><br>
<i>Este texto esta con inclinación itálica</i><br>
Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b>
todo.<br>
<font color="red"><font size=7>B</font>o</font><font color="yellow">
li</font><font color="green">via</font><br>
</body>
</html>
12.
Imgenes en HTML
Hasta este momento se ha trabajado solamente con texto. Comencemos a
introducir grficos en nuestra pgina HTML.
Se deben tener dos consideraciones importantes para trabajar con grficos:
Los nicos formatos, que por ahora soportan los visualizadores son: *.gif y
*.jpg o *.jpeg.
Las imgenes no deben ser de tamao grande porque el visualizador o
navegador puede demorar demasiado en bajarlas.
Ac trabajaremos tambin con el atributo background de la etiqueta
<body> que haba quedado pendiente.
La idea de trabajar con un fondo en una pgina web, es la misma que tener
un fondo en nuestro entorno Windows. El archivo puede estar ubicado en la
misma carpeta o bien en otra que contenga solo grficos. Trate de que el
color de fondo de la pgina (que ya no aparecer) sea parecido al color
principal de la imagen que usar como fondo. Si es necesario re acomode
los colores de texto y vnculos definidos en <body>.
Supondremos tenemos un grfico llamado [Link] para el ejemplo 8 que
como notar ser re formulado en funcin a utilizar las nuevas etiquetas.
13.
Etiqueta <img>
Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre.
Esta etiqueta instruye al navegador para que exhiba la imagen especificada.
El formato bsico para incluir un grfico es:
<img src=[Link]>
No es necesario re dimensionar en forma permanente un archivo grfico
para exhibirlo en contextos variables; sin embargo, el autor de HTML puede
indicar al navegador que re dimensione la imagen especificando los
siguientes atributos:
Src identifica la imagen que se desplegar.
Height para redimensionamiento de grfico (en pixeles o en porcentaje)
Width para redimensionamiento de grfico (en pixeles o en porcentaje)
A la imagen se le puede aplicar un borde que se hace notorio especialmente
cuando se trata de una imagen que adems es un hipervnculo:
Border Definido en pixels
La imagen tambin puede alinearse con respecto al texto:
ALIGN Alineacin, puede ser: TOP, MIDDLE, BOTTOM, LEFT y RIGHT
En caso de que la imagen no pueda exhibirse, se puede desplegar un texto:
ALT Especfica el texto alterno
Es a partir de este ejemplo, que se va a realizar una nueva pgina, la misma
que llamaremos
[Link] o bien pude ser grabada con otro nombre.
Supondremos contamos con un grfico llamado [Link].
Ejemplo 9:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="[Link]">
<center><h1>
Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Información General</h2>
Este curso muestra los conceptos básicos del uso de
etiquetas e instrucciones en la elaboración de
documentos
<b><i><font
color="#000080">HTML</font></i></b>.<br><br>
<center><img src="[Link]" border="1" alt="Foto de Claudia"></center>
<br>
Es muy importante saber ubicar los gráficos y combinar
de buena manera los colores para brindar una buena imagen
<b><i><font color="red">:)</font></i></b>.<br><br>
Una página WEB es muy importante, pues provee a nuestro
trabajo una ventana al mundo.<br>
</body>
</html>
Realice el proceso de grabado con el nuevo nombre de pgina [Link]
y cargue la nueva pgina en su navegador.
14.
Tablas
En HTML tambin podemos incluir arreglos de tablas. Se deben utilizar
varias etiquetas:
Etiqueta <table></table>
Seala el inicio y final de una tabla. Sus atributos son:
Align Establece la alineacin de la tabla o texto mediante
ALIGN=LEFT o ALIGN=RIGHT
Bgcolor Establece el color de fondo de las celdas de la tabla
Border Determina el ancho del borde en pixeles
BorderColor Asigna un color al borde
BorderDark Determina el color de la parte oscura de un borde de 3
dimensiones
BorderLight Asigna el color de la parte clara de un borde de 3 dimensiones
Caption Especifica el ttulo para la tabla
Cellpadding Establece la cantidad de espacio libre junto al contenido de
una celda
Cellspacing Asigna la cantidad de espacio entre las celdas de una tabla
Width Determina el ancho de la tabla en pixeles o en un porcentaje
Indica al navegador cliente que exhiba el texto como un encabezado en la
primera fila de una
tabla. Atributos principales:
Colspan especifica el nmero de celdas que cubre el encabezado
Align Determina la posicin del texto del titilo
Etiqueta <tr> </tr>
Indica al navegador que exhiba el texto dentro de una fila; puede tambin
interpretarse como la etiqueta que define filas.
Align Alineacin del texto/objetos en toda la fila
Etiqueta <td> </td>
La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas
especficas de una tabla. Atributos principales:
Align Alineacin del texto/objeto de la celda
Bgcolor Color de fondo de la celda
Background imagen de fondo de una celda
Width Ancho de la celda/columna con respecto al ancho de la tabla
Solo precisa definir el ancho en la primera celda de la columna.
Recuerde que dentro de una celda, usted puede insertar desde texto o un
grfico hasta una tabla entera.
Ejemplo 10:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="[Link]">
<center><h1>
Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Información General</h2>
Este curso muestra los conceptos básicos del uso de
etiquetas e instrucciones en la elaboración de
documentos
<b><i><font
color="#000080">HTML</font></i></b>.<br><br>
<center><img src="[Link]" border="1" alt="Foto de Claudia"></center>
<br>
Es muy importante saber ubicar los gráficos y combinar
de buena manera los colores para brindar una buena imagen
<b><i><font color="red">:)</font></i></b>.<br><br>
Una página WEB es muy importante, pues provee a nuestro
trabajo una ventana al mundo.<br>
<br><center>
<table width=80% align=center border=3>
<tr><th colspan=3>Directorio Telefónico</th></tr>
<tr align=center>
<td width=40% bgcolor="#C0C0C0">
Nombre
</td>
<td width=30% bgcolor="#C0C0C0">
Telfono
</td>
<td width=30% bgcolor="#C0C0C0">
E-Mail
</td>
</tr>
<tr>
<td>
José Rodríguez
</td>
<td>
223454
</td>
<td>jose@[Link]</td>
</tr>
<tr>
<td>
Carolina Nuñez
</td>
<td>
453444
</td>
<td>carolina@[Link]</td>
</tr>
</table>
<br></center>
</body>
</html>
Grabe este archivo con el nombre [Link] sobre escribiendo el archivo
anterior.
Consejo:
Puede usar tablas sin borde (usando BORDER=0 en la sentencia <table>)
para ubicar grficos y texto de forma elegante.
15. Numeracin y vietas
En HTML todo es posible, y tal cual en un editor de texto podemos trabajar
con numeracin y vietas, lo podemos hacer ac.
Etiqueta <ul> </ul>
Indica al navegador que cree una lista con vietas no ordenada.
No solamente usada para fines de numeraciones y vietas, sino tambin
para fines de sangra u tabulaciones.
Etiqueta <ol> </ol>
Listas ordenadas, esta etiqueta predeterminada indica al navegador que
numera la lista de elementos comprendidos dentro de las etiquetas <ol>
Etiqueta <li> </li>
Se usa para indicar al navegador que exhiba el texto que le sigue como un
elemento de lnea en una lista. Atributos:
Type Especifica el tipo para listas ordenadas Type=A Usa letras
mayusculas, TYPE=a emplea letras minsculas, Type=I Usa nmeros
romanos grandes, Type=i usa nmeros romanos pequeos y Type=1 usa
nmeros arbigos.
Type tambin puede servir para definir la forma de la vieta en las listas no
ordenadas. Type=DISC, CIRCLE y SQUARE son las opciones disponibles.
Value Indica que se inicie la numeracin a partir del nmero especificado.
Creamos una nueva pgina para el siguiente ejemplo:
Ejemplo 11:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="[Link]">
<center><h1>
Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Debemos a comprar</h2><br>
<ul>
<li>Camisas para José</li>
<li>Loción para Daniel</li>
</ul><br>
<h2>Estudiar para mañana</h2><br>
<ol>
<li type=a>Geometría</li>
<li>ciencias Sociales</li>
</ol><br>
<h2>Actividades de la semana</h2><br>
<ol>
<li type=i>Asistir a la Universidad</li>
<li>Comprar Disco</li>
<li>Llevar el auto al mecánico</li>
</ol><br>
<h1>Objetivos</h1>
<ul>El uso de estas etiquetas también puede ayudar a mover
el texto en base a tabulaciones o sangrías de texto, para
diferenciar parrafos o textos de los encabezamientos.
</ul>
</body>
</html>
Grabamos el nuevo ejemplo con el nombre [Link]. Hasta este punto
tenemos 3 pginas HTML.
