Contenidos a Trabajar

1. Internet
2. ¿Cómo funciona Internet?
3. Protocolo TCP-IP
4. HTML
5. Sintaxis
6. Estructura
INTERNET
Acerca de ...

Internet (el internet o, también, la internet)​ es un conjunto

descentralizado de redes de comunicación interconectadas que utilizan
la familia de protocolos TCP/IP, lo cual garantiza que las redes físicas
heterogéneas que la componen constituyan una red lógica única de
alcance mundial. Sus orígenes se remontan a 1969, cuando se estableció
la primera conexión de computadoras, conocida como ARPANET, entre
tres universidades en California (Estados Unidos). Uno de los servicios
que más éxito ha tenido en internet ha sido la World Wide Web (WWW o
la Web), hasta tal punto que es habitual la confusión entre ambos
términos.

La WWW es un conjunto de protocolos que permite, de forma sencilla, la

consulta remota de archivos de hipertexto. Esta fue un desarrollo
posterior (1990) y utiliza internet como medio de transmisión.​ Existen,
por tanto, muchos otros servicios y protocolos en internet, aparte de la
Web: el envío de correo electrónico (SMTP), la transmisión de archivos
(FTP y P2P), las conversaciones en línea (IRC), la mensajería instantánea
y presencia, la transmisión de contenido y comunicación multimedia
—telefonía (VoIP), televisión (IPTV)—, los boletines electrónicos (NNTP),
el acceso remoto a otros dispositivos (SSH y Telnet) o los juegos en
línea.​

El uso de internet creció rápidamente en el hemisferio occidental desde

la mitad de la década de 1990 y desde la década de 2000 en el resto del
mundo.​
En los 20 años desde 1995, el uso de internet se ha multiplicado por 100,
cubriendo en 2015 a la tercera parte de la población mundial.​La mayoría
de las industrias de comunicación, incluyendo telefonía, radio, televisión,
correo postal y periódicos tradicionales están siendo transformadas o
redefinidas por Internet, y permitió el nacimiento de nuevos servicios
como correo electrónico (e-mail), telefonía por internet, televisión por
Internet, música digital, y vídeo digital.Las industrias de publicación de
periódicos, libros y otros medios impresos se están adaptando a la
tecnología de los sitios web, o están siendo reconvertidos en blogs, web
feeds o agregadores de noticias. Internet también ha permitido o
acelerado nuevas formas de interacción personal por medio de
mensajería instantánea, foros de Internet, y redes sociales.

El comercio electrónico ha crecido exponencialmente tanto por grandes

cadenas como pequeñas y medianas empresas o emprendedores, ya que
ahora pueden vender por internet productos o servicios hacia todo el
mundo.

Los servicios empresariales y financieros en Internet afectan las cadenas

de suministro en todas las industrias.
1.1. Cómo funciona internet

Muchos ven a Internet como una “nube” de tecnología o alguna suerte de

repositorio de aplicaciones y datos a los que se puede acceder, trabajar
o simplemente consultar. Sin embargo, el uso cotidiano hace que muy
pocas veces nos preguntemos qué es realmente.

Internet se define como una gran “red de redes”, es decir, una red
conectada a otra de manera continua y simultánea, pero para entenderlo
mejor veamos primero qué es una red:

Cada uno de estos gráficos representa una especie de red: de

computadoras, de puntos o de pesca. Lo que define a estas redes como
tales es que existe “interconexión” entre sus componentes, aún cuando
no se encuentren la totalidad de los puntos conectados entre sí. Desde
cualquier punto de la red podremos llegar a otro, con más o menos
vueltas, pero todos los destinos son alcanzables. Internet es justamente
eso: una gran red donde todos los dispositivos están conectados entre
sí.
¿Cómo se comunican las redes de Internet?

Para que una interconexión sea realmente global, todas las redes que se
conectan a la gran red de redes deben hacerlo a través de un mismo
protocolo o “lenguaje en común”. Es decir, el protocolo de comunicación
de Internet debe ser una implementación estándar que garantice la
conexión desde cualquier origen hasta cualquier destino.

Durante la década del ´70, un grupo de investigadores de Estados

Unidos creó un protocolo de comunicación que denominaron TCP/IP, y
conectaron entre sí a un conjunto de redes de computadoras a pedido
del gobierno de ese país, sin saber que el proyecto resultaría tan exitoso
y tendría alcance global. De esta forma, TCP/IP se convirtió en el modelo
de comunicación de las redes que componen Internet.

Interconexión

Probablemente la computadora que utilizamos a diario en la oficina esté

conectada a una red de computadoras. En nuestra casa, la computadora
portátil, tablet y celulares los vinculamos a un dispositivo inalámbrico que
luego se conecta a la red de fibra óptica de la empresa que nos brinda
servicio de Internet y de televisión por cable o telefonía. Éste se
comunica a la red de otro Proveedor de Servicios de Internet o ISP (por
sus siglas en inglés) más grande, que llega a un número mayor de
hogares y empresas, y así sucesivamente. A su vez, estos proveedores
de acceso internacional se interconectan con otros más grandes,
denominados Carriers, a través de fibras ópticas transcontinentales y
satélites, entre otros.

Con el correr de los años, esta gran red de redes ha pasado a ocupar un
lugar relevante en múltiples niveles ya que es transversal a cuestiones
sociales, políticas y económicas, y ya no excluyente de ámbitos
tecnológicos. El impacto de Internet es tal que ha modificado paradigmas
y continúa estableciendo nuevos desafíos en torno a la educación, la
industria, la seguridad, los derechos humanos, las políticas públicas y las
nuevas tecnologías, entre otros.

De lo anterior se hace evidente que Internet no es algo dado y que es

producto de un proceso histórico e interdisciplinario que continúa en
constante movimiento y en donde la participación de diversas partes
interesadas ha sido determinante para su desarrollo. Es por esto que
resulta fundamental comprender que la participación de diversos
sectores, y más aún de nuevas generaciones, en la Gobernanza de
Internet, es indispensable en las definiciones del futuro de Internet,
contemplando intereses y derechos de todos los sectores de la
comunidad.
1.2. Protocolo TCP-IP

¿Qué es un protocolo TCP/IP y cómo funciona?

Como sucede con las personas, es importante que los equipos tengan un
modo común de comunicarse entre ellos. Para la mayoría de los equipos
actuales, este modo es TCP/IP. TCP/IP suele venir integrado en los
equipos y está automatizado en buena medida, aunque puede ser útil
comprender el modelo TCP/IP, en especial si va a configurar un equipo
para conectarlo a otro sistema. Este artículo explica cómo funciona
TCP/IP.

¿Qué significa TCP/IP?

TCP/IP son las siglas de Transmission Control Protocol/Internet Protocol

(Protocolo de control de transmisión/Protocolo de Internet). TCP/IP es un
conjunto de reglas estandarizadas que permiten a los equipos
comunicarse en una red como Internet.

¿Qué hace exactamente TCP/IP? ¿Y cómo funciona?

Por sí mismo, un equipo puede realizar determinadas tareas. Pero su
potencia se multiplica cuando es capaz de comunicarse con otros.
Muchas de las cosas para las que utilizamos los equipos (enviar
mensajes de correo electrónico, ver Netflix u obtener indicaciones para
llegar a un sitio) dependen de la comunicación entre ellos. Pueden ser
equipos de distintas marcas o incluso encontrarse en zonas del mundo
diferentes. Y las personas y programas que los utilizan pueden hablar
distintos lenguajes humanos e informáticos.

Una interacción determinada puede darse entre dos sistemas

informáticos o involucrar cientos de sistemas. Sin embargo, como sucede
al pasar una carta o un paquete de mano en mano, cada transacción se
produce entre solo dos equipos cada vez.

Para que esto suceda, los dos equipos deben saber, por adelantado,
cómo se espera que se comuniquen.

¿Cómo inician la conversación?

¿A quién le toca comunicarse?

¿Cómo sabe un equipo si su mensaje se ha transmitido correctamente?

¿Cómo terminan la conversación?

Los equipos lo resuelven mediante protocolos. Un protocolo es un

conjunto de reglas convenido. En términos humanos, utilizamos
protocolos sociales para saber cómo comportarnos y comunicarnos con
otras personas. Las tecnologías tienen su propia forma de establecer
reglas de comunicación, como el telégrafo cuando empleaba el código
Morse o una radio CB en la que se utilizan códigos como “10-4”.

Con los equipos sucede lo mismo, aunque las reglas son más estrictas.
Cuando todos los equipos emplean el mismo protocolo, es posible
transferir información. Cuando no es así, cunde el caos.

La comunicación era más complicada cuando la gente comenzaba a

intercambiar información entre equipos. Cada fabricante tenía un sistema
de comunicación propio entre sus máquinas, pero dichos sistemas no
permitían la comunicación con los equipos de los demás fabricantes.
Pronto quedó claro que era necesario un estándar convenido que
permitiera a los equipos de todos los fabricantes comunicarse entre
ellos. Ese estándar es TCP/IP.

¿En qué se diferencian TCP e IP?

TCP e IP son dos protocolos distintos para redes informáticas.

IP es la parte que obtiene la dirección a la que se envían los datos. TCP

se encarga de la entrega de los datos una vez hallada dicha dirección IP.
Es posible separarlos, pero lo cierto es que no tiene mucho sentido
diferenciar entre TCP e IP. Como se usan juntos tan habitualmente,
“TCP/IP” y “modelo TCP/IP” son ya terminología reconocida.

Mírelo de esta forma: La dirección IP es como el número de teléfono que

se asigna a su smartphone. TCP es toda la tecnología que hace que el
teléfono emita un timbre al recibir una llamada y que le permite hablar
con alguien al otro lado de la línea. Son cosas diferentes, pero tampoco
tienen sentido la una sin la otra.

¿Qué hace exactamente TCP/IP? ¿Y cómo funciona?

TCP/IP fue desarrollado por el Departamento de Defensa de EE. UU. para

especificar el modo en que los equipos transfieren datos de un
dispositivo a otro. TCP/IP incide mucho en la precisión y dispone de
varios pasos para garantizar la correcta transmisión de los datos entre
ambos equipos.

Este es uno de los mecanismos que emplea para ello. Si el sistema

enviará un mensaje entero en una pieza y se encontrara cualquier
problema, sería necesario enviar de nuevo el mensaje completo. Lo que
hace TCP/IP es descomponer cada mensaje en paquetes que se vuelven
a ensamblar en el otro extremo. De hecho, cada paquete podría tomar
una ruta distinta hasta el equipo de destino si la ruta deja de estar
disponible o está muy congestionada.
Además, TCP/IP divide las distintas tareas de comunicación en capas.
Cada capa tiene una función distinta. Los datos pasan por cuatro capas
independientes antes de recibirse en el otro extremo (como se explica en
la sección siguiente). A continuación, TCP/IP recorre estas capas en
orden inverso para reensamblar los datos y presentarlos al destinatario.

El propósito de las capas es crear un sistema estandarizado, sin que los

distintos fabricantes de hardware y software tengan que gestionar la
comunicación por su cuenta. Es como conducir un coche: todos los
fabricantes convienen en la posición de los pedales, así que no tenemos
que tener eso en cuenta al cambiar de coche. También significa que es
posible actualizar determinadas capas, por ejemplo, para mejorar el
rendimiento o la seguridad, sin tener que actualizar todo el sistema.

Las cuatro capas del modelo TCP/IP

TCP/IP es un protocolo de enlace de datos que se utiliza en Internet. Su

modelo se divide en cuatro capas diferenciadas. Cuando se emplean
juntas, es posible referirse a ellas como un paquete de protocolos.

Capa de enlace de datos

La capa de enlace de datos (también denominada capa de enlace, capa

de interfaz de red o capa física) es la que maneja las partes físicas del
envío y recepción de datos mediante el cable Ethernet, la red
inalámbrica, la tarjeta de interfaz de red, el controlador del dispositivo en
el equipo, etcétera.

Capa de Internet

La capa de Internet (también denominada capa de red) controla el

movimiento de los paquetes alrededor de la red.

Capa de transporte

La capa de transporte es la que proporciona una conexión de datos

fiable entre dos dispositivos. Divide los datos en paquetes, hace acuse
de recibo de los paquetes que recibe del otro dispositivo y se asegura de
que el otro dispositivo haga acuse de recibo de los paquetes que recibe
a su vez.

Capa de aplicaciones

La capa de aplicaciones es el grupo de aplicaciones que requiere

comunicación de red. Es con lo que el usuario suele interactuar, como el
correo electrónico y la mensajería. Como la capa inferior gestiona los
detalles de la comunicación, las aplicaciones no tienen que preocuparse
por ello.

¿Mis paquetes de datos se mantienen privados?

No. Cuando los paquetes se transmiten entre equipos, son vulnerables y
otros pueden verlos. Esa es una de las razones por las que se aconseja
evitar las redes Wi-Fi públicas para enviar datos que deban mantenerse
privados, así como utilizar cifrado.

Si esto es algo que le preocupa (por ejemplo, si va a enviar información

de identificación personal o datos financieros), puede cifrar los datos
empleando una red privada virtual (VPN) o trabajando con páginas web
con seguridad https.

¿TCP/IP funciona con toda clase de direcciones IP?

Hay varios tipos de direcciones IP. No obstante, todas ellas utilizan

TCP/IP.

Las diferencias entre los tipos de direcciones IP son transparentes para

el usuario esporádico, y el hecho de que no necesite saber mucho al
respecto es una de las ventajas de TCP/IP. Normalmente, estos asuntos
los administra quien haya configurado el sistema operativo del equipo o
el dispositivo móvil. En cualquier caso, a modo de aclaración:

Las direcciones IP estáticas no cambian en ningún momento. Son como

la dirección fija de su domicilio, un dato inalterable.

Las direcciones IP dinámicas cambian, o al menos están diseñadas para

cambiar. Cuando un sistema informático utiliza una dirección IP dinámica,
anuncia “¡aquí es donde puedes encontrarme!” a la red local.
Tal vez haya oído hablar de ciudades en las que la población crece tan
rápido que se han tenido que crear nuevos códigos de área para que los
recién llegados puedan tener un número de teléfono. Con el número
siempre creciente de dispositivos conectados, TCP/IP ha tenido un
problema similar. Básicamente, Internet se estaba quedando sin
direcciones IP. Por eso se desarrolló una nueva versión de dirección IP
denominada IPv6, una alternativa a las direcciones IPv4 existentes.

De hecho, TCP/IP se incluye como estándar

TCP/IP es el paquete de protocolos más utilizado en la web. Millones de

personas lo emplean cada día, aunque no sean conscientes de ello.

En la inmensa mayoría de los equipos, TCP/IP se integra como estándar.

No tiene que hacer nada para configurarlo de manera manual. En
ocasiones, tal vez tenga que decirle a una aplicación cuál es su dirección
TCP/IP.

En algunas circunstancias puede querer ocultar su dirección IP,

normalmente por motivos de seguridad.
¿Cómo puedo saber cuál es mi dirección TCP/IP?

Cada dispositivo tiene su propia dirección TCP/IP. Por lo general, el

dispositivo puede comunicarse automáticamente, pero a veces es
necesario proporcionar su dirección TCP/IP de forma manual. El modo de
encontrar su dirección IP depende del sistema operativo.

Podés consultar tu IP pública desde una página web como

https://www.cual-es-mi-ip.net/

Conceptualmente, el número obtenido se puede asemejar a la “dirección”

de una habitación de hotel, en la que la gerencia del mismo sabe que
puede encontrarlo o el número de teléfono de tu celular.
2. HTML

HTML es un lenguaje que sirve para construir páginas web. Es el primer

paso que debería completar cualquier persona que quiera dedicarse al
desarrollo de web en general y un conocimiento recomendado para
cualquier persona que trabaje en el medio Internet.

Ingresando al mundo HTML

Bienvenidos, vamos a descubrir el principal lenguaje utilizado para la

creación de páginas web: Hyper Text Markup Language, más conocido
mediante sus siglas HTML.

Puede que en un principio, el hecho de hablar de un lenguaje

“informático” de un poco de nervios, sin embargo, HTML no deja de ser
más que una forma sencilla de especificar el contenido de las páginas,
indicando el texto y otros elementos como imágenes, tablas, listas, etc.

Al final es de suma importancia ya que es el medio con el cual se

suministra el contenido a los navegadores y por tanto, si queremos
comenzar a aprender a crear páginas web, necesariamente debemos
comenzar por aquí.

De a poco iremos conociendo el lenguaje a través de numerosos

