PROGRAMACIÓN WEB I

Semana 1
Introducción al HTML
 Semana 1
Introducción al HTML

APRENDIZAJE ESPERADO
El estudiante será capaz de:
• Examinar herramientas de prueba y etiquetas HTML a partir de las reglas de
uso y elementos de la programación web, con la finalidad de utilizarlas en la
creación de páginas teniendo en cuenta su entorno de desarrollo.

Reservados todos los derechos Instituto Superior de Artes y Ciencias de la Comunicación S.A. No se permite copiar, reproducir, reeditar, descargar, publicar,
emitir, difundir, de forma total o parcial la presente obra, ni su incorporación a un sistema informático, ni su transmisión en cualquier forma o por cualquier
medio (electrónico, mecánico, fotocopia, grabación u otros) sin autorización previa y por escrito de Instituto Superior de Artes y Ciencias de la Comunicación
S.A. La infracción de dichos derechos puede constituir un delito contra la propiedad intelectual.

IACC 2022 2
 Semana 1
Introducción al HTML

ÍNDICE
APRENDIZAJE ESPERADO ..................................................................................................................................................... 2
INTRODUCCIÓN ................................................................................................................................................................... 4
RESUMEN ............................................................................................................................................................................ 5
PALABRAS CLAVE ................................................................................................................................................................. 5
PREGUNTAS GATILLANTES ................................................................................................................................................... 5
1. INTRODUCCIÓN AL HTML ......................................................................................................................................................... 6
2. ELEMENTOS DE LA PROGRAMACIÓN WEB ............................................................................................................................... 6
2.1. TERMINOLOGÍA BÁSICA ..................................................................................................................................................... 7
2.2. NOMBRES DE ARCHIVO ...................................................................................................................................................... 8
2.3. EDICIÓN DE PÁGINAS HTML ............................................................................................................................................... 9
2.3.1. HERRAMIENTAS DE EDICIÓN........................................................................................................................................ 9
2.4. EL LENGUAJE HTML .......................................................................................................................................................... 12
2.4.1. ETIQUETA ................................................................................................................................................................... 12
2.4.2. DOCUMENTO HTML ................................................................................................................................................... 13
2.4.3. DEFINICIÓN DEL TIPO DE DOCUMENTO .................................................................................................................... 15
2.5. ETIQUETAS BÁSICAS ......................................................................................................................................................... 16
2.5.1. ETIQUETAS PARA EL FORMATO DE TEXTO ................................................................................................................. 19
2.5.2. COMENTARIOS ........................................................................................................................................................... 21
2.5.3. CONJUNTO DE CARACTERES Y CARACTERES ESPECIALES .......................................................................................... 21
2.5.4. COLORES .................................................................................................................................................................... 23
2.5.5. ESTRUCTURA DE ORDENAMIENTO Y ANIDAMIENTO DE ETIQUETAS ........................................................................ 24
2.6. REGLAS DE USO DE HTML................................................................................................................................................. 25
COMENTARIO FINAL .......................................................................................................................................................... 27
REFERENCIAS ..................................................................................................................................................................... 28

IACC 2022 3
 Semana 1
Introducción al HTML

INTRODUCCIÓN
El concepto de HTML puede ser utilizado de dos maneras: por una parte, es entendido como el lenguaje
de marcas o etiquetas para la diagramación de páginas web; y por otro, es la sigla que se utiliza para Hyper
Text Markup Language (lenguaje de marcado de hipertexto). Un lenguaje de marcado es un conjunto de
etiquetas que representan elementos, y que permiten dar la estructura a una página web.
Cada etiqueta HTML describe diferentes contenidos o elementos del documento. En la actualidad, HTML
es un estándar avalado por el consorcio WWW, llamado W3C (World Wide Web Consortium) que se dedica
a la estandarización de casi la totalidad de las tecnologías relacionadas a la programación web, y es
considerado el lenguaje más importante, por su aporte en el desarrollo y crecimiento de la WWW. En este
documento se revisarán los conceptos básicos de HTML, que serán la base para el desarrollo de página
web. Además, se instruirá en la implementación de un ambiente que servirá para los ejercicios que
posteriormente se desarrollarán. Finalmente, se avanzará hacia la construcción de una página básica como
parte fundamental de la programación web.
Como aprendizaje de la semana, se espera que el estudiante sea capaz de examinar herramientas de
prueba y etiquetas HTML a partir de las reglas de uso y elementos de la programación web, con la finalidad
de utilizarlas en la creación de páginas teniendo en cuenta su entorno de desarrollo.

