Introducción HTML

Vista previa del material en texto

DOCUMENTO DE LECTURA 
INTRODUCCIÓN AL HTML 
 
 1 
Introducción al HTLM 
¿Qué es HTML? 
El presente documento pretende dar a conocer a los estudiantes el lenguaje HTML 
(HyperText Markup Language), partiendo desde su historia, evolución, etiquetas 
básicas, semántica de HTML5 e inserción de elementos multimedia (Imágenes, audios y 
videos), todo lo referente a la estructura y organización de un sitio web. 
Hyper Text Markup Language (Lenguaje de marcación de 
Hipertexto) es un sistema de etiquetas. Un documento hipertexto 
no sólo se compone de texto, puede contener imágenes, sonido, 
vídeos, etc, por lo que el resultado puede considerarse como un 
documento multimedia (Ecured, 2012). 
El World Wide Web (WWW) es un sistema que contiene una 
cantidad de información casi infinita. Pero esta información debe estar ordenada de 
alguna forma de manera que sea posible encontrar lo que se busca. La unidad básica 
donde está almacenada esta información son las páginas Web. Estas páginas se 
caracterizan por contener texto, imágenes, animaciones e incluso sonido y video (Ferrer, 
García, & García, 2012). 
Una de las características más importantes de las páginas Web es que son hipertexto. 
Esto quiere decir que las páginas no son elementos aislados, sino que están unidas a 
otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de 
internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante 
activo) de una página para navegar hasta otra página. Será cuestión del programador 
de la página inicial decidir qué palabras o frases serán activas y a donde nos conducirá 
pulsar sobre ellas. 
En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto 
sino hipermedia. Los que defienden el cambio se apoyan en que, aunque en sus 
orígenes el WWW constaba únicamente de texto en la actualidad es un sistema 
 
 2 
principalmente gráfico y se puede hacer que las zonas activas sean, no sólo texto, sino 
imágenes, videos, botones, en definitiva, cualquier elemento de una página. Aun así, el 
término original no ha sido reemplazado todavía y por tanto será el empleado a lo largo 
de este documento. 
En conclusión, HTML es un lenguaje muy sencillo de utilizar, este permite la 
diagramación y organización de la información que se muestra en los sitios web, a su 
vez permite agregar hipertextos e hipermedia, enlaces que nos permiten navegar a 
través de las páginas de la web. Dicho lenguaje está basado en etiquetas con un orden 
lógico con funcionalidades específicas que abordaremos en el desarrollo de esta unidad. 
Entre las características de lenguaje HTML se encuentran 
1. Es muy sencillo 
2. No hay variables 
3. No se compila 
4. Es un lenguaje interpretado 1 
5. A las instrucciones se les llama etiqueta o marcas 
6. Permite definir hipertexto e hipermedia 
Los navegadores se encargan de interpretar el código HTML de los documentos, y de 
mostrar a los usuarios las páginas web resultantes del código interpretado, es decir 
estos documentos pueden ser mostrados por los navegadores o "browsers" en Internet. 
 
 
 
1 Es el lenguaje cuyo código no necesita ser preprocesado mediante un compilador, eso significa que el 
ordenador es capaz de ejecutar la sucesión de instrucciones dadas por el programador sin necesidad de leer 
y traducir exhaustivamente todo el código. 
 
 3 
Historia de HTML 
Luego de conocer las características, funcionalidades e importancia de HTML al navegar 
en internet, pasaremos a abordar un poco de la historia y la evolución de este 
importante lenguaje. 
El leguaje HTML fue desarrollado originalmente por Tim Bernes-Lee pero debido al 
rápido crecimiento de la web, surgió la necesidad de crear un estándar para que tanto 
los programadores como los navegadores pudieran basarse en unas mismas normas 
para escribir HTML. Cada versión de HTML establece unas normas respecto a cuáles son 
las etiquetas válidas y cómo se deben escribir. 
Los estándares HTML son el HTML 2.0, HTML 3.2, HTML 4.0 y HTML 4.01 y HTML 5, 
que es el que vamos a abordar en esta asignatura. Algunas personas creen que el HTML 
ya no tiene futuro porque ya existe el XHTML que es una forma más avanzada del HTML, 
pero algunos navegadores por el momento no lo soportan y es por esto que otros 
piensan que el futuro está en el HTML5. 
HTML 2.0 
En 1995 se publica el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer 
estándar oficial de HTML, es decir, el HTML 1.0 no existió como estándar. HTML 2.0 no 
soportaba tablas. Se simplificaba al máximo la estructura del documento para agilizar 
su edición, donde la declaración explícita de los elementos body, HTML y head es 
opcional. 
HTML 3.2 
 La versión HTML 3.2 se publicó en 1997 y es la primera recomendación de HTML 
