Introducció a la utilitat del HTML en la creació a Internet

1. Introducció al
llenguatge d’Internet:
HTML
Informàtica 4t ESO
Institut Joan Solà, 2013Jordi Labèrnia

2. Què és Internet?
• Xarxa d'abast mundial d'ordinadors
interconnectats
• Permet enviar una còpia d'un document
contingut en l'ordinador HOST a
ordinador CLIENT

3. Com és un HOST?
• Connectat a Internet
sempre
• Adreça IP (Internet
Protocol) fixa
• Software per:
– compartir contingut amb
l’exterior
– protecció d’atacs
– control d’accès

4. Què té un ordinador client?
• Connexió a
Internet
• Navegador (nom
prové, en part,
del Netscape
navigator)

5. Com es transfereix la informació?
1. Teclejo URL (Uniform Resource Locator)
2. DNS (Domain Name System) tradueix a
adreça IP (en xifres p.e. 135.146.20.236) del
servidor
3. Servidor rep la petició i comprova si té la
informació
4. Servidor envia la pàgina al client
5. Navegador del client rep els recursos i els
organitza per veure’ls en pantalla

6. No ens arriben les webs directament! el
nostre navegador ens ho ha de
“preparar”
Com? Els navegadors tenen dues funcions
bàsiques:
• aconseguir, mitjançant el protocol HTTP, una
còpia del document exterior desitjat
• intepretar-lo segons el llenguatge HTML.
(evolucionat a HTML5, XTML, XHTML...)

7. Navegadors més usats
• Explorer de
• Firefox de la Fundació Mozilla
• Chrome de
• Safari d'Apple
• Opera

8. Codificació
• Hypertext: Informació amb text, imatges, so,
enllaços (hipervincles), etc.
• Si observem un document HTML al
navegador, veiem allò que l'autor vol, però no
el codi que ho fa possible. (Hi ha opcions per
veure’l)
• En el codi, s’intercalen en el text, conjunts
formats per una o més lletres i els signes < >:
Són etiquetes (Mark-ups)

9. Com es dissenya en HTML?
• Per dissenyar amb codi HTML un document
cal conèixer el llenguatge, i pot ser feixuc.
• S'han desenvolupat els editors del
tipus wysiwyg (what you see is what you
get): allò que veus és allò que obtens.

10. Editors wyswyg
• Kompozer (codi lliure)
• Macromedia Dreamweaver
• Microsoft Frontpage
Procés:
1.Editem
2.Pengem a un domini (cal allotjament!)

11. Aplicacions online
Permeten crear continguts sobre plantilles (més
fàcil, no modificarem gaire el format)
• Llocs web
Google Sites, Wix, Jimdo, Actiweb
Webnode, Magix...
• Blogs
Blogger de Google,
Wordpress, Tumblr,
Blog.com...

12. “I què he d’utilitzar per fer una web?”
Si vull una web
més personal:
editors
wyswyg
Si ja em van bé els
preformats (cada cop
hi ha més varietat):
webs o blogs online

13. I el HTML serveix per alguna cosa?
• Per fer modificacions més
directament:
Tamany d’una imatge, alineació d’un
objecte, especificacions en un vídeo,
detecció de problemes...
• Per entendre el muntatge de
documents web

14. Gràcies per la
vostra atenció
Ara seria un bon moment per fer preguntes…