Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas

LLENGUATGES I ESTÀNDARS WEB - PROVA D’AVALUACIÓ CONTINUADA 1

PAQUITA RIBAS TUR

1 - (5 punts) Quines versions d'HTML, XHTML i CSS hem d'usar a les nostres pàgines
web?

- HTML 4.01
- XHTML 1.0
- CSS 2.1

2 - (10 punts) Enumera les diferents formes d'usar CSS en una pàgina web. Per què
és, en general, una pràctica dolenta embeure els estils dins de l'HTML? Se t'acut
algun cas en el qual pugui ser una bona idea?
- Es poden posar els estils directament dins del document HTML, amb l’atribut
style i els estils entre cometes i separats per punt i coma. Són els estils en
línia i actuen només sobre l’element etiquetat. S’apliquen, per exemple als
paràgrafs, a una frase en concret, etc, i sempre dins de les etiquetes.
- Dins del <head> de la web i amb l’atribut style.
- Es pot donar estils a una web amb una fulla d’estils CSS externa.
La forma més idònia és donar estils a una web mitjançant una fulla d’estils CSS
externa, pels següents motius:
- Es pot canviar, només amb unes quantes línies les característiques de
qualsevol element . Per exemple, canviar el interlineat en tots els paràgrafs, o
el color de la tipografia en els títols, etc.
h2 {
padding: 0 10px;
color: #000;
font-family: Georgia;
background: #EEBC0C;
}
- En l’HTML podem posar a un element un atribut id o class, de manera que
el la fulla d’estil podem assignar-li característiques especials a aquesta id o
a aquesta classe. Per exemple:
HTML:
<div id="menu">
<a href="index.html">HOME</a>
<a href="curriculum.html">CURRICULUM</a>
<a href="criterios_usabilidad.html">CRITERIS</a>
<a href="enllaços.html">ENLLAÇOS</a>
<a href="explicacions.html">EXPLICACIONS</a>
</div>

CSS:
#menu {
margin: 0;
padding: 0;
background: #FFF;
float:left; margin-right:10px; width:190px;
}

- Si volem canviar un color, els espais, etc, ho farem des de la fulla d’estils
importada, canviarem unes poques paraules i automàticament ho canviarà a
tota la web.
- Es pot aplicar una fulla d’estils a tots els documents d’HTML i unificar així tota
la web.

És una bona idea posar els estils dins de l’HTML , en línia, quan volem obligar als
navegadors a utilitzar aquest estils sobre els que pugui haver en una fulla CSS
externa.

3 - (5 punts) Quins elements poden aparèixer dins de l'element <head>?
- Títol del document
<title>Títol del document</title>

- Senyalar el tipus de contingut
<meta http-equiv="Content-Type"
content="text/html;charset=windows-1252">

- Descripció del document
<meta name="description" content="Descripció de la
pàgina web">

- Paraules clau
<meta name="keywords" content="pac,uoc,html">

- Afegir estils o vincular fulla d’estils CSS externa
- Afegir els scrips

4 - (10 punts) Quines diferències hi ha entre una classe i una id?

- id defineix un element únic, només es pot tenir un id per pàgina i class es
pot aplicar a molts elements.
- id es pot utilitzar per a definir els contenidors principals de la web i class
per a definir continguts.

5 - (15 punts) Quina és l'estructura bàsica d'un document XHTML? Quina és
l'estructura més simple possible d'un document XHTML que validi? Explica breument
per a què s'utilitzen cadascun dels seus elements.
Un document HTML consta de dues parts la capçalera <head> i el contingut <body>.
Dins del <head> va la informació explicada en la pregunta 3. Dins del <body> va el
cos del document, es a dir, el document en sí.

Una estructura bàsica seria una cosa així:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ES"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Estructura més simple</title>
</head>

<body>
<h1>Títol</h1>
<p>Això realment ja no seria necessari</p>
</body>
</html>

