¿Seguimos codeando?

June 18, 2018

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.

 

 

Share on Facebook
Share on Twitter
Please reload

Entradas destacadas

I'm busy working on my blog posts. Watch this space!

Please reload

Entradas recientes