EXERCICIS: HTML

Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas

Exercicis - HTML - Maquetar full d'un diari

Exercici llarg...

A la taula d'Almudena us he deixat unes fotocòpies d'una plana del diari 20 minuts d'ahir.

Localitzeu les Files i columnes i feu-vos el dibuix de la taula primer en paper i després en HTML. Intenteu fer aquesta pàgina amb HTML i tot el que sabeu. Poseu text simulat.

Exercicis - HTML - 24 de Novembre

Exercici 1
Cerca quin és l'element de formulari per enviar arxius(el típic "Examinar").

Exercici 2
Crea un formulari extens i el més complert possible, maquetat amb taules, per omplir un Currículum Vitae amb tots els camps que vegis necessaris en un currículum online. És a dir, el que trobaríeu en un "infojobs", amb diversos camps de Text Area, que dongui a escollir entre opcions, etc... Que pregunti sobre idiomes, nivell d'aquests, estudis acadèmics, experiència professional, data de naixement, lloc de naixement, nacionalitat, que esculli entre preferències de feina, arees professionals ... que pugui enviar una foto de carnet.

Planifica-t'ho tot abans fent-te un croquis en paper.

Exercicis - HTML - Novembre 23

Exercici 1
Fes les següents taules.

Taula1

Taula2

Exercici 2
Cerca el següent sobre formularis:

Què és un camp de text ocult?
I un camp d'imatge?
Què són els menús de selecció de formulari?

Exercici 3
Confecciona un formulari complert, i maquetat amb una taula, que inclogui tots els tipus de elements de formulari que vam veure l'altre dia, camps de text, camps de contrasenya, radio butons, caselles de selecció. Escull un exemple el més realista possible.

Exercici - HTML - Novembre 20 de 2009

Exercici 1
Detecta els errors que hi ha aquí(Clica per ampliar):

Exercici 2
Cerca les següents etiquetes, els seus atributs i la seva utilitat:

acronym.
dl, dt, dd
form
input
text
caption

Exercici 3 Respón a les següents preguntes:

Per a què serveix l'atribut TARGET?
Per a què serveix l'atribut NAME dels IFRAMES.
Per a què serveix la etiqueta SCRIPT

Exercici 4 Defineix en HTML la següent taula:

Exercici 6
Investiga què vól dir DOM i per a què serveix:

Exercicis - HTML - 2009-11-04

Exercici 1

Fes les següents pàgines enllaçant-les amb el model següent...

... amb aquest logo ...

... i seguint la estructura de carpetes següent:

Exercici 2. Respón cert o fals a les següents afirmacions.

a) Les URL absolutes es poden definir de diverses formes.
b) Les URL relatives tenen arrel.
c) Per indicar al navegador que hem de sortir de carpeta cal posar el nom de la carpeta on ens trobem.
d) VLINK és un atribut de la etiqueta A.
e) Per col·locar imatges ens cal definir la ubicació de la imatge.
f) El color #gg6633 és un color web.

Exercici 3. A quines etiquetes cal posar URLs.

Exercici 4. Detecta errades al següent codi font(Clica per ampliar):

Exercicis - HTML - 18 de Novembre

Amb el material gràfic d'ahir munta una web que tingui un iframe i a l'interior d'aquest que es representin els diferents continguts(que estaràn a diferents pàgines).

Exercici - HTML - 16 Novembre 2009

Exercici 1
De les etiquetes que hem fet fins ara digues a quines apareixen els següents atributs, els valors que poden prendre i la seva utilitat en cadascuna d'elles.

ALIGN
BORDER
TARGET
WIDTH
HEIGHT
CELLPADDING
CELLSPACING
BACKGROUND
BGCOLOR
SRC
NAME
TEXT
LINK
VALIGN
VLINK
ALINK
COLOR
SIZE
BODY
FACE
START
TYPE
FAMILY
LEFTMARGIN
BOTTOMMARGIN
RIGHTMARGIN
TOPMARGIN
MARGINWIDTH
MARGINHEIGHT

Exercici 2 Digues si són certes o falses les següents afirmacions:

La etiqueta IFRAME va per parelles.
Entre etiquetes TITLE no es poden posar altres etiquetes.

Exercici 3 Fes la següent pàgina amb les següents imatges:

