 Bai3tasuAdministratorDin: Constanta
Postari: 32
|
|
Web Design
Lectia 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.
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.
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.cccccc.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>
<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) î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.
_______________________________________
Totul pentru binele omenirii 
|
|
