Notiuni de baza HTML
HTML(HyperText Markup Language) - set de coduri speciale care se introduc într-un text pentru a adauga informatii despre formatare si legaturi.
Prin conventie toate informatiile HTML încep cu simbolul < si se termina cu simbolul > de exemplu <HTML>. Acest marcaj indica unui program de navigare (interpretor HTML) ca documentul este scris si formatat în limbajul HTML standard.
Multe controale HTML sunt perechi si au controale de început (de deschidere) si de sfârsit (de închidere). De exmplu avem marcajul de deschidere <HTML> si cel de închidere </HTML>. Controalele HTML nu tin cont de litere mari sau mici.
1.1.1. Împartirea în paragrafe si linii
Împartirea se realizeaza utilizând controlul <P> pentru un paragraf nou # 313c21d 1;i respectiv <BR> pentru linie noua. Ca o sugestie pentru plasarea controalelor, cele de linie noua la sfârsitul liniei de text si marcajul de paragraf pe linie noua. Pentru indentarea datelor din ferestre se utilizeaza marcajul de informatie preformatata <PRE> care se încheie cu </PRE>. Atentie textul din textul din blocul preformatat este de tip monospatiu (fiecare litera are aceeasi înaltime).
1.1.2. Împartire document în sectiuni
Din motive de organizare fisierele HTML sunt împartite în doua sectiuni- antet (header) care contine informatia introductiva de formatare a paginii si corpul (body). Se utilizeaza marcajele <HEAD> si respectiv <BODY>. Recomandare - scrieti paginile Web plasând marcajele în pozitii logice astfel încât documentul sa fie usor de procesat ulterior.
1.1.3.Inserare titlu pagina
Pentru o pagina de Web mai elevata putem sa dam paginii un nume, controlul utilizat este <TITLE>. Acest control are o limitare deoarace unekle programe de explorare Web nu afiseaza titlul ferestrei. În schimb textul din <TITLE> este utilizat ca informatie de legatura când se utilizeaza bookmarks sau favorites.
1.1.4. Informatii uzuale care se plaseaza la sfârsit
De obicei la sfârsitul unui document apar informatii de copyright si date despre autorul paginii. Marcajul utilizat este <ADDRESS>. Nu este obligatorie utilizarea acestui marcaj la paginile Web create.
1.1.5.Definire antete de sectiune
Daca pagina trebuie organizata pe sectiuni si subsectiuni se utilizeaza marcajele de formatare a subtitlurilor <H1-H6> unde avem H1 pentru subnivelul cel mai de sus si respectiv H6 pentru subnivelul cel mai de jos. Trebuie sa tinem cont de faptul ca fonturile, dimensiunile si efectele din prezentarea generala pot fi modificate de utilizator. Dar foarte putini oameni modifica preferintele implicite, deci daca pagina arata bine cu valorile predefinite, totul e o.k.
1.1.6.Linie orizontala
Pentru organizarea vizuala a unui document este util marcajul <HR> care introduce o linia orizontala subtire afisata pe întreaga latime a paginii. Acest marcaj poate fi utilizat de mai multe ori într-un document Web, daca este folosit judicios paginile devin mai interesante.
|
Marcaj HTML |
Marcaj închidere |
Semnificatie |
|
<ADDRESS> |
</ADDRESS> |
Informatii despre adresa si autor |
|
<BODY> |
</BODY> |
Corp pagina HTML |
|
<BR> |
Linie noua |
|
|
<HEAD> |
</HEAD> |
Informatie de formatare HTML |
|
<Hn> |
</Hn> |
Nivel de subtitlu document (n |
|
<HR> |
Linie orizontala |
|
|
<HTML> |
</HTML> |
Defineste un fisier în format Web |
|
<P> |
Paragraf nou |
|
|
<PRE> |
</PRE> |
Informatie preformatata |
1.2. Stiluri de text
1.2.1. Caractere îngrosate si italice
Cuvintele sau frazele îngrosate ajuta la parcurgerea materialului si identificarea punctelor specifice. De aceea titlurile sectiunilor sunt scrise cu caractere îngrosate si nu italice. Formatarea îngrosata si înclinata necesita maracaje HTML pereche; acestea sunt <B> si </B> pentru caractere îngrosate si respectiv <I> si </I> pentru caractere înclinate.
Obs. E obligatoriu ca imediat dupa paranteza unghiulara deschisa a unui marcaj de formatare HTML sa se scrie codul de formatare- nu sunt permise spatii !!
1.2.2. Subliniere, caractere monospatiu, modificari de text
Se pot utiliza si alte optiuni de formatare acestea sunt: <U> </U> pentru subliniere, <STRIKE> </STRIKE> pentru taiere, indici inferiori <SUB> </SUB>, indici superiori <SUP> </SUP>, precum si marcajul monospatiu <TT> </TT> . Numele monospatiu indica faptul ca fiecare litera dintr-un font de acest tip ocupa exact aceeasi latime chiar daca litera respectiva este destul de îngusta.
OBS. Exista unele versiuni de Netscape Navigator care ignora marcajul <U>. Este bine ca în cazul în care creati documente ce contin legaturi catre alte documente legaturile sa fie afisate cu o alta culoare de obicei albastru.
Pentru introducerea formulelor matematice de obicei se utilizeaza marcajele <SUB> </SUB> si respectiv <SUP> </SUP>.
Exemplu
<H2> If you could double the amount of water on the planet - H<SUB>2</SUB>O<SUP>2</SUP> - you'd never have to worry about watering the lawn, it'd be all under the ocean !! </H2>
1.2.3.Dimensiuni, culori, corpuri de litera
Dimensiunea fonturilor HTML poate varia de la 1 la 7 , unde 1 este cel mai mic iar 7 cel mai mare, fiind exact invers numararii subtitlurilor. Toate modificarile caracteristicilor fintului se fac prin intermediul atributelor marcajului <FONT>. Marcajele car pot avea atribute se specifica de obicei prin perechi de forma nume valoare.
- Primul atribut al marcajului de formatare este marimea. Pentru exemplificare consider urmatoare formatare
<FONT SIZE=7> un text important </FONT>
Dimensiunile fontului pot fi specificate în mod absolut (SIZE=5) sau relativ SIZE=+1), (SIZE=-3)
Culoarea se poate stabili utilizând atributul COLOR, culorile se pot specifica prin nume iar daca doriti un control mai bun al rezolutiei culorilor se pot utiliza valori hexazecimale RGB(despre care vom discuta mai târziu).
Exemplu
<FONT COLOR=RED>Text tare rosu</FONT>
Al treilea atribut posibil este FACE pentru specificare corp de litera, dar este necesara utilizarea numelui corect al fontului de pe sistemul utilizat. ! Atentie acestea au nume diferite pe platforma diferite !
Exemplu
<FONT FACE="Helvetica Narrow,Arrial Narrow">text slab</FONT>
1.2.4. Aplicare stiluri logice
Cele mai cunoscute stiluri logice sunt <EM> </EM> si respectiv <STRONG> </STRONG>. Primul este utilizat pentru evidentiere (afisare cu caractere italice) iar al doilea pentru evidentiere puternica (afisare cu caractere îngrosate). Aceste marcaje logice nu sunt prea des utilizate deoarece nu stim cum va interpreta un program de navigare EM sau respectiv STRONG.
În standardul HTML sunt specificate si alte marcaje logice folosite destul de rar depoarace sunt sinonime cu marcajul de font monospatiu. Aceste marcaje logice sunt: CITE, CODE, DFN, KBD, SAMP, VAR. Ele sunt prezentate în detaliu în tabelul de la sfârsitul capitolului.
1.2.5.Combinare proprietati - exemplu
<HTML>
<HEAD>
<TITLE> Travels with Tintin </TITLE>
<BASEFONT SIZE=4>
</HEAD> <BODY>
<H1><FONT COLOR= ORANGE> Excursie cu Tintin </FONT> </H1>
Din multimea de reporteri cu care am calatorit prin lume, printre care se numara si reporteri de la renumita agentie <I>Reuters</I> cel mai deosebit a fost<B>Tintin</B> un reporter din Belgia (<TT> [email protected]</TT>)
<P>Cel mai atractiv element al excursiei a fost cainele sau, <B> Snowy</B>!
<P>
<FONT SIZE=6
COLOR=BLUE> Prima excursie:
<P>
Dupa castigarea premiului Pulitzer pentru cartea <I>Adventure with Red Rackham's Treasure </I>, Tintin mi-a spus ca doreste o vacanta si impreuna ne-am hotarat sa vizitam Nepal-ul. Asa ca intr-o sambata dis de dimineata am pornit la drum..
</BODY>
</HTML>
!! Editati fisierul în Notepad, salvati fisierul cu extensia .HTML si realizati vizualizarea paginii folosind un program de navigare (Netscape sau Explorer) specificând calea spre fisierul dvs. !!
|
Marcaj HTML |
Marcaj închidere |
Semnificatie |
|
<B> |
</B> |
Afiseaza textul îngrosat |
|
<I> |
</I> |
Afiseaza textul înclinat |
|
<U> |
</U> |
Afiseaza textul subliniat |
|
<TT> |
</TT> |
Text cu font monospatiu |
|
<CITE> |
</CITE> |
Citare bibilografica |
|
<CODE> |
</CODE> |
Listing de program |
|
<DFN> |
</DFN> |
Definitie de cuvânt |
|
<EM> |
</EM> |
Stil logic de evidentiere |
|
<KBD> |
</KBD> |
Text de la tastatura (similar cu <CODE>) |
|
<SAMP> |
</SAMP> |
Exemplu de date introdus de utilizator |
|
<STRONG> |
</STRONG> |
Evidentiere logica puternica |
|
<VAR> |
</VAR> |
Program sau variabila |
|
<BASEFONT SIZE=n> |
Specifica dimensiune implicita font din pagina |
|
|
<FONT> |
</FONT> |
Specifica atribute ale textului încadrat |
|
SIZE=n |
Dimensiune text este 1: 7 , cu 7 cea mai mare |
|
|
FACE=a,b |
Specifica fontul - a daca e disponibil sau b |
|
|
COLOR=s |
Culoare text - nume de culoare sau valoare RGB |
1.3. Adaugarea referintelor si legaturilor
1.3.1.Referinte catre alte pagini Web
Marcajul principal utilizat este cel ancora <A > împreuna cu perechea sa </A>, care trebuie sa contina atribute fara care acest marcaj nu are sens si nu afecteaza formatarea informatiei.Atributul care trebuie specificat este cel de referinta hipertext HREF="valoare". Valoarea poate fi vida dar atributul trebuie specificat pentru ca lagatura sa apara activa în programul de navigare.
Ex.
Puteti vizita <A HREF="https://www.whitehouse.gov/"> Casa Alba on line!</A>
1.3.2.Referirea informatiilor non-Web
Se realizeaza pur si simplu folosind un URL adecvat care utilizeaza urmatoarea forma generala:
serviciu://numegazda (:port)-director (si nume fisier)
unde serviciul paote lua valorile
http protocol de transfer hipertext
mailto adresa de posta electronica
telnet telnet catre un sistem aflat la distanta
ftp fisier arhiva ftp
news server-ul de stiri usenet
Ex. Utilzare locatie gopher a Comisiei pt. protectia consumatorilor si respectiv mailto pentru trimitere mesaje...
<A HREF=gopher://cpsc.gov/>
<I>Am omis ceva? <A HREF=mailto:[email protected]> Trimite un mesaj!</A><I>
Toate referintele de tip hipertext arata la fel într-o pagina web indiferent de tipul informatiei indicate
Exista doua moduri de a accesa documente de pe server-ul dvs. si anume modul complicat în care se evidentiaza URL-ul complet al fiecarei pagini si modul simplu în care se specifica dora numele de document (inclusiv calea) fara informatii de prefix URL. URL-urile relative functioneaza pe baza faptului ca progamul de navigare adauga numele masinii gazda si calea paginii curente la fiecare referinta !!
|
Marcaj HTML |
Marcaj închidere |
Semnificatie |
|
<A> |
</A> |
Marcaj de tip ancora |
|
<HREF>=url |
Referinta hipertext |
1.4.Referinte interne în cadrul documentelor
1.4. 1.Definirea tintelor într-un document Web
Una din problemele cu care se confrunta proiectantii de pagini Web este când este optima plasarea unui document într-un fisier unic HTML si cînd e optima organizarea sa ca un set de fisiere. O regula empirica utilizata este urmatoarea - separarea paginilor prin puncte logice de salt si minimizarea timpului de încarcare pentru cititori.
Ţintele salturilor sunt cunoscute sub nume de ancore de nume. Marcajul HTML pentru un punct-ancora este o varianta a marcajului <A> de tip <A nume=valoare> unde valoarea poate fi orice secventa de caractere, numere, semne de punctuatie. Unele programe de navigare impun ca toate caracterele din ancora sa fie litere mici- testati restrictiile !!
Ancorele sunt destinatii din cadrul paginii curente si nu legaturi catre exterior textul nu este scos în evidenta în nici un fel. Acest marcaj trebuie închis cu marcajul pereche </A>.
1.4.2.Adaugare legaturi catre tinte din cadrul paginilor Web
Marcajul care defineste un salt la o legatura activa din cadrul documentului este tot o varianta a marcajului <A> caz în care atributul necesar este o referinta de tip hipertext de tip HREF dar URL-ul este înlocuit de numele ancorei în fata caruia se utilizeaza simbolul diez(#).
Ex. Utilizare referinta prin creare pagina cu reguli ce trebuie respectate la realizarea unei pagini Web
<A NAME="Ghid">
<CENTER>
<H1> Reguli pt. proiectare pagini Web</H1></A>
<Font SIZE=2>
<a href=#Regula1>Regula 1</a> |
<a href=#Regula2>Regula 2</a> |
<a href=#Regula3>Regula 3</a> |
<a href=#Regula4>Regula 4</a>
</Font>
<p>
</CENTER>
<BLOCKQUOTE>
<DL>
<A NAME="Regula1">
<DT><B>Regula #1:</A>
<DD>Intelege intentiile utilizatorului si modul in care utilizeaza paginile Web si apoi concentreaza-te asupra modului de proiectare in functie de necesitatile si interesul acestora</B>
</DL><DL>
<A NAME="Regula2">
<DT><B>Regula #2:</A>
<DD>Sa fi cumpatat cu elementele grafice </B>
</DL><DL>
<A NAME="Regula3">
<DT><B>Regula #3:</A>
<DD>Paginile chiar cele care includ elemente grafice nu trebuie sa se incarce in mai mult de 30 de secunde</B>
</DL><DL>
<A NAME="Regula4">
<DT><B>Regula #4:</A>
<DD> Minimizeaza paleta de culori</B>
</DL>
</BLOCKQUOTE>
S-a introdus în exemplul de mai sus marcajul <BLOCKQUOTE> si </BLOCKQUOTE> utilizat pentru indentarea textului din cadrul blocului respectiv. Alt marcaj <CENTER> centreaza orizontal textul din pagina.
1.4.3.Salturi în cadrul listelor organizate
Ancorele si punctele de salt sunt utilizate pentru a-i ajuta pe cititori sa navigheze în liste de dimensiuni mari cu informatii sortate alfabetic.
1.4.4.Legaturi catre tinte din documente externe
Daca adaugam notatia de forma # ancora la sfârsitul oricarui URL putem face ca acea legatura sa refere direct un anumit punct ancora din documentul respectiv.
Sa presupunem ca pagina cu ghidul referitor la modul de creare a paginilor Web ar fi pe un sistem www.intuitive.com iar URL-ul complet al acestuia ar fi de forma http://www.intuitive.com/articole/ghid_proiectare.html, atunci apelarea se realizeaza astfel:
<A HREF="http://www.intuitive.com/articole/ghid_proiectare.html#regula4"> Minimizeaza paleta de culori</A>
|
Marcaj HTML |
Marcaj închidere |
Semnificatie |
|
<A> |
</A> |
Marcaj de tip ancora |
|
HREF=#nume |
Referinta catre o ancora interna |
|
|
NAME=nume |
Definitia unei ancore interne |
|
