SlideShare uma empresa Scribd logo
1 de 13
Informàtica 4 ESO
   El llenguatge HTML (HyperText Markup
    Language) es basa en marques o etiquetes
    que permeten definir els documents
    d’hipertext o pàgines web. Aquests no tenen
    format però se’ls hi pot donar mitjançant
    programes més sofisticats.
   Les etiquetes HTML delimiten parts de la
    pàgina web, i aquestes s’escriuen tancades
    entre els símbols < y >.
   Per exemple:
-   < html >
-   < head>
-   < body>
-   < br>
-   < tr>
   Moltes etiquetes van aparellades. Això vol
    dir que quan hi ha una etiqueta que indica el
    començament d’una secció de la pàgina ,
    obligatòriament n’hi ha d’haver una altra que
    n’indiqui el final.
   Exemple: < title >Títol < /title>
   En un document es
    distingeixen dues parts:
1.Capçalera compresa entre
les etiquetes:
< head >i < /head>
i indica dades sobre el
document que no es
visualitzen.
2.Cos comprès entre
< body>i < /body> i inclou tot
allò que el navegador
visualitzarà en obrir el
document.
 Les etiquetes més comunes ens serveixen per
  definir (veure el llibre):
-L’estructura del document
-El format de presentació
-Per treballar amb llistes
-Per incloure hipervincles
-Per treballar amb taules
-Per treballar amb taules
-Per treballar amb imatges
   En aquest pàgina hi trobareu les instruccions
    necessàries, pas a pas, per poder fer la vostra
    pàgina web.

   http://www.xtec.es/at_usuari/guies/internet/
    web/guiahtm/html.htm
   Existeixen programes específics que
    permeten crear pàgines web de manera
    visual i incorporen una sèrie de plantilles que
    es poden facilitar l’estructura de la pàgina.
   Per exemple:
-   Adobe Dreamweaver.
-   Nvu (programari lliure).
-   Edit2Web
-   Microsoft Frontpage, etc.
 Pràctica 1_ Unitat 9: Segueix els passos
  següents:
1.Iniciar el Bloc de notes o llibreta (fer clic al
botó inicia, seleccionem Tots els programes o
Programes i elegirem Accessoris.
2.Copiar-hi el contingut del text que apareix a
la (fig.9.3)
3. Seleccionem l’opció Anomena i desa en el
menú Fitxer.
4.Selecciona els meus documents per desar-ho.
5.Al camp de text Nom del fitxer posarem el
valor web1.html
6.Al camp Tipus de fitxer seleccionarem el valor
Tots els fitxers
7.Premerem el botó Desa per tancar la finestra i
salvar en disc el document
8. Accedirem a la carpeta Els meus documents
i hi trobarem el document desat anteriorment.
9.Farem clic sobre el document web1.html i
se’ns obrirà el navegador web per defecte i ens
mostrarà la pàgina web que hem creat.
   Fes la pràctica 2 i en acabar l’exercici 1 de la
    pàgina 214 del llibre.
   En acabat capteu com a imatge el resultat i
    afegiu-ho en el document word d’exercicis
    que esteu realitzant.
   Pràctica 3. pàg. 217

Mais conteúdo relacionado

Destaque

Tema _01. El món de la tecnologia
Tema _01. El món de la tecnologiaTema _01. El món de la tecnologia
Tema _01. El món de la tecnologiaIolanda Mallorques
 
Msn door Slimme Sliders
Msn door Slimme SlidersMsn door Slimme Sliders
Msn door Slimme SlidersPiramide67
 
Models de cotxes per fer les vistes i
Models de cotxes per fer les vistes iModels de cotxes per fer les vistes i
Models de cotxes per fer les vistes iIolanda Mallorques
 
Spaghetti napolitan
Spaghetti napolitanSpaghetti napolitan
Spaghetti napolitansa2ng
 
Tema 10. La recerca d'informació a internet
Tema 10. La recerca d'informació a internetTema 10. La recerca d'informació a internet
Tema 10. La recerca d'informació a internetIolanda Mallorques
 
CCNN. Els estats de la matèria.
CCNN. Els estats de la matèria.CCNN. Els estats de la matèria.
CCNN. Els estats de la matèria.Iolanda Mallorques
 
60318032 baigiang-ktmt-2010
60318032 baigiang-ktmt-201060318032 baigiang-ktmt-2010
60318032 baigiang-ktmt-2010Em Cu
 
Tecnologias (elementos estructurales)
Tecnologias (elementos estructurales)Tecnologias (elementos estructurales)
Tecnologias (elementos estructurales)Galito Santiago
 

Destaque (17)

Tema _01. El món de la tecnologia
Tema _01. El món de la tecnologiaTema _01. El món de la tecnologia
Tema _01. El món de la tecnologia
 
Msn door Slimme Sliders
Msn door Slimme SlidersMsn door Slimme Sliders
Msn door Slimme Sliders
 
Models de cotxes per fer les vistes i
Models de cotxes per fer les vistes iModels de cotxes per fer les vistes i
Models de cotxes per fer les vistes i
 
Makespace
MakespaceMakespace
Makespace
 
Spaghetti napolitan
Spaghetti napolitanSpaghetti napolitan
Spaghetti napolitan
 
Tema 10. La recerca d'informació a internet
Tema 10. La recerca d'informació a internetTema 10. La recerca d'informació a internet
Tema 10. La recerca d'informació a internet
 
Chuckle it away healthy way njea2011
Chuckle it away healthy way njea2011Chuckle it away healthy way njea2011
Chuckle it away healthy way njea2011
 
Els materials metàl·lics
Els materials metàl·licsEls materials metàl·lics
Els materials metàl·lics
 
CCNN. Els estats de la matèria.
CCNN. Els estats de la matèria.CCNN. Els estats de la matèria.
CCNN. Els estats de la matèria.
 
Materials.els plàstics
Materials.els plàsticsMaterials.els plàstics
Materials.els plàstics
 
60318032 baigiang-ktmt-2010
60318032 baigiang-ktmt-201060318032 baigiang-ktmt-2010
60318032 baigiang-ktmt-2010
 
Tecnologias (elementos estructurales)
Tecnologias (elementos estructurales)Tecnologias (elementos estructurales)
Tecnologias (elementos estructurales)
 
Tema 3 Les formes de la terra
Tema 3 Les formes de la terraTema 3 Les formes de la terra
Tema 3 Les formes de la terra
 
Substancies pures i mescles
Substancies pures i mesclesSubstancies pures i mescles
Substancies pures i mescles
 
ArduRadio
ArduRadio ArduRadio
ArduRadio
 
Tema 2. Dibuix tècnic
Tema 2. Dibuix tècnicTema 2. Dibuix tècnic
Tema 2. Dibuix tècnic
 
Tema 2. dibuix tècnic. 1 eso
Tema 2. dibuix tècnic. 1 esoTema 2. dibuix tècnic. 1 eso
Tema 2. dibuix tècnic. 1 eso
 

Semelhante a Pàgines web amb HTML. Presentació Tema_9

4. Introducció a Joomla
4. Introducció a Joomla4. Introducció a Joomla
4. Introducció a Joomlamnicolau
 
10.Personalitzar Plantilla
10.Personalitzar Plantilla10.Personalitzar Plantilla
10.Personalitzar Plantillamnicolau
 
Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...
Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...
Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...Paquita Ribas
 
SIGT09 Introducció Joomla
SIGT09 Introducció JoomlaSIGT09 Introducció Joomla
SIGT09 Introducció JoomlaAlex Araujo
 
Programari d'un ordinador 1r trimestre
Programari d'un ordinador 1r trimestre Programari d'un ordinador 1r trimestre
Programari d'un ordinador 1r trimestre eriik12
 
Resum
ResumResum
Resumcfgmi
 
Tutorial La Meva XTEC (2)
Tutorial La Meva XTEC (2)Tutorial La Meva XTEC (2)
Tutorial La Meva XTEC (2)Marc Bellapart
 
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
 
M8 Aplicacions Web
M8 Aplicacions WebM8 Aplicacions Web
M8 Aplicacions WebEloi Roca
 

Semelhante a Pàgines web amb HTML. Presentació Tema_9 (20)

4. Introducció a Joomla
4. Introducció a Joomla4. Introducció a Joomla
4. Introducció a Joomla
 
Html 5
Html 5Html 5
Html 5
 
UD4 Web
UD4 WebUD4 Web
UD4 Web
 
10.Personalitzar Plantilla
10.Personalitzar Plantilla10.Personalitzar Plantilla
10.Personalitzar Plantilla
 
Html, Xtml & Php
Html, Xtml & PhpHtml, Xtml & Php
Html, Xtml & Php
 
Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...
Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...
Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...
 
SIGT09 Introducció Joomla
SIGT09 Introducció JoomlaSIGT09 Introducció Joomla
SIGT09 Introducció Joomla
 
Marcos baldovipac3
Marcos baldovipac3Marcos baldovipac3
Marcos baldovipac3
 
Programari
ProgramariProgramari
Programari
 
Programari
ProgramariProgramari
Programari
 
Power3
Power3Power3
Power3
 
Programari
ProgramariProgramari
Programari
 
Programari d'un ordinador 1r trimestre
Programari d'un ordinador 1r trimestre Programari d'un ordinador 1r trimestre
Programari d'un ordinador 1r trimestre
 
Resum
ResumResum
Resum
 
Tutorial La Meva XTEC (2)
Tutorial La Meva XTEC (2)Tutorial La Meva XTEC (2)
Tutorial La Meva XTEC (2)
 
Accessibilitat als continguts digitals
Accessibilitat als continguts digitalsAccessibilitat als continguts digitals
Accessibilitat als continguts digitals
 
Presentació dreamveawer
Presentació dreamveawerPresentació dreamveawer
Presentació dreamveawer
 
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
 
M8 Aplicacions Web
M8 Aplicacions WebM8 Aplicacions Web
M8 Aplicacions Web
 
Html
HtmlHtml
Html
 

Pàgines web amb HTML. Presentació Tema_9

  • 2. El llenguatge HTML (HyperText Markup Language) es basa en marques o etiquetes que permeten definir els documents d’hipertext o pàgines web. Aquests no tenen format però se’ls hi pot donar mitjançant programes més sofisticats.
  • 3. Les etiquetes HTML delimiten parts de la pàgina web, i aquestes s’escriuen tancades entre els símbols < y >.  Per exemple: - < html > - < head> - < body> - < br> - < tr>
  • 4. Moltes etiquetes van aparellades. Això vol dir que quan hi ha una etiqueta que indica el començament d’una secció de la pàgina , obligatòriament n’hi ha d’haver una altra que n’indiqui el final.  Exemple: < title >Títol < /title>
  • 5. En un document es distingeixen dues parts: 1.Capçalera compresa entre les etiquetes: < head >i < /head> i indica dades sobre el document que no es visualitzen. 2.Cos comprès entre < body>i < /body> i inclou tot allò que el navegador visualitzarà en obrir el document.
  • 6.  Les etiquetes més comunes ens serveixen per definir (veure el llibre): -L’estructura del document -El format de presentació -Per treballar amb llistes -Per incloure hipervincles -Per treballar amb taules -Per treballar amb taules -Per treballar amb imatges
  • 7. En aquest pàgina hi trobareu les instruccions necessàries, pas a pas, per poder fer la vostra pàgina web.  http://www.xtec.es/at_usuari/guies/internet/ web/guiahtm/html.htm
  • 8. Existeixen programes específics que permeten crear pàgines web de manera visual i incorporen una sèrie de plantilles que es poden facilitar l’estructura de la pàgina.  Per exemple: - Adobe Dreamweaver. - Nvu (programari lliure). - Edit2Web - Microsoft Frontpage, etc.
  • 9.  Pràctica 1_ Unitat 9: Segueix els passos següents: 1.Iniciar el Bloc de notes o llibreta (fer clic al botó inicia, seleccionem Tots els programes o Programes i elegirem Accessoris. 2.Copiar-hi el contingut del text que apareix a la (fig.9.3)
  • 10. 3. Seleccionem l’opció Anomena i desa en el menú Fitxer. 4.Selecciona els meus documents per desar-ho. 5.Al camp de text Nom del fitxer posarem el valor web1.html 6.Al camp Tipus de fitxer seleccionarem el valor Tots els fitxers 7.Premerem el botó Desa per tancar la finestra i salvar en disc el document
  • 11. 8. Accedirem a la carpeta Els meus documents i hi trobarem el document desat anteriorment. 9.Farem clic sobre el document web1.html i se’ns obrirà el navegador web per defecte i ens mostrarà la pàgina web que hem creat.
  • 12. Fes la pràctica 2 i en acabar l’exercici 1 de la pàgina 214 del llibre.  En acabat capteu com a imatge el resultat i afegiu-ho en el document word d’exercicis que esteu realitzant.
  • 13. Pràctica 3. pàg. 217