En aquest exemple he posat:
- Doctype – Indica el tipus de document HTML perquè els navegadors el puguin
interpretar
- Dintre de <html> es troben
o <head> - La capçalera. L’estructura més simple pot ser el títol.
o <body> - Cos del document. L’estructura més simple pot ser un títol,
un paràgraf, etc.

6 - (15 punts) Investigació. En aquests moments s'està elaborant l'estàndard HTML5.
Busca informació en la web sobre l'estat d'aquest projecte i les principals diferències
que suposarà HTML5 quant al marcat dels documents. Fes-ne un informe
d’aproximadament 500 paraules. És essencial que citis les fonts d'informació que has
utilitzat.
Mirar document adjunt: “paquita_ribas_html5.docx”

7 - (10 punts) Digues si són correctes o incorrectes els següents fragments de codi (en
XHTML). En cas que siguin incorrectes, indica per què.
<strong>Text negreta i <i>cursiva</strong></i>
És incorrecte. La correcte seria (si la paraula “cursiva” no va en negreta):
<strong>Text negreta</strong> i <i>cursiva</i>
O també (si la paraula “cursiva” va en negreta):
<strong>Text negreta i <i>cursiva</i></strong>

<h7>Títol</h7>
No existeix el títol h7. Va del h1 (el més gran) al h6 (el més petit)
o <h1><strong>Un altre títol</strong></h1>
L’etiqueta h1 ja ve ressaltada com a bold, per tant no faria falta posar
<strong>

<h2><p>I encara un altre títol</p>
<p>Amb el seu subtítol</p></h2>
És incorrecte. No és necessari posar el títol entre <p>. Jo posaria:
<h2>I encara un altre títol</h2>
<h3>Amb el seu subtítol</h3>
I després posaria el paràgraf que correspon al títol i subtítol entre
<p></p>

<em class=enverd>Text en color verd</em> (Suposant que existeix
una classe enverd en el CSS)
És incorrecte, falten les cometes
<em class=”enverd”>Text en color verd</em>

<ul><li>Primera entrada
<ul><li>Primera subentrada</li>
<li>Segona subentrada</li>

<li>Tercera subentrada</li></li></ul>
<li>Segona entrada</li>
<ol><li>Primera subentrada</li>
<li>Tercera subentrada</li></ol>
</ul>

Incorrecte. El correcte seria:
<ul>
<li>Primera entrada
<ul>
<li>Primera subentrada</li>
<li>Tercera subentrada</li>
</ul>
</li>
<li>Segona entrada
<ol>
<li>Primera subentrada</li>
<li>Tercera subentrada</li>
</ol>
</li>
</ul>

8 - (10 punts) De quines formes es poden especificar la grandària del text usant CSS?
Quins són les diferències entre elles? I els avantatges i inconvenients de cadascuna
d'elles?

<font-size>

Hi ha que posar la mida, exemple:
Body {
Font-size: 12px;
}
O utilitzant paraules clau: xx-small, x-small, small, medium, large, x-large,
xx- large

9 - (10 punts) Posa un exemple de pàgina web no accessible (desafortunadament, són
fàcils de trobar) i explica alguns dels motius pels quals no ho és.

L’accessibilitat és tractar a tothom igual, encara que les persones tinguin
algun tipus de discapacitat visual, motriu, etc.

Un exemple:

http://personales.com/espana/valencia/tortugas/Marinas.htm

(10 punts) Observeu la següent captura de pantalla:

Mirar document adjunt “pac1.html” i “pac1.css” i “pac1b.html” i “pac1b.css” que
estan dintre de la carpeta “paquita_ribas_pac1_ultima_pregunta”.

Volem aconseguir el següent resultat: les imatges hauran de quedar envoltades d’un
marge de color gris de dos píxels de gruix i, a més, volem assegurar-nos que hi hagi
almenys cinc píxels de separació amb qualsevol element que les envolti, amb el color
del fons. Indicació: consulteu el model de caixes.

Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (9)

Destacado

Destacado (9)

Similar a Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas

Similar a Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas (20)

Más de Paquita Ribas

Más de Paquita Ribas (20)

Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas