T2.3.- Els fulls d'estils

Tema 2.3.- Els fulls d'estils

Definició de caixes

Com inserir un text

Com crear enllaços a altres pàgines web

Com inserir imatges

Com inserir imatges amb enllaços

Com inserir un vídeo de YouTube

Els fulls d'estils o CSS

En un principi les pàgines web es construïren utilitzant un HTML molt simple, però el panorama es complicà amb la progressiva popularització d'Internet, i especialment amb el que es va conèixer com a guerra dels navegadors, concretament entre Internet Explorer i l'antic NetScape. En el seu afany per captar el major nombre d'usuaris, totes dues empreses començaren a afegir noves funcionalitats als seus respectius navegadors, creant noves etiquetes HTML. És cert que les pàgines web s'enriquiren amb la possibilitat d'incloure color, imatges, música i molts altres objectes, però el preu fou molt elevat: ja no existia un únic llenguatge HTML universal (perquè cada navegador tenia la seva versió particular), i el que és pitjor, les etiquetes no sempre servien per marcar la funció dels diferents fragments del text, sinó que sovint n'indicaven només l'aparença (el color, la mida...), contradient l'esperit original de l'HTML.

Per resoldre aquesta situació es definí l'especificació css (Cascading Style Sheets) o fulls d'estil en cascada, amb l'objectiu de separar el contingut (el text de les pàgines web) i la presentació (l'estil). D'aquesta manera l'HTML és l'encarregat de marcar el contingut i els CSS s'encarreguen de definir l'aspecte o presentació del document, assignant l'estil corresponent als diferents elements HTML.

La utilització de css per definir l'aspecte d'un document presenta nombrosos avantatges, els principals dels quals són:

- Separació de contingut i presentació.
- Reaprofitament del codi. Un mateix css es pot aplicar a diversos documents HTML.
- Facilitat de modificació. Si per exemple volem canviar l'aspecte de tots els paràgrafs, només cal que modifiquem la definició el corresponent css.
- Accessibilitat i internacionalització. Els css permeten crear pàgines web adaptades o en altres idiomes.

Definició de caixes

Comencem per definir un css molt senzill, que conté quatre caixes o espais on podrem incloure informació que es mostrarà a la nostra web. En aquest css també definirem la font, la mida i el color de tots els paràgrafs de la pàgina web.

Dins de la carpeta css crearem un arxiu d'estils que anomenarem estils.css. Tot seguit l'obrirem amb l'Editor de text. Aquest estil l'aplicarem a la nostra pàgina web anomenada index.html.

Quadre 2.

<html>

<head>

<title> Definició de caixes </title>

</head>

<body>

<div id="caixa1">Esquerra

</div>

<div id="caixa2">Superior

</div>

<div id="caixa3">Centre

</div>

<div id="caixa4">Dreta

</div>

</body>

</html>

La instrucció <div> defineix una divisió dins de la pàgina HTML.

La instrucció id="Nom de l'estil" permet assignar les característiques d'un estil que es troba dins de l'arxiu estils.css.

Utilitzant el posicionament CSS, es pot situar una caixa en un lloc concret de la pàgina web, això ens permet realitzar pàgines molt creatives.

Ara crearem un estil anomenat estils.css on definirem quatre caixes amb un conjunt de propietats com: posició, amplada, alçada, mida, color, lletra...

Hem d'imaginar la nostra pantalla com un sistema de coordenades agafant com a punts de referència el left, right, top o bottom per situar la o les caixes. La propietat position:absolute; ens permet situar una primera caixa (caixa1) a un 5% respecte el top i el left de la pàgina web i la resta caixes es situen en funció d'on acaba la caixa1.

Quadre 3.

body {

background-image: url('../imatges/pingu.jpg');

background-repeat: no-repeat;

background-attachment: fixed;

background-size: 100% 100%;

font-family: 'Abhaya Libre';font-size: 1.0vw; /*Com afegir noves fonts*/

}

#caixa1 {

position:absolute;

top: 5%; /*On comença la caixa respecte el marge superior*/

left: 5%; /*On comença la caixa respecte el marge esquerra*/

width: 10%; /*Amplada de la caixa*/

height: 90%; /*Alçada de la caixa*/

background-color: rgb(0, 128, 0, 0.1); /*Color de fons semitransparent de la caixa*/

font-family: sans-serif; /*Font de lletra que conté la caixa*/

font-size: 1.0vw; /*Mida de lletra que conté la caixa Viewport Sized Typography autoescalable*/

font-weight: bold; /*Estil negreta del text que conté la caixa*/

text-align: justify; /*Alineació del text que conté la caixa*/

color: black; /*Color del text que conté la caixa*/

}

#caixa2 {

position:absolute;

top: 5%;

left: 17%;

width: 80%;

height: 20%;

background-color: rgb(220, 220, 220, 0.9);

font-family:;

font-size: 1.0vw;

font-weight: bold;

text-align: justify;

color: black;

border: 5px solid red;

border-radius: 25px;

}

#caixa3 {

position:absolute;

top: 27%;

left: 17%;

width: 30%;

height: 68%;

background-color: rgb(255, 140, 0, 0.9);

font-family: sans-serif;

font-size: 1.0vw;

font-weight: bold;

text-align: justify;

color: black;

}

#caixa4 {

position:absolute;

top: 27%;

left: 49%;

width: 48%;

height: 120%;

background-color: rgb(255, 0, 0, 0.9);

font-family: sans-serif;

font-size: 1.0vw;

font-weight: bold;

text-align: justify;

color: black;

}

Com inserir un text

Els enllaços o links són un dels elements més importants d'una pàgina web. Per exemple, crearem un enllaç a Google que es mostrarà en una altra pestanya:

Quadre 4.

<html>

<head>

<title> Definició de caixes </title>

</head>

<body>

<div id="caixa1">Esquerra

</div>

<div id="caixa2"><p>Aquesta és la meva primera pàgina web. La propera serà millor!</p>

<p>Tampoc cal que us emocioneu.</p>

</div>

<div id="caixa3">Centre

</div>

<div id="caixa4">Dreta

</div>

</body>

</html>

Com crear enllaços a altres pàgines web

Els enllaços o links són un dels elements més importants d'una pàgina web. Per exemple, crearem un enllaç a Google que es mostrarà en una altra pestanya:

Quadre 5.

<html>

<head>

<title> Definició de caixes </title>

</head>

<body>

<div id="caixa1"><a href="http://www.google.cat" TARGET="_blank">Google</a>

</div>

<div id="caixa2"><p>Aquesta és la meva primera pàgina web. La propera serà millor!</p>

<p>Tampoc cal que us emocioneu.</p>

</div>

<div id="caixa3">Centre

</div>

<div id="caixa4">Dreta

</div>

</body>

</html>

Com inserir imatges

Una part molt important de les pàgines web són les imatges. Si volem que es mostri una imatge haurem d'utilitzar el Tag img. Aquest Tag conté diferents atributs:

- src: És l'abreujat de source (origen) indica en quin lloc (carpetes i subcarpetes) hem desat la nostra imatge (pingu.jpg).

- width=100%: ens permet definir l'amplada de la imatge i l'alçada ja la farà proporcional.
- Encara n'hi ha d'altres d'atributs, com el border, height, align. Els podreu trobar explicats en detall en aquest manual d'HTML.

Quadre 6.

<html>

<head>

<title> Definició de caixes </title>

</head>

<body>

<div id="caixa1">Quan cliquem aquí anirem <a href="http://www.google.cat" TARGET="_blank">Google</a>

</div>

<div id="caixa2"><p>Aquesta és la meva primera pàgina web. La propera serà millor!</p>

<p>Tampoc cal que us emocioneu.</p>

</div>

</div>

<div id="caixa4">Dreta

</div>

</body>

</html>

Com inserir imatges amb enllaços

Sovint trobem combinats enllaços amb imatges, de manera que quan cliquem damunt d'una imatge ens porta a una nova pàgina web. Això ho farem amb aquesta instrucció:

Quadre 7.

<html>

<head>

<title> Definició de caixes </title>

</head>

<body>

<div id="caixa1">Quan cliquem aquí anirem <a href="http://www.google.cat" TARGET="_blank">Google</a>

</div>

<div id="caixa2"><p>Aquesta és la meva primera pàgina web. La propera serà millor!</p>

<p>Tampoc cal que us emocioneu.</p>

</div>

</div>

<div id="caixa4">Dreta

</div>

</body>

</html>

Com inserir un vídeo de YouTube

Quadre 8.

<html>

<head>

<title> Definició de caixes </title>

</head>

<body>

<div id="caixa1">Quan cliquem aquí anirem <a href="http://www.google.cat" TARGET="_blank">Google</a>

</div>

<div id="caixa2"><p>Aquesta és la meva primera pàgina web. La propera serà millor!</p>

<p>Tampoc cal que us emocioneu.</p>

</div>

</div>

</div>

</body>

</html>