Inofrmatica Aplicata

Cursul 2
Hipertextul: Metoda de organizare a informatiilor n care datele sunt memorate ntr-o retea de
noduri si legaturi, putnd fi accesata prin intermediul browserelor si manipulata de un editor.
Noduri (concepte) = blocuri de informatii cuprinse n reteaua sistemului hipertext. Un nod

reprezinta, n mod uzual, un concept unic (o idee), putnd contine text, grafica, animatie, audio,
video,imagini sau programe.
Legaturi (relatii) = conexiuni ntre nodurile din reteaua hipertextului,ce permit utilizatorului sa
treaca de la un nod la altul.
HTML = limbaj de marcare a hipertextului utilizat pentru descrierea

paginilor Web. Tim Berners-Lee pune bazele lui n anul 1989 pentru comunicarea
pe Internet ntre fizicienii de la CERN.
HTML este un limbaj bazat pe SGML (Standard Generalized Markup Language) standardizat n
1986.
HTML nu este un limbaj de programare, e un limbaj de marcare.
JavaScript este un limbaj de programare de script (codul este vizibil utilizatorului), interpretat
n browser, dezvoltat de Netscapes,i Sun si cu care pot fi create pagini web interactive.
Limbajul HTML ofera autorilor mijloace pentru:

I publicarea de documente cu antete, texte, tabele, liste, fotografii etc.
I regasirea on-line de informatii prin intermediul hiperlegaturilor accesate printr-un simplu
click de mouse.
I proiectarea de formulare pentru realizarea tranzactiilor cu servere aflate la distanta, pentru
cautari de informatie sau pentru activitati specifice comertului.
I includerea de foi de calcul tabelar, clipuri video, sunete si alte aplicatii direct n documente.
Se numeste tag ceea ce este cuprins ntre semnele < si >.

Exista un tag de deschidere (de nceput) si un tag de nchidere (de sfrsit - cel prefixat de
semnul /). (ex: <body>...</body>))
Prin element ntelegem att numele general al tagului ct si obiectul format din tag de nceput
(+atribute, daca exista), continut si tag de nchidere.
Limbajul HTML nu este case-sensitive (nu face deosebirea ntre majuscule-minuscule)
Elemente ce nu au nevoie de tag de nchidere: <meta> <br><embed> <hr> <img> <input>

<link> <param> <source> <wbr>.
1
Tagurile trebuie sa fie declarate astfel nct elementele sa fie cuprinse complet unele n altele,
fara suprapunere.
Spatiile multiple din continutul unui element sunt ignorate.

Elementele pot avea atribute care controleaza modul n care functioneaza elementele.
Elementele nu trebuie sa se suprapuna. Exemple:
1 <p>Acesta este <em>complet<strong>gresit</em>!</strong></p>
2 <p>Acesta <em>este <strong>corect</strong>.</em></p>
Atributele se plaseaza n interiorul tagului de nceput.

Atributele constau dintr-un nume si o valoare separate printr-un caracter =.
Valoarea atributului poate sa nu fie cuprinsa ntre ghilimele daca nu contine spatii si niciunul
din caracterele " = < sau > .
Altfel sunt cuprinse ntre apostrofuri sau ghilimele.
Valoarea si caracterul = pot fi omise daca valoarea este nula.
Documentele HTML sunt n format text ASCII si pot fi editate cu orice editor de text (de ex.
Notepad++ sau SublimeText) sau cu editoare specializate de tip WYSIWYG (de ex. Adobe
Dreamweaver).
Prima linia a fisierului este declaratia tipului documentului ce specifica ce versiune de HTML se
foloseste.
Urmeaza antetul documentului (<head>) incluznd orice fel de metadate (informatii
suplimentare despre pagina). Acestea nu sunt afisate (n afara de titlul documentului din bara
de titlu). Mai contine legaturi catre fisiere externe si metadate utile pentru clasificarea
automata a paginii web de catre motoarele de cautare.
Continutul vizibil al unei pagini web se afla n cadrul elementului <body>.
DTD = Document Type Definitions - Definitii n limbajul general XML
Exista doua tipuri de elemente:

I elemente de tip bloc: ncep pe un rnd nou pe o pagina si ocupa ntreaga latime disponibila.
Elementele de tip bloc pot fi cuprinse unul n altul si pot contine elemente de linie.
I elemente de linie: nu trebuie sa nceapa pe un rnd nou, ocupa doar latimea necesara. Nu pot
cuprinde elemente de bloc dar pot contine alte elemente de linie.
Paragrafele sunt elemente de tip bloc si se introduc cu tagul <p>...</p>.
Spatiile multiple sunt ignorate.
1 <p>Acesta este un paragraf</p>
Trecerea la un rnd nou se realizeaza utliznd tag-ul <br>.
Exemplu:
1 <p>Prima linie
2 din paragraf<br>
3 A doua linie din paragraf
4 </p>
2
Introducerea unei linii orizontale se realizeaza cu ajutorul tagului <hr>.
Pentru alinierea paragrafelor se poate utiliza atributul align

