Lectia - 02 - Coduri HTML

Lecţia 2: Coduri HTML
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", însa 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 îi schimbam stilul în Heading 1 si
Heading 2. Similar, în 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.
EXEMPLU:
Concret, sa luam urmatorul exercitiu:
Deschide editorul Notepad (Start - Programs - Accessories - Notepad) si scrie un text:
ANTIRID - Pagina de râs - . Apoi salveaza documentul cu numele acumstiu.html
(extensia html este obligatorie si este preferabil sa nu folosesti spatii în numele fisierului).
Închide 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 în Notepad si sa marcam cuvântul cu balize pentru titlu
(în engleza - heading). Fisierul va arata astfel:
<h1>ANTIRID</h1> - Pagina de râs -
Observa ca trebuie sa indici sfârsitul titlului, printr-o baliza similara, care are în plus un
slash "/". Tot ce se va gasi între <h1> (codul de început) si </h1> (codul de final) va fi
afisat de navigator ca fiind "titlu de nivel 1" - heading 1.
Întoarce-te în navigator si fa click pe butonul Refresh (respectiv Reload, în Netscape) sau
apasa F5. Ar trebui sa arate aproximativ în 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 în browser.
Pagina cu continut html trebuie sa fie declarata ca atare prin eticheta . Astfel, codul sursa
trebuie sa arate în felul urmator:
<HTML>
<HEAD>
</HEAD>
<BODY>
<h1>ANTIRID</h1> - pagina de râs -
</BODY>
</HTML>
Observa ca se marcheaza cu coduri începutul si sfârsitul fiecarei sectiuni.
În cadrul sectiunii <head> vom învata un singur cod: <title>, care marcheaza titlul logic
al documentului. Adauga, în sursa din Notepad, în sectiunea <head>, urmatoarele:
<HEAD>
<title>Pagina personala</title>
</HEAD>
, apoi salveaza si verifica în browser. Pe bara de titlu a navigatorului, în partea de sus, a
aparut "Pagina personala".
În continuare, ne vom ocupa de partea de continut a documentului, cuprinsa între balizele
<body> si </body>.
Vom marca "pagina de râs" ca fiind titlu de nivel 3 (Heading 3), apoi vom adauga un
paragraf folosind baliza <p>.
<h1>ANTIRID</h1> <h3>- pagina de râs -</h3>
<p>
Doi programatori stau într-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 râs -</h3>
<hr>
<p>Doi programatori stau într-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 închidere. Este oarecum logic - nu prea este necesara.
*** A doua observatie este ca browserul interpreteaza formatarile exclusiv citind balizele
- daca îi semnalezi, în mijlocul unui rând din Notepad, ca se termina paragraful si începe
unul nou, atunci se va conforma si va afisa un alt paragraf.
Sa presupunem ca vrem sa evidentiem în text cuvântul "programatori". Baliza care se
foloseste pentru text îngrosat este <b> (de la Bold). Astfel, aplicând regulile învatate,
vom avea urmatoarea secventa în sursa:
<p>Doi <b>programatori</b> stau într-un bar.</p>
Observam ca balizele HTML se pot intercala - în cadrul paragrafului marcat cu <p>,
respectiv </p>, avem un text marcat cu <b>, respectiv </b> pentru închidere. Similar,
pentru a aplica aceluiasi text o formatare cu litere cursive (înclinate), folosim baliza <i>
(de la Italic):
<p>Doi <b><i>programatori</i></b> stau într-un bar.</p>
Regula: Ultima baliza deschisa este prima care se va închide.
EXERCITII:
Spune de ce secventa urmatoare NU este corecta:
<p>Doi <b><i>programatori</b></i> stau într-un bar.</p>
2.3. Introducerea imaginilor

