Manual Básico de HTML

Creación y Estructura de Páginas WEB

Indice
ACERCA EL AUTOR..................................................................................................................1

REQUERIMIENTOS Y MATERIAL..........................................................................................1

LICENCIA.....................................................................................................................................2

HISTORIA.....................................................................................................................................2

¿EN QUÉ CONSISTE EL MANUAL?........................................................................................2

INTRODUCCIÓN.........................................................................................................................3

¿QUÉ ES HTML?..........................................................................................................................3

¿POR DÓNDE COMENZAR?.....................................................................................................3

PÁGINAS WEB.............................................................................................................................4

ETIQUETAS..................................................................................................................................4

ESTRUCTURA BÁSICA DE UNA PÁGINA WEB..................................................................5

¿CÓMO SE UTILIZAN LOS COLORES EN HTML?............................................................7

TEXTO EN HTML........................................................................................................................8

ENCABEZADOS.........................................................................................................................10

UBICACIÓN, FORMATO Y ATRIBUTOS DE TEXTO.......................................................11

IMÁGENES EN HTML..............................................................................................................13

TABLAS.......................................................................................................................................15

NUMERACIÓN Y VIÑETAS....................................................................................................17

HIPERVÍNCULOS......................................................................................................................19

FRAMES......................................................................................................................................21

OTRAS ETIQUETAS ÚTILES..................................................................................................23

NOTAS:........................................................................................................................................27
 Manual Básico de
HTML

Manual Básico de
HTML
Creación y Estructura de Páginas WEB

Acerca el Autor
Mi nombre es Carlos Aníbarro, trabajo con Internet desde mediados de 1995. Soy Ingeniero en
Sistemas y soy propietario del Web Site Bolivia en Internet.

Mi página en el World Wide Web es:

http://www.bolivia-internet.com/cae

Mi correo electrónico es:

[email protected]

Requerimientos y material
Internet es un medio que no precisa de mucho conocimiento, el prerequisito inmediato para
poder usar este manual es tener conocimientos básicos de manejo de Windows, un editor de texto
y haber utilizado alguna vez un navegador de Internet.
Para la aplicación de los ejemplos de este manual usted necesitara:
 Un navegador de Internet
 Un editor de texto, preferentemente el Block de notas (Notepad)
 Un medio físico para grabar los ejemplos, ya sea un disquete o una carpeta en su
disco duro.
 Un archivo para fondo, llamado fondo.gif.
 Un archivo gráfico, llamado foto.jpg.

Página 1
Licencia.
 El manual es gratuito, catalogado dentro de la categoría FREEware.
 Usted podrá hacer uso libre de este manual, sin modificar su contenido.
 Usted NO podrá realizar ninguna modificación al contenido del manual.
 Si desea publicar cualquier parte o el manual entero en su site, precisa de permiso expreso
del autor para este efecto. Póngase en contacto con: [email protected].

Historia
Luego de haber pasado casi un año dando clases de como construir de forma sencilla y sin
muchas vueltas desde una página web hasta un Web Site completo, me animo a lanzar de forma
pública una guía que he querido llamar "Manual Básico de HTML: Creación y diseño de páginas
WEB", la misma que tiene como objetivo mostrar de la manera más sencilla, y basándose en la
práctica y aplicación, como construir páginas HTML.
El Site completo Bolivia en Internet y muchas otros que también he creado, han sido construidos
basados en las normas que son detalladas en este manual.

¿En qué consiste el manual?

Se trata de un manual y guía de instrucciones a la vez, que explica los usos, aplicaciones y
resultados de varias etiquetas (instrucciones) de HTML. Luego de avanzar un grupo de etiquetas
relacionadas se procede a aplicar lo aprendido en un ejemplo para mostrar de forma práctica el
uso de dichas etiquetas.
Se comienza con una página sin mucho brillo, y poco a poco se aplican colores, tamaños,
formato y atributos al texto y a la página en sí. Se termina con una página con frames y que
cuenta con viñetas, listas ordenadas y tablas.
El objetivo es que el usuario pueda ya construir sus web sites luego de 3 horas de ir
experimentando con este manual.
Introducción.
Internet, como está ahora, es una excelente herramienta para búsqueda de información,
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 información a partir de
cero.
Internet está al borde de una pequeña revolución que, aunque usted como usuario no se dé cuenta
de ello, transformará no la forma en que está diseñada o construida, sino la manera en que usted
la utilizará.
De todos los servicios que nos presta Internet, el segundo más 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 ¿Cómo se crean estas páginas Internet?
La respuesta es con HTML

