HTML Notiuni introductive HTMLHypertext Markup Language Un limbaj
HTML Notiuni introductive
HTML-Hypertext Markup Language • Un limbaj conceput pentru a crea site-uri web • Contine cuvinte cod-numite tag-uri si o sintaxa care trebuie respectata
• Standardul web este stabilit de consorţiul W 3 C (World Wide Web Consortium) care dictează specificaţiile pentru web şi impune standarde • Standarde web sunt: – – – – HTML 2. 0, HTML 3. 2, HTML 4. 01, CSS (Cascading Style Sheets), XML (Extensible Markup Language), XHTML (Extensible Hypertext Markup Language)
Tag-uri • Coduri scurte utilizate pentru marcarea elementelor html astfel incat acestea sa poata fi vizualizate in orice browser
Caracteristicile tag-urilor • Sunt scrise intre 2 paranteze unghiulare < si > – Exemplu: <html>, , etc • Pot fi perechi, existand un tag de deschidere si unul de inchidere(se introduce semnul / in interior) – Exemplu: <b> Text ingrosat </b> Text simplu • Tag-urile nu sunt case sensitive • Fiecare tag poate avea anumite atribute care furnizeaza browser-ului informatii suplimentare – Exemplu <font face=“Arial”> Ora de TIC </font>
Structura generala a unui document HTML
Exemplu structura • <html> <head> <title>Titlu Documentului</title> </head> <body> Continutul paginii </body> </html>
Structura • <head> • Acest tag urmeaza imediat dupa <html> si este folosit pentru a indica browser-ului, informatii utile precum: titlul pagini, continutul (folosit de motoarele de cautare vechi) • Se pot insera aici printre altele coduri Javascript sau CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML.
• <title> • Se pune intre <head> si </head>. Acest tag este cel care da numele pagini. • Numele va fi afisat in browser, de obicei in partea stanga sus.
• Elementul body este cel care defineste inceperea continutului pagini propriu-zise (titluri, paragrafuri fotografii, obiecte, etc). • body incapsuleaza tot continutul paginii.
<html> <head> <title> Prima mea pagina web!</title> </head> <body> Salut !Aici voi pune mai tarziu continutul! </body> </html>
Dimensiuni pentru titluri text • <h 2> inseamna ca e cea de-a doua marime a literei intre cel sase care exista. • <h 1> este cea mai mare iar • <h 6> va fi cea mai mica.
Exemplu • • <html> <head> <title> Pagina clasei • • • </title> </head> <body> <h 1> Titlu mare-tag h 1 </h 1> <h 2> Titlu mai mic -tag h 2</h 2> <h 3> Titlu mai mic, mictag h 3 </h 3> <h 4> Titlu tag h 4</h 4> <h 5> Titlu mic tag h 5 </h 5> <h 6> Titlu cel mai mic-tag h 6 </h 6> • • </body> </html>
Marcare paragraf • <p> • Este tag-ul care marcheaza deschiderea si incheierea unui paragraf. • Un paragraf este inclus intre <p> la inceput si </p> la sfarsit.
Atribute fonturi
Marimea Font-ului • Marimea font-ului se stabileste cu ajutorul atributului size al tagului font. • Sunt acceptate valori intre 1 (cea mai mica) si 7 (cea mai mare). • Valoarea standard a unui text normal este 3. • <font size="5">Acesta este un font de marime 5 </font> • <font color="#990000">This text is hexcolor #990000</font>
Coduri culori pentru site • Fiecare culoare 3 reprezentari: • Denumirea (in engleza), • Cod Hexazecimal (perechi de numere de la 0 la 9 si litere de la A la F), • Cod Decimal (numere de la 0 la 255). Exemplu: color: Deep. Sky. Blue; color: #00 BFFF; color: rgb(0, 191, 255);
HTML - Sistemul de culori RGB • Acest cod de culori nu este recomandat, deoarece Intenet Explorer este singurul Browser care suporta valorile RGB in HTML. • RGB este prescurtarea pentru: Red, Green, Blue. Fiecare dintre aceste culori poate lua orice valoare intre 0 (nu coloreaza deloc) si 255 (in totalitate acea culoare).
HTML - Sistemul de culori hexazecimal • Sistemul hexazecimal este destul de dificil la prima vedere. • Sistemul de culori hexazecimal este sistemul standard pentru toate browser-ele web. Este de incredere si este compatibil nu numai in aplicatiile web dar si aplicatii locale precum gimp, photoshop, corel, etc. • Sistemul coduri de culori hexazecimale este o reprezentare de 6 caractere de culoare. • Primele doua caractere (RR) reprezinta culoarea rosu (Red), urmatoarele doua (GG) culoarea verde (Green), iar ultimele doua (BB) culoarea albastra (Blue). • Bgcolor= “#RRGGBB”
- Slides: 19