Versió en vermell de les opcions del menú per si voleu assenyalar a quina pàgina esteu.

Exercici - HTML - 12 Novembre 2009

Exercici1.

Amb tot el que saps fes el lloc web dels jardins que vau començar ahir.

Posa marges a la pàgina, color de fons, links, imatges, paràgrafs,

Solució Exercici 6 - 2009-NOV-04

<html>
<head>
<title>Escriure un text dins d'un paràgraf</title>
<script>
//Mode 1 - Fent servir innerText o innerHTML
function escriure(p) {
document.getElementById(p).innerHTML ="Hola ¿Cómo estás?";
}

//Mode 2 - Fent servir el DOM
function escriure2(p) {
var texto="Patates fregides."
document.getElementById(p).firstChild.nodeValue=texto;
}

//Mireu l'adreça:

http://www.alfonsojimenez.com/computers/no-uses-innerhtml-usa-do

m

</script>

</head>
<body>
<a href="#" onclick="escriure('parag');">Clica i veuràs.</a> |
<a href="#" onclick="escriure2('parag');">Una altra opció</a>

<p id="parag"> </p>

</body>
</html>

Solució de l'exercici 5 del dia 2009-Nov-04

Recordeu que quan vam sustituir els caràcters amb accent per caràcters especials amb la funció replace només se sustituïa la primera vegada que apareixia.

Doncs bé, tenim la solució: Hem de fer servir les anomenades "expressions regulars". Mira't els següents enllaços que en parlen:

Aplica't al que voliem fer tenim un exemple concret. Clica aquí Mireu com ho solucionen en aquest enllaç i acabeu de completar l'exercici d'ahir.

Según eso con el ejemplo que teníamos habría que hacer:

cadena.replace(/á/g, "á");

Així la solució de l'exercici 5 d'ahir és:

<HTML>
<HEAD>
<TITLE>Reemplazar un trozo de una cadena por otra cosa</TITLE>
<script>

function cambiar() {

var cadena=document.masa.cosa.value;

//minúsculas acentuadas agudas
cadena = cadena.replace(/á/g,"á");

cadena = cadena.replace(/é/g,"é");

cadena = cadena.replace(/í/g,"í");

cadena = cadena.replace(/ó/g,"ó");

cadena = cadena.replace(/ú/g,"ú");

//minúsculas acentuadas graves
cadena = cadena.replace(/à/g,"à");

cadena = cadena.replace(/è/g,"è");

cadena = cadena.replace(/ò/g,"ò");

//mayúsculas acentuadas agudas
cadena = cadena.replace(/Á/g,"Á");

cadena = cadena.replace(/É/g,"É");

cadena = cadena.replace(/Í/g,"Í");

cadena = cadena.replace(/Ó/g,"Ó");

cadena = cadena.replace(/Ú/g,"Ú");

//mayúsculas acentuadas graves
cadena = cadena.replace(/À/g,"À");

cadena = cadena.replace(/È/g,"È");

cadena = cadena.replace(/Ò/g,"Ò");

//ç y Ç
cadena = cadena.replace(/ç/g,"ç");
cadena = cadena.replace(/Ç/g,"Ç");

//ñ y Ñ
cadena = cadena.replace(/n/g,"ñ");
cadena = cadena.replace(/N/g,"Ñ");

// punt volat
cadena = cadena.replace(/·/g,"·");

document.masa.cosa.value=cadena;

}

</script>
</HEAD>
<BODY>

<form name="masa">
<textarea cols="25" rows="10" name="cosa"></textarea>
<input type="button" onclick="cambiar();" value="corrige" />
</form>

</BODY>
</HTML>

Puedes completar los carácteres especiales que tú consideres que se puedan añadir.

Exercicis - HTML i Javascript - 4 de Novembre 2009

Exercici 0
Digues si són certes o falses les següents frases:

Javascript és un llenguatge de programació orientat a objectes que actua en el costat client(POO).
Les funcions de javascript es declaren entre les etiquetes script al body.
Amb javascript podem definir interactivitat en el costat client.
a="5"; és una variable numèrica.
Un element html a javascript és un objecte.

Exercici 1
Respón a les següents preguntes:

