Repàs · Capítol 2. HTML: estructura i text
omple, corregeix i mira què et falla
La nota surt de les 50 preguntes de resposta curta. Les preguntes obertes no puntuen, perquè no es poden corregir soles.
La solució només surt on hagis contestat. El que deixis en blanc es queda en blanc: així no et pots donar les respostes sense pensar-hi.
Posa-hi el nom abans de descarregar el PDF: si no, no se sabrà de qui és.
Practica 2.1
a) Per a cada tros de HTML, digues quina és l'etiqueta d'obertura, quin és el contingut i quants atributs té.
| HTML | Etiqueta d'obertura | Contingut | Quants atributs |
|---|---|---|---|
<h1>Esports</h1> |
|||
<a href="index.html">Portada</a> |
|||
<img src="img/logo.png" alt="Logo"> |
(Comprovació del primer: <h1>Esports</h1> no té cap atribut, perquè dins els angles només hi ha el nom.)
b) Troba l'error de cada línia i escriu-la bé.
| Com està escrita | Com hauria d'estar |
|---|---|
<p>Hola</P> |
|
<img src=img/logo.png alt="Logo"> |
|
<p>Molt <em>important</p></em> |
|
<h2>Esports<h2> |
|
<br></br> |
c) Un company diu: «A mi es veu bé, o sigui que està bé». Per què no és un bon argument?
Practica 2.3
a) Aquesta pàgina té quatre errors. Troba'ls i escriu al costat com s'arreglen.
<html>
<head>
<title>Esports</h1>
</head>
<h1>Resultats de la jornada</h1>
<body>
<p>El Manacor guanya 2 a 1.
</body>
</html>
b) Digues si cada cosa va al <head> o al <body>.
(Comprovació del primer: el títol de la pestanya no es veu dins la pàgina, o sigui que va al <head>.)
| Què és | On va |
|---|---|
| El títol de la pestanya | |
| Un paràgraf de text | |
<meta charset="utf-8"> |
|
| El titular de la notícia | |
| Una imatge |
c) Obres una pàgina i on hauria de dir «El ple va durar tres hores» hi diu «El ple va durar tres hores» amb els accents fets malbé. Quina línia falta, i on va?
Practica 2.4
a) Posa els títols en ordre. Aquesta pàgina d'esports té el titular «Resultats de la jornada», i a dins hi ha dues seccions: «Futbol» i «Bàsquet». Dins «Futbol» hi ha «Primera regional». Quin nivell de títol toca a cadascun?
(Comprovació del primer: «Resultats de la jornada» és de què va la pàgina, o sigui que és el <h1>.)
| Text | Etiqueta |
|---|---|
| Resultats de la jornada | |
| Futbol | |
| Primera regional | |
| Bàsquet |
b) Aquest HTML té dos problemes de títols. Quins són?
<h1>Diari de Manacor</h1> <h1>Esports</h1> <h4>Futbol</h4>
c) Escriu en HTML: un paràgraf que digui «El partit s'ajorna per la pluja», amb les paraules «s'ajorna» destacades com a importants.
Guiat 2.5
Escriu la llista sense ordre de les quatre pàgines del Diari de Manacor: Portada, Qui som, Contacte i Esports. Tens l'obertura i el primer element.
<ul> <li>Portada</li>
Practica 2.6
a) Per a cada cas, digues quina llista faries servir i per què.
(Comprovació del primer: en un menú l'ordre no vol dir res, o sigui que és <ul>.)
| Cas | <ul> o <ol> | Per què |
|---|---|---|
| El menú de seccions del diari | ||
| Els passos per donar-se d'alta | ||
| La classificació de la lliga | ||
| Els ingredients d'una recepta |
b) Troba els dos errors d'aquesta llista.
<ul> <li>Futbol <li>Bàsquet</li> <p>Handbol</p> </ul>
Guiat 2.7
Mira l'arbre de carpetes
Escriu l'etiqueta sencera. Mira l'arbre de carpetes del capítol 1. Tens les dues primeres fetes.
| Des de | Què hi vull | Etiqueta |
|---|---|---|
index.html |
la imatge img/portada.jpg |
<img src="img/portada.jpg" alt="Vista del port"> |
index.html |
un enllaç a qui-som.html |
<a href="qui-som.html">Qui som</a> |
index.html |
un enllaç a noticies/esports.html |
|
noticies/esports.html |
la imatge img/logo.png de l'arrel |
|
noticies/esports.html |
un enllaç a contacte.html |
Practica 2.8
Mira l'arbre de carpetes
a) Troba l'error de cada línia.
(Comprovació del primer: a <img> la ruta va a l'atribut src, no a href.)
| Com està escrita | Què hi falla |
|---|---|
<img href="img/logo.png" alt="Logo"> |
|
<a href="contacte.html"></a> |
|
<img src="img/logo.png"> |
|
<a>Contacte</a> |
|
<img src="img/logo.png" alt="Logo"></img> |
b) Escriu un alt millor per a cadascuna.
| Imatge | alt dolent | alt millor |
|---|---|---|
| L'escut del Manacor | alt="imatge" |
|
| Una foto del port ple de barques | alt="portada.jpg" |
|
| Una ratlla decorativa entre dues seccions | alt="ratlla" |
c) A qui-som.html has escrit <a href="../index.html">Portada</a> i en clicar-hi surt un 404. Mira l'arbre del capítol 1. Què passa i com s'arregla?
Practica 2.10
a) Aquesta pàgina trenca tres de les quatre regles d'accessibilitat. Digues quines i com s'arreglen.
<html lang="en">
<body>
<h1>Diari de Manacor</h1>
<h3>Esports</h3>
<p><a href="noticies/esports.html">Clica aquí</a></p>
</body>
</html>
b) Digues quin element semàntic faries servir per a cada zona.
(Comprovació del primer: el nom del diari i el logotip són la capçalera, o sigui <header>.)
| Zona de la pàgina | Element |
|---|---|
| El nom del diari, a dalt de tot | |
| La llista d'enllaços a les seccions | |
| Una notícia sencera, amb titular i text | |
| L'avís legal, a baix de tot | |
| Un bloc «El temps a Manacor» al costat |
A. Vertader o fals
| Frase | V o F | Per què |
|---|---|---|
El <h1> serveix per fer la lletra més grossa |
||
Una pàgina pot tenir dos <h1> |
||
<img> s'ha de tancar amb </img> |
||
Si premo Enter dins un <p>, al navegador es veu el salt |
||
| Els atributs poden anar a l'etiqueta de tancament | ||
El <title> es veu dins la pàgina |
||
Dins un <ol> els números els posa el navegador |
B. Preguntes curtes
1. Quina diferència hi ha entre una etiqueta i un element?
2. Què passa si t'oblides del <meta charset="utf-8">?
3. Digues les quatre etiquetes buides d'aquest capítol.
4. Per a què serveix l'atribut alt d'una imatge?
5. Escriu els set elements semàntics.
C. Problemes
Mira l'arbre de carpetes
Problema 1. Escriu sencera la pàgina noticies/esports.html. Ha de tenir: el títol de pestanya «Esports · Diari de Manacor», el titular «Esports», una notícia amb el subtítol «El Manacor guanya 2 a 1» i un paràgraf, la foto partit.jpg de noticies/img/ amb un alt que digui què s'hi veu, i un enllaç que torni a la portada. Mira l'arbre del capítol 1 per a les rutes.
Problema 2. Un company t'ensenya aquesta pàgina i et diu que al seu navegador es veu bé. Troba-hi quatre coses mal fetes i digues com s'arreglen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Diari</title>
</head>
<body>
<h1>Diari de Manacor</h1>
<h3>Esports</h3>
<img src="img/partit.jpg">
<p>El Manacor guanya <strong>2 a 1</p></strong>
</body>
</html>
Problema 3. Explica a algú que comença per què alt="imatge" no serveix de res, i posa-li un exemple d'un alt ben escrit.
Problema 4. Tens una pàgina amb el menú a dalt, la notícia al mig, un bloc del temps al costat i l'avís legal a baix. Escriu només l'esquelet, amb els elements semàntics i sense text a dins.