1 <p align="directie">Text paragraf</p>
Valori posibile pentru directie:
I left = aliniere la stnga
I right = aliniere la dreapta
I center = aliniere la centru
I <b>Text boldat (cu aldine) </b>

I <i>Text nclinat (italic)</i>
I <u>Text subliniat</u>
I <em>Text accentuat</em>
I <strong>Text puternic accentuat</strong>
I <cite>Text ce reprezinta o citare sau o referire la alte surse</cite>
I <code>Desemneaza un fragment de cod</code>
E important de nteles diferenta semantica dintre tagurile <strong> si <b>,

amndoua facnd textul aldin.
1 
2 <p><strong>Atentie!</strong> Pericol de electrocutare!</p>
3
4 
5 <p>Campul are intotdeauna o componenta <b>electrica</b> si una <b>
magnetica</b>.</p>
E important de nteles diferenta semantica dintre tagurile <em> si <i>,

amndoua facnd textul italic.
1 
2 <p>Imi <em>place</em> sa studiez electrotehnica!</p>
3
4 
5 <p>Cuvantul <i>electric</i> provine din limba greaca.</p>
Victor
Liste neordonate:
1 <ul>
2 <li>primul element al listei</li>
3 <li>al doilea element al listei</li>
4 <li>s.a.m.d</li>
5 </ul>
Liste ordonate:
1 <ol>
2 <li>primul element al listei</li>
3 <li>al doilea element al listei</li>
3
4 <li>s.a.m.d</li>
5 </ol>
<ol type="A"> - va genera o lista numerotata cu A,B,C
<ol type="a"> - va genera o lista numerotata cu a,b,c
<ol type="i"> - va genera o lista numerotata cu i,ii,iii
Pentru a insera o imagine ntr-o pagina HTML vom utiliza tag-ul <IMG>
Sintaxa:
1 <img src="URL-imagine" width="latime" height="inaltime" alt="text
alternativ" border="grosime chenar">
Exemplu:
1 <img src="smile.jpg" alt="Zambeste">
I Hyperlegaturile sunt stabilite folosind elementul de linie ancora: <a>

I Atributul href identifica destinatia legaturii.
I Textul asociat link-ului va fi automat subliniat si colorat n albastru.
Exemplu:
1 <a href="http://elth.pub.ro">Departamentul de Electrotehnica</a>
I Cale relativa: domeniul nu se afla n valoarea atributului href. Daca pagina referita se afla ntr-
un subdirector, atributul href trebuie sa reflecte aceasta.
I Cale absoluta: include domeniul.
Exemplu:
1 
2 <a href="/despre.html">Despre</a>
3
4 
5 <a href="http://www.google.com/">Google</a>
Legatura care sa afiseze Email Me, si care atunci cnd este apasata, sa deschida clientul email
implicit si sa pre-completeze o parte din email (cel putin adresa de email unde se trimite
emailul):
1 <a href="mailto:victor.bucata@gonysoft.com">Email-me</a>
Limbajul HTML permite organizarea informatiei sub forma de tabele bidimensionale(linii (rows)
si coloane (columns)).
Un tabel se defineste cu ajutorul tag-ului <table> si contine una sau mai mute linii definite prin
tag-ul <tr>.
Fiecare linie contine una sau mai multe celule, <td>, sau celule header, <th>. Diferenta dintre
<td> si <th> este data de modul de afisare.
Pentru a defini grosimea marginii unui tabel se utilizeaza atributul border ce se asocieaza tag-
ului <table>.
4
Elementele Div si Span sunt utile pentru specificarea unor portiuni din document de exemplu
pentru asocierea unor stiluri folosind CSS.
Div este element bloc iar Span este element de linie.
Caractere speciale:
Anumite caractere precum, <, > au o semnificatie speciala n limbajul HTML.

Pentru a putea utiliza aceste caractere ntr-o pagina au fost introduse reprezentarile
caracterelor speciale.
Cele mai utilizate reprezentari:
< reprezinta <
> reprezinta >
& reprezinta &
' reprezinta
" reprezinta "
reprezinta un "spatiu alb" n HTML mai multe spatii simple sunt tratate ca un singur
spatiu
Elementul <header> (antet), asa cum i spune numele, este folosit pentru a identifica partea de
sus a unei pagini, articol, sectiune sau a unui alt segment al unei pagini. De obicei elementul
<header> poate include un titlu, un text introductiv sau chiar elemente de navigare.
Elementul <nav> identifica o sectiune a unei pagini, cuprinznd legaturile principale de

