Una descripción general de cómo funciona la Web.

Antes de sumergirse en el aspecto técnico y práctico de la codificación, debe tener una comprensión básica de cómo funciona el entorno subyacente.

Esta introducción está destinada a proporcionar una descripción general rápida de Internet y la Web.

Una red gigante de computadoras.

Internet no es lo mismo que Web. Internet es más grande, más antigua y más variada.

Imagine cómo se interconectan las carreteras en todo el mundo: las calles pequeñas se conectan a los carriles de la ciudad que se convierten en carreteras regionales que luego se fusionan con las autopistas nacionales e internacionales. Puedes conducir desde tu casa a cualquier otra casa en el mundo 1. Tampoco existe un centro real en esta red de carreteras.

Internet es similar. Pero en lugar de caminos, son cables. Y en lugar de casas, son computadoras. Y en lugar de autos viajando en esta red, es información.

Fue inventado en 1969 para conectar computadoras en los EE.UU. Hoy en día, miles de millones de dispositivos (incluidos PC, portátiles, teléfonos móviles, televisores, frigoríficos…) están interconectados.

Cliente y Servidor.

Por lo general, una conexión en Internet se lleva a cabo entre 2 computadoras solamente:

• Uno que tiene la información (el servidor).
• El que quiere la información (el cliente).

Un cliente es un programa que puede tomar muchas formas:

• Un navegador web (como Firefox).
• Un cliente de correo electrónico (como Outlook).
• Una aplicación de mensajería (como Whatsapp).
• Un servicio de transmisión de video (como Netflix).

Cada uno de estos programas recuperará información de un servidor, donde se almacena algo (un sitio web, sus correos electrónicos, mensajes, películas). Aunque los programas cliente también envían información al servidor, normalmente no la almacenan, mientras que los servidores sí lo hacen.

Un servidor puede considerarse una computadora dedicada siempre conectada a Internet, cuyo único propósito es entregar contenido.

Aunque cualquier dispositivo conectado a Internet puede ser cliente y servidor al mismo tiempo, la mayoría de los dispositivos que usamos se consideran clientes, porque solo recuperamos datos y no entregamos ninguno.

Dirección IP.

Como cada casa tiene una dirección postal específica y única, a cada ordenador conectado a Internet se le asigna una dirección IP, para poder ser identificado en la red.

Una dirección IP generalmente se ve como una combinación de 4 números: 91.198.174.192

Dominios.

Aunque las direcciones IP son útiles para que las computadoras se distingan entre sí gracias a su singularidad, son difíciles de leer y recordar para los humanos.

Es por eso que los dominios se crearon en 1985. Asocian una dirección IP como 91.198.174.192 con una cadena de texto como wikipedia.org. Como resultado, ambos son intercambiables: puedes ir a https://91.198.174.192 o https://wikipedia.org y terminar exactamente en el mismo sitio web.

Un dominio tiene 3 partes, que se leen de derecha a izquierda:

• Dominio de nivel superior (o TLD): los hay genéricos ( .com, .org, .net ) y específicos de cada país ( .us, .nl, .fr ).
• Nombre de dominio : un nombre como wikipedia o facebook, que puede incluir letras, números, pero sin espacios ni puntos.
• Subdominio (opcional). Aunque esta tercera parte es opcional, la mayoría de los sitios web lo utilizan www como subdominio predeterminado.

Piense en los dominios como una forma de nombrar computadoras conectadas a Internet.

¿Cómo compro un dominio? En realidad, no compras un dominio, sino que lo alquilas a quien administre el TLD que estás buscando. Las empresas que administran dominios de Internet se denominan registradores de dominios. Los más famosos son Namecheap y Gandi.

¿Quieres saber más sobre el tema? aqui te dejo este link Conoce los 6 tipos de dominios de internet

¿Que es DNS?

El Domain Name System (Sistema de Nombres de Dominio o DNS) es un sistema de nomenclatura jerárquico descentralizado para dispositivos conectados a redes IP como Internet o una red privada. Este sistema asocia información variada con nombres de dominio asignados a cada uno de los participantes. Su función más importante es traducir nombres inteligibles para las personas en identificadores binarios asociados con los equipos conectados a la red, esto con el propósito de poder localizar y direccionar estos equipos mundialmente.

