HTML

HTML Bàsic

Text  <B>Text amb lletra negreta</B> <I>Text amb lletra cursiva (itàlica)</I> <U>Text subratllat</U> <B><I>Text amb lletra negreta i cursiva</I></B> <S>Text tatxat</S> <BLINK>Text que pampallugueja</BLINK> <MARQUEE>Text que es desplaça</MARQUEE> <TT>Lletra monoespaiada (courier)</TT> <big>Lletra Gran</big> <small>Lletra petita</small> <BLOCKBUOTE>Per posar una cita</BLOCKQUOTE> En qualsevol lloc de la pàgina <BASEFONT SIZE=n> defineix la mida de referència. Amb la marca <FONT SIZE=n> s'estableix una mida absoluta. Si el valor de n és més petit que l'especificat a <BASEFONT SIZE=n> la lletra es visualitzarà més petita que la resta de la pàgina. Per canviar altres característiques del text: <font size=’n’ face=’arial’ color=’red’>mida, lletra i color</font> <span style=’background-color:red’>color de fons</span>

Colors Es pot establir un color determinat pel fons i pel text. <BODY BGCOLOR=$$$$$$> determina el color del fons i <BODY TEXT=$$$$$$> el color del text. Pels enllaços es poden definir tres colors: <BODY LINK=$$$$$$> abans de clicar-lo. <BODY ALINK=$$$$$$> en el moment de clicar-lo. <BODY VLINK=$$$$$$> després de clicar-lo.

Alineació del text Un paràgraf es pot alinear a l'esquerra, centrat o a la dreta: <P ALIGN=LEFT> Paràgraf a l'esquerra</P> <P ALIGN=CENTER> Paràgraf centrat</P> <P ALIGN=RIGHT> Paràgraf a la dreta</P> En alguns visualitzadors, l'alineació a la dreta no funciona. <CENTER> i </CENTER> per centrar textos i imatges.

Salts de paràgraf Els salts de línia del text original no tenen cap efecte sobre la visualització. Tampoc es veuen els espais en blanc sobrers. Cada paràgraf ha d'anar entre les marques <P> i </P>. De forma automàtica, aquesta marca deixa una línia en blanc entre els paràgrafs. Els encapçalaments <H1> fan un salt de línia. <BR> força un salt de línia sense deixar cap línia en blanc. <PRE> i </PRE> EL TEXT es presenta tal com està escrit: respecta espais, salts de línia, tabuladors i lletra monoespaiada.

Llistes El text es pot estructurar en llistes numerades <OL></OL> o amb símbols tipogràfics <UL></UL> . Cada ítem de la llista ha de començar amb la marca <LI> . Afegint el paràmetre VALUE= n es força la numeració a partir d'un valor donat. En numerar una llista es pot escollir el tipus. L'opció per defecte és numèrica i les altres disponibles són: A <OL TYPE=A> b <OL TYPE=a> III <OL TYPE=I> x <OL TYPE=i VALUE=10> 10 <OL TYPE=1> Per escollir el símbol tipogràfic d’una llista no numerada cal indicar-ho en la marca <UL>.

Les opcions possibles són: • <UL TYPE=DISC> � <UL TYPE=SQUARE> o <UL TYPE=CIRCLE> La marca <DD> fa una sagnia a la dreta del paràgraf.

1. Primer 2. Segon 3. Tercer

<OL> <LI>Primer <LI>Segon <LI>Tercer </OL>

• Naturals o Biologia o Botànica

• Socials o Geografia o Història

<UL> <LI>Naturals <UL> <LI>Biologia <LI>Botànica </UL> <LI>Socials <UL> <LI>Geografia <LI>Història </UL> </UL>

Taules Les taules serveixen per encolumnar i estructurar el text i les imatges amb més precisió. Les marques que es fan servir són: <TABLE> </TABLE> A l'inici i al final <TR> </TR>Defineixen les files <TD> </TD>Defineixen les columnes Les marques d'una taula són jeràrquiques: una taula té una o més files i cada una de les files està dividida en una o més columnes. L'estructura d'una taula és molt versàtil. Vegeu alguns exemples: Exemple 1: <TABLE> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> Exemple 2: <TABLE> <TR> <TD>Ítem 1</TD> <TD OWSPAN=2>Ítem 2 <TD>Ítem 3</TD> </TR> <TR> <TD>Ítem 4</TD> <TD>Ítem 5</TD> </TR> </TABLE>

