Bon dia a totes i tots!
En aquesta pràctica, que he anomenat projecte final HTML farem una composició i una aplicació de tot el que hem après (afegint-hi una cosa nova) per a donar un nou aspecte a la nostra web. Per tant, podem dir que contarà com a nota d'examen d'Informàtica per aquest segon trimestre (i que farà mitja ponderada amb la resta de notes de les pràctiques, el treball a classe, etc, que ja teniu)
En aquesta ocasió treballarem amb el que s'anomenen frames, que no són més que espais de webs superposades a la nostra que donen un servei determinat. Si visualitzeu la pàgina web de l'escola: http://www3.planalfa.es/safac/ podreu veure una aplicació de frames sobre una web activa.
La idea que us proposo és que doteu la vostra web, la que heu anat construint durant aquestes setmanes, d'un menú d'enllaços i de, com a mínim, 3 pàgines de contingut divers (per la primera podeu aprofitar la que ja teniu feta; per la segona creeu-ne una altre que estigui relacionada, i per la tercera feu-ne una altre en anglès també relacionada amb les anteriors). Fixeu-vos en els exemples de l'apartat Try-it-yourself del següent enllaç: http://www.w3schools.com/html/html_frames.asp
Al final, haureu de tenir una web que es mostri amb dos espais: un per menú d'enllaços (vertical o horitzontal) i un per continguts.
La web que es mostrarà tindrà 2 frames. Quan fem clic a un enllaç, s'obrirà en el frame principal (per veure el codi d'exemple, busqueu abaix del link anterior, a l'apartat Navigation frameset, on us mostrarà l'atribut de l'enllaç que fa obrir una web a un frame diferent).
Quan acabeu, m'haureu d'enviar en una carpeta comprimida el document html on declareu els frames i les 3 webs que s'obren en els frames, de tal manera que quan jo els descarregui i els extregui del zip o el rar, es visualitzi tot correctament (reviseu les URLs, i no poseu "http://.........", sino només el nom del document html a obrir amb l'extensió ("document.html").
Aquesta pràctica és dura. De moment compteu amb tota la setmana per a realitzar-la. Segons com vegi que va, potser dediquem la setmana següent a acabar-la.
Ànims!
Xavi
dimarts, 21 de febrer del 2012
dimarts, 7 de febrer del 2012
Pràctica 8
Good morning to everyone!
As I promised, we will try to work in english, at least for just one time.
If it works good, I will keep on posting new practices in english (maybe if it doesn't, too). You have to think that this is aplicated english learning, so this completes your English class' grammar, vocabulary, etc
In this first english practice, you will have to translate your webs from P4 in english, so I can read them in this language. Remember not to use google translator or likely online applications, because they don't translate in the correct way.
This practice's mark will be taken from your use of english, your correction in writing, and your improvements of your previous web. Try to use everything you have learned in last practices to make a new version of your web.
From now on, and for new practices, too, I remind you that logging in facebook without permission is marked down in your final mark.
Good luck!
Xavi
As I promised, we will try to work in english, at least for just one time.
If it works good, I will keep on posting new practices in english (maybe if it doesn't, too). You have to think that this is aplicated english learning, so this completes your English class' grammar, vocabulary, etc
In this first english practice, you will have to translate your webs from P4 in english, so I can read them in this language. Remember not to use google translator or likely online applications, because they don't translate in the correct way.
This practice's mark will be taken from your use of english, your correction in writing, and your improvements of your previous web. Try to use everything you have learned in last practices to make a new version of your web.
From now on, and for new practices, too, I remind you that logging in facebook without permission is marked down in your final mark.
Good luck!
Xavi
dijous, 2 de febrer del 2012
Pràctica 7
Hola a totes i a tots!
No us amoïneu si veie que el blog té un aspecte una mica diferent, ja us ho explicaré demà
En aquesta nova pràctica vull que visiteu els següents enllaços:
http://www.w3schools.com/html/html_links.asp
http://www.w3schools.com/html/html_images.asp
Escriu-me en un word els atributs extra que poden utilitzar les etiquetes <a> i <img>, per què serveixen, afegeix un exemple de cada a la teva web i envia-me-la al correu.
Ànim!
Xavi
No us amoïneu si veie que el blog té un aspecte una mica diferent, ja us ho explicaré demà
En aquesta nova pràctica vull que visiteu els següents enllaços:
http://www.w3schools.com/html/html_links.asp
http://www.w3schools.com/html/html_images.asp
Escriu-me en un word els atributs extra que poden utilitzar les etiquetes <a> i <img>, per què serveixen, afegeix un exemple de cada a la teva web i envia-me-la al correu.
Ànim!
Xavi
dimarts, 31 de gener del 2012
Pràctica 6
Hola a totes i tots!
En aquesta nova pràctica acabarem de retocar paràmetres amb els que vam començar a treballar la pràctica passada. Recordeu que els atributs d'estil ara es defineixen conjuntament amb l'etiqueta "style", enlloc 'd'utilitzar paràmetres independents d'altres etiquetes com la "font".
En aquesta pràctica anirem una mica més enllà: aplicarem un color de fons i altres paràmetres d'estil a la nostra web segons aquesta nova etiqueta.
Visiteu l'exemple de la web: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles i seguiu-lo per a donar color al fons enlloc de com ho fèieu abans. A més, a la vostra pàgina web, afegeix un paràgraf amb la definició de "CSS" i cerca i escriu-hi a què es refereixen els experts quan es parla d'etiquetes "deprecades" i doneu algun exemple.
Ànim!
Xavi
En aquesta nova pràctica acabarem de retocar paràmetres amb els que vam començar a treballar la pràctica passada. Recordeu que els atributs d'estil ara es defineixen conjuntament amb l'etiqueta "style", enlloc 'd'utilitzar paràmetres independents d'altres etiquetes com la "font".
En aquesta pràctica anirem una mica més enllà: aplicarem un color de fons i altres paràmetres d'estil a la nostra web segons aquesta nova etiqueta.
Visiteu l'exemple de la web: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles i seguiu-lo per a donar color al fons enlloc de com ho fèieu abans. A més, a la vostra pàgina web, afegeix un paràgraf amb la definició de "CSS" i cerca i escriu-hi a què es refereixen els experts quan es parla d'etiquetes "deprecades" i doneu algun exemple.
Ànim!
Xavi
dimecres, 25 de gener del 2012
Pràctica 5
Hola a tots i a totes!
En aquesta pràctica entrarem en el món dels estils. Antigament es feien servir una sèrie d'etiquetes qe molt probablement vosaltres mateixos heu utilitzat ala última pràctica per a afegir color o mides diferents als textos que escrivíeu. Ara però, tot això va estant definit mitjançant el que s'anomena "style". El més utilitzat actualment és un estàndard conegut com a CSS, que ens permet, aplicant-lo, convertir una web normal en una web "actual".
A continuació teniu un exemple d'una web simple que encara feia servir l'etiqueta <font>: Proveu-ho
<p>
< font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
< /font>
< /p>
< p>
< font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
< /font>
< /p>
Per a aquesta pràctica, doncs, visiteu aquest enllaç: http://www.w3schools.com/html/html_fonts.asp
Mireu els 4 exemples que us posen a l'apartat "The right way to do it - with styles". I ara ve la feina:
-Realitzeu una plana web explicativa amb el següent contingut:
- Títol: Explicació
- Imatge: alguna que tingui a veure amb els estils, cerqueu per Internet
- Descripció de què fa cada línia de codi de http://www.w3schools.com/html/tryit.asp?filename=tryhtml_fontall
- Descripció dels atributs de l'etiqueta <style> i quina estructura té l'etiqueta en global.
- Enllaç a la web que vau crear a la pràctica passada (i que per cert, estan molt bé)
Ara doncs, amb tota la feina per davant, ànim i comenceu!
Xavi
En aquesta pràctica entrarem en el món dels estils. Antigament es feien servir una sèrie d'etiquetes qe molt probablement vosaltres mateixos heu utilitzat ala última pràctica per a afegir color o mides diferents als textos que escrivíeu. Ara però, tot això va estant definit mitjançant el que s'anomena "style". El més utilitzat actualment és un estàndard conegut com a CSS, que ens permet, aplicant-lo, convertir una web normal en una web "actual".
A continuació teniu un exemple d'una web simple que encara feia servir l'etiqueta <font>: Proveu-ho
<p>
< font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
< /font>
< /p>
< p>
< font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
< /font>
< /p>
Per a aquesta pràctica, doncs, visiteu aquest enllaç: http://www.w3schools.com/html/html_fonts.asp
Mireu els 4 exemples que us posen a l'apartat "The right way to do it - with styles". I ara ve la feina:
-Realitzeu una plana web explicativa amb el següent contingut:
- Títol: Explicació
- Imatge: alguna que tingui a veure amb els estils, cerqueu per Internet
- Descripció de què fa cada línia de codi de http://www.w3schools.com/html/tryit.asp?filename=tryhtml_fontall
- Descripció dels atributs de l'etiqueta <style> i quina estructura té l'etiqueta en global.
- Enllaç a la web que vau crear a la pràctica passada (i que per cert, estan molt bé)
Ara doncs, amb tota la feina per davant, ànim i comenceu!
Xavi
dijous, 19 de gener del 2012
Pràctica 4
Hola a tothom!
Ja heu vist la base del llenguatge HMTL. Anem doncs a aprofundir una mica més.
Ja us heu trobat amb algunes situacions en les que havíeu d'utilitzar el que anomenem "atributs". els atributs són informació extra que s'aporta una etiqueta, com per exemple el href o el src pels enllaços i les imatges respectivament.
D'altra banda ja sabeu que podeu definir headings (p.ex. <h1>) que indiquen encapçalament i dónen un estil de lletra més gran que la del text pla que ve a continuació. Heu de saber, que aquestes etiquetes van des de h1 fins a h6. Cal comprendre que per posar lletra "GRAN" o negreta no s'utilitza aquesta etiqueta.
Una altra etiqueta útil és la <hr />. Aquesta afegeix una línia horitzontal en el vostre paràgraf.
De la mateixa manera, també es poden afegir comentaris a la vostra plana web. Això significa que, al bloc de notes on edito en HTML, puc afegir comentaris a algunes zones amb informació que no em sortirà a la web quan la visualitzi, per exemple, coses que em quedin per fer... etc. Això s'indica així: <!--Això és un comentari -->
També heu vist que els paràgrafs venen definits per l'etiqueta <p>. Heu de recordar que sempre s'han de tancar les etiquetes, al final del paràgraf també </p>. Si volem passar a escriure en una línia nova en un paràgraf, hem d'utilitzar l'etiqueta <br />. Aquesta etiqueta ens afegeix un canvi de linia, especialment important quan estem escrivint textos llargs i no volem que quedi tot amuntegat.
Per tant, què heu de fer en aquesta pràctica? Sobre la web que ja teniu creada, heu d'extendre el text descriptiu i fer servir almenys un cop la cursiva, la negreta, el subratllat, un canvi de línia i afegir una linia horitzontal, tot dins d'un paràmetre d'estils adient per a donar-li el que s'anomena un aspecte amigable. en altres paraules, heu de retocar la vostra web afegint aquestes configuracions d'estils.
Ànim!
Xavi
Ja heu vist la base del llenguatge HMTL. Anem doncs a aprofundir una mica més.
Ja us heu trobat amb algunes situacions en les que havíeu d'utilitzar el que anomenem "atributs". els atributs són informació extra que s'aporta una etiqueta, com per exemple el href o el src pels enllaços i les imatges respectivament.
D'altra banda ja sabeu que podeu definir headings (p.ex. <h1>) que indiquen encapçalament i dónen un estil de lletra més gran que la del text pla que ve a continuació. Heu de saber, que aquestes etiquetes van des de h1 fins a h6. Cal comprendre que per posar lletra "GRAN" o negreta no s'utilitza aquesta etiqueta.
Una altra etiqueta útil és la <hr />. Aquesta afegeix una línia horitzontal en el vostre paràgraf.
De la mateixa manera, també es poden afegir comentaris a la vostra plana web. Això significa que, al bloc de notes on edito en HTML, puc afegir comentaris a algunes zones amb informació que no em sortirà a la web quan la visualitzi, per exemple, coses que em quedin per fer... etc. Això s'indica així: <!--Això és un comentari -->
També heu vist que els paràgrafs venen definits per l'etiqueta <p>. Heu de recordar que sempre s'han de tancar les etiquetes, al final del paràgraf també </p>. Si volem passar a escriure en una línia nova en un paràgraf, hem d'utilitzar l'etiqueta <br />. Aquesta etiqueta ens afegeix un canvi de linia, especialment important quan estem escrivint textos llargs i no volem que quedi tot amuntegat.
Per tant, què heu de fer en aquesta pràctica? Sobre la web que ja teniu creada, heu d'extendre el text descriptiu i fer servir almenys un cop la cursiva, la negreta, el subratllat, un canvi de línia i afegir una linia horitzontal, tot dins d'un paràmetre d'estils adient per a donar-li el que s'anomena un aspecte amigable. en altres paraules, heu de retocar la vostra web afegint aquestes configuracions d'estils.
Ànim!
Xavi
dimecres, 18 de gener del 2012
Pràctica 3
Bona tarda a tots.
En les pràctiques anteriors, heu descobert el significat i la utilitat de la programació amb etiquetes que ens permet el llenguatge HTML. En concret, coneixeu que la etiqueta <h1>, <h2>... serveixen per indicar encapçalaments (headers, amb la seva diferencia de mida i estil), la etiqueta <p> serveix per indicar paràgrafs, la etiqueta <a> ens indica un hipervincle que definim amb el camp href i hi afegim la etiqueta <img>, que serveix per inserir una imatge, relacionant-la directament a partir de la seva URL, de la mateixa manera que l'hipervincle però amb el camp "src" (source = font).
En la propera pràctica es tracta que dissenyeu i escriviu en un bloc de notes una plana web amb:
-El vostre nom com a títol.
-Una breu descripció de com sou (2-3 linies) en el primer paràgraf.
-Un segon títol (" de secció") més petit que el primer.
-Un enllaç a aquest bloc (recordeu que les URL inclouen el http://).
-Un enllaç a la imatge següent: http://www.imagenesmix.com/images/foto-graciosa.jpg
-Un nou paràgraf explicant la vostra opinió sobre la imatge.
Finalment, guardeu el document (amb el vostre nom i el format corresponent (ho tindrè en compte!)) i m'envieu el bloc de notes adjunt per correu al meu mail. Recordeu que en aquest cas, com les URL que heu de fer servir per als enllaços o imatges són directament webs d'Internet, no cal que guardeu cap informació conjunta en la mateixa carpeta on guardeu el bloc de notes.
Ànim!!
Xavi
En les pràctiques anteriors, heu descobert el significat i la utilitat de la programació amb etiquetes que ens permet el llenguatge HTML. En concret, coneixeu que la etiqueta <h1>, <h2>... serveixen per indicar encapçalaments (headers, amb la seva diferencia de mida i estil), la etiqueta <p> serveix per indicar paràgrafs, la etiqueta <a> ens indica un hipervincle que definim amb el camp href i hi afegim la etiqueta <img>, que serveix per inserir una imatge, relacionant-la directament a partir de la seva URL, de la mateixa manera que l'hipervincle però amb el camp "src" (source = font).
En la propera pràctica es tracta que dissenyeu i escriviu en un bloc de notes una plana web amb:
-El vostre nom com a títol.
-Una breu descripció de com sou (2-3 linies) en el primer paràgraf.
-Un segon títol (" de secció") més petit que el primer.
-Un enllaç a aquest bloc (recordeu que les URL inclouen el http://).
-Un enllaç a la imatge següent: http://www.imagenesmix.com/images/foto-graciosa.jpg
-Un nou paràgraf explicant la vostra opinió sobre la imatge.
Finalment, guardeu el document (amb el vostre nom i el format corresponent (ho tindrè en compte!)) i m'envieu el bloc de notes adjunt per correu al meu mail. Recordeu que en aquest cas, com les URL que heu de fer servir per als enllaços o imatges són directament webs d'Internet, no cal que guardeu cap informació conjunta en la mateixa carpeta on guardeu el bloc de notes.
Ànim!!
Xavi
Subscriure's a:
Missatges (Atom)