¿Cómo están construidas las páginas web?, ¿Se puede ver el código de una página web?
Ya hablamos en anteriores ocasiones, que para hacer una página web se utilizan varios lenguajes de programación, entre ellas están el HTML, CSS, JavaScript, PHP, etc..
Pues bien, hoy vamos a hablar del que sería la base de las páginas web, el HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language), este lenguaje de programación, es el que forma toda la estructura de la web, durante muchos años, las páginas web estaban formadas solo por HTML, claro está que estas páginas eran muy simples.
El HTML es un lenguaje de programación que al interpretar el navegador a la hora de montar la página web y para ello se utilizan una serie etiquetas que el navegador va a interpretar para montar la estructura.
Las etiquetas HTML por norma general tiene un formato para una etiqueta de inicio y un formato para una etiqueta de fin y todo lo que haya en medio de estas dos etiquetas será interpretado por el navegador según el tipo de etiqueta.
La etiqueta de inicio, se forman con el símbolo de mayor (<), el símbolo de menor (>) y una palabra en medio de estos dos símbolos.
La etiqueta de fin, se forman con el símbolo de mayor (<), la barra de encima del siete (/) y el símbolo de menor (>) y una palabra en medio de estos dos símbolos.
Por ejemplo:
<html>
</html>Aquí hay una cosa que hay que contemplar es que cada navegador puede interpretar un poco distinto las etiquetas por eso un navegador podemos darte una web de una forma y otro navegador quizás de la muerte algo distinto.
Algunos ejemplos de etiquetas HTML son los siguientes:
- Para indicar que se inicio de una página web se suele poner la etiqueta <html> y para finalizar se pone la etiqueta de financiación </html>. Con esto ya lo indicaríamos al navegador que lo que vamos es una página web pero claro ahora mostraría una página en blanco porque no hay nada en medio luego hay dos partes muy importantes que hay que indicar:
- <head> para indicar que se inicia la cabecera y </head> para indicar que se finaliza la cabecera. Con estas etiquetas, indicaremos algunas cosas que no se van a mostrar pero que ha de tener en cuenta el navegador. Luego tendremos la siguiente etiqueta también dentro de las etiquetas html
<body>que es cuerpo de la web donde se va a mostrar la información dentro. Para finalizar sería </body>
Dejo un ejemplo en las notas del programa para que lo entendáis mejor:
<html>
<head>
</head>
<body>
Este es el texto que se mostrará
</body>
</html>Dentro del head puede haber algunas etiquetas como:
- <title> que indicará el nombre de la página web </title>. Esto el navegador lo interpretará mostrando el título en el navegador
En el <head> </head> también podremos encontrar llamadas a librerías u otros elementos que necesitemos para montar la web, como una librería de estilos CSS.
Sin embargo, todo lo que pongamos en el <body></body> sí que va a mostrar, el como dependerá de las etiquetas que usemos dentro del <body></body> ya sea de una manera o de otra y ahí las etiquetas son importantes para que las muestre de una manera interesante, algunos ejemplos de etiquetas podrían ser:
- <h1></h1>: Lo que está entre estas etiquetas indica que es una cabecera principal, por ejemplo el título de la página.
- <h2></h2>: Aquí es una cabecera secundaria
- De esta manera podemos seguir con más cabeceras <h3></h3>, <h4></h4>, etc.
- <div></div>: Indica que ponemos un bloque de contenido.
- <p></p>: Indica que ponemos un párrafo.
- <strong></strong> o <b></b>: Lo que hay entre estas etiquetas se muestra en negrita.
- <em></em> o <i></i>: Lo que está entre estas etiquetas se muestra en itálica.
- <br>: Indica que hay un salto de línea.
Así podríamos continuar, en Internet hay muchos manuales que indican las etiquetas HTML, dejo algunos enlaces en las notas del programa:
Si quieres ver como es el código fuente de una página web, todos los navegadores tienen una opción para mostrar el código fuente de la página web. Si lo haces podrás ver las etiquetas HTML. Por ejemplo:
- En Chrome: Ver > Opciones para desarrolladores > Ver código fuente.
- En Firefox: Herramientas > Desarrollador Web > Código fuente de la página.
Bueno, pues nada más mañana un poco de marketing, veremos la diferencia entre mantener un cliente y ganar un cliente, espero que te guste, así que no te lo pierdas.
Escuchar el Podcast:
Puedes suscribirte al podcast en: iTunes | iVoox | Spotify | Google Podcast | Spreaker
Deja una respuesta