SlideShare uma empresa Scribd logo
1 de 15
Informàtica 2n Batxillerat
Introducció a la Web
• La visita a pàgines Web és el servei més utilitzat
d’Internet. Tant és així que resulta difícil trobar una
empresa o institució que no disposa d’una o diverses
d’aquestes pàgines (museus, universitats, col·legis,
botigues...).
• La creació de pàgines Web pot parèixer una tasca
complicada, no obstant això, els editors de pàgines
Web l’han convertit en una cosa tan senzilla com la
creació de documents amb un processador de textos.
Introducció a la Web
• La web és un sistema HIPERTEXT
• Llenguatge HTML
(Hypertext Marked
Language) : el codi HTML ens indica bàsicament
on col·locar el text, la imatge, el vídeo i la forma
que tindran aquests al ser col·locats en la fulla.
Introducció a la Web
• HTML 4.0 (actual versió)
• HTML 5.0 (futura versió del llenguatge ja present)
• HTML VS. XHTML (versió més estricta
semànticament basada en XML)
• HTML es complementa amb un conjunt de normes
denominades CSS (Cascade Style Sheet) o fulls
d’estil.
• HTML s’encarrega de definir l’estructura de la fulla
mentre que CSS ens proporciona una sèrie de regles
encarregades de definir el seu format i apariència.
• Per a crear una pàgina Web es pot utilitzar un editor de text, en el
que s’escriguen les etiquetes del llenguatge HTML; per exemple, el
Bloc de notes en Windows i Gedit en Linux. O també un dels
molts programes disponibles en el mercat que permeten crear
pàgines Web sense tindre coneixements de l’anomenat llenguatge,
com és el cas de Microsoft FrontPage i Kompozer,
Dreamweaver, NVU, etc...

COM CREAR UN DOCUMENT HTML
• Els documents HTML han de tindre l'extensió
html o htm, perquè puguen ser visualitzats en
els navegadors (programes que permeten
visualitzar les pàgines web).
• Els navegadors s'encarreguen d'interpretar el
codi HTML dels documents, i de mostrar als
usuaris les pàgines web resultants del codi
interpretat.

COM CREAR UN DOCUMENT HTML
<html>
Etiquetes que indiquen que el text està escrit en HTML

<head>
Etiquetes i continguts de l’encapçalat
Dades que no apareixen en la nostra pàgina però que són importants per
catalogar-la: Títol, paraules clau, ...

</head>
<body>
Etiquetes i continguts del cos
Part del document que serà mostrat pel navegador

</body>
</html>
PARTS D’UN DOCUMENT HTML
• Exemple: www.plos.org

PARTS D’UN DOCUMENT HTML
En la Web podem trobar, o construir, dos tipus
de pàgines:
• Les que es presenten sense moviment i sense
funcionalitats més enllà dels enllaços.
• Les pàgines que tenen efectes especials i en les
que podem interactuar.

PÀGINES ESTÀTIQUES VS. DINÀMIQUES
Pàgines dinàmiques
• Pàgines dinàmiques de client: són les pàgines
dinàmiques que es processen en el client. En
aquestes pàgines tota la càrrega de processament
dels efectes i funcionalitats les suporta el navegador.
• Pàgines dinàmiques de servidor: són
reconegudes, interpretades i executades pel propi
servidor. Són especialment útils en treballs en els
que s’ha d’accedir a informació centralitzada,
situada en una BD en el servidor, i quan per raons
de seguretat els càlculs no es poden realitzar a
l’ordinador de l’usuari.
Llenguatges web de client
• Javascript: llenguatge de programació utilitzat
per a crear xicotets programes encarregats de
realitzar accions dins l’àmbit d’una pàgina web.
▫ Efectes especials: continguts dinàmics i
elements de la pàgina amb moviment, que canvien
de color...
▫ Pàgines
interactives:
amb
programes
calculadora, agendes o taules de càlcul...
EXEMPLE 2: JAVASCRIPT
Llenguatges web de client
• Visual Basic Script: SOLS COMPATIBLE AMB IE.
Basat en VB, tant la sintaxi com la forma de treballar.
• CSS: fulls d’estil en cascada. Tecnologia que ens permet
crear pàgines web de forma més exacta. Es declaren dins
el codi HTML.
▫ Style
▫ Color, font-weight
▫ Espaiat entre línies
▫ Espaiat entre caràcters
EXEMPLE 3: CSS
Llenguatges web de client
• Applets de Java: altra manera d’incloure codi
a executar en els clients que visualitzen una web.
El principal avantatge d’utilitzar applets
consisteix en que són molt menys dependents
del navegador que els scripts en Javascript. A
més a més són independents del SO utilitzat.

EXEMPLE 4: APPLETS DE JAVA (RELLOTGE 3D)
Llenguatges web de servidor
• CGI (Common Gateway Interface): sistema
més antic que existeix per a la programació de
pàgines dinàmiques de servidor. S’escriu
normalment en Perl (llenguatge de programació
molt pràctic per a extraure informació d’arxius
de text i generar informes a partir del contingut
dels arxius).
• ASP: tecnologia desenvolupada per Microsoft
per a la creació de pàgines dinàmiques de
servidor.
Llenguatges web de servidor
• PHP: llenguatge de programació del costat del
servidor gratuït i independent de plataforma.
S’executa en el servidor web abans que s’envie la
pàgina a través de Internet al client. Pot realitzar
accessos a BD, connexions de xarxa...
• JSP: acrònim de Java Server Pages, és a dir,
Pàgines de Servidor
Java. És doncs, una
tecnologia orientada a crear pàgines web amb
programació en Java.

Mais conteúdo relacionado

Destaque

Destaque (8)

Figures 3D
Figures 3DFigures 3D
Figures 3D
 
UD3 PROGRAMACIÓ
UD3 PROGRAMACIÓUD3 PROGRAMACIÓ
UD3 PROGRAMACIÓ
 
Màquines i mecanismes
Màquines i mecanismesMàquines i mecanismes
Màquines i mecanismes
 
Edició digital
Edició digitalEdició digital
Edició digital
 
Internet
InternetInternet
Internet
 
UD Estructures
UD EstructuresUD Estructures
UD Estructures
 
UD3 Programació
UD3 ProgramacióUD3 Programació
UD3 Programació
 
Paginas de matematicas
Paginas de matematicasPaginas de matematicas
Paginas de matematicas
 

Semelhante a UD4 Web

Eines per disposar d'un web o un blog
Eines per disposar d'un web o un blogEines per disposar d'un web o un blog
Eines per disposar d'un web o un blogsantfeliuonline
 
Pràctica na1 uf uf1 aplicacions web
Pràctica na1 uf uf1 aplicacions webPràctica na1 uf uf1 aplicacions web
Pràctica na1 uf uf1 aplicacions webGerardMP
 
Introducció a Drupal - CINC Girona
Introducció a Drupal - CINC GironaIntroducció a Drupal - CINC Girona
Introducció a Drupal - CINC Gironatalkomraja
 
Resum
ResumResum
Resumcfgmi
 
ARSO-M6: Administracio del web - Guio
ARSO-M6: Administracio del web - GuioARSO-M6: Administracio del web - Guio
ARSO-M6: Administracio del web - GuioAurora Lara Marin
 
Tema 4 drive blocs i wikis1516
Tema 4 drive blocs i wikis1516Tema 4 drive blocs i wikis1516
Tema 4 drive blocs i wikis1516adieste
 
Tema 3 internet_1516
Tema 3 internet_1516Tema 3 internet_1516
Tema 3 internet_1516adieste
 
Pàgines web amb HTML. Presentació Tema_9
Pàgines web amb HTML. Presentació Tema_9Pàgines web amb HTML. Presentació Tema_9
Pàgines web amb HTML. Presentació Tema_9Iolanda Mallorques
 
HTML EL LLENGUATGE D'INTERNET
HTML EL LLENGUATGE D'INTERNETHTML EL LLENGUATGE D'INTERNET
HTML EL LLENGUATGE D'INTERNETjjcobmkars
 
