Començant amb HTML

Correu electrònic Imprimeix PDF

Per començar a practicar el llenguatge HTML i construir una pàgina web n'hi ha prou amb un editor de fitxers de text (bloc de notes, write,...) i amb un programa navegador (Explorer, Mozilla,Opera,...).

S'utilitza l'editor de text per escriure el codi font del document i un programa navegador per veure'n el resultat.

Cal tenir en compte que el servidor web on allotjarem la pàgina web distingeix entre majúscules i minúscules.
És necessari escriure els noms dels diferents fitxers que s'inclouen a les pàgines (imatges, gràfics, sons, ...) i els noms dels fitxers HTML en minúscules, sense caracters especials (accents, ç, ...) i sense espais.

Els documents o fitxers d'HTML es guarden amb les extensions .html o .htm.

Generalment, el primer fitxer d'un lloc web rep el nom de index.htm o index.html.

Existeixen una sèrie de programes dissenyats especialment per a la construcció de pàgines web que permeten la construcció de la pàgina introduint el codi font manualment mitjançant un editor o utilitzant una sèrie d'eines de disseny que generen el codi font automàticament. A més a més, incorporen la possibilitat de la vista prèvia. Aquests programes són fantàstics només quan ets capaç d'entendre i controlar tot el codi font que s'està generant automàticament.

Per aquest motiu, començarem estudiant i creant el codi HTML nosaltres mateixos.



  • L'HTML o Hyper Text Markup Language (Llenguatge Marcador d'HiperText) permet, mitjançant una sèrie de marques que les anomenarem etiquetes, crear documents per a presentar (mostrar) informació a la web.
  • L'HTML utilitza etiquetes (tags):
<ETIQUETA atributs> contingut </ETIQUETA>
  • Quan visualitzem un document d'HTML(una pàgina web) amb un programa navegador, no podem veure les etiquetes que el componen. Per fer-ho necessitem visualitzar el codi font del document.
  • Tot el contingut que hi ha entre dues etiquetes estarà influenciat per elles.
  • El programa navegador interpreta les etiquetes i mostra el contingut. Cada programa navegador té certa llibertat en el procés de donar la forma al contingut i per tant, un mateix document d'HTML podrà tenir un aspecte diferent segons el programa navegador amb el que l'estiguem visualitzant.
  • Hi ha llibertat per escriure les etiquetes en majúscules i/o en minúscules. Per facilitar l'edició/visualització del codi font, convé utilitzar sempre un mateix format pel codi en tots els documents d'HTML del web.
Per exemple, escriure sempre el nom de l'etiqueta en majúscules i els atributs i els seus valors en minúscules: <ETIQUETA atribut1="valor" atribut2="valor"></ETIQUETA>.
  • La <ETIQUETA> és una etiqueta d'obertura i la </ETIQUETA> és una etiqueta de tancament.
    No sempre existeix una etiqueta de tancament i, en alguns casos, la </ETIQUETA> no és necessària.
  • Existeixen alguns atributs comuns a la majoria de les etiquetes i existeixen també atributs que són específics d'una etiqueta determinada. Durant la creació dels documents, introduirem només l'atribut o atributs vàlids per a cada etiqueta i introduirem només l'atribut o atributs que siguin necessaris per aconseguir l'aspecte o el funcionament desitjat.
  • Un document d'HTML té una estructura que sempre cal respectar. Per marcar aquesta estructura s'utilitzen unes etiquetes específiques:

    El document d'HTML s'escriu sempre entre aquestes dues etiquetes:

    <HTML> document </HTML>

    El document es divideix sempre en dues parts:
    • La capçalera:
      <HEAD> ... </HEAD>
      La capçalera conté informació del document: el seu títol, quin tipus de document és, en quina llengua està escrit, quines són les paraules claus, una breu descripció del seu contingut,... La informació que hi ha dins de la capçalera del document és utilitzada pel programa navegador, pels cercadors de pàgines web...
    • El cos:
      <BODY> ... </BODY>
      Dins del cos del document hi introduïrem i compaginarem tot allò que es vol mostrar a la pàgina web: textos, imatges, gràfics, formularis,... mitjançant les etiquetes necessàries i els seus atributs.

    L'estructura bàsica d'un document d'HTML queda de la següent manera:

  • <HTML>
    <HEAD>
    . . .
    </HEAD>
    <BODY>
    . . . (part visible del document en el navegador) . . .
    </BODY>
    </HTML>


  • Dins de cada part hi corresponen unes etiquetes diferents:
    • La capçalera conté tota la informació sobre el document:
      • El títol
      • fulls d'estil (CSS)
      • ...
    • En el cos del document hi ha tot el contingut de la pàgina web:
      • text:
        • caràcters especials
        • espais
        • salts de línia
        • paràgrafs
        • textos preformats
        • capçaleres
        • estil del text: negreta, cursiva, ...
      • llistes: no ordenades, ordenades, de definicions
      • línies horitzontals
      • imatges o gràfics
      • enllaços
      • taules
      • formularis
      • elements multimèdia

Les diferents etiquetes permeten introduir cada un d'aquests elements a la pàgina web, i els diferents atributs de cada una de les etiquetes permeten donar la forma desitjada: només s'han d'introduir els atributs necessaris en cada cas.

 

Escriure un comentari


Códi de seguretat
Actualitzar


Més Llegit...

Ultimes Noticies

mod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_counter
mod_vvisit_counterAvui29
mod_vvisit_counterAhir144
mod_vvisit_counterAquesta setmana369
mod_vvisit_counterÚltima setmana683
mod_vvisit_counterAquest mes2040
mod_vvisit_counterÚltim mes3205
mod_vvisit_counterTotal349046