¿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 vínculos con otros documentos.
Los navegadores WWW leen estos archivos de texto e interpretan esas etiquetas para determinar
como desplegar la página Web.

¿Por dónde comenzar?

Lo primero es saber donde crear el archivo texto que contendrá las instrucciones HTML
(Hipertexto), para lo cual tenemos varias opciones:
1. Utilizar programas creados para desarrollo de páginas WEB, entre los que podemos
citar:
 Microsoft Front Page
 Hot Dog
  Microsoft Internet Assistant
 Microsoft Office 97
2. Utilizar un editor de texto y crear nuestro propio código, el mismo que ya no
contendría código basura.
La primera opción es la más sencilla y más rápida, 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 códigos de
la página WEB y uno estaría prácticamente “Arando en el mar”.
La segunda opción es más lenta y menos vistosa, pero esta opción le enseña a utilizar cada uno
de los comandos y instrucciones HTML (etiquetas) sin depender de ningún programa. Esto tiene
sus beneficios y el principal de ellos es que nuestras páginas ya no contarán con código
excedente y/o código basura, de modo que ocuparán menos espacio, por ende serán más rápidas
al momento de ser cargadas por Internet y al invertir menos tiempo en cargar una página, se
gastará menos dinero pagando al proveedor de Internet.

Como casi todos los sistemas más 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.

Páginas 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.

Etiquetas
Una etiqueta cumple su función de la siguiente manera:

<nombre de la etiqueta> Apertura de una etiqueta siempre entre “< >”

texto/gráfico/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 extensión .html o bien .htm. Es
bueno acotar que un archivo HTML es un archivo texto que tiene una extensión definida. Este
archivo de texto contiene etiquetas, las mismas que son expresadas como instrucciones y el
navegador WEB es quien las interpreta.

Estructura básica de una página WEB

Una página web esta compuesta de 2 partes: el encabezamiento y el cuerpo de la página.
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 esta 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 página WEB. Esta etiqueta se abre luego de
<html>.
<body> </body> Cuerpo de la página 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 página, cerrándose antes de </HTML>.

Ejemplo 1:
<html>
<head> </head>
<body>
Bienvenidos al curso de HTML
</body>
</html>

El hipertexto será grabado con el nombre index.html en su disquete o en alguna ubicación en el

disco duro. Al asignar la extensión .html o .html ya se crea un hipertexto.
Asegúrese de ingresar “index.html” como nombre a grabar en su bloque de notas (incluidas las
comillas) para evitar que se añada la extensión .txt.
Sin cerrar el programa de edición de texto que estamos usando, abra su navegador de WWW. En
la pantalla de dirección WEB, introduzca la ruta completa a su archivo index.html, y usted
deberá poder ver en su pantalla su primera página WEB.
Importante:
Como se ve en el ejemplo 1. Toda etiqueta abierta debe cerrarse. En caso de no cerrarse el error
podría causar confusión al navegador.

Etiqueta: <title> </title>

Esta etiqueta va en la parte del encabezamiento de la página web, es decir en el HEAD, y define
en su contenido el título de la página web, mismo 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 index.html, tan solo usando la opción
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 opción de Actualizar/Refresh y nuestra nueva página
estará visible. Notará que el título aparecerá en la parte superior de la página.
Etiqueta <body> </body>
Todo el texto, las imágenes 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 página
 Text define el color del texto de la página
 Link define el color de los vínculos en la página
 Alink define el color del vínculo actual o activado en la página
 Vlink define el color del vínculo ya visitado
 Background define el archivo gráfico que será desplegado como
fondo
 Bgsound define el archivo de audio que se tocará en la página.IE
 Bgproperties define el movimiento vertical del fondo.IE

Los atributos se incluyen en la etiqueta de apertura, separados por un espacio.

¿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
El color tiene un signo de numeral # antecediendo a los 6
números. Existen dos números para cada color principal:
rojo, verde y azul.
Cada uno de los números varía hexadecimal mente {0,1,2....,9,A,B,...F}.