Eines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de websEines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de websLa Borrassa rural lab
 
Curs Wordpress Ajuntament Platja d'Aro
Curs Wordpress Ajuntament Platja d'AroCurs Wordpress Ajuntament Platja d'Aro
Curs Wordpress Ajuntament Platja d'AroGerard Encabo
 
Avenços en tecnologies web per entorns intel.ligents
Avenços en tecnologies web per entorns intel.ligentsAvenços en tecnologies web per entorns intel.ligents
Avenços en tecnologies web per entorns intel.ligentsaitorrod
 

Semelhante a UD4 Web (20)

Eines per disposar d'un web o un blog
Eines per disposar d'un web o un blogEines per disposar d'un web o un blog
Eines per disposar d'un web o un blog
 
Pràctica na1 uf uf1 aplicacions web
Pràctica na1 uf uf1 aplicacions webPràctica na1 uf uf1 aplicacions web
Pràctica na1 uf uf1 aplicacions web
 
Introducció a Drupal - CINC Girona
Introducció a Drupal - CINC GironaIntroducció a Drupal - CINC Girona
Introducció a Drupal - CINC Girona
 
Html 5
Html 5Html 5
Html 5
 
Resum
ResumResum
Resum
 
ARSO-M6: Administracio del web - Guio
ARSO-M6: Administracio del web - GuioARSO-M6: Administracio del web - Guio
ARSO-M6: Administracio del web - Guio
 
Html, Xtml & Php
Html, Xtml & PhpHtml, Xtml & Php
Html, Xtml & Php
 
Temes 4i5 internet
Temes 4i5 internetTemes 4i5 internet
Temes 4i5 internet
 
Tema 4 drive blocs i wikis1516
Tema 4 drive blocs i wikis1516Tema 4 drive blocs i wikis1516
Tema 4 drive blocs i wikis1516
 
Tema 3 internet_1516
Tema 3 internet_1516Tema 3 internet_1516
Tema 3 internet_1516
 
Pàgines web amb HTML. Presentació Tema_9
Pàgines web amb HTML. Presentació Tema_9Pàgines web amb HTML. Presentació Tema_9
Pàgines web amb HTML. Presentació Tema_9
 
Kompozer (nvu)
Kompozer (nvu)Kompozer (nvu)
Kompozer (nvu)
 
CMS
CMSCMS
CMS
 
Les webs
Les websLes webs
Les webs
 
HTML
HTMLHTML
HTML
 
HTML EL LLENGUATGE D'INTERNET
HTML EL LLENGUATGE D'INTERNETHTML EL LLENGUATGE D'INTERNET
HTML EL LLENGUATGE D'INTERNET
 
HTML
HTMLHTML
HTML
 
Eines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de websEines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de webs
 
Curs Wordpress Ajuntament Platja d'Aro
Curs Wordpress Ajuntament Platja d'AroCurs Wordpress Ajuntament Platja d'Aro
Curs Wordpress Ajuntament Platja d'Aro
 
Avenços en tecnologies web per entorns intel.ligents
Avenços en tecnologies web per entorns intel.ligentsAvenços en tecnologies web per entorns intel.ligents
Avenços en tecnologies web per entorns intel.ligents
 

Último

ESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdf
ESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdfESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdf
ESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdfISMAELALVAREZCABRERA
 
Programa Dansa Ara Garraf Les Roquetes Sa
Programa Dansa Ara Garraf Les Roquetes SaPrograma Dansa Ara Garraf Les Roquetes Sa
Programa Dansa Ara Garraf Les Roquetes SaISMAELALVAREZCABRERA
 
ESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdf
ESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdfESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdf
ESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdfISMAELALVAREZCABRERA
 
feedback.pdf55555555555555555555555555555
feedback.pdf55555555555555555555555555555feedback.pdf55555555555555555555555555555
feedback.pdf55555555555555555555555555555twunt
 
