GhidSoft  ðŸ“—
- Lecții de Business, IT, Comunicare, Viață Socială & Abilității

Dacă vrei să devii mai bun și să înveți lucruri noi, atunci aici este unul dintre locurile în care poți învăța lectii de business, IT, hacking, securitate, calculatoare, comunicare, relații, abilității personale, viată socială & dezvoltare personală

duminică, 26 martie 2017

Programare HTML -Organizarea textului - Lectia Numarul 4

      , , , , ,      No comments   

Elementele HTML se clasifica in elemente bloc si elemente de linie : Elementele bloc - sunt titluri ,paragrafe,liste sau tabele ,acestea sunt structuri mari care contin alte blocuri ,elemente de line sau text. Elementele line sau elementele de text -sunt hiperlegaturi ,referinte ,citate sau imagini ,care sunt structuri mici ce reprezinta  sau descriu secvente de text sau de date.

  • Imbricarea elementelor
Elementele HTML se pot imbrica .Cum procedam atunci cand vrem ca in interiorul unui paragraf sa avem un cuvant ingrosat?
 <p>Aici trebuie sa avem un cuvant <em>evidentiat</em></p>
 <p>Aici trebuie sa avem un cuvant <em>evidentiat</p></em>
Care este varianta corecta ?
Imbricarea elementelor reprezinta incadrarea unor marcatori in interiorul altor marcatori , fara sa afecteze integritatea codului HTML. Codul html este considerat valid cand acesti marcatori sunt inchisi in ordinea inversa in care au fost deschisi.

  • Exemplu corect : <p>Aici trebuie sa avem un cuvant <b>ingrosat</b></p>
  • Exemplu gresit : <p>Aici trebuie sa avem un cuvant <b>ingrosat</p></b>

Ce parere aveti insa de urmatoarea varianta :
 <b>Aici testam cateva <u> formatari <b> de text</u>
Acest cod html este valid .Diferenta consta doar in tipul de text pe care utilizatorul vrea sa-l obtina . Daca executati acest cod o sa puteti observa ca textul ingrosat se opreste dupa cuvantul 'formatari', de unde continua numai textul subliniat.

  • Elemente de tip antet ( header )
<title>...</title>  - Acest element defineste titlul documentului .Browser-ul web afiseaza acest titlu pe bara de titlu a ferestrei .Elementul title  nu contine alte elemente .Intr-un document ,este permis un singur element title.
<base> - Acest element specifica un URL (Uniform Resource Locator) de baza penrtu toate referintele si hiperlegaturile din document .Trebuie dispus inaintea oricarui element ce poate referi o resursa externa .HTML permite un singur element base pentru un document. Elementul base are atribute ,dar nu are continut.
<link> - Acest element specifica legaturi catre alte documente si are doua atribute :
- atributul rel -descrie legaturile anterior si urmator (previous si next );
- atributul type - specifica tipul legaturii URL (text/css,text/javascript,image/gif);
Elementul link se trece intre tag-ul <head>   si </head> si poate sa existe de mai multe ori intr-un document html.

  • Exemplu :


 <html>
<head>
<title>Elemente head<t/itle>
<base href='http://learncodingweb.blogspot.ro/'>
</head>
</body>
</html>

<meta> -Acest element poate fi folosit pentru a specifica autorul ,data publicarii ,data expirarii,descrierea paginii,cuvinte cheie si orice alt fel de metadata. Datorita naturii generice , elementele meta specifica perechi de forma nume=valoare. Acest element nu are tag de sfarsit.
Atributul obligatoriu este content .Atributul obtional name impreuna cu valorile : author , description , keywords , revised  specifica autorul , descrierea , cuvintele cheie si ultima data la care pagina a fost revizuita, Atributul obtional http-equiv impreuna cu valoarea refresh specifica la cate secunde se reinnoieste pagina . Cele mai multe motoare de cautare folosesc programe robot (Web Spiders) . Aceste programe copiaza paginile vizitate intr-o baza de date , pe care mai tarziu o prelucreaza ,folosind o indexare dupa cuvinte cheie pentru a face mai usoara cautarea. Cuvintele cheie fac parte din metadate .Aceasta indexare se face prin citirea metadatelor din documentele sursa html .In functie de metadate ,fiecare pagina web este incadrata intr-o categorie.

 ATENTIE ! -Metadata este o informatie care nu se afiseaza .Cu alte cuvinte ,informatia continuta intag-ul ,eta nu apare in pagina web.

