República Bolivariana de Venezuela

Ministerio del Poder Popular Para la Educación

ETCN Pedro Curiel Ramírez

Licda. Lisnelis Hernández

Octubre - 2017
Definición de HTML

 HTML, sigla en inglés de HyperText Markup

Language (lenguaje de marcas de hipertexto), hace
referencia al lenguaje de marcado para la elaboración
de páginas web. Es un estándar que sirve de referencia
del software que conecta con la elaboración de páginas
web en sus diferentes versiones, define una estructura
básica y un código (denominado código HTML) para la
definición de contenido de una página web, como
texto, imágenes, videos, juegos, entre otros.

 HTML es el lenguaje con el que se define el contenido de las páginas web.

Básicamente se trata de un conjunto de etiquetas que sirven para definir el
texto y otros elementos que compondrán una página web, como imágenes,
listas, vídeos, etc.

 HTML es un lenguaje sencillo pensado para presentar información en la

WWW. HTML (HyperText Markup Languaje), como su nombre indica es un
lenguaje de marcas para la creación de hipertextos. Por hipertexto
entenderemos texto con una presentación agradable, con inclusión de
elementos multimedia (gráficos, video, audio) y con la presencia de
hiperenlaces que permiten relacionar otras fuentes de información en
documentos hipertextos. Es el lenguaje utilizado para representar
documentos en la WWW (World Wide Web).
Historia de HTML
HTML surge en 1980, cuando el físico Tim Berners-Lee, trabajador del CERN
(Organización Europea para la Investigación Nuclear) propuso un nuevo sistema
de "hipertexto" para compartir documentos, que eran similares a los enlaces de las páginas
web actuales

Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo presentó a

una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet.
Después de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la
propuesta ganadora llamada WorldWideWeb (W3).

El primer documento formal con la descripción de HTML se publicó en 1991 bajo el

nombre HTML Tags (Etiquetas HTML) y todavía hoy puede ser consultado online a modo
de reliquia informática.

La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por
parte del organismo IETF (Internet Engineering Task Force). Aunque se consiguieron avances
significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios)
ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse
en estándar oficial.

En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar,

el 22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML
2.0 es el primer estándar oficial de HTML.

A partir de 1996, los estándares de HTML los publica otro organismo de

estandarización llamado W3C (World Wide Web Consortium). La versión HTML 3.2 se
publicó el 14 de Enero de 1997 y es la primera recomendación de HTML publicada por el
W3C. Esta revisión incorpora los últimos avances de las páginas web desarrolladas hasta
1996, como applets de Java y texto que fluye alrededor de las imágenes.
Historia de HTML

HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la

publicación original del 18 de Diciembre de 1997) y supone un gran salto desde las versiones
anteriores. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la
posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la
accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.

La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se

denomina HTML 4.01. Se trata de una revisión y actualización de la versión HTML 4.0, por lo
que no incluye novedades significativas.

Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se detuvo y

el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las
empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del
W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web
Hypertext Application Technology Working Group).

La actividad actual del WHATWG se centra en el futuro estándar HTML 5, cuyo primer
borrador oficial se publicó el 22 de enero de 2008. Debido a la fuerza de las empresas que
forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de
2007 el W3C decidió retomar la actividad estandarizadora de HTML. XHTML 1.0 es una
adaptación de HTML 4.01 al lenguaje XML, por lo que mantiene casi todas sus etiquetas y
características, pero añade algunas restricciones y elementos propios de XML.
Características de HTML

HTML es un lenguaje de marcado que nos permite indicar la estructura de nuestro

documento mediante etiquetas. Este lenguaje nos ofrece una gran adaptabilidad, una
estructuración lógica y es fácil de interpretar tanto por humanos como por máquinas, ya
que siguen un esquema de árbol donde existe un elemento raíz y donde el resto de etiquetas
se insertan de manera lógica y estructurada. Además, se trata de un fichero de texto, y solo
se necesita un editor como el bloc de notas para generar un documento HTML.

Todo lenguaje de marcado tiene una gramática que nos indica qué etiquetas se
pueden utilizar, qué significan, cómo se relacionan entre ellas, etc. Es muy similar a las
gramáticas de las lenguas humanas. Por ejemplo, la gramática española nos indica que un
párrafo debe comenzar con mayúscula y finalizar con un punto y aparte. En HTML la
gramática marca que un párrafo debe comenzar con la etiqueta <p> y finalizar con el cierre
de la misma etiqueta (</p>). Las marcas de inicio y fin de párrafo son diferentes en castellano
y en HTML, pero el significado es el mismo.

Otro aspecto que debemos cumplir si utilizamos HTML es la división de la información

en dos bloques: la cabecera (head) y el cuerpo (body). La división de esta información es
fácil de entender si lo comparamos con un libro, donde la información técnica (título,
editorial, etc.) se encuentra en las primeras páginas.

En el caso del HTML reproducimos este mismo esquema, incluyendo el contenido en

