Bueno, ahora sí, vamos a empezar a trabajar. Pero, primero, debemos comentar que las páginas HTML se dividen en dos partes: la cabecera y el cuerpo.
Primeras etiquetas: head y body
Bueno, dijimos que hay dos secciones en un sitio web, la cabecera «a partir de ahora se llamará head», la cual se encuentra por fuera del contenido del documento, y se encarga de brindar información sobre la propia página, como por ejemplo su título y su idioma.
Por su parte, el cuerpo «ahora llamado body» es la parte de la página que incluye el contenido, como por ejemplo, párrafos de texto, títulos, imágenes, entre otros.
¿Cómo se ven el head y el body?
Además, cómo información extra: el body, contiene todo lo que el usuario ve en su pantalla y el head contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas).
A continuación se muestra el código HTML de una página web muy sencilla, el cual, codifica la imagen anterior:
<html>
<head>
<title>Curso HTML</title>
</head>
<body>
<p>Hola, este es el curso más simple y más <strong>curso</strong> que encontrarás en tupacbruch.com (luego aprenderemos a enlazar)</p>
</body>
</html>Preparándonos para hacer el ejercicio:
Si quieres probar este primer ejemplo, debes hacer lo siguiente:
Abre un editor de archivos de texto y crea un archivo nuevo, para ello, te recomiendo que vayas a este post sobre Visual Studio Code, y lo descargues desde éste enlace ↗.
Una vez descargado el editor, debemos crear una carpeta para poner todos nuestros ejercicios, y abrimos Visual Studio Code.
Luego, tenemos que crear un nuevo documento. Para ello, vamos a File > New File, y luego seleccionamos el lenguaje.
Al momento de elegir el Lenguaje, seleccionamos o filtramos el HTML.
Ahora que tenemos nuestro archivo HTML, solo resta copiar el código mostrado anteriormente. Nos debería quedar algo así:
Ahora toca guardar el archivo en nuestra carpeta, y abrirlo. Cuando lo hagamos, se abrirá el explorador de internet. El archivo se debería visualizar de la siguiente manera:
Notas sobre el primer ejercicio
En algunos editores, tal vez tengas que guardar el archivo con la extensión .html, pues, a veces, esto se pide al final del documento.
También se puede utilizar otro editor de código que soporte HTML o texto sin formato.
Sí tu sistema operativo es Windows, podés usar el Bloc de notas, Wordpad, EmEditor, UltraEdit, Notepad++, etc. pero no podés emplear un procesador de textos como Word u Open Office. Si utilizas sistemas operativos tipo Linux, puedes utilizar editores como Gedit, Kedit, Kate e incluso Vi, pero no utilices KOffice ni Open Office. Lo mismo ocurre cuando tenés OSx. Pero, en todos los casos, te recomiendo fuertemente la descarga del Visual Studio Code.
Yendo al detalle de tu código
Después de crear el archivo con el contenido HTML, ya se puede abrir con cualquier navegador para que se muestre con el aspecto sin formato que ya vimos antes en el post.
Si ya estás viendo tu primera página HTML en el navegador, intentá ver tu código fuente. Para ello, apretá el botón derecho del mouse sobre la ventana, y luego vas al menú Ver > Código fuente (también se puede apretar Ctrl + U)
Luego de hacerlo, podrás ver el código HTML de la página que está cargada en el navegador.
En una nueva pestaña se abrirá el código fuente de nuestro código. En este caso, al ser un código muy pequeño y sencillo, podemos visualizar prácticamente todo a simple vista, y no requiere mucho esfuerzo comprender de que se trata nuestra primera página HTML.
De hecho, podés ver el código HTML de cualquier página de Internet mediante la opción Ver > Código fuente. Intentá ver el código HTML de alguna página que te interese, al hacerlo, verás cuantas etiquetas puede llegar a tener una página compleja.
Voy a intentar con algún post de mi página web, para ello, voy primero al post dedicado a Google Analytics 4, y luego veo el código fuente:
Luego de ver el código fuente nos encontramos que el código es muchísimo más grande, ya llegaremos a eso. Pero, creo que algo se puede destacar, las etiquetas principales que fuimos viendo hasta ahora, el head y el body.
Vamos a enroscar un poquito el tema con una pregunta. — ¿Qué pasaría sí copiamos todo el código del post en un nuevo documento?. Bueno, hagan el experimento y luego lo comentamos.
— Pero, ¿se acuerdan que había dos lenguajes de programación que se complementan?. Al copiar el código, lo más probable es que veamos el sitio web sin estilos visuales, pues, este último es provisto por el CSS. Así que, al copiar un código, sólo nos llevamos parte del html, y parte de otros códigos como JavaScript.
El HTML, el Head y el Body
Pero, volviendo al código HTML del primer ejemplo, es importante conocer las tres etiquetas principales de un documento HTML: <html>, <head>, <body>. Veamos específicamente donde están cada una en el código del post sobre Google Analytcs 4.
Entonces, se definieron tres etiquetas. — Pero, ¿qué hace cada una?.
<html>: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o contenido puede colocarse antes o después de la etiqueta <html> (con una sola excepción que se verá más adelante). En el interior de la etiqueta <html> se definen la cabecera y el cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta <html> se ignora.
<head>: delimita la parte de la cabecera del documento. La cabecera contiene información sobre el propio documento HTML, como por ejemplo su título y el idioma de la página. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepción de la etiqueta <title>, que se utiliza para indicar el título del documento y que los navegadores lo visualizan en la parte superior izquierda de la ventana del navegador (si no te has fijado anteriormente, vuelve a abrir el primer ejemplo en cualquier navegador y observa dónde se muestra el título de la página).
<body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (párrafos de texto, imágenes, tablas). En general, el <body> de un documento contiene cientos de etiquetas HTML, mientras que el <head> no contiene más que unas pocas.
Entonces, recordemos que la etiqueta <html> debe cerrarse al final de nuestro documento con una etiqueta de cierre </html>.
Ejercicio 1:
Bueno, para lograr el primer ejercicio vamos a necesitar un par de etiquetas nuevas, pues, vamos a complicarlo un poco.
Las etiquetas utilizadas serán: Las cursivas, las negritas, y el tachado.
Cursivas: <em> </em>
Negritas: <strong> </strong>
Tachados: <del> </del>
Comillas bajas dobles: alt + 174 y alt + 175 Entonces, con la nueva información, el objetivo es determinar el código HTML correspondiente a la siguiente página. Para ello, no nos olvidemos de las tres etiquetas que vimos recién: html; head; y body.
Cuando termines, compará tu resultado con el que podrás encontrar aquí debajo.
Resultado:
<html>
<head>
<title>Curso HTML</title>
</head>
<body>
<p>Hola, este es el curso más simple y más <strong>curso</strong> que encontrarás en tupacbruch.com (luego aprenderemos a enlazar)</p>
<p>Pero también se tienen <em>cursivas</em> y <del>tachados</del> con los respectivos tags «em» «del»</p>
</body>
</html>