IACC 2022 4
 Semana 1
Introducción al HTML

RESUMEN
El HTML constituye una herramienta fundamental en el desarrollo web, puesto que ella nos permite la
escritura de documentos compuestos por elementos determinados por etiquetas del lenguaje con las que
se construye la apariencia de una página web. Un documento HTML es un simple archivo que contiene
texto en un lenguaje de marcas específico. Por su parte, las etiquetas son indicadores del HTML que
permiten dar formato y estructura al contenido de la página web.

PALABRAS CLAVE

• HTML
• Etiqueta
• Página web
• Hipertexto
• Documento web

PREGUNTAS GATILLANTES

• ¿Qué es HTML?
• ¿Cómo se escribe una página web?
• ¿Cómo se estructura el contenido de un documento web?

IACC 2022 5
 Semana 1
Introducción al HTML

1. INTRODUCCIÓN AL HTML
HTML (HyperText Markup Language), traducido como Lenguaje de Marcado de Hipertexto, es un lenguaje
que permite la creación de páginas web mediante etiquetas o elementos HTML, que representan texto,
imágenes, tablas, vídeos, música, entre otros.

La visualización de las páginas web creadas con HTML se realiza mediante un navegador web, quien
interpreta el contenido del documento para presentarlo en forma visual. Por otro lado, lo realmente
característico del HTML es la posibilidad de navegar entre páginas web, lo cual es posible a través de
enlaces.

HTML es un estándar reconocido en todo el mundo y cuyas normas las define un organismo sin fines de
lucro llamado World Wide Web Consortium, más conocido como W3C. Por tratarse de un estándar de
internet, una página escrita en HTML se visualizará de forma muy similar en cualquier navegador bajo
distintos sistemas operativos.

2. ELEMENTOS DE LA PROGRAMACIÓN WEB

Para lograr la programación web se requiere de un conjunto de elementos, ya que la llamada World Wide
Web (WWW) es un sistema que contiene una cantidad de información casi infinita, por lo que se debe
proporcionar cierto orden o estructura para así facilitar el acceso a los elementos buscados en ella.

La unidad básica en la que se encuentra contenida dicha información es la denominada página web, la que
se caracteriza por contener texto, imágenes, animaciones y elementos multimedia de audio y video. Lo
anterior, cuenta con una característica principal denominada hipertexto, y que se traduce en la posibilidad
de enlazar contenidos y/o diversas páginas web por medio de enlaces (links), con los que un usuario, con
tan solo pulsar sobre el texto resaltado, podrá acceder a otra página o contenido.

Cuando se originó el WWW se identificaron ciertas características, tales como:

• Tenía que ser distribuido: la información debía estar repartida en páginas no muy grandes enlazadas
entre sí.
• Tenía que ser hipertexto y debía ser fácil navegar por él.
• Ser compatible con todo tipo de computadoras (PCs, Macintosh, estaciones de trabajo, etc.) y con
todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS, etc.).
• Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.

IACC 2022 6
 Semana 1
Introducción al HTML

2.1. TERMINOLOGÍA BÁSICA

El lenguaje HTML es muy relevante en el mundo de la programación web. Sin embargo, no es el único
lenguaje que se requiere para lograr dicho propósito y es por ello por lo que también se debe considerar
el lenguaje de estilo CSS (Cascading Style Sheets), cuya función es gestionar la apariencia de una página
web, entregando detalles como colores, tamaño de textos, posición dentro de la página, entre otros.

Aunque es posible crear un sitio web únicamente en HTML, no va a ser visible de una manera muy estética.
Esta es la razón por la que CSS siempre lo complementa.

En la creación de las páginas web en lenguaje HTML, se cuenta con una estructura básica de una página,
que consiste en una cabecera (HEAD) y un cuerpo (BODY). En estas dos secciones se incluyen los elementos
que le irán dando forma a la página. La estructura se muestra a continuación:

Figura 1. Estructura de una página HTML

Fuente: ACC (2015)

El elemento más importante que debemos conocer es la etiqueta, cuya finalidad es organizar el lenguaje,
para indicar dónde comienza y dónde termina la aplicación de la etiqueta que se está usando. A
continuación, se observan algunas de ellas, las que se explican más detalladamente en la sección 2.4.1.

