Entitats HTML i CSS

Llenguatges i Estàndards Web - Grau Multimèdia - UOC 2010

Entitats HTML

Element <div>
Element en bloc molt important per al disseny de les nostres pàgines. El seu us està enfocat a englobar més blocs en el seu contigut. Per dir-ho més clar, es un bloc contenidor de blocs, els agrupa i ens facilita molt la tasca de la maquetació.
Element <span>
Element exclusiu per a text. El seu comportament sota estils CSS es bastant diferent a altres elements en línia.
Element <a>
Element en línia que dona propietats de vinculació a parts determinades de la mateixa web (Atribut name) o bé vincles a págines externes, d'altres llocs del món (Atribut href).
Element <dl>
Element en bloc que ens informa que a partir d'aquest punt, la pàgina HTML interpretarà que el següent contingut serà una llista de definicions.
Element <dt>
Títol especificatiu d'una llista de definicions.
Element <dd>
Contingut o cos d'una llista de definicions.
Element <table>
S'utilitza per crear taules dintre d'una estructura HTML. Hi ha que tenir en compte que les especificacions W3C no recomana l'ús d'aquestes taules per maquetar el nostre Web. A més molts atributs d'una taula no passen les regularitzacions que estableix la W3C.
Element <tr>
Fila de cel·les d'una taula.
Element <td>
Cel·la d'una taula.
Element <tt>
Aquest element en línia ens permet escriure en format de lletra Courrier New, o sigui, tipografía de máquina. S'utilitza básicament per diferenciar el texte preformatejat del text normal d'un paràgraf, per exemple. És olt útil utilitzar aquest element per posar exemples de codi font.
Element <pre>
Semblant a <tt> però en aquest cas no estem tractant una línia o una paraula determinada sinó un paràgraf sencer fins que no es tanqui l'element es clar. És molt útil utilitzar aquest element per posar exemples de blocs de codi importants. També suporta tabulacions.
Element <b>
Element en línia que s'utilitza per donar més cos a un text i resaltar-ho.
Element <strong>
Aquest element fa la mateixa funció què <b> però és més correcte utilitzar-ho dintre d'altres elements con llistes, <em> o <blockquote>.
Element <i>
Element en línia que possa en cursiva tot el que estigui comprès entre les seves etiquetes.
Element <br>
Salt de linea simple dintre d'una pàgina web HTML.

Entitats CSS

Entitats CSS per al cos del Web general

html, body {
  background-color:#838383;
  margin:0px;
  padding:0px;
  border:0px;
  font: normal 0.756em Tahoma; 
  color:#666;
  background-image:url(img/titulo.jpg);
  background-position:center top;
  background-repeat:no-repeat;
}

Aquest estil s'utilitza per els elements <html> i <body> i tenen les següents propietats:


  a:link, a:visited {color:#888; text-decoration:none; font-variant:small-caps}
  a:hover {color:rgb(30,144,255); text-decoration:none; font-variant:small-caps}

Aquest estil s'utilitza per els elements <a> i <span> en uns casos molt específics.


pre, tt {
  font-size:1.2em;
  color:#444;
}

Aquest estil s'utilitza per als elements <pre> i <tt> de tot el Web.


dt {
  font-weight:bold;
  color:#666;
}

Aquest estil s'utilitza per a l'element <dt> d'una llista de definicions.


Entitats CSS - Classes

Mitjançant l'atribut class podem donar als elements unes propietats específiques previament desenvolupades en un full d'estils CSS o al mateix document HTML.

.txtem {
  padding:10px;
  border: 1px solid #CCC;
  background-color:#FFF;
}

L'element que utilitzi aquest estil veurà:


.llista_detall {
  list-style:square;
}

L'element que utilitzi aquest estil veurà:


.taula {
  border-top:2px solid #0066FF;
  border-bottom:2px solid #0066FF;
  width:300px;
  padding:10px;
  font-weight:bold;
  text-align:center;
}

L'element que utilitzi aquest estil veurà:


.taula2 {
	width:650px;
	padding-left:100px;
}

L'element que utilitzi aquest estil veurà:


.div_links {
	width:130px;
	text-align:left;
	font-size:0.936em;
	float:left;
	padding:5px;
}

L'element que utilitzi aquest estil veurà:


p.div_links {
	text-align:center;
	font-weight:bold;
}

Llista d'atributs que s'utlitzarà en un element <p> dintre de la classe div_links i què tindrà les següents característiques:


.div_gral {
  margin-top:75px;
  border:1px solid  #7F7F7F;
  padding:0 20px 10px 20px;
}

L'element que utilitzi aquest estil veurà:


.title {
	background-image:url("img/barra_secciones1.jpg");
	background-repeat:no-repeat;
	background-position:top left;
	height:30px;
	color:#FFF;
	font-size:1.436em;
	text-indent:10px;
	font-variant:small-caps;
	font-weight:bold;
	padding-top:3px;
}

L'element que utilitzi aquest estil veurà:


Entitats CSS - Identificadors

Els identificadors son semblants a les classes. La diferencia bàsica és què un identificador no es pot repetir a diverses declaracions id ="". Aquests elements son únics.

Identificador container
#container {
  width:950px;
  margin:auto;
  border:none;
  margin:none;
}

Dintre d'aquest element <div> està tot el contingut del Web

Identificador menu
#menu {
  float:left;
  width:178px;
  height:160px;
  padding:0 10px 0px 10px;
  background-color:#293e69;
  text-indent:-10px;
  font-variant:small-caps;
}

Dintre d'aquest element <div> està tot el contingut del menú de navegació del Web.


#menu h3 {
  font-size:1.536em;
  color:#FFF;
  border-left:10px solid #4263a7;
  border-bottom:1px solid #4263a7;
  text-indent:5px;
}

Dintre de l'identificador menu s'aplicarà un estil concret per l'element <h3>.


#menu p {
  font-size:1.236em;
  text-indent:0px;
  border-bottom:1px solid #1e2d4d;
}

Dintre de l'identificador menu s'aplicarà un estil concret per l'element <p>.

Identificador content
#content {
	float:right;
	width:708px;
	background-color:#EEE;
	font-size:1.436em;
	margin-bottom:50px;
	padding-bottom:25px;
	background-image:url("img/fondo_div_content.png");
	background-position:top;
	background-repeat:no-repeat;
	text-align:justify;
}

Dintre d'aquest element <div> està tota la informació de les pàgines Web que consta aquest site.


#content h1 {
  font-size:3.7em;
  text-align:right;
  color:#CCC;
  letter-spacing:-.036em;
  font-variant:small-caps;
}

Dintre de l'identificador content s'aplicarà un estil concret per l'element <h1>.


#content h2 {
  margin:-30px 0 50px 0;
  font-size:1.236em;
  text-align:right;
  color: #777;
  border-bottom:1px solid #CCC;
}

Dintre de l'identificador content s'aplicarà un estil concret per l'element <h2>.


#content h3 {
	font-size:1.2em;
	font-variant:small-caps;
	text-align:left;
	color:#333;
	border-bottom:1px solid #666;
}

Dintre de l'identificador content s'aplicarà un estil concret per l'element <h3>. Es semblant a <h2> pero hi han atributs que el diferencien:


#content h4 {
	font-size:1em;
	font-variant:small-caps;
	text-align:left;
	color: #4263a7;
}

Dintre de l'identificador content s'aplicarà un estil concret per l'element <h4>.


Tornar a l'inici del Web