2

Exemple 3 <TABLE BORDER=1> <TR> <TD>Ítem 1</TD> <TD COLSPAN=2>Ítem 2</TD> </TR> <TR> <TD>Ítem 3</TD> <TD>Ítem 4</TD> <TD>Ítem 5</TD> </TR> </TABLE>

Imatges Les imatges es poden alinear en diferents posicions. Tingueu en compte, però, que només podeu posar una línia de text al costat de cada imatge. Si us interessa una ubicació més precisa d'imatges i text, cal que utilitzeu les taules. Quan una imatge està sola en un paràgraf l'alineació ve determinada per les marques de paràgraf <P ALIGN=...> Quan en una mateixa línia es col· loquen text i imatge les possibles opcions són:

<IMG SRC="1.gif" ALIGN=TOP> <IMG SRC="2.gif" ALIGN=MIDDLE>

<IMG SRC="3.gif" ALIGN=BOTTOM>

<IMG SRC="4.gif" ALIGN=LEFT>

<IMG SRC="5.gif" ALIGN=RIGHT>

Si els dibuixos són prou petits es poden posar un al costat de l'altre:

Un usuari pot desactivar l'opció de visualitzar les imatges des del navegador. Si la referència de la imatge incorpora un text ALT ernatiu el resultat seria:

<IMG SRC="nom.gif" ALT="nom">

Dins la referència a una imatge, es poden incloure també altres paràmetres addicionals: <... HSPACE=n> Distància horitzontal a altres elements. <... VSPACE=n> Distància vertical a altres elements. <... BORDER=n> Mida del marc al voltant.

Enllaços L'enllaç a una altra pàgina es pot fer amb un text o una imatge, que s'ha d'escriure entre les marques <A HREF> i </A>. La marca <A HREF> ha d'incloure la referència del document. La referència més simple és el nom d'un fitxer que es troba en el mateix servidor i directori on està situada la pàgina origen de l'enllaç. Per referenciar altres documents (pàgines o imatges) pot ser necessari incloure l'adreça completa, amb format URL. Exemples: (1) <A HREF=" eines.htm"> referencia a eines.htm< /A> (2) <A HREF="http: //www.google.es">Google</A>.

Per definir una imatge com enllaç només cal incloure la seva referència <IMG SRC="eines.gif"> enmig de les marques d'enllaç.

<A HREF="eines.htm"> <IMG SRC="eines.gif"> </A> (1) Exemple de referència a un vídeo nostre amb <a href>:

<a href="HimnedelFCBarcelona.wmv"><img src="escudo-barcelona.gif" align="middle">Vídeo</a>

(2) Exemple de referència a un vídeo amb <embed src>: <embed src="RealMadrid.wmv" autostart="false" loop="true" height="300" width="400"> </embed>

També es poden definir enllaços a un altre lloc de la mateixa pàgina. L'enllaç es defineix amb:

<A HREF="#referencia"> Enllaç</A> En el text de destinació cal posar la marca:

<A NAME="referencia">

Fixeu-vos que en la marca que defineix l'enllaç s'ha d'escriure el símbol #. En canvi en definir la referència no s'hi ha de posar.

TEMA 13: STÀNDARDS I ACCESSIBILITAT WEB

Taller d’Informàtica 1 (pàg. 272)

Adreces IP

Quan ens connectem a Internet, se’ns assignarà una adreça IP pública, amb la qual serem reconeguts en tot moment, de manera que es pugui fer un rastreig de tots els llocs per on hem navegat. La majoria d’adreces IP són dinàmiques; és a dir, cada vegada que reiniciem una connexió, se’ns pot assignar una adreça nova. En aquest taller localitzaràs la teva adreça IP.

(1) Entra a Internet i al Google. A la casella de cerca, escriu “la meva adreça IP” i, quan iniciïs la cerca, et sortiran diverses pàgines que t’indicaran l’adreça IP actual.

