¿Seguimos codeando?
En el segundo número de Intrépidas te encontraste con una propuesta para subirte a la nube con tu propia página web. ¿Qué te parece si la seguimos?
Si llegaste a lanzar tu ¡HOLA MUNDO!, te invitamos a ponerle más onda a la página.
Estábamos acá:
Para ir entendiendo qué es lo que estamos viendo en el navegador vayamos a nuestro código.
Dentro de las etiquetas <title> y </title> tenemos lo siguiente:
<title>INTRÉPIDAS</title>
Vas a notar que la palabra "INTRÉPIDAS" aparece como el título de la pestaña en el navegador:
Y el texto "¡HOLA MUNDO!" aparece dentro de la página en el navegador, ese texto es lo que pusimos dentro de las etiquetas <h1> y </h1>
<h1>¡HOLA MUNDO!</h1>
En resumen, en ese pequeño código que escribimos hasta ahora estamos utilizando cinco etiquetas: <html>, <head>, <title>, <body> y <h1>.
Excelente. ¡Sigamos adelante!
Ahora vamos a agregar un poco más de código a nuestro archivo index.html
<html>
<head>
<title>INTRÉPIDAS</title>
</head>
<body>
<h1>¡HOLA MUNDO!</h1>
<h2>Soy <span>EMILIA</span>
<br>
y soy intrépida
<br>
porque me gusta
<br>
<span>DIVERTIRME</span>
</h2>
<p>¡Esta es mi primera página web! Espero que les guste :-)
</p>
</body>
</html>
Donde dice "EMILIA" tenés que poner tu nombre :-)
Guardemos nuestro archivo, vayamos al navegador y refresquemos la pantalla para ver reflejados nuestros cambios, el resultado debería ser así:
¡Muy bien! ¡Vamos avanzando!
Analicemos un poquito lo nuevo que acabamos de agregar:
<h2>Soy <span>EMILIA</span>
<br>
y soy intrépida
<br>
porque me gusta
<br>
<span>DIVERTIRME</span>
</h2>h
<p>¡Esta es mi primera página web! Espero que les guste :-)</p>
Aquí estamos usando las etiquetas <h2> y </h2> para poner el contenido "Soy EMILIA y soy intrépida porque me gusta DIVERTIRME", y dentro de ese texto estamos usando la etiqueta <br> para hacer saltos de línea, es decir, para que nos quede en el primer renglón "Soy EMILIA", en el segundo renglón "y soy intrépida", en el tercero "porque me gusta" y finalmente en el cuarto "DIVERTIRME", así:
Soy EMILIA
y soy intrépida
porque me gusta
DIVERTIRME
También estamos agregando las etiquetas <span> y </span> que vamos a utilizar más adelante para agregarle color a las palabras que están dentro de esas etiquetas.
Luego, dentro de las etiquetas <p> y </p> escribimos un mensaje. Ahí podés escribir el mensaje que vos quieras.
Ahora, vamos a agregar un poco de estilo a esos textos, vamos a cambiar la tipografía.
¿QUÉÉÉÉÉÉ???
La tipografía es el tipo de letra que usamos en nuestros textos. Por ejemplo, si usamos la tipografía "Times", nuestro texto se ve así:
¡HOLA MUNDO!
En cambio, si usamos la tipografía "Verdana", se ve así:
¡HOLA MUNDO!
Y así podríamos seguir y seguir, ya que existen miles y miles de tipografías.
Para nuestra página web vamos a usar la tipografía "Arial", que se ve así:
¡HOLA MUNDO!
Para agregar esa tipografía a nuestro archivo debemos agregar algo a nuestra etiqueta de comienzo <body>:
<body style="font-family: Arial;">
Esa palabra "style" es un "atributo" de la etiqueta <body> y sirve, como estamos viendo, para agregar estilos a todo lo que esté contenido dentro de la etiqueta. Es decir, si agrego el atributo style a la etiqueta <h1> sólo le estará agregando estilos a lo que esté adentro de la etiqueta h1, y nada más.
Pero como en este caso estamos agregando el atributo "style" a la etiqueta "body", y "body" contiene a todo lo demás, todo nuestro contenido se ve afectado por los estilos que agreguemos dentro del atributo "style".
En nuestro ejemplo, estamos usando una "propiedad" llamada "font-family" para decirle a nuestro código que queremos que nuestra tipografía sea "Arial" y que la aplique a todo el texto que está dentro de la etiqueta "body".
Nuestro código quedaría así:
<html>
<head>
<title>INTRÉPIDAS</title>
</head>
<body style="font-family: Arial;">
<h1>¡HOLA MUNDO!</h1>
<h2>Soy EMILIA
<br>
y soy intrépida
<br>
porque me gusta
<br>
DIVERTIRME
</h2>
<p>¡Esta es mi primera página web! Espero que les guste :-)</p>
</body>
</html>
Así se llama cada cosa que usamos:
Una vez más, guardamos nuestro archivo y vamos al navegador a refrescar la página nos encontraremos con esto:
¡Perfecto! Sigamos agregando estilos. En el siguiente código verás que agregamos estilos a las etiquetas <body>, <h1>, <h2> y <span>.
<html>
<head>
<title>INTRÉPIDAS</title>
</head>
<body style="font-family: Arial; margin: 50px auto; width: 450px;">
<h1 style="text-align: center; font-size: 40pt;">¡HOLA MUNDO!</h1>
<h2 style="text-align: left; background-color: #db4591; line-height: 60px; padding: 40px; font-size: 30pt; color: #fff;">Soy <span style="color: #a8c954;">EMILIA</span>
<br>
y soy intrépida
<br>
porque me gusta
<br>
<span style="color: #a8c954;">DIVERTIRME</span>
</h2>
<p>¡Esta es mi primera página web! Espero que les guste :-)</p>
</body>
</html>
Luego de guardar el archivo y refrescar la página en tu navegador, el resultado será el siguiente:
¡Esperamos que te haya gustado el ejercicio!
Si querés saber más sobre cómo funciona el lenguaje HTML, el listado de etiquetas, atributos y propiedades podés ir a este link que tiene mucha información: https://es.wikipedia.org/wiki/Etiqueta_(lenguaje_de_marcado)
Nota: Acordate de enviarnos tu archivo index.html a hola@intrepidas.com.ar para que lo pongamos online y lo puedas compartir con tus amigas y amigos.
