Competències bàsiques en TIC
 
 

Mòdul 3: Informàtica bàsica

 
Imprimir la unitat
  Tema: Internet
  Unitat 2.2: Navegadors A (I)
   
  Teoria de la unitat
   
 

El llenguatge HTML

En la unitat anterior ja vàrem parlar d'un tipus de programa que ens permet accedir i visualitzar les pàgines web: els navegadors. Ara ens detindrem una mica més en aquest tipus de programa i veurem les principals possibilitats que ens ofereixen.

Un navegador és un programa informàtic que permet visualitzar documents electrònics escrits en un llenguatge anomenat html, que es trobin emmagatzemats en el mateix ordinador o bé en qualsevol altre dispositiu al qual el nostre ordinador hi estigui connectat.

Una pàgina web és un document electrònic que pot incloure text, imatges, so, vídeos, animacions, etc. mitjançant una sèrie d'instruccions que el navegador és capaç d'interpretar i presentar com els dissenyadors de la pàgina web els havien estructurat.

Les pàgines web són document electrònics que tenen l'extensió .htm o .html. Aquests documents no inclouen tots elements que observem a la pàgina web.

Així, les imatges, sons, vídeos, animacions, etc. s'arxiven en documents independents i quan el navegador sol·licita una pàgina web a un servidor ha de descarregar tant l'arxiu amb el llenguatge html com els elements que conté la pàgina web.

Això fa que alguns elements triguin més a carregar-se en el navegador que d'altres. Sovint, quan accedim a una pàgina web, podem observar abans text que les fotografies, ja que aquestes, d'acord amb la mida dels fitxers on estan desades, triguen més a descarregar-se.

Un element fonamental relacionat amb el llenguatge html és el d'hipervincle. Un hipervincle, que també s'anomena vincle o enllaç, és un element de la pàgina web que en clicar-hi al damunt amb el ratolí ens permet desplaçar-nos a un altre punt de la mateixa pàgina web o a una altra pàgina o a un altre lloc web.

Els hipervincles poden estar situats en fragments de text, imatges, fotografies, etc. i en passar-hi el ratolí pel damunt el punter canvia d'aspecte, transformant-se, habitualment, en una mà .

Si els hipervincles estan situats en un fragment de text, aquest acostuma a tenir un aspecte diferent (en el nostre cas són de color blau) i en situar el ratolí al damunt acostumen a canviar d'aspecte i/o de format.

Fixeu-vos en aquest dos elements, observeu què succeeix en situar el punter del ratolí al damunt i prova de fer-hi clic al damunt de cadascun d'ells:

Inici de la pàgina

torna enrere

Efectivament, tant el dibuix com el text contenen un hipervincle a l'inici d'aquest apartat de la unitat.

Fixa't, a més, que a la barra d'estat apareix l'adreça web de l'enllaç (si et situes al damunt d'aquestes imatges amb el ratolí ho podràs comprovar):

En el cas que un enllaç ens adreci a una altra part de la pàgina web que tenim en pantalla, al final de l'enllaç apareix el símbol #.

 

   
  Pràctiques
   
 

Per desenvolupar els continguts de la unitat que estem treballant et proposem de fer les pràctiques següents...

 

Pràctica 1: El codi font

Com hem assenyalat, les pàgines web estan escrites en un tipus de llenguatge anomenat HTML. Aquest llenguatge conté una sèrie d'instruccions mitjançant unes paraules clau anomenades tags que el navegador interpreta i executa.

Els tags són entre els signes < i > i sempre en trobem un al principi i un al final de l'objecte al qual fan referència.

Una pàgina web ha de tenir pel cap baix els tags següents:

    <html> 
    <head> 
    <title>títol de la pàgina 
    </title> 
    </head> 
    <body> 
    document
    </body> 
    </html>
    Inici del document  
    Inici de la capçalera del document 
    Inici del títol 
    Acabament del títol del document 
    Final de la capçalera 
    Inici del cos del document 
    Contingut del document 
    Final del contingut del document 
    Fi del document

    En aquesta pràctica accedirem a una pàgina web molt senzilla i observarem el llenguatge HTML amb que està elaborada:

    1. Accedeix a la pàgina web fent clic amb el ratolí aquí.

    2. Fes clic a a la barra de menú.

    3. Fes clic damunt Font de la pàgina.

    Veureu quelcom similar a:

    "<html>
    <head>
    <title>Imatge de PortAventura</title>
    </head>

    <body>
    <div align="center">
    <p><font size="+7"><a href="http://www.portaventura.es/home.asp?pIdi=ca">PortAventura</a>

    </font></p>
    <p><strong><font size="+7"><img src="imatges/portaventura.jpg" width="700"></font></strong></p>
    </div>
    </body>
    </html>"

   
  I ara, què vols fer?
   
 
Imprimir la unitat Inici de la pàgina Inici del mòdul pàgina següent Inici dels materials de formació
   
Actualitzat a 1 juny de 2007