Copia - 02_DS_C2_SC4_GI_T1_GEN

Lenguajes principales

Nombres de dominio

Organización W3C “World Wide Web Consortium”

Protocolo de Transferencia de Hipertexto

Web

Instrucciones

Menú

EMPEZAR

Seguramente en tu día a día te conectas a diferentes sitios para consultar información, comunicarte con familiares, amigos o personas del trabajo, conocer lo que pasa alrededor del mundo, entre muchas otras cosas. Esta interacción es posible gracias a la gran infraestructura conocida como la Internet, donde uno de los servicios más populares es la red de ancho mundial, conocida también como la WWW por sus siglas en inglés World Wide Web.

La Web y HTML

La Web

Instrucciones

Inicio

La web es el conjunto de documentos accesibles a través de Internet que tienen una estructura que puede ser entendida por los navegadores, por ejemplo, Microsoft Edge, Mozilla Firefox, Safari, Chrome, entre otros. Esta estructura tiene un formato conocido como HTML, que es un lenguaje de marcado de Hipertexto el cual abordaremos más adelante.

Web

Instrucciones

Inicio

La web utiliza un protocolo para que las entidades que solicitan y envían información puedan entenderse. Este protocolo es el Protocolo de Transferencia de Hiper Texto Cuando abrimos un navegador y queremos ver el contenido de alguna página web, escribimos una dirección en el navegador, ésta se traduce a una dirección IP, que es la dirección de un servidor en algún lugar del mundo que aloja eso que quieres consultar. En este sentido, se utiliza el protocolo HTTP para hacer la solicitud, y el servidor responde con información en formato HTML que el navegador sabe exactamente cómo desplegar en tu pantalla.

Protocolo de Transferencia de Hipertexto

W3C

Instrucciones

Inicio

Día con día surgen nuevas tecnologías, nuevas formas de comunicación con respecto a la web, que de no ser reguladas podrían salirse de control; es por eso que existen organizaciones como la W3C o World Wide Web Consortium por sus siglas en inglés, que es una comunidad internacional encargada de desarrollar estándares abiertos para asegurar un buen crecimiento a largo plazo de la web.

Organización W3C “World Wide Web Consortium”

Nombres de dominio

Instrucciones

Inicio

Un nombre de dominio es mucho más fácil de recordar que la dirección del servidor que queremos consultar, por ejemplo, ¿qué será más fácil de recordar “google.com” o algo como “108.177.122.139”?

Un concepto interesante asociado con la Web son los nombres de dominio.Un nombre de dominio se asocia a una dirección IP de un servidor de Internet, de tal forma que cuando escribimos en el navegador, por ejemplo, google.com, esto es traducido a una dirección IP de un servidor que aloja el buscador más utilizado en nuestros días.

Un nombre de dominio es mucho más fácil de recordar que la dirección del servidor que queremos consultar, por ejemplo, ¿qué será más fácil de recordar “google.com” o algo como “108.177.122.139”?

Los nombres de dominio son nombres fáciles de recordar que se asocian a una dirección IP de un servidor de Internet. Se utilizan estos nombres, ya que es mucho más fácil de recordar Google que 108.177.122.139, ¿estás de acuerdo?

Nombres de dominio

Lenguajes

Instrucciones

Inicio

Descarga los archivos en el apartado de archivos adjuntos

La web está formada por documentos, que son recursos accesibles a nivel global y toda esta información está estructurada en 3 lenguajes principales:

• HTML
• CSS
• JavaScript

Un lenguaje es una forma de comunicación, y como tal, tiene un conjunto de caracteres especiales y un conjunto de reglas que dicen cómo deben escribirse los documentos para que puedan ser interpretados correctamente por un navegador.

Lenguajes principales

HTML

Instrucciones

Inicio

Descarga los archivos en el apartado de archivos adjuntos

El lenguaje HTML, es un Lenguaje de Marcado de Hipertexto, que nos sirve para definir la estructura de un documento. El HTML es un lenguaje de marcado, es decir, va “marcando o señalando” qué es cada parte en el documento, este lenguaje trabaja con etiquetas. Así como en el mundo real la gente marca o etiqueta sus cosas para diferenciarlas de otras, HTML utiliza etiquetas que podemos identificar con los caracteres de “< menor que” y “> mayor que”.

Lenguajes principales

Instrucciones

Inicio

Descarga los archivos en el apartado de archivos adjuntos

Por ejemplo, todo el contenido del documento HTML lo podemos encontrar dentro de las etiquetas <html> y </html>:

• La mayoría de las etiquetas tienen una etiqueta de inicio, por ejemplo <html> y otra de cierre </html>.
• La etiqueta de cierre lleva el mismo nombre de la etiqueta de inicio, pero se diferencia por llevar una / justo después del símbolo de “<”.

Veamos el ejemplo de la estructura básica de un documento html.

Lenguajes principales

Instrucciones

Inicio

Descarga los archivos en el apartado de archivos adjuntos

Como puedes ver, HTML define la estructura del documento y detalla lo que es cada parte de la información, si es un encabezado, un párrafo, una tabla de datos, etc. Es importante que identifiques cómo están estructurados los documentos que componen la web, ya que vamos a utilizar esta estructura más adelante.

Lenguajes principales

CSS

Instrucciones

Inicio

Descarga los archivos en el apartado de archivos adjuntos

CSS es un lenguaje de hojas de estilo, las siglas vienen del inglés Cascading Style Sheets que significa hojas de estilo en cascada, como su nombre lo indica, se utiliza para darle estilo a un documento, es decir, define qué colores tendrá cada elemento como: márgenes, tipo de fuente, tamaño, espaciado entre elementos, barras de navegación, en fin, el diseño general de cómo se verá el documento.

Lenguajes principales

Javascript

Has finalizado la lectura. Continúa con el siguiente apartado.

Descarga los archivos en el apartado de archivos adjuntos

Javascript es un lenguaje que hace posible que la gente interactúe con los documentos HTML. Hace muchos años, los documentos que podíamos visitar eran estáticos, con esto nos referimos a que siempre que visitabas un sitio de Internet el contenido no cambiaba y la gente que visitaba esos sitios no podía interactuar con ellos.Es un lenguaje queAgrega funcionalidad y dinamismo a este tipo de documentos, nos permite hacer actualizaciones de contenido dentro del sitio, almacenar datos, agregar funcionalidades, por ejemplo, gráficas o consumir información de otros sitios entre muchas otras cosas.

Lenguajes principales

Para ver más, visitar https://storyset.com

Para ver más, visitar https://elements.envato.com/es/graphics/similar-to-A5WP8AF

Ilustraciones

Ejemplos de mini ilustraciones

Iconografía

Clic en el ícono

En el ejemplo se mostraron solo algunas de las etiquetas más básicas de HTML, si quieres profundizar en esto, te compartimos un tutorial con el podrás practicar https://tutorialehtml.com/es/tutoriales-html-tutorial-html-completo/

Podemos ver que la primera línea es un tag que indica que tipo de documento es, después viene la etiqueta <html> que encierra dos partes principales: <head> y <body> que son el encabezado y el cuerpo del documento respectivamente.

<!DOCTYPE html> <html> <head> <title>Título de la página</title> </head> <body> <h1>Esto es un encabezado</h1> <p>Esto es un párrafo</p> </body> </html>

Al final de este módulo te compartimos un enlace al final de este módulo por si quieres profundizar en este tema.

En el ejemplo se mostraron solo algunas de las etiquetas más básicas de HTML, si quieres profundizar en esto, al final de la lección te proporcionaremos algunos tutoriales con los que podrás practicar.