APUNTS DE HTML i CSS: de desembre 2008

divendres, 19 de desembre del 2008

CSS - 14 - Cursor

Podem escollir el cursor de l'usuari quan passi sobre l'element que estem tractant:

cursor:pointer;
cursor:hand;
cursor:move;
cursor:e-resize;
cursor:ne-resize;
cursor:nw-resize;
cursor:n-resize;
cursor:se-resize;
cursor:sw-resize;
cursor:s-resize;
cursor:w-resize;
cursor:text;
cursor:wait;
cursor:help;
cursor:default;
cursor:crosshair;
cursor:auto;
cursor:url;

CSS - 13 - Capses de bloc i capses de línia

PRESENTACIÓ

display:block; [converteix a bloc qualsevol etiqueta com si fos una div]

display:inline; [Ho posa tot en una sola línia]

display:none; [Retira l'element de la pàgina, a diferència de visibility que deixa el forat]

Podem fer que elements de llista es posin en una línia. Útil de recordar quan feu PHP.

VISSIBILITAT

visibility:visible;

visibility:hide;

Útil per mostrar i ocultar capes. Amb els comportaments de DW, és a dir: amb javascript, es pot controlar dinàmicament si volem que una capa es vegi o no.

CSS - 12 - Overflow i Clip

OVERFLOW serveix per indicar com volem que es representi la capsa quan el contingut soprepassi la mida de que disposa.

overflow: hidden; [la part que excedeixi s'oculta]

overflow: scroll; [si el contingut excedeix apareixerà una barra d'scroll]

overflow: visible; [si el contingut excedeix la capsa o contenidor s'engrandeix fins que es veu]

overflow: auto; [li deixa decidir al navegador]

CLIP
(busqueu això vosaltrs.)

CSS - 11 - Posicionament flotant

La propietat float especifica a quin costat de l'element de capsa pare ha d'aliniar-se l'element tractat.

float: right;
float: left;
float: none;

La propietat clear permet anular la posició flotant d'altres elements contigus.

clear: right;
clear: left;
clear: none;
clear:both;

Això és molt útil per maquetar.

CSS - 10 - Superposició de capes

z-index:1; - (un número natural)

Serveix per fer capes flotants. El valor z-index serveix per indicar la profunditat d'aquesta capa. Quant més alt és el número, en cas d'haver-hi vàries capes, més es superposarà.

Exemple:

<div style="position:absolute; left:50px; top:50px; width:80px; height:40px" > border: 2px solid black; padding:5px; background-color:#9cf; z-index: 1

</div >

En HTML és díficil col·locar un element en la posició exacta i hem de fer servir taules anidades unes dintre de les altres. Amb CSS podem afinar més la precisió que no pas amb HTML. Amb CSS podem posicionar de 4 formes diferents.

Posicionament estàtic. Posicionament normal que té l'element segons la forma habitual de procedir del navegador.
Posicionament relatiu. Posiciona un element en relació amb la seva posició normal o estàtica. Aquest element forma part del fluxe de dades, però queda una mica desplaçat amb respecte a la seva posició normal.
Posicionament absolut. Posiciona respecte als contorns de la pàgina.
Posicionament fixe. Encara no ho implementen els navegadors però la seva posició seria fixe respecte a la finestra.

exemple:

position: absolute;
left:0px;
right:0px;
top:10px;
bottom:5%;

CSS - 8 - PSEUDOCLASSES

La sintàxi de les pseudo-classes és la següent: SELECTOR: PSEUDO-CLASSE { declaracions d'estil }

LINKS

a:link {color:#000000; text-decoration:none;}
a:visited {text-decoration: line-throught;}
a:hover {color:#000000; background-color:#ffffff;}
a: active {text-decoration: underline;}

Per obtenir un resultat correcte és primordial declara els aspectes de l'enllaç en aquest ordre: :link, :visited, :hover, :active.

Gràcies a aquests estils podriem definir botons amb CSS amb els 4 estats:repós, visitat, sobre, sel·leccionat.

CAPITOLARS

:first-letter

Exemple:

<STYLE TYPE="text/css">
.capitular:first-letter {
float:left;
font-size: 300%;
margin-right:3px;
}
</STYLE>

:first-line

Exemple:

<STYLE TYPE="text/css">
.capitular:first-line {
text-size:200%;}
</STYLE>

CSS - 7 - Noció de capsa

Introducció:
Les capses ens serviràn entre d'altres coses per:

Marcar zones d'una pàgina web per aplicar estils de cascada diferenciats als d'altres zones.
Delimitar la zona d'actuació d'uns estils en concret.

Definició de CAPSA o CONTENIDOR:

Segons W3C una capsa es defineix com una una zona rectangular constituida per:

contingut
marge intern (padding)
borde
marge exterior (margin)

Amb CSS es pot configurar per separat:

Els quatre marges per separat.
Els quatre bordes del quadre (dimensions, estil, color) per separat.
Els quatre marges interns per separat.
Les dimensions (amplada i alçada del contingut) per separat.

Noció d'herència:

Junt amb la noció de Cascada podem utilitzar les capses per que s'apliquin estils cap a lo local, això sí, sempre i quan a lo local no indiquem el contrari. Per exemple: podem fer que la etiqueta BODY es representi amb la tipografia ARIAL simplement posant l'atribut STYLE a la etiqueta BODY de la següent manera: <BODY STYLE="font-family: Arial, Verdana, sans-serif">, llavors totes les etiquetes que estiguin anidades a BODY que continguin text heretaràn l'estil de BODY. D'això se'n diu herència.

Etiquetes HTML que es comporten com capses entre d'altres poden ser:

BODY
TD
TABLE
DIV
SPAN
H1,...H7
P
...

Exemple de com definir l'estil d'una capsa. En aquest cas fixeu-vos que s'està referint a qualsevol etiqueta P, la etiqueta per definir paràgrafs, que trobem a la pàgina.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Element Capsa</title>
<meta http-equiv="content-Style-Type" content="text/css" />
<style type="text/css">

</style>
</head>
<body>
<p>EM SEMBLA QUE AIXÒ ÉS UNA CAPSETA</p>
</body>
</html>

Estils CSS aplicats a capses.

Amplada

width:100px;
width:50%;
width:auto;

Alçada

height:300px;
height:75%;
height:auto;

Color de borde

border-color:#ff3300;
border-top-color:#f65123;
border-right-color:#456723;
border-left-color:#456723;
border-bottom-color:#000000;

Grosor de borde

border-width:2px;
border-top-width:2px;
border-bottom-width:4px;
border-left-width:5px;
border-right-width:1px;

Estilo de borde

border-style: solid; [altres possibles valors: dashed, dotted, double, groove, ridge, inset, ouset, hidden i none].
border-top-style: dashed;
border-bottom-style: dotted;
border-left-style: double;
border-right-style: groove;

Marges externs [MARGIN]

margin:20px;
margin-top:15px;
margin-bottom:25px;
margin-left:15px;
margin-right:30px;

Farcits o Marges interns [PADDING]

padding:20px;
padding-top:15px;
padding-bottom:25px;
padding-left:15px;
padding-right:30px;

CSS - 6 - Fons

Color de fons

background-color:#ff0000;

background-color:red;

background-color:#f00;

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

background-color:transparent;

Imatge de fons

background-image: url(xxxx.gif);

Repetició d'imatge

background-repeat: repeat;

background-repeat: repeat-x;

background-repeat: repeat-y;

background-repeat: no-repeat;

Posició de la imatge de fons

background-position: left top;

background-position: center center;

background-position: right bottom;

background-position: left center;

background-position: 50px 150px;

Imatge fixa o mòvil

background-attachment:scroll;

background-attachment:fixed;

CSS - 5 - Control de llistes i elements de llistes

Tipus de llistes

list-style-type: disc;

list-style-type: circle;

list-style-type: square;

list-style-type: decimal;

list-style-type: upper-roman;

list-style-type: lower-roman;

list-style-type: upper-alpha;

list-style-type: lower-alpha;

Vinyeta a partir d'imatge

list-style-image: url(imagen.gif);

list-style-image:none;

Sangría de llista

list-style-position: outside;

list-style-position: inside
;

CSS - 4 - Controlant el text

Color

color: red;

color: #ff0000;

color: #f00;

color: rgb(255,0,0);

Sangria. Serveix per indicar quan volem que es fiqui la primera línia.

text-indent:20px;

text-indent:5%;

Decoració

text-decoration: underline; (subratlla).

text-decoration: overline; (posa una ratlla per sobre).

text-decoration: line-through; (tatxa).

text-decoration: blink; (text intermitent)

text-decoration: none; (Sense decoració. Precísament això ho aplicarem als links sempre i quan no volguem que es subratllin).

Transformació

text-transform: capitalize; (converteix en majúscula el primer caràcter)

text-transform: uppercase; (converteix en majúscula tots els caràcters)

text-transform: lowercase; (converteix en minúscula el primer caràcter)

text-transform: none; (deixa tots els caràcters tal i com estàn)

Espai entre caràcters

letter-spacing:20px; (separa les lletres).

Espai entre paraules

word-spacing:20px; (separa les paraules).

Espai en blanc. Serveix per preservar o no els espais en blanc de forma similar a lo que ja feia la etiqueta PRE en HTML

white-space:pre; (preserva espais múltiples i retorns de carro).

white-space:nowrap; (impedeix l'ajust irregular de línia).

white-space:normal; (el que faci per defecte el navegador).

Interliniat.

line-height:2; (indica que la separació entre línies sigui el doble que la mida dels caràcters d'aquella línia)

line-height:20px;

line-height:200%;

Alniació horitzontal respecte a l'espai en que es troba.

text-align: left;

text-align: center;

text-align: right;

text-align: justify;

Aliniació vertical respecte a un altre element de codi(similar a l'aliniament vertical de les imatges)

vertical-align: baseline;

vertical-align: sub; (per fer subíndex)

vertical-align: super; (per fer superíndex)

vertical-align: top; (a dalt en l'espai pare que ocupa)

vertical-align: middle; (al mig en l'espai pare que ocupa)

vertical-align: bottom; (a baix en l'espai pare que ocupa)

vertical-align: 10px; (10px per sobre de la línia base)

vertical-align: -5px;(5px per sota de la línia base)

vertical-align: 5%;

vertical-align: -20%;

Direcció del text.

direction:ltr; (esquerra a dreta)

direction:rtl; (dreta a esquerra)

Longitud i alçada

width: 200px;

width: 20%; (el 20% de l'espai que ocupa)

height: 40px;

height: 10%;

CSS - 3 - Controlant la tipografia

Famílies de fonts:

font-family: Arial, Verdana, Geneva, sans-serif;
font-family: 'Lucida Console', Verdana, Geneva, sans-serif; (si el nom de la font porta espais s'han de fer servir les comes simples ' ').
font-family: serif;
font-family: sans-serif;
font-family: cursive;
font-family: fantasy;
font-family: monospace;

Cursiva, Oblíqua o normal.

font-style: italic;
font-style:oblique;
font-style:normal;

Versalites(majúscules amb la mida de minúscules)

font-variant: small-caps;
font-variant: normal;

Negreta

font-weight: normal;
font-weight: blod;
font-weight: bolder;
font-weight: lighter;
font-weight: 500; (valors entre 100 i 900)

Mida

font-size:12px (admet com a unitats: px, punts, em, exs, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger)

Propietats combinades de font

font: italic bold small-caps 24px Arial, sans-serif;

CSS - Bibliografia - Com aprendre CSS

CSS és un altre llenguatge d'instruccions per al navegador que convé conèixer de memòria per poder controlar millor l'aspecte de les pàgines.

A part dels meus apunts en paper i dels d'aquest blog us recomano aquest llibre, el qual a més inclou una part d'introducció al Javascript.

BIBLIOGRAFIA:

Us recomano aquest llibre per aprendre CSS ja que, de tots els que tinc és el que ho explica més clar. A més també explica clar la base una base de Javascript. És adequat pel vostre nivell inical.

Aquestes són les referències d'aquest llibre:

Autor: Luc VAN LANCKER.
Editorial: ENI Ediciones
Col·lecció: Recursos informáticos - INFORMÀTICA TÈCNICA.
Títol: CSS en DHTML.
Subtítol: Javascript aplicado a hojas de estilo.
ISBN: 2-7460-3067-5
Us el recomano per que ho explica d'una forma sistemàtica, clara i senzilla.

Per altra banda hi ha força webs que parlen sobre CSS

HTMLPOINT.COM. Aquesta és una web italiana que també està en castellà i que explica molt bé HTML, CSS, javascript. Inclús teniu uns quants exemples per aplicar petits javascripts a les vostres pàgines.
DESARROLLOWEB.COM. Per mí desarrolloweb és la millor web per aprendre qualsevol cosa relacionada amb el disseny i desenvolupament de les pàgines web.

CSS - 1 - Introducció a CSS

INTRODUCCIÓ:
Encara que ho fem amb Dreamweaver us en faré una introducció per que veieu quina és la seva utilitat real. Continuament m'heu estat sentint que amb HTML no n'hi ha suficient per controlar l'aspecte de les pàgines web.

HTML és un llenguatge que originàriament es va crear per a que els científics compartissin informació és a dir que no es va preocupar en excés de l'aspecte de les pàgines i no tenia una visió comercial. Simplement pretenia controlar uns quants recursos per donar-li format a una pàgina web. Un dissenyador de pàgines web no es pot considerar realment "dissenyador" si només és capaç de controlar l'aspecte de les pàgines web amb HTML o amb Dreamweaver.

QUINES SÓN LES COSES QUE PODEM CONTROLAR AMB CSS?

Amb CSS podem controlar entre d'altres aspectes els marges i els farcits i a més pot ser de forma independent. Així un bloc (DIV), un paràgraf (P), un titolar (H1), .... poden tenir un marge en píxels controlat amb precissió per nosaltres, no com abans que depeniem del que el navegador tingués assignat per defecte.

Podem definir la mida del text en píxels, ems, exs, ... cosa que abans no podiem controlar tant bé ja que depeniem del que el navegador de l'usuari tingués assignat per defecte en aquelles mesures que a la etiqueta FONT definiem amb l'atribut SIZE que contenia els valors 1-7. Per altra banda aquí no dependrà de si l'usuari té definit el seu WINDOWS per a que representi fonts grans (120ppp) o fonts petites(96ppp) o que tingui el navegador posat en fonts grans. En contrapartida amb aquesta acció podriem estar perjudicant a usuaris que tinguessin problemes de visió. En tot cas controlant CSS molt bé podriem ajudar a les persones amb dificultats de visió.

Podem redefinir l'aspecte d'etiquetes HTML, que és una de les raons per les quals convenia que sapiguèssiu de memòria HTML, ja que ara podrem aplicar estils CSS a etiquetes en concret. Com que teniu un vocabulari suficient i sabeu per a què serveixen les etiquetes principals(P, TABLE, TD, OL, UL, LI, BODY, B, SPAN, DIV, ...) doncs....

Podem sustituir les vinyetes de les llistes per imatges, com ara els típics llàpiços o forquilles de les receptes de cuina.

Recordeu que quan posavem una imatge de fons a una pàgina web, una taula o una cel·la aquesta imatge es repetia indefinidament donant lloc a un motiu? Doncs ara amb CSS podrem controlar aspectes com la repetició o no, la repetició en horitzontal o en vertical d'aquesta imatge de fons, el centrat vertical i/o horitzontal d'aquesta imatge respecte a l'espai de que disposa, posar la imatge cap amunt, cap a l'esquerra, cap a la dreta, cap a baix, ...

L'interliniat.

L'espai entre caràcters i entre paraules.

maquetacions líquides amb DIVS en comptes de fer servir taules. Un exemple d'això el tenim en aquest blog.

Podem treure el subratllat dels links i definir als links l'aspecte que hauràn de tenir si el ratolí clica, passa per sobre, etc... Amb això podriem fabricar botons des de CSS ja que el que s'obté no és ni més ni menys que

Posar cursors escollits per nosaltres, com per exemple rellotges de sorra, creus, l'interrogant, etc...

Definir la sangria de la primera lletra d'un paràgraf.

Capes flotants,...

Definir la mida de les etiquetes H1 i controlar millor els seus marges.

Podem fer versalites.

etc...

Us recomano que visiteu el tutorial sobre CSS que trobem a DESARROLLOWEB. Cliqueu aquí.

HTML - 1 - Introducció

ETIQUETES

HTML: Especifica que lo que conté és escrit en el llenguatge HTML
HEAD: Lo que conté són etiquetes que donen informació per indexar les pàgines a les bases de dades dels cercadors com per exemple TITLE i META.
TITLE: Conté el títol de la pàgina per ser indexades als cercadors.
META: Tipus genèric d'etiquetes que serveixen per indexar la pàgina a bases de dades de cercadors que pot registrar entre d'altres dades les paraules clau i descripcions sobre el contingut.
BODY: Defineix l'aspecte de la pàgina i conté etiquetes que defineixen les instruccions per a que el navegador sàpigue com representar la pàgina.
B: Fa negretes
STRONG: Fa negretes
I: Fa cursives
EM: Fa cursives
U: Subratlla
STROKE: Tatxa
SUB: Fa subíndex
SUP: Fa superindex
HR: Regla horitzontal
BR: Salt de línia
P: Defineix paràgrafs
PRE: Text predeformatejat
FONT: Defineix l'aspecte de la tipografia
H1, ..., H7: Defineix titolars
CENTER: Centra el text
BIG: Engrandeix el text contingut
SMALL: Redueix el text contingut
BLINK _ (Només per Netscape i Motzilla): Parpalleja
MARQUEE _ (Només per Internet Explorer): Fa marquesines
UL: Llistes no ordenades
OL: Llistes ordenades
LI: Elements de llista
TABLE: Taula
TR: Fila
TD: Cel·la
TH: Cel·la capçelera(substitueix a les TD)
A: Link i punt d'anclatge
IMG: Col·loca una Imatge
IFRAME: Marc Interior

ATRIBUTS: Paràmetres que configuren aspectes de les etiquetes on es troben ubicats.

ALIGN: Defineix l'alineament dels paràgrafs. Admet com a valors: left, center, right i justify. Aquests valors defineixen el tipus d'aliniament dels paràgrafs a l'esquerra, centrats, a la dreta i justificats respectivament.

BODY:

LEFTMARGIN: Marge esquerre(Iexplorer) Els valors que admet són (números), per definir quantitat de píxels, o (números %) per definir percentatges.
RIGHTMARGIN: Marge dret(Iexplorer) Els valors que admet són (números), per definir quantitat de píxels, o (números %) per definir percentatges.
TOPMARGIN: Marge superior(Iexplorer) Els valors que admet són (números), per definir quantitat de píxels, o (números %) per definir percentatges.
BOTTOMMARGIN: Marge inferior(Iexplorer) Els valors que admet són (números), per definir quantitat de píxels, o (números %) per definir percentatges.
MARGINWIDTH: Ample de marge(Netscape) Els valors que admet són (números), per definir quantitat de píxels, o (números %) per definir percentatges.
MARGINHEIGHT: Alçada de marge(Netscape) Els valors que admet són (números), per definir quantitat de píxels, o (números %) per definir percentatges.
BGCOLOR: Color de fons de la pàgina Valors hexadecimals
BACKGROUND: Imatge de fons de la pàgina URL d'una imatge
TEXT: Color del text a tota la pàgina Valors hexadecimals
LINK: Color dels links a tota la pàgina Valors hexadecimals
VLINK: Color dels links visitats Valors hexadecimals
ALINK: Color dels links actius Valors hexadecimals
SCROLL: Presència o absència de barra d'Scroll.

FONT:

SIZE: Defineix grandaria de la lletra Valors de 1-7
COLOR: Color de la lletra Valors hexadecimals
FACE: Defineix la tipografia de la etiqueta Com a valors conté families de fonts separades per comes en ordre de prioritats.

UL:

TYPE: Defineix el tipus de vinyeta que decora els elements d'una llista no ordenada. Com a valors admet els següents: disc, circle i square.

OL:

TYPE: Defineix el tipus d'ordenació d'aquest tipus de llista. Tant pot ser una ordenació numérica com alfabètica en majúscules, minúscules, números romans, ... etc... Admet com a valors els següents: 1, A, a, I, i
START: Defineix la posició a partir de la qual s'ha d'iniciar la llista.

IMG:

SRC: Indica al navegador on es troba situada una imatge. Com a valor es posa una URL d'imatge
WIDTH: Amplada d'una imatge. Valors en píxels i %
HEIGHT: Alçada d'una imatge. Valors en píxels i %
ALT: Defineix un ròtul que es veu a sobre de la imatge quan es passa per sobre amb el ratolí. Com a valors es posa una frase
VSPACE: Marge damunt i per sota de la imatge.
HSPACE: Marge a dreta i esquerra de la imatge.
BORDER: Li posa borde quan la imatge és troba dins d'un link.

IFRAME:

SRC: URL de la pàgina que ha de sortir per defecte Com a valor la URL de la pàgina que volguem que sorti per defecte
NAME: Nom de l'IFRAME com a valor es posa una paraula en ASCII i sense espais.
WIDTH: Amplada de l'IFRAME píxels i %
HEIGHT: Alçada de l'IFRAME píxels i %
FRAMEBORDER: Absència o presència de relleu en el contorn de l'IFRAME valors possibles: 0 i 1.
SCROLLING: Absència o presència de barra de desplaçament (SCROLL): valors possibles: yes, no i auto.

HREF: URL de la pàgina o document al que volguem enllaçar. Valor: URL
TARGET: Nom de la finestra o marc on s'ha de representar el document que hi ha al HREF.
TITLE: Serveix per col·locar un cartell amb una frase que apareix quan el cursor passa per damunt. Sembla ser que només funciona això sobre Internet Explorer.
NAME: En cas que la etiqueta sigui un punt d'anclatge el NAME defineix el nom d'aquest punt d'anclatge.

TABLE:

WIDTH: Amplada de la taula. Valor en píxels i %.
HEIGHT: Alçada de la taula. Valor en píxels i %.
BGCOLOR: Color de fons de la taula. Color expressat en hexadecimals.
BACKGROUND: Imatge de fons d'una taula. URL de la imatge.
ALIGN: Alineament horitzontal de la taula. Valors possibles: left, center , right.
CELLPADDING: Defineix el marge de cel·la. Valor en píxels i %.
CELLSPACING: Espaiat entre cel·les. Valor en píxels i %.

TD:

WIDTH: Amplada de la cel·la. píxels i %
HEIGHT: Alçada de la cel·la. píxels i %
BGCOLOR: Color de fons de la cel·la. En hexadecimals.
BACKGROUND: Imatge de fons de la cel·la. URL de la imatge.
ALIGN: Alineament dels continguts de la cel·la. Valors possibles: left, center, right.
VALIGN: Alineament vertical dels continguts de la cel·la. Valors possibles: top, middle i bottom.
COLSPAN: Indica que la cel·la ha d'ocupar "n" columnes. Valor: un número "n".
ROWSPAN: Indica que la cel·la ha d'ocupar "n" files. Valor: un número "n" de files.

CARÀCTERS ESPECIALS:

Á: Á
è: è
ç: ç
Ñ: Ñ
Î: Î
€: &euro;
©: &copy;
ESPAI:&nbsp;
PUNT VOLAT( DE LES "L·L" GEMINADES): ·
<: <
>: >