Estructura de les pàgines Web

Site menu:

Introducció Capçalera. HEAD Cos. BODY Errors més comuns

Cos. BODY

BODY. Aquí hi trobarem etiquetes que ens permeten modificar la presentació de la informació que volem presentar, el que es veurà al browser i que al cap hi ha la fi serà el que volem transmetre ja sigui en forma de text, imatge, o el que ens permeti els nostres coneixements.

 

Dins del BODY, s'hi inclouen multitud d'etiquetes, entre les quals destaco les que influeixen sobre el text, que és on principalment es troba el contingut, i per això el que té més importància d'una pàgina. La informació.

          

<BR> Aquesta no necessita tancar-se i produeix un salt de línia.

<P> Aquesta tampoc necessita tancar-se i produeix un salt de paràgraf. Però s'ha de tancar si s'afegeix un atribut.
Pot tenir l'atribut:

Aling=

Exemple:

 

<DIV> </DIV>Aquesta etiqueta produeix un salt de línia també, però a diferencia del <BR> s'hi pot afegir l'atribut aling, com a l'etiqueta <P>

 

<Hn> </Hn> Aquesta etiqueta ressalta els encapçalaments. La n són els nombres que poden anar del 1 al 6 i determinen la grandària del encapçalament.

Exemples:

• Encapçalament 1

• Encapçalament 2

• Encapçalament 3

• Encapçalament 4

• Encapçalament 5

• Encapçalament 6

Codi:

 

 

<FONT> </FONT> Ens marca com serà el text (la font).

Té atributs com:

SIZE: marca la grandària.

FACE: el nom del tipus de lletra.

COLOR: el color. Per saber-ne més sobre els colors utilitzats a l'hora de construir pàgines Web: http://www.aulaclic.es/html/b_2_2_1.htm (en castellà)

 

D'altres etiquetes (TAGS) que es poden posar entre <FONT> i </FONT> són:

<B> </B> que ens escriu el text que hi hagi entre mig amb negreta.

<I> </I> que ens escriu el text que hi hagi entre mig amb itàlica o cursiva.

<U> </U> que ens escriu el text que hi hagi entre mig, subrallat.

<S> </S> que ens escriu el text que hi hagi entre mig, tatxat .

<SUB></SUB> que ens escriu el text que hi hagi entre mig com a subíndex.

<SUP></SUP> que ens escriu el text que hi hagi entre mig com a superíndex.

Exemple:
Text en negreta. Text en cursiva. Text subrallat.Text tatxat. _{text subindext}. ^{Text superindex}.

Codi:

 

<HR> No necessita tancar-se i ens introdueix una línia de separació al document.

Pot tenir els atributs WIDTH: la llargada, SIZE: la altura o el gruix. ALING: l'alineació, COLOR: color; i NOSHADE que ens dibuixa una línia d'un color girs i amb relleu.

Exemple:

---

Codi

 

Inserir una imatge:
Aquesta és una de les accions més comuns en les Webs i per inserir una imatge s'usa el TAG:
<IMG>
Que té els atributs src, en el qual hem d'indicar la direcció on es troba l'imatge, i ALT que em de posar un commentari de text o petita descripció de l'imatge perquè en el cas de que no es pugués cargar l'imatge, aquest text la substituiria.

Tot i aquests atributs, el TAG <IMG> també en té d'altres com, height, widht, border, align, entre d'altres.

Exemple:

Codi:

 

I finalment una de les parts més important en el codi HTML, que són els vincles, que són els enllaços a d'altres Webs, archius i d'aquesta manera s'uneix el conjunt d'una Web.

Per inserir un vincle s'utilitza el TAG: <A> </A>
Aquesta etiqueta és probablement la més utilitzada. Els atribts més importants, entre d'altres són:

HREF: aquest és el que ens porta a la Web, archiu, imatge que volem vinclar.

TARGET: finestra en la que s'obrirà l'enllaç. Pot ser:
_blank: els enllaços s'obren en una finestra nova.
_top: els enllaços s'obren a la finestra actual, ocupant tota aquesta i substituint a al pàgina de declaració de marcs (frames).
_self: els enllaços s'obriran a la mateixa finestra o marc que està el enllaç. És el valor per defecte, en que està actiu si no indiquem el atribut TARGET.
_ parent: els enllaços s'obren a la finestra o marc pare de la que conté el enllaç.
nom_finestra: si especifiquem el nom d'un marc (frame) o finestra existent, en aquesta s'obriran les pàgines contingudes als enllaços.

TITLE: que ens especifíca una aclaració o comentari de l'enllaç.

Exemple:
Enllaç a l'apartat d'Accessibilitat Web

Codi:

 

A continuació hi ha un exemple on s'ha aplicat tot el que podem aplicar a un document HTML amb tot el que he explicat fins al moment: Per veure'n el resultat segueix l'enllaç: prova.htm

Etiquetes BODY:

Introducció al BODYPrincipals TAGS en el BODY LListesTaules

Més informació BODY:

Cos d'un document en castellà, traduit de la W3CCos. BODY d'un document (castellà)Manual d'HTML en català apartat BODYLlista de les principals etiquetes HTML (castellà)The BODY Tags per la W3schools (anglès)Tots els TAGS HTMLTots els atributs HTML

Més informació HTML:

W3 Global Estructure of HTMLW3 Estructura global del HTMLTutorial HMTL per www.entraenlared.comAulaclic curs HTMLGuía per escriure documents HTMLHTML per principiants Valid XHTMLValid CSS

I...unes paraules:

"BODY: part en la qual inserirem la informació que volem presentar en pantalla a la nostra Web, modificada amb codi al nostre gust"
Jordi Capdevila

I... recomanació:

Blog d'HTML, amb anlglès:HTML Begginer. Començant a aprendre HTML

Dreamweaver editor, un tutorial per saber millor com funciona un editor visual de creació de pàgines Web. El més usat al món: Dreamweaver de Macromedia:Macromedia Dreamweaver understanding basic HTML

Avís Legal. Copyright © 2006 Jordi Capdevila Espitia. Dissenyat per Jordi Capdevila Espitia. Inspirat en Andreas Viklund.