Introducción HTML

•

SIN SIGLA

Nathaly C. O. Gutiérrez

23/5/2024

¡Este material tiene más páginas!

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/

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.

• <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.

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:

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:

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:

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

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

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