el body y los datos técnicos en la cabecera. En este sentido hay que destacar la
etiqueta DOCTYPE, que nos indica qué tipo de gramática estamos utilizando: sería el
equivalente a indicarle al navegador si hablamos en castellano o inglés.
Especificaciones de HTML
Los programas que leen y presentan las páginas web a los usuarios se llaman
navegadores. Éstos son los responsables de interpretar el HTML y "pintar" una página tal
como ellos entiendan que deben hacer. Sin embargo, esas reglas de representación no son
subjetivas de cada fabricante del navegador, sino que existe una organización llamada W3C
(World Wide Web Consortium) que se encarga de definir el estándar que todos deben seguir
a la hora de escribir e interpretar el HTML. Estos estándares del HTML se conocen como
"Especificaciones", las cuales han ido apareciendo en el tiempo. El HTML5 es el último
estándar en la actualidad. En la historia, los navegadores, además de la propia comunidad
de usuarios, han sido los mayores impulsores de los cambios ocurridos en el lenguaje. Una
vez detectada la necesidad es el W3C el que crea el estándar y marca una dirección que
todos deben seguir.

El conflicto generado por los navegadores es debido a su diversidad. Existen multitud

de navegadores o clientes web presentes en el mercado los cuales muchas veces no son
capaces de interpretar un mismo código de una manera unificada. Esto obliga al
desarrollador a, una vez creada su página, comprobar que esta puede ser leída
satisfactoriamente por todos los navegadores, o al menos, los más utilizados. Cuando
surgen problemas de interpretación, queda de parte del desarrollador resolver el problema
tirando de técnicas o conocimientos que él disponga. Aunque afortunadamente las
diferencias son mínimas, todavía quedan muchos usuarios que navegan con sistemas
anticuados, ya sea por falta de interés para actualizarse, conocimientos, o por disponer
ordenadores muy antiguos.

HTML es para especificar el contenido de las páginas web y no el aspecto que van a
tener. Cuando nos referimos al contenido queremos indicar párrafos, imágenes, listas, tablas
y todo aquello que forma parte de "el qué". Nunca debemos usar HTML para definir cómo se
debe ver un contenido, si el texto debe tener color rojo, con una fuente mayor, o si se debe
alinear a la derecha. Para especificar el aspecto que debe tener una web se usa un lenguaje
complementario, llamado CSS.

HTML sirve para decir qué contenido debe tener una página y CSS sirve para decir
cómo se debe representar tal contenido. Es fácil saltarse esta regla, porque en HTML existen
diversas etiquetas (y atributos, que no se han mencionado) que realmente están pensados
para definir la presentación. Por tanto, una página es un archivo donde está contenido el
código HTML en forma de texto. Estos archivos tienen extensión .html o .htm (es
indiferente cuál utilizar). De modo que cuando programemos en HTML lo haremos con un
editor de textos y guardaremos nuestros trabajos con extensión .html, por ejemplo
mipágina.html
Anatomía de una etiqueta HTML
La etiqueta presenta frecuentemente dos partes, su apertura y cierre, y se encierran
ambas partes entre símbolos "menor que" < y "mayor que" >. Lo veremos a
continuación:
Apertura Cierre
El inicio de la etiqueta es así: El cierre de la etiqueta es así:

<etiqueta> </etiqueta>

Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que

caracterizan a esta etiqueta. Así por ejemplo: La etiqueta B define un texto en negrita. Si en
nuestro documento HTML escribimos una frase con el siguiente código:
Ejemplo:
<b> Este texto tiene negrita </b>

Otro ejemplo rápido. La etiqueta P define un párrafo. Si en nuestro documento HTML

escribimos:
Ejemplo:
<p> Hola, estamos en el párrafo 1</p>
<p> Ahora hemos cambiado de párrafo</p>

Como resultado obtendríamos dos párrafos con esos textos. En HTML los párrafos están
separados por un doble salto de línea. Se verían más o menos de esta manera:
Resultado de ejemplo anterior:
Hola, estamos en el párrafo 1

Ahora hemos cambiado de párrafo

Partes de un Documento en HTML
Un documento HTML ha de estar delimitado por la etiqueta HTML. Dentro de este
documento, podemos asimismo distinguir dos partes principales:
1. La cabecera, delimitada por la etiqueta HEAD, donde colocaremos etiquetas de índole
informativo, como por ejemplo el título de nuestra página. El contenido de la
cabecera no suele aparecer en el cuerpo de la página, pero sirve a los navegadores y
otros sistemas para encontrar información útil para entender y procesar el documento.
2. El cuerpo, delimitado por la etiqueta BODY, que será donde colocaremos nuestro
texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.
Ejemplo de Documento HTML:
<html> APERTURA

<head> CABECERA

<title> Mi documento básico </title> ETIQUETA DE TÍTULO

</head>

<body> CUERPO

<p>Este es el cuerpo de mi primera página HTML</p>

<p>Este segundo párrafo también forma parte del cuerpo</p>
ETIQUETA DE PÁRRAFO
</body>

</html> CIERRE

