Scribd
Încărcați
15 vizualizări10 pagini

Curs HTML

Documentul prezintă informații despre cursuri de HTML și Java oferite de un centru de educație IT. Sunt prezentate structura generală a unui document HTML, crearea unei pagini de bază și setarea stilului acesteia prin adăugarea de culori de fond și pentru text.

Încărcat de

Alina Amza
Drepturi de autor
© © All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca ODT, PDF, TXT sau citiți online pe Scribd
15 vizualizări10 pagini

Curs HTML

Documentul prezintă informații despre cursuri de HTML și Java oferite de un centru de educație IT. Sunt prezentate structura generală a unui document HTML, crearea unei pagini de bază și setarea stilului acesteia prin adăugarea de culori de fond și pentru text.

Încărcat de

Alina Amza
Drepturi de autor
© © All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca ODT, PDF, TXT sau citiți online pe Scribd
Sunteți pe pagina 1/ 10

CODING EDUCATION CENTER

Centru de cursuri in domeniul IT – robotica, programare si informatica

CODING FOR FUTURE

CURS HTML/JAVA

HTML (HyperText Markup Language) este un limbaj utilizat pentru crearea paginilor web
ce pot fi afisate intr-un browser (sau navigator).

HTML este folosit pentru prezentarea unui continut (text, imagine) intr-o pagina web,
furnizeaza mijloacele prin care continutul unui document poate fi structurat si adnotat cu diverse
tipuri de metadate si indicatii de redare si afisare. Aceste indicatii pot varia de la decoratiuni minore
ale textului, cum ar fi culoarea sau sublinierea unui cuvant ori introducerea unei imagini, pana la
adaugarea de elemente sofisticate, tabele, harti de imagini, formulare si cod CSS sau scripturi
JavaScript.

Metadatele pot include informatii despre titlul si autorul documentului, informatii structurale
despre cum este impartit documentul in diferite segmente, paragrafe, liste, titluri etc. si informatii
esentiale care permit ca documentul sa poata fi legat de alte documente pentru a forma astfel
hiperlink-uri. HTML este un format text proiectat pentru a putea fi citit si editat utilizand un editor
de text simplu, editarea si intelegerea paginilor in acest fel necesita cunostinte de HTML, pe care le
puteti obtine studiind lectiile din acest curs. Exista si editoare grafice, de tip WYSIWYG (What You
See Is What You Get - "ceea ce vezi este ceea ce obtii"), cum ar fi Macromedia Dreamweaver,
Adobe GoLive sau Microsoft FrontPage, care permit ca paginile web sa fie tratate asemanator cu
documetele Word si genereaza ele cod HTML pentru continutul paginii, dar aceste programe
genereaza un cod HTML care este de multe ori prea incarcat si de proasta calitate.
HTML este de asemenea utilizat in e-mail. Majoritatea aplicatiilor de e-mail folosesc un editor
HTML incorporat pentru compunerea e-mail-urilor si un motor de prezentare a e-mail-urilor de
acest tip.
CODING EDUCATION CENTER
Centru de cursuri in domeniul IT – robotica, programare si informatica

CODING FOR FUTURE

1. Ce este HTML? (Hypertext Markup Language)

- Este un set de coduri logice care constituie apariţia unui document web si a informati-
ilor pe care le deţine. Codurile sunt scrise intre "<" (paranteza deschisa) si ">" (paranteza
inchisa), cu toate ca nu sunt chiar paranteze, aşa se numesc si arata aşa: < >.
Exemplu:
<BODY> sau <DIV>
- Cele mai multe elemente (numite si tag-uri) au un element (tag) de deschidere si un ele-
ment de închidere distins prin "/" in interiorul parantezei deschise "<".
Exemplu:
<DIV> ... </DIV>
- Primul cuvânt care apare înăuntru "<" se numeşte element sau eticheta HTML si spune
browser-ului sa facă ceva, precum <DIV>

- Cuvintele care urmeaza după element in interiorul "< >" se numesc atribute care descriu
proprietăţile elementului. Cum ar fi stilul: culoarea, mărimea, etc.

- Atributele sunt separate prin spatiu si urmate de semnul egal "=", dupa care sunt scrise,
intre ghilimele (" ") valorile atributelor.