publicada por el W3C (Consorcio internacional). Esta revisión incorporó los últimos 
avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto que 
fluye alrededor de las imágenes. 
 
 4 
HTML 4.01 
La última especificación oficial de HTML se publicó en diciembre de 1999 y se denomina 
HTML 4.01. 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 HTML5, cuyo primer 
borrador oficial se publicó en 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, e inició a 
trabajar para el lanzamiento del estándar HTML5. 
HTML5 es el presente de la Web y si no está asimilando lo que está pasando ya eres 
parte de la vieja generación de desarrolladores. Eso tendría que tenerte preocupado. 
Entender HTML5 es entender que hoy nos conectamos desde teléfonos móviles, 
tabletas, eBooks, netbooks, computadores y otra gama de dispositivos. 
Etiquetas o marcas 
Como se mencionaba anteriormente HTML está basado en el uso de etiquetas o marcas 
en orden lógico, las que permiten estructurar y organizar la información de los sitios 
web, a continuación, se abordar su sintaxis y la forma correcta de utilizarla. 
Existen dos tipos de etiqueta: 
Apertura del elemento < x > y Cierre del elemento </x>. 
<identificador-de-etiqueta Atributos: información adicional> contenido </identificador-de-
cierre-de- la-etiqueta> 
 
 5 
Cada uno de los elementos de la página se encontrará entre una etiqueta de apertura 
y su correspondiente etiqueta de cierre, a excepción de algunos elementos que no 
necesitan etiqueta de cierre, por ejemplo: <br>. 
También es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de 
apertura y de cierre. 
El entorno para trabajar HTML es simplemente un procesador de texto, como el que 
ofrecen los sistemas operativos Windows (Bloc de notas). El conjunto de etiquetas que 
se crean, se debe guardar con la extensión .html para que puedan ser visualizados en 
los navegadores (programas que permiten visualizar las páginas web), es importante 
mencionar que en este curso se utilizará el programa Visual Studio Code, para la 
realización de los ejemplos y tareas (Consultar el recurso manual de instalación y 
entorno de trabajo de Visual Studio Code). 
 
A continuación, un ejemplo en el que la etiqueta <font> se encuentra anidada dentro 
de la etiqueta <p>. 
 
Recuerde que tiene que escribir en el programa Visual Studio Code y guardarlo con 
extensión .html (pagina.html). 
 
 6 
Al abrir archivo HTML con elnavegador, daría como resultado el siguiente texto: 
Es importante anidar bien las etiquetas, estas no se pueden “cruzar”, en este ejemplo 
empieza por la etiqueta <p>, antes de cerrar esta etiqueta se escribe <font> por lo 
que antes de cerrar la etiqueta <p> debemos cerrar la etiqueta <font>. 
Estructura del documento 
Los documentos HTML se encuentran estrictamente organizados. Cada parte del 
documento esta diferenciada, declarada y determinadas por etiquetas específicas, 
conociendo esto vamos a conocer cómo construir la estructura global de un documento 
HTML y los nuevos elementos semánticos de HTML5. 
En HTML es importante el uso de los corchetes angulares < x >, está formado por 
muchas etiquetas que pueden realizar infinidad de tareas para dar formato a los 
archivos HTML, estas tienen propiedades que son descritas por medio de los Atributos 
(es una opción que permite proporcionar detalles acerca de cómo una etiqueta afectará 
el contenido). Es importante mencionar que HTML no distingue entre mayúsculas o 
minúsculas, o una combinación de ambas. 
Nuevas etiquetas en HTML 5 
Cabe mencionar que todas las etiquetas HTML4 y HTML5 son 100% compatibles Entre 
sí, de tal forma que el código actual HTML funcionará sin problemas en HTML5. 
Para empezar a usar HTML5 lo primero que tienes que hacer es colocar el <!DOCTYPE 
HTML> antes de la etiqueta <HTML> 
 
 7 
<!DOCTYPE HTML> 
Permite definirle al navegador que el documento es de tipo HTML, además de hacer 
uso de cada una de las etiquetas de HTML5, sin que nada de lo que ya tienes dejes de 
funcionar. 
Importante: Esta línea debe ser la primera línea del archivo, sin espacios o líneas que le 
precedan. De esta forma, el navegador podrá interpretar las incorporaciones de HTML5 
siempre que sea posible, o ignorarlo de lo contrario. 
 
