¿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.

Entradas destacadas
Próximamente habrá aquí nuevas entradas
Sigue en contacto...
Entradas recientes
Archivo
Buscar por tags
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