|
En noviembre de 1995 se aprobó el estándar HTML 2.0. para la
creación de páginas web. Se creó con objetivos divulgativos, orientado a la
actividad académica, en el que el contenido de las páginas era más
importante que el diseño.
Pero esta versión del HTML carecía de muchas herramientas que
permitieran controlar el diseño de las páginas y añadir contenido
multimedia, por lo que Netscape (cuyos navegadores eran los más utilizados
por aquellos años) comenzó a incluir nuevas etiquetas que no existían en el
estándar.
El comité encargado de establecer los estándares dentro de Internet,
comenzó a trabajar en el borrador de una nueva versión de HTML, el borrador
de HTML 3.0.
Pero este borrador resultó demasiado extenso, al intentar incluir
numerosos nuevos atributos para etiquetas ya existentes, y la creación de
otras muchas etiquetas nuevas. Por ello, no fue bien aceptado por el
mercado y varias compañías se unieron para formar un nuevo comité encargado
de establecer los estándares del HTML. Este comité pasó a llamarse W3C.
En enero de 1997 se aprobó el estándar HTML 3.2. Este nuevo estándar
incluía las mejoras proporcionadas por los navegadores Internet Explorer y
Netscape Navigator, que ya habían realizado extensiones sobre el estándar
HTML 2.0.
En diciembre de 1997 se aprobó el estándar HTML 4.0, creado para
estandarizar los marcos (frames), las hojas de estilo y los scripts.
En septiembre de 2001 se aprobó el estándar HTML 4.01.
Los navegadores.
Compatibilidad
|
|
|
Como hemos dicho, el navegador instalado en el ordenador del
usuario es el que interpreta el código HTML de la página que visita por
lo que a veces puede ocurrir que dos usuarios visualicen la misma página
de forma distinta porque tienen instalados navegadores distintos o
incluso versiones distintas del mismo navegador.
Los navegadores de hoy en día pretenden ser compatibles con la
última versión de HTML. Es necesario realizar extensiones de los
navegadores para que puedan ser compatibles con esta última versión.
Dos de los navegadores que continuamente están realizando extensiones
son Internet Explorer y Netscape Navigator,
que realizan extensiones incluso antes de que se establezcan los
estándares, intentando incluir las nuevas funciones incluidas en los
borradores.
Los navegadores tienen que ser compatibles con la última versión
HTML para poder interpretar el mayor número posible de etiquetas. Si un
navegador no reconoce una etiqueta, la ignora y el efecto que pretendía
la etiqueta no queda reflejado en la página.
Para realizar las extensiones de estos navegadores se añaden
nuevos atributos a las etiquetas ya existentes, o se añaden nuevas
etiquetas.
|
|
|
Como resultado a estas extensiones, habrán páginas cuyo código
podrá ser interpretado completamente por todos los navegadores, mientras
que otras, al incluir nuevos atributos o etiquetas del borrador de la
última versión de HTML, solo podrán ser interpretadas en su totalidad en
los navegadores más actualizados.
En este último caso también puede ocurrir que alguna etiqueta de
la página solamente pueda ser interpretada por un navegador concreto, y
otra etiqueta por un navegador diferente al anterior, por lo que nunca
sería visualizada en su totalidad por ningún navegador.
Uno de los retos de los diseñadores de páginas web es hacer las
páginas más atractivas utilizando toda la potencia del lenguaje HTML pero
teniendo en cuentas estos problemas de compatibilidades para que el mayor
número de internautas vean sus páginas tal como las ha diseñado.
|
|
Un editor es un programa que nos permiten redactar documentos. Hoy
en día existen un gran número de editores que permiten crear páginas web
sin la necesidad de escribir ni una sola línea de código HTML. Estos
editores disponen de un entorno visual, y generan automáticamente el
código de las páginas. Al poder ver en todo momento cómo quedará la
página en el navegador, se facilita la creación de las páginas, y el uso
de menús permite ganar rapidez.
Estos editores visuales pueden generar en ocasiones código basura,
es decir, código que no sirve para nada, en otras ocasiones puede ser más
efectivo corregir directamente el código por lo que resulta necesario
saber HTML para poder depurar el código de nuestra páginas.
|
|
Algunos de los editores visuales con los que podrás crear tus
páginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe
Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape
Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser
gratuitos.
En aulaClic puedes encontrar los cursos de Macromedia Dreamweaver
y Microsoft Frontpage, dos de los editores más usados hoy en día.
Es aconsejable comenzar utilizando una herramienta lo más sencilla
posible, para tener que insertar nosotros mismos el código HTML. Esto
permite familiarizarse con el lenguaje, para poder utilizar algún editor
visual posteriormente, y depurar el código cuando fuera necesario.
Para crear páginas web escribiendo directamente el código HTML
puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona
Windows.
|
|
|
A lo largo de este curso vamos a trabajar con el Bloc de
notas para crear nuestras páginas, ya que se trata de un editor
de textos muy sencillo de manejar, que nos permitirá crear páginas a
través del código HTML.
|
|
Las etiquetas o marcas delimitan cada uno de los elementos que
componen un documento HTML. Existen dos tipos de etiquetas, la de
comienzo de elemento y la de fin o cierre de elemento.
La etiqueta de comienzo está delimitada por los caracteres < y >.
Está compuesta por el identificador o nombre de la etiqueta, y puede
contener una serie de atributos opcionales que permiten añadir ciertas
propiedades. Su sintaxis es: <identificador atributo1
atributo2 ...>
Los atributos de la etiqueta de comienzo siguen una sintaxis
predefinida y pueden tomar cualquier valor propio del usuario,
o valores HTML predefinidos.
La etiqueta de final está delimitada por los caracteres </ y >.
Está compuesta por el identificador o nombre de la etiqueta, y no
contiene atributos. Su sintaxis es: </identificador>
Cada uno de los elementos de la página se encontrará entre una
etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepción
de algunos elementos que no necesitan etiqueta de cierre. También es
posible anidar etiquetas, es decir, insertar etiquetas entre otras
etiquetas de comienzo y de cierre.
A continuación 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, Arial, MS Sans Serif">Bienvenidos a
www.aulaclic.com</font></p>
Este código daría como resultado el siguiente texto:
Bienvenidos a www.aulaclic.com
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 etiqueta <font..>.
|
|
Para que te vayas haciendo una idea de cómo crear una página html
a través del Bloc de notas, vamos a crear una página web sencilla,
con una línea de texto.
|
|
|
|
|
Lo primero que tienes que hacer es abrir el Bloc de notas. Para
abrirlo, puedes dirigirte al menú Inicio, Programas, Accesorios,
opción 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 extensión htm, con el
nombre miprimpag.htm. Puedes guardarlo a través del menú Archivo,
opción Guardar.
Pulsando dos veces sobre el icono del archivo miprimpag.htm,
éste debería abrirse automáticamente en el navegador que tengas instalado
en tu ordenador.
El navegador deberá mostrar una página como la de la derecha.
Como puedes ver, la página resultante es una página que solamente
tiene una línea de texto.
|
|
|
Si observas la barra de título del navegador, verás que el título
de la página es MI PRIMERA PAGINA. Este título ha sido
establecido por la línea <title>MI PRIMERA PAGINA</title>.
El color de fondo de la página ha sido establecido por la línea <body bgcolor="#FFCC99">.
El texto Hola, estoy haciendo pruebas. se ha
insertado a través de línea <font color="#CC3300" size="5">Hola,
estoy haciendo pruebas.</font>.
|
|
A lo largo de este tema vamos a aprender a crear una
página básica.
La estructura básica de una página es:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Ahora veamos cómo funcionan estas etiquetas.
|
|
|
|
Identificador del tipo de
documento <html>
|
|
|
Todas las páginas web escritas en HTML tienen que tener la
extensión 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 código HTML de la página.
Por ejemplo:
<html>
...
</html>
|
Cabecera de la página
<head>
|
|
|
La cabecera de la página se utiliza para agrupar información sobre
ella, como puede ser el título.
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 más se utilizan son:
<link>, <style>, <script> (estas
etiquetas las veremos más adelante),
<meta>
<title> que te explicamos a continuación.
|
Título de la página
<title>
|
|
|
El título de la página es el que aparecerá en la parte superior de
la ventana del navegador, cuando la página esté cargada en él.
Para asignar un título a una página 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>
|
|