Luego de declarar el tipo de documento, debemos comenzar a construir la estructura 
de HTML. Como siempre, la estructura tipo árbol de este lenguaje tiene su raíz en el 
elemento <html> este elemento envolverá el resto de código. 
 
El atributo lang de la etiqueta de apertura <html> es el único atributo que necesitamos 
especificar en HTML5. Este atributo define el idioma humano del contenido del 
documento que estamos creando, em este caso es por español. 
 
También puedes consultar la Tabla de códigos de Idioma en HTML5, a través de este 
enlace. 
Elemento Encabezado 
El primer hijo del elemento raíz es generalmente el elemento <head>. El elemento 
head contiene los metadatos que aportan información extra a la página web, como su 
título, descripción, autor, etc. Además, puede incluir referencias externas a contenidos 
necesarios para que el documento se muestre y comporte de la manera correcta (como 
hojas de estilos, que abordaremos más adelante). 
https://blog.nubecolectiva.com/los-codigos-de-idioma-en-html5-tabla-de-codigos-html5-language-code-table/
https://blog.nubecolectiva.com/los-codigos-de-idioma-en-html5-tabla-de-codigos-html5-language-code-table/
 
 8 
 
Meta: 
El elemento meta con atributo charset en un documento HTML está el destinado a 
indicar la codificación de caracteres utilizada (charset). En HTML5 tiene la sintaxis: 
<meta charset="identificador-juego-de-caracteres"> 
 
 
Es importante que el meta charset se coloque justo después de la apertura de la etiqueta 
<head>. De este modo nos aseguramos que el navegador conocerá la codificación de 
caracteres utilizada antes de que comience a procesar nada. Por ejemplo, una página 
HTML5 típica podría empezar así: 
 
Link: 
Dentro del elemento <head>, las etiquetas <link> son una manera de acceder o 
declarar contenido externo al documento actual, que puede cumplir distintos objetivos: 
1. Aplicar estilo a la apariencia del sitio web mediante la implementación de reglas 
CSS (Cascading Style Sheets), en español «Hojas de estilo en cascada». 
2. Traducir la página en otro idioma. 
3. Incorporar instrucciones del lenguaje de programación JavaScript 
4. Incorporar iconografía a la apariencia del sitio web 
Cuatro son las etiquetas que describen la estructura general de un documento y dan 
una información sencilla sobre él, no afectan a la apariencia del documento, solo 
interpretan y filtran los archivos HTML. 
 
 9 
 
• <HTML>: Limitan el documento e indica que se encuentra escrito en este 
lenguaje. 
• <HEAD>: Especifica el prólogo del resto del archivo, esto es, el encabezado. 
Son pocas las etiquetas que van dentro de ella, destacando la del título <TITLE> 
que será utilizado por los marcadores del navegador e identificará el contenido 
de la página. Solo puede haber un título por documento, preferiblemente corto, 
aunque significativo, y no caben otras etiquetas dentro de él, no se escribe nada 
del texto del documento de la página. 
• <BODY>: Encierra el resto del documento, el contenido que se muestra en un 
navegador Web. 
• <FOOTER>: Representa un pie de página para el contenido de sección más 
cercano o el elemento raíz de sección. 
 
 10 
 
El primer paso para crear una página es crear un documento de texto mediante el editor 
de texto que desee. Se puede utilizar el editor Microsoft Windows que es el Bloc de 
notas o cualquier otro editor (Un editor de texto es un programa que permite crear y 
modificar archivos digitales compuestos únicamente por texto sin formato, conocidos 
comúnmente como archivos de texto o texto plano y son incluidos en el sistema 
operativo o en algún Paquete de software). 
Lo primero que se debe considerar es la estructura general de la página por lo que se 
debería escribir en ella su contenido 
Etiqueta Función 
<HTML> Empieza el documento HTML 
 <HEAD> Zona de la cabecera 
 <TITLE> Zona del título de la página 
 </TITLE> Termina el título de la página 
 </HEAD> Termina la zona de la cabecera 
 <BODY> Zona del cuerpo del documento 
 </BODY> Termina la zona del cuerpo del 
documento 
 <FOOTER> Zona del píe de página 
 
 11 
 </FOOTER> Termina la zona del píe de página 
Para crear la página se debe seguir la estructura correcta en la aplicación Visual Studio 
Code a como se muestra en la siguiente imagen: 
 
Se debe guardar el documento con un nombre y la extensión .html, por ejemplo 
practica.html 
 
El atributo bgcolor de la etiqueta <body>, permite definir un color de fondo al cuerpo 
de la página, mediante la asignación del código hexadecimal del color a utilizar, el cual 
está compuesto por una almohadilla #, seguido de 6 números o letras, ejemplo el color 
rojo se representa de la siguiente forma #FF0000. 
 
 12 
