Introduction
Caracteristici
• Documentele HTML sunt exclusiv de tip text (ASCII); prin urmare ele pot fi editate direct, prin comenzi specifice sistemului de operare folosit. Se poate utiliza orice editor de texte;
• Documentele descrise în HTML pot fi vizualizate cu ajutorul unor aplicaţii speciale denumite browsere, care lucrează pe diferite tipuri de sisteme de calcul; prin urmare, documentelor HTML sunt independente de platforma de lucru.
• HTML utilizează pentru descrierea documentelor Web etichete (denumite si tag-uri) specifice pentru fiecare element descris; etichetele stabilesc atât structura documentului, cât şi aspectul acestuia.
Task
1.Metode de realizare a paginilor WEB
Folosind un editor de texte obi şnuit: - se scrie con ţinutul paginii într-un fi şier text; - care se salveaz ă cu extensia HTML sau HTM. - folosind un browser se încarc ă pagina local ă realizat ă. • Folosind un editor specializat în realizarea paginilor de WEB. Exist ă mai multe editoare de pagini de WEB, care genereaz ă codul paginii (adic ă nu trebuie s ă scrie utilizatorul întregul cod surs ă al paginii) şi ofer ă şi facilităţi suplimentare. Cele mai cunoscute sunt Macromedia DreamWeaver, FrontPage şi Netscape Composer.
• Atributele pot fi definite ca niste proprietati ale tag-urilor (marcajelor). • Atributele se pun numai in tag-ul de inceput. • Daca un tag (marcaj) nu are specificat nici un atribut, atunci browser-ul va lua in considerare valorile implicite ale tuturor atributelor specifice tag-ului respectiv.
Atribute ale marcajului
• BACKGROUND=URL
• BGCOLOR=culoare Culori.pdf
• TEXT=culoare
• LEFTMARGIN=valoare - stabile şte distan ţa dintre marginea stâng ă a ferestrei browserului şi marginea stâng ă a con ţinutului paginii; • TOPMARGIN=valoare - stabile şte distan ţa dintre marginea de sus a ferestrei browserului şi marginea de sus a con ţinutului paginii.
Formatarea textului • nivel de bloc (block-level) sau • la nivel de caracter (text-level sau inline).
<P>Paragraful 1 </P>
Un atribut pentru eticheta
este ALIGN ALIGN = LEFT | CENTER | RIGHT | JUSTIFY
Pentru a stabili acelaşi mod de aliniere pentru mai multe paragrafe, se vor grupa într-un singur bloc, cu ajutorul etichetei.
Blocuri CENTER - aliniază centrat toate elementele pe care le conţine.
Process
Paragrafe Titlu
Documentele HTML pot fi structurate pe şase niveluri, existând şase etichete care definesc nivelul paragrafului titlu în structura documentului:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>.Etuchete de sfirsit sunt obligatorii.
Linii orizontale <hr>
Atribute ale etichetei:
1. "align" ce permite alinierea orizontală a liniei. Valorile posibile sunt "left","center" şi "right";
2. "width" permite alegerea lungimii liniei;
3. "size" permite alegerea grosimii liniei;
4. "noshade" când este prezent defineşte o linie fără umbră;
5. "color" permite definirea culorii liniei.
Dacă autorul documentului nu precizează setul de caractere folosit, browser-ul va utiliza setul de caractere transmis de către server, Serverul transmite modul de codificare a caracterelor prin intermediul parametrului charset al câmpului Content-Type al protocolului HTTP.
Cele mai utilizate seturi de caractere sunt: - ISO-8859-1 (pentru documente din Europa Occidentală); - ISO-8859-2 (pentru documente din Europa Centrală şi de Est) - SHIFTJIS sau EUC-JP (pentru documente in limba japoneză) -ISO-8859-5 (pentru documente cu litere chirilice).
Formatarea la nivel de caracter <Font>..</Font>
Atributele admise de eticheta sunt: SIZE = valoare COLOR = culoare FACE = list ă_fonturi (define şte o list ă de fonturi separate prin virgul ă, dintre care browser-ul îl va alege pe primul disponibil in ordinea preferin ţelor. Dac ă nici unul din fonturile din list ă nu este instalat pe calculatorul utilizatorului, browser-ul va utiliza fontul implicit)
Aplicarea unor efecte asupra texlului
Vizualizeaza imaginile:
nr1 http://joxi.ru/YmEJMyOUZOJOL2
nr2 http://joxi.ru/V2V4O5lT05K5Wr
Utilizarea textului preformatat <Pre>..</Pre>
Listele neordonate (Unordered List) sunt încadrate de etichetele <UL>si</UL>.Fiecare intrare in list ă (List Item) este precedat ă de eticheta <Li>
Vizualizeaza: http://joxi.ru/zANJWeNUlk63XA
Utilizarea listelor
Crearea unei liste ordonate (Ordered List) se face încadrând intr ările din list ă între etichetele perech <ol> si </ol>.Fiecare intrare in list ă (List Item) este precedat ă de eticheta <Li>.
Vizualizeaza: http://joxi.ru/82Q0KegU15yXEm
Crearea unei liste de defini ţii se realizeaz ă cu ajutorul etichetelor pereche <dl> şi</dl>, între care vor fi încadrate intr ările în list ă. În acest caz, o intrare în list ă este constituit ă din dou ă p ă r ţi: un termen (etichetat cu <DT>- Definition Term), care poate con ţine doar elemente de formatare inline şi o defini ţie (etichetat ă cu<DD>- Definition Description), care poate con ţine elemente de formatare la nivel de bloc.\http://joxi.ru/12ME6e8C4B05O2
Inserarea legăturilor în documente HTML
Limbajul HTML conţine multiple elemente prin intermediul cărora se poate crea o legătură către resurse Web: •LINK (specifică legături către resurse utile), •A (creează o legătură către o resursă Web într-un document HTML), •APPLET (creează o legătură către un program executabil pe calculatorul utilizatorului).
Inserarea imaginilor în documente HTML
Inserarea unei leg ături pe o imagine
Prin utilizarea elementului IMG drept con ţinut al elementului ancor ă avem posibilitatea de a insera în document o leg ătur ă pe o imagine: prin ac ţionarea imaginii printr-un clic va fi accesat ă resursa destina ţie (cea la care am creat leg ătura). http://joxi.ru/p27KPRGH01WaD2
Evaluation
Lucru Practic
1. Ceea ce adaugati intre tag-urile <body> </body> reprezinta continutul paginii, care va fi afisat in browser.
Mai jos gasiti un exemplu cum ar putea fi completat tag-ul TITLE si un mic continut in pagina:http://joxi.ru/krDJMq3U0bJNE2
2. Pentru titluri din continutul documentului HTML este indicat folosirea etichetelor <Hx>, (headings) unde 'x' este un numar intre 1 si 6.
- - In cadrul elementului BODY, elementele Headings sunt folosite ca titluri sau pentru o mai buna impartire a continutului paginii.
- - Mărimea textului înconjurat de elementul Heading variază de la foarte mare, in <H1> pana la foarte mic in <H6>.
Mai jos puteti vedea exemplu:http://joxi.ru/Drl60zqH4w0aG2
3.Elemente des folosite pentru formatul textului sunt:
- - Bold (ingrosat) <b> ... </b>
- - Italic (inclinat) <i> ... </i>
- - Underline (subliniat) <u> ... </u>
4.Urmatoarele elemente pentru format sunt folosite mai rar si sunt pentru documente cu aplicatii tehnice
- - <dfn> Defineste exemplu de termen inchis </dfn>
- - <code> Folosit pentru extragerea unui cod de program </code>
- - <samp> Folosit pentru simple productii de programe, scripturi , etc. </samp>
- - <kbd> Folosit pentru text care va fi scris de utilizator </kbd>
- - <var> Folosit pentru variabile sau argumente de comenzi </var> . In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser.
5.Un element des folosit in formarea listelor (neordonate) este <ul>.
- - <ul> este elementul de început si dupa scrierea listei se incheie cu </ul>.
- - Majoritatea elementelor pentru marcatori si numerotare sunt compuse din unu sau mai multe elemente <li> ... </li> (list element). Fara atributul "type" specificat in "<ul>" acestea prezintă un marcaj ca un bullet. Mai jos puteti vedea exemplu.
6.Pentru a introduce o imagine intr-un format HTML se foloseşte elementul <img> ... </img> împreuna cu urmatoarele atribute :
- - src - Valoarea acestui atribut determina locatia fisierului care contine imaginea.
- - alt - La acest atribut se scrie textul care va aparea daca imaginea nu e afisata (de unele browsere) sau cand utilizatorul va pozitiona, in browser, mouse-ul peste imagine.
- - align - Acest atribut permite asezarea imagini in locuri diferite pe pagina. Pot fi folosite urmatoarele optiuni:
- Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle , Baseline , ABSBottom
- - width - Valoarea acestui atribut reprezinta lungimea imaginii, in pixeli. Daca nu este scris imaginea va fi prezentata cu lungimea originala.
- - height - Valoarea acestui atribut reprezinta inaltimea (latimea) imaginii, in pixeli. Daca nu este scris imaginea va fi prezentata cu inaltimea originala.
- - border - Prin adaugarea acestui atribut imaginea va aparea înconjurata de un chenar, valoarea acestui atribut reprezinta grosimea chenarului, in pixeli.
- - hspace - Acest atribut este pentru spatiu orizontal pe ambele parti ale imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel, in pârtile orizontale ale imaginii.
- - vspace - Acest atribut este pentru spatiu vertical pe ambele parti ale imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel, in pârtile verticale ale imaginii.
In exemplu de mai jos puteti vedea modul de introducere a unei imagini pe o pagina web si cum pot fi folosite atributele : http://joxi.ru/v29apOEHGoz8j2
7.Hartile de imagini sunt parti din aceeasi imagine care este "impartita" in mai multe zone, apoi in functie de zona pe care se executa click, browserul poate afisea o alta pagina.Codul HTML pentru acest exemplu este urmatorul :http://joxi.ru/Q2KlQeyH9xwYkA
8.Pentru a crea tabele in paginile web se foloseste elementul <table> ... </table> , acesta incadreaza alte patru sub-elemente, care alcatuiesc structura tabelului.
- - Linia (randul) Tabelului <tr> ... </tr>
- - Titlul Tabelului <th> ... </th>
- - Coloanele tabelului (datele) <td> ... </td>
- - Sub-titlu tabelului <caption> ... </caption>
Linia tabelului de obicei contine elementul pentru titlurile tabelului si elementul pentru coloanele tabelului.
In cadrul elementelor pentru titluri si coloanele tabelului se pot adauga si alte elemente HTML, cum ar fi cele pentru formatul textului, paragrafe, link-uri sau imagini
Mai jos puteti vedea un exemplu de cod HTML pentru crearea unui tabel:http://joxi.ru/8236oLJH6xDPLm
9.Cum crezi,ce va afisa urmatorul cod ?
10.Cum crezi,ce va afisaurmatorul cod ?
Conclusion
Ce crezi despre Web Design?