ejemplos que te sugerimos realizar por ti mismo para asimilar mejor los
conocimientos.
Verás también como HTML dentro del contexto de la creación de una
página web, se apoya en editores, programas para subir archivos al
servidor, etc.

Es necesario leer este texto para cualquier persona, que con

conocimientos de informática, desean hacer proyectos front-end en
cualquier lenguaje.

Con ganas y realizando los ejercicios al final, tendrás las habilidades y

conocimientos como para realizar una página web por tu cuenta que esté
lista para publicar. Además podrás:

● Identificar qué se debe hacer con HTML y qué no.

● Capacidad para crear y publicar vuestro propio sitio web con un
mínimo de calidad.
● Conocimientos de todo tipo sobre las tecnologías y herramientas
empleadas en el ámbito de la Red.

Las primeras cosas que debes saber sobre HTML: historia, objetivos y
demás conocimientos...

HTML es el lenguaje con el que se escribe el contenido de las páginas

web.

Las páginas web pueden ser vistas por el usuario mediante un tipo de
aplicación llamada cliente web o más comúnmente "navegador".
Podemos decir por lo tanto que el HTML es el lenguaje usado por para
especificar el contenido que los navegadores deben representar a la hora
de mostrar una página web.
Este lenguaje nos permite aglutinar textos, imágenes, enlaces... y
combinarlos a nuestro gusto. La ventaja del HTML a la hora de
representar el contenido en un navegador, con respecto a otros formatos
físicos como libros o revistas, es justamente la posibilidad de colocar
referencias a otras páginas, por medio de los enlaces hipertexto.

Un poco de historia.

El lenguaje HTML se creó en 1991. Tiene una historia realmente corta

pero para su poca vida ha sufrido importantes cambios. Su padre es Tim
Berners-Lee que lo diseñó con objetivos divulgativos. Inicialmente no se
pensó que la web llegaría a ser un área de ocio con carácter multimedia,
de modo que, nació sin dar respuesta a todos los posibles usos que se le
iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro.
Sin embargo, pese a esta deficiente planificación, sí que se han ido
incorporando modificaciones con el tiempo, agregando nuevas
características para cubrir las nuevas necesidades.

Como hemos dicho, 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 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.

Históricamente 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.

Los navegadores y sus problemas

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.

Afortunadamente, en la actualidad las diferencias de interpretación de

los navegadores con respecto a un mismo código HTML son mínimos,
pero en el pasado los desarrolladores tenían que emplear mucho tiempo
en remar contracorriente para solucionarlos. Sin embargo, quedan
todavía muchos usuarios que navegan con sistemas anticuados, ya sea
por falta de interés para actualizarse, conocimientos, o por disponer
ordenadores muy antiguos.
Pero no todo ha sido malo por parte de los navegadores. Ellos también
son los responsables de introducir nuevas etiquetas en el uso común del
día a día, que se han ido incorporando al estándar HTML en sucesivas
versiones. Aunque antes de estandarizarse esas etiquetas era común
que cada navegador crease su etiqueta propietaria para resolver la
misma necesidad, lo que obligaba a los desarrolladores a repetir código o
incluso a hacer versiones de páginas diferentes para navegadores. Con
todo esto no queremos asustar a nadie y volvemos a repetir que las
diferencias en la actualidad son mínimas, pero sí deseamos que quede
clara la necesidad de la estandarización creada por el W3C, responsable
de marcar una pauta que actualmente cumplen todos los navegadores
modernos de manera bastante fiel.

Los lenguajes de la web

HTML no está solo como único lenguaje para crear la web, aunque en un
principio sí que era así. Su evolución tan anárquica ha supuesto toda una
serie de inconvenientes y deficiencias que han debido ser superados con
la introducción de otras tecnologías accesorias capaces de organizar,
optimizar y automatizar el funcionamiento de las webs. Algunos ejemplos
son CSS o JavaScript. Veremos más adelante en qué consisten estas
tecnologías.

Lo que es importante para el desarrollador es conocer el enfoque de

