p6d19dl
2.1. Notiuni generale despre paginile web
Paginile web sunt fisiere text, care se pot realiza cu un editor obisnuit, apoi
salvate ca "text only", insa extensia trebuie sa fie obligatoriu
htm sau html. Adaosul la textul obisnuit sunt codurile HTML (pot fi numite tag-uri,
etichete, marcaje sau balize) care marcheaza documentul.
Comparatia potrivita ar fi cu editorul Word: pentru a marca titluri si subtitluri,
marim dimensiunea fontului, apasam butonul bold, etc. sau ii schimbam stilul
in Heading 1 si Heading 2. Similar, in limbajul HTML, care este un
limbaj de marcare (HyperText Markup Language) adaugam balizele H1, B etc.
Un "navigator" (cum ar fi: Internet Explorer, Opera sau Netscape) citeste
aceste fisiere text si interpreteaza codurile pentru a afisa corect continutul
documentului. Balizele nu sunt afisate, ele doar "spun" navigatorului
(browserului) cum sa afiseze continutul lor.
Concret, sa luam urmatorul exercitiu:
Deschide editorul Notepad (Start - Programs - Accessories - Notepad) si scrie
un text: ANTIRID - Pagina de ras - . Apoi salveaza documentul cu numele
acumstiu.html (extensia html este obligatorie si este preferabil sa nu folosesti
spatii in numele fisierului).
Inchide Notepad si da dublu-click pe fisierul pe care tocmai l-ai creat.
Se va deschide Internet Explorer sau Netscape Navigator si va afisa pagina ta
web.
2.2. Coduri HTML de baza
Sa presupunem ca vrem ca textul ANTIRID sa fie titlul: tot ce trebuie sa facem
este sa deschidem din nou fisierul html in Notepad si sa marcam cuvantul
cu balize pentru titlu (in engleza - heading). Fisierul va arata astfel:
<h1>ANTIRID</h1> - Pagina de ras Observa ca trebuie sa indici sfarsitul titlului, printr-o baliza similara,
care are in plus un slash "/". Tot ce se va gasi intre
<h1> (codul de inceput) si </h1> (codul de final) va fi afisat
de navigator ca fiind "titlu de nivel 1" - heading 1.
Intoarce-te in navigator si fa click pe butonul Refresh (respectiv
Reload, in Netscape) sau apasa F5. Ar trebui sa arate aproximativ in
modul urmator:
Un document HTML corect are doua sectiuni: o parte de antet (head), unde se
descrie documentul, si o parte de continut (body) care cuprinde ceea ce se va
afisa in browser. Pagina cu continut html trebuie sa fie declarata ca
atare prin eticheta . Astfel, codul sursa trebuie sa arate in felul urmator:
<HTML>
<HEAD>
</HEAD>
<BODY>
<h1>ANTIRID</h1> - pagina de ras -
</BODY>
</HTML>
Observa ca se marcheaza cu coduri inceputul si sfarsitul fiecarei
sectiuni.
In cadrul sectiunii <head> vom invata un singur cod: <title>,
care marcheaza titlul logic al documentului. Adauga, in sursa din Notepad,
in sectiunea <head>, urmatoarele:
<HEAD>
<title>Pagina personala</title>
</HEAD> , apoi salveaza si verifica in browser. Pe bara de titlu a navigatorului,
in partea de sus, a aparut "Pagina personala".
In continuare, ne vom ocupa de partea de continut a documentului, cuprinsa
intre balizele <body> si </body>.
Vom marca "pagina de ras" ca fiind titlu de nivel 3 (Heading
3), apoi vom adauga un paragraf folosind baliza <p>.
<h1>ANTIRID</h1> <h3>- pagina de ras -</h3>
<p>
Doi programatori stau intr-un bar.
</p>
Salveaza si verifica noul aspect. Sa mai adaugam doua paragrafe si o linie
orizontala (horizontal rule).
<HTML>
<HEAD>
<title>Pagina personala</title>
</HEAD>
<BODY>
<h1>ANTIRID</h1> <h3>- pagina de ras -</h3>
<hr>
<p>Doi programatori stau intr-un bar.</p>
<p>- Vezi tipa aceea? Uite ce "properties" are.</p><p>-
Da.
Am "testat-o" aseara. Sunt "read-only".</p>
</BODY>
</HTML>
Doua observatii aici:
*** Prima, ca baliza <hr>, pentru linia orizontala, nu are nevoie de baliza
corespondenta pentru inchidere. Este oarecum logic - nu prea este necesara.
*** A doua observatie este ca browserul interpreteaza formatarile exclusiv citind
balizele - daca ii semnalezi, in mijlocul unui rand din Notepad,
ca se termina paragraful si incepe unul nou, atunci se va conforma si
va afisa un alt paragraf.
Sa presupunem ca vrem sa evidentiem in text cuvantul "programatori".
Baliza care se foloseste pentru text ingrosat este <b> (de la Bold).
Astfel, aplicand regulile invatate, vom avea urmatoarea secventa
in sursa:
<p>Doi <b>programatori</b> stau intr-un bar.</p>
Observam ca balizele HTML se pot intercala - in cadrul paragrafului marcat
cu <p>, respectiv </p>, avem un text marcat cu <b>, respectiv
</b> pentru inchidere. Similar, pentru a aplica aceluiasi text o
formatare cu litere cursive (inclinate), folosim baliza <i> (de
la Italic):
<p>Doi <b><i>programatori</i></b> stau intr-un
bar.</p>
Regula: Ultima baliza deschisa este prima care se va inchide.
Spune de ce secventa urmatoare NU este corecta:
<p>Doi <b><i>programatori</b></i> stau intr-un
bar.</p>
2.3. Introducerea imaginilor
Imaginile care se pot introduce in paginile pentru web trebuie sa fie
in format jpg, gif sau png. Codul este <img>, care are obligatoriu
un atribut prin care se specifica adresa imaginii.
Sa aducem in directorul cu fisierul nostru, acumstiu.html, o imagine -
de exemplu, londra.jpg. O vom apela din sursa (in Notepad) prin sintaxa:
<img src="londra.jpg">
Daca imaginea pe care dorim sa o apelam (1sigla.gif) se afla la o adresa pe
Internet, atunci vom scrie toata calea:
<img src="https://www.1educat.ro/imagini/1sigla.gif">2.4. Liste
Listele pot fi de doua feluri: liste ordonate - <ol> - (ordered lists)
sau neordonate - <ul> - (unordered lists). Itemii cuprinsi intr-o
lista se marcheaza cu baliza <li> (list item).
Sa cream o lista ordonata:
<p>Vrei sa stii daca esti bolnav de informatica? Esti bolnav daca:</p>
<ol>
<li>In fiecare dimineata iti faci un backup</li>
<li>Ultimul tau gand inainte de a adormi este "Shutdown
complete".</li>
<li>Cauti butonul "Cancel" dupa ce ai apasat un buton gresit
la lift si te miri cat de saraca e interfata utilizator.</li>
<li>Faci dublu click pe butonul de la lift.</li>
<li>Din tren, admiri scrolling-ul peisajului.</li>
</ol>
2.5. Tabele
Vom crea un tabel cu doua linii si trei coloane. Codul <tr> (de la table
row) se foloseste pentru a marca inceputul, respectiv sfarsitul
unei linii, iar <td> se foloseste pentru celule de tabel (table data).
<table border="1">
<tr>
<td>lin 1, col 1</td>
<td>lin 1, col 2</td>
<td>lin 1, col 3</td>
</tr>
<tr>
<td>lin 2, col 1</td>
<td>lin 2, col 2</td>
<td>lin 2, col 3</td>
</tr>
</table>
Da diverse valori atributului "border", pentru a vedea efectul.
2.6. Hyperlinkuri
Un link (sau un text activ) in cadrul unui fisier html se marcheaza prin
codul <a>, respectiv </a> pentru inchidere. Pentru a indica
fisierul la care se face referire, se utilizeaza atributul href (de la hypertext
reference).
Copiem (sau cream) in directorul in care lucram un alt fisier html
- de exemplu computer.html. Inseram sintaxa de hyperlink pentru cuvantul
"programatori" din textul initial, in fisierul "acumstiu.html",
deschis cu Notepad:
<p>Doi <a href="computer.html">programatori</a>
stau intr-un bar.</p>
Revenind in browser, da F5 pentru Refresh, apoi fa click pe cuvantul
activ pe care tocmai l-ai creat. Ar trebui sa te conduca la fisierul "computer.html".
Daca acest lucru nu se intampla, verifica daca:
1. fisierul "computer.html" exista in directorul in care
este si "acumstiu.html"
2. sintaxa de hyperlink este corecta, conform cu modelul de mai sus.
1. Sa presupunem ca vrei sa ai propriul tau fisier html cu referinte la cateva
pagini pe care le accesezi mai des, pentru a nu mai tasta de fiecare data adresa
fiecaruia. Vei crea o lista neordonata, in care vei scrie fiecare link
favorit. Astfel, cand intri pe Internet, vei deschide pagina ta de "Favorites"
de pe propriul calculator, care iti va simplifica lucrul. Pentru ca fiecare
link accesat sa fie deschis intr-o noua fereastra a browserului, trebuie
sa adaugi la fiecare hyperlink atributul "target" cu valoarea "_new".
Deschide Notepad si creaza un nou fisier: "favorite.html", pe care
il salvezi pe Desktop. Copie exemplul de mai jos (insereaza textul si
da click dreapta pe el, apoi Copy; mergi inapoi in Notepad, apasa
butonul dreapta al mouse-ului, apoi Paste). Inlocuieste linkurile si textele
active cu propriile tale linkuri:
<html>
<head><title>Firul Ariadnei</title></head>
<body>
<h2>Linkuri favorite</h2>
<hr>
<ul>
<li>
<a href="https://www.google.com" target="_new">Motor
de cautare</a>
</li>
<li>
<a href="https://www.yahoo.com" target="_new">Director
web</a>
</li>
<li>
<a href="https://www.1educat.ro" target="_new">Oferte
educationale</a>
</li>
<li>
<a href="https://www.academiaonline.ro" target="_new">Cursuri</a>
</li>
<li>
<a href="https://www.xprim.ro" target="_new">Exprima-te
pe web</a>
</li>
</ul>
</body>
</html>
2. Folosind balizele invatate in aceasta lectie, creaza fisiere
html cu diverse continuturi. Experimenteaza si iar experimenteaza. Deschide
sursele paginilor web pe care le ai in propiul computer (din browser:
View - Source) si invata coduri noi.
3. Daca ai realizat un site si l-ai incarcat pe Internet, scrie linkul in Forumul
de la www.elearning-forum.ro (adresa directa: https://www.elearning-forum.ro/forum/viewforum.php?f=9).
