Tema 2

HTML

Charo Garrido García

Cooperativa de Enseñanza
José Ramón Otero
HTML.
HTML (Hyper Text Markup Language) es un lenguaje de marcas que permite desarrollar
páginas web a ttravés de WWW (World Wide Web).

Navegadores Web.
Un navegador web es un programa que se utiliza para mostrar sitios web. (pueden
ampliar sus características con plugings)
Primer navegador: MOSAIC.
Un grupo de los desarrolladores de MOSAIC, desarrollaron NETSCAPE en 1994.
Poco después fue Microsoft con Internet Explorer el que ocupó gran parte del mercado.
Actualmente existen varios en el mercado.
 Historia de HTML.
• HTML (Tim Berners Lee 1991). Primer documento.

• En 1993 se realizaron mejoras. Versión HTML 1.2

• En 1995 IETF (Internet Engineering Task Force), publicó el primer estándar oficial. Incorporación de formularios. Comienza la interacción
con el usuario. HTML 2.0 Se creó para diferenciarla de los estándares no oficiales

• En 1995 HTML 3.0 nunca pasó de la edición borrador W3C. La popularidad del navegador Netscape, trajo consigo mejoras “propias”, que
fueron incluidas en otros navegadores por lo que empezó a haber incompatibilidades entre navegadores.
• En 1997 se publica la versión HTML 3.2 por la organización W3C que es la organización creada para publicar los estándares oficiales de
HTML. HTML 3.2 se encargó de legalizar la mayoría de las mejoras realizadas por los navegadores comerciales. Esta revisión incorpora los
últimos avances de las páginas web, como applets de Java y tablas.

• En 1998 se publica HTML 4.0 trató de normalizar el lenguaje e introdujo mejoras propuestas por los fabricantes. Entre ellas, mejoras
para scripts, hojas de estilo CSS, ..etc.

• Se modificó ligeramente en 1999 dando lugar a HTML 4.01 que ha sido la versión utilizada hasta hace pocos años.

• En el año 2000 el W3C publicó XHTML 1.0 intentando realizar un esfuerzo para regularizar la construcción de los documentos, haciendo
un control riguroso de su sintaxis. Se ha convertido en un estándar muy utilizado por los desarrolladores.

• En el año 2003 surgen los XFORMS, que son los formularios de XHTML y que mejoran los anteriores ya que separan el contenido de la
presentación y esto permite un mayor ajuste al dispositivo en que se muestra (pc, teléfono móvil, portátil, pda…)

• En 2007 W3C junto con un grupo de empresas desarrolladoras (Apple, Mozilla y Opera) agrupadas bajo el nombre WHATWG, se unieron
para desarrollar HTML 5. Que si bien, aún no todos los navegadores lo soportan, poco a poco se va utilizando más y se supone que se
convertirá en el estándar más utilizado en poco tiempo.
 Internet y la evolución de la Web.
Existen unos test para saber si lo navegadores cumplen los estándares web. Son conocidos como
Acid Test. Existen 3 versiones:

Acid1 fue importante para establecer la interoperabilidad entre los principios de base de
referencia los navegadores web.
Acid2 prueba aspectos de marcas HTML, estilo CSS, imágenes PNG, y data URIs.
Acid3 se centra básicamente en javascript y webs 2.0.

Para poder saber si el resultado del test de un navegador en concreto, solamente hay que abrir la
página http://acid3.acidtests.org/
Herramientas de creación de documentos web.
Editores de texto:

Sencillos De desarrollo
Herramientas de creación de documentos web.
WYSIWYG CMS
(What you see is what you get) Gestores de contenidos
 Condideraciones para crear un sitio web:
Antes de empezar a desarrollar una página web, es importante planificar el
trabajo. Es decir, el tema sobre el que tratará, el tipo de contenidos que tendrá,
cómo almacenar los distintos ficheros, qué nombres se les dará… etc.
Es una buena costumbre realizar un esquema indicando los elementos principales
de la página (Títulos, párrafos, enlaces, imágenes..)
Es muy importante organizar los archivos. Un buen método es crear una carpeta y
dentro de ella introducir las páginas y otras carpetas cada una para cada tipo de
elemento que se utiliza (ejemplo: videos, canciones, imágenes…etc)
 Nombres de archivos
Es importante cuidar los delos ficheros, debido a que se suelen tener bastantes en un
sitio web.
•Utilizar siempre minúsculas. Para los SSOO case sensitive, como Linux.
•No utilizar caracteres especiales. (acentos, espacios en blanco, la letra ñ ..)
•La página index. Los navegadores, al abrir una url, buscan por defecto la página que se
llama index.html y si existen la cargan. Si yo quisiera acceder a una página de mi sitio
directamente a través de la url que no fuese la página index, tendría que escribir la
dirección de la forma: www.misitio.com/mipagina.html

Direccionamiento
Direccionamiento absoluto: Consiste en dar la dirección completa
http://www.miservidor.com/mi_sitio/imagenes/imagen.jpg
Así, en cuanto cambiemos nuestra página de servidor, no se va a poder acceder al archivo
y aparecerá un mensaje indicando que dicho archivo ha cambiado de lugar.
no es recomendable.

Direccionamiento relativo: Se escribe la dirección relativa a la página que lo llama. Es el