El atributo a align de la etiqueta <p>, permite definir la alineación del texto dentro de 
esta etiqueta. 
La etiqueta <font> anidada a la etiqueta párrafo permite definir una serie atributos, 
que modifican la apariencia del texto que este dentro de ella, en este caso se modifica 
el color y el tamaño del texto. 
Resultado: 
 
Observe que se ha aplicado correctamente el color de fondo y título de la página, así 
también el contenido del cuerpo y pie de página con el color, alineación y tamaño de 
la tipografía. 
 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. 
HTML cuenta con las etiquetas de encabezado, que identifiquen encabezados de 
secciones en un documento. Estas seis etiquetas describen encabezados de diversos 
tamaños, en orden decreciente de importancia: 
<H1>, <H2>, <H3>, <H4>, <H5> y <H6> 
En la siguiente figura podemos ver los encabezados tal como se verían en una página: 
 
 13 
 
Resultado: 
 
Estilos de texto 
Las etiquetas permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y 
generalmente se utilizan para resaltarlo. 
A continuación, se muestran algunas etiquetas con ejemplos, asociadas al tipo de letra: 
 
 14 
Etiqueta SignificadoEjemplo 
<b> Negrita Introducción a HTML 
<i> Cursiva Introducción a HTML 
<u> Subrayado Introducción a HTML 
<s> Tachado Introducción a HTML 
<big> Aumenta el tamaño de la letra Introducción a HTML 
<small> Disminuye el tamaño de la 
letra 
Introducción a HTML 
<br> Introduce un salto de línea Introducción a HTML. 
Siguiente línea 
<blockquote> Introduce sangría Introducción a HTML 
<font> Agrega estilos a las fuentes Introducción a HTML 
Párrafos <p> 
El texto de una página puede agruparse en párrafos, el texto de cada uno de ellos debe 
insertarse entre las etiquetas <p> y </p> las cuales hacen que se cambie de línea 
automáticamente. También es posible cambiar la alineación del texto de cada párrafo. 
Para ello se modifica el valor del atributo align, cuyos valores pueden ser: 
• left (izquierda 
• right (derecha) 
• center (centrado 
• justify (justificado). 
Por ejemplo, para insertar el texto: 
 
 15 
 
Resultado: 
 
Imágenes en HTML 
(Román, 2017) destaca que para la inserción de imágenes en el contenido de una 
página utilizaremos la etiqueta <img>, que es una etiqueta muy sencilla, que dispone 
de varios atributos para modificar como se verá la imagen (los atributos src y alt son 
siempre obligatorios): 
• src: Indica el nombre o la URL de la imagen a mostrar. 
• alt: Establece un texto alternativo para mostrar en el caso que la imagen no se 
pueda mostrar. 
• width: Indica el ancho de la imagen. No se debe indicar unidad. Se aconseja 
hacerlo desde CSS (Contenido a abordar en la siguiente clase). 
• height : Indica el alto de la imagen. No se debe indicar unidad. Se 
aconseja hacerlo desde CSS. 
Ejemplo: 
 
 16 
 
Resultado: 
 
Inserción de audio y video 
La inserción de elementos multimedios en tu sitio web es muy sencillo, hablando 
especifivamente de audios y videos en este caso, los cuales se insertan mediante las 
etiquetas <audio> y <video> respectivamente. 
Audio 
Atributo: 
• src: Ubicación o enlace del audio a insertar. 
La leyenda dentro de la etiqueta <p> define el ensaje en caso ocurrir un error en la 
reproducción del audio. 
• <audio src="/ejemplo/audio.Mp3"> 
• <p>Tu navegador no implementa el elemento audio.</p> 
• </audio> 
Atributos: 
 
 17 
• controls : muestra los controles estándar de HTML5 para audio en una página 
web. 
• autoplay : hace que el audio se reproduzca automáticamente. 
• loop : hace que el audio se repita automáticamente. 
<audio src="audio.ogg" controls autoplay loop> 
<p>Tu navegador no implementa el elemento audio</p> 
</audio> 
Video 
De igual manera para el video se utilizan propiedades similares. 
<video src="/ejemplo/video.Mp4" controls> 
 Tu navegador no implementa el elemento <code>video</code>. 
</video> 
Organización del proyecto HTML 
Cuando se trabaja en los sitios web es inevitable incorporar distintos elementos multimedios, 
por ello, se recomienda crear un directorio de carpetas que permita la organización de cada 
uno de estos elementos, ejemplo: 
1. Carpeta principal (proyecto) 
a. Archivos CSS (Hojas de estilo en cascada) 
b. Fuentes 
c. Archivos JS (JavaScript) 
d. Recursos 
i. Audios 
ii. Imágenes 
iii. Videos 
 
 
 18 
 
Semántica HTML5 
Como hemos mencionado anteriormente HTML5 ha introducido nuevas etiquetas 
semánticas que pueden ser utilizadas en nuestras páginas estáticas, estas nuevas 
etiquetas se pueden clasificar en dos grupos: 
• Etiquetas que extienden a las actuales, como <video>, <audio> o 
<canvas>, y que además añaden nuevas funcionalidades a los documentos 
HTML, que podemos controlar desde JavaScript. 
• Etiquetas que componen la web semántica, es decir, que no proponen nuevas 
funcionalidades, pero sirven para estructurar sitios web, y añadir un 
significado concreto, más allá de las etiquetas generales como <Div>. 
Cabe mencionar que en HTML4 solo existía un elemento contenedor sin significado 
semántico <div>, en cambio HTML5 nos permite transformar la estructura de los sitios 
web basados con la etiqueta <div>, a una estructura que utiliza las nuevas etiquetas 
de estructurales como <nav>, <header>, <footer>, <aside>, o <article>. 
 
 
 19 
• <header>: Define la cabecera de la página web. 
• <nav>: Se usa se usa para definir el menú o la navegación de la página web. 
• <Section>: Es una sección de la aplicación normalmente, tiene un header y 
suele tener un footer. 
• <article>: Es una parte independiente del documento. También suele llevar un 
título y un footer. 
• <aside>: Se usa para definir la sidebar, columna lateral. 
• <footer>: Representa un pie de página para el contenido de sección más 
cercano o el elemento raíz de sección. 
Un poco de sintaxis de la semántica de HTML5 
Observe el código HTML donde se define la estructura básica de una pagina web haciendo uso 
de la semántica HTML5, y lea cada uno de los comentarios para conocer el orden lógico de la 
semántica. 
 
Importante: Para agregar un comentario en HTML es necesario colocar los siguientes símbolos 
 
 20 
<!--acá va el comentario --> 
Los comentarios permiten apoyar la documentación de las líneas de código de cualquier 
lenguaje (en este caso HTML), siendo esta una buena practica para facilitar su posterior 
compresión por parte de 
son una herramienta que sirve para apoyar la documentación de los programas que 
desarrollamos y así facilitar su posterior comprensión por parte de otra persona que desee 
conocer la utilidad del mismo. 
Es importante aclarar que los comentarios no son tomados en cuenta por los navegadores. 
De momento este sería el resultado, recordemos que HTML solo nos permite definir la 
estructura y organización de la página web, en la siguiente clase abordaremos la 
apariencia haciendo uso de reglas, IDs y clases CSS (Hojas de Estilos en Cascada). 
 
Para reflexionar 
 
 
 21 
Bibliografía 
Delgado, H. (2013). diseno web akus. Obtenido de https://disenowebakus.net/html-xhtml-y-
html5.php 
Ecured. (14 de mayo de 2012). Lenguaje de Marcado de Hipertexto. Obtenido de 
https://www.ecured.cu/Lenguaje_de_Marcado_de_Hipertexto#Fuentes 
Ferrer, J., García, V., & García, R. (2012). Obtenido de http://es.tldp.org/Manuales-LuCAS/doc-
curso-html/doc-curso-html.pdf 
Román, J. (2017). Etiquetas HTML para imágenes. Obtenido de Etiquetas HTML para 
imágenes: https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-imagenes 
 
 
	Introducción al HTLM
	¿Qué es HTML?
	Historia de HTML
	HTML 2.0
	HTML 3.2
	HTML 4.01
	Etiquetas o marcas
	Estructura del documento
	Nuevas etiquetas en HTML 5
	Elemento Encabezado
	Meta:
	Link:
	Estilos de texto
	Párrafos <p>
	Imágenes en HTML
	 src: Indica el nombre o la URL de la imagen a mostrar.
	 alt: Establece un texto alternativo para mostrar en el caso que la imagen no se pueda mostrar.
	 width: Indica el ancho de la imagen. No se debe indicar unidad. Se aconseja hacerlo desde CSS (Contenido a abordar en la siguiente clase).
	 height : Indica el alto de la imagen. No se debe indicar unidad. Se aconseja hacerlo desde CSS.
	Inserción de audio y video
	Audio
	Video
	Organización del proyecto HTML
	Semántica HTML5
	Un poco de sintaxis de la semántica de HTML5
	Bibliografía