-
Notifications
You must be signed in to change notification settings - Fork 15
HTML
Estos ejercicios contienen solamente un archivo: index.html. Es el único archivo que es absolutamente indispensable para una página de Internet.
El nombre es importante para un servidor. Si creamos una carpeta en un servidor y ponemos el archivo index.html, este es el primer archivo que se le envía al usuario.
Veamos cómo funciona una página web sencilla.
<html>
<head>
<title>Título</title>
<link href="estilos.css" rel="stylesheet">
<head>
<body>
<h1>Título principal</h1>
<p>Un párrafo.</p>
<img src="/imagenes/una-imagen.jpg" alt="" />
<script src="programa.js"></script>
</body>
</html> ------------ ----------
| Explorador | | Servidor |
------------ ----------
|
Escribimos una url
(Petición http con método GET)
|
|
El explorador busca la IP
registrada al dominio (DNS)
|
|
Con la IP, sabe donde esta el
servidor y hace nuestra
petición HTTP.
|
| Petición GET
-------------------------> El servidor lee la petición,
busca lo que pedimos y lo manda
de vuelta. Generalmente lo primero
es el index.html
|
Descarga |
<-------------------------
El explorador recibe este archivo
y comienza a renderizar en orden
(de arriba a abajo):
- Lee el <head>
- Encuentra el tag <title> y lo
pone en la pestaña del explorador.
(no lo vemos en pantalla)
- Encuentra el tag <link> de tipo
"stylesheet" y una url en "href".
|
| Petición GET
-------------------------> Busca ese archivo en el servidor,
en este caso debe estar junto al
index.html ya que lo escribimos
"estilos.css".
|
Descarga |
<-------------------------
El explorador recibe el archivo
"estilos.css" y lo lee en orden.
Estos estilos se van a aplicar a
los elementos que encuentre dentro
de <body>....</body>
- Termina el <head> y pasa a <body>
- Encuentra un <h1>
- Pone el texto en la pantalla.
- El texto se ve con estilos predeterminados.
- Encuentra un <p>
- Pone el texto en la pantalla.
- El texto se ve con estilos predeterminados.
- Encuentra una imagen <img>
|
| Petición GET
-------------------------> Busca la imagen la imagen dentro de
la carpeta "imagenes" ya que el "src"
es: imagenes/una-imagen.jpg
|
Descarga |
<-------------------------
- El explorador comienza a descargar
la imagen. Las imágenes para web tienen
una construcción "progresiva" generalmente,
por eso cuando pesan mucho vamos viendo que
se ven por partes.
- Encuentra otro archivo, el <script>
|
| Petición GET
-------------------------> Busca el archivo "programa.js" junto al
index.html y lo manda de vuelta.
|
Descarga |
<-------------------------
- Carga el archivo de JavaScript (.js) y lo corre
linea por linea.
¿porqué el archivo .js lo ponemos antes de cerrar
<body>?
porque en ese punto, todos los elementos del "DOM"
esten cargados y el JavaScript puede hacer lo suyo.
En exploradores modernos, a veces vemos que se pone
en el head con el parametro "defer":
<head>
...
<script src="programa.js" defer></script>
</head>
Esto significa que le pedimos al explorador
que pida este archivo, pero "difiera" su
procesamiento hasta el final, cuando el DOM
este listo.
|
|
Aplica los estilos de CSS en el DOM.
|
|
Vemos la página finalizada en pantalla
y el JavaScript puede controlar el DOM
y los estilos de esos elementos de ahí
en adelante.
¡¡¡¡Mierda!!!!! que paseo para mostrar una página muy sencilla. Esto sucede bastante rápido generalmente, pero debemos tener en cuenta este proceso a la hora de crear cualquier aplicación. No sólo para ser conscientes de cuanto pesan los recursos que ponemos en el servidor, sino también para entender que hace cada archivo: HTML, CSS y JavaScript.
¿Porqué es importante entonces llamar el HTML index.html?
Porque en la petición HTTP el usuario no tiene cómo saber el nombre del HTML que pusimos. Así que todo servidor responde a esa primera petición con el archivo index.html. Todo los otros recursos que están dentro del HTML tiene nombres y esos pueden ser lo que sea.