Imaginile care se pot introduce în paginile pentru web trebuie sa fie în format jpg, gif sau
png. Codul este <img>, care are obligatoriu un atribut prin care se specifica adresa
imaginii.
Sa aducem în directorul cu fisierul nostru, acumstiu.html, o imagine - de exemplu,
londra.jpg. O vom apela din sursa (în 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="http://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 într-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>În fiecare dimineata îti faci un backup</li>
<li>Ultimul tau gând înainte de a adormi este "Shutdown
complete".</li>
<li>Cauti butonul "Cancel" dupa ce ai apasat un buton gresit la lift
si te miri cât 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 începutul, respectiv sfârsitul unei linii, iar <td> se foloseste pentru celule
de tabel (table data).
<table border="1">
<tr>
<td>lin 1, col 1</td>
</tr>
<tr>
</tr>
</table>
Da diverse valori atributului "border", pentru a vedea efectul.
2.6. Hyperlinkuri
Un link (sau un text activ) în cadrul unui fisier html se marcheaza prin codul <a>,
respectiv </a> pentru închidere. Pentru a indica fisierul la care se face referire, se
utilizeaza atributul href (de la hypertext reference).
Copiem (sau cream) în directorul în care lucram un alt fisier html - de exemplu
computer.html. Inseram sintaxa de hyperlink pentru cuvântul "programatori" din textul
initial, în fisierul "acumstiu.html", deschis cu Notepad:
<p>Doi <a href="computer.html">programatori</a> stau într-un bar.</p>
Revenind în browser, da F5 pentru Refresh, apoi fa click pe cuvântul activ pe care tocmai
l-ai creat. Ar trebui sa te conduca la fisierul "computer.html". Daca acest lucru nu se
întâmpla, verifica daca:
fisierul "computer.html" exista în directorul în care este si "acumstiu.html"
sintaxa de hyperlink este corecta, conform cu modelul de mai sus.
EXERCITII:
1. Sa presupunem ca vrei sa ai propriul tau fisier html cu referinte la câteva pagini pe care
le accesezi mai des, pentru a nu mai tasta de fiecare data adresa fiecaruia. Vei crea o lista
neordonata, în care vei scrie fiecare link favorit. Astfel, când intri pe Internet, vei
deschide pagina ta de "Favorites" de pe propriul calculator, care îti va simplifica lucrul.
Pentru ca fiecare link accesat sa fie deschis într-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 îl salvezi pe Desktop.
Copie exemplul de mai jos (insereaza textul si da click dreapta pe el, apoi Copy; mergi
înapoi în Notepad, apasa butonul dreapta al mouse-ului, apoi Paste). Înlocuieste 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="http://www.google.com" target="_new">Motor de
cautare</a>
</li>
<li>
<a href="http://www.yahoo.com" target="_new">Director
web</a>
</li>
<li>
<a href="http://www.1educat.ro" target="_new">Oferte
educationale</a>
</li>
<li>
<a href="http://www.academiaonline.ro"
target="_new">Cursuri</a>
</li>
<li>
<a href="http://www.xprim.ro" target="_new">Exprima-te pe
web</a>
</li>
</ul>
</body>
</html>
2. Folosind balizele învatate în aceasta lectie, creaza fisiere html cu diverse continuturi.
Experimenteaza si iar experimenteaza. Deschide sursele paginilor web pe care le ai în
propiul computer (din browser: View - Source) si învata 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: http://www.elearning-
forum.ro/forum/viewforum.php?f=9).

Lectia - 02 - Coduri HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Lectia - 02 - Coduri HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Lecţia 2: Coduri HTML

2.1. Notiuni generale despre paginile web

<h1>ANTIRID</h1> - pagina de râs -

<h1>ANTIRID</h1> <h3>- pagina de râs -</h3>

<p>Doi programatori stau într-un bar.</p>

<p>- Vezi tipa aceea? Uite ce "properties" are.</p><p>- Da.

2.3. Introducerea imaginilor

Daca imaginea pe care dorim sa o apelam (1sigla.gif) se afla la o adresa pe Internet,

S-ar putea să vă placă și