Ce este limbajul HTML?
HTML este prescurtarea de la HyperText Markup Language (limbaj de marcare hipertext) si constituie limbajul care ne permite sa cream si sa facem publice propriile documente multimedia în World Wide Web, cu ajutorul programelor Internet Explorer, Netscape Communicator si Navigator, Mosaic si multe altele. Utilizând HTML, putem crea documente atractive aflate la frontiera publicatiilor interactive.
HTML este un limbaj de codare utilizat la crearea documentelor hypertext pentru a fi publicate pe Web.
HTML s-a nascut dintr-un limbaj mult mai mare, cunoscut ca SGML (Standard Generalized Markup Language - Limbaj de Marcaje Generalizat Standard).
În prezent sunt cunoscute patru versiuni HTML, versiunea 1.0, 2.0, 3.2 si mai recenta versiune 4.0.
Versiunea 1.0 este obligatorie pentru toate browserele Web si contine facilitati de baza în privinta formatarii textelor.
Versiunea 2.0 este putin mai avansata si ofera suport pentru imaginile in-line (imagini care apar în interiorul unui document hypertxt) si pentru formulare de completat (fill-out-forms - FOF) ce permit introducerea de catre utilizator a datelor dintr-un document hipertext.
La versiunea 3.0 s-au introdus facilitati importante ca structurile tabelare, posibilitatea folosirii culorilor si a modelelor pentru prim-plan si fundal si documente dinamice.
HTML este un limbaj complex si consta dintr-o serie de tag-uri care încapsuleaza (si încadreaza) parti din textul documen 626q1614g telor.
Tag-uri mai complicate permit încorporarea în documentele HTML a imaginilor, hiper-legaturilor (adrese activabile cu ajutorul mouse-ului, ce încearca resurse Internet), a butoanelor radio, a casutelor de validare, precum si a formularelor (pentru introducerea datelor de catre utilizator).
Daca dorim sa publicam documente în Internet prin intermediul World Wide Web trebuie neaparat sa cunoastem minimul necesar de reguli ale limbajului HTML.
Ce este HTML? Redus la esenta, Limbajul de Marcare HiperText este un set de coduri speciale care se insereaza într-un text, pentru a adauga informatii despre formatare si despre legaturi. HTML se bazeaza pe Limbajul Generalizat Standard de Marcare (Standard Generalized Markup Language - SGML).
Prin conventie, toate informatiile HTML încep cu o paranteza unghiulara deschisa (<) si se termina cu o paranteza unghiulara închisa (>) - de exemplu, <HTML>. Acest control - sau marcaj HTML, cum mai este numit - comunica unui interpretor HTML (program de navigare) ca documentul este scris si formatat în limbajul HTML standard. Exemple de interpretoare HTML ar putea fi programul Internet Explorer al companiei Microsoft, program de explorare Web inclus atât în pachetul Microsoft Plus! pentru Windows 95, cât si în pachetul Internet Connection Kit al firmei Apple (si care este disponibil gratuit si la locatia Web Microsoft: https://www.microsoft.com/ ).
Programarea aplicatiilor Internet
Pentru obtinerea unui fisier HTML simplu poate fi folosit un editor WYSIWYG (What You See Is What You Get) sau un editor text pentru obtinerea textului sursa HTML. A doua metoda are avantajul de a conduce la o buna cunoastere a limbajului HTML (HyperText Markup Language), pe care browserul îl foloseste pentru a schimba culorile, dimensiunile caracterelor, pentru a include imagini si alte obiecte spectaculoase.
Pentru obtinerea unui fisier HTML vom avea nevoie de un editor de text simplu, cum este Notepad din Windows sau Joe din Linux.
Constructia unui fisier HTML simplu
HTML functioneaza prin activarea si dezactivarea facilitatilor cu ajutorul etichetelor (eng. Tags). Toate etichetele sunt incluse între paranteze ascutite, de exemplu <HTML>. Eticheta HTML este începutul paginii de web si comunica browserului unde se afla începutul declaratiilor. Pentru a dezactiva o facilitate va trebui utilizata aceeasi eticheta precedata de slash, de exemplu </HTML>. Prin urmare, aici se termina pagina web. De ce anumite etichete nu afecteaza browserul? Motivul este ca toate browserele sunt diferite, chiar daca toate suporta aceeasi versiune de HTML. Este foarte important ca atunci când creezi pagina sa decizi cât suport trebuie sa acorzi browserelor vechi. Nu trebuie uitat ca în timp ce programatorul foloseste ultima varianta de browser de la Netscape sau Microsoft, persoana care foloseste pagina poate sa aiba numai Netscape 2 sau o varianta veche de Mosaic. Acesta este motivul pentru care o serie de browsere contin specificatia ,,Best Viewed With ...".
Începutul
Pentru început, trebuie precizat ca toate paginile HTML ar trebui sa contina urmatoarea secventa:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
si iata o explicatie a celor de mai sus:
<HTML> </HTML> - aceste etichete sunt la începutul si sfârsitul documentului HTML
<HEAD> </HEAD> - informatii de tip header, similare cu cele ale unui procesor de text
<BODY> </BODY> - între aceste etichete este plasat continutul paginii de web.
Practic, acestea sunt informatiile necesare pentru crearea unei pagini de web. Mai sunt de învatat câteva etichete care vor face ca pagina creata sa arate bine.
Etichete ce vor fi incluse în header:
<TITLE> </TITLE> - plaseaza un titlu pe bara de titlu a browserului. Trebuie sa apara între etichetele <HEAD> si </HEAD>. Exemplu: <HEAD> <TITLE>Pagina mea de test</TITLE> </HEAD>
Controlul avansului de rand si alinierii
<P></P> - simbolizeaza un paragraf si începe un nou paragraf. Similar cu un dublu CR. Permite alinierea în browser. Nu este nevoie sa se foloseasca eticheta de închidere daca nu a fost efectuata nici o formatare, adica nu a existat aliniere.
<BR> - line break. Similar cu un singur enter.
<CENTER> </CENTER> - centreaza textul si imaginile dintre etichete.
ALIGN="left | center | right" - formateaza alinierea textului. Va fi utilizat cu etichetele <P> sau <H*>, de ex. <H1 ALIGN="center">
Stiluri de text
Informatiile de formatare discutate pâna acum ne permit sa cream documente atractive. Diversele niveluri de marcaje de formatare a subtitlurilor rezolva situatia în care trebuie sa împartim documentul în subsectiuni. Fiecare nivel de subtitlu are un control de deschidere, si unul de închidere. Marcajul pentru nivelul cel mai de sus este <H1>; cel mai de jos este <H6>. Unul din lucrurile care trebuie tinute minte despre HTML este ca fonturile, dimensiunile si efectele propriu-zise din prezentarea finala pot fi modificate de utilizator, pe baza preferintelor pe care acesta le definste în programul de explorare.
Un control foarte util pentru organizarea vizuala a documentului este marcajul de rigla orizontala <HR>. Plasat oriunde într-un document Web, acest marcaj produce o linie subtire orizontala afisata pe întreaga latime a paginii.
Una din cele mai importante caracteristici ale oricarei tehnoredactari - în Web sau pe hârtie - este utilizarea diverselor fonturi si stiluri pentru a-l ajuta pe cititor sa parcurga materialul. Pentru caractere italice se foloseste marcajul pereche <I></I>, iar pentru caractere îngrosate se foloseste marcajul pereche <B></B>. E obligatoriu ca imediat dupa paranteza unghiulara deschisa a unui marcaj de formatatre HTML sa se scrie codul de formatare; nu sunt permise spatii. În redactarea paginilor Web mai sunt admise si alte optiuni de formatare a textului:
marcajul de subliniere este <U>, cu marcajul pereche </U>;
marcajul de monospatiu este <TT>, cu marcajul pereche </TT>;
indicii superiori superscript sunt definiti prin <SUP> si </SUP>, iar cei inferiori subscript prin <SUB> si </SUB>;
textul poate fi "taiat" utilizând< STRIKE>, cu marcajul pereche <STRIKE>.
Numele de monospatiu provine de la faptul ca fiecare litera dintr-un font de acest tip ocupa exact aceeasi latime, chiar daca litera respectiva este destul de îngusta. Textul scris cu un font monospatiu seamana, de obicei, cu un text scris la masina. Fonturile monospatiu sunt de multe ori mai utile decât sublinierea, dar nici ele nu sunt folosite prea mult în paginile Web. În functie de programul de explorare Web utilizat, unele marcaje HTML pot fi combinate, iar altele nu. Combinarea caracterelor italice si îngrosate nu functioneaza în anumite cazuri, dar fiecare dintre ele functioneaza împreuna cu <TT>. O extensie recenta a limbajului HTML reprezinta una din cele mai atractive proprietati: posibilitatea de a modifica dimensiunea, culoarea si corpul de litera al fontului folosit. Dimensiunile fonturilor HTML variaza de la 1 la 7. Din pacate este invers în comparatie cu numararea dimensiunilor subtitlurilor, în care subtitlul <H1> este cel mai mare, iar <H6> este cel mai mic. Toate modificarilor caracteristicilor fontului se fac prin diverse variante ale marcajului <FONT>, acesta fiind primul marcaj întâlnit care contine atribute specifice. Marcajele HTML care pot avea atribute le specifica, de obicei, prin perechi de forma nume = valoare. Marcajul <FONT> este un exemplu excelent: pentru a modifica dimensiunea unei portiuni de text, utilizati formatarea: <FONT SIZE=7>un text important</FONT>.
Trebuie sa observam ca marcajul de închidere </FONT> nu a trebuit sa contina atributele marcajului de deschidere: nu a fost nevoie sa utilizam </FONT SIZE =7> pentru a încheia textul scris cu font mare. Acesta este un amanunt important care economiseste timp atunci când exploram formatari mai complexe. Dimensiunile fontului pot fi specificate în mod absolut sau în mod relativ: <FONT SIZE=+l>un text important </FONT>. În mod similar, se poate specifica o culoare pentru o portiune de text, prin folosirea atributului COLOR al marcajului FONT. Exista o mare varietate de culori care pot fi specificate prin nume sau putem folosi valori hexazecimale RGB pentru a avea un control mai bun al rezolutiei culorilor. Un alt atribut al marcajului <FONT> este atributul FACE, cu ajutorul caruia putem specifica un tip de font. Acesta este însa un atribut înselator, deoarece trebuie specificat numele exact al fontului de pe sistemul utilizatorului, iar acestea au nume diferite pe platforme diferite.
Avantaje si dezavantaje: specificam tipul fontului cu atributul FACE al marcajului <FONT> si putem preciza ca valoare o lista de fonturi. Daca nici unul din fonturile specificate nu sunt gasite, atunci textul va fi afisat cu fontul proportional predefinit. Pentru a schimba dimensiunea predefinita a fontului dintr-o pagina, putem utiliza <FONT SIZE=4> sau marcajul dedicat acestui scop, numit <BASEFONT>. Pe lânga aceste directive de stil specifice discutate pâna acum, limbajul HTML mai permite ata-numitele stiluri logice. Stilurile logice permit cititorilor sa defineasca evidentieri ale textului. Cele mai cunoscute stiluri logice sunt <EM></EM> pentru evidentiere, si <STRONG></STRONG> pentru evidentiere puternica. Alte marcaje logice sunt: <CITE></CITE> - pentru citare bibliografica, <CODE></CODE> pentru listing de program, <DFN></DFN> - pentru definitii de cuvinte, <KBD></KBD> - pentru text de la tastatura, <SAMP></SAMP> - pentru exemple de date introduse de utilizator, <VAR></VAR> - pentru programe sau variabile.
Sumar marcaje
Marcaj HTML |
Marcaj de închidere |
Semnificatie |
<HTML> |
</HTML> |
Defineste un fisier în format HTML |
<HEAD> |
</HEAD> |
Informatie de formatare HTML |
<TITLE> |
</TITLE> | |
<BODY> |
</BODY> |
Corpul paginii HTML |
<BR> |
Linie noua |
|
<HR> |
Rigla orizontala |
|
<Hn> |
</Hn> |
Nivel de subtitlu al documentului |
<P> |
Paragraf nou |
|
<PRE> |
</PRE> |
Informatie preformatata |
<B> |
</B> |
Afiseaza text îngrosat |
<I> |
</I> |
Afiseaza text înclinat (italic) |
<U> |
</U> |
Afiseaza text subliniat |
<TT> |
</TT> |
Text cu font monospatiu |
<CITE> |
</CITE> |
Citare bibliografica |
<CODE> |
</CODE> |
Listing de program |
<DFN> |
</DFN> |
Definitie de cuvânt |
<EM> |
</EM> |
Stil logic de evidentiere |
<KBD> |
</KBD> |
Text de la tastatura |
<SAMP> |
</SAMP> |
Exemplu de date introduse de utilizator |
<STRONG> |
</STRONG> |
Evidentiere logica puternica |
<STRIKE> |
</STRIKE> |
Text taiat cu o linie |
<VAR> |
</VAR> |
Program sau variabila |
<CENTER> |
</CENTER> |
Text centrat |
<SUP> |
</SUP> |
Superscript |
<SUB> |
</SUB> |
Subscript |
<BASEFONT> SIZE=n |
Specifica dimensiunea implicita a fontului din pagina |
|
<FONT> SIZE=n FACE="a,b" COLOR=s |
</FONT> |
Specifica atribute ale textului încadrat dimensiunea textului fontul folosit culoarea textului |
|