CLASA A XII-A: Activitatea nr.4: 10.10-14.10

Tema nr.2: HTML – elemente de baza

Unitatea de invatare:

Instrumente de lucru pentru crearea site-urilor Web

Tipul lectiei: Reactualizare cunostinte clasa a IX-a

Ce inseamna HTML?

HTML:

este acronimul de la HyperText Markup Language si
reprezinta un limbaj pentru crearea si marcarea (formatare, aranjare) unui document astfel incat sa poata fi publicat pe World Wide Web si vizualizat cu ajutorul unui browser (Internet Explorer, Netscape, Opera etc.).

Documentele HTML – structura

Un document HTML este format dintr-o succesiune de blocuri de informatie. Aceste blocuri pot fi incluse unul in altul.

Un bloc este delimitat de simboluri speciale, numite tag-uri (etichete). Modul in care un document este marcat cu elemente si cu atribute ale acestor elemente se realizeaza in conformitate cu Document Type Definition (DTD – definitia tipului de document). Aceasta contine regulile ce caracterizeaza fiecare tip de document. Sursa autorizata pentru furnizarea de informatii despre HTML si HTML DTD este World Wide Web Consortium (W3C) avand adresa http://www.w3.org.

Tag-ul este termenul consacrat pentru a defini elementele cu care sunt marcate textul si grafica intr-o pagina web. Fiecare tag este incadrat de semnele "<" (mai mic) si ">" (mai mare). Primul cuvant sau caracter ce apare in interiorul acestor paranteze poarta numele de element. Majoritatea elementelor au un tag de deschidere si unul de inchidere cu aceeasi structura, dar cu prezenta caracterului "/" in fata denumirii elementului.
Cuvantul sau cuvintele ce urmeaza dupa element si despartite de acesta printr-un spatiu, poarta de numirea de atribute, avand rolul de descrie proprietatile elementelor. Atributele sunt urmate de semnul "=" si pot avea diferite valori. Valoarea unui atribut este trecuta, de obicei, intre ghilimele. Elementele HTML pot avea unul sau mai multe atribute.

Orice pagina web (document HTML) are in structura trei elemente obligatorii: un element numit HTML, care cuprinde intregul document, si doua sub-elemente ale acestuia: HEAD (antet, cap) si BODY (corp).

Tag-ul <HTML> este primul tag care trebuie sa apara intr-un fisier HTML. El va incadra alaturi de tag-ul sau corespunzator de inchidere (</HTML>) intreaga pagina web.
Tag-ul <HEAD> va marca partea de antet a paginii web. Are tag corespunzator de inchidere (</HEAD>).
Tag-ul <BODY> va incadra continutul paginii web. Are tag corespunzator de inchidere (</BODY>).
Tag-ul <TITLE> marcheaza titlul unui document HTML, cel care va fi afisat in bara de titlu a browser-ului. Acest tag se foloseste numai in interiorul tag-ului HEAD. Daca acest tag lipseste, atunci in bara de titlu va aparea numele fisierului.

Model de structura a unui document HTML:
<HTML>
<HEAD>
<TITLE>Titlul documentului</TITLE>
<BODY>
Continutul documentului
</BODY>
</HTML>

Crearea titlurilor in pagina

Elementele constituite din titluri si subtitluri se regasesc in interiorul sectiunii BODY si sunt marcate de tag-urile <H1> pana la <H6>, avand dimensiunile corespunzatoare pe o scala de la 1 la 6, unde <H1> are dimensiunea cea mai mare, iar <H6> are dimensiunea cea mai mica. Este necesara folosirea tag-urilor de inchidere </H1> ... </H6>.

<HTML>
<HEAD>
<TITLE>Pagina cu titluri</TITLE>
</HEAD>
<BODY>
<H1>TITLU de tip H1</H1>
<H2>TITLU de tip H2</H2>
<H3>TITLU de tip H3</H3>
<H4>TITLU de tip H4</H4>
<H5>TITLU de tip H5</H5>
<H6>TITLU de tip H6</H6>
</BODY>
</HTML>

Atributele specifice acestui element sunt:

Atribut	Valoare	Descriere
align	left center right justify	Precizeaza modul de aliniere a textului cuprins in tiltu.

Crearea paragrafelor

Paragrafele va permit sa adaugati text in documentul web intr-o asemenea maniera incat este ajustat in mod automat la dimensiunea ferestrei browser-ului in care este afisat, adica fiecare rand de text va avea latimea ferestrei in care este afisat.

Pentru a marca prezenta unui paragraf se foloseste tag-ul <P>. Acesta necesita tag de inchidere </P>.

Formatarea paragrafelor intr-un document web se realizeaza astfel:

<HTML>
<HEAD>
<TITLE>Pagina cu paragrafe</TITLE>
</HEAD>
<BODY>
<P>Paragrafele va permit sa adaugati text in documentul web.</P>
<P>Fiecare rand de text va avea latimea ferestrei in care este afisat </P>
</BODY>
</HTML>

O modalitate de a imparţi o zona de text pe randuri este de a semnala browser-ului exact unde vrem sa fie efectuata ruperea de randuri, folosind tag-ul <BR>. Acesta impune afisarea textului situat dupa el pe linia urmatoare. Nu are tag corespunzator de inchidere.

<HTML>
<HEAD>
<TITLE>Ruperea randului</TITLE>
</HEAD>
<BODY>
<P>Acest text contine o rupere <BR> a randului </P>
</BODY>
</HTML>

Un alt element ce contribuie la redarea unui aspect mai placut unui document web este linia orizontala (Horizontal Line), redata in limbajul HTML prin tag-ul <HR>. Acest element nu are un tag de inchidere. Pur si simplu adaugati tag-ul <HR> in interiorul sectiunii BODY si veti avea ca rezultat o linie orizontala.

<HTML>
<HEAD>
<TITLE>Inserarea unei linii orizontale</TITLE>
</HEAD>
<BODY>
<P>Aceasta pagina contine o linie orizontala <HR> inserata intr-un paragraf</P>
</BODY>
</HTML>
Atributele specifice acestui element sunt:

Atribut	Valoare	Descriere
align	left center right	Precizeaza modul de aliniere liniei in document.
noshade	noshade	Cand este prezent, acest atribut are ca rezultat inlaturarea efectului de umbra, setat in mod inplicit pentru linia orizontala.
size	pixels %	Precizeaza grosimea liniei orizontale.
width	pixels %	Precizeaza latimea liniei orizontale.
color	rgb(x,x,x) #xxxxxx colorname	Precizeaza culoarea liniei orizontale.

Formatarea textului

Schimbarea aspectului textului

Tag-ul <FONT> care stabileste tipul de caracter folosit, marimea si culoarea acestuia. Necesita tag de inchidere </FONT>.

Atributele care definesc acest tag sunt urmatoarele:

Atribut	Valoare	Descriere
color	rgb(x,x,x) #xxxxxx colorname	Precizeaza culoarea caracterelor.
face	denumirea tipului de caracter	Precizeaza tipul de caracter ce va fi folosit in text. Pot fi specificate mai multe tipuri concomitent (pentru cazul in care un utilizator nu are anumit tip de font, de exemplu face=”Arial,Tahoma,Verdana,Helvetica”)
size	o valoare numerica de la 1 la 7	Precizeaza marimea caracterelor (valoarea implicita este 3).

Elementul <FONT> poate fi cuprins in interiorului multor elemente (cum ar fi paragraf, titlu, sectiune etc.), dar la fel de bine aceste elemente se pot afla in interiorul elementului <FONT>, rezultatele obtinute fiind similare.
<FONT color="red"><H1>Titlu</H1> </FONT> este similar cu
<H1><FONT color="red">Titlu </FONT> </H1>

Principalele elementele de stil ce caracterizeaza corpurile de litera si care contribuie la evidentierea acestora, sunt marcate de urmatoarele tag-uri:

<B> - are ca efect ingrosarea textului
<I> - are ca efect italicizarea textului
<U> - are ca efect sublinierea textului
<BIG> - are ca efect marirea textului
<SMALL> - are ca efect micsorarea textului
<TT> - are ca efect spatierea in mod egal a textului (litera I si litera M vor acupa acelasi spatiu in interiorul unui cuvant)
<S> <STRIKE> <DEL> - toate au ca efect afisarea textului taiat cu o linie orizontala

Toate aceste tag-uri necesita tag-uri de inchidere.

Pe langa elementele prezentate mai sus, mai exista o serie de elemente cu o utilizare mai restransa pe care le vom mentiona pe scurt:

<SUP> - Permite afisarea caracterelor exponent (^superscript)
<SUB> - Permite afisarea caracterelor indice (_subscript)
<EM> - Accentueza un text (similar cu italic <I>)
<STRONG> - Intareste modul de afisare a unui text (similar cu bold <B>)
<DFN> - Indica faptul ca textul reprezinta definitia unui termen
<CODE> - Indica faptul ca textul reprezinta un cod de calculator
<SAMP> - Indica faptul ca textul reprezinta un model de cod de calculator
<KBD> - Indica faptul ca textul reprezinta un text de tastatura
<VAR> - Indica faptul ca textul reprezinta o variabila
<CITE> - Indica faptul ca textul reprezinta un citat

Toate aceste tag-uri necesita tag-uri de inchidere.

Pagini

marți, 11 octombrie 2011

Activitatea nr.4: 10.10-14.10