Diferència entre revisions de la pàgina «HTML estructura del document»
(→HTML 4) |
|||
| Línia 55: | Línia 55: | ||
=== Caixes i caixetes === | === Caixes i caixetes === | ||
| − | En l'anterior exemple ja has pogut veure diversos codis | + | 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: | ||
| + | <syntaxhightlight lang=""> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | |||
| + | == CSS i el ''Box Model'' == | ||
| + | |||
<br> | <br> | ||
Revisió del 23:28, 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
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: <syntaxhightlight lang=""> </syntaxhighlight>
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