Com es defineix una variable.
Tipus de variables que hem fet.
Com es defineix una funció. A on?
DOM -> Com "enrutem" al valor d'un camp de text d'un formulari.
Com creem una variable amb javascript.
Com asignem un valor a una variable amb javascript.
Com cridem a una funció.
Què és un event de ratolí.
Fes una llista d'events de ratolí.
Com fer que aparegui el focus del ratolí a un camp de text a un formulari quan s'ha carregat la pàgina.
Què és una condicional.
Fes una llista de tot el que saps fins ara sobre javascript.
Cerca tipus de variables.
Què és un array.
Defineix AJAX i els seus usos.

Exercici 2 (HTML)
Fes una pàgina que serveixi per enviar una cerca al google. A veure si es pot. Feu servir el mètode get.

Exercici 3
Fent comentaris de Javascript( // ) o de HTML () explica per a què serveixen les coses de javascript que vegis als codis següents.

Exemple 1

<HTML>
<HEAD>
<TITLE>Alert i formulari</TITLE>

<script type="text/javascript" language="javascript">

function mensaje() {

texto=document.formulina.campillo.value;

document.formulina.clonico.value=texto;

}

</script>
</HEAD>

<BODY onload="document.formulina.campillo.focus();">

<FORM name="formulina">

<INPUT TYPE="text" name="campillo">

<INPUT TYPE="button" value="clonar" onclick="mensaje();" >

<INPUT TYPE="text" name="clonico">

</FORM>

</BODY>
</HTML>

Exemple 2

<HTML>
<HEAD>
<TITLE>Alert i formulari</TITLE>

<script type="text/javascript" language="javascript">

function mensaje() {

texto=document.formulina.campillo.value;

alert(texto);
}

</script>
</HEAD>

<BODY>
<FORM name="formulina">

<INPUT TYPE="text" name="campillo">

<INPUT TYPE="button" value="mensaje" onclick="mensaje();" >

</FORM>

</BODY>
</HTML>

Exercici 4
Basant-te en el exemple 2 de l'exercici anterior crea un formulari amb dos camps i dos botons que ens serveixi per convertir un valor en euros a pesetes i de pesetes a euros amb dos botons.

Exercici 5
Busca a internet alguna funció que serveixi per reemplaçar un caràcter que hi hagi a una cadena per un altre. I per aplicar aquest coneixement crea un formulari amb un textarea i un botó que cridi a una funció que sustitueixi les lletres amb accents i que se surtin de ASCII pels seus caràcters especials.

Exercici 6
Busca a internet alguna manera, amb javascript, d'escriure text dins d'un paràgraf.

Exercici 7
Busca a internet alguna manera, amb javascript, de sustituir una imatge per un altra al passar per sobre amb el ratolí.

Exercici 8
Busca a internet alguna manera, amb javascript, de fer un enllaç.

Exercici 9
Busca a internet o a librosweb alguna manera, amb javascript, d'obtenir la resolució de la pantalla de l'ordinador de l'usuari.

Exercici 10
Busca a internet o a librosweb alguna manera, amb javascript, de limitar el número de caràcters escrits a un camp de text.

Exercicis - HTML - 30 d'Octubre

Exerici 1
Fes la següent taula procurant que les columnes mesurin la mateixa amplada. Recorda les meves recomancions.

Exerici 2
Fes la següent taula:

Exercici 3
Amb tot el que et puguis aproximar intenta fer la pàgina 6 del diari 20minutos d'avui. Clica aquí per descarregar-te el PDF.

Croquis(clica a la imatge per ampliar).

Material gràfic:

Exercicis - HTML - 29 d'Octubre

Exercicis d'investigació i desenvolupament.
En aquests exercicis s'aborden temes d'indexació, representació de caràcters i interactivitat elemental.

Exercici 1

Busca la següent informació per internet:

La etiqueta per definir amb quin alfabet(el conjunt de caràcters) s'ha de representar una pàgina. Un cop l'hagis trobat defineix com se li diu al navegador que ha de fer servir l'alfabet cirílic o l'alfabet europeu occidental. També si hi ha una manera més universal.
La etiqueta per dir-li al navegador que no guardi la pàgina a la caché.
La etiqueta per definir les paraules clau de què va la pàgina.
La etiqueta per definir la descripció de què va la pàgina.
Per a què serveix la etiqueta [link]?
Per a què serveixen les etiquetes [SCRIPT][/SCRIPT]?
Per a què serveixen les etiquetes [STYLE][/STYLE]?

Exercici 2
Fes una pàgina web i personalitza el missatge de la barra d'estat (status bar) en fer clic sobre un enllaç.

Exercici 3
Fes una pàgina web en la que hi hagi una imatge que en fer click o passar per sobre d'ella canvïi per una altra imatge de sustitució.

Exercicis - HTML - 28 d'Octubre 2009

Amb el material gràfic d'ahir munta una web que tingui un iframe i a l'interior d'aquest que es representin els diferents continguts(que estaràn a diferents pàgines).

Exercicis - HTML - 27 d'Octubre 2009

Exercici 1 De les etiquetes que hem fet fins ara digues a quines pareixen els següents atributs, els valors que poden prendre i la seva utilitat en cadascuna d'elles.

ALIGN
BORDER
TARGET
WIDTH
HEIGHT
CELLPADDING
CELLSPACING
BACKGROUND
BGCOLOR
SRC
NAME
TEXT
LINK
VALIGN
VLINK
ALINK
COLOR
SIZE
BODY
FACE
START
TYPE
FAMILY
LEFTMARGIN
BOTTOMMARGIN
RIGHTMARGIN
TOPMARGIN
MARGINWIDTH
MARGINHEIGHT

Exercici 2 Digues si són certes o falses les següents afirmacions:

La etiqueta IFRAME va per parelles.
Entre etiquetes TITLE no es poden posar altres etiquetes.

Exercici 3 Fes la següent pàgina amb les següents imatges:

Versió en vermell de les opcions del menú per si voleu assenyalar a quina pàgina esteu.

Exercicis - HTML - 26 d'Octubre 2009

Exercicis - HTML 23 d'Octubre 2009

1. Fes una llista de diferents CMS.

2. Etiquetes solteres que coneixes fins el moment i la seva utilitat.

3. Busca alguna web en la que hi hagi un catàleg de colors hexadecimals. Escriu el codi dels següents colors: blanc, negre, gris perla, crema, magenta, porpre, groc, vermell, taronja, cian, verd, verd fosc, blau fosc, blau cel, marró.

4. Comprova quines de les etiquetes que has fet fins el moment no permeten que aparegui alguna cosa al costat i fes una llista.

5. Defineix el comportament del navegador per defecte amb els paràgrafs, les capçaleres, ...

6. Què vól dir tipografia amb serifa i sense serifa? Dona exemples de cada tipus.

7. Anota webs d'internet que tinguin tutorials d'HTML.

8. Defineix els següents conceptes.

Interactivitat.
Pàgina web dinàmica.
Sistema de colors additiu.
Sistema de colors sustractius.
True Color.
Safety Colors [Colors de seguretat, Colors Web,...].

9. Respón cert o fals:

W3C especifica els estàndards dels llenguatges d'Internet i totes les marques i fabricants dels navegadors fan cas al peu de la lletra de les seves recomanacions.
Si al codi fem diversos espais el navegador només representa com a màxim un d'espai.

Exercicis - HTML - 22 d'Octubre 2009

A. Defineix els següents conceptes i ves escrivint les respostes a un document Word:

CMS
HTML
HTTP
CSS
Navegador
W3C
FTP
Cookie
Base de dades
ICANN
DNS

B. Orígen de l'HTML.

C. Què és una etiqueta HTML i per què serveix?

D. Respón cert o fals a les següents afirmacions:

Les imatges s'incrusten en els documents HTML.
Un navegador és un servidor de pàgines web.
El que hi ha entre les etiquetes BODY són instruccions per dir-li al navegador el que ha de sortir a través de la finestra del navegador.
En HTML no hi ha etiquetes solteres.
Les pàgines web i els arxius que les acompanyen van a parar a la carpeta d'arxius temporals d'Internet.
Les extensions dels documents HTML només poden tenir 3 lletres.

E. Quines etiquetes d'HTML coneixes i per a què serveixen?

F. Per a què serveixen les etiquetes TITLE.

G. Escriu la estructura HTML típica d'una pàgina.

H. Cerca informació sobre:

SGML
XML
XHTML
HTML5 i la seva estructura

I. Tipus d'arxius gràfics que es poden posar a les planes Web.

J. Què és un servidor?

Links

EXERCICIS