cada lenguaje, para saber cuál es la manera correcta de utilizarlo y cómo
se complementan los unos a los otros. No es necesario que se sea
experto en todos ellos, pero sí saber qué cosas se deberían hacer con
cada cual, para no cometer errores que deriven en una mala
interpretación por parte de los navegadores. Así mismo tenemos que
pensar que no todas las personas van a acceder a una web a través de
un ordenador, sino también de un teléfono o de navegadores
especializados en donde la accesibilidad debe ser diferente. Es por ello
que es importante escribir correctamente los lenguajes, respetando los
estándares y así cada navegador podrá hacer su mejor papel para
representar la página lo más correctamente posible.

Deseamos incidir mucho en este detalle, la correcta utilización del HTML:

escribir el contenido, para que nuestro trabajo sea lo más adecuado y de
elevada calidad.

Los editores de HTML

Además del navegador necesario para ver los resultados de nuestro

trabajo, necesitamos evidentemente otra herramienta capaz de crear la
página en sí.

Un archivo HTML (una página) no es más que un texto plano (sin forma
estética) al que le colocamos extensión ".html". Es por ello que para
programar en HTML necesitamos un editor de texto.

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.
Aunque para aprender es recomendable que se use un programa que te
permita escribir el código plano, podés comenzar tus primeros pasos con
algún editor que genera el código mientras escribís en un procesador de
texto al estilo Word. Te recomendaría el uso de Kompozer, un sistema
gratuito y que puede ayudarte a iniciar en el código HTML,
posteriormente, creo que se puede continuar con Geany, como para
iniciar las etapas de creación de páginas web profesionales.

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. Existen infinidad de editores de código interesantes, que
nos aportan más o menos facilidades y que nos permiten aumentar
nuestra productividad. No obstante, es aconsejable en un principio
utilizar una herramienta lo más sencilla posible para poder prestar la
máxima atención a nuestro código y familiarizarnos lo antes posible con
él. Siempre tendremos tiempo más adelante para pasarnos a editores
más versátiles con la consiguiente ganancia de tiempo.

No es posible decir a nadie el editor que debe de usar, porque cada uno
tendrá sus preferencias. Igualmente para quienes están comenzando
nosotros recomendamos:

https://code.visualstudio.com/
Igualmente una persona que comience puede pensar que tienen muchas
opciones, pero realmente podemos comenzar con lo básico, crear
nuevos archivos, editar el código, guardarlos en nuestro disco duro... y
punto. Recomendamos este editor porque se encuentra disponible para
todas las plataformas, Windows, Mac y Linux y porque es gratuito para
cualquier uso.

En resumen, HTML sirve para decir qué contenido debe tener una página
y CSS sirve para decir cómo se debe representar tal contenido, con qué
estilo, color, imágenes etc... Es fácil saltarse esta regla, porque en HTML
existen diversas etiquetas (y atributos, de los que ya hablaremos) que
realmente están pensados para definir la presentación. Es una herencia
de versiones pasadas del HTML y aunque comenzaremos de esa forma
debemos recordar que usar HTML para definir cómo debe de
representarse un elemento en la página no es técnicamente correcto.

Como has visto, 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

Consejo: Utiliza siempre la misma extensión en tus archivos HTML. Eso

evitará que te confundas al escribir los nombres de tus archivos unas
veces con .htm y otras con .html. Cabe remarcar que hoy todo el mundo
usa la extensión ".html" y no ".htm".
2.1 SINTAXIS

Como lo mencionan sus siglas HTML (Hyper Text Markup Language),

este lenguaje nos va a permitir “marcar” (definir, colocar) contenido de
“hipertexto” (lo que queremos mostrar) en un navegador mediante el uso
de “etiquetas” (palabras clave que me ayudan a dar estructura a ese
contenido).
Como se ve en la imágen, las etiquetas definen no solo el contenido sino
la estructura interna de nuestros elementos.

De esta manera, se genera una estructura a modo de árbol o “cuadro de

relación” que contendrá todo el contenido textual y multimedia que
llevará nuestro sitio web. Luego, como hemos visto anteriormente,
haremos uso de CSS para modificar visualmente esa estructura.

El código real de la imagen se vería algo así:

En este ejemplo, podemos observar una secuencia de etiquetas HTML

creando una estructura la cual delimita nuestro contenido. Luego con
CSS daremos estilos para que cada cosa tenga color, posición, tamaño,
etc.
ETIQUETAS

