Qu es HTML

El HTML (Hyper Text Markup Language) es el lenguaje con el que se

escriben las pginas web. Es un lenguaje de hipertexto, es decir, un
lenguaje que permite escribir texto de forma estructurada, y que est
compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del
documento.
Un documento hipertexto no slo se compone de texto, puede contener
imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse
como un documento multimedia.
Los documentos HTML deben tener la extensin html o htm, para que
puedan ser visualizados en los navegadores los cuales se encargan de
interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios
las pginas web resultantes del cdigo interpretado.
Los navegadores. Compatibilidad
El navegador es el que interpreta el cdigo
HTML de la pgina web por lo que a veces
puede ocurrir que dos usuarios visualicen la
misma pgina de forma distinta porque tienen
instalados navegadores distintos o incluso
versiones distintas del mismo navegador.
Los navegadores de hoy en da pretenden ser
compatibles con la ltima versin de HTML. Es
necesario realizar extensiones de los
navegadores para que puedan ser compatibles
con esta ltima versin.
Los navegadores tienen que ser compatibles
con la ltima versin HTML para poder
interpretar el mayor nmero posible de
etiquetas. Si un navegador no reconoce una
etiqueta, la ignora y el efecto que pretenda la
etiqueta no queda reflejado en la pgina.
Editores
Un editor es un programa que nos permiten redactar documentos. Hoy en
da existen un gran nmero de editores que permiten crear pginas web sin
la necesidad de escribir ni una sola lnea de cdigo HTML.
Estos editores disponen de un entorno visual, y generan automticamente
el cdigo de las pginas. Al poder ver en todo momento cmo quedar la
pgina en el navegador, se facilita la creacin de las pginas, y el uso de
mens permite ganar rapidez.

Estos editores visuales pueden

generar en ocasiones cdigo
basura, es decir, cdigo que no sirve
para nada, en otras ocasiones
puede ser ms efectivo corregir
directamente el cdigo por lo que
resulta necesario saber HTML para
poder depurar el cdigo de nuestra
pginas.
Es aconsejable comenzar utilizando una herramienta lo ms sencilla
posible, para tener que insertar nosotros mismos el cdigo HTML. Esto
permite familiarizarse con el lenguaje, para poder utilizar algn editor visual
posteriormente, y depurar el cdigo cuando fuera necesario.
Para crear pginas web escribiendo directamente el cdigo HTML puedes
utilizar la herramienta Wordpad o el Bloc de notas que proporciona
Windows.
Nosotros utilizaremos el Bloc de notas para crear nuestras pginas, ya que
se trata de un editor de textos muy sencillo de manejar, que nos permitir
crear pginas a travs del cdigo HTML.
Al abrir el bloc de notas aparece un documento en
blanco.
Al escribir en l, funciona como cualquier otro editor de
texto, basta con situar el cursor en el documento y
escribir.
Es recomendable insertar una nueva lnea para cada
nueva etiqueta HTML
Si escribiramos todo el cdigo seguido nos resultara
difcil interpretarlo. por ello es preferible programar
insertando las etiquetas por separado, en diferentes
lneas.
Abrir y guardar documentos
Para abrir un documento web, puedes utilizar cualquiera de las siguientes
operaciones una vez abierto el Bloc de notas.
Pulsar la combinacin de teclas Ctrl+A.
Hacer clic sobre el men Archivo y elegir la opcin Abrir.

Como el Bloc de notas sirve

originalmente para escribir
documentos de texto, cuando le
decimos Abrir, por defecto nos
muestra los documentos con
extensin .txt, nuestras pginas
tienen la extensin .htm o html,
por lo que debemos cambiar en
el cuadro de dilogo abrir el tipo
de archivo para visualizarlos
todos y poder ver as nuestras
pginas.
 Antes de guardar el
documento recuerda
cambiar el tipo de
archivo, selecciona
Todos los archivos.

No debes olvidar guardar

con la extensin htm o html.
Por ejemplo, puedes guardar
un documento con el
nombre mipagina.htm
Etiquetas
Las etiquetas o marcas delimitan cada uno de los elementos que componen
un documento HTML. Existen dos tipos de etiquetas:
LA ETIQUETA DE COMIENZO est delimitada por los caracteres < >. Est
compuesta por el identificador, puede contener atributos opcionales. Su
sintaxis es: <identificador atributo1 atributo2 ...>
Los atributos toman un valor propio del usuario, o valores HTML
predefinidos.

LA ETIQUETA DE FINAL est