- Astfel, o eticheta HTML poate contine elementul de identificare, atribute si valori.

- In urmatorul exemplu elementul este DIV atributul style si valoarea "color:blue;":


<DIV style="color:blue;">Acest text va fi albastru</DIV>

2. Structura documentului HTML

- Un document (fisier) HTML este alcatuit din mai multe elemente si atributele lor.
- La început un element HTML cuprinde (înconjoară ) datele documentului. Acest element
conţine doua sub-elemente principale: HEAD si BODY. In HEAD se poate adauga titlul
paginii web si alte elemente numite metatag-uri, precum si scripturi JavaScript si stil-uri
CSS. In BODY se adauga continutul documentului care va fi afisat in pagina web.
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Titlu Documentului</title>
</head>
<body>
Continutul paginii
CODING EDUCATION CENTER
Centru de cursuri in domeniul IT – robotica, programare si informatica

CODING FOR FUTURE


</body>
</html>

Structura generala a unui document HTML

<!DOCTYPE html>
<html>
<HEAD> Acesta are si el mai multe sub-elemente:
<TITLE> Aici se scrie titlul documentului, cat mai sugestiv, si se încheie cu </TITLE>
<BASE> Poate fi folosit pentru a înregistra locaţia documentului in forma URL. (Nece-
sar daca documentul nu este accesat in locaţia lui originala). Se încheie cu </BASE>
<LINK> Indica o relaţie dintre document si alte obiecte de pe WEB. Se încheie cu </
LINK>
<META> Aici sunt scrise informaţii cum ar fi tastatura (limbaj) folosita, descrierea si
cuvinte cheie care pot fi găsite de motoarele de căutare. Se încheie cu </META>
<SCRIPT> Conţine oricare din JavaScript sau VB Script. Se încheie cu </SCRIPT>
<STYLE> Conţine informaţii privind stilul, grafica informaţiilor care vor apărea pe pag-
ina. Se încheie cu </STYLE>
Aici se încheie elementele adaugate in HEAD
</HEAD>
<BODY> Etichetele HTML si continutul documentului care va fi afisat in pagina web sunt
incluse in acest element. Aici pot fi puse si elemente cum ar fi: <SCRIPT> </SCRIPT>
Se încheie cu
</BODY>
</HTML>
CODING EDUCATION CENTER
Centru de cursuri in domeniul IT – robotica, programare si informatica

CODING FOR FUTURE

CREARE SI EDITARE

Sunt mai multe programe prin care se pot crea pagini web, chiar fara a cunoaste limb-
jul HTML, cum sunt Microsoft FrontPage sau Macromedia Dreamweaver.
Editoarele de text simple sunt programele de baza, si cele mai folosite, pentru editarea
paginii web. Avantajul folosirii lor este simplitatea, pentru creare paginii web sunt nece-
sare câteva din codurile invizibile ale limbajului HTML, astfel se creaza documente rapid si
usor, in plus ocupa foarte putin spatiu si resurse de memorie, acestea insa necesita
cunoasterea limbajului HTML.
Dintre editoarele de text cunoscute cel mai folosit este NotePad (sau NotePad++), care
este folosit si pentru acest curs, dar poate fi utilizat orice editor de text. Pentru începatori
si pentru usurinta cu care se lucreaza, eu recomand folosirea aplicatie Notepad++.

1. Crearea bazei de început a unui document

HTML contine elemente sigure, generale, care sunt necesare pentru crearea unui docu-
ment HTML.
Pentru început deschideti aplicatia NotePad si scrieti structura de baza a unei pagini web.
Aceasta este:
<!DOCTYPE html>
<html>
<head>
<title> Titlul </title>
</head>
<body>
<h1>Titlu afisat in pagina</h1>
Continut
</body>
</html>
Incercati codul
Acum pagina dv. are HEAD si BODY in interiorul bazei <HTML>.
In interiorul elementului HEAD are elementul TITLE, pe care ar trebui sa-l completati cu un
CODING EDUCATION CENTER
Centru de cursuri in domeniul IT – robotica, programare si informatica

CODING FOR FUTURE


