Projecte final HTML

Buenos días a todas y todos!

En esta práctica, que he llamado proyecto final HTML haremos una composición y una aplicación de todo lo que hemos aprendido (añadiendo algo nuevo) para dar un nuevo aspecto a nuestra web. Por tanto, podemos decir que contará como nota de examen de Informática para este tercer trimestre (y que hará media ponderada con el resto de notas de las prácticas, el trabajo en clase, etc, que ya tiene)

En esta ocasión vamos a trabajar con lo que se llaman  frames , que no son más que espacios de webs superpuestas a la nuestra que dan un servicio determinado.

La idea que os propongo es que Dote su web, la que ha ido construyendo durante estas semanas, de un menú de enlaces y de, como mínimo, 3 páginas de contenido diverso (por la primera puede aprovechar la que ya tiene hecha, por la segunda cree una otro que esté relacionada, y por la tercera haz otra en inglés también relacionada con las anteriores). Fíjese en los ejemplos del apartado Try-it-yourself del siguiente enlace: http://www.w3schools.com/html/html_iframe.asp

Al final, debe tener una web que se muestre con dos espacios: uno para menú de enlaces (vertical u horizontal) y uno por contenidos.

La web que se mostrará tendrá 2 frames. Cuando hacemos clic en un enlace, se abrirá en el frame principal (para ver el código de ejemplo, busque abajo del link anterior, en el apartado Navigation marcos, donde le mostrará el atributo del enlace que hace abrir una web a un frame diferente).

Cuando haya terminado, me habréis de enviar en una carpeta comprimida el documento html donde declare los frames y las 3 webs que se abren en los frames, de tal manera que cuando yo los descargue y los extraiga del zip o el raro, se visualice todo correctamente (consulte las URLs, y no ponga "http:// .........", sino sólo el nombre del documento html a abrir con la extensión ("document.html").

Esta práctica es dura. De momento contad hasta el día 6 de mayo para realizarla. Según como vea que, quizás dedicamos alguna sesión más a terminarla.

Ánimo!

P.D.: PAra más información y ejemplos del frameset que tenéis que crear, visitad este enlace: http://www.w3schools.com/tags/tag_frameset.asp

Xavi

Pràctica 8

Good morning to everyone!
Today it comes in English too! It has been a while since you did your last English practice and it's interesting to take it back.You have to think that this is aplicated english learning, so this completes your English class' grammar, vocabulary, etc

In this practice, you will have to translate your webs 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.

So what do you have to do:

-Rewrite in English your personal web (the one in which you explain facts about yourselves).
-Send it to me in html format by e-mail.

Good luck!
Xavi

Pràctica 7

Hola a totes i a tots!

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 nou apartat de la vostra web 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

Pràctica 6

Recordeu que realitzar tasques que no són proposades a l'assignatura, així com navegar per continguts aliens a la mateixa es penalitza a la vostra nota (i es nota molt quan feu coses relacionades amb l'assignatura o no)

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. Haureu de recuperar la vostra web personal, on es trobaven les vostres descripcions i modificar-ne l'estil.

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,  cerca i escriu informació sobre a què es refereixen els experts quan es parla d'etiquetes "deprecades" i doneu algun exemple. Per tant:

-Utilitza styles per redefinir la teva web personal original.
-Afegeix un nou paràgraf d'informació sobre tu amb un estil CSS diferent.
-Afegeix la definició d' "etiqueta deprecada" i posa'n algun exemple.

-Extra: afegeix un enllaç a un document word qualsevol dels realitzats durant el curs. Explica a la web què      passa. S'obre a la mateixa pàgina web? S'obre amb un altre programa?
-Afegeix un enllaç "torna a l'inici" al final de la vostra web, que quan s'hi faci clic torni a l'inici de la web.

Ànim!
Xavi

Pràctica 5

Recordeu que realitzar tasques que no són proposades a l'assignatura, així com navegar per continguts aliens a la mateixa es penalitza a la vostra nota (i es nota molt quan feu coses relacionades amb l'assignatura o no)

Hola a tots i a totes!

Després del parèntesi que ha suposat la vostra participació en el concurs web (molt bona sort a tots!), reprenem el tema en el que estàvem. Haig d'aclarir-vos que la pràctica anterior és la última que compta per a la segona avaluació, per tant, aprofiteu la hora que queda per acabar les feines pendents, i si ja ho teniu tot enllestit, us dono la benvinguda a la tercera (i la vostra última) avaluació a l'ESO.

A diferència d'altres anys, el fet d'haver participat en el concurs ha fet que el bloc web s'allargui una mica, però no patiu: ho veurem tot i tindrem temps de sobres. Us torno a recordar ue les pràctiques les aneu guardant al vostre servidor, ja que en aquestes últimes, tornarem a fer servir alguna de les webs que ja hem creat anteriorment en HTML.

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 a la ú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_css.asp
i observeu quines diferències hi ha entre les configuracions antigues i les actuals amb CSS.

-Realitzeu una plana web explicativa dels CSS 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 *


Ara doncs, amb tota la feina per davant, ànim i comenceu!

Xavi

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.
D'altra banda 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. A més, afegiu dues imatges simpàtiques més i un enllaç a la plana web de l'escola.

Ànim!

Xavi

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 una imatge d'Internet.
-Un nou paràgraf explicant la vostra opinió sobre la imatge.

*Si no sabeu com es fa servir l'etiqueta <a> o la <img>, busqueu-ho a w3schools o a Internet.

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