navigare. Elementul <nav> trebuie pastrat doar pentru sectiunile principale de navigare,
precum navigarea globala, cuprinsul, legaturi nainte/napoi sau alte legaturi importante.
Cel mai adesea, legaturile incluse n elementul <nav> vor trimite catre alte pagini din acelasi site
web sau spre portiuni din aceeasi pagina web.
Legaturile utilizate mai rar nu ar trebui sa se afle n cadrul elementului <nav> ci ar trebui sa
foloseasca elementul ancora <a> si numai acesta.
Elementul <article> este folosit pentru a identifica o sectiune de continut independent, complet
si care poate fi distribuit independent sau refolosit.
Vom folosi adesea elementul <article> pentru a evidentia postarile pe bloguri, articole de ziar,
continut furnizat de utilizatori si asa mai departe.
Atunci cnd ne decidem sa folosim elementul <article> trebuie sa ne asiguram ca acel continut
poate fi copiat n alta pate a paginii fara a genera confuzii. Daca continutul din elementul
<article> ar fi scos din contextul paginii si ar fi plasat de exemplu ntr-un email sau n ceva
tiparit, ar trebui n continuare sa aiba sens.
Elementul <section> este folosit pentru a identifica o grupare tematia de continut care n
general, dar nu ntotdeauna include un antet. Gruparea continutului n elementul <section>
este prin natura generica dar este foarte utila pentru a identifica legaturile continutului.
Elementul <section> este folosit ndeosebi pentru a structura si a oferi o ierarhie pentru pagina.
5
Att elementul <article> ct si elementul <section> contribuie la structurarea unui document si
ajuta la schematizarea unui document.
Daca continutul este grupat numai din motive ale aspectului si nu ofera niciun beneficiu pentru
structurarea documentului, atunci folositi elementul <div>.
Daca continutul confera structura documentului si poate fi redistribuit independent, atunci
folositi elementul<article>.
Daca continutul confera structura documentului si reprezinta un grup tematic de continut,
atunci folositi elementul <section>.
Elementul <aside> incorporeaza continut precum barele laterale, inserari sau scurte explicatii
care sunt legate doar tangential de continutul din jurul lor.
Elementul <footer> identifica finalul unei pagini, al unui articol, al unei sectiuni sau al altui
segment de pagina. n general elementul <footer> se afla n partea de jos a elementului parinte.
Continutul din elementul<footer> e bine sa fie format din informatii corelate, n legatura cu
documentul sau sectiunea n care se afla.
Geolocalizare: Geolocation API n HTML5, permite s partajai locaia dvs. cu site-uri de

ncredere. Confidenialitatea este important n funcia de geolocalizare. Browserele nu au
nevoie s trimit informaii despre locaie la site-uri Web, fr permisiunea expres a
utilizatorului.
function get_location() {
navigator.geolocation.getCurrentPosition(show_map);
}

Inofrmatica Aplicata

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Inofrmatica Aplicata

Încărcat de

Drepturi de autor:

Formate disponibile

Cursul 2

Noduri (concepte) = blocuri de informatii cuprinse n reteaua sistemului hipertext. Un nod

HTML = limbaj de marcare a hipertextului utilizat pentru descrierea

Limbajul HTML ofera autorilor mijloace pentru:

Se numeste tag ceea ce este cuprins ntre semnele < si >.

Elemente ce nu au nevoie de tag de nchidere: <meta> <br><embed> <hr> <img> <input>

Spatiile multiple din continutul unui element sunt ignorate.

Atributele se plaseaza n interiorul tagului de nceput.

Continutul vizibil al unei pagini web se afla n cadrul elementului <body>.

DTD = Document Type Definitions - Definitii n limbajul general XML

Exista doua tipuri de elemente:

Pentru alinierea paragrafelor se poate utiliza atributul align

I <b>Text boldat (cu aldine) </b>

E important de nteles diferenta semantica dintre tagurile <strong> si <b>,

E important de nteles diferenta semantica dintre tagurile <em> si <i>,

I Hyperlegaturile sunt stabilite folosind elementul de linie ancora: <a>

Anumite caractere precum, <, > au o semnificatie speciala n limbajul HTML.

Elementul <nav> identifica o sectiune a unei pagini, cuprinznd legaturile principale de

Geolocalizare: Geolocation API n HTML5, permite s partajai locaia dvs. cu site-uri de

S-ar putea să vă placă și