Instituto Nacional “San Luis” Soyapango -INSAL-

2do Año Informática

INSTITUTO NACIONAL “SAN LUIS” SOYAPANGO -INSAL-

2° AÑO DE BACHILLERATO GENERAL SECCION: “____”

NOMBRE DEL ESTUDIANTE:____________________________________________________________________
No DE NIE: ________________ No DE LISTA:_________ FECHA:_______________________________
PROFESROR: Néstor Arnoldo Morales Rivera PERIODO:__________

MANUAL BASICO DE HTML

PARTE-I

SIGNIFICADO Y ORIGEN DEL HTML

HTML es uno de esos acrónimos que con el correr del tiempo casi han perdido su significado en su
totalidad. Si le preguntamos a muchas personas qué significa en realidad HTML, pues no sabrían
respondernos con exactitud.

HTML es Hyper Text Markup Language (o Lenguaje de Marcas de Hipertexto) y no debe

confundirse con un lenguaje de programación. Se trata más bien de una forma semántica de
organizar una estructura, ya sea páginas web o aplicaciones, a través de marcas de sentido. Las
marcas de sentido son otorgadas por las <Etiquetas>, de las cuales hablaremos más adelante.

Así como tenemos que agradecerle la creación del Internet, también fue: Sir Tim Berners-Lee el
responsable, en parte, de la creación del HTML. En la década del ’80, cuando se encontraba
trabajando para el CERN, el físico ideó un lenguaje de hipertexto que facilitaría compartir
documentos con sus colegas. Aunque el sistema de hipertexto ya había sido desarrollado un tiempo
antes, fue Berners-Lee quien lo perfeccionó y lo presentó para ser usado en internet. Junto con
Robert Cailliau, presentaron la propuesta World Wide Web (WWW). Red Mundial Durante la década
del ’90 se fueron presentando otras versiones.
Hoy en día, el lenguaje HTML puro y duro ha sido reemplazado por el XHTML, más completo, y
últimamente por el HTML5, que se corresponde con los tiempos que corren.
Hoy estaremos hablando del lenguaje transicional, el XHTML, que aún se sigue implementando en
una gran mayoría de sitios web, aunque lentamente se está dejando lugar al HTML5 y sus amplias
ventajas.
1
 Instituto Nacional “San Luis” Soyapango -INSAL-
2do Año Informática
¿QUÉ NECESITAMOS PARA COMENZAR A DISEÑAR NUESTRA PAGINA WEB?
Para empezar a crear nuestra página necesitamos un Editor de textos, o sea, un programa en el
que podamos teclear el código de nuestra página.
Podemos usar el Bloc de Notas o Notepad, que sería lo más práctico y sencillo. No les recomiendo
el Word o algún programa similar porque podría haber problemas con los formatos.
Otra cosa que necesitas es un Navegador de Internet para poder ver como está quedando nuestra
página. Estos navegadores de Internet pueden ser: Internet Explorer, Google Crome, o Mozzila
FireFox, Netscape Navigator. Para diseñar nuestra página no es necesario por el momento que
dispongamos de una conexión a Internet. Puedes estar modificando el código de su archivo en el
editor de textos y estarlo visualizando en el navegador sin tener conexión con la Web.

INICIAMOS NUESTRA PRIMER EXPERIENCIA COMO DISEÑADORES WEB:

Entramos al Editor de textos (Bloc de Notas) y creamos un archivo nuevo; no tenemos que escribir
nada todavía en él. Puedes llamarlo como quieras pero de preferencia nómbralo Prueba, ya que es
el ejemplo que se manejará en este pequeño manual. Es necesario que le pongamos la extensión
htm o html a ese archivo para que lo podamos visualizar en el navegador. Entonces el archivo
quedará así: Prueba.htm y deberá estar guardado en alguna carpeta de tu disco duro. Para ver
cómo está quedando nuestra página (cuando hayas empezado con el diseño) haz lo siguiente:
Para cualquier navegador haz lo siguiente: De preferencia copia tu archivo Prueba.htm en el
escritorio de su PC, le damos clic derecho encima de archivo Prueba.htm y se nos desprende un
menú en el cual vamos a buscar la opción Abrir con  escogemos un navegador de nuestra
preferencia, se nos abrirá nuestra página web tal como se visualizara en internet

Ahora sí, que ya tienes tu archivo listo y sabes como visualizarlo, lo que sigue es empezar a diseñar
en html.

ESTRUCTURA BÁSICA DE UN DOCUMENTO EN HTML

El lenguaje HTML trabaja con Etiquetas (Tags) Una Etiqueta es una palabra en ingles la cual esta
encerada entre los símbolos < > estas palabras se convierten en comandos o instrucciones dentro
de HTML, dichas Etiquetas tienen diferentes usos. Por ejemplo: <TITLE> </TITLE> sirve para
colocar el nombre de la página en el marco superior del navegador. La mayoría de las etiquetas
necesitan cerrarse y modifican la información contenida dentro de ellas. Algunas como <BR> no
necesitan cerrarse. Después se explicará mejor el significado de éstas y otras más.
Todos los documentos en html deben tener la siguiente estructura:

EJEMPLO 1:
<HTML>
<HEAD>
<TITLE> Titulo de Mi página
Web</TITLE>
</HEAD>
<BODY>
Aquí va todo el contenido del
programa.
</BODY>
</HTML>

2
 Instituto Nacional “San Luis” Soyapango -INSAL-
2do Año Informática
Este formato debe seguirse siempre como una regla. El uso de las demás etiquetas y el contenido
del programa irá dentro de la etiqueta <BODY> </BODY>. El título va a ser el nombre que le quieras
dar a tu página.
Ahora comienza lo interesante, vamos a empezar a construir nuestra página de Internet. Entramos al
editor de textos, cargue su archivo Prueba.htm (que por ahora debe estar vacío) y teclea lo
siguiente:

<HTML>
<HEAD>
<TITLE>Historia de Internet</TITLE>
</HEAD>
<BODY>
En esta página explicaremos brevemente los inicios de la red de redes.
</BODY>
</HTML>

Lo que estamos haciendo aquí es generando el esqueleto de nuestra página. Estas son las etiquetas
básicas para cualquier diseño. El título de esta página-ejemplo es Historia de Internet y aparece en el
marco superior del navegador. Como se acaba de mencionar, dentro de las etiquetas <BODY>
</BODY> desarrollaremos todo nuestro contenido.
Pulsamos en el menú archivo Guardar en el editor de textos para grabar en Prueba.htm lo que
acabamos de codificar. Recuerda que ya has aprendido cómo visualizarlo.

TEXTO EN HTML
Ya sabemos cómo es la estructura de un documento en html. Es el momento de empezar a
manipular los elementos de nuestra página. El elemento fundamental en Internet es el texto. Aunque
el auge de los últimos años se ha debido principalmente al contenido multimedia, (gráficos, sonido y
video) el texto sigue siendo la base de todo documento en la red.
A diferencia de los procesadores de texto comerciales (Word, WordPerfect, etc.), la manipulación de
texto en html está un tanto limitada y es necesario utilizar ciertas etiquetas para modificar el texto a
nuestro gusto. Enseguida se muestran algunas de las etiquetas más populares en el manejo de
texto.

Una vez que ya se tiene una idea de cómo funcionan la etiqueta de encabezamiento y parte de la
etiqueta de definición del cuerpo de la página, trabajemos con el texto.
HTML fue creado en principio para el alfabeto en inglés, sin embargo se buscaron modos para
mostrar también Caracteres o símbolos denominados especiales.
Para utilizar caracteres especiales usaremos los símbolos & y ; para denotar el inicio y final
respectivamente de un símbolo especial.
De esta manera:
Para resolver estos problemas, existen códigos para poder escribir estos caracteres.
Estos códigos tienen un inicio y un fin. El inicio es el símbolo & y el final es el ;

Para que carateres del código que aparezcan en el texto:

Texto: Descripción: Pantalla:
La idea básica para acentos y signos latinos es combinar dos teclas. Para lograr una o con acento
debemos combinar una o y un acento:

3
 Instituto Nacional “San Luis” Soyapango -INSAL-
2do Año Informática
Si se escribe en un procesador de textos de forma manual

Caracteres Especiales para Otros Caracteres Especiales

Vocales, Eñes, Interrogación y
Exclamación:
&aacute; para la á &nbsp; espacio en blanco
&eacute; para la é &nbsp; espacio en blanco
&oacute; para la ó &lt; para < (menor que)
&uacute; para la ú &gt; para > (mayor que)
&Aacute; para la Á &amp; para & (ampersand)
&Eacute; para la É &quot; para " (double quotation)
&Eacute; para la É
&Iacute; para la Í
&Oacute; para la Ó
&Uacute; para la Ú
&ntilde; para la ñ
&Ntilde; para la Ñ
&uuml; para la ü
&Uuml; para la Ü
&#161; para ¡

Para entender un poco más este proceso, veamos el siguiente ejemplo:

EJEMPLO 2:
<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&deg;c hace bastante fr&iacute;o.
Este es un ejemplo de p&aacute;gina WEB :)
</body>
</html>

Luego de realizar el proceso para grabar y actualizar la página notara que se incluyen en la página
los símbolos de grados, la i con acento y la a con acento.
Notará también que el texto se encuentra de corrido en una sola fila, para bajar de línea utilizaremos
la siguiente etiqueta especial ...

Etiqueta <br>
La etiqueta <br> instruye al navegador cliente que inserte un salto de línea en un documento
HTML. La etiqueta <BR> tiene el mismo efecto que un retorno de carro en una máquina de escribir.
Es una etiqueta especial, pues no precisa de etiqueta de cierre.

4
 Instituto Nacional “San Luis” Soyapango -INSAL-
2do Año Informática
Etiqueta <font> </font>
Esta etiqueta proporciona al autor un medio de personalizar el texto con respecto al tipo de fuente,
tamaño y color. Atributos:
• Color: determina el color que se aplica al texto
• Size: determina el tamaño relativo del texto. Los tamaños válidos son del 1 al 7, siendo el
predeterminado el 3 y el más grande el 1.
• Face: asigna una fuente o tipo de letra.
Ejemplificando, introduciremos lo siguiente: Bolivia. Note que la primera B es más grande que el
demás texto. Usaremos el tamaño 7 para la letra B y el tamaño estándar (3) para las demás letras.

Ejemplo a:
<Font size= “20px” color= “red”>
Comentario (Línea o líneas de texto)
</Font>

Ejemplo b:
<Font size= 2 color= “red” face= “arial”>
Comentario
</Font>

EJEMPLO 3:
<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&deg;c hace
bastante fr&iacute;o.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de p&aacute;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&oacute;n it&aacute;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>

<PRE> </PRE> Permite que el texto que se encuentre dentro de ella se visualice tal como se creó en
la página origen, respetando espaciado, salto de línea, salto de párrafo, tabulación, etc.
<BR> Realiza un salto de línea. Esta etiqueta no necesita cerrarse.

<P> Realiza un salto de párrafo. Tampoco necesita cerrarse.

5
 Instituto Nacional “San Luis” Soyapango -INSAL-
2do Año Informática
<PRE> </PRE> Posiciona el texto seleccionado en el centro de la página. También puede aplicarse
a gráficos.

<Hx> </Hx> Se utiliza para resaltar encabezados. La x son números que van del 1 al 6, siendo el 1
el encabezado más grande y resaltado, el 2 un poco menos y así sucesivamente.
Etiqueta de comentarios <!-- -->
Se trata de una etiqueta que puede ser introducida en cualquier parte del código y que es utilizada
para realizar acotaciones y/o comentarios.
Sintaxis de Ejemplo:
<!-- Los comentarios se introducen de esta manera -->

EJEMPLO 4:
<H1>Encabezado</H1>
<H2>Encabezado</H2>
<H3>Encabezado</H3>
<H4>Encabezado</H4>

<FONT SIZE=x> </FONT>

Sirve para cambiar el tamaño de las letras. La x es un número que indica el tamaño de la letra y va
del 1 al 7. El número predeterminado es el 3.

Texto en <B>Negritas</B>
Texto en <I>Itálica</I>
Texto <U>subrayado</U>
<ADDRESS>
Dirección
</ADDRESS>
<HR>
Se utiliza como línea separadora. Tiene algunos atributos que la modifican. WIDTH indica la longitud,
SIZE indica la altura, ALIGN la colocación de la línea y NOSHADE que no tenga relieve y además le
añade un color gris más fuerte.