4 RATLLES - MAIG 2024 - ESCOLA AMETLLERS
4 RATLLES - MAIG 2024 - ESCOLA AMETLLERS4 RATLLES - MAIG 2024 - ESCOLA AMETLLERS
4 RATLLES - MAIG 2024 - ESCOLA AMETLLERSSuperAdmin9
 
INFORME_BAREM_PROVISIONAL_BAREMELLUCH.pdf
INFORME_BAREM_PROVISIONAL_BAREMELLUCH.pdfINFORME_BAREM_PROVISIONAL_BAREMELLUCH.pdf
INFORME_BAREM_PROVISIONAL_BAREMELLUCH.pdfErnest Lluch
 
TIPUS DE POSICIONS D'UNA RECTA. VERITABLE MAGNITUD.
TIPUS DE POSICIONS D'UNA RECTA. VERITABLE MAGNITUD.TIPUS DE POSICIONS D'UNA RECTA. VERITABLE MAGNITUD.
TIPUS DE POSICIONS D'UNA RECTA. VERITABLE MAGNITUD.Lasilviatecno
 

Último (7)

ESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdf
ESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdfESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdf
ESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdf
 
Programa Dansa Ara Garraf Les Roquetes Sa
Programa Dansa Ara Garraf Les Roquetes SaPrograma Dansa Ara Garraf Les Roquetes Sa
Programa Dansa Ara Garraf Les Roquetes Sa
 
ESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdf
ESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdfESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdf
ESCOLA MEDITERRÀNIA revista Sant Jordi 2024__MOSTRA (1).pdf
 
feedback.pdf55555555555555555555555555555
feedback.pdf55555555555555555555555555555feedback.pdf55555555555555555555555555555
feedback.pdf55555555555555555555555555555
 
4 RATLLES - MAIG 2024 - ESCOLA AMETLLERS
4 RATLLES - MAIG 2024 - ESCOLA AMETLLERS4 RATLLES - MAIG 2024 - ESCOLA AMETLLERS
4 RATLLES - MAIG 2024 - ESCOLA AMETLLERS
 
INFORME_BAREM_PROVISIONAL_BAREMELLUCH.pdf
INFORME_BAREM_PROVISIONAL_BAREMELLUCH.pdfINFORME_BAREM_PROVISIONAL_BAREMELLUCH.pdf
INFORME_BAREM_PROVISIONAL_BAREMELLUCH.pdf
 
TIPUS DE POSICIONS D'UNA RECTA. VERITABLE MAGNITUD.
TIPUS DE POSICIONS D'UNA RECTA. VERITABLE MAGNITUD.TIPUS DE POSICIONS D'UNA RECTA. VERITABLE MAGNITUD.
TIPUS DE POSICIONS D'UNA RECTA. VERITABLE MAGNITUD.
 