IACC 2022 7
 Semana 1
Introducción al HTML

HTML indica al navegador que el contenido está escrito en lenguaje HTML, para ello la página termina y
comienza con estas etiquetas o tags:

<HTML>…</HTML>

Dentro de estas dos etiquetas se distinguen dos secciones principales: la cabecera está enmarcada dentro
de las etiquetas <HEAD> y </HEAD> y el cuerpo, por las etiquetas <BODY> y </BODY> señalando el inicio y
el fin, respectivamente

Otro concepto a considerar en el ámbito de la programación web es el de editor de textos, que no es otra
cosa que una aplicación que necesitamos usar para escribir nuestro código en lenguaje HTML. Para ello,
podemos usar desde el simple bloc de notas, hasta herramientas más sofisticadas y diseñadas
exclusivamente para que los desarrolladores cumplan con esta tarea. Existen dos grandes categorías:

• Los llamados WYSIWYG (lo que ves es lo que obtienes, What you see is what you get), que se refiere
a programas de muy fácil uso, que permiten crear páginas web con muy poco conocimiento, pero
con la gran desventaja que el código HTML que genera tiende a ser deficiente, por lo que no se
recomienda su uso.
• Los editores de texto, que son aplicaciones especialmente diseñadas para la escritura de código, no
solo HTML. En este curso se hará uso de la aplicación Atom, de código libre y descarga gratuita.

Finalmente, en este apartado de terminología básica debemos mencionar a los navegadores, que son
aplicaciones que nos permiten visualizar los sitios web desde diversos dispositivos, teniendo la tarea de
leer el código HTML para presentarlo en pantalla.

2.2. NOMBRES DE ARCHIVO

Las páginas web se podrán nombrar con extensión .htm o html. La principal es la denominada index.htm o
index.html.

Adicionalmente, para un funcionamiento correcto de nuestro desarrollo web, es importante considerar

algunas reglas generales a la hora de asignar nombres a los archivos que contienen el código HTML:

IACC 2022 8
 Semana 1
Introducción al HTML

No usar la ñ ni otros caracteres extendidos.

Tampoco utilizar los acentos.

Para unir palabras, usar el guion bajo (no espacio en blanco).

Emplear minúsculas y nombres cortos.

Figura 2. Reglas para nombrar archivos HTML

Fuente: IACC (2020)

Recuerda qué:
Las páginas se nombrarán indistintamente .htm o .html pero habrá que tener en cuenta si las hemos
llamado de una u otra forma cuando se requiera referirlas, ya que el vínculo no funcionará si no detallamos
exactamente igual su nombre.

2.3. EDICIÓN DE PÁGINAS HTML

La edición de páginas HTML es una tarea bastante sencilla, ya que se trata de generar un archivo de tipo
de texto plano, o sin formato enriquecido, por lo que en ocasiones y de una manera inicial, bastaría el bloc
de notas de Windows. Sin embargo, como mencionamos antes, hay aplicaciones especialmente
desarrolladas para realizar la tarea de escribir código en diversos lenguajes de programación, entre ellos
HTML.

2.3.1. HERRAMIENTAS DE EDICIÓN

Un editor es un programa que nos permite redactar documentos. En la actualidad existen muchos editores
que permiten crear páginas web sin la necesidad de escribir código HTML. Ellos disponen de un entorno
visual, y generan automáticamente el código de las páginas. Una debilidad de ellos es que ocasionalmente
generan código basura, lo cual amerita corregir directamente el código por lo que resulta necesario saber
HTML.

IACC 2022 9
 Semana 1
Introducción al HTML

En principio, se recomienda utilizar una herramienta lo más sencilla posible, en la que podamos escribir
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.

Actualmente se cuenta con diversas aplicaciones de este tipo, revisemos a continuación algunas de las más
utilizadas:

Nombre Características Sistema Operativo

Editor de páginas web de fácil uso y de

KompoZer Linux, Windows, MacOSX, OS/2
código abierto, tipo WYSIWYG.

Editor de páginas web para desarrolladores,

Brackets Linux, Windows, MacOSX, OS/2
creado por Adobe. Es de código abierto.

Linux, Windows, MacOSX

Editor de código desarrollado por Microsoft,
es personalizable, gratuito y de código
Visual Studio Code
abierto, pero requiere los datos de uso del
programa legalmente.

Linux, Windows, MacOSX, OS/2

Editor de código con control de versiones git
integrado, desarrollado por GitHub, de
Atom
código abierto, siendo una aplicación de
escritorio construida con tecnologías web.

Linux, Windows, MacOSX

Editor de código de simple uso, con plugins
Sublime Text y funciones de autocompletado (es un
programa de pago).

Tabla 1. Algunas herramientas de edición

Fuente: IACC (2020)

IACC 2022 10
 Semana 1
Introducción al HTML

A continuación, se muestra la edición de un archivo index.htm desde Atom:

Figura 3. Ejemplo con Atom

Fuente: IACC (2020)

Descarga
En el sitio web oficial para descargar el editor de código Atom, podrás poner en práctica los ejemplos
revisados durante esta semana.

https://atom.io/

IACC 2022 11
 Semana 1
Introducción al HTML

Reflexión
¿Cuál crees que es la importancia de conocer las aplicaciones que permiten la edición de páginas?

2.4. EL LENGUAJE HTML

HTML es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto dotado de enlaces que
permiten la navegación a otros documentos HTML o incluso a diferentes fuentes de información, y con una
apariencia agradable gracias a la inserción de elementos multimedia (imagen, sonido, video). HTML es el
lenguaje con el que se "escriben" las páginas web. Sus características son:

• Es muy sencillo.
• No hay variables.
• No se compila.
• Es un lenguaje interpretado por el navegador web.
• A las instrucciones se les llama etiquetas
• Permite la escritura de hipertexto
• Es pasivo, ya que no interactúa con el usuario

2.4.1. ETIQUETA

Se ha mencionado que HTML es un lenguaje basado en etiquetas o marcas, de allí lo importante que se
conozcan en detalle las que podemos utilizar en su código.

En la sección HEAD o cabecera, se detallan un conjunto de datos denominados metainformación, y que

incluyen datos tales como la versión del HTML en que fue desarrollada la página, el título de ella y notas
del autor, además de poder incluir scripts o programas escritos en algún otro lenguaje para internet
(ejemplo: javascript).

IACC 2022 12
 Semana 1
Introducción al HTML

Figura 4. Etiquetas en un código HTML

Fuente: IACC (2015)

La información contenida en la etiqueta de <HEAD>...</HEAD> no se despliega directamente en el

navegador, sino que afecta a las propiedades generales de la página, por esta razón no debe escribirse
ninguna instrucción o comentario ajeno a las etiquetas estandarizadas propias de esta parte del
documento.

La segunda sección es el cuerpo y para definirlo se utilizarán las etiquetas:<BODY> Y </BODY>, esta sección
para algunos navegadores es opcional, pero siempre debería ser incluida. Al interior del body
encontraremos elementos tales como: textos, encabezados, imágenes, tablas, animaciones, y otros, que
poseen sus propios atributos para definir el formato de cada uno de ellos.

2.4.2. DOCUMENTO HTML

Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre
la propia página, como por ejemplo su título y su idioma, que no se visualiza. El cuerpo de la página incluye
todos sus contenidos, como párrafos de texto e imágenes.

Figura 5. Partes de Documento HTML

Fuente: IACC (2015)

IACC 2022 13
 Semana 1
Introducción al HTML

El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera
(llamada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que
los navegadores muestran como título de sus ventanas).

En líneas generales, un documento tendrá la siguiente estructura:

<html>
<head>
Etiquetas y contenidos del encabezado, datos que no aparecen en nuestra página pero que son
importantes para catalogarla: Titulo, palabras clave, ...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes
</body>
</html>

A continuación, se muestra el código HTML de una página web muy sencilla:

<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<p>Escribir un documento HTML es <b>una tarea fácil</b ></b>, simplemente se requiere utilizar las
etiquetas que representen cada uno de los elementos a mostrar en la página web.</p>
</body>
</html>

Para probar este primer ejemplo, se procede de la siguiente manera:

• Abre un editor de archivos de texto y crea un archivo nuevo
• Copia el código HTML mostrado anteriormente y ponlo tal cual en el archivo que has creado
• Guarda el archivo con el nombre que quieras, pero con la extensión html
• Llama el fichero desde un navegador de internet (no es necesario llevarlo a un servidor).

IACC 2022 14
 Semana 1
Introducción al HTML

De una forma directa un documento de HTML no puede pedir información al usuario, procesarla y
desplegarla. Por esto no se considera a HTML como un lenguaje de programación.

2.4.3. DEFINICIÓN DEL TIPO DE DOCUMENTO

La Definición de Tipo de Documento, o DTD, especifica la versión HTML que se está utilizando en el código
fuente de una web. De esta manera, un navegador u otro software de lectura puede mostrar el contenido
del código fuente ya que es capaz de detectar qué tipo de documento es. En el pasado, muchos
navegadores no mostraban el contenido cuando se enumeraba una DTD que faltaba o era incorrecta. Sin
embargo, el estándar actual HTML5 ya no requiere la especificación DTD para mostrar la web
correctamente, sino más bien, para validarlo contra la definición del tipo de documento. El estándar para
la definición de la clase de documento ha sido fijado por el W3C.

La definición del tipo de documento para HTML especifica qué versión se está utilizando en el código fuente
de un documento web. Esta información debe ser proporcionada para que la aplicación (el navegador)
pueda detectar qué tipo de documento es y qué marcado está permitido. Sin embargo, los navegadores
modernos muestran el contenido de un documento HTML cuando falta la DTD, pero un archivo HTML sólo
es válido si se introduce con un tipo de documento claramente definido. ¡Para ello, se utiliza <! DOCTYPE
html>. Especifica qué caracteres se pueden utilizar en un documento HTML y qué atributos se deben
utilizar. Cada documento HTML debe incluir una cabecera y un elemento de cuerpo y también estar listado
en una cierta estructura lógica (estructura de árbol), para que sea válido.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>

IACC 2022 15
 Semana 1
Introducción al HTML

2.5. ETIQUETAS BÁSICAS

Las etiquetas válidas a utilizar dentro de la cabecera son las siguientes:

Etiqueta Uso

<TITLE> Define el título de la página. Este texto aparece en la parte superior del navegador

<META> Especifica metadatos el tipo de contenido, el set de caracteres, palabras clave, etc.
Ejemplo

Se visualizaría así en el navegador Chrome:

<BASE> Señala la URL de origen o base de todos los links relativos que se usarán en la página. Este tema
será abordado más adelante.
<LINK> Define una referencia a otro documento. Generalmente se ocupa para enlazar la página a una
hoja de estilo (Archivo.css), que contiene información de los formatos dados a los componentes
de la página, por ejemplo: colores y fuentes para los botones o textos.

link rel="stylesheet" media="screen" href="global.css" type="text/css" >

<STYLE> Define características de formato sobre los elementos de la página. Ejemplo: el tipo de letra que
será utilizado.
<SCRIPT> Permite insertar, junto al HTML, scripts o trozos de código en otros lenguajes de programación
como Javascript, vbscript y otros. Código que vendrá a complementar la funcionalidad del HTML
de la página.

<script type="text/javascript" href="ajaxtcr.js"></script>

Un ejemplo:

IACC 2022 16
 Semana 1
Introducción al HTML

Tabla 2. Etiquetas dentro de la cabecera

Fuente: IACC (2020)

Por otro lado, los atributos son propiedades asociadas a la etiqueta, y que modifican el aspecto de la
información a mostrar en la página web. La etiqueta <BODY>...</BODY> posee ciertos atributos que
definirán cómo se visualizará esta parte del documento. Entre estos tenemos atributos para definir color y
diseño de la página.

Atributo Descripción

Bgcolor Define el color del fondo de la página.

Link Color para los links que contiene la página.

IACC 2022 17
 Semana 1
Introducción al HTML

Background Sugiere una imagen específica como fondo para la página.

Text Color para texto de la página.

Vlink Color de links ya visitados.

Alink Color que aparece al hacer clic sobre un link.

Topmargin Distancia que existe entre la margen superior del navegador y el contenido medido
en pixeles.
Leftmargin Distancia que existe entre la margen izquierda del navegador y el contenido
medido en pixeles.
Marginheight Tamaño del margen superior e inferior.

Marginwidth Tamaño del margen izquierdo y derecho.

Tabla 3. Atributos de la etiqueta <body>

Fuente: IACC (2020)

Ejemplo:

<BODY bgcolor="white” text="blue" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

..... Este es el cuerpo de mi página
</BODY>

Y se mostraría así en Internet Explorer:

IACC 2022 18
 Semana 1