delimitada por los caracteres </ >.
Est compuesta por el identificador y
no contiene atributos. Su sintaxis
es: </identificador>
Algunas etiquetas no necesitan
etiqueta de cierre. Tambin es
posible anidar etiquetas, es decir,
insertar etiquetas entre otras
etiquetas de comienzo y de cierre.
A continuacin tenemos un ejemplo en el que tenemos la etiqueta <font>
anidada dentro de la etiqueta <p>.

<p align="center"><font color="#993366" size="4" face="Comic Sans

MS">Bienvenidos a la Clase</font></p>

Este cdigo dara como resultado el siguiente texto:

Bienvenidos a la Clase

Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar',

en nuestro ejemplo hemos empezado por la etiqueta <p..>, antes de cerrar
esta etiqueta hemos puesto la <font..> por lo que antes de cerrar la
etiqueta <p..> debemos cerrar la etiqueta <font..>.
Estructura de una pgina
La estructura bsica de una pgina es:
<html>
<head>
... <title> </title>
</head>
<body>
...
</body>
</html>

Todas las pginas web escritas en HTML deben 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>
contenido de la pagina web
</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>
Ttulo de la pgina <title>
El ttulo de la pgina aparecer en la parte superior de la ventana del
navegador. Para asignar un ttulo a una pgina es necesario escribir el texto
deseado entre las etiquetas <title> y </title>. Entre las etiquetas <head>
y </head>. <head>
<title>
Curso de HTML
</title>
</head>
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.
Los tipos de informacin ms utilizados son los siguientes:

Tipo Significado
author Autor de la pgina
Palabras para clasificar la pgina en los
classification
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, 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="Antonio Ortega">
<meta name="description" content="Curso de HTML">
<meta name="keywords" content="cdigo HTML etiqueta pgina
web curso">
</head>
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>
</html>

...
<body bgcolor="blue">
...
</body>
</html>
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:
Color Hexadecimal Nombre
#FFFFFF white
#000000 black
#000080 navy
#0000FF blue
#008000 green
#008080 teal
#00FF00 lime
#00FFFF aqua
#800000 maroon
#800080 purple
#808000 olive
#808080 gray
#C0C0C0 silver
#FF0000 red
#FF00FF fuchsia
#FFFF00 yellow
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>

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>
Mi primera pgina
Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo,
puedes dirigirte al men Inicio, Programas, Accesorios, opcin Bloc de
notas.
Seguidamente introduce, en el documento en blanco, el texto siguiente:
<html>
<head>
<title>MI PRIMERA PAGINA</title>
</head>
<body bgcolor="#FFCC99">
<font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>
</body>
</html>

Guarda el documento con la extensin html, con el nombre miprimpag.htm.

Puedes guardarlo a travs del men Archivo, opcin Guardar.

Pulsando dos veces sobre el icono del archivo miprimpag.htm, ste debera
abrirse automticamente en el navegador que tengas instalado en tu
ordenador.
El texto
Caracteres especiales y espacios en blanco
Los caracteres < y > son dos caracteres especiales que indican inicio y fin
de etiqueta. Si se desea insertar estos caracteres como texto hay que
escribir el nombre que los representa:

< Se representa con &lt;

> Se representa con &gt;

Existen otra serie de caracteres que no se visualizan correctamente en

algunos navegadores, como es el caso de la y las letras acentuadas, por
lo que al igual que ocurre con los caracteres especiales < y >, para
insertarlos como texto habra que escribir el nombre que los representa.

A continuacin se muestra una lista con algunos caracteres y el nombre con

el que han de ser representados:
Carcter Representacin Carcter Representacin
< &lt; &euro;
> &gt; &ccedil;
&aacute; &Ccedil;
&Aacute; &uuml;
&eacute; &Uuml;
&Eacute; & &amp;
&iacute; &iquest;
&Iacute; &iexcl;
&oacute; " &quot;
&Oacute; &middot;
&uacute; &ordm;
&Uacute; &ordf;
&ntilde; &not;
&Ntilde; &copy;
&#153; &reg;
Siempre que se inserta texto en HTML hay que tener en
cuenta que si se escriben varios espacios en blanco seguidos
solamente se mostrar uno en el navegador.

Para conseguir que se muestren varios espacios en blanco

seguidos puede sustituirse cada uno de ellos por &nbsp;.

Por ejemplo, para insertar el texto:

Bienvenidos, esta es mi 1 pgina!

Habra que escribir:

&iexcl;Bienvenidos, esta es mi&nbsp;&nbsp;&nbsp;
1&ordf;&nbsp;&nbsp;&nbsp;p&aacute;gina!