adecuado.
Etiquetas, atributos y valores
Etiqueta:
Las etiquetas son marcas que se usan para señalar el inicio y el fin de un elemento. Y suelen tener
la estructura. La etiqueta suele ir entre los símbolos < y > .

<etiqueta> valor </etiqueta>

Ejemplo: <b> Este texto va en negrita </b>

No todas las etiquetas tienen que ir cerradas. Existen elementos vacíos que no tienen valor y no
necesitan que se cierren:

Ejemplo: <hr>
Etiquetas, atributos y valores
Atributos:

Los atributos complementan la información de la etiqueta y se colocan en la parte de la apertura y

es normal que el valor de los atributos vaya entre comillas. La sintaxis es la siguiente:

<etiqueta atributo1=”valor_atributo1” atributo2=”valor_atributo2”….>

Ejemplo: <img src=”../images/imagen1.jpg”>

<font size=“5”> Hola a todo el mundo </font>

Elementos en bloque y en línea

Si son elementos de bloque siempre aparecerán al principio de una línea y ocupan todo el espacio
hasta el final de la línea.

Si es un elemento en línea aparecerá en la misma línea, a continuación.

Los elementos de bloque pueden contener otros elementos de bloque, elementos de línea y texto.
Los elementos en línea sólo pueden contener otros elementos en línea o texto.

Ejemplo:

<p> Este es un párrafo </p><p>Este es otro <b>y una palabra en negrita</b></p>

El elemento de la etiqueta <p> es un elemento de bloque. El elemento de la etiqueta <b> es en línea.

Los enlaces, son otro ejemplo de elementos junto con las imágenes.
Estructura básica

La etiqueta <html>, indica dónde comienza y finaliza un documento <html>, se pone al principio del
documento, y se cierra en la última línea del mismo.

La etiqueta <head>, delimita la cabecera de un documento. Dentro a se suele introducir información

como el título de la página o meta información para los motores de búsqueda.

La etiqueta <body> delimita el cuerpo del documento podían acompañar atributos como
background, text y bgcolor, aunque están desaprobados en favor de los estilos CSS.
 Ejemplo: <body bgcolor=”blue” text=”white”> Prueba de atributos de body </body>

Estructura básica
Ejemplo: <body bgcolor=”blue” text=”white”> Prueba de atributos de body </body>

Ejemplo:
<body style=”background-color: ”blue”; color: “white”>
Prueba de atributos de body con atributo style
</body>
 Ejemplo: <body bgcolor=”blue” text=”white”> Prueba de atributos de body </body>

Etiqueta title
La etiqueta title va en el head. Asigna un nombre al documento y aparece en la parte superior de la
ventana en que se muestra la página.
Etiquetas meta
Indican información general del documento como el autor, palabras clave para los
buscadores, descripción, tipo de contenido, etc. Se usan en la sección head.

Forma habitual de utilizarla : <meta name="nombre" content="contenido">

• lang (lenguaje en el que está escrito la página también podemos poner language)
Ejemplo: <meta name=”lang” content=”es”>

• description. (Indica el tema o descripción sobre lo que versa la página)

Ejemplo: <meta name=”description” content=”modulo lenguaje de marcas”>

• autor. (especifica el autor de la página).

Ejemplo: <meta name=”author” content=”C. Garrido”>

• keywords (sirve para destacar palabras claves, y facilitar la tarea a los buscadores)
Ejemplo: <meta name=”keywords” content=”lenguaje marcas, html, etiquetas, tags”>
Etiquetas meta
El atributo http-equiv. Esta información es utilizada para mejorar la información sobre el
documento y dar instrucciones a los navegadores que las están leyendo.
• conten-type (indicar el tipo de código utilizado en el documento y el tipo de codificación)
Ejemplo: <meta http-equiv=”content-type” content=”text/html”; charset=”UTF-8”>

• refresh
Ejemplo: <meta http-equiv="refresh" content="5;url=http://www.nuevaurl.es">

El tipo de documento. DOCTYPE

<!DOCTYPE html>
Etiquetas link
La etiqueta <link>, se incluye en la cabecera. Indica que hay un documento anexado,
indicado con el atributo href
Ejemplos:
< link rel=”stylesheet” type=”text/css” href=”../estilos/miestilo.css”>
Se utiliza para asociar a un documento html una hoja de estilos CSS.

<link rel=“prev” href=“ tema3.html”>

Indica que la página anterior es tema3.html, con next sería la siguiente.

<link rel=“alternate” media=“print” href=“tema2-imp.html”

Indica que al imprimir se utilice otro documento.

<link rel=”alternate” lang=”en” title=”VersionIngles” type=”text/html” href=”../ver_ingles/p21en.html” >

También se puede utilizar para indicar que hay una versión de mi página en otro idioma.
Etiquetas script
La etiqueta <script> sirve para introducir un script dentro del documento.
Nos será de gran utilidad cuando trabajemos el tema de JavaScript, ya que gracias a ella
introduciremos éste tipo de código en nuestra página.

<SCRIPT type="text/javascript"> ...some JavaScript... </SCRIPT>

<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc"> </SCRIPT>

Etiquetas style
La etiqueta <style> nos permite asociar una hoja de estilos a nuestro documento.