El servidor DNS utiliza una base de datos distribuida y jerárquica que almacena información asociada a nombres de dominio en redes como Internet. Aunque como base de datos el DNS es capaz de asociar diferentes tipos de información a cada nombre, los usos más comunes son la asignación de nombres de dominio a direcciones IP y la localización de los servidores de correo electrónico de cada dominio. La asignación de nombres a direcciones IP es ciertamente la función más conocida de los protocolos DNS. Por ejemplo, si la dirección IP del sitio Google es 216.58.210.163, la mayoría de la gente llega a este equipo especificando www.google.com y no la dirección IP. Además de ser más fácil de recordar, el nombre es más fiable.

Protocolos.

El propósito de interconectar todas estas computadoras es que interactúen entre sí. Y al igual que los humanos hablamos en diferentes idiomas, las computadoras en Internet hablan usando protocolos.

Cada uno de ellos tiene un propósito diferente:

URL

Ahora que hemos visto cómo funcionan los dominios y los protocolos, podemos crear una URL: Uniform Resource Locator (Localizador Uniforme de Recursos).

Por ejemplo, la URL de github es https://www.github.com/codespaces, y se puede dividir en 4 partes:

• https:// es el protocolo
• www. es el subdominio
• github.com es el dominio
• /codespaces es el camino

Esta URL es única y define:

• Ir a usar VScode en la nube https://www.github.com/codespaces
• Cómo se supone que la computadora debe leerlo https://

Las URL pueden tener un aspecto más complejo. Puedes leer sobre la anatomía de una URL.

Llegó el momento de hablar sobre HTML, el lenguaje con el que se crean las páginas web.

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

El HTML se creó en un principio con objetivos divulgativos de información con texto y algunas imágenes. No se pensó que llegara a ser utilizado para crear área de ocio y consulta con carácter multimedia (lo que es actualmente la web), de modo que, el HTML se creó 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, si que se han ido incorporando modificaciones con el tiempo, estos son los estándares del HTML. Numerosos estándares se han presentado ya.

El HTML es un lenguaje de marcación de elementos para la creación de documentos hipertexto, muy fácil de aprender, lo que permite que cualquier persona, aunque no haya programado en la vida, pueda enfrentarse a la tarea de crear una web. HTML es fácil y pronto podremos dominar el lenguaje. Más adelante se conseguirán los resultados profesionales gracias a nuestras capacidades para el diseño y nuestra vena artista, así como a la incorporación de otros lenguajes para definir el formato con el que se tienen que presentar las webs, como CSS.

HTML significa: HyperText Markup Language (Lenguaje de Marcado de Hipertexto):

• HyperText (HiperTexto) significa: que utiliza la parte HTTP de Internet.
• Markup (Marcado) significa: que el código que escribe está anotado con palabras clave.
• Language (Lenguaje) significa: que puede ser leído tanto por un humano como por una computadora.

Como cualquier lenguaje, HTML viene con un conjunto de reglas. Estas reglas son relativamente simples. Todo se reduce a definir límites, saber dónde comienza algo y dónde termina algo.

Aquí hay un párrafo de muestra en HTML:

        
<p>Esto es un párrafo en HTML</p>
        
    

• La etiqueta de Apertura <p> define el inicio del párrafo.
• La etiqueta de Cierre </p> define su final.

¿Donde escribir HTML?

Para comenzar a escribir código HTML deberá de descargar un editor de código, este software nos permite escribir código HTML5 entre otros lenguajes, también nos facilita al momento de escribir código, ya que nos resalta el código que escribimos y tiene autocompletado.

Algunos de los mejores editores de código, los más populares son:

• Visual Studio Code.
• Sublime Text.
• Vim.
• Notepad++.

Probablemente te hayas encontrado con archivos de texto simples, esos que tienen una .txt Para que dicho archivo de texto se convierta en un documento HTML (en lugar de un documento de texto), debe usar una .html extensión.

