HTML - Lenguaje de contenido

HTML es un len­guaje de con­tenido y estruc­tura para las páginas web. Hay par­tes que están pre­definida y son iguales en todas las webs. Para este curso usaremos esta estruc­tura:

<!DOCTYPE html>
<html>
  <head>
    <title>Página Web</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/6.3.2/picnic.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  
    ...

  </body>
</html>

Para esta lección, todos los elemen­tos que de­finamos deberán de ir de­ntro del <body> ... </body> en la estruc­tura vista an­terior­mente (donde están los pun­tos sus­pen­sivos). La estruc­tura la ponemos una vez, pero no aparec­erá en los ejemplos post­eriores para no dis­tra­er.

Elemen­tos

Las páginas web se con­struy­en a base de elemen­tos, que pued­en escribir­se sucesivamen­te o de­ntro de otros. Por ejemplo, los elemen­tos de tipo párrafo <p>...</p> son:

<p>Esto es un párrafo de texto con algún contenido</p>

Si quisiéramos poner dos pár­rafos, podríamos hacer­lo de la siguien­te forma:

<p>Primer párrafo de texto con algún contenido</p>
<p>Segundo párrafo de texto con algo de contenido</p>

Y si quisiéramos un párrafo con parte del texto en neg­rita <strong>...</strong> podríamos hacer­lo de la siguien­te forma:

<p>Esto es un párrafo <strong>con un texto importante</strong> y uno no tanto</p>

Todas las páginas webs están hec­has de elemen­tos de­ntro de otros elemen­tos. Aquí puedes ver una re­presen­tación de estos elemen­tos en Libre Uni­vers­ity:

Pruébalo! Escribe el código de la estruc­tura visto al prin­cipio de la lección en el archivo index.html de tu pro­yec­to, añade al­gunos de los ejemplos de párrafo an­teriores de­ntro del body y abre el archivo con el navegador que quieras. Podrás ver el párrafo en el navegador.

Hay muc­hos tipos de elemen­tos, por ejemplo:

<p> un párrafo

<strong> texto en neg­rita

<em> texto en cur­siva

<a> un link

<button> un botón

<img> una imágen

<div> una di­visión (se verá más adelan­te)

... muc­hos más

Re­cor­dad que, aun­que aquí sólo se muestre una parte, casi todos los elemen­tos se tien­en que cer­rar. Los elemen­tos tien­en la siguien­te estruc­tura:

Por ahora hemos visto lo que es un elemen­to y que los elemen­tos tien­en que tener un tag de aper­tura, el con­tenido y un tag de cier­re. El con­tenido puede ser texto, otro elemen­to de HTML o ambos.

Ejer­cicio: crear una lista de la com­pra con los items que quieras com­prar. Bus­car en Goog­le cómo hacer una lista de elemen­tos.

Ejer­cicio: crear una pequeña en­trada de blog con lo que hicis­te ayer, in­cluyen­do el título (<h1>) y al­gunos parág­rafos (<p>) con texto en neg­rita (<strong>), en cur­siva (<em>) y links (<a>) que te llev­en a al­guna página in­teresan­te (ex­plicado más adelan­te).

At­ributos

En el gráfico an­terior hemos visto que también ex­is­te algo llamado at­ributos. Todo lo que se en­cuentra fuera de los <...> se puede ver en la página, en­ton­ces hace falta al­guna forma de añadir in­for­mación que no se vea, por ejemplo con los links.

Un link tiene un texto y una url, pero sólo se puede ver el texto. La url se guar­da en un at­ributo llamado href. Para verlo más claramen­te, así es como se de­fine un link <a>:

<a href="http://es.libre.university/">Libre University</a>

Si este link lo pusiéramos en una página web, se vería así: Libre Uni­vers­ity

Otro at­ributo sería el que in­dica dónde está guar­dada una im­ag­en a mostrar. Para las imágenes se utiliza el elemen­to <img>. Este no es un elemen­to norm­al, ya que no puede tener ni con­tenido ni tag de cier­re. También tiene un at­ributo llamado src, cuyo valor in­dica el orig­en de la imágen:

<img src="http://www.makersupv.com/images/logo.svg">

Este at­ributo es el que se usa por ejemplo en Mak­ers UPV para mostrar el logo.

Ejer­cicio: Escribe un elemen­to de tipo botón (<but­ton>) que esté de­ntro de un link (<a>).

Di­visiones <div> y clases class=""

Ahora que ya sabéis lo básico de HTML, hay un elemen­to y un at­ributo que tien­en una im­por­tancia es­peci­al. El elemen­to es el <div>, que re­presen­ta di­visiones pero que se utiliza cuan­do te hace falta un elemen­to y no sabes cuál poner.

Por ejemplo, si quieres poner varias imágenes una al lado de la otra, necesitarás un elemen­to para con­tener­las a todas y separar­las del resto de la página:

<div>
  <img src="galeria1.jpg">
  <img src="galeria2.jpg">
  <img src="galeria3.jpg">
</div>

Sin em­bar­go si pusiéramos eso en una página no se verían como es­peramos, una al lado de la otra, sino que se verían una en­cima de la otra y cada una con su tamaño origin­al.

Las clases son un tipo de at­ributo que también tiene un sig­nificado es­peci­al. Van en un elemen­to y de­finen de qué tipo de elemen­to se trata. Veámoslo con el ejemplo nombrado an­terior­mente, una galería de imágenes:

<div class="flex">
  <div><img src="gallery1.jpg"></div>
  <div><img src="gallery2.jpg"></div>
  <div><img src="gallery3.jpg"></div>
</div>

Aquí es­tamos de­finien­do el div de tipo row. Las clases son muy útiles ya que también nos sirv­en como re­feren­cia para añadir es­tilos a los elemen­tos. En el caso an­terior la li­brería Pic­nic CSS de­fine que la clase flex tiene los elemen­tos de de­ntro es­paciados igual­mente:

Ejemplo [jsfiddle]

Ejer­cicio: utiliza el elemen­to but­ton de Pic­nic CSS de tres for­mas dif­eren­tes.