text reprezentativ ca titlu al documentului dv.; si in BODY titlul care va fi afisat in pagina (in
tag <h1>) si un text "Continut".
Ceea ce scrieti la TITLE va apare in linia cea mai de sus a browseru-lui (deasupra meni-
urilor). La TITLE puteti pune orice text, dar este bine sa scrieti ceva care sa descrie cat mai
bine obiectul si continutul paginii deoarece este ceea ce cauta si indexeaza multe portaluri
de cautare de pe internet, si indicat, sa nu depaseasca 70 caractere.
Ceea ce adaugati intre tag-urile <body> </body> reprezinta continutul paginii, care va fi
afisat in browser.
Mai jos gasiti un exemplu cum ar putea fi completat tag-ul TITLE si un mic continut in pag-
ina:
<!DOCTYPE html>
<html>
<head>
<title>MarPlo.net - Cursuri, Jocuri si Anime</title>
</head>
<body>
<h1>Pagina HTML</h1>
Lectii, exemple si explicatii.
</body>
</html>
Incercati codul
- <h1> </h1> este o eticheta HTML pentru afisare de text mare (ca un titlu) in pagina.
- Ca sa vedeti rezultatul, copiati acest cod intr-o pagina noua deschisa cu Notepad si apoi
salvati fisierul cu extensia .html. Daca nu stiti deja, pt. a-l salva alegeti la "Save as type" - All
Files, apoi la "File name" ii scrieti numele si extensia (ex.: "pagina.html"). Dupa ce a fost
salvat fisierul, deschideti-l cu un browser (trebuie sa mearga cu dublu-click pe el).

Setarea stilului paginii

- Proprietatile de stil ale elementelor din pagina pot fi controlate in atributul style, de
exemplu cum ar fi culorile pentru fondul paginii si pentru text.
Culorile sunt setate folosind culorile de baza: rosu, verde si albastru; expresia folosita RGB
(Red, Green, Blue), acestea sunt reprezentate ca valori hexadecimale si sunt scrise intre
ghilimele (" "), la inceput trebuie adaugat caracterul '#'. Fiecare 2 unitati ale codului
reprezinta una din culorile RGB.
De exemplu: #00aa11 reprezinta o culoare care nu are Rosu (00), are Verde (aa) si Albas-
tru mai putin (11).

Elementul BODY

 - Acestui element ii puteti adauga informatii care sa defineasca culoarea


sau imaginea din fondul paginii, textul si culoarea link-urilor.
 - Daca elementul BODY nu este completat cu alte atribute atunci
browser-ul va prezenta culorile standard, de obicei fondul este alb.
CODING EDUCATION CENTER
Centru de cursuri in domeniul IT – robotica, programare si informatica

CODING FOR FUTURE


 - Pentru a seta culoare fondului paginii adaugati in eticheta <BODY>
atributul style si proprietatea background-color cu valoarea culorii.
 - Urmatorul exemplu va prezenta un document a carui fond este de cu-
loare albastra:

<body style="background-color:#0000ff;">Continut</body>

 Culoarea textului
o - Proprietatea color din "style" controleaza culoarea textului.
o - Acesta va afecta tot textul din document care nu este col-
orat de alte elemente.
o - Culoarea standard pentru text este Negru.
o - Iata un exemplu in care culoarea fondului va fi albastru si
culoarea textului va fi rosu:

<body style="background-color:#0000fe; color:#fe0000;">Continut</body>

 Folosirea unei imagini ca fond pentru pagina (background)


o - La fondul paginii se poate adauga si o imagine, cu propri-
etatea background-image:url('bgimage.jpg').
Daca imaginea este mai mica decât dimensiunile paginii atunci
imaginea va fi multiplicata pana va acoperi întreg cadru documen-
tului. Este indicat ca imaginea sa fie in format *.gif sau *.jpg.
Folosirea unei imagini va da un aspect placut documentului. Pentru
a vedea cum arata un document al carui fond este o imagine click
aici.
o - Un exemplu de cod HTML cu imagine pentru background
este urmatorul:

<body style="background-image:url('bgimage.jpg');">Continut</body>

In acest exemplu fondul pagini va fi dat de imaginea din fisierul


"bgimage.jpg", care sa fie in acelasi director.

Salvare pagina html