UD4 Web

  • 2. Introducció a la Web • La visita a pàgines Web és el servei més utilitzat d’Internet. Tant és així que resulta difícil trobar una empresa o institució que no disposa d’una o diverses d’aquestes pàgines (museus, universitats, col·legis, botigues...). • La creació de pàgines Web pot parèixer una tasca complicada, no obstant això, els editors de pàgines Web l’han convertit en una cosa tan senzilla com la creació de documents amb un processador de textos.
  • 3. Introducció a la Web • La web és un sistema HIPERTEXT • Llenguatge HTML (Hypertext Marked Language) : el codi HTML ens indica bàsicament on col·locar el text, la imatge, el vídeo i la forma que tindran aquests al ser col·locats en la fulla.
  • 4. Introducció a la Web • HTML 4.0 (actual versió) • HTML 5.0 (futura versió del llenguatge ja present) • HTML VS. XHTML (versió més estricta semànticament basada en XML) • HTML es complementa amb un conjunt de normes denominades CSS (Cascade Style Sheet) o fulls d’estil. • HTML s’encarrega de definir l’estructura de la fulla mentre que CSS ens proporciona una sèrie de regles encarregades de definir el seu format i apariència.
  • 5. • Per a crear una pàgina Web es pot utilitzar un editor de text, en el que s’escriguen les etiquetes del llenguatge HTML; per exemple, el Bloc de notes en Windows i Gedit en Linux. O també un dels molts programes disponibles en el mercat que permeten crear pàgines Web sense tindre coneixements de l’anomenat llenguatge, com és el cas de Microsoft FrontPage i Kompozer, Dreamweaver, NVU, etc... COM CREAR UN DOCUMENT HTML
  • 6. • Els documents HTML han de tindre l'extensió html o htm, perquè puguen ser visualitzats en els navegadors (programes que permeten visualitzar les pàgines web). • Els navegadors s'encarreguen d'interpretar el codi HTML dels documents, i de mostrar als usuaris les pàgines web resultants del codi interpretat. COM CREAR UN DOCUMENT HTML
  • 7. <html> Etiquetes que indiquen que el text està escrit en HTML <head> Etiquetes i continguts de l’encapçalat Dades que no apareixen en la nostra pàgina però que són importants per catalogar-la: Títol, paraules clau, ... </head> <body> Etiquetes i continguts del cos Part del document que serà mostrat pel navegador </body> </html> PARTS D’UN DOCUMENT HTML
  • 8. • Exemple: www.plos.org PARTS D’UN DOCUMENT HTML
  • 9. En la Web podem trobar, o construir, dos tipus de pàgines: • Les que es presenten sense moviment i sense funcionalitats més enllà dels enllaços. • Les pàgines que tenen efectes especials i en les que podem interactuar. PÀGINES ESTÀTIQUES VS. DINÀMIQUES
  • 10. Pàgines dinàmiques • Pàgines dinàmiques de client: són les pàgines dinàmiques que es processen en el client. En aquestes pàgines tota la càrrega de processament dels efectes i funcionalitats les suporta el navegador. • Pàgines dinàmiques de servidor: són reconegudes, interpretades i executades pel propi servidor. Són especialment útils en treballs en els que s’ha d’accedir a informació centralitzada, situada en una BD en el servidor, i quan per raons de seguretat els càlculs no es poden realitzar a l’ordinador de l’usuari.
  • 11. Llenguatges web de client • Javascript: llenguatge de programació utilitzat per a crear xicotets programes encarregats de realitzar accions dins l’àmbit d’una pàgina web. ▫ Efectes especials: continguts dinàmics i elements de la pàgina amb moviment, que canvien de color... ▫ Pàgines interactives: amb programes calculadora, agendes o taules de càlcul... EXEMPLE 2: JAVASCRIPT
  • 12. Llenguatges web de client • Visual Basic Script: SOLS COMPATIBLE AMB IE. Basat en VB, tant la sintaxi com la forma de treballar. • CSS: fulls d’estil en cascada. Tecnologia que ens permet crear pàgines web de forma més exacta. Es declaren dins el codi HTML. ▫ Style ▫ Color, font-weight ▫ Espaiat entre línies ▫ Espaiat entre caràcters EXEMPLE 3: CSS
  • 13. Llenguatges web de client • Applets de Java: altra manera d’incloure codi a executar en els clients que visualitzen una web. El principal avantatge d’utilitzar applets consisteix en que són molt menys dependents del navegador que els scripts en Javascript. A més a més són independents del SO utilitzat. EXEMPLE 4: APPLETS DE JAVA (RELLOTGE 3D)
  • 14. Llenguatges web de servidor • CGI (Common Gateway Interface): sistema més antic que existeix per a la programació de pàgines dinàmiques de servidor. S’escriu normalment en Perl (llenguatge de programació molt pràctic per a extraure informació d’arxius de text i generar informes a partir del contingut dels arxius). • ASP: tecnologia desenvolupada per Microsoft per a la creació de pàgines dinàmiques de servidor.
  • 15. Llenguatges web de servidor • PHP: llenguatge de programació del costat del servidor gratuït i independent de plataforma. S’executa en el servidor web abans que s’envie la pàgina a través de Internet al client. Pot realitzar accessos a BD, connexions de xarxa... • JSP: acrònim de Java Server Pages, és a dir, Pàgines de Servidor Java. És doncs, una tecnologia orientada a crear pàgines web amb programació en Java.