Ejemplo:
<HR>
<HR WIDTH=20% ALIGN=RIGHT SIZE=7>
<HR WIDTH=250 ALIGN=CENTER SIZE=5 NOSHADE>
Vamos a utilizar en nuestra página algunas de éstas etiquetas para modificar texto. Carga
prueba.htm y teclea lo siguiente:

EJEMPLO 5:
<HTML>
<HEAD>
<TITLE>Historia de Internet</TITLE>
</HEAD>
<BODY>
<h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br>
<h3>Introducción</h3><p>
El mundo de las telecomunicaciones ha tenido un crecimiento acelerado
6
 Instituto Nacional “San Luis” Soyapango -INSAL-
2do Año Informática
en los últimos años, en el que <b>Internet</b> ha sido
pieza clave. Hace unas décadas atrás, cuando el Departamento de
Defensa de los Estados Unidos desarrollaba una red de comunicaciones
que fuera capaz de soportar un ataque externo durante la guerra fría,
nadie se imaginó que después de transferir el control de esa red
llamada <u>ARPANET</u> a los investigadores universitarios,
ésta crecería exponencialmente involucrando significativamente a
toda la sociedad.
<hr>
<font size=2>Documento creado en Febrero del 2000</font>
</BODY>
</HTML

Presiona el enlace para ver nuestra página después de agregar más información y de utilizar algunos
de los modificadores de texto explicados en esta sección. Ver página web.

¿CÓMO SE UTILIZAN LOS COLORES EN HTML?

Se pueden llegar a tener 16 millones de colores en una página web.
Existen dos formas para aplicar colores a una página web:
1. Se especifica el color deseado directamente con el nombre del color en ingles: Ej: blue, green,
yellow
2. Se especifica el color deseado mediante números hexadecimales mediante la siguiente estructura:

#RRVVAA
Dónde:
RR: Es un número indicativo de la cantidad de color rojo
VV: Es un número indicativo de la cantidad de color verde
AA: Es un número indicativo de la cantidad de color azul

Estos números indican en numeración Hexadecimal indican la cantidad del color primario.
En la mezcla final se da el resultado. Esta numeración se caracteriza por tener 16 dígitos (en lugar
de los diez de la numeración decimal habitual). Estos dígitos son:
0123456789ABCDEF
Es decir, que en nuestro caso, el número menor es el 00 y el mayor el FF. Así, por ejemplo, el color
rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro dos colores

Colores Primarios Otros Colores

Color Color
Código Hexadecimal Código Hexadecimal
#FF0000 ROJO #00FFFF CYAN
#00FF00 VERDE #FF7F00 CORAL
#0000FF AZUL #C0C0C0 PLOMO
#FF00FF MAGENTA #4F2F4F VIOLETA
#9900DD MORADO #000080 AZUL MARINO
#FFFFFF BLANCO #A62A2A CAFÉ
#000000 NEGRO #70DB93 AGUA MARINA
#FFFF00 AMARILLO #FF7050 ANARANJADO

7
 Instituto Nacional “San Luis” Soyapango -INSAL-
2do Año Informática
Para hacer un tono más oscuro del color elegido hay que reducir el número de su componente,
dejando los otros dos invariables. Así, el rojo #FF0000 se puede hacer más claro con #AA0000, o
más oscuro con #550000.
Para hacer que un color tenga un tono más suave (más pastel), se deben variar los otros dos colores
haciéndolos más claros (número más alto), en una cantidad igual. Así, podemos convertir el rojo en
anaranjado con #FF7050.

Colores del texto y de los enlaces:

Podemos cambiar el color al texto y a sus enlaces en toda la página. Las etiquetas son:
TEXT: Color del texto.
LINK: Color de los enlaces.
VLINK: Color de los enlaces visitados.
ALINK: Color de los enlaces activos (el que adquieren en el momento de ser pulsados).
La etiqueta, con todas sus posibilidades quedaría así (a continuación de
<BODY>):
<BODY BGCOLOR="# RRVVAA" TEXT="# RRVVAA" LINK="# RRVVAA" VLINK="#
RRVVAA " ALINK="# RRVVAA">
Cambio del color de una parte del texto (y no en toda la página):
<FONT COLOR="#0000FF"> Este texto es de color azul </FONT>

¿Cómo colocar un color de fondo en toda la pagina web?

Utilizando los datos, vistos anteriormente haremos una página con Fondo Celeste y Letras Legras.
Usaremos para este efecto los atributos bgcolor y text. :

Ejemplo:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor=”#C0D9D9” text=”#000000”>
Bienvenidos al curso de HTML
</body>
</html>

Guarde este archivo seleccionando la opción de Guardar/Grabar de su editor de texto, de modo

que se mantenga el nombre index.htm. Cuando usted vaya a su navegador WWW y seleccione la
opción de Actualizar, notara el cambio. Con el fin de hacer un documento más agradable y atractivo
a la vista, es necesario en algunas ocasiones resaltarlo con un color diferente. Esto se puede aplicar
al fondo, a un enlace, al texto, a una palabra o a una letra. Para poder representar un color en html,
se deben utilizar 6 números hexadecimales. Aunque se ve un poco complicado en realidad no lo es.
Lo que te recomiendo hacer es jugar con las combinaciones hasta que encuentres la que te gusta.
Tomando los colores básicos de la tabla anterior puedes variar los números (0-9) o las letras (A-F) y
ver cómo cambian las tonalidades. Html también acepta los nombres de los colores en lugar de los
números hexadecimales, por ejemplo "RED" en lugar de "FF0000", o "BLUE" en lugar de "0000FF",
pero tiene la limitante de que solamente reconoce unos cuantos colores.
Se pueden seleccionar los colores deseados desde el inicio del documento en la etiqueta <BODY>
</BODY > por ejemplo:

8
 Instituto Nacional “San Luis” Soyapango -INSAL-
2do Año Informática
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF">
Donde:
BGCOLOR: Es el color del fondo.
TEXT: Es el color del texto.
LINK: Es el color del enlace.
Ojo: En este ejemplo se ve que antes del color siempre se coloca un signo "#".

También se puede cambiar el color sólo para un segmento deseado como:

<FONT COLOR="#FF0000">Texto</FONT>

Sigamos con nuestro ejemplo; cargamos el archivo prueba.htm y le agregamos lo siguiente:

EJEMPLO 6:
<HTML>
<HEAD>
<TITLE>Historia de Internet</TITLE>
</HEAD> <BODY BGCOLOR="#0FF0FF">
<h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br>
<h3>Introducción</h3><p>
El mundo de las telecomunicaciones ha tenido un crecimiento acelerado
en los últimos años, en el que <b>Internet</b> ha sido
pieza clave. Hace unas décadas atrás, cuando el <font color=RED>Departamento de Defensa de los
Estados Unidos</font> desarrollaba una red de comunicaciones
que fuera capaz de soportar un ataque externo durante la guerra fría,
nadie se imaginó que después de transferir el control de esa red
llamada <u>ARPANET</u> a los investigadores universitarios,
ésta crecería exponencialmente involucrando significativamente a
toda la sociedad.
<hr>
<font size=2>Documento creado en Febrero del 2000</font>
</BODY>
</HTML>

Las modificaciones hechas a nuestro archivo deben ser evidentes. En la etiqueta <BODY> </BODY>
hemos agregado un determinado color para el fondo. También hemos especificado que sólo un
segmento del texto sea de color rojo.
Presiona para ver nuestro diseño: Ver página web

IMÁGENES EN HTML
Hasta este momento se ha trabajado solamente con texto. Comenzamos a introducir gráficos en
nuestra página en HTML.

Se deben tener dos consideraciones importantes para trabajar con gráficos:

Los únicos formatos, que por ahora soportan los visualizadores son: *.gif y *.jpg o *.jpeg.
Las imágenes no deben ser de tamaño grande porque el visualizador o navegador puede demorar
demasiado en bajarlas.
Acá trabajaremos también con el atributo background de la etiqueta <body> que había quedado
pendiente.
9
 Instituto Nacional “San Luis” Soyapango -INSAL-
2do Año Informática
La idea de trabajar con un fondo en una página 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 gráficos. Trate de que el color de fondo de la página (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
vínculos definidos en <body>.
Supondremos tenemos un gráfico llamado “fondo.gif” para el ejemplo 8 que como notará será re
formulado en función a utilizar las nuevas etiquetas.

Importante:
En Internet por lo general una mayúscula no es igual a una minúscula. Tome en cuenta esto al
utilizar y hacer referencia a archivos. Como sugerencia es bueno tener todos los archivos con
minúsculas.

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 básico para incluir un gráfico es:
<img src=”imagen.ext”>
No es necesario re dimensionar en forma permanente un archivo gráfico 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 gráfico (en pixeles o en porcentaje)
• Width: para redimensionamiento de gráfico (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 además es un hipervínculo:
• Borde: Definido en pixels
La imagen también puede alinearse con respecto al texto:
• ALIGN: Alineación, puede ser: TOP, MIDDLE, BOTTOM, LEFT y RIGHT
En caso de que la imagen no pueda exhibirse, se puede desplegar un texto:
• ALT: Especifica el texto alterno
Es a partir de este ejemplo, que se va a realizar una nueva página, la misma que llamaremos
pag2.html o bien pude ser grabada con otro nombre.
Supondremos contamos con un gráfico llamado foto.jpg.

EJEMPLO 7:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif">
<center><h1>
Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Informaci&oacute;n General</h2>
Este curso muestra los conceptos b&aacute;sicos del uso de etiquetas e instrucciones en la
elaboraci&oacute;n de
documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br>
<center><img src="foto.jpg" border="1" alt="Foto de Claudia"></center>
<br>

 10 
 Instituto Nacional “San Luis” Soyapango -INSAL-
2do Año Informática
Es muy importante saber ubicar los gr&aacute;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&aacute;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 página “pag2.htm” y cargue la nueva
página en su navegador.

Dimensionando la imagen:
Los navegadores cuando cargan un documento HTML y encuentran una etiqueta de una imagen,
piden al servidor que les envíe únicamente este archivo. Cuando carga la imagen, recién después
cargan los demás datos porque necesita de la imagen para ir armando la página. Para que el
navegador sepa qué tamaño tiene la imagen y siga cargando los otros datos de la página (textos), se
le puede indicar qué tamaño tendrá y así reservará tal lugar.
Para indicar el tamaño en ancho y alto, las etiquetas son...
WIDTH (ancho)
HEIGHT (alto)
Por ejemplo, para imagen1.jpg:
<IMG SRC="imagen1.jpg" WIDTH=200 HEIGHT=100>
De tal manera, podemos decirle al navegador que muestre la imagen en otro tamaño del que
realmente tiene. Podemos decirle...
<IMG SRC="imagen1.jpg" WIDTH=100 HEIGHT=50>

FONDOS CON UNA IMAGEN:

La segunda alternativa es ponerle una imagen de fondo a la página en formato
GIF o JPEG. Esta imagen se repite por toda la página en forma de tapiz.
La estructura de la etiqueta es:
<BODY BACKGROUND="fondo1.gif">

A esta etiqueta puede agregársele otras para el texto y los enlaces.

Hay que tener en cuenta que el visitante puede tener deshabilitada carga de imágenes. Esto podría
ocasionar que el texto no sea legible (depende de cómo lo hayamos armado). Para evitar el
problema, si se pone un fondo que al no ser cargado pueda traer problemas con el texto, también
podemos cargar un color que sí lo permita.
En tal caso, el color aparecerá si la imagen no es cargada.
Si queremos poner como fondo con una imagen cuya tonalidad general es verde
y arreglamos los colores del texto para que haga un buen contraste, entonces debemos cargar un
color parecido a continuación.
La etiqueta quedaría así:
<BODY BACKGROUND="fondo5.jpg" BGCOLOR="#0000FF">

Una característica muy importante en las páginas de Internet son los gráficos o imágenes. Estos
elementos contribuyen a hacer más completa una página proporcionando mayor realce. Las
imágenes se pueden usar como fondo de nuestra página, como complemento y apoyo visual para
 11 
 Instituto Nacional “San Luis” Soyapango -INSAL-
2do Año Informática
cierta información, vínculos hacia otras páginas, etc. Los formatos de imágenes más comunes en
Internet son los .gif y .jpg, así que si queremos introducir un gráfico, éste tiene que cumplir con estos
formatos.
Para agregar una imagen en un documento se utiliza la etiqueta <IMG>.

Ejemplo:
<IMG SRC="home2.jpg" ALT="Casa azul">
Casa azul

Donde:
IMG: indica el deseo de cargar una imagen.
SRC: indica la ruta en la que se encuentra nuestro gráfico. Este puede estar en el mismo directorio
de nuestra página, en otro directorio, o incluso en un servidor en algún lugar del mundo.
Ejemplo:
<IMG SRC="../web/imagen/home2.jpg" ALT="Casa azul">
ALT: asigna un nombre a la imagen para que cuando alguien cargue nuestra página desde un
navegador que no despliegue gráficos, pueda saber que en ese lugar existe una imagen.

Existen una serie de atributos que modifican las imágenes de diferente forma, aquí están algunos:
ALIGN=left|right|top|middle|bottom
Las opciones para ALIGN sitúan al gráfico en diferentes posiciones con respecto al texto.
BORDER=n
Le agrega un borde a la imagen y "n" indica el grosor.
WIDTH=n, HEIGHT=n
Especifican la altura y la anchura de la imagen, cuyas unidades se dan en pixels.
VSPACE=n, HSPACE=n
Se utiliza para dejar espacio tanto vertical como horizontal entre la imagen y el texto que la rodee.
Este ejemplo mostrará una imagen alineada a la izquierda del texto y separada de él horizontalmente
10 unidades con un borde de grosor 2.
Agreguemos ahora una imagen a nuestro diseño. Carga prueba.htm y realiza la modificación.

EJEMPLO 8:
<HTML>
<HEAD>
<TITLE>Historia de Internet>/TITLE>
</HEAD>
<BODY BGCOLOR="#0FF0FF">
<h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br>
<h3>Introducción</h3><p>
El mundo de las telecomunicaciones ha tenido un crecimiento acelerado
en los últimos años, en el que <b>Internet</b> ha sido
pieza clave. Hace unas décadas atrás, cuando el <font color=RED> Departamento de Defensa de los
Estados Unidos </font> desarrollaba una red de comunicaciones que fuera capaz de soportar un
ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa
red llamada <u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente
involucrando significativamente a toda la sociedad.
<hr>
<font size=2>Documento creado en Febrero del 2000</font>
 12 
 Instituto Nacional “San Luis” Soyapango -INSAL-
2do Año Informática
<center><IMG SRC="home2.jpg" ALT="Casa azul"></center>
</BODY>
</HTML>
MULTIMEDIA EN HTML
(IMÁGENES-VIDEOS-AUDIOS)

Etiqueta <EMBED>:
La etiqueta EMBED nos permite insertar contenido multimedia (videos, imágenes y sonido) en
nuestra página con los atributos SRC, WIDTH y HEIGHT, donde SRC indica la ruta del archivo a
insertar, WIDTH representa el ancho de la ventana a proyectar en la página, HEIGHT indica el alto
de la ventana a proyectar en la página.

Ejemplo:
<EMBED SRC="Historia-Internet.mp4" WIDTH=300 HEIGTH=55>

MUSICA DE FONDO EN NUESTRAS PAGINAS WEB

A nuestra página podemos agregarle música de fondo pero sólo se escuchará si
La computadora del visitante está preparada para procesarlo y un navegador que soporte su
recepción y reproducción.
Los formatos más comunes son los .mid y .wav aunque actualmente hay otros que son de mejor
calidad. Pero para el ejemplo trabajaremos con los más comunes.
Hay que tener en cuenta que no todos los navegadores soportan sonido ni las mismas órdenes para
su reproducción.

Ejemplo: (Para el Navegador Goolge Crome)

<EMBED SRC=”Musica.mp3” HIDDEN =”TRUE”> (Para conseguir que la consola sea invisible)

(NOTA: Funciona solo para navegador Google Chrome).

<EMBED SRC=”Música.mp3” WIDTH=200 HEIGTH=55> (Inserta una ventana con los botones
de control de audio)

Internet Explorer utiliza la siguiente etiqueta...

<BGSOUND SRC="fichero_de_sonido" LOOP=n>
El atributo LOOP (en inglés, lazo) sirve para especificar el número (n) de veces que se debe ejecutar
el fichero de sonido. Si se escoge el número n=-1 o se pone
LOOP=infinite, el sonido se ejecutará indefinidamente. Si se omite este atributo, y entonces el fichero
se ejecutará una sola vez.
Netscape utiliza otra etiqueta...

<EMBED SRC="fichero_de_sonido" WIDTH=xxx HEIGHT=yy>

WIDTH es la anchura y HEIGHT la altura de una consola de control que aparece y que tiene
diferentes teclas (play, stop, pausa, etc.). El valor recomendado para xxx es de 200 y para yyy es de
60.
Dentro de la etiqueta se pueden añadir los siguientes atributos...
AUTOSTART="true" (arranca automáticamente).
LOOP="true" (se ejecuta ininterrumpidamente).
La etiqueta queda de esta manera...
 13 
 Instituto Nacional “San Luis” Soyapango -INSAL-
2do Año Informática
<EMBED SRC="música.mid" WIDTH=200 HEIGHT=55>
Para conseguir que la consola sea invisible hay que añadirle el atributo
HIDDEN="true"...
<EMBED SRC="música.mid" HIDDEN="true">
Fondo sonoro combinado para el Explorer y el Netscape
Para que nuestro fondo sonoro se ejecute por visitantes que utilicen Explorer o
Netscape indistintamente debemos poner ambas etiquetas de llamada.
<BGSOUND SRC="música.mid">
<EMBED SRC="música.mid" HIDDEN="true">

Ejemplo A:
<EMBED SRC= “Nombre del archivo de audio.mp3” HIDDEN= “TRUE” (Solo para Google
Chrome)

Ejemplo B:
<EMBED SRC= “Nombre del archivo de video.mp4” HIDDEN= “TRUE” (Solo para Google
Chrome)

ENLACES, HIPERVINCULOS (LINKS) EN HTML

El poder verdadero de html radica en la capacidad de manejar hipertexto o hipermedios como
algunos le llaman, y se logra por medio de enlaces o links. Esto es, a través de un click en un
segmento de texto o una imagen, es posible encontrar más información relacionada con la que
originó ese click. Dicha información puede encontrarse en otras páginas dentro y fuera de nuestro
servidor*, o en algún punto concreto de páginas dentro y fuera de nuestro servidor. La computadora
donde tenemos montada nuestra página.
El enlace por definición aparecen en nuestras páginas subrayadas y de color azul. Como ya se vió
anteriormente, el color del enlace puede cambiarse al gusto.

La etiqueta encargada de establecer un enlace es:

<A> </A>.
Dentro de esta etiqueta está la función HREF en la cual se debe indicar la dirección donde está la
información a enlazar y también el tipo de protocolo utilizado. Con HREF es posible también hacer
enlaces directos hacia imágenes, sonidos, etc.
*El protocolo son las normas o reglas utilizadas para diferentes tipos de servicios como documentos
hipertexto, transferencia de archivos, correo electrónico, etc. Ejemplo: HTTP, FTP, MAILTO,
GOPHER, etc.

Ejemplo:
<A HREF="http://www.usatoday.com">Periódico USA Today</A>
Periódico USA Today
Dale un click al enlace creado y después pulsa "Back" o "Atrás" para regresar.
Este ejemplo muestra un link hacia otra página fuera de la nuestra en otro servidor.

Ejemplo:
<A HREF="index.html">Página principal>/A>
 14 
 Instituto Nacional “San Luis” Soyapango -INSAL-
2do Año Informática
Página principal
Dale un click al enlace creado y después pulsa "Back" o "Atrás" para regresar.
Este ejemplo muestra un link hacia otra página dentro del mismo servidor en el que se encuentra
esta página tutorial de html.

También es posible crear un enlace a través de una imagen en lugar de utilizar un segmento
de texto: Esto se hace de la misma manera que los ejemplos anteriores, sólo que en lugar de
escribir texto entre las etiquetas se inserta una imagen como las que ya hemos visto.

Ejemplo:
<A HREF="http://www.google.com"><IMG SRC="logo.gif"></A>
Dale un click al enlace gráfico creado y después pulsa "Back" o "Atrás" para regresar.
Este ejemplo muestra un link gráfico hacia otra página web.

 15 