MANUAL D'HTML DWC

LLIÇÓ NÚMERO 1 -elemental-

Comencem per explicar que un document html (HyperText Markup Language) està compost per etiquetes (tags en anglès), aquestes etiquetes o tags, defineixen el comportament del text.
Així doncs, cada text té un inici i un final, per això, les etiquetes tenen també la seva forma d'acabar.
<HTML>    Aquesta etiqueta és la més important, doncs defineix que tot l'escrit comprès entre ella i la seva final es comporti com a document html.
</HTML>    És la etiqueta que correspon al tancament de l'anterior.
Fixem-nos que la única diferència entre les dues és la de la barra inclinada    /   , que defineix el tancament de la etqueta.

Dins el document html (entre les etiquetes <HTML> i</HTML>) hi trobem dues parts diferenciades:

  1. L'encapçalament
  2. El cos


1. L'encapçalament -HEADer-
Etiqueta: <HEAD> i </HEAD>

Dins aquestes etiquetes trobarem informació de la pàgina, com per exemple el títol, l'autor, paraules claus perque la pàgina sigui trobada fàcilment per un buscador, idioma, descripció de la pàgina, scripts d'altres llenguatges de programació compatibles, etc.

La part més important és el: Títol -TITLE-
Etiqueta: <TITLE> i </TITLE>

Hi escriurem un títol breu i descriptiu que serà el que es veurà quan es posi en un Bookmark o a la barra de feines de windows, a la finestra corresponent al navegador.
De moment deixarem aquí les etiquetes de l'encapçalament, ja les veurem més endavant, així que ja podrem tancar la seva etiqueta.

Exemple del codi:
<html>
<head>
<title>La pagina de DWC</title>
</head>
...
</html>

2. El cos -BODY-
Etiqueta: <BODY> i </BODY>

S'ha de posar després de tancar la etiqueta d' encapçalament:
<html>
<head>
<title>La pagina de DWC</title>
</head>
<body>
...
</body>
</html>
En el cos hi trobem tot el que serà mostrat en el navegador.

A partir de la etiqueta d'inici ja podriem escriure, però al visualitzar-ho al navegador,  observaríem que no s'han respectat els punts a part, ni els paràgrafs, ni tabuladors, doncs es necessiten unes etiquetes per aquests propòsits:
 

Etiqueta: <BR>  No té etiqueta final, bé, sí, però no cal (jo tan sols l'he utilitzat quan ja no sabia què fer perquè em cregués el text).
Aquesta etiqueta ens fa saltar a la següent línea.



Codi:

<html>
<head>
<title>La pagina de DWC</title>
</head>
<body>

Nosaltres escrivim el que volguem , i encara.
Que apretem Return o Intro, el text no variara a la pantalla.
O sigui que haurem de posar la etiqueta corresponent.
<br>Si posem aquesta etiqueta si que farem el punt i a part.

<br>Un altre

</body>
</html>



Resultat:
Nosaltres escrivim el que volguem, i encara.Que apretem Return o Intro, el text no variara a la pantalla.O sigui que haurem de posar la etiqueta corresponent.
Si posem aquesta etiqueta si que farem el punt i a part.
Un altre

Etiqueta: <P>  No té etiqueta final, bé, sí, però no cal (jo tan sols l'he utilitzat quan ja no sabia què fer perquè em cregués el text).
Ens introdueix una línea en blanc


Codi:
<html>
<head>
<title>La pagina de DWC</title>
</head>
<body>

Nosaltres escrivim el que volguem , i encara.
Que apretem Return o Intro, el text no variara a la pantalla.
<br>Si posem aquesta etiqueta si que farem el punt i a part.
<br>Un altre

<p> Ara comencem un nou paragraf.
<p>Observeu que el que fa es deixar una linea en blanc

</body>
</html>



Resultat:
Nosaltres escrivim el que volguem, i encara.Que apretem Return o Intro, el text no variara a la pantalla.
Si posem aquesta etiqueta si que farem el punt i a part.
Un altre

Ara comencem un nou paragraf.

Observeu que el que fa es deixar una linea en blanc.


Etiqueta: <B> i </B>
El text que sigui situat entremig, es veurà amb negreta.


Codi:
<html>
<head>
<title>La pagina de DWC</title>
</head>
<body>
Anem escrivint i <b>posant amb negreta</b>.
<br>Si posem aquesta <b>etiqueta</b> si que farem el <b>punt i a part.</b>
<p> Ara comencem un nou <b>paragraf</b>.
</body>
</html>


Resultat:
Anem escrivint i posant amb negreta.
Si posem aquesta etiqueta si que farem el punt i a part.

Ara comencem un nou paragraf.


Etiqueta: <I> i </I>

Modificarem el text inclinant-lo.

Codi:
<html>
<head>
<title>La pagina de DWC</title>
</head>
<body>
Anem escrivint i <i>posant inclinades</i>.
<br>Si posem aquesta <b><i>etiqueta</i></b> si que farem el <i><b>punt i a part.</b></i>
<p> Ara comencem un nou <i>paragraf</i>.
</body>
</html>



Resultat:
Anem escrivint i posant inclinades.
Si posem aquesta etiqueta si que farem el punt i a part.

Ara comencem un nou paragraf.


Etiqeta: <H1> i </H1>

Aquestes etiquetes posen en negreta i augmenten el tamany del text, al tancar la etiqueta fan un punt i a part. Jo he posat <h1></h1>, però el numero pot anar de l'1 al 6, representant el tamany del text i sent el número 1 el més gran, i el número 4 el corresponent al tamany normal.



Codi:
<html>
<head>
<title>La pagina de DWC</title>
</head>
<body>
<h1>Capçalera amb el numero 1</h1><h2>Capçalera amb el numero 2</h2>
<h3>Capçalera amb el numero 3</h3>
<h4>Capçalera amb el numero 4</h4>

Anem escrivint i <b>posant amb negreta</b>.

<h5>Capçalera amb el numero 5</h5>
<h6>Capçalera amb el numero 6</h6>
</body>
</html>



Resultat:

Capçalera amb el numero 1

Capçalera amb el numero 2

Capçalera amb el numero 3

Capçalera amb el numero 4


Anem escrivint i posant amb negreta
 

Capçalera amb el numero 5
Capçalera amb el numero 6

Etiqueta: <HR>
Aquesta és una etiqueta molt funcional, el que fà és posar una línea, com la que veiem a dalt, per separar els encapçalaments, d'aquesta etiqueta. Més endavant veurem com es modifiquen les seves característiques.


Codi:
<html>
<head>
<title>La pagina de DWC</title>
</head>
<body>
Ara veurem 5 linies horitzontals
<hr><hr><hr>
<hr>
<hr>
I ara 3 més
<hr>
<hr>
<hr>
Que hus semblen
</body>
</html>


Resultat:
Ara veurem 5 linies horitzontals






I ara 3 més




Que hus semblen

De moment ja sabem com fer per a que ens cregui una mica el text, però encara ens falten hyperenllaços, imatges, tipus de lletra, taules, i moltes coses més. Espero que aprengueu coses molt interessant a la propera lliçó.