Comentarios en HTML.

Si escribes algo en su código sin interrumpir la forma en que el navegador mostrará su página, puede escribir comentarios. El navegador los ignorará y solo son útiles para nosotros, los humanos que escribimos el código. Un comentario comienza con <!-- y termina con -->

        
<!-- Esto es un comentario! -->
<p>Hello World!</p>
        
    

El HTML es un "lenguaje de marcado". Basa su sintaxis en un elemento base al que llamamos marca, tag o simplemente etiqueta. A través de las etiquetas vamos definiendo los elementos del documento, como enlaces, párrafos, imágenes, etc. Así pues, un documento HTML estará constituido por texto y un conjunto de etiquetas para definir la función que juega cada contenido dentro de la página. Todo eso servirá al navegador para saber cómo se tendrá que presentar el texto y otros elementos en la página.

La etiqueta presenta frecuentemente dos partes, su apertura y cierre, y se encierran ambas partes entre símbolos "menor que" y "mayor que". Lo veremos a continuación:

• Menor que <
• Mayor que >

Lo que ve entre paréntesis angulares < y > son etiquetas HTML. La única diferencia entre una etiqueta de apertura y una de cierre es la barra inclinada / que precede al nombre de la etiqueta.

Cuando combina una etiqueta de apertura, una etiqueta de cierre y todo lo demás, obtiene un elemento HTML.

Toda la línea es un elemento HTML que usa las etiquetas HTML <p> y </p>

Construcción básica de una página HTML.

Estas etiquetas deben colocarse una debajo de la otra en la parte superior de cada página HTML que cree.

• <!DOCTYPE html> Esta etiqueta especifica el idioma que escribirás en la página. En este caso, el lenguaje es HTML 5.
• <html> Esta etiqueta indica que de ahora en adelante vamos a escribir en código HTML.
• <head> Aquí es donde van todos los metadatos de la página, principalmente destinados a los motores de búsqueda y otros programas informáticos.
• <title> Aquí es donde insertamos el nombre de la página tal como aparecerá en la parte superior de la ventana o pestaña del navegador, (esta etiqueta siempre se incluye dentro de la etiqueta <head>).
• <meta> meta de "meta information" - meta información. Sirve para aportar información sobre el documento.
• <body> Aquí es donde va el contenido de la página.

Así es como se estructura visualmente su página HTML promedio.

        
<!DOCTYPE html>
<html lang="es">
<head>
    <title>Documentación HTML5</title>
    <meta charset="UTF-8">
    <meta name="description" content="Una simple demostración de la estructura básica de html">
</head>
<body>
    <h1>Encabezado nivel 1</h1>
    <p>Párrafo abajo del encabezado</p>
</body>
</html>
        
    

Etiqueta a -- <a>

Los enlaces se crean con la etiqueta <a>, que significa ancla. La etiqueta ancla crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL. Los enlaces son esenciales en HTML, ya que la Web se diseñó inicialmente para ser una red de información de documentos enlazados entre sí. La parte de Hipertexto de HTML define qué tipo de enlaces usamos: enlaces de hipertexto, también conocidos como hipervínculos.

En HTML, los enlaces son elementos en línea escritos con la etiqueta <a>.

El atributo href (Referencia de Hipertexto) se utiliza para definir el destino del enlace (hacia dónde navega cuando hace clic).

        
<p>
Para buscar algo, visite <a href="https://www.google.com">Google</a>
</p>
        
    

Los enlaces son la principal interacción de una página web: se navega de un documento a otro haciendo clic en los enlaces.

Hay 3 tipos de objetivo que puede definir.

• Objetivos de anclaje, para navegar dentro de la misma página.
• URL relativas, generalmente para navegar dentro del mismo sitio web.
• URL absolutas, generalmente para navegar a otro sitio web.

Etiqueta Img -- <img>

Las imágenes son el primer contenido no textual que apareció en la Web. La mayoría de los formatos de imagen que puede encontrar en su computadora también se pueden mostrar en su navegador: .jpg, .gif(animados o no), .png (transparentes o no), .bmp.

