APUNTS DE HTML i CSS

META CHARSET - ENLACE A EXPLICACIÓN

Aquí teniu un enllaç molt bo sobre tipus de meta charset Que serveixen per dir-li al navegador amb quin alfabet volem que es representi el text de la pàgina. Cliqueu Aquí.

Diferències entre Internet Explorer 6 i 7

Aquí trobareu diferèncie entre Internet Explorer 6 i 7.
Clica aquí.

CSS - TALLER - Maquetant una web amb CSS (pas a pas)

L'objectiu que hem de perseguir sempre és definir la estructura de la informació en llenguatge HTML i l'aspecte amb que volem que es representi en CSS, i si pot ser en una fulla externa. Us poso a continuació els passos que podríem seguir per aconseguir dissenyar una pàgina.

Muntem la estructura HTML.

ESTRUCTURA DE LA INFORMACIÓ EN HTML

EL NAVEGADOR REPRESENTA AIXÍ EL CODI ANTERIOR:

Li connectem la fulla d'estils externa.
No és obligatori però és pràctic.

Si de cas enrecordeu-vos de posar el IE7.js per que no tinguem problemes amb els Internet explorer 5.1, 5.5 i 6 a l'hora de representar les capses.

A la fulla d'estils fem:

I el resultat provisional és:

Una evolució d'aquesta plantilla base la podeu trobar clicant aquí. Us convindria analitzar-la.

Vista la pàgina avia.html[Clica aquí] i mireu el codi seu codi font i a continuació el codi CSS. Us el podeu descarregar el CSS d'aquí.

* { /*margin:0; padding:0;*/
/* Aquí definim aspectes globals que no admetin herència i que els vulguem a qualsevol contenidor. */
}

html, body {height:100%; margin: 0px;
padding: 0px;}
/* aconseguim que body arribi de dalt a baix */

body {
/*background-color: #223300;*/
background-image:url(../img/fons_body.jpg);
background-position:left center;
background-color:#cddcdf;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-repeat: repeat-x;
background-attachment: fixed;
}
a {text-decoration:none;}
a:link {color:#333333;}
a:visited {color:#333333;}
a:hover {color:#cc0000;}
a:active{color:#ff3300;}

p {margin:0; margin-bottom:1em;}

h1, h2, h3, h4, h5 {margin:0; padding:0;}

#ajustadora {
min-height:100%;
background-color:#FFFFFF;
margin-bottom:-50px;
background-attachment: fixed;
background-image: url(../img/fons_ajustadora.jpg);
background-repeat: repeat-x;
background-position: center;
}

#ajustadora, #peu {width:1000px; margin-left:auto; margin-right:auto;}

#peu {height:50px; margin-left:auto; margin-right:auto; clear:both;}

#peu span {position:relative; left:150px; top:10px;}

#cap {height:80px;}

#cap, #peu {background-color:#cc0000; color:#000000;}
/* cap i peu comparteixen els mateixos colors */

#logo, #titulo {height:100%;}

#logo {width:150px; float:left; }

#titulo {}

#dia {float:right; position:relative;top:10px; right:20px; text-align:right;}

#titulo h1 {margin:0; font-size:14px; color:#000000; position:relative; top:7px; left:8px; font-weight:bold; font-variant:small-caps; color:#000000;}

#titulo img {position:relative; top:8px; }

#menu {clear:both; padding-top:8px; padding-bottom:8px; background-color:#333333; margin-bottom:20px;
padding-left:150px; }

#menu a {margin-right:10px;}
#menu a:link {color:#eaeaea;}
#menu a:visited {color:#eaeaea;}
#menu a:hover {color:#ffffff;}
#menu a:active {color:#ffffff;}

#lateral {/*width:150px;*/
width:130px;
padding-right:20px;
float:right;
color: #cc0000;
font-size: 10px;
}

#lateral h5 {font-size:14px; text-align:center; padding:1px; color:#FFFFFF; margin-bottom:10px; font-variant:small-caps;}

#lateral .anunci {margin-bottom:10px;padding-bottom:10px; /*border-bottom:1px solid #cccccc;*/ background-image:url(../img/bora_inf.gif); background-position:bottom; background-repeat:repeat-x;}

.fnegre {background-color:#000000; color:#FFFFFF;}
.fvermell {background-color:#cc0000; color:#FFFFFF;}

#lateral-2 {width:230px; margin-right:20px; float:right; font-size:11px; color:#666666;}
#lateral-2 img {margin-bottom:2px; width:100%;}
#lateral-2 h3 { font-size:12px; padding:4px; background-color:#cc0000; color:#eeeeee; text-align:center; margin-bottom:10px; font-variant:small-caps;}
#lateral-2 h4 { font-size:12px; margin-bottom:.2em; display:inline;}

#lateral-2 .notialt {margin-bottom:20px;}

#lateral-2 .notialt a {color:#cc0000; }

#titulin {margin-bottom:20px;}
#titulin h2 {margin:0p; font-size:22px; text-align:justify; }

#miguitas {font-size:10px;}
#miguitas a {color:#CC0000;}

#data {font-size:10px; float:right; font-weight:bold; color:#cc0000;}

#submenu {/*width:150px;*/ width:120px; float:left; }

#submenu a {display:block; margin-bottom:3px; padding:4px; padding-top:2; padding-left:30px; padding-bottom:2px; width:110px; font-weight:bold; color:#666666; position:relative; top:-2px; letter-spacing:-1px; font-size:11px;
/* li posem farcit esquerre(marge intern per la esquerra)
per deixar espai per col·locar la imatge de fons del triangle als
estats hover i active dels enllaços */
}

#submenu a:hover {background-image:url(../img/submenuhover.gif); color:#FFFFFF; background-color:#cc0000; }
#submenu a:active { background-color:#cc0000; color:#FFFFFF;}
#submenu a:focus { background-color:#cc0000; color:#FFFFFF;}

#continguts {margin-left:150px; /*margin-right:170px;*/ margin-right:425px; height:auto; color:#333333;}

#continguts p {margin-top:0; margin-bottom:20px; text-align:justify;}

#nomeflotes {clear:both; height:50px;}

.notialt a:target {content: "hola";}

[Clica aquí]

[Clica aquí per veure tutorial pautat per posar menús emergents que es troba a la secció d'autoedició]

HTML - Charset UTF o ISO 8951 ?

La etiqueta "meta charset" serveix, entre d'altres coses, per que el navegador sàpigue amb quin joc de caràcters ha de representar el text.

Mireu aquest enllaç per saber més sobre si fer servir UTF o continuar amb l'ISO-8951 i caràcters especials. Clica aquí.

FLASH - Posar un Flash sense que surti l'avís de l'ActiveX

Unijimpe ens explica com aconseguir que no surti l'avís de l'ActiveX. Es fa mitjançant un javascript. Per més informació cliqueu aquí.

HTML - Etiquetes META

Aquí podeu mirar més sobre les etiquetes META.

CSS - Posicionant capses

Les capses les podem posicionar mitjançant CSS. Això, entre d'altres utilitats, és un recurs més, dels que tenim, per maquetar.

Quan es vol posicionar una capsa el primer que s'ha de fer és definir de quina manera. I això ho fem amb l'atribut "position:", el qual admet com a valors els següents:

absolute. Quan li donem aquest valor a position li estem dient al navegador que la capsa es situï respecte a la capsa body o respecte al seu element pare en cas que aquest estigui posicionat d'alguna manera. Per altra banda al posicionar d'aquesta manera la capsa s'aparta del "fluxe" natural dels continguts permetent que aquests es "comportin" com si la nostra capsa no hi fos.

relative.El posicionament relative és relatiu respecte al punt on es troba situat al codi font, no respecte al body. Per altra banda quan s’aparta del “flux natural” la resta de continguts es comporten com si encara hi fos.

static. Serveix per situar la capsa allà on es troba respecte al codi font.
fixed. Als navegadors moderns i també a IE7 i IE8 podem situar una capsa fixa que no es bellugui encara que moguem la barra de desplaçament.

Exemples de webs fetes amb HTML i CSS

El 90% de les webs no es fan íntegrament en Flash si no en HTML i CSS com a base, i en tot cas el flash no és la base si no una guirnalda més. Les raons són:

Són molt més flexibles en quant a la renovació de continguts.
Mitjançant llenguatges de servidor(p.ex: PHP, ASP, Python,...) es poden generar dinàmicament webs que treguin la informació, o no, d'una base de dades(p.ex: Mysql).
Tenen millor reputació per Google degut a que les pot indexar millor.

I aquest és el món real. És aquest el mercat generalista per on passa tothom, ja que tothom fa servir Google. Avui, a més, amb l'ús d'Ajax(Asynchronous JavaScript And XML) es poden fer coses similars que faríem amb Flash, en quant a interactivitat, però sense perdre grau d'indexabilitat.

Veiem-ne alguns exemples destacables de pàgines que fan servir (X)HTML+CSS com a base:

CSS - Recursos - Les unitats

A ignside.net expliquen molt bé les unitats. Cliqueu aquí.

CSS - Recursos - Javier Eguíluz Pérez

Javier Eguíluz Pérez ens brinda aquests dos excel·lents llibres en format PDF Introducción a CSS sota llicència creative commons no comercial, que es troba a http://www.librosweb.es/css

Introducció al CSS (PDF).
CSS Avanzado (PDF)

Felicitats Javier per aquestes dues perles tant magnífiques.

CSS - Recursos - Maquetar amb CSS

El camí per maquetar amb CSS no és inmediat. Convé que veieu tots els exemples possibles. Haureu de controlar les capses tot el que pugueu.

Hauríeu de mirar-vos els següents recursos:

[Continuarà...]

CSS - Com situar una capsa "PEU" a la part baixa de la finestra.

Introducció:
Tenim el codi següent:

I com veieu estem fent servir models xhtml1.0 transitional o xhtml1.0 strict, amb la qual cosa hem perdut la capacitat de posicionar capses tocant a la part inferior de la finestra del navegador tal i com passava uns pocs anys abans amb versions de navegadors anteriors. És una cosa que dona molts mals de cap habitualment per qui estava acostumat a treballar a la manera antiga ja que les pàgines queden com penjant de dalt quan encara no hi ha prou continguts.

La raó per la qual passa això té a veure amb que amb aquests modes transitional i strict els navegadors no consideren que el body hagi d'arribar de dalt a baix de la finestra. Hi ha una comprobació que podeu fer per adonar-vos d'això que és posar una vora a body i mirar fins on arriba quan encara no hi ha continguts.

body {border:5px solid #ff0000;}

El resultat és aquest:

Solució:

La capsa body no arriba a tocar ni el sostre ni les parets degut a que el navegador li representa marges i farcits en aquesta capsa per defecte. Per solucionar això fem:

body {margin:0; padding:0;}

La body no arriba fins a baix. Per aconseguir-ho hem de definir els CSS següents:
html, body {height:100%;}
body {margin:0; padding:0; }
Un cop estirat el body la capsa ajustadora també la podrem estirar al 100% del que ocupi el body.
A la fulla css posarem el següent codi:
body { margin:0; padding:0px; background-color:#000000;
/* Així posem els marges de body a zero. */
}

html, body {
/* "html, body" selector de grup. */
height:100%;
/* ocupen el 100% de la finestra estirant body */
}

#ajustadora {
width:955px;

margin:auto;
/* Això centra la capsa ajustadora */

min-height:100%;
/* ajustadora ocupa com a mínim el 100% de body */

/* NOTA: min-height: no està suportat a versions anteriors de Internet Explorer 7, a no ser que li poseu la biblioteca IE7.js */

Com veieu la capsa ajustadora arriba arran de finestra però la capsa peu sobresurt de la pantalla.

margin-bottom:-50px;
/* Això serveix per restar a l'alçada mínima de l'ajustadora, que és el 100% de la finestra, el que té d'alçada la capsa peu i d'aquesta manera aconseguim que la capsa "PEU" entri a la pantalla */

/*I per que el text de continguts no es superposi o s'amagui a causa de la footer, posem: */
padding-bottom:50px; /* l'alçada de peu */
/* I fins i tot posaríem una mica més per que l'usuari vegi espai*/
padding-bottom:100px;
}

#menu {width:150px; height:300px; float:left;}
#lateral {width:150px; height:300px; float:right;}
#continguts { }
#peu {width:995px; margin:auto; height:50px; background-color:#333333;}

NOTA: Potser convindria posar a #peu l'atribut: clear:both; en cas que les capses menu i lateral sobresurtissin per sobre de peu per contenir massa coses.

En un capítol més endavant i amb l'ajut de javascript farem que les capses menu i lateral arribin fins avall.

Agraïments i crèdits:
La solució que heu vist està basada a CSS STICKY FOOTER, Clilqueu aquí per anar a la pàgina original.

JAVASCRIPT - ARRODONIR CANTONADES AMB CSS i JAVASCRIPT

CSS

Quan s'implementi als navegadors CSS3, dintre de "x" anys i es deixin de fer servir els navegadors que encara no l'implementin podrem fer servir una propietat que s'està preparant per posar múltiples fons a una capsa.
Fent servir 4 capses anidades, una dintre de l'altre, podem posar una imatge cantonera de fons que no es repeteixi i col·locada de forma adient a cadascuna de les capses. L'usuari no ho percebrà. Això té l'avantatge que les capses poden ser líquides.
Si la capsa té una mida rígida li podem posar una imatge de fons que tingui els cants arrodonits.

Javascript

Nifty Corners Cube. Clica aquí per anar a la pàgina oficial. I aquí per anar a una pàgina que la expiquen en castellà.
Curvycorners. Clica aquí. per anar a la pàgina oficial. I aquí per anar a una pàgina en on la expliquen en castellà.
GOOGLE -> Javascript + round + corner

Comparatives de suport CSS entre els diferents navegadors

Podeu trobar un interessant article sobre la futura suportabilitat de l'estàndard CSS3. Cliqueu aquí .

L'anterior link està basat en l'aplicació online següent: Clica aquí.

També pots veure una comparativa a la Viquipèdia en anglès tot clicant aquí.

Diversos Hacks de selector per Internet Explorer

A la següent adreça fa un "recordatori" de selectors que entenen només els Internets Explorers.

http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml

Tot i això convé que tingueu en compte que això evoluciona. Per tant mireu també l'adreça de JavascriptKIT que parla dels hacks no recomanats. Clica aquí.

CSS - Convertir un Internet Explorer 5+ o 6 en un 7 - Llibreria IE7 de Dean Edwards.

Internet explorer 6, que ha durat 5 anys, encara el fa servir força gent. Però no admet plenament els atributs de CSS2. Però hi ha una possible solució si volem aplicar CSS més modern.

Una possible solució és fer servir una biblioteca de javascript de Dean Edwards anomenada IE7 que fa que Internet Explorer 5+ i 6 es comportin com un 7 admetent forces selectors més i també forces propietats més.

Us tradueixo les característiques d'aquest script:

La llibreria IE7 proporciona a Microsoft Internet Explorer el següent suport pels estàndards del W3C CSS i HTML:

suporta els següents selectors CSS:
- Selector de fill directe:
  pare>fill
- Selector d'element germà adjacent:
  + sibling
- Selector d'element germà:
  ~ sibling
- Selector per atribut
  [attr], [attr="value"], [attr~="value"] etc
- Selector .multiple.classes
  (error fixat)
- Selectors de pseudoclasse dinàmics:
  :hover, :active, :focus (per tots els elements i no només enllaços)
- Altres selectors de pseudoclasse:
  :first-child, :last-child, only-child, nth-child, nth-last-child
- :checked, :disabled, :enabled
- :empty, :contains(), :not()
- :before/:after/content:
- :lang()
Suport d'importació de fulls d'estils CSS amb import.
Preserva la cascada dels fulls d'estils.
No altera l'estructura del document.
No demana repetidament l'arbre DOM fent servir Javascript.
Utilitza CSS pur.
Suporta els modes de capsa del W3C l'estàndard i el mode quirks.
Suporta posicionament fixed (flicker free).
Suporta overflow:visible.
Suporta min/max-width/height.
Fixa elements trencats (X)HTML(abbr, object).
Estandaritza el comportament dels formularis.
Suporta el format PNG amb alpha transparent.
És un script lleuger (11KB).
Treballa amb Microsoft Internet Explorer 5+ (Windows only).

Podeu descarregar-vos el i mirar com es fa servir a la pàgina següent: Clica aquí. I si us fixeu també està preparant la llibreria IE8.

Navegadors - Condicionals d'Internet Explorer

Els navegadors Internet Explorer disposen d'un codi que només entenen ells. Es tracta d'unes etiquetes condicionals que podem fer servir per detectar si la pàgina s'està veient des d'un Internet explorer i fins i tot per detectar la versió. Veiem-ne alguns exemples.

Condicional [Si el navegador és Internet Explorer...]

Condicional [Si el navegador és Internet Explorer 7...]

Condicional [Si el navegador és anterior (low than) Internet Explorer 7...]

Entre mig d'aquestes etiquetes podem posar les etiquetes HTML que vulguem. Ens podria ser útil per definir fulles d'estil per navegadors més antics. Podeu ampliar la informació i veure més opcions de condicionals clicant aquí.

CSS - ALTRES SELECTORS, PSEUDOCLASSES i PSEUDOELEMENTS

Existeixen altres selectors a CSS2 tot i que encara no gaudeixen de prou suport ja que encara es fa servir el Internet Explorer 6. Això, segons com, ho podem utilitzar al nostre favor per discriminar entre navegadors a l'hora de fer hacks.

Selector fill[Selector descendent directe] [Per seleccionar elements que són descendents directes d'un altre.]

body>p{
declaracions
}

En aquest exemple està seleccionant tots els paràgrafs que tinguin com a element pare a body.

Selector per atribut [Pels elements que són descendents directes ]

p[align] {
declaracions
}
En aquest exemple està seleccionant aquells paràgrafs que tenen atribut align.
p[align=center] {
declaracions
}
En aquest exemple està seleccionant aquells paràgrafs que tenen atribut align i com a valor center.
q[x~=y] {
declaracions
}
Coincideix quan el valor de l'atribut de l'element és una llista de paraules separades per espais, una de les quals és la y.
p[x|=y] {
declaracions
}
Coincideix quan el valor de l'atribut de l'element és una llista de paraules separades per guions, una de les quals és la y.

Selectors agrupats[Per seleccionar elements que són descendents directes d'un altre.]

h1, h2, h3{
declaracions comunes a tots 3 elements
}

En aquest exemple estem seleccionant 3 elements per definir aspectes comuns.

Selector germà adjacent[Per seleccionar elements que són descendents del mateix pare i que van seguits.]

h1 + h2{
declaracions
}

En aquest exemple estem seleccionant l'element h2 que estigui directament a continuació d'un h1. No pot haver coses entre mig d'aquests dos elements germans. Han d'anar un darrera l'altre.

PSEUDOCLASSES
Una pseudoclasse no fa referència a un element HTML en concret si no determinats estats especials d'aquest. La seva sintaxi és una mica especial ja que s'escriuen amb dos punts per separar-les de l'element al que ens referim. Veiem-ne com són els selectors de pseudoclasse:

:firstchild[Per seleccionar els elements descendents que siguin primer fill.]

Exemple 1:
div p:firstchild{
declaracions
}

[En aquest exemple estem seleccionant l'element p sempre que sigui primer descendent de div].
Exemple 2:
div > p:firstchild{
declaracions
}

[En aquest exemple estem seleccionant l'element p sempre que sigui primer descendent directe de div].

Exemple 3:
p:firstchild{
declaracions
}
[En aquest exemple estem seleccionant l'element p sempre que sigui primer descendent de qualsevol altre element].
Exemple 4:
* > p:firstchild{
declaracions
}

[Una altra manera de fer en aquest exemple estem seleccionant l'element p sempre que sigui primer descendent de qualsevol altre element].

Pseudo classes per a enllaços i altres.
Serveixen per seleccionar diferents estats dels enllaços. Les pseudoclasses que fem servir als enllaços són les següents:

:link
:visited
:hover
:active
:focus

Aquestes pseudoclasses quan es declaren han de seguir necessàriament aquest ordre. Les dues primeres serveixen per definir els aspectes dels enllaços abans de ser visitats i després respecticament. Aquest estat dels enllaços depèn de l'historial del navegador. Les 2 següents en canvi depenen del cursor ja que apareixen quan passem per sobre o cliquem amb el ratolí. La darrera depèn de l'ús de la tecla TAB que va saltant d'enllaç a enllaç.

[Continuarà...]

PSEUDOELEMENTS
Els pseudo elements no són en si mateixos elements si no part d'elements
[Continuarà...]

CSS - ELS SELECTORS

Selector Universal

* {
declaracions
}

Selector de Tipus [Redefineix etiquetes HTML]

p {
declaracions
}

Selector descendents [per seleccionar elements en cas que estiguin anidats entre d'altres]

p b {
declaracions
}

En aquest exemple està seleccionant totes les negretes que vagin a dins de paràgrafs.

Selector de Classe(per definir estils personalitzats)
[per cridar-los des dels elements HTML es posa l'atribut class="nom_estil_personalitzat"]

.negreta12 {
font-size:12px;
font-weight:bold;
}

p.negreta12 {
font-size:12px;
font-weight:bold;
/* En aquest cas el selector és més específic ja que s'està referint només als paràgrafs que tenen negreta12 com a valor de l'atribut class.*/
}

Selectors de zona
[Per aplicar-los a zones identificades amb un nom mitjançant l'atribut id="nom_de_zona"]

#zona1 {
declaracions
}

div#zona1 {
declaracions
}
/* En aquest cas el selector de zona és més específic ja que s'està referint només a l'element, en aquest cas DIV, que té com a identificació id="zona1"*/

CSS - Mètodes per que les capses es vegin igual als diferents navegadors

PROBLEMA: DIFERENT FORMA DE REPRESENTAR L'AMPLADA I L'ALÇADA DE LES CAPSES.

Els navegadors Internet Explorer, si més no fins la versió 7, fan servir el model Quirk. Per tant en aquests consideren que l'amplada va de vora a vora. En canvi els Mozilla consideren que l'amplada va de farcit a farcit.

Observeu com representen els navegadors el codi següent(Clica a la imatge per ampliar):

SOLUCIÓ 1: Especificant el Doctype, just abans del començament de la etiqueta HTML, que volem que faci servir. Les versions anteriors de l'Internet Explorer 6 encara no estaven programades per acceptar aquesta especificació.

SOLUCIÓ 2:
Observeu una altra solució més universal tot i que aparentment més matussera. Clica a la imatge següent per ampliar:

HTML - Acrònims

Etiqueta semàntica per ajudar a Google a indexar la pàgina quan fem servir acrònims:

BLOG

I si et poses a sobre amb el ratolí fixa't el que passa.

HTML - Abreviatures

Una altra de les etiquetes amb sentit semàntic són les etiquetes . No Tenen suport en Internet Explorer 6 ni anteriors.

Serveixen per indicar el significat de les abreviatures. Això ajudaria a Google a indexar millor la pàgina al seu directori permetent-nos escriure l'abreviatura que és el que veuria l'usuari. Suposo que també podria ajudar als navegadors per a cecs.

Un exemple és:
The WHO was founded in 1948.

HTML - Llistes de definició (dd dt i dl )

Bé, no són llistes massa utilitzades però no està de més conèixer-les. Tenen un sentit semàntic que és el que es pretenia fer amb l'XHTML.

Us poso un enllaç on us ho expliquen força bé. Clica aquí.

Diferents versions de l'Internet Explorer per fer comprobacions

Si teniu windows XP i Internet Explorer 7 i voleu comprobar com es veu una pàgina en diferents versions anteriors del navegador Internet Explorer podeu fer servir aquest programa que us instal·la a una mateixa màquina les versions anteriors.

http://tredosoft.com/Multiple_IE

Si teniu Linux suposo que amb l'emulador WINE també podreu probar-ho. I si teniu MAC i teniu algun emulador de windows també el podreu instal·lar.

Emuladors de navegadors web

Aquí teniu un enllaç força interessant per que pugueu comparar com es veu una pàgina entre els diferents navegadors. Cliqueu aquí.

Recordeu que és necessari, com a dissenyador web, mirar com et poden veure amb els diferents navegadors i les seves versions.

CSS - Entendre els hacks per distingir entre navegadors

A l'enllaç següent hi ha una bona explicació de com funcionen els anomenats hacks(o trucs) per poder escriure estils CSS més específics a cada navegador, de tal manera que puguem definir estils orientats als diferents navegadors i les seves versions i així intentar fer que el resultat de la pàgina sigui el més similar possible sigui el navegador possible.

Generalment aquests hacks aprofiten errors o mancances dels diferents navegadors.

Bé, són les xapucetes que encara avui dia hem d'estar fent per solucionar aquesta problemàtica:

Clica aquí.

Per a més informació feu servir google i cerqueu "hacks CSS"

CSS - Algunos trucos para que funcione en diferentes navegadores

He encontrado un enlace de trucos de CSS muy interesante que soluciona algunos de los problemas de diferente representación en los diferentes navegadores.

Clica aquí

XHTML + CSS DE UNA VEZ

Hay que felicitar a Belén Baeza por este libro. Ha hecho un trabajo excelente y además demuestra que con humor estas cosas entran un poco mejor. Felicidades Belén.

XHTML + CSS DE UNA VEZ

Publish at Scribd or explore others: Manuals web culture

Sobre l'estàndard XHTML strict

Sobre la estandarització de l'XHTML strict.

Estandarització de documents XHTML.
Strict versus Transitional
Migración de HTML + Tablas a XHTML + CSS

Recursos - Una web que explican más sobre CSS

Una bona guía. Clica aquí

CSS - Sustitución de elementos de HTML por CSS

Ya sabéis que se trata de definir el aspecto en CSS, por motivos prácticos, y de dejar la estructura de la información en HTML, como si éste último lo usásemos a modo de casillero donde poner la información.

Os pongo aquí un enlace interesante de un foro(forosdelweb.com) en el que se están enfrentando a la traducción del HTML al CSS.

Un tal "chusete" pregunta:

como podria sustituir esta linea de codigo con css?

[table width="770" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFCC00" align="center"]

Vosotras ahora mismo estáis en ese proceso de traducir de HTML a CSS. Si quieres ver la respuesta a esa pregunta clica aquí.

BIBLIOGRAFIA - CSS JUEGO DE NIÑOS

Aquest llibre és baratico i és adequat per vosaltres. Què més es pot demanar? He vist que el venen a "La casa del libro". Clica aquí.

CSS - Com es defineix una classe

SELECTOR {nom d'atribut: valor atribut; }

CSS - Orientació - Recursos d'apunts que disposeu.

Teniu en paper els apunts de CSS que us vaig donar. I hem començat ja a explicar els rudiments de com funciona. Tanmateix us recordo que també disposeu de més material en aquesta secció.

Si apreteu al menú de temes que teniu a la esquerra el tema CSS s'us desplegaràn tots els articles que parlen de CSS. Recordeu que els més antics estàn a sota. Al segon article us he posat una recomanació bibliogràfica. Segurament us faré més.

També teniu una llista d'atributs CSS, que també els teniu en paper. Però aquí en el blog ens va bé per que podeu copiar i enganxar(ja sabeu amb Control+C i Control+V) per anar-vos familiaritzant amb la sintaxi. No cal que ho memoritzeu aquests atributs al 100%. És suficient que aneu coneixent de mica en mica i que sapigueu la mecànica. Amb l'ús continuat us acabareu acostumant. Si li dediques més temps més dominaràs el CSS. Això ja és qüestió de cadascú.

Tanmateix us penjo videotutorials i enllaços a altres webs que són molt interessants.

CSS - Videotutorial - Introducció a CSS - (www.aprende-gratis.com/css)

A classe ja us heu anant familiaritzant amb CSS. No estaria de més que miréssiu aquests videotutorials. Valen la pena.

Introducción

Implementació(El que jo us vaig explicar repecte a "On definir HTML")

Donar format al text.

Una bona manera de començar a entendre els atributs que defineixen els paràmetres del text.

[Podeu continuar veient la resta de video-tutorials a la web següent: clica aquí]

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 >

CSS - 9 - Posicionament

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): ·
<: <
>: >

Links

APUNTS DE HTML i CSS

TEMES

NOTA

Recursos Lingüístics

Arxiu del blog

Subscriu-te a