History: First website

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

HTML is a con­tent and struc­ture lan­guage for mak­ing web­sites. There are some fixed parts that are the same or similar to most web­sites. For this les­son, we'll be using this basic struc­ture:

<!DOCTYPE html>
<html>
  <head>
  <title>First website</title>
  <meta charset="utf-8">
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <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>

All of the ele­ments that we will see later on will go in­side <body> ... </body> in the layout above. We won't write the whole struc­ture for the tutori­al later on to keep the code tidy, but you should in­clude it when try­ing it out.

Elemen­ts

Web­sites are made up of ele­ments that can be put side-by-side or one with­in an­oth­er. As an ex­am­ple, the para­graph ele­ments are:

<p>This is a text paragraph with some content</p>

If we wan­ted to write two para­graphs, we could do it like this:

<p>First paragraph with some text</p>
<p>Second paragraph with some more text</p>

Also, if we wan­ted a para­graph with some bold text <strong> ... </strong> we could do it like this:

<p>A paragraph with <strong>important text</strong> and some more</p>

All web­sites are made of ele­ments in­side other ele­ments. You can see a visualiza­tion of it in Libre Uni­vers­ity here:

Separat­ing each part of the web­site into blocks, and each block into small­er blocks helps us giv­ing styles to the ele­ments, some­th­ing that we will see later. There are many kind of ele­ments. Let's see just a few:

<p> a para­graph

<strong> bold text

<em> italic text

<a> a link

<button> a but­ton

<img> an image

<div> a di­vision

... many more

Re­memb­er that, even though we only show a part above, most of the ele­ments need to be closed. HTML ele­ments have the fol­low­ing struc­ture:

So far we have seen what are HTML ele­ments and that they have an op­en­ing tag, some con­tent and a clos­ing tag. The con­tent might be just text or an­oth­er HTML ele­ment.

Ex­erc­ise 1: create a shopp­ing list with the items you want to buy. For this, you'll have to Goog­le how to create a list of items. Googl­ing cor­rect­ly is an every­day skill that every pro­gramm­er should know.

Ex­erc­ise 2: create a small blog entry with what you did yes­terday, in­clud­ing a title (<h1>) and some para­graphs (<p>) with bold text (<strong>), italic text (<em>) and links (<a>) if you want to chal­lenge your­self (ex­plained later).

Attributes

In the schema of the ele­ments we've seen there's some­th­ing cal­led attributes. Every­th­ing out­side <...> can be seen on the page, so we need a way to add extra in­for­ma­tion like with the links.

A link has some text and a url to go, but you can only see the text. The url is saved in an attribute cal­led href. To see it bet­t­er, this is how you can de­fine a link <a>:

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

If we open this with a brows­er, it would look this way: Libre Uni­vers­ity

An­oth­er attribute could be the one used for im­ages. To add an image to a web­site we use the elemen­t <img>. This is not a norm­al ele­ment, since it doesn't have con­tent and therefore it doesn't have clos­ing tag. To add the image, we'll use the at­tribute cal­led src:

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

This attribute is the one used in Mak­ers UPV to dis­play the logo.

Ex­erc­ise: add a but­ton with the text "Goog­le" that takes you to Goog­le when clic­ked.

Di­visions <div> and clas­ses class=""

Now that you know the basics of HTML, there's an ele­ment and attribute with speci­al mean­ing. The ele­ment is <div> , which re­present di­vis­ions but it's nor­mal­ly used when there's no bet­t­er ele­ment avail­able. For in­stan­ce, if you want to set up sever­al im­ages be­side each other, you'll pro­bab­ly need an ele­ment to con­tain them all:

<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="gallery1.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.