(2) Comprova diverses pàgines d’aquestes i observa l’adreça que t’indiquen. A totes hi apareixerà el mateix número.

Com es pot veure la meva IP és:

77.225.95.48

(3) Apaga l’ordinador, torna’l a engegar i repeteix el procés anterior. Probablement, l’adreça continuarà sent la mateixa.

Sí, és la mateixa perquè és una IP estàtica:

77.225.95.48

(4) Si ets a l’aula d’informàtica de l' institut, observa que l’adreça IP de tots els companys és la mateixa, ja que segurament hi haurà una sola IP externa per a tot l’ institut.

Jo ho he fet a casa meva, però a l’ Institut tots tenen la mateixa IP.

(5) Vés a Inicia/Tauler de control/Connexions de la xarxa i, amb el botó dret del ratolí, mira les Propietats de la xarxa d’àrea local, i fes doble clic a Protocolo Internet TCP/IP. Ara veuràs una nova adreça IP, diferent per a cada ordinador: es tracta d’una IP interna que localitza tots els ordinadors de l’ institut.

A casa meva l’adreça IP s’obté automàticament, però a l’ Institut és fixa i cada ordinador té una IP diferent que els localitza dins de la xarxa.

(6) Tanca-ho tot sense fer canvis.



Organismes que promouen el Web

(1) Els webs següents corresponen a entitats que potencien l’accessibilitat web a totes les persones. Entra en un d’ells i explica la informació més significativa que conté: qui l’ha creat i qui la dirigeix, objectius, ubicació, etc.

• http://www.sidar.org

• http://www.w3c.es

• http://www.inteco.es

Qui l’ha creat?

El Instituto Nacional de Tecnologías de la Comunicación (INTECO).

Qui la dirigeix?

El Ministerio de Industria, Turismo y Comercio.

Objectius?

INTECO tendrá un doble objetivo: contribuir a la convergencia de España con Europa en la

Sociedad de la Información y promover el desarrollo regional, enraizando en León un proyecto

con vocación global.

Ubicació?

León.

Més coses?

Desarrollará, entre otras, iniciativas de seguridad tecnológica, accesibilidad e inclusión

en la sociedad digital y soluciones de comunicación para particulares y empresas.



L’editor Amaya

Busca informació a Internet sobre l’editor Amaya i explica’n les característiques principals: pàgina oficial, idioma, qui l’ha creat, si es només un editor, si és lliure, amb quines plataformes treballa, quins llenguatges d’etiquetatge suporta, etc.

• Pàgina oficial: http://www.w3.org/Amaya/

• Idioma: Està escrit en llenguatge de programació C. Com idiomes en que es pot fer servir el programa consten: Alemany, Anglès, Francès, Espanyol, etc...

• Qui l’ha creat? L’ha creat el Consorci World Wide Web (W3C). És un consorci

internacional on les organitzacions que formen part, personal a temps

complert i el públic en general, treballen conjuntament per a desenvolupar

estàndards Web. El director del W3C és Tim Berners-Lee, inventor de la World

Wide Web

• És només un editor Web? Amaya no tant sols permet crear una Web des de zero d’una manera molt senzilla, previsualitzant al moment el resultat, sinó que a més permet fer us del seu navegador Web integrat per buscar informació per la teva pàgina o crear enllaços. També permet carregar la teva Web directament sense fer necessitat d’un servidor FTP.

• És lliure? Sí, és lliure, és a dir, és gratuït. • Amb quines plataformes treballa? Treballa amb Linux, Windows i

MacOS X PowerPC i Intel. • Quins llenguatges d’etiquetatge suporta? Suporta HTML 4.01, XHTML 1.0, XHTML Basic,

XHTML 1.1, HTTP 1.1, MathML 2.0, CSS 2 i SVG. • Més coses: Editor i navegador web de codi obert, i amb tota la garantia d’haver estat creat per la W3C. El

més interessant d’aquest editor és que quasi bé sempre genera un codi net.



Primeres passes amb l’HTML

En els tallers següents crearem una pàgina web amb l’HTML sobre barreres per a persones amb discapacitat. Per editar en llenguatge HTML hi ha moltes possibilitats: • Utilitzar un simple processador de textos i guardar el document com una pàgina web. • Utilitzar editors especialitzats, com el Dreamweaver o l’NVU. • Utilitzar altres programes, com el “Bloc de notas” (Llibreta) de Windows o el mateix navegador

mostrant-nos el codi font. Quan gravem el document, ho farem amb l’extensió htm.

(1) Escull un programa per editar el llenguatge HTML, com per exemple el “Bloc de notas “ (Llibreta) de Windows, que trobaràs a Inicia/Programes/Accessoris/Llibreta.

(2) Escriu tot el text en llenguatge HTML de la següent imatge. Guarda’l, a la teva carpeta amb el nom Barreres.htm i tanca’l.

(3) Busca el document i obre’l. Observaràs que directament també s’obre el navegador i apareix la següent imatge:

(4) Ara acoloriràs el fons i el text. Per a que els canvis afectin tot el fons del document, a l’etiqueta <BODY> afegeix-hi dues instruccions: <BODY bgcolor=”#FFFFFF” text=”#000000”>. Grava el document i tornar a visualitzar-lo amb el navegador. No hi observaràs cap variació perquè “FFFFFF” correspon al color blanc, i “000000”, al negre, que són els que l’editor ja té per defecte.

(5) Canvia els codis dels colors pels següents: <BODY bgcolor=”#0000FF” text=”#FFFFFF”>.Grava el document i visualitza els canvis amb un navegador. Hauries de veure la imatge de la figura.

(6) Ara fes que el text “discapacitat o disminució” surti en lletra negreta. Comprova el resultat i grava els canvis (Nota: Per posar un text en negreta es fan servir les etiquetes <B> i </B>).



Formats de paràgrafs

En aquest taller aprendràs a donar format als paràgrafs, és a dir, a separar-los, justificar-los i a fer salts de línia, però evidentment, hi ha més etiquetes relacionades amb el format de paràgrafs.

(1) Mitjançant la Llibreta o un altre editor, recupera la pàgina del taller anterior i visualitza-la en

llenguatge HTML .

(2) Després de la paraula barrera prem la tecla Retorn, per canviar de línia, i escriu el paràgraf següent:

“Moltes persones discapacitades o amb disminucions físiques per l’edat o per haver patit un accident tenen molts problemes per desenvolupar la seva vida amb normalitat. I no solament als carrers de les ciutats i pobles, sinó també a casa seva. Perquè et puguis fer càrrec de la seva situació, imagina els problemes que et sorgirien si tinguessis una cama enguixada i haguessis de pujar una escala estreta i llarga.”

(3) Grava i visualitza el resultat amb el navegador. Comprovaràs que el text apareix seguit sense el salt de línia corresponent.

Per indicar que hi ha dos paràgrafs, utilitza les etiquetes <P> i </P> al principi i final de cadascun d’ells, respectivament.

(4) Per deixar més espai entre el primer i el segon paràgraf, escriu l’etiqueta <BR> entre tots dos (aquesta etiqueta no cal tancar-la). Grava-ho i visualitza els resultats, que haurien d’aparèixer com a la figura.



Colors

Tots els colors que es poden utilitzar en llenguatge HTML han d’estar definits, perquè no es produeixin errors. Concretament, cada color té un codi en sistema numèric hexadecimal, tal com pots observa a la taula inferior.

(1) Busca a Internet alguna web que et doni els codis de tots els colors. D’aquesta manera, podràs utilitzar-los al teu gust.

He trobat la URL de la wikipedia: http://ca.wikipedia.org/wiki/Colors_HTML

(2) Recupera la pàgina Barreres del Taller 5 i varia els colors de fons i de text fins a trobar-ne algun que t’agradi.



Millorem l’aspecte de la web

En aquest taller ampliaràs i milloraràs l’aspecte de la teva pàgina. Per fer-ho, utilitzaràs quatre etiquetes noves.

(1) Recupera la pàgina anterior i escriu-hi el text següent:

(2) Una pàgina es pot dividir en apartats i subapartats fins a sis nivells diferents. Per això s’utilitzen les etiquetes <H1> i </H1>, que poden arribar fins a <H6> i </H6> per al nivell inferior. Fes servir aquestes etiquetes per a diferents nivells de paràgrafs (com més baix sigui el nivell, més petita serà la lletra).

(3) Mitjançant l’etiqueta <FONT COLOR=”#......”, varia el color de text dels dos primers paràgrafs.

(4) Mitjançant l’etiqueta <HR>, dibuixa una línia horit zontal separadora. Aquesta etiqueta no cal tancar-la amb </HR>.

Les barreres urbanístiques són les que trobem en l’ordenació dels nostres pobles i ciutats, com per exemple les vorades de les voreres o les escales de les vies públiques.

Les barreres del transport són les que trobem en desplaçar-nos amb autobús, tren, cotxe, etc.

Les barreres arquitectòniques són les que trobem a les edificacions, tant públiques (ajuntaments, habitatges, etc.) com privades (oficines, locals, habitatges, etc.), com per exemple els passadissos per on ha de circular una cadira de rodes.

(5) Amb l’etiqueta <BLOCKQUOTE>, deixa un sagnat en els tres subapartats.

(6) Visualitza el resultat i assegura’t que et queda com el de la figura inferior.



Imatges

Per inserir imatges s’utilitza l’etiqueta <IMG SRC=”Adreça de la imatge”>. Aquesta etiqueta no cal tancar-la, però pot incloure diferents atributs. Recorda que, abans d’utilitzar una imatge, és convenient tractar-la per tenir-la en el format i les dimensions adequats.

(1) Edita una nova pàgina HTML amb la mateixa estructura bàsica i els mateixos paràmetres que l’anterior. Com a títol, posa-hi “Dibuix barreres”, i al cos de la pàgina escriu-hi els paràgrafs següents:

(2) Crea a dins de la carpeta on fas aquest Taller una carpeta que es digui imatges. Copia del CD la

imatge dibuixBarreres a la carpeta imatges que acabes de crear i, després del paràgraf anterior, escriu el següent: <IMG SRC=’imatges\DibuixBarreres.jpg’>

(3) Grava la pàgina amb el nom Barreres-Taller 8, a la teva carpeta, i visualitza-la amb el navegador.

(4) Si vols que la imatge et quedi a la dreta a la pantalla, afegeix a l’etiqueta anterior: ALIGN=’RIGHT’. La instrucció serà: <IMG SRC=’imatges\DibuixBarreres.jpg’ ALIGN=’RIGHT’>.

(5) Per posar un contorn a la imatge, afegeix a l’etiqueta anterior: BORDER=’10’. El número indica el gruix en píxels del contorn de la imatge. L’etiqueta completa serà:

<IMG SRC=’imatges\DibuixBarreres.jpg’ ALIGN=’RIGHT’ BORDER=’10’>

(6) Si vols que, en passar el punter per damunt de la imatge, hi aparegui un text, afegeix a l’etiqueta anterior: ALT=’Busca set solucions’. L’etiqueta completa serà:

<IMG SRC=’imatges\DibuixBarreres.jpg’ ALIGN=’RIGHT’ BORDER=’10’ ALT=’Busca set solucions’>

La supressió d’aquestes barreres per facilitar la integració de les persones discapacitades ha causat

preocupació fins al punt que s’han redactat lleis en aquest sentit. Entre aquestes lleis cal destacar la Llei

20/1991, de 25 de novembre, anomenada Llei de promoció de l’accessibilitat i de la supressió de les

barreres arquitectòniques i d’aprovació del codi d’accessibilitat.

Observa la imatge i busca set solucions a les barreres.

(7) Grava els canvis i comprova els resultats.



Enllaços

En aquest taller enllaçaràs entre sí les dues pàgines que has creat anteriorment, i també faràs un enllaç a una web externa.

En crear l’enllaç entre les dues pàgines, pot ser que, en funció del navegador que utilitzis, no funcioni correctament, ja que poden sorgir problemes de protocols.

(1) Recupera la pàgina Barreres del Taller 7 i, al final de l’últim apartat, afegeix una altra línia horitzontal amb l’etiqueta <HR>.

(2) Després d’aquesta línia horitzontal, afegeix l’enllaç mitjançant l’etiqueta següent:

<a href=’Adreça de l’enllaç/Barreres2.htm’>Anar a l’activitat</a>

Observa que s’ha afegit una frase, que serà la que apareixerà per dur a terme l’enllaç.

(3) Grava els canvis i comprova els resultats amb diferents navegadors.

Funciona amb l’Explorer, el Mozilla i el Google Chrome.

(4) Per aconseguir que aquest text quedi alineat a la dreta, abans de l’etiqueta de l’enllaç escriu:

<p align=right>

Aquesta etiqueta no cal tancar-la amb </p>.

(5) Ara recupera la pàgina Barreres2 i, després de la imatge, afegeix aquesta etiqueta:

<a href=’Adreça de l’enllaç\Barreres.htm’>Tornar a la pàgina principal.</a>

(6) Grava els canvis i comprova els resultats amb diferents navegadors.

Funciona amb l’Explorer, el Mozilla i el Google Chrome.

(7) Finalment elaboraràs un enllaç a una altra web. Per fer-ho, a la pàgina Barreres i després de l’etiqueta de l’enllaç creat anteriorment, escriu:

<a href=’http://www.accesible.es’>Més informació</a>

(8) Grava els canvis i comprova els resultats.



Taules

Escriu el codi següent per crear una taula de dues files i tres columnes. Cada fila comença amb l’etiqueta <TR>, les cel· les d’encapçalament s’indiquen amb l’etiqueta <TH>, i una cel·la comuna, amb l’etiqueta <TD>. Comprova els resultats.


Taller d’Informàtica 11 (no és del Llibre)

Llistes

Baixa’t els apunts addicionals d’HTML i realitza els exemples de llistes que consten en els apunts.

Després personalitza aquestes llistes canviant els seus elements. Pots posar per exemple una llista amb

l’alineació d’un equip de futbol, o la llista de les assignatures que curses a l’ Institut, etc...

Cal que modifiquis aquests resultats per tal que s’adequin a una llista

personalitzada feta per tu.

CONTINGUT DE LA PÀGINA WEB PERSONAL

- El Tema de la pàgina web no ha de ser reprovable ni per part dels pares ni del professorat.

- Textos amb diferents formats i colors (face, size, color).

- Imatges tractades (poc pes, mida adequada).

- Taules (amb imatges i continguts a dins).

- Llistes.

- Vídeos.

- Música o Sons.

- Codi HTML ben estructurat.

- Enllaços (interns i externs).

1

CREACIÓ D’UN HOSTING GRATUÏT PER ALBERGAR LA NOSTRA WEB

(1) Creem un compte de correu gratuït amb el Hotmail

(2) Entrem a la pàgina web: www.000webhost.com

(3) Ens sortirà la pantalla següent en la que hem d’omplir tots els espais assenyalats.

http://www.000webhost.com/

2

Si tot és correcte ens sortirà una pantalla semblant a aquesta:

Ho deixem igual

Nom del subdomini

El nostre Nom

El nostre correu

Pasword

Pasword

Escrivim el que es veu a

dalt

Seleccionem l’opció

Cliquem aquí

3

A continuació obrim el correu que hem fet servir abans a l’omplir les dades anteriors. Tindrem

un missatge per activar el nostre hosting:

Ens portarà a una altra pàgina web:

Cliquem

4

Aquí cliquem en Go i ens sortirà la pàgina següent:

La part important és el que està emmarcat en vermell, concretament:

Domain

Username

Password

Que farem servir amb el FileZilla per pujar la nostra pàgina web a Internet.

1

UTILITZACIÓ DEL FILEZILLA PER GESTIONAR EL NOSTRE ESPAI WEB

Les dades que hem obtingut al crear el nostre hosting gratuït amb el 000webhost les hem de

fer servir per passar les dades del nostre web a Internet amb el FileZilla:

Entrem al FileZilla:

Ens sortirà la següent finestra:

Cliqueu

Cliquem

2

Se’ns obre una nova finestra:

Un cop s’han introduït totes les dades pitgem sobre el botó Connectar_

Nom del lloc

web

Domain del

000webhost

Username del 000webhost

Password que

introdujimos al crear

nuestro hosting con

000webhost

HTML

Documents

Transcript of HTML