 |
 |
 |
 |
|
|
|
|
|
|
|
|
Radiografie <HTML>...</HTML> Secţiunea HEAD <HEAD>...</HEAD> <TITLE>...</TITLE> <META ...> <BASE ...> <ISINDEX> Secţiunea BODY <BODY>...</BODY> Exerciţii
Primul tag cu care facem cunoştinţă este <HTML>. Acest tag deschide obligatoriu orice document html şi nu face altceva decât să spună browser-ului care încearcă să interpreteze fişierul că are de-a face cu cu un fişier cu conţinut html. În mod analog, ultimul tag care trebuie scris este </HTML>, echivalentul celebrului "The End". Deci, orice pagină HTML va arăta cam aşa:
Următoarele tag-uri servesc pentru a diviza documentul în două secţiuni: "capul" şi "corpul". Secţiunea HEAD are rolul unei "introduceri"; pentru a marca această secţiune, trebuie adăugate tag-urile <HEAD> şi </HEAD> imediat după tag-ul <HTML>. Vom obţine:
Secţiunea BODY conţine toate chestiile amuzante ce apar într-o pagină web. Pentru a defini această secţiune, adăugaţi tag-urile <BODY> şi </BODY> după secţiunea head:
Plictisitor, nu-i aşa? Într-adevăr, fazele de început ale creaţiei unui document HTML sunt la fel de palpitante ca şi un meci de fotbal din campionatul intern; pentru a scăpa mai uşor de aceste operaţii, salvaţi acest document sub numele de sablon.html sau schelet.html (îl mai puteţi îmbunătăţi ulterior); ori de câte ori veţi vrea să creaţi o pagină .html, deschideţi acest document, îl salvaţi sub numele dorit şi completaţi doar conţinutul.
Hai să vedem cam ce se scrie în secţiunea introductivă. Această secţiune cuprinde informaţii utilizate de browser sau de unele programe ce rulează pe Internet (ex. motoare de căutare), privind conţinutul paginii respective. Putem utiliza aici două marcaje, <TITLE> şi <META ...>.
Tag-ul <TITLE> serveşte, evident, pentru a adăuga un titlu paginii noastre. Acest titlu va apărea în bara de titlu a browser-ului şi nu trebuie confundat cu numele fişierului html!
Tips & Tricks: 
Avertisment: explicaţiile pentru acest tag vă vor părea, poate, complicate sau criptice şi, oricum, puteţi crea deocamdată pagini funcţionale care nu folosesc acest marcaj; dacă vă sperie chiar aşa de rău, săriţi <META>, dar nu uitaţi să reveniţi mai târziu!
Acest marcaj este utilizat pentru a include în document meta-informaţii (un fel de supra-informaţii) care nu pot fi definite de către celelalte marcaje HTML. Acestea pot fi extrase de către client / server pentru a identifica şi cataloga meta-informaţiile documentului. Se recomandă utilizarea atributelor cu semantică bine definită pentru fiecare tip de meta-informaţie, deoarece serverele HTTP (Hyper Text Transfer Protocol, protocolul de transfer al hyper-textului) citesc conţinutul secţiunii HEAD şi generează răspunsuri corespunzătoare pentru fiecare element ce primeşte o valoare în atributul HTTP-EQUIV. Marcajul <META ...> nu trebuie închis (nu există un </META>) şi se foloseşte împreună cu următoarele atribute:
CONTENT
Cuprinde meta-informatia CONTENT (conţinut) ce va fi asociată cu un nume (NAME) precizat şi / sau cu un răspuns HTTP. Dacă documentul conţine ceva de genul:
răspunsul HTTP va fi:
De obicei, paginile HTML conţin o serie de termeni care se repetă, în strânsă legătură cu subiectul paginii (cuvinte-cheie); serverele web de căutare / indexare a paginilor (numite şi motoare de căutare) utilizează meta-informaţia KEYWORDS de către server sau de către valorile specificate în
<META HTTP-EQUIV="Keywords" CONTENT="lista cuvintelor cheie separate prin virgule">
pentru a determina conţinutul paginii specificate şi a calcula relvance rating (cât de relevant este documentul pentru şirul de caractere căutate); afişarea rezultatelor unei căutări se va face apoi în ordinea descrescătoare a acestei rate de relevanţă. Atunci când atributul HTTP-EQUIV nu este prezent, serverul nu trebuie să genereze un răspuns la această meta-informaţie:
<META NAME="IndexType" CONTENT="Service">
Tips & Tricks:
<META HTTP-EQUIV="Refresh" CONTENT="x"> (x=durata în secunde). Browser-ul va considera că serverul va genera răspunsul:
Refresh: x
atunci când documentrul va fi înaintat către server şi documentul va fi re-încărcat, re-împrospătat la fiecare "x" secunde
<META HTTP-EQUIV="Refresh" CONTENT="5; URL=http://un.site.com/altfişier.html">
directiva "Refresh" va face ca "altfişier.html" să fie încărcat la 5 secunde de la încărcarea fişierului iniţial; este recomandată scrierea adreselor complete!
HTTP-EQUIV
Vezi precizările de mai sus.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" CHARSET="windows-1250">
Linia stabileşte echivalentul pentru HTTP (HyperText Transfer Protocol), conţinutul paginii şi setul de caractere folosit (windows-1250 este setul ce conţine caracterele specifice limbii române, deci permite afişarea corectă a acestora).
Tips & Tricks:
NAME
specifică numele meta-informaţiei; dacă atributul nu este prezent, numele va primi valoarea dată pentru HTTP-EQUIV.
Alte marcaje utilizabile ar fi:
Este un marcaj care defineşte link-ul şi / sau target-ul implicit (pentru lămuriri privind aceste noţiuni, vezi capitolele 9, respectiv 7), prin atributele:
HREF="http://..."
TARGET="default target"
Tag-ul <ISINDEX> defineşte acţiuni executate implicit în "conversaţia" client-server şi funcţionează împreună cu atributele:
ACTION="websearch"
acţiunea ce va fi executatăAceastă secţiune conţine, după cum am mai spus, elementele paginii web. Tag-ul <BODY> poate fi folosit, în funcţie de necesităţi, împreună cu o serie de cuvinte-cheie, atribute, a căror semnificaţie va fi descrisă mai jos:
BGCOLOR="nume culoare"
sauAceste marcaje stabilesc culoarea fundalului paginii web (BGCOLOR = background color). Culoarea poate fi indicată prin numele ei sau prin secvenţa #rrggbb, unde rr este un număr în format hexazecimal reprezentând codul pentru nuanţa de roşu (red), gg pentru verde (green), iar bb pentru albastru (blue). Ştiind că fiecare dintre culorile de bază poate avea 256 de valori posibile (0-255 în sistemul zecimal, 00-FF în hexazecimal), obţinem impresionantul număr de peste 16,7 milioane de culori ce ne stau la dispoziţie!
În anexa 1 găsiţi un tabel cu cele mai utilizate culori, numele lor şi codul hexa corespunzător.
Tips & Tricks:
Exemple de utilizare a opţiunii BGCOLOR:
Drept fundal al unei pagini web poate fi folosită şi o imagine; aceasta este repetată (tile) de ori câte ori este nevoie pentru a acoperi fundalul. Sintaxa pentru atribut este următoarea:
BACKGROUND="numeimagine.extensie"
Tips & Tricks:
<BODY BACKGROUND="graphics/numeimagine.extensie">...</BODY>
iar pentru ca într-un fişier din directorul pages să preluăm aceeaşi imagine, vom scrie:
<BODY BACKGROUND="../graphics/numeimagine.extensie">...</BODY>
Exemple:
În mod normal, imaginea din fundal se deplasează o dată cu textul atunci când vizitatorul paginii o derulează (scroll) pe verticală sau orizontală; un efect interesant se poate obţine "fixând" imaginea de fundal cu atributul
BGPROPERTIES="FIXED"
Două alte atribute interesante ale tag-ului <BODY> sunt TOPMARGIN şi LEFTMARGIN, prin care se pot seta distanţele (exprimate în pixeli) dintre conţinutul paginii şi marginile de sus, respectiv stânga ale paginii:
TOPMARGIN="x"
LEFTMARGIN="x"
Tips & Tricks:
Tot cu ajutorul marcajului <BODY> se pot stabili culorile pentru un link normal (LINK=ancoră, legătură cu un alt element sau pagină), link vizitat (VLINK) şi link activ (ALINK); sintaxa este următoarea:
<BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
Dacă aceste culori nu sunt precizate, ele vor lua fie valorile implicite (blue, purple, red) fie valorile setate de utilizator în opţiunile de configurare ale browser-ului.
Tips & Tricks:
Deşi limbajul HTML descrie static paginile web, extensiile recente ale limbajului, cum ar fi DHTML (Dynamic HTML) permit introducerea unor acţiuni dinamice onload:
<BODY onload="alert('mesaj')">
Exerciţii
Teste