Diferència entre revisions de la pàgina «HTML estructura del document»

De Cacauet Wiki
Salta a la navegació Salta a la cerca
Línia 63: Línia 63:
  
 
Exemple:
 
Exemple:
<syntaxhightlight lang="">
+
<syntaxhighlight lang="xml">
 +
<DIV id="seccio1">
 +
    <h2>Secció 1 del document</h2>
 +
    <p>...</p>
 +
</DIV>
 +
<DIV id="seccio2">
 +
    <h2>Secció 2 del document</h2>
 +
    <p>Aquesta secció podria tractar sobre <SPAN id="negreta">com posar en negreta</SPAN> un text.</p>
 +
</DIV>
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
<br>
  
 
== CSS i el ''Box Model'' ==
 
== CSS i el ''Box Model'' ==

Revisió del 23:32, 24 feb 2015

Introducció

HTML significa HyperText Markup Language, i és un estàndard per la navegació per la web d'internet desenvolupat pel W3C (WWW Consortium).

Es pot concebre com una extensió del genèric XML (eXtensible Markup Language), tot i que es va inventar abans. Es tracta d'un seguit de contenidors que es delimiten amb TAGs d'obertura i de tancament:

<contenidor1>
    <!-- això és un comentari -->
    <contenidor2>
        <p>Un paràgraf de text</p>
    </contenidor2>
</contenidor1>

Aquests arxius poden tenir l'extensió .htm o .html

Si voleu saber molt més us recomano aquesta pàgina: http://www.dense13.com/wec/curscss/toc.php


HTML 4

Un document HTML 4 (ara ja obsolet però encara present) sol estar estructurat de la següent manera:

<html>
    <head>
        <!-- al head solen anar metadades diverses i paràmetres generals -->
        <title>La meva pàgina personal</title>
    </head>

    <!-- al body hi ha els continguts -->
    <body>
        <!-- la h1,h2, etc. venen de "heading" encapçalement) -->
        <h1>La meva pàgina personal</h1>
        <p>Benvinguts al món HTML</p>
        <!-- subseccions -->
        <h2>Biografia</h2>
        <p>...</p>
        <h2>Aficions</h2>
        <!-- amb ul fem una llista on cada ítem és li -->
        <ul>
             <li>Pescar</li>
             <li>Tocar la guitarra</li>
             <!-- al següent exemple tens un enllaç (A = "anchor") dintre del LI -->
             <li>Mirar vídeos al <a href="http://www.youtube.com">You Tube</a><li>
             <li>...</li>
        </ul>
    </body>
</html>

EXERCICI: utilitza aquesta estructura del document i fes la teva pàgina personal "a mà", amb al menys 4 subseccions.

ATENCIÓ: busca per internet la manera d'aconseguir que surtin bé els accents. Hi ha diverses formes de fer-ho, però es recomana que busquis el codi "meta" per establir el joc de caràcters UTF-8.


Caixes i caixetes

En l'anterior exemple ja has pogut veure diversos codis dels elements més comuns. Hi ha alguns més que pots anar investigant, però els més importants a partir d'ara son les divisions (DIV) del document.

  • Un DIV no és més que una divisió del document per establir límits en els continguts. Venen a ser caixes que poden tenir altres caixes. En principi té un comportament de bloc, és a dir, ocupa tota l'amplada del document.
  • Un SPAN és similar a un DIV, només que el seu comportament és inline, és a dir, no ocupa tota una línia, sinó que ens permet establir divisions dintre d'un mateix paràgraf.

Exemple:

<DIV id="seccio1">
    <h2>Secció 1 del document</h2>
    <p>...</p>
</DIV>
<DIV id="seccio2">
    <h2>Secció 2 del document</h2>
    <p>Aquesta secció podria tractar sobre <SPAN id="negreta">com posar en negreta</SPAN> un text.</p>
</DIV>


CSS i el Box Model


HTML 5

La darrera versió d'HTML és la 5 (a data de Febrer de 2015). Introdueix diverses innovacions tècniques, sobretot associat a CSS