Introducción al HTML

Figura 5. Visualización del ejemplo en navegador Internet Explorer

Fuente: IACC (2020)

Importante:
Recuerda que debes asignar extensión.htm o .html a tus documentos html para que sean reconocidos
como tal y ejecutados desde el navegador de manera correcta

2.5.1. ETIQUETAS PARA EL FORMATO DE TEXTO

Para el control de la apariencia del texto existe <FONT>, aunque cuando se vea el uso de hojas de estilos
en cascada o CSS en las siguientes semanas, nos percataremos que son una mejor alternativa a esta
etiqueta. Una de las cosas que podemos hacer con ella es cambiar el tamaño del texto.
El tamaño se especifica con su atributo SIZE y afectará al texto que encierre la instrucción de inicio (<FONT
SIZE="">) y de finalización (</FONT>). La forma de especificar el tamaño del texto consistirá en indicar un
tamaño absoluto de 1 a 7, siendo 7 el mayor y 1 el menor. El tamaño por defecto del texto es el equivalente
al tres. Veamos un ejemplo:

IACC 2022 19
 Semana 1
Introducción al HTML

Figura 6. Ejemplo de cambio de tamaño del texto

Fuente: IACC (2020)

Existen varias etiquetas, las que, al ser utilizadas, incorporan el salto de línea de manera automática. La
primera de ellas es la etiqueta usada para el título de la página, llamada <title> y que coloca el texto dentro
de ella en el tamaño mayor de letra.
Adicionalmente, se encuentra el grupo de etiquetas para encabezados, las que ayudan a organizar de mejor
manera un documento según se requiera subtitular. Esto se realiza en HTML por medio de las etiquetas
<h>, que permiten generar hasta 6 subniveles, y se especifican así: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Veamos el siguiente código:

Figura 7. Ejemplo de uso de etiquetas de salto de línea automático

Fuente: IACC (2020)

IACC 2022 20
 Semana 1
Introducción al HTML

El cual, genera la siguiente salida desde el navegador:

Figura 8. Visualización en el navegador de ejemplo de uso de etiquetas de salto de línea automático

Fuente: IACC (2020)

Otras de las etiquetas HTML con salto de línea automático tenemos a la etiqueta para creación de párrafos
<p> y su correspondiente etiqueta de cierre </p>. Recordemos que un párrafo está compuesto por varias
frases sobre un mismo tema, por lo que al señalar la finalización de este se incorpora de manera automática
un salto de línea.

2.5.2. COMENTARIOS

Los comentarios son líneas de texto recogidas entre dos etiquetas HTML con sus atributos específicos, y
que el navegador no mostrará en pantalla. Este texto, aunque no se muestra en pantalla, el navegador sí
que lo leerá cuando examine el documento HTML.
Comentar en HTML es realmente sencillo. Dentro de tu código deberás abrir una etiqueta HTML como
haces habitualmente, con el símbolo de «menor que». Seguido irá un cierre de exclamación y dos guiones.
Para cerrar el comentario deberás poner dos guiones y luego el símbolo de «mayor que».

<!-- Aquí puedes escribir tu comentario -->

2.5.3. CONJUNTO DE CARACTERES Y CARACTERES ESPECIALES

Los símbolos especiales en HTML se pueden usar simplemente recordando su nombre, o el número
asignado a dicho símbolo en la tabla ASCII. Por ejemplo, para el símbolo del centavo, que está en la posición

IACC 2022 21
 Semana 1
Introducción al HTML

162 de la tabla ASCII, su formato en HTML será &#162; o también, por su nombre &cent. Veamos el
ejemplo:

Figura 9. Ejemplo de uso de símbolos especiales

Fuente: IACC (2020)

Que genera la siguiente información en pantalla:

Figura 10. Visualización en pantalla del ejemplo de uso de símbolos especiales

Fuente: IACC (2020)

IACC 2022 22
 Semana 1
Introducción al HTML

Descarga
En el sitio web oficial del código ASCII, podrá obtener la lista de todos los símbolos especiales reconocidos
por el lenguaje HTML:
https://ascii.cl/es/codigos-html.htm

2.5.4. COLORES

También podemos cambiar el color de letra, mediante el atributo color de la etiqueta <FONT> cuyo valor
podrá el código hexadecimal del color o indicando el nombre en inglés del color.
Y la forma de usarlo es así:

Figura 11. Uso de colores

Fuente: IACC (2020)

El resultado es el siguiente:

IACC 2022 23
 Semana 1
Introducción al HTML

Figura 11. Visualización en el navegador de ejemplo de cambio de colores en HTML

Fuente: IACC (2020)

2.5.5. ESTRUCTURA DE ORDENAMIENTO Y ANIDAMIENTO DE ETIQUETAS

Dentro del código HTML se debe establecer un orden para las etiquetas, cuidando que cada etiqueta
iniciada tenga su respectiva etiqueta de cierre, ya que se usan como pares. Adicionalmente, se establece
el orden según se deseen aplicar características a la página. Otra consideración relevante es el anidamiento
de etiquetas, lo que se refiere a la posibilidad que una etiqueta se abra y se cierre dentro de otra etiqueta
que la contiene, consiguiendo que se apliquen ambos efectos proporcionados por cada etiqueta. Veamos
el siguiente código para entender mejor este concepto:

Figura 12. Anidamiento de etiquetas en HTML

Fuente: IACC (2020)

IACC 2022 24
 Semana 1
Introducción al HTML

Pregunta
¿Cómo explicarías la importancia y función de las etiquetas?

2.6. REGLAS DE USO DE HTML

En cuanto a las reglas de uso, lo más importante es tener claro que todo documento HTML debe estar
delimitado por la etiqueta de inicio <html> y su correspondiente etiqueta de cierre </html>. A su vez, ya
dentro del documento HTML, existe el encabezado y el cuerpo. El primero, delimitado por las etiquetas
<head> y </head> entre las que publicaremos las etiquetas de índole informativo. En cuanto al segundo,
delimitado en las etiquetas <body> y </body>, se establece el lugar donde se colocará el texto y demás
información a publicar en la página.
Adicionalmente, se deberá tener presente que toda etiqueta tiene su apertura <etiqueta> y su
correspondiente cierre, en el formato </etiqueta>. Es importante saber que HTML no establece diferencias
entre minúsculas y mayúsculas en los nombres de las etiquetas.

El espaciado entre líneas en HTML es sencillo. Si deseamos introducir un espacio vertical entre líneas, se
debe usar la etiqueta <br>. De tal manera, que si colocamos varias etiquetas <br> no se logrará introducir
más espacio. Esto se soluciona mediante la inserción de espacios en blanco “ ” representado por la
secuencia &nbsp. En el caso que se deseen introducir tres espacios o líneas entre líneas se deberá colocar
en el código HTML lo siguiente:

<br> &nbsp;
<br> &nbsp;
<br> &nbsp;

Veamos en el siguiente ejemplo su uso:

IACC 2022 25
 Semana 1
Introducción al HTML

Figura 13. Ejemplo de uso de espaciado

Fuente: IACC (2020)

Genera la siguiente salida:

Figura 14. Visualización en navegador de ejemplo de uso de los caracteres especiales para espaciado en HTML
Fuente: IACC (2020)

IACC 2022 26
 Semana 1
Introducción al HTML

COMENTARIO FINAL
Actualmente existen pocas empresas que no utilicen páginas web, por lo que cada vez es más notoria la
ventaja que representa para las organizaciones estar en la WWW, logrando extender su alcance, superando
principalmente las barreras geográficas.
Lo anterior, ha traído como consecuencia la necesidad de desarrollar múltiples proyectos cuyo elemento
común es el lenguaje HTML, desde el cual son embebidos o incorporados otros lenguajes de programación,
siendo la base el lenguaje HTML.
A través de la revisión del presente contenido, se ha podido conocer los elementos básicos del lenguaje
HTML, iniciando con terminología asociada, su historia y la estructura del documento HTML, conociendo
así, cómo se escribe en este lenguaje y la forma en la que se estructura una página web.
Todos estos elementos constituyen la base para desarrollar no solo el resto de los contenidos de la
asignatura, sino también, para incorporar conocimientos indispensables para la formación profesional de
quienes se desenvuelven en el área del desarrollo web.

IACC 2022 27
 Semana 1
Introducción al HTML

REFERENCIAS

IACC. (2015). Fundamentos de HTML. Programación HTML I. Semana 1

IACC (2020). Introducción al HTML. Programación web I. Semana 1

PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:

IACC (2022). Introducción al HTML. Programación Web I. Semana 1.

IACC 2022 28