Dupa ce a-ti creat baza de început a unui document si a-ti setat proprietatile, trebuie
sa salvati fisierul. Salvarea trebuie facuta intr-un format pe care browser-ul îl poate re-
cunoaste. Extensia standard pentru un fisier care reprezinta o pagina web este ".htm" sau
".html". De obicei se foloseste ".html".
- Pentru a salva documentul ca sa arate ca o pagina web, in NotePad alegeti din me-
CODING EDUCATION CENTER
Centru de cursuri in domeniul IT – robotica, programare si informatica

CODING FOR FUTURE


niul File comanda Save si salvati fisierul cu orice nume doriti, dar cu extensia html (sau
"htm") - (La File name: scrieti si numele si extensia ".html", exemplu: index.html). Daca nu
scrieti extensia, NotePad va salva documentul in format "txt".
- Pentru a vedea documentul ca o pagina web, duceti-va in directorul in care a-ti salvat
fisierul si deschideti-l pur si simplu (cu Enter sau dublu-click la mouse), acesta va fi deschis
automat de browser-ul pe care-l folositi (Mozilla Firefox, Internet Explorer, Opera). Sau
deschide-ti browser-ul si din comanda Open deschideti documentul pe care l-ati salvat.
- Pentru a continua lucrarea, a face modificari paginii sau pentru a adauga altceva in docu-
mentul HTML, deschideti documentul cu NotePad. Una din metode este sa deschideti
aplicatia NotePad si din meniul File alegeti Open apoi gasiti fisierul pe care vreti sa-l modi-
ficati si dati clic pe butonul Open. Dupa ce terminati modificarile salvati, astfel daca re-
deschideti documentul ca o pagina web acesta va fi deschis cu noul format.
CODING EDUCATION CENTER
Centru de cursuri in domeniul IT – robotica, programare si informatica

CODING FOR FUTURE

Titluri, Paragrafe, Un nou rand, Linie orizontala

Titluri <Hx> ... </Hx>

 - Pentru titluri din continutul documentului HTML este indicat folosirea


etichetelor <Hx>, (headings) unde 'x' este un numar intre 1 si 6.
 - In cadrul elementului BODY, elementele Headings sunt folosite ca titluri
sau pentru o mai buna impartire a continutului paginii.
 - Mărimea textului înconjurat de elementul Heading variază de la foarte
mare, in <H1> pana la foarte mic in <H6>.
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
CODING EDUCATION CENTER
Centru de cursuri in domeniul IT – robotica, programare si informatica

CODING FOR FUTURE


</html>

Paragraf <p> ... </p>

 - Paragrafele permit sa adaugi text in document astfel incat lungimea de


afisare a textului va fi ajustata de marimea deschiderii browser-ului si fiecare
paragraf va incepe un nou rând.
 - Distanta dintre doua paragrafe succesive este mare deoarece browser-
ul le afiseaza cu un rând gol intre ele.
Mai jos puteti vedea exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<p>Paragraf 4</p>
</body>
</html>

Un nou rand <br>

 - Tag-ul <br> permite sa decizi unde textul va incepe un nou rând, astfel
se forteaza începerea unui nou rând.
 - <br> este un Element Gol dar poate sa conţina atribut. <br> nu are si
nu cere element de închidere, nu se foloseste </br>
Mai jos puteti vedea exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraf 1<br>
Linie 2<br>
Linie 3<br>
... </p>
<p>Paragraf 2</p>
</body>
</html>
CODING EDUCATION CENTER
Centru de cursuri in domeniul IT – robotica, programare si informatica

CODING FOR FUTURE


- Elementul <br> poate avea atribute, precum: "style", "class".

Linie orizontala <hr>

 - Acest element afiseaza o linie orizontala in document


 - Acest element nu foloseşte element de închidere [</hr>]
 - Elementul <hr> poate folosi atribute: "style", "class", "id".
Culoarea linie se defineste cu proprietatea css: background, iar grosimea cu
proprietatea css: height.
Mai jos puteti vedea exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraf 1<br>
Linie 2<br>
Linie 3<br>
... </p>
<hr>
<hr style="background:#1111fe; height:3px; width:50%;">
<p>Paragraf 2</p>
</body>
</html>

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