History: HTML - Lenguaje de contenido

Revision made 8 years ago by Francisco Presencia. Go to the last revision.

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">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/4.1.1/plugins.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>

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.

Ejer­cicio: Prueba cómo se ven los ejemplos an­teriores, de forma com­binada o in­dividual­mente, en la página web. Re­cuer­da meter­los de­ntro del <body>.

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 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="row">
 <img src="galeria1.jpg">
 <img src="galeria2.jpg">
 <img src="galeria3.jpg">
</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 row 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.