Estructura HTML5 - XTECesanchez/pdf/curs_html5.pdf · Permet imatges transparents i animacions. Avui dia està una mica en desús, substituït pel format PNG. • El format PNG és

Introducció a HTML5. 1

Estructura HTML5

La nova versió HTML no anul·la les característiques de l'HTML4, sinó que les simplifica i perfecciona. Amb HTML5 tindrem un web més simple i més semàntica, gràcies a les noves etiquetes que identifiquen millor alguns elements. El més característic és la introducció de etiquetes semàntiques, que evita la utilització dels nombrosos “div” amb “id”.

Per exemple, fins ara utilitzàvem etiquetes com aquestes per crear les caixes que formaran la pàgina:

• <div id=”cap”> per posar una capçalera a la pàgina;

• <div id=”menu”> per els diversos elements de navegació;

• <div id=”contingut”> per a la part principal de la pàgina;

• <div id=”peu”> per a part inferior (copyleft, copyright, l'autor, etc.)

Ara tindrem etiquetes com <header>, <nav>, section>, <footer> i d'altres, que són semàntiques en el sentit que tenen un significat prefixat.

S'aconsella utilitzar sempre minúscules per escriure les etiquetes, per una qüestió d'estil, tot i que no està prohibit l'ús de majúscules.

D'entrada, s'ha simplificat el “DOCTYPE”, és a dir, la informació que es dóna al navegador per indicar el llenguatge HTML utilitzat i que és la primera línia del tota pàgina web. Fins ara, el DOCTYPE era complicat i difícil de memoritzar. Aquest seria un exemple de la versió 4:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Ara és suficient amb això: <!doctype html>

També han canviat les especificacions d'idioma i del joc de caràcters:

• Especificació de l'idioma (després del “doctype”):

Abans:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">

Ara:

<html lang="es">

• Especificació del joc de caràcters occidentals, que s'inclou dins de l'etiqueta <head>:

Abans:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8” />

Ara:

<meta charset="utf-8">

http://www.w3.org/1999/xhtml


Tampoc cal especificar els tipus d'estils i d'scripts:

Abans:

<link rel="stylesheet" href="stylesheet.css" type="text/css" />

<script src="script.js" type="text/javascript"></script>

Ara:

<link rel="stylesheet" href="stylesheet.css"><script src="script.js"></script>

Etiquetes eliminades de HTML5:

<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>.


Estructura bàsica d'una pàgina HTML5:

<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <title></title></head>

<body></body>

</html>

Noves etiquetes:

Afegeixen un valor semàntic superior al que anteriorment significaven un <div> o un <span>. Es poden barrejar amb les etiquetes de l'estàndard HTML4.

Les principals etiquetes són aquestes:

• <header> i <footer> per crear la capçalera i el peu de pàgina del disseny, respectivament. També es poden usar com a capçalera i peu de pàgina d'una secció especial de la pàgina. Una altra novetat és que aquestes etiquetes es poden fer servir totes les vegades que vulguem dins d'un mateix disseny.

• <hgroup> serveix per agrupar diverses etiquetes de capçaleres (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>).

• <nav> per els menús de navegació, tant de la pàgina principal com per a un article en especial.

• <section> indica una secció genèrica d'un lloc: és una agrupació temàtica de continguts que pot tenir una capçalera.

• <article>: representa una secció de contingut independent, com poden ser les respostes d'un fòrum, els articles d'un blog o uns comentaris.

• <aside> s'usa per representar un contingut no relacionat directament amb el contingut de la pàgina, com poden ser les barres laterals dels blogs.

L'etiqueta <div> no està prohibida. En determinats casos, convé utilitzar-la.

Ús de <header>, <nav> i <footer>

El primer exercici que farem serà una pàgina simple: canviarem l'idioma del teclat, posarem un títol dins l'etiqueta <head>, un títol a la pàgina, un menú de navegació i un peu de pàgina.

Existeix una etiqueta nova anomenada <header>. S'utilitza per als elements que siguin encapçalaments, normalment títols. Pot haver diverses etiquetes <header>.

Per al menú de navegació utilitzarem l'etiqueta <nav>, que és l'etiqueta para aquest tipus de funcionalitat que s'ha afegit a HTML5. Afegirem uns quants enllaços (falsos) al menú.


El peu de pàgina serà un element <footer>. Dins hem afegit el copyright i una data per mostrar l'última actualització.

<!doctype html><html lang="es">

<head> <meta charset="utf-8" /> <title>El meu primer lloc HTML5</title> </head> <body> <header><h1>El meu primer lloc HTML5</h1></header> <nav> <ul> <li><a href="#">inici</a></li> <li><a href="#">blog</a></li> <li><a href="#">vídeos</a></li> </ul> </nav>

<footer> <small> Copyright © 2011<br/> Actualizat: 11 novembre de 2012. </small> </footer> </body>

</html>

Copiarem aquest codi en una pàgina de l'editor de text del escriptori Gnome de Linux i la guardarem amb el nom de exercici01.html

És molt important l'extensió html. Recordeu que els nom d'arxiu no portem mai accents ni altres signes “rars”. Visualitzarem el resultat amb el navegador Firefox.


Ús de les etiquetes <section> i <article>

Perquè la pàgina no quedi tan desolada, afegirem una mica de text al arxiu anterior. Per fer això, inserirem l'etiqueta <section> entre el menú i el peu, i dins d'aquesta, l'etiqueta <article>, on posarem un petit text amb un títol. Aquest títol el posarem també entre les etiquetes <header>.

<section> <article> <header><h2>Exemple</h2></header>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p> </article></section>

¿Quina diferencia hi ha entre les etiquetes <article> i <section>?

• L'etiqueta <article> està pensada per definir continguts que poden publicar-se o distribuir-se independentment, com articles, comentaris de post, etc.

• Definir l'ús de <section> és una mica més complex. Segons l'estàndard, representa una secció genèrica que agrupa un contingut amb la mateixa temàtica i que conté una capçalera.

També existeix l''etiqueta  que serveix per inserir comentaris que no es veuran amb el navegador. Són notes que recorden les accions portades a terme pel dissenyador. També serveix per amagar un fragment de codi sense esborrar-lo, de forma que si ens interessa que aparegui novament, s'elimina l'etiqueta. No convé posar masses comentaris, doncs por fer poc llegible el codi pròpiament dit.

Afegim aquesta part a l'exercici01.html, l'anomenem exercici02.html i ho visualitzem.


Ara crearem una pàgina senzilla que inclogui un logotip, un menú horitzontal, un encapçalament, un gràfic i un text. Al final repetirem el menú, per comoditat. Hauria de ser una cosa així:

Aquest seria el codi:

<!DOCTYPE HTML><html lang=”es”>

<head><meta charset="UTF-8"><title>Un lloc Web per a nens i nenes</title></head>

<body><header><img src="imatges/logo.png" alt="logo"><br><nav>

<a href="#">Joguines</a> | <a href="#">Roba</a> | <a href="#">Esports</a>

</nav> <br><section><article><header><h2>Un bon lloc per a nens i nenes</h2><img src="imatges/kid.png" alt="kid"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio.</p> <br><br><a href="#">Toys</a> | <a href="#">Clothes</a> | <a href="#">Sports</a></body></html>

Copiem el codi en una pàgina nova i l'anomenem exercici03.html


The Gimp

The Gimp és un potent programa d'edició d'imatges. L'utilitzarem especialment per a dues qüestions:

• Disminuir la grandària i el pes de les imatges que inserirem.• Trobar el codi hexadecimal dels colors que ens interessi.

a) Modificar la grandària d'una imatge:

