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

De Cacauet Wiki
Salta a la navegació Salta a la cerca
 
(Hi ha 10 revisions intermèdies del mateix usuari que no es mostren)
Línia 43: Línia 43:
 
             <li>Tocar la guitarra</li>
 
             <li>Tocar la guitarra</li>
 
             <!-- al següent exemple tens un enllaç (A = "anchor") dintre del 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>Mirar vídeos al <a href="http://www.youtube.com">You Tube</a></li>
 
             <li>...</li>
 
             <li>...</li>
 
         </ul>
 
         </ul>
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>
 +
    <!-- fixeu-vos que el salt de línia no apareix en el navegador -->
 +
</DIV>
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
Si poseu aquest exemple en pràctica veureu que la lletra de dins del SPAN no és negreta. Per poder-ho fer necessitem conèixer una mica sobre CSS.
 +
 +
<br>
  
 
== CSS i el ''Box Model'' ==
 
== CSS i el ''Box Model'' ==
 +
Llegeix això sobre el [[CSS box model]].
 +
(Et serà imprescindible per seguir)
 +
 +
També et pot convenir llegir sobre [[CSS selectors]].
  
 +
...i si et veus valent pots revisar la secció [[CSS posicionament]], hi ha exercicis més complicats.
  
 
<br>
 
<br>
  
−
== HTML 5 ==
+
== HTML5 i CSS3 ==
−
La darrera versió d'HTML és la 5 (a data de Febrer de 2015). Introdueix diverses innovacions tècniques, sobretot associat a CSS
+
La darrera versió d'HTML és la 5 (a data de Febrer de 2015). Introdueix diverses innovacions tècniques, sobretot associat al CSS3 i a JavaScript, el llenguatge de ''scripting'' estàndard en els navegadors moderns. El JavaScript ens permetrà programar aplicacions sobre el navegador i crear continguts rics i amb funcionalitat.
 +
 
 +
Per no entrar en massa detalls tècnics, la innovació més important des del punt de vista de l'HTML és que podem crear "caixes" (o DIVs) amb el nom que vulguem. Ara ja no cal fer un DIV sinó que podem dir-li com vulguem (sempre respectant els blocs bàsics HTML, HEAD i BODY). Per exemple: "cap", "contingut", "menu" i "peu".
 +
 
 +
<syntaxhighlight lang="xml">
 +
<html>
 +
    <head>
 +
        <style>
 +
            ...els estils CSS que vulguem...
 +
        </style>
 +
    </head>
 +
    <body>
 +
        <cap>...</cap>
 +
        <menu>...</menu>
 +
        <contingut>...</contingut>
 +
        <peu>...</peu>
 +
    </body>
 +
</html>
 +
</syntaxhighlight>
 +
 
 +
En CSS ens podrem adreçar a ells amb:
 +
<syntaxhighlight lang="css">
 +
body {
 +
    width: 600px;
 +
    margin: 0 auto; /* per centrar */
 +
}
 +
cap {
 +
    background-color: blue;
 +
}
 +
menu {
 +
    /* format RGB hexadecimal (2 nombres per cada color) */
 +
    color: #9A3E12;
 +
}
 +
contingut {
 +
    font-size: 10px;
 +
}
 +
</syntaxhighlight>
 +
 
 +
Un exemple de les innovacions en CSS3 son l'arrodoniment de les cantonades de les taules o blocs. Abans calia fer coses com aquesta per aconseguir-ho: [[HTML taules arrodonides]]. Ara resulta molt més fàcil, només cal afegir la instrucció border-radius al CSS amb el radi en píxels de la cantonada.
 +
 
 +
<syntaxhighlight lang="css">
 +
menu {
 +
    background-color: yellow;
 +
    border-radius: 10px;
 +
}
 +
</syntaxhighlight>
  
 
<br>
 
<br>

Revisió de 08:22, 25 feb 2015

Introducció[modifica]

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[modifica]

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[modifica]

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>
    <!-- fixeu-vos que el salt de línia no apareix en el navegador -->
</DIV>

Si poseu aquest exemple en pràctica veureu que la lletra de dins del SPAN no és negreta. Per poder-ho fer necessitem conèixer una mica sobre CSS.


CSS i el Box Model[modifica]

Llegeix això sobre el CSS box model. (Et serà imprescindible per seguir)

També et pot convenir llegir sobre CSS selectors.

...i si et veus valent pots revisar la secció CSS posicionament, hi ha exercicis més complicats.


HTML5 i CSS3[modifica]

La darrera versió d'HTML és la 5 (a data de Febrer de 2015). Introdueix diverses innovacions tècniques, sobretot associat al CSS3 i a JavaScript, el llenguatge de scripting estàndard en els navegadors moderns. El JavaScript ens permetrà programar aplicacions sobre el navegador i crear continguts rics i amb funcionalitat.

Per no entrar en massa detalls tècnics, la innovació més important des del punt de vista de l'HTML és que podem crear "caixes" (o DIVs) amb el nom que vulguem. Ara ja no cal fer un DIV sinó que podem dir-li com vulguem (sempre respectant els blocs bàsics HTML, HEAD i BODY). Per exemple: "cap", "contingut", "menu" i "peu". 

<html>
    <head>
        <style>
            ...els estils CSS que vulguem...
        </style>
    </head>
    <body>
        <cap>...</cap>
        <menu>...</menu>
        <contingut>...</contingut>
        <peu>...</peu>
    </body>
</html>

En CSS ens podrem adreçar a ells amb: 

body {
    width: 600px;
    margin: 0 auto; /* per centrar */
}
cap {
    background-color: blue;
}
menu {
    /* format RGB hexadecimal (2 nombres per cada color) */
    color: #9A3E12;
}
contingut {
    font-size: 10px;
}

Un exemple de les innovacions en CSS3 son l'arrodoniment de les cantonades de les taules o blocs. Abans calia fer coses com aquesta per aconseguir-ho: HTML taules arrodonides. Ara resulta molt més fàcil, només cal afegir la instrucció border-radius al CSS amb el radi en píxels de la cantonada. 

menu {
    background-color: yellow;
    border-radius: 10px;
}


Obtingut de «https://cacauet.org/wiki/index.php?title=HTML_estructura_del_document&oldid=2596»