Las imágenes usan la etiqueta <img>, que es una etiqueta cierre automático (solo tiene una etiqueta de apertura). El src atributo define la ubicación de la imagen. Al igual que con los enlaces, puede usar URL relativas o absolutas.

La etiqueta <img>, tienen atributos, unos de ellos es alt. Este atributo define el texto alternativo que describe la imagen, texto que los usuarios verán si la URL de la imagen es errónea o la imagen tiene un formato no soportado o si la imagen aún no se ha descargado.

        
<p>Mira esta luna llena.</p>
<img src="luna.jpg" alt="Esto es una luna llena" />
        
    

Mira esta luna llena.

Cada imagen tiene 2 dimensiones: una anchura y una altura.

Al insertar una imagen en HTML, no necesita especificar sus dimensiones: el navegador la mostrará automáticamente en tamaño completo.

Etiqueta Strong -- <strong>

La etiqueta <strong> indica que sus contenidos tienen una gran importancia, seriedad o urgencia. Los navegadores normalmente muestran el contenido en negrita.

El etiqueta <strong> es para contenido que es de "gran importancia", incluidas cosas de gran seriedad o urgencia (como advertencias). Esta podría ser una oración que sea de gran importancia para toda la página, o simplemente podría tratar de señalar que algunas palabras son de mayor importancia en comparación con el contenido cercano.

        
<p>
La regla más importante, la regla que nunca puedes olvidar, 
no importa cuánto llore, no importa cuánto suplique:
<strong>nunca lo alimentes después de la medianoche.</strong>
</p>
        
    

Las etiquetas <ol> y <ul> nos permite hacer lista ordenadas <ol> al igual que hacer lista desordenadas <ul>. Cada etiquetas lleva dentro otra etiqueta que es <li> que define un elemento de lista, pueden tener uno o mas <li>.

Lista Ordenada -- <ol>

Esta etiqueta nos permite definir listas ordenadas, bien con numeración o alfabéticamente.

        
<h4>Lista de compras</h4>
<ol>
    <li>Leche</li>
    <li>Manzana</li>
    <li>Jugo de naranja</li>
</ol>
        
    

Lista desordenada -- <ul>

Esto se conoce mejor como una lista de viñetas y no contiene números.

        
<h4>Lista de compras</h4>
<ul>
    <li>Leche</li>
    <li>Manzana</li>
    <li>Jugo de naranja</li>
</ul>
        
    

Las etiquetas de encabezado implementan seis (6) niveles de encabezado del documento, <h1> es el más importante, y <h6>, el menos importante. Una etiqueta de encabezado describe brevemente el tema de la sección que presenta. La información de encabezado puede ser usada por los agentes usuarios, por ejemplo, para construir una tabla de contenidos para un documento automáticamente.

Todos los Niveles

El siguiente código muestra todos los niveles.

        
<h1>Esto es un nivel 1</h1>
<h2>Esto es un nivel 2</h2>
<h3>Esto es un nivel 3</h3>
<h4>Esto es un nivel 4</h4>
<h5>Esto es un nivel 5</h5>
<h6>Esto es un nivel 6</h6>          
        
    

¿Que es HTML Semántico?

"HTML semántico" se refiere a la idea de que todo el marcado HTML debe transmitir el significado subyacente de su contenido, no su apariencia. Ya hemos estado escribiendo HTML semántico (por ejemplo, usando <strong> en lugar de <b>), pero hay un conjunto completo de elementos diseñados con el único propósito de agregar más significado al diseño general de una página web. Se llaman "elementos de sección" y se ven así:

Usar estos como una alternativa a la etiqueta <div> es un aspecto importante del desarrollo web moderno porque facilita que los motores de búsqueda, los lectores de pantallay otras máquinas identifiquen las diferentes partes de su sitio web. También le ayuda como desarrollador a mantener su sitio organizado, lo que, a su vez, facilita su mantenimiento.

Etiqueta de Encabezado -- <header>

La etiqueta <header> es una nueva pieza de marcado semántico, que no debe confundirse con los encabezados (las etiqueta <h1> - <h6>). Denota contenido introductorio para una sección, artículo o página web completa. El “contenido introductorio” puede ser cualquier cosa, desde el logotipo de su empresa hasta ayudas para la navegación o información del autor.

Es una buena práctica envolver el nombre/logotipo de un sitio web y la navegación principal en un <header>.

Etiqueta de Navegación -- <nav>

La etiqueta <nav> le permite marcar las distintas secciones de navegación de su sitio web. Esto se aplica a la navegación del sitio principal, enlaces a páginas relacionadas en una barra lateral, tablas de contenido y prácticamente cualquier grupo de enlaces.

Esta es una gran pieza de información semántica para los motores de búsqueda. Les ayuda a identificar rápidamente la estructura de todo su sitio web, lo que facilita el descubrimiento de otras páginas. Como veremos con la etiqueta Aparte <aside>, es posible incluir varios elemento <nav> en una sola página si tiene diferentes conjuntos de enlaces relacionados.

Etiqueta de Aparte -- <aside>

Los encabezados y pies de página son formas de agregar información adicional a un artículo, pero a veces queremos eliminar información de un artículo. Por ejemplo, una publicación de blog patrocinada, puede contener un anuncio sobre la empresa patrocinadora; sin embargo, probablemente no queramos que forme parte del texto del artículo. Para eso está la etiqueta <aside>.

Además de los anuncios, <aside> también es apropiado para resaltar definiciones, estadísticas o citas. Si se ve diferente al resto del artículo, es probable que sea un aparte.

Cuando se usa fuera de un <article>, <aside>se asocia con la página como un todo (muy parecido a <header> y <footer>). Esto lo convierte en una buena opción para marcar una barra lateral en todo el sitio.

Etiqueta de Articulo -- <article>

La etiqueta <article> representa un artículo independiente en una página web. Solo debe incluir contenido que se pueda extraer de su página y distribuir en un contexto completamente diferente. Por ejemplo, una aplicación como Flipboard debería poder tomar un elemento <article> de su sitio, mostrarlo en su propia aplicación y hacer que tenga perfecto sentido para sus lectores.

Para cosas como publicaciones de blog, artículos de periódicos o páginas web dedicadas a un solo tema, a menudo solo hay un elemento <article> en la página. Pero es perfectamente legal tener más de un elemento <article> por página. Un buen ejemplo es una página que muestra un montón de publicaciones de blog. Cada uno de ellos se puede envolver en un conjunto separado de <article>.

Etiqueta de Secciones -- <section>

La etiqueta <section> es algo así como un <article>, excepto que no necesita tener sentido fuera del contexto del documento. Es decir, una aplicación como Flipboard no intentaría sacar todos los <section> de su página y presentarlos como piezas de contenido independientes.

Piense en <section> como una forma explícita de definir las secciones en el esquema de un documento. ¿Por qué querríamos esto en lugar de dejar que los niveles de encabezado lo hagan por nosotros? A menudo, necesita un contenedor para envolver una sección con fines de diseño, y tiene sentido usar la etiqueta <section> más descriptivo en lugar de un genérico <div>.

Al agregar esas etiquetas <section>, le estamos diciendo al esquema del documento que debe estar definido por la estructura de anidamiento de las etiquetas <section>en lugar de los niveles de encabezado. Básicamente, esto significa que cada uno <section> puede tener su propio conjunto de encabezados <h1> y <h6>que son independientes del resto de la página.

Etiqueta de Pie de Pagina-- <footer>

Conceptualmente, los pies de página son básicamente lo mismo que los encabezados, excepto que generalmente se encuentran al final de un artículo/sitio web y no al principio. Los casos de uso comunes incluyen cosas como avisos de derechos de autor, navegación de pie de página y biografías de autores al final de las publicaciones de blog.

Los pies de página se comportan igual que <header> en el sentido de que están asociados con la etiqueta de sección más cercano. Por lo tanto, podemos usarlo para el aviso de derechos de autor de nuestra página y la información del autor dentro de nuestro archivo <article>.

Puedes darme sugerencias para esta Documentación técnica HTML5 o puedes saludarme. 💙