Lo primero que debemos saber, es que existen 2 tipos de etiquetas

HTML: Abiertas y Cerradas. Las etiquetas abiertas son únicas, como por
ejemplo <img /> o <br /> mientras que las etiquetas cerradas son un
juego de pares, como por ejemplo <section></section> o
<div></div>.

La principal, pero no única razón es que las abiertas no tienen contenido

mientras que las cerradas pueden tener desde texto hasta otras
etiquetas.

Asimismo, independientemente de esta condición, cada etiqueta además

puede ser del tipo en bloque o en línea. Lo cual define su
comportamiento en el cuerpo del navegador, por ejemplo, las etiquetas
que nativamente son en bloque siempre intentan ocupar el 100% de
ancho de su contenedor, mientras que las etiquetas en línea sólo
adoptan el ancho de su contenido, dejando el espacio de alrededor libre
para ser ocupado por otra etiqueta en línea.
Para conocer qué comportamiento adopta de forma nativa cada una de
las etiquetas HTML podés acceder a la documentación completa en el
siguiente enlace: https://www.w3schools.com/html/html_blocks.asp
2.1 ESTRUCTURA

Todo documento escrito en lenguaje HTML, debe conservar una

estructura básica estándar y obligatoria.

La misma está compuesta de la siguiente manera:

DOCTYPE

<!DOCTYPE> informa al navegador que versión de HTML (o XML) se usó

para escribir el documento.
HTML

<html> (o elemento HTML raíz) representa la raíz de un documento

HTML. El resto de elementos descienden de este elemento.

HEAD

El elemento HTML <head> provee información general (metadatos)

acerca del documento, incluyendo su título y enlaces a scripts y hojas de
estilos.

TITLE

El elemento <title> HTML define el título del documento que se muestra

en un browser la barra de título o la pestaña de una página. Solo contiene
texto; las etiquetas dentro del elemento se ignoran.

BODY

El elemento <body> de HTML representa el contenido de un documento

HTML. Solo puede haber un elemento <body> en un documento.
ETIQUETAS SEMÁNTICAS

A diferencia de otras versiones donde para separar o estructurar

contenido se utilizaba casi por defecto la etiqueta <div>, en HTML5 se
han incorporado muchas etiquetas que sirven para indicar qué son y cuál
es el significado de los elementos que contienen dentro.

Esas son las etiquetas semánticas, que ganan mucha importancia en el

marco del HTML y de la composición de un documento web por ayudar a
motores de búsqueda como Google a indexar más correctamente los
contenidos de un sitio.

Como vemos en la imagen, esas etiquetas son <header>, <nav>,

<section>, <article>, <aside>, <footer> y <main>, entre otras. Esto
nos introduce dentro del concepto de web semántica donde se busca
que el código HTML que escribimos posea sentido semántico literal a fin
de facilitar la comprensión estructural de nuestro sitio entre
desarrolladores y el entendimiento de los motores de búsqueda sobre
nuestro código.

Si te interesa profundizar sobre este tema, podés hacerlo en el siguiente

enlace: https://www.w3schools.com/html/html5_semantic_elements.asp
ENCABEZADOS

Los encabezados HTML o “HTML Header Tags” son las etiquetas que
conocemos como <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.

Un encabezado HTML, es una etiqueta de título que utilizamos dentro de

una página web para resaltar la temática y sub-temáticas del contenido.
En SEO (Optimización de Motores de Búsqueda), estos encabezados,
son importantes tanto para los usuarios como para Google, ya que les
ayuda a entender mejor la estructura temática de una página.

Desde la perspectiva de las personas y los motores de búsqueda, estas

etiquetas funcionan como guía y resumen del texto. Brinda a los lectores
y rastreadores la esencia del contenido, al transmitir de manera concisa
y visual su mensaje principal.
Las etiquetas de encabezado proporcionan a las páginas web dos
grandes beneficios: claridad y jerarquía. Donde esta última es de vital
importancia a la hora de utilizar nuestros encabezados ya que serán
utilizados por los motores de búsqueda a través de la jerarquía utilizada,
pudiendo elegir Google, nuestro texto definido en un <h1> como el texto
a mostrar cuando ofrezca nuestro sitio como resultado. Además que los
encabezados jerarquizados ordenan visualmente el contenido.