A este documento le faltan algunas cosas importantes que se trabajarán más adelante.
Instrucciones básicas para HTML
 Las mayúsculas o minúsculas son indiferentes al escribir etiquetas, quiere decir que las
etiquetas pueden ser escritas con cualquier tipo de combinación de mayúsculas y minúsculas.
Resulta sin embargo aconsejable acostumbrarse a escribirlas en minúscula ya que otras
tecnologías que pueden convivir con HTML (XML por ejemplo) no son tan permisivas y nunca
viene mal hacernos a las buenas costumbres desde el principio, para evitar fallos triviales en
un futuro.
 Los Saltos de línea en HTML, no importan a la hora de interpretar una página. Un salto
de línea será simplemente interpretado como un separador de palabras, un espacio en
blanco. Es por ello que para separar líneas necesitamos usar la etiqueta de párrafo
comentada antes, o la etiqueta BR que significa un salto de línea simple.
Ejemplo:
Esto es una línea
<br>
Esto es otra línea
Ahora, aunque estoy escribiendo aparentemente en otra línea, no se
verá el salto de línea porque no lo he separado con BR (o P, o
cualquier
otra etiqueta que produzca el salto de línea

 NOTA: La etiqueta BR no tiene su correspondiente cierre. Es un detalle que quizás te haya

llamado la atención. Hablaremos de esto más adelante.
 Es recomendable usar un editor de textos sencillo, de texto plano. Queremos remarcar
que nunca se debe usar el tipo de editor de textos que se usan para escribir documentos,
cartas, trabajos para el colegio, como Wordpad o Microsoft Word, pues colocan su propio
código especial al guardar los documentos y HTML es únicamente texto plano, con lo que
podremos tener problemas. El tipo de editores que recomendamos son aquellos específicos
para la edición de código, los cuales están pensados para facilitar los procesos de la
programación y de la escritura de código plano como el del lenguaje HTML. Se recomienda
usar los siguientes:
 Atom
 Brackets
 Bloc de Notas (En caso de no poder adquirir los anteriores)
Editores de Texto, para HTML
Pantalla Principal del Editor de texto Atom

Pantalla principal del editor Brackets

Instrucciones básicas para HTML
 Doctype: Debemos mencionar la etiqueta "doctype" porque es el inicio de cualquier
archivo HTML. Viene heredada del XML, que es un lenguaje precursor del HTML:
Ejemplo:
<!DOCTYPE html>

 Juego de Caracteres: Este juego de caracteres, o codificación, depende del sistema

operativo que estás usando para crear tu archivo HTML. Mientras que unos sistemas como
Linux o Mac usan por defecto un juego de caracteres llamado UTF-8, en Windows se usa de
manera predeterminada otro juego de caracteres llamado ISO-8859-1. Esta información nos
puede ahorrar problemas a futuro. En HTML5 el juego de caracteres a usar es siempre UTF-
8. Por lo que tendremos que tener especial atención si somos usuarios de Windows, para
asegurarnos que usamos la codificación correcta. Es otro de los motivos por los que se
recomendó Brackets o Atom como editores de código, ya que éstos trabajan siempre en
UTF-8, independientemente del sistema operativo.
 Para definir qué juego de caracteres estamos usando en un documento HTML se tiene
que escribir una etiqueta en la cabecera de la página, en el HEAD, llamada META.
Realmente las etiquetas META las trataremos más adelante, porque sirven para varias cosas
interesantes. Pero de momento nos aseguraremos que tenemos esta etiqueta en el head.
Ejemplo:
<meta charset="UTF-8">

Charset es una etiqueta META y en inglés significa: conjunto de caracteres

Instrucciones básicas para HTML
 Doctype: Debemos mencionar la etiqueta "doctype" porque es el inicio de cualquier
archivo HTML. Viene heredada del XML, que es un lenguaje precursor del HTML:
Ejemplo:
<!DOCTYPE html>

 Juego de Caracteres: Este juego de caracteres, o codificación, depende del sistema

operativo que estás usando para crear tu archivo HTML. Mientras que unos sistemas como
Linux o Mac usan por defecto un juego de caracteres llamado UTF-8, en Windows se usa de
manera predeterminada otro juego de caracteres llamado ISO-8859-1. Esta información nos
puede ahorrar problemas a futuro. En HTML5 el juego de caracteres a usar es siempre UTF-
8. Por lo que tendremos que tener especial atención si somos usuarios de Windows, para
asegurarnos que usamos la codificación correcta. Es otro de los motivos por los que se
recomendó Brackets o Atom como editores de código, ya que éstos trabajan siempre en
UTF-8, independientemente del sistema operativo.
 Para definir qué juego de caracteres estamos usando en un documento HTML se tiene
que escribir una etiqueta en la cabecera de la página, en el HEAD, llamada META.
Realmente las etiquetas META las trataremos más adelante, porque sirven para varias cosas
interesantes. Pero de momento nos aseguraremos que tenemos esta etiqueta en el head.
Ejemplo:
<meta charset="UTF-8">

Charset es una etiqueta META y en inglés significa: conjunto de caracteres