Exemplu :
 *Cuvinte cheie sunt HTML,XHTML,CSS
<meta name='keywords' content='HTML,XHTML,CSS' />
 *Descrierea site-ului este -Coding Web programare si distractie
<meta name='description' content='Coding Web programare si distractie' />
*Ultima data cand pagina a fost revizuita este 26/03/2017 ,iar pagina a fost revizuita de Licode Yoka.
<meta http-equiv='refresh' content='5'>
*Pagina web va fi actualizata la fiecare 5 secunde .
<meta name=revised' content='Licode Yoka , 26/03/2017' />


  • Elemente de tip body (corpul pagini)
<p>...</p> Acest element creeaza un paragraf.Este cel mai comun element de bloc.Tag-ul de sfarsit nu este obligatoriu. Acest elemente poate contine atributul align cu urmatoarele valori : left ,right,center si justify - care specifica alinierea textului in cadrul paginii.

 ATENTIE ! - Odata cu versiunea HTML 4.01 atributul align a fost inlocuit cu stiluri. 

 <blockqoute>...</blockqoute> -Acest element introduce un citat si este folosit cand citatul in sine contine elemente de bloc (de ex : citirea mai multor paragrafe).Atributul cite specifica sursa si trebuie sa fie un URL de tip linie .
<hr> Insereaza o line orizontala pentru controlul paginii.
  • Exemplu

<html>
<head>
</head>
<body>
<blockqoute>
Acesta este un citat foarte lung <p>Acest este un citat foarte mare</p></blockqoute>CodingWeb For You !<hr>
</body>
</html>


  • Elemente heading 
Definesc titluri de sectiuni la niveluri diferite .Pentru cel mai inal nivel -cel mai mare titlu se foloseste <h1>...</h1>. Pentru cel mai mic nivel se foloseste <h6>...</h6> -cel mai mic titlu.
     Atributul align specifica alinierea in pagina .De exemplu codul :
 <h1 align='center'>Coding Web</h1> - va genera un textul -Coding Web - de tip h1 centrat in pagina.Cele mai multe browsere dispun titlurile <h1> ca text mare cu un font diferit, si titlurile <h6> ca text mic ,ingrosat.
  • Elemente generale 
Elemente de tip linie -pentru obtinerea unui cod html valid ,aceste elemente nu se plaseaza direct in interiorul elementului body ,ci se incadreaza in intregime in interiorul elementelor de bloc.
<em> ...</em> -Provine de la emphasis -subliniere ,evidentiere .Conventional se dispune textul inclinat.
<strong>...</strong> -Provine de la strong emphasis - subliniere ,evidentiere puternica .Conventional se dispune textul ingrosat.
<q>...</q> -Provine de la quotation -citat .Se pot folosi numai elemente de linie sau de text. Atibutul cite ofera sursa si trebuie sa constituie un URL corect.
<del>...</del> -Text sters ;textul apare taiat cu o linie la mijloc.
<ins>...</ins>Text inserat se foloseste de obicei pentru a marca inlocuirea tesxtului sters .Textul este afisat subliniat.

  • Elemente pentru documentarea codului
Aceste elemente sunt folosite pentru documentarea dezvoltarii codului sursa si se refera la:
<code>...</code> -codul sursa
<samp>...</samp> -rezultatul executiei cudului
<kbd>...</kbd> -textul introdus de utilizator de la tastatura
<var>....<var> -variabile
Daca va placut acest articol sau altele de pe site-ul  ,meu  va rog sa le distribuiti mai departe pe facebook pentru a afla cat mai multe persoane si daca vreti sa imi dati si un like va invit pe pagina mea de facebook aici: https://www.facebook.com/OriginalsBlue/ 

0 comments:

Trimiteți un comentariu