¿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

December 19, 2017

Please reload

Archivo
Please reload

Buscar por tags
Please reload

Síguenos
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square
  • Facebook Social Icon
  • Instagram
  • Twitter Social Icon
  • Google+ Social Icon
  • YouTube Social  Icon
  • Pinterest Social Icon