strambotica creativitat web


Valid XHTML 1.0! Vostè està aquí >>Bàsics: >> Primeres passes per fer una pàgina web
Articles rel·lacionats: Què és CSS - conceptes bàsics
...(introducció als Fulls d'Estil) aspecte visual, presentació i disseny d'una pàgina web ...
Fer llocs compatibles amb els estàndards web
...(disseny amb estàndards) qualsevol document que es publiqui a la web ha de poder funcionar en diferents navegadors, plataformes i dispositius ...
Consideracións inicials i ús de imatges per a la web
Gràfics de mapa de bits, Els formats gràfics i optimització de imatges per a la web.

Primeres passes per fer una pàgina web

1. obrir el bloc de notes o utilitzar un editor de text

2. guardar com arxiu HTML

1. Donar nom al arxiu i extensió HTML (exemple: index.html)
2. Escollir tots els arxius com a tipus de document.

3. introduir estructura bàsica

<html> 
   <head> 
        . . . 
   </head> 
  <body> 
        . . . ordres i text (part visible) . . . 
  </body> 
</html>
L'estructura bàsica i tota l'informació s'introdueix des del bloc de notes i es visualitza amb un navegador obrint el arxiu HTML creat.
Guardar cada vegada que s'introdueix un canvi en el codi font. (bloc de notes).

4. entendre les parts HEAD i BODY

Part HEAD

Part no visible del document.
Part per introduir la informació relacionada, d'autoria i de presentació del document...

Part BODY

Part visible del document.
Part per introduir el contingut del document

5. posar títol al document

<title>Títol del document </title>
Aquesta informació s'imtrodueix a la part HEAD.
Exemple: 
<html> 
   <head>
<title>Títol del document </title> 
 
   </head> 
  <body> 
        . . . ordres i text (part visible) . . . 
  </body> 
</html>
Els motors de cerca identifiquen el document mitjançant aquest títol.
Aquest títol es visualitza a la barra del navegador situada a la part superior de la pantalla.

6. introduir contingut:

Part visible
Aquesta informació s'imtrodueix a la part BODY (cos del document).
HTML ens permet introduir i editar texte, imatges, formularis...
imatges - capçals - enllaços - estructuració del text

7. afegir presentació d'estil al document

Aquesta informació s'imtrodueix a la part HEAD (cap del document).
L'ús del css (cascade style sheets) ens permet controlar la aparença visual del document.

       <style type="text/css"> 
       <!-- 

        --> 
      </style>
color de fons - tipografia - marges

8.Insertar una imatge.


 <img src="logo.jpg" />

9.Escriure un enllaç.

<!-- Exemple d'un enllaç a una altra web (URL absoluta) -->
<a href="http://www.strambotica.com" title="Visita strambotica ">strambotica.com </a>

10.Capçals(Headings)

<h1>capçal de nivell 1</h1>

capçal de nivell 1

<h2>capçal de nivell 2</h2>

capçal de nivell 2

<h3>capçal de nivell 3</h3>

capçal de nivell 3

11.Color de fons.

Incluir dins l'etiqueta style. 

   body {background-color:red; }

12.Tipografia

Incluir dins l'etiqueta style. 

h1 {
font-family:serif;
font-size:24px;
color:blue;
}

13.Marges.

Incluir dins l'etiqueta style. 

body {
margin-left:100px;
margin-right:100px;
margin-top:10px;
margin-bottom:10px;
}

L'estructuració del text.

14.El paràgraf

L'element P representa un paràgraf.

<p> Etiqueta de paràgraf ... </p>
Insereix una línea en blanc abans del texte.

HTML ens permet definir blocs de texte amb característiques definides.

15.Les llistes.

HTML permet uns quants mecanismes per llistes que especifiquen l'informació. Totes les llistes han de contenir un o més elements de llista. Les llistes poden contenir:

La llista prèvia, per exemple, és una llista no ordenada, creada amb l'element UL:

<ul>
<li>Unordered information.</li> 
<li>Ordered information.</li> 
<li>Definitions.</li> 
</ul>

Una llista ordenada, creada utilitzant l'element OL, hauria de contenir informació on l'ordre hauria de ser emfasitzat, com en una recepta:

  1. Informació no ordenada.
  2. Informació ordenada.
  3. Definicions.

La llista prèvia, per exemple, és una llista ordenada, creada amb l'element OL:

<ol>
<li>Unordered information.</li> 
<li>Ordered information.</li> 
<li>Definitions.</li> 
</ol>

Recorda que en els elements de les llistes s'hi pot posar text, imatges, enllaços

16.Concepte d'enllaços interns a la pròpia pàgina

Els enllaços que ens trobem a qualsevol pàgina poden ser de dos tipus: interns a la pròpia pàgina o externs a una altra pàgina.

Els enllaços interns ens permeten accedir a una posició dintre del document HTML.

Podem definir-los creant una marca de destí.

Les marques de destinació en documents del HTML poden ser enllaçades per l'element A (anomenant-lo amb l'atribut id).

<a href="#lligam1">Some background</a>

<h2 id="lligam1">Some background</h2>

L'enllaç pot ser també en un altre arxiu. En tal cas l'arxiu de destinació és carregat i el navegador salta al lloc corresponent dins de l'arxiu, tan aviat com hagi carregat el lloc amb la marca de destí.

http://nomdelatevaweb.com/carpeta/arxiu.html#lligam1

Els noms de marques de destí han de ser únics dins d'un document.