Layout HTML i CSS

23 febr. Layout HTML i CSS

Índex

• L’etiqueta DIV
  • L’atribut id
  • L’atribut class
• HTML5: Elements semàntics per estructurar el document
• CSS: Tipus d’estils, sintaxis i propietats.
• Pràctica:
  • Maquetació HTML del layout i continguts de la home del projecte final.
  • Recerca propietats CSS

 

Etiqueta DIV

Una estiqueta que es fa servir molt sovint és la <div>, que és una abreviació de la paraula anglesa “division” i divideix en una secció altres etiquetes.

No té un valor semàntic si no que es fa servir per agrupar elements i donar-lis un mateix estil CSS. Com per exemple:

<div style="color:#CCCCCC; border: 1px solid #FC0000 " >
   <h3>Títol</h3>
  <p>Paràgraf dins de la div</p>
  <img src="img/foto.jpg" alt="Fotografia" />
 </div>

Aquest codi el veurem en el navegador així:

Les <div> tenen etiquetes d’obertura i de tancament.

 

Atribut id

Estableix un identificador únic per una etiqueta HTML. No es pot repetir en una mateixa pàgina HTML. Pots fer servir diferentes id’s en diferentes etiquetes.

<img id="logo" />
<div id="Caixa_1> ... </div>

Pots escollir el nom de la id però aquest, com les rutes:

• No pot tenir caràcters especials (ç, ñ, #, €, $, %),
• No pot accents
• No pot espais en blanc. Si poses diferents paraules és recomenble fer servir el guió baix: _.
• És sensible a l’ús de majúscules i minúscules.

Es fa servir molt per donar un estil únic o un comportament amb JavaScript.

 

Atribut class

Estableix un nom per identificar un o varies etiquetes HTML.

<img class="portfolio" />, <img class="portfolio" />
<div class="columna">...</div> , <div class="columna">...</div>

Es fa servir per crear una regla d’estil CSS que s’apliqui a varis elements HTML al mateix temps sense haver d’escriure de nou el mateix estil.

 

HTML5: elements semàntics per estructurar el document

En HTML5 es fan servir noves etiquetes semàntiques que ajuden a estructurar el document i que són molt descriptives i estan substituint l’us de l’etiqueta DIV. Nosaltres les aplicarem en els treballs que farem.

<header>

Es fa servir per enunciar l’encapçalament del document on habitualment trobarem el logo de la web. Pot repetirse

<nav>

Es fa servir per posar el menú de navegació. Acostuma a tenir dintre una <ul> llista desordenada amb els enllaços a les diferentes seccions de la web.

<article>

Un contingut autònom que pots publicar en un altre lloc web sense cap modificació, com per exemple una entrada independent d’un blog, un article d’un magazine.

<section>

Una agrupació temàtica d’un contingut, pot tenir un <header> propi i pot contenir altres <section> dintre seu.

<aside>

Agrupa el contingut que té relació amb el contingut que té al costat i s’acostuma a fer servir com la barra lateral de la web on posem enllaços relacionats o publicitat.

<footer>

Es fa servir per posar el peu de pàgina de la web, habitualment podem trobar un menú de navegació, accessos a xarxes socials, informació de contacte, copyright i l’Avís legal.

 

 

Estils CSS

En les sessions anteriors hem vist:

• HTML és un llenguatge d’etiquetes que estructura el contingut d’una web.
• Les etiquetes HTML donen un estil limitat, l’etiqueta <h1> fara que el text es vegi més gran que l’etiqueta <p>, l’etiqueta <strong> farà que el text es vegi en negreta de color negre.

Els estils CSS (Cascading Sylte Sheets, Fulla d’estils en cascada) permeten assignar un estil a les etiquetes HTML. Per exemple:

h1 { font-size: 18px; }

Aquesta regla css fa que els elements amb les etiquetes <h1> tinguin un tamany de 18 píxels.

p { font-family: Helvetica, Arial, sans-serif; }

Aquesta regla css fa que els paràgrafs es vegin amb Helvetica, però si el dispositiu no té l’Helvètica mostrarà els paràgrafs amb Arial i si no té l’Arial, amb una lletra de pal sec.

 

Una regla CSS

• Una regla CSS consta de dues parts: el selector (el destí de l’estil) i la declaració.
• El selector especifica l’etiqueta sobre la que s’aplicarà l’estil.
• La declaració conté propietats i valors.
• La part de la declaració pot tenir més d’una declaració.
• Les declaracions sempre van entre claus { }
• Després de cada propietat sempre s’escriuen dos punts : per indicar el valor de la propietat.
• Després de cada valor sempre s’escriu punt i coma “;” , per tancar el valor o valors de la propietat.

Els comentaris s’escriuen entre /* … */

Pots escriure notes, es veuen en gris i no afecten al codi.

 

Agrupació de selectors

Podem fer més curtes les nostres regles si agrupem varis selectors.

Per exemple, si volem que tots els nostres encapçalaments no apareguin en negreta escriurem el següent:

Si les quatre regles tenen la mateixa declaració podem escriure una sola regla:

Cada selector va separat d’una coma.

 

Agrupació de declaracions

Un selector pot tenir més d’una declaració:

La regla d’amunt la podem escriure així:

I tindrem el mateix resultat. Per facilitar la lectura, podem escriure-la així:

 

Herència

Quan s’estableix un valor per la propietat d’un element, tots els seus descendents l’hereten. (Hi ha algunes propietats que no s’hereten)

Inserir estils CSS

Els estils CSS poden trobar-se:

1. CSS en línia, escrit dins d’una etiqueta HTML
2. CSS intern, dins de les etiquetes <style> situades al <head>
3. CSS extern

Vejam que implica cada manera de fer-ho.

1. CSS en línia

S’escriu sempre a l’etiqueta d’obertura com l’atribut d’estil “style”:

Fixa’t que després de l’atribut style posem declaracions dintre de les cometes.

Si escrius les regles css en cada etiqueta HTML et pots trobar que cada <p> tingui un estil diferent, i si vols que tots els paràgrafs tinguin un mateix estil hauràs de posar en cada paràgraf la mateixa

<p style="color:FC000; margin-left:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a fermentum lectus. Proin cursus vestibulum bibendum. Ut ornare justo pharetra sem.<p>

<p style="color:FC000; margin-left:20px;">Donec sit amet dolor vel neque scelerisque pretium sed eget felis. Mauris rutrum varius odio iaculis pharetra.<p>

<p style="color:FC000; margin-left:20px;">Fusce nec nisl risus. Proin hendrerit purus rhoncus nisi convallis sed egestas mauris lacinia. Aliquam erat volutpat.<p>

El document HTML estarà ple d’estil redundant i, si més endavant vols canviar el color del text, hauràs de reescriure tots els styles de tots els paràgrafs i això pot fer molt difícil mantenir la coherència gràfica d’una web.

Una primera solució és fer uns estils css interns.

2. CSS intern

Podem escriure diferentes regles CSS i incloure-les dintre de l’etiqueta <style>… </style> que s’inclou dins del <head> del document. Aquests estils només afecten a la pàgina on estan. L’etiqueta <style> s’escriu amb l’atribut type=”text/css”.

En l’exemple de dalt, si volem canviar el tamany i fer que els paràgrafs tinguin lletres de 14 píxels, només caldrà que canviem la declaració “font-size: 14px; “.

Si el nostre lloc web és un microsite d’una sola pàgina o si enviem un email-html, utilitzarem la fulla d’estils interna.

Pots trobar exemples d’email-html a http://www.campaignmonitor.com/templates/

Però si fem un lloc web amb moltes pàgines HTML i l’hem d’actualitzar amb el temps, aquest sistema no serà gaire pràctic ja que si hem de canviar el color de les lletres, el tamany o la família de fonts, haurem d’obrir totes les pàgines i canviar les regles una a una. Quan tenim llocs webs de molts documents utilitzarem una fulla d’estils externa.

3. CSS extern

En el cas anterior enllaçem la fulla d’estils “estils.css” amb l’etiqueta <link> que posem dintre del <head> del document. Si volem que vàries pàgines tinguin el mateix estil, li posarem el mateix enllaç a totes.

Després escriurem les diferents regles css directament en el document.

Creació d’uns estils css externs amb Dreamweaver

1. Ves a Archivo / Nuevo
2. Escull “Tipo de página CSS”
3. Escriu directament les regles sense l’etiqueta <style>, per exemple:
   • body { font-family: Helvetica, Arial, sans-serif; background: #333; }
   • p { font-size:12px; color:#FFF; line-height:18px; }
4. Guarda l’arxiu amb el nom “estil.css” dins la carpeta arrel del teu lloc web.
5. Linka l’arxiu amb les pàgines del teu site posant el codi següent dins del <head>
   • <link rel=”stylesheet” type=”text/css” href=”estils.css” />

I ja ho tens fet.

Quan hagis de fer modificacions a l’estil de tot el teu lloc web només caldrà que obris la fulla d’estils “estils.css“.

 

Podem fer un document “.css” amb el Bloc de Notes (Windows) o el TextEdit (Mac), només cal que guardem l’arxiu amb l’extensió “.css”.

 

4 selectors bàsics

Selector d’etiqueta

Seleccionen totes les etiquetes HTML que coincideixin amb el nom del selector.

Selectors descendents

Seleccionen el elements que es troben dins d’altres elements.

Codi HTML:

Codi CSS:

Selector class (.)

Quan volem repetir un mateix estil a varies etiquetes fem servir l’atribut class:

A la fulla d’estils s’indica una class posant un punt “.” davant del nom de la class

 

Selector ID (#)

Quan vols que un estil s’apliqui a un element únic fem servir l’atribut id:

Esculls una etiqueta HTML i li poses l’atribut id:

Al selector id s’indica amb el signe “#”

Els noms de les ID i de les CLASS:

• no poden tenir paràules separades
• no poden accentuar-se
• no es poden fer servir caràcters especials
• són sensibles a les majúscules i minúscules

 

Tipografies web

Propietat “font-family”

Cada ordinador té diferents tipografies instal·lades. Quan publiquem una web indiquem amb quines fonts volem que es mostri la web. En el cas:

font-family: Verdana, Geneva, sans-serif;

Diem que el text es mostri amb Verdana. Si no està instal·lada, que el text es mostri en Geneva i si tampoc té aquesta tipografia que s’utilitzi una lletra de pal sec.

Quan escrius la propietat amb Dreamweaver, després de posar “:” et mostra un llistat de les més habituals. Pots seleccionar una amb el cursor i fer un intro per que se t’escrigui el codi.

 

Algunes propietats de text

 

Propietats d’enllaç

Si escrivim aquest codi canviarem l’estil de tots els enllaços:

Si a un enllaç li posem la class “titol”:

Escriurem les regles següents:

I així es comportaran només els enllaços que tinguin aquesta class. Pots tenir vàries class per mostrar diferents tipus d’enllaç.

 

Panell CSS de Dreamweaver

Unitats de mesura

Absolutes:

• px (píxels, molt habitual)
• in (inches)
• pt (punts)
• cm, mm

Relatives:

• em
• %

 

Colors

• Hexadecimal: #RRGGBB
• Hexadecimal simplificada: #RGB
• RGB decimal: rgb(R, G, B)
• RGB perceptual: rgb(R%, G%, B%)
• Colors bàsics: (17 colors en anglès)

 

Recerca i presentació de grups de regles CSS

A classe assignarem a grups de 5 persones la recerca de les següents regles CSS:

• GRUP 4 – TEXT CSS:
  • Investigar quins selectors de textos hi ha (body, h1, p, etc…)
  • i quines propietats poden tenir com ara font-family, font-style, font-weight, font-size, text-align, line-height, color, etc…
• GRUP 5 – CSS MODEL DE CAIXES: margin, border, padding, width, height

Heu de preparar una presentació que no superi els 30 minuts i que permeti exposar de manera clara i concisa el tema investigat, tot responent les següents preguntes:

• Per què són necessaris aquestes regles?
• Quina és la seva funció en un document web?
• Quina ha estat la seva evolució?
• Exemples del seu us.

Entrega

• Heu d’entregar un document PDF que inclogui el noms dels components del grup.
• També s’han d’incloure un resum de les presentacions realitzades pels altres grups.
• S’ha d’adjuntar bibliografia i referències de les fonts consultades.

RECERCA ETIQUETES HTML I REGLES- PDF