Busqueu una imatge a “Google imatges” i canvieu la grandària.

Cal obrir el programa The Gimp i carregar la imatge en la finestra central. En el menú “Imatge” seleccioneu “Escala la imatge...” i poseu els valors que desitgeu, tenint en compte que per defecte canvia proporcionalment l'amplada i l'alçada. Guardeu el resultat en un d'aquests formats: JPEG o JPG, PNG i GIF (només són vàlids aquests formats en els arxius HTML).


És important que els arxius d'imatge pesin poc, perquè es puguin carregar ràpidament. Els tres formats admesos son JPEG o JPG, PNG i GIF.

• El primer (JPEG o JPG) és ideal per fotografies amb milions de colors. És un format comprimit, de forma que un arxiu original, per exemple, de 1Mb es pot convertir en un de 10 Kb. Hi ha pèrdua de qualitat: quanta més compressió, menys qualitat. Però cal tenir en compte que aquesta pèrdua de qualitat no es nota massa en el monitor; una altra cosa seria imprimir la fotografia.

• El format GIF s'usa per imatges en blanc i negre, escales de grisos o en color, però en un màxim de 256 colors o tons de grisos. Es fa servir sobretot per imatges senzilles com icones, logotips, gràfics estadístics o imatges amb un sol color. Permet imatges transparents i animacions. Avui dia està una mica en desús, substituït pel format PNG.

• El format PNG és més modern i tendeix a substituir al format GIF. Combina les avantatges dels formats GIF i JPEG. Ofereix compressió sense pèrdues significatives i transparència, però el pes és més gran que el format GIF.

b) Trobar el codi hexadecimal dels color per la web.

El sistema HTML5 permet utilitzar els següents noms de color directament: Aqua, Black, Blue, Fuchsia, Gray, Grenn, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White i Yelow

La resta de milions de colors s'han de definir digitalment. Hi ha diverses maneres de fer-ho. Avui dia el sistema més adient per els arxius HTML és el hexadecimal, format per sis nombres i/o lletres, precedits per un coixinet (#).

Exemples en un full d'estils CSS:

body { font-family:Arial, Verdana;

color:Grenn; background-color:#e8d986;}

¿Com es pot trobar el codi hexadecimal en The Gimp? Obriu el programa i en la finestra de l'esquerre (Caixa d'eines) polseu sobre una de les mostres de color de primer pla o de fons. Us sortirà una nova finestra, on podeu escolli un color que us agradi i veure el codi hexadecimal (Notació HTML). I això és tot.


Fulls d'estils.

Són bàsics per fer una distinció entre la estructura de la pàgina i el seu contingut. Poden ser intern i externs.

a) Full d'estils intern o incorporat.

S'afegeix directament a l'script HTML5, en el <head>. Cal indicar el contenidor <style type=”text/css”>

Estudiem un exemple simple:

<!DOCTYPE HTML><html><head lang="es"><meta charset="UTF-8"><style type="text/css"> body {

background-color:#fbf7e4;font-family:Verdana, Geneva, sans-serif;margin-left:20px;color:#8e001c;

}h1 {

background-color:#8E001C;color:#e7e8d1;font-family:Arial Black, Gadget, sans-serif;text-align:center;

}h2 {

background-color:#424242;color:#d3ceaa;font-family:Trebuchet MS, Arial, Helvetica, sans-serif;margin-left:5px;

}</style>

<title>CSS3-Full d'estils incrustat</title></head>

<body><h1>Aquesta és la primera capçalera</h1><h2>Aquí posem la segona capçalera</h2>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.</body> </html>

Copiem el codi en una pàgina nova amb el nom d'exercici04.html i visualitzem em resultat.


b) Full d'estils extern.

Aplicarem un full d'estils extern al següent arxiu HTML5:

<!DOCTYPE HTML><html>

<head>

<meta charset="UTF-8"><link rel="stylesheet" href="estils/estil05.css" /><title>Full d'estils extern</title></head>

<body><h1>Exemple títol h1 centrat</h1><h2>Aquesta és una capçalera h2</h2><h3>Aquesta és una capçalera h3</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</body></html>

Fixeu-vos que ara la referència al CSS apunta a un arxiu extern: “estil05.css”

<link rel="stylesheet" href="estil05.css" />

Ell full d'estils es diu estil05.css i el nom d'arxiu que hem de guardar serà exercici05.html

Aquest és el full d'estils corresponent:

@charset "UTF-8";/* CSS Document */

body {background-color:#f2cc6f;font-family:Verdana, sans serif;color:#8c5f26;font-size:14px;width:800px;}

h1 {color:#bca55f;background-color:#3c371e;font-family:Arial, sans serif;text-align:center;{

h2 {color:#8cf26;font-family:Verdana, sans serif;}


h3 {color:#5a602d;font-family:Helvetica, sans serif;}

La primera línia indica el conjunt de caràcters occidentals. La segona línia és un comentari, que com, podeu veure, és diferent del comentari HTML:

/* comentari CSS */



c) Estil en línea.

Aquesta forma consisteix a afegir CSS a un document simplement incorporant un atribut <style> a un element concret que ens interessi. Exemple:

<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>CSS3 en línia</title></head><body><div style="font-family:Verdana, Geneva, sans-serif; font-size:24px; background-color:yellow; color:navy;">Això és important!!</div><p>Però això... no tant</p><p style="font-size:10px;font-family:sans-serif;">I això pots ignorar-ho totalment.</body></html>

Ho guardarem com exercici06.html

d) Classes CSS3

És una manera senzilla d'ampliar un estil a qualsevol document, com per exemple una característica que vulguis afegir a algun element, com pot ser un ressaltat.

Exemple:

<!DOCTYPE HTML><html><head><style type="text/css">

body {background-color:;

}.highlight {

background-color:yellow;}div {

font-family:"Comic Sans MS";font-size:18px;

}


h1 {font-family:"Arial Black", Gadget, sans-serif;color:#930554;text-align:center;font-size:30px;

}</style><meta charset="UTF-8"><title>Invitació a Halloween</title></head><body><h1>Festa de Halloween!!</h1><div>Estàs invitat a la festa de Halloween el <span class="highlight">Dissabte 29

d'octubre</span>. La disfressa és <span class="highlight"><em>de rigueur</em></span>.</div>

</body></html>

Ho guardarem com a exercici07.html


Aplicació d'estils al exercici02.html

Recordem l'exercici02.html:

<!doctype html><html lang="es">

<head> <meta charset="utf-8" /> <title>El meu primer lloc HTML5</title> </head> <body> <header><h1>El meu primer lloc HTML5</h1></header> <nav> <ul> <li><a href="#">inici</a></li> <li><a href="#">blog</a></li> <li><a href="#">vídeos</a></li> </ul> </nav>

<section>

<article> <header><h2>Exemple</h2></header>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p> </article></section>

<footer> <small> Copyright © 2011<br/> Actualizat: 11 novembre de 2012. </small> </footer> </body>

</html>

Ara crearem un full d'estils per a aquesta pàgina, que anomenarem estil08.css

Primer haurem d'afegir al nostre arxiu en la secció <head> un enllaç a l'arxiu CSS per a que agafi l'estil aplicat en aquest CSS.

<link rel="stylesheet" href="estilo08.css"/>

Guardarem l'arxiu amb el nom de exercici08.html


Començarem ordenant adequadament les tres parts de la nostra pàgina (<nav>, <section> i <footer>). Posarem el menú de navegació a l'esquerra, la secció amb els articles a la dreta i el peu de pàgina a sota de la secció a l'esquerra. També donarem una amplada fixa a cada una. Per a que el contingut quedi bé, posarem una amplada fixa al <body> i així centrarem el contingut. També donarem un color per al fons i posarem un petit marge.

body {

background-color:#f2f2f2; margin: 36px auto; width: 720px;}

nav { float: left;

width: 125px;}

section {

float:right; width:570px;}

footer { float:left;}

Un cop estructurada la pàgina, donarem estil al menú de navegació. Ara la pàgina es dirà exercici09.html i el full d'estils, estil09.html

Amb l'atribut list-style-type podrem canviar el tipus de numeració de la llista. En aquest cas no posarem cap, per eliminar els punts, i afegirem un <margin> i un <padding> igual a zero.nav ul {

list-style-type:none; margin: 0px; padding: 0px;}

També utilitzarem text-transform per aplicar transformacions al text. En aquest cas, posarem la primera lletra de les paraules em majúscules (es a dir, “capitalitzar” las paraules de la llista), canviarem el color del text i traurem el format d'enllaç.

nav ul li {

margin: 5px; padding: 10px; text-transform:capitalize; font-size: 20px; }nav ul li a {

color:#e34c26; text-decoration: none;}


Per millorar una mica més l'aspecte de la nostra pàgina, afegirem contorns als elements del nostre menú i articles.

En CSS3 s'ha afegit una nova característica anomenada border-radius, amb la qual podrem arrodonir amb contorn els elements sense necessitat de posar cap imatge de fons per aconseguir aquest tipus d'efecte. Es pot canviar l'angle de la corba del contorn per a dir quan pronunciada la volem.

Aplicarem un contorn uniforme als articles i pels elements del menú farem un contorn amb més estil per a comprovar tot el potencial d'aquest atribut.article{

margin-bottom:5px; padding: 10px; border-radius: 10px 10px 10px 10px; border-style: solid; border-width: 2px; border-color:#ffffff;}nav ul li {

margin: 5px; padding: 10px; text-transform:capitalize; font-size: 20px; border-radius: 152px 304px 228px 152px; border-style: solid; border-width: 3px; border-color:#ffffff}

Finalment, una altra cosa que es podria fer es canviar el tipus de lletra i el color d'alguns títols:


Aplicació d'estils a l'exercici03.html

Recordem l'exercici:

<!DOCTYPE HTML><html lang=”es”>

<head><style type="text/css"><meta charset="UTF-8"><title>Un lloc Web per a nens i nenes</title>

body {margin: 30px auto;border:1px solid #666666;background-color:#79eae3;width:800px;height:450px;color:#010101;font-family:Verdana, sans serif;padding-left: 20px;padding-right: 20px;margin-top: 40px;}

h2 {color:red;}

</head>

<body><header><img src="imatges/logo.png" alt="logo"><br><nav>

<a href="#">Joguines</a> | <a href="#">Roba</a> | <a href="#">Esports</a>

</nav> <br><section><article><header><h2>Un bon lloc per a nens i nenes</h2><img src="imatges/kid.png" alt="kid"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio.</p> <br>


<br><a href="#">Toys</a> | <a href="#">Clothes</a> | <a href="#">Sports</a></body></html>

L'anomenarem exercici10.html. El full d'estils serà intern; per tant, haurem d'afegir el contenidor <style type="text/css"> dins l'etiqieta <head>.


Ús de la etiqueta <div>

Serveix per afegir estil a un element, però no per crear apartats importants. Exemple:

<!DOCTYPE HTML><html><head><style type="text/css">body {

font-family:"Comic Sans MS", cursive;color:#0C6;background-color:#FFC;

}.girls {

background-color:pink;}.boys {

background-color:powderblue;}</style><meta charset="UTF-8"><title>Baby Names</title></head>

<body>

<article>

<header> <h1>Baby Names</h1></header>

<section> <div class="girls"> <h2> Girls</h2> <ul> <li>Olivia</li> <li>Tess</li> <li>Emily</li> </ul> </div></section><section> <div class="boys"> <h2> Boys</h2> <ul> <li>Jacob</li> <li>Ricky</li> <li>John</li> </ul> </div></section></body></html>


Un exemple amb diferenciació entre etiqueta <ol> i <ul>

<!DOCTYPE HTML><html><head><meta charset="UTF-8 "><style type="text/css">

body {background-color:#2F8C2B;color:#0C080C;font-family:Verdana, Geneva, sans-serif;

}h2 {

background-color:#F27507;color:#20268C;font-family:"Comic Sans MS", cursive;

}h3 {

font-family:"Comic Sans MS", cursive;}ol {

background-color:#F27507;}ul {

background-color:#F20505;}</style>

<title>Ordered and Unordered</title></head><body><h2> World Cup 2010</h2><h3>Beginning</h3><ul> <li>Spain</li> <li>Netherlands</li> <li>Germany</li> <li>Uruguay</li></ul><h3>End</h3><ol> <li>Spain</li> <li>Netherlands</li> <li>Germany</li> <li>Uruguay</li></ol></body></html>


Estructura d'una pàgina en seccions

<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>Sections</title></head>

<body>

<article> <header> <h1>Pilots and Planes</h1> <p><q>I never left one up there. </q><i>Ace Davis</i></p> </header> <nav><a href="#"> Safety</a> | <a href="#">Check Lists</a> | <a href="#">Landings</a></nav> <section> <h2>Flying Stories by Real Pilots</h2> <h3>...and other cures for insomnia.</h3> <section> <h4>Short Final</h4> <p>As we were on short final, control cleared the Maule for immediate takeoff, which it did in about 15 feet of runway, at an airspeed of 20 mph. It filled my windshield as I approached stall speed. After realizing its mistake the tower instructed the Maule to loop, and we were able to land without incident.</p> </section>

<section> <h4>Thermal on Takeoff</h4> <p>Taking off from Gila Bend, Arizona, with the ambient temperature of 130 F, we encountered a strong thermal at the end of the runway, which took our Cessna 177b to 15,000 feet in 12 seconds flat, at which time we leveled off and proceeded to New Mexico via the jet stream, setting a new speed record.</p> </section> </section> <aside> <h2>Truthful Pilot Found!</h2> <p>Emily Rudders, a pilot in Moose Bite, Vermont, was recently found to be the only truthful pilot in existence. When asked to relate her most exciting flying adventure, Emily replied, <q>I ain't never flew no airplane. I jus' shoot at 'em when they fly over and bother the moose.</q></p> </aside> <footer> <address> Contact us at:<a href="www.aopa.org">AOPA</a> </address> </footer></article></body></html>


Algunes etiquetes importants vistes fins ara:

Salt de línia: <br>

Full d'estils intern: <style type=”text/css”>

Full d'estils extern: <link rel="stylesheet" href="estil.css"/>

Inserció d'una imatge: <img src="imatges/logo.png" alt="logo">

Inserció d'una línia hotitzontal: <hr>

Capçalera de pàgina: <header>

Una àrea de contingut: <section>

Una àrea de contingut: <article>

Peu de pàgina: <footer>

Agrupa un conjunt de títols h1-h6: <hgroup>

Paràgraf: <p>

Divisió: <div>

Llista no ordenada: <ul>

Llista ordemada: <ol>

Elements d'una llista: <li>


Ús de taules per mostrar informació.

Les etiquetes bàsiques són:

• Tabla: <table>• Filas:<tr>• Cel·les: <td>• Capçaleres de taula: <th>• Títol de la taula: <caption>

<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>Basic Table</title></head><body><table> <caption> Rows and Columns in a Table </caption> <tr> <td> <th>Column 1 <th>Column 2 <th>Column 3 <tr> <th>Row 1 <td>data a <td>data b <td>data c <tr> <th>Row 2 <td>data x <td>data y <td>data z</table></body></html>

En HTML5 no existeix l'atribut “contorn” per les taules. Si volem línies al voltant de les taules, ho hem de fer amb estils CSS.

<!DOCTYPE HTML><html><head><style type="text/css">table {

width:400px;border-style:groove;border-width:thick;border-color:#FF5C19;color:#C00;font-family:Verdana, Geneva, sans-serif;font-size:10px;

}


caption {font-family:Tahoma, Geneva, sans-serif;font-size:24px;color:hsl(17, 60%, 40%);padding:12px;

}td, th {

height:50px;border-style:solid;border-width:thin;border-color:#000;padding:20px;

}</style><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Borders are Blinding</title></head><body><table> <caption> Pet Care </caption> <tr> <td>§ <th>Cats <th>Dogs <th>Fish <tr> <th>Feeding <td>Cat food is good <td>Doggy treats <td>Yucky fish food <tr> <th>Care <td>Scratching post <td>A rubber ball <td>Clean tank and air bubbles</table></body></html>

Taules amb colors:

<!DOCTYPE HTML><html><head><style type="text/css">td {

width:70px;}body {

font-family:Verdana, Geneva, sans-serif;font-size:10px;

}


caption {font-family:"Arial Black", Gadget, sans-serif;font-size:12px;font-weight:500;color:#360;background-color:hsla(113, 46%, 91%, 1);

}.money {

text-align:right;}table {

background-color:#FFC;}.alt1 {

background-color:hsla(113, 46%, 91%, .8);}</style><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Color Separation</title></head><body><table> <caption> Sick Thinking Games, Inc. </caption> <tr> <th>Name <th>Acct No. <th>Amount <tr class="alt1"> <td>Joe Doaks <td>ID065212 <td class="money">$92.83 <tr> <td>Jane Franco <td>ID034986 <td class="money">$17.78 <tr class="alt1"> <td>Fernando Rodriguez <td>ID019921 <td class="money">$221.83 <tr> <td>Benny Jet <td>ID073456 <td class="money">$320.45</table></body></html>

Documents

Estructura HTML5 - XTECesanchez/pdf/curs_html5.pdf · Permet imatges transparents i animacions. Avui dia està una mica en desús, substituït pel format PNG. • El format PNG és