Tutoriale HTML

Ce este HTML

Html sau HyperText Markup Language este unul dintre cele mai vechi limbaje de programare web. Acesta sta la baza

crearii unui site web. Cu alte cuvinte, inainte de a invata alte limbaje de programare trebuie sa cunosti cel putin

comenzile de baza din HTML.

Acest sir de tutoriale html este conceput pentru a-ti oferi putina experienta, pentru ca tu sa fi capabil sa citesti si sa scri

in HTML, sa poti salva corect documentele si sa poti, dupa aceea sa vizualizezi toata "osteneala" intr-un browser web.

Din pacate aceeasta pagina nu detine o rubrica pentru a te invata sa folosesti functiile de baza ale unui calculator, asa ca

in acest sens poti sa ceri ajutorul unui prieten pentru a putea fii initiat in urmatoarele:

- Sa stii ce este un notepad si cum se foloseste

- Sa stii sa deschizi un fisier folosind Internet Explorer (sau oricare alt browser la alegere)

- Sa stii ce este si cum se face un copy/paste

Prima pagina web

Pentru inceput copiaza urmatorul cod HTML in notepad. Aigurate ca operatiunea a fost executata corect, in caz contrar

pagina nu va functiona.

Prima mea pagina web!

Codul de mai sus, este tot ceea ce iti trebuie pentru a crea o pagina web de baza. Acum poti salva documentul in

notepad selectand din meniul "File", optiunea "Save As". In fereastra care se deschide, selecteaza "All Files". Vom da un

nume fisierului, de exemplu "index.html", fara ghilimele. Verifica de doua ori innainte de a apasa butonul "Save". O sa te

rog sa incerci sa iti aduci aminte unde ai salvat fisierul deoarece vom lucra cu acest fisier ceva mai tarziu.

Tag-uri de baza in HTML

Sa mai aruncam o privire asupre codului. O pagina web are in componenta doua elemente de baza. Daca vei incerca sa

creezi o pagina fara cele doua tag-uri, vei avea probleme.

Continutul paginii va fi aici

Primul tag se numeste si este cel care ii spune browser-ului ca a inceput un cod in HTML. Cel de-al doilea tag,

, spune browser-ului ca aici incepe partea vizibila sau continutul paginii HTML.

Inchiderea tag-urilor in HTML

Poate ai observat deja inca doua tag-uri asemanatoare la sfarsitul documentului, si . Acestea sunt tag-

urile de inchidere. , da de stire browser-ului, ca sa incheiat continulul pagini, iar ca s-a incheiat

documentul HTML.

Slesh "/" este pus innaintea numelui tag-ului si spune browserului ca ar dori sa inchee respectiva functie. Deci este

folosit pentru a incepe o functie, iar pentru a o incheia.

Ordinea tag-urilor - Foarte important

Ordinea deschiderii si a inchiderii tag-urilor este foarte importanta. Daca un tag este deschis intr-un altul, de exemplu

body este deschis in html atunci acel tag (body) este cel care trebuie inchis inaintea celui de-al doilea tag (html).

Am inchis mai intai body pentru ca a fost cel care s-a deschis cel mai recent. Aceasta regula si anume deschiderea si

inchiderea tag-urilor se aplica la toate celelalte taguri ale documentelor HTML.

Cea de-a doua pagina

Probabil ca ai nevoie de timp si de mai multe incercari perntru a te acomoda cu aceste reguli, asa ca cel mai bine ar fi sa

exersam in continuare cu o a doua pagina web. Copiaza acest cod in notepad, asa cum ai facut si prima data.

Pagina mea!

Bine ati venit.

Foarte curand voi face o pagina care va v-a da pe spate pe

toti!

Dupa ce te-ai asigurat ca totul e facut conform indicatiilor anterioare, poti salva documentul. Ai putea chiar sa-l salvezi

cu acelasi nume ca si cel anterior, si anume "index.html". S-ar putea sa te intrebe daca vrei sa salvezi peste documentul

anterior, poti sa dai linistit OK, nu vom mai avea nevoie de celalalt document.

Navigare

Tutorial HTML - Elemente

Elementele HTML au multe ranguri. Tot ceea ce vezi, paragrafurile, banner-ul de deasupra, link-urile de navigare la

dreapta si la stanga paginii, sunt toate elemente ale acestei pagini.

Un element are trei parti: un tag de deschidere, continutul elementului si tag-ul de inchidere.

-

- tag-ul pentru deschiderea unui paragraf.

- Continutul elementului - paragraful propriu-zis.

-
- tag-ul de inchidere.
***Nota:

Toate paginile web vor avea cel putin elementele de baza: html, head, title si body.

element...

Un document HTML intotdeauna va incepe si va termina cu un tag si respectiv . Aceasta este spructura

standard a unui HTML.

Deschide te rog Notepad si copiaza urmatorul cod:

Salveaza documentul di meniul File / Save As. Selecteaza All Files si denumeste fisierul nou creeat, "index.html". Apasa

Save. Deschide acum fisierul intr-un browser pentru a avea posibilitatea sa dam refresh (F5).

Daca ai facut totul bine vei putea vedea prima ta pagina web, complet alba!

Elementul
http://www.tutorialehtml.com/htmlt/elemente.php

Elementul este cel care urmeaza. Atata timp cand il pui intre html si body totul ar trebuii sa fie OK. "Head" nu

are nici o functie vizibila, asa ca vom discuta despre acest aspect in tutorialele ulterioare. Totusi vreau sa mentionez ca

poate oferi browser-ului informatii foarte utile. Se pot insera aici printre altele coduri Javascript sau CSS.

Deocamdata insa il vom lasa gol cu exceptia faptului ca vom introduce urmatorul element pe lista, dar mai intai sa

aruncam o privire fara el:

Daca vei salva documentul si vei incerca sa dai un refresh la pagina intiala din browser nu vei nota nici o diferenta. Ai

putina rabdare, in continuare vom studia cateva elemente vizibile.

Elementul

Pentru ca totul sa iasa bine trebuie sa pui tag-ul title inauntrul celui de head. Ceea ce vei scrie intre cele doua tag-uri

title ( si ) va putea fi vizualizat ca si numele browser-ului, de obicei in partea din stanga sus. Alaturat

avem si codul sursa:


Salveazal acum fisierul si deschide-l in browser. Vei putea vede titlul dupa cum am mai spus in partea din stanga sus, la

marea majorilate a browser-elor

Poti pune orice nume doresti, daoar tine minte ca numele descriptive sunt cele mai usor de gasit ulterior

Elementul

Elementul body este cel care defineste inceperea continutului pagini propriu-zise (titluri paragrafuri ftografii muzica si

orice altceva). Dupa cum poti vedea in meniul de la stanga, vom trata pe rand toate aceste elemnte de continut.

Deocamdata tot ce trebuie sa retii este ca body incapsuleaza tot continutul paginii.


Salut Gasca! Aici voi pune mai tarziu continutul!

Un browser citeste absolut tot ceea ce ai scris in documentul HTML. De fiecare data cand gaseste un tag il va trata ca

atare si il va reda, ca de exemplu un paragraf, un titlu un tabel sau orice altceva. Tagurile au trei parti dupa cum am mai

spus deschiderea, continutul si inchiderea.

Dupa cum vei putea invata mai departe exista sute de taguri HTML. Absolut toate elementele care vor fi redate de un

browser au nevoie de un tag sau doua.

Continut

Exemplu un paragraf

Tag-urile se scriu cu litere mici. Acesta este standardul de scriere in XHTML si Dynamic HTML.

Alaturat sunt cateva exemple de taguri in HTML.

Actioneaza ca o capsula asupra continutului.

Paragraf

Titlu (heading)

Ingrosat (bold)

Inclinat (italic)

Exceptii - Tag-uri care nu au nevoie de inchidere

Exista cateva tag-uri care nu indeplinesc modelul anterior aratat. Motivul este ca in realitate aceste tag-uri nu au nevoie

de nuci un continut. Datorita acestui fapt se va folosi o maniera modificat de criere a acestor taguri.

Cel mai simplu exemplu este "linebreak"

Acest tag a imbinat cele doua taguri, de deschidere si de inchidere, intro forma mult mai simpla si mai eficace de folosit.

Line break se foloseste pentru a spune browser-ului ca vrem sa coboram cu o linie mai jos, fara insa a incheia paragraful.

Urmand acest exemplu si alte tag-uri au fost modificate pentru o scriere mai simpla si mai rapida.

-- Image Tag --

-- Line Break Tag --

-- Input Field --

Vizualizare

-- Line Break --

Atributele sunt folosite pentru a personaliza tag-urile. Ce vreau sa spun? Ca la un moment dat vei vrea sa redimensionezi

o imagine sau un tabel sau sa schimbi culoarea de fond. Toate acestea sunt posibile cu ajutorul atributelor.

Cele mai multe tag-uri au propriile lor atribute. Vom vorbi despre aceasta pe masura ce introducem in discutie un nou

tag. Acum insa vom vorbi despre un set de atribute generice care se pot folosi cu majoritatea tag-urilor.

Atributele se introduc intre parantezele unghiulare () ale tag-ului de deschidere.

Atributele "class" si "id" in HTML

Atributele class si id sunt foarte asemanatoare. Ele nu au un rol direct in formatarea elementelor si mai degraba sunt

utile in spatele scenei cu ajutorul CSS. Vom vorbi despre rolul acestora la momentul potrivit, atunci cand vom studia

sintaxa si funcia lor in CSS.

Idea este ca atunci cand vrei sa stabilesti o clasa de tag-uri pentru a fi folosite mai tarziu ca ajutorul CSS, sa poti

diferentia intre doua tag-uri identice dar cu atribute diferite. Priveste exempul alaturat.

Paragraph type 1, inclinat

Paragraph type 2, ingrosat

Vizualizare

Paragraph type 1, inclinat

Paragraph type 2, ingrosat

HTML - Atributul "name"

"name" este ceva mai diferit fata de "id" si "class". Punand un nume unui element, acesta devine o variabila de script

pentru Javascript, ASP si PHP. Cel mai des este intalnit in formulare si alte campuri de text interactive.

Vizualizare

Acest atribut (name) nu are nici un afect asupra redarii casutei de text, cu toate ca in background detine un rol foarte

important.

HTML - Atributul "title"

Atributul title este folosit foarte putin fata de cat ar trebuii, el adauga un titlu (un pop-up) oricarui continut al unui

element. Acest atribut nu ar trebui uitat. Poti denumi aproape orice si oricum doresti. Vizualizarea titlului apare atunci

cand ne oprim co mausul cateva secunde deasupra contnutului.

Un Titlu Oarecare

Vizualizare

Un Titlu Oarecare

Treci cu mausul peste titlul de mai sus ca sa vezi magia atributului "title". Acest atribut va oferi site-ului tau multa

interactiune cu cei ce te vor vizita. Nu il trece cu vederea.

HTML - Atributul "align"

Daca vrei sa aliniezi in mod diferit anumite elemente ale pagini tale, atunci ai la dispozitie atributul align. Poti alinia la

stanga (left), dreapta (right) sau la mijlocul (center) pagini aproape orice element. Prin default elementele se aliniaza la

stanga, esceptand atuci cand se specifica o alta aliniere.

Titlu centrat

Vizualizare

Titlu centrat

Alete exemple:

Titlu aliniat la stanga

Titlu centrat

Titlu aliniat la dreapta

Vizualizare

Titlu aliniat la stanga

Titlu centrat

Titlu aliniat la dreapta

Valori standard pentru atribute

Multora dintere tag-uri li se atribuie, valori standard. Asta inseamna ca daca nu specifici un alt atribut, browser-ul o va

face pentru tine. De exemplu un paragraf se va alinia singur la stanga, exceptand atunci cand specifici altfel; la fel si

elementele unui tabel. Pe masura ce vei exersa vei intelege mai multe despre valorile default ale unor tag-uri

Atribute generice

Retine ca atributele sunt folosite pentru a personaliza elementele unei pagini web. Am alturat aici cateva dintre

atributele cele mai comune, folosite in HTML:

Attribute Options Function

align right, left, center Aliniere orizontala

valign top, middle, bottom Aliniere verticala

bgcolor numeric, hexidecimal, sau valoare RGB

Un background in spatele elementului

background URL O imagine in spatele elementului

id Definit de user Numeste un element care se va folosi cu CSS

class Definit de user Clasifica un element care se va folosi cu CSS

width Valoare numerica Specifica latimea unui tabel, imagine, sau casute de tabel.

height Valoare numerica Specifica inaltimea unui tabel, imagine, sau casute de tabel.

title Definit de user "Pop-up". Afiseaza un titlu pentru un element stabilit.

Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este

. Acesta va plasa o linie goala

deasupra si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.

Paragraful este un elemet de baza in...

Acesta va plasa o linie goala deasupra si...

Vizualizare

Paragraful este un elemet de baza in editare de text. Tag-ul

pentru paragraf este

.

Acesta va plasa o linie goala deasupra si dedesuptul textului

pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.

HTML - Paragraf incadrat, justify

Paragrafele se pot formata aproximatix la fel de simplu ca si intr-un editor de texte. Incadrarea din exemplul alaturat s-a

facut cu ajutorul atributului justify.


Vizualizare



. Acesta va plasa o linie goala deasupra

si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va

interpreta ca atare.

HTML - Paragraf centrat, center


Vizualizare






In acest exemplu fiecare linie a paragrafului a fost centrata la mijlocul randului de redare.

HTML - Paragraf aliniat la dreapta, right


Vizualizare






Toate randurile paragrafului au fost asezate, in acest exemplu, la dreapta.

Un titlu in HTML este exact ceea ce pare: un titlu adevarat, sau un subtitlu. Atunci cand plasezi un text intr-un tag ,

textul va fi afisat ingrosat, iar dimensiunea literei va fi dat de numarul heading-ului. Titlurile pot avea dimensiuni de la

de la 1 la 6 unde 1 este cea mai mare dimensiune si repectiv 6, cea mai mica.

Headings

are

great

for

titles

and subtitles

Vizualizare

Poti obserba ca fiecare titlu are cate un "linebreak" innainte si dupa. De fiecare data cand punem un headind, browser-ul

va reda automat de la sine un salt in linie inaintea lui si deasemenea dupa.

HTML - Exemplu Practic

Sa luam acum un exemplu simplu si sa practicam un pic pentru ca informatia sa fie inteleasa pe deplin. Ar fi de preferat

sa te obisnuiesti cu acesti termeni inainte de a continua.

HTML - Titluri 1:6 (Headings)

Un titlu in HTML este exact ceea ce pare: un titlu adevarat,

sau un ...

Un titlu in HTML este exact ceea ce pare: un titlu adevarat,

sau un ...

Vizualizare

HTML - Titluri 1:6 (Headings)

Un titlu in HTML este exact ceea ce pare: un titlu adevarat, sau

un subtitlu. Atunci cand plasezi un text intr-un tag , textul

va fi afisat ingrosat, iar dimensiunea literei va fi dat de numarul

heading-ului. Titlurile pot avea dimensiuni de la de la 1 la 6

unde 1 este cea mai mare dimensiune si repectiv 6, cea mai

mica.

Un titlu in HTML este exact ceea ce pare: un titlu adevarat, sau

un subtitlu. Atunci cand plasezi un text intr-un tag , textul

va fi afisat ingrosat, iar dimensiunea literei va fi dat de numarul

heading-ului. Titlurile pot avea dimensiuni de la de la 1 la 6

unde 1 este cea mai mare dimensiune si repectiv 6, cea mai

mica.

Vizualizeaza exemplul intr-o noua pagina

Un salt in line este diferit fata de celelalte tag-uri pe care le-am studiat pana acum. Plasarea acestuia in codul sursa al

documentului, va incheia randul respectiv si va cobora cu o linie mai jos, lasand un spatiu mai mic in comparatie cu cel

de paragraf. Se foloseste in paragraf dupa cum poti observa in exemplul de mai jos.

Ion Ionescu

Calea Victoriei No.1

Bucuresti, Romania

Vizualizare

Ion Ionescu

Calea Victoriei No.1

Bucuresti, Romania

Deasemenea se poate folosi pentru a evidentia o semnatura ca de exemplu la sfarsitul unei scrisori.

Multumesc anticipat,

Ion Ionescu

Vice Presedinte

Vizualizare
http://www.tutorialehtml.com/htmlt/ex/ex1.html

Multumesc anticipat,

Ion Ionescu

Vice Presedinte

Foloseste pentru a crea o linie orizontala. Acest tag esste similar celui de linebreak.

Folosestele

Cu

Moderatie

Vizualizare

Folosestele

Cu

Moderatie

Dand la o parte acest exemplu exagerat linia orizontala poate deveni utila in diferite circumstante, precum poti vedea in

exemplul de mai jos: o nota de subsol.

1. "The Hobbit", JRR Tolkein.

2. "The Fellowship of the Ring" JRR Tolkein.

Vizualizare

1. "The Hobbit", JRR Tolkein.

2. "The Fellowship of the Ring" JRR Tolkein.

Dupa cum poti vedea, tot ceea ce face acest tag este sa deseneze o linie orizontala separand diferite zone ale

continutului sau pur si simplu decoreaza. Folosita cu iscusinta poate da rezultate destul de neasteptate.

HTML pune la dispozitie trei tipuri de liste. va afisa o lista ordonata in timp ce una neordonata, iar pentru a

realiza o lista de defnitii se foloseste . Foloseste atributele type si start pentru a realiza lista cea mai potrivita

cerintelor tale.

- - unsorted list, buline

- - ordered list, numere

- - definition list, lista de definitii.

HTML - Lista ordonata

Foloseste tag-ul pentru a incepe o lista ordonata. Prin punerea (list item) intre tagurile si

semnalizezi browser-ului elementele listei.

Oviective

S gasesc o slujba

Sa iau bani multi

Sa ma mut in alt oras

Vizualizare

Oviective

1. Sa gasesc o slujba

2. Sa iau bani multi

3. Sa ma mut in alt oras

Poti incepe lista cu orice alt numar doresti specificandu-l insa cu ajutorul atributului start.

Oviective

S gasesc o slujba

Sa iau bani multi

Sa ma mut in alt oras

Vizualizare

Oviective

4. Sa gasesc o slujba

5. Sa iau bani multi

6. Sa ma mut in alt oras

Acest element nu face nimic iesit din comun dar este destul de folositor uneori.

HTML - Alte tipuri de liste ordonate

In afara de modelul mai sus aratat mai sunt alte patru tipuri de liste ordonate. In locul cifrelor arabe poti folosi cifre

romane sau la fel de bine litere iar in ambele cazuri pot fi folosite litere mici sau majuscule. Foloseste atributul type

pentru a modifica tipul numerotarii.

Vizualizare

Litere mici Majuscule Numere romane cu litere mici

Numere romane cu majuscula

a. Un loc de

munca

b. Bani

A. Un loc de

munca

B. Bani

i. Un loc de

munca

ii. Bani

I. Un loc de

munca

II. Bani

c. Alt oras C. Alt oras iii. Alt oras III. Alt oras

Liste nesortate

Creaza o lista nesortata cu ajutorul tagului . Listele nesortate deasemenea sunt de mai multe tipuri si anume,

patratele buline si cerculete.Valoarea standard redata de majoritatea browser-elor sunt bulinele

lista de cumparaturi

lapte

branza

oua

zahar

Vizualizeaza exemplul

Am alaturat ceva mai jos un exemplu despre cum arata si celelalte tipuri de liste neordonate.

Vizualizare exemplu

HTML - Lista de definitii

Deasemene poti face liste de definitii folosind tag-ul . Aceasta lista reda cuvantul deasupra definitiei. Este indicat sa

ingrosam cuvantu pentru a fi mai bine evidentiat.

Fromage

Cuvant francez pentru branza .

Voiture
http://www.tutorialehtml.com/htmlt/ex/ex2.htmlhttp://www.tutorialehtml.com/htmlt/ex/ex3.html

Cuvant francez pentru masina

Vizualizare exemplu

Pe masura ce vei adauga din ce in ce mai mult text pagini tale, vei avea nevoie de noi elemente pentru al formata in

functie de gustul si necesitati. In tutorialul despre atribute am vorbit despre, modalitati de a adauga un plus

elementelor dorite. Aceste tag-uri de formatare pot face elementele, ingrosate inclinate subliniate taiate dar nu numai.

Exemplu de Bold Text

Exemplu de Emphasized Text

Exemplu de Strong Text

Exemplu de Italic Text

Exemplu de superscripted Text

Exemplu de subscripted Text

Exemplu de struckthrough Text

Exemplu de Computer Code Text

Vizualizare

Exemplu de Bold Text

Exemplu de Emphasized Text

Exemplu de Strong Text

Exemplu de Italic Text

Exemplu de superscripted Text

Exemplu de subscripted Text

Exemplu de struckthrough Text

Exemplu de Computer Code Text

HTML - Cum sa folosesti tag-urile de formatare

Aceste tag-uri ar trebuii utilizare cu moderatie. Ceea ce vreau sa spun este ca este indicat sa le folosesti pentru a ingrosa

sau inclina de exemplu un cuvant sau doua intr-un paragraf. Atunci cand vrei sa le folosesti de exemplu cu un intreg
http://www.tutorialehtml.com/htmlt/ex/ex4.htmlhttp://www.tutorialehtml.com/htmlt/atribute.php

paagraf, cel mai bine este sa apelelezi la CSS. Oricum acesta nu este decat un sfat, in final decizia iti apartine tie si le

poti folosi dupa cum experienta iti indica.

Exista trei feluri distincte de a defini o culoare. Cea mai simpla metoda este aceea de a numi culorile (in engleza). De

exemplu: black, white, red, green, si blue. Am alaturat mai jos numele de culori care sunt suportate in HTML.

Color Hexa Color Hex Color Hex Color Hex

aqua #00FFFF green #008000 navy #000080 silver #C0C0C0

black #000000 gray #808080 olive #808000 teal #008080

blue #0000FF lime #00FF00 purple #800080 white #FFFFFF

fuchsia #FF00FF maroon #800000 red #FF0000 yellow #FFFF00

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). Am alaturat mai jos forma de scriere a culorilor in RGB. Daca

folosesti un browser care nu este Internet Explorer nu vei avea nici un rezultat.

bgcolor="rgb(255,255,255)" White

bgcolor="rgb(255,0,0)" Red

bgcolor="rgb(0,255,0)" Green

bgcolor="rgb(0,0,255)" Blue

HTML - Sistemul de culori hexazecimal

Sistemul hexazecimal este destul de dificil la prima vedere. Cu toate astea te asigur ca odata cu trecerea timpului, si cu

putina practica, il vei intelege pe deplin. 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"

Cele mai sigure culori HTML

Cu toate ca aceste culori sigure (true colors) de mai sus, sunt cele recomadate pentru a fi folosite de catre webmasteri,

a fost demonstrat ca doar 22 dintre cele 216 culori sunt cu adevarat sigure si nu vor fi in absolut modificate in

reprezentare de catre nici un browser. In tabelul de mai sus culorile cu adevarat sigure au fost reprezentate cu un asterix

( * ) in fata.

Am alaturat totusi un tabel cu acestea:

*000 *F00

*003 *F03

*00F *F0F

*FF0 *FF3

*CF6 *FF6

*0F0 *6F0

*3F3 *6F3

*0F6 *3F6

*0FC *3FC

*0FF *3FF

*6FF *FFF

Tag-ul este folost pentru a modifica tipul de text, marimea si culoare. Foloseste atributele "size", "color", si "face"

pentru a personaliza textul. Foloseste tag-ul pentru a seta culoarea marimea si stilul intregului tau text.

In general tag-urile "font" si "basefont" nu se folosesc prea mult, in general se foloseste css-ul pentru a stabili atributele

textului.

Marimea Font-ului

Seteaza marimea font-ului tau 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.

Acesta este un font de marime 5

Vizualizare

Acesta este un font de marime 5

Culoarea fontului

Seteaza culoarea textului

This text is hexcolor #990000

This text is red

This text is hexcolor #990000 This text is red

Font Face

Alege un stil de litera folosind tag-ul fontface. Poti alege orice font ai instalat, cu toate acestea, alege cu grija deoarece

utilizatorul aflat pe pagina ta nuva putea vizualiza fontul respectiv daca nu il are instalat. Acesta va vedea in schimb

font-ul default si anume Times New Roman. Solutia ar fi sa alegi mai multe font-uri asemanatoare ca aspect.

This

paragraph has had its font...

This paragraph has had its font formatted by the font tag!

Basefont

Cu ajutorul tag-ului basefont vei putea stabili valoare default a font-ului in pagina ta web. Recomandam sa specifici un

basefont in cazul in care vei utiliza font-ul in HTML. Avem alaturat un model.

This paragraph has had its font...



This paragraph has had its font formatted by the basefont tag! This paragraph has had its font formatted by the basefont tag! This paragraph has had its font formatted by the basefont tag!

Cu toate acestea, basefont este oarecum depasit, este foarte probabil ca in viitorul apropiat sa nu se mai lucreze cu el,

trecanduse in acest fel definitiv configurarea cu ajutorul CSS.

Atribute

Attribute= "Value" Description

size= "Num. Value 1-7" Size of your text, 7 is biggest

color= "rgb,name,or hexidecimal" Change font color

face= "name of font" Change the font type

Atributul href numeste legatura catre o alta pagina web. De fapt este locul unde va fi dus user-ul care va executa un click

pe linkul respectiv.

Linkurile pot fi de trei tipuri:

- interne - catre locuri specifice din pagina (anchors)

- locale - catre alte pagini dar pe acelasi domeniu

- globale - catre alte domeni in afara site-ului

Internal - href="#anchorname"

Local - href="../img/foto.jpg"

Global - href="http://www.tutorialehtml.com/"

HTML - Llink-uri text

Pentru a seta inceputul si sfarsitul unui anchor se poate folosi . Alege tipul de atribut care iti trebuie si punel in

interiorul tagului. en exemoplu simplu ar fi:

Tutoriale HTML

Vizualizare

Tutoriale HTML

HTML - Target-uri de link

Atributul target spune browser-ului daca trebuie sa deschida noua pagina intr-o noua fereastra sau in aceeasi fereastra.

target=" _blank" Deschide o noua fereastra

_self" Deschide pagina in aceeasi fereastra

_parent" Deschide noua pagina intr-un frame superior linkului

_top" deschide noua pagina in acelasi browser anuland toate frame-urile

Exemplu de mai jos arata cum se poate deschide o pagina intr-o noua fereastra a browserului. In acest fel putem ramane

pe pagina de tutoriale si deschidem o noua pagina de navigare.

Google

Vizualizare
http://www.tutorialehtml.com/

Google

HTML - Anchor

Este folosit pentru a lega doua sectiuni ale aceleiasi pagini. In acest sens va trebuii sa dam un nume sectiunilor, dar

pentru aceasta cel mai indicat ar fi sa aruncam o privire exemplului urmator.

HTML - Hypertext Reference / href

HTML - Llink-uri text

HTML - Link-uri de e-mail

Mai departe trebuie sa formulam codul link-ului punand innaintea numelui anchor-ului semnul diez (#). Urmareste

exemplul pentru mai buna intelegere.

Mergi la inceput

Invata despre link-uri text

Invata despre adrese de e-mail

Vizualizare

Mergi la inceput

Invata despre link-uri text

Invata despre adrese de e-mail


Crearea unui link de email este foarte simplu. Daca vrei ca cineva sa iti scrie un email cel mai bine ar fi sa sa ii pui la

dispozitie un link cu email-ul tau si deasemenea un subiect prestabilit.

Nelamuriri aici

Vizualizare

Nelamuriri aici

In cazul in care un subiect nu este de ajuns si vrei sa adaugi ceva si la continutul email-ului, o poti face cu ajutorul

urmatorului cod:
http://www.google.com/http://www.tutorialehtml.com/htmlt/links_text.php#tophttp://www.tutorialehtml.com/htmlt/links_text.php#texthttp://www.tutorialehtml.com/htmlt/links_text.php#emailmailto:[email protected]?subject=Nelamuriri

Nelamuriri aici

Vizualizare

Nelamuriri aici

HTML - Link-uri de download

Forma unui link de download este exact aceeasi ca a unui link normal de text. Problema intervine atunci cand vrem sa

punem o fotografie. Cea mai buna solutie ar fi sa folosim un tumbnail cu un link, dar vom discuta aceasta problema mai

pe larg in lectia urmatoare.

Text

Document

HTML - LInk-uri default / Link-uri de baza

Folosesta tag-ul in interiorul elementului head pentru a seta un link de baza. Acesta este necesar in cazul in care

ai pe undeva un link care nu functioneaza corect sau a carui destinatie numai exista. Link-ul de baza redirectioneaza

user-ul la adresa specificata. In mod normal se redirectioneaza catre pagina de start, dar este acceptata oricare alta

pagina, eventual o pagina special facuta acestui scop.

In HTML "entitati" este un numele tehnic pentru "simboluri". Cateva simboluri precum copyright, trademark, si multe

altele, unele dintre ele disponibile pe tastatura, au nevoie de o scriere speciala.

- Incep cu semnul "end" - &

- Dupa care vom scrie numele semnului - copy

- SI la sfarsit "punct si virgula" - ;

Copyright

Foloseste pentru a realiza- - Simbolul Copyright.

Spatii multiple si
mailto:[email protected]?subject=Nelamuriri&body=Scrie%20aici%20daca%20ai%20nelamuriri

Dupa cum am spus si in lectia despre paragrafuri, un browser va recunoaste un singur spatiu, indiferent de cat de multe

tastezi intr-un cod de HTML. Exista insa o entitate care poate fi introdusa pentru a afisa mai mult de un spatiu.

In acesta fraza au fost introdese

mai multe spatii.

Vizualizare

In acesta fraza au fost introdese mai multe spatii.

Pentru a realiza comenzi in HTML sunt folosite simbolurile "mai mult" si "mai putin". Pentru a fi afisate in browser va

trebuii sa folosim o entitate.

Mai putin - <

Mai mult - >

Tagul head -

Vizualizare

Mai putin - <

Mai mult - >

Tagul head -

Fa o pauza si exerseaza putin cu aceste simboluri. O lista mult mai ampla a acestora gasesti aici. Dupa cum vei putea

observa in acest tabel, poate fi folosita deasemenea o valuare numerica in locul numelui standard al simbolului.

Crearea de link-uri tip e-mail este foarte simpla. Trebuie mentionat insa ca atunci cand vei pune un link tip e-mail pe o

pagina publica, este foarte usor pentru un expert sa il gaseasca pentru al folosi mai tarziu, in vederea trimiteri de mesaje

spam.

O metoda diferita, care scade riscul spam-ului este acea de a implementarea unui formular e-mail in continutul paginii

tale.


Crearea unui link de email este foarte simplu. Daca vrei ca cineva sa iti scrie un email cel mai bine ar fi sa sa ii pui la

dispozitie un link cu email-ul tau si deasemenea un subiect prestabilit.

Nelamuriri aici
http://www.tutorialehtml.com/htmlt/lista_de_simboluri_in_html.phphttp://www.tutorialehtml.com/htmlt/formulare.php

Vizualizare

Nelamuriri aici

In cazul in care un subiect nu este de ajuns si vrei sa adaugi ceva si la continutul email-ului, o poti face cu ajutorul

urmatorului cod:

Nelamuriri aici

Vizualizare

Nelamuriri aici

Imaginile sunt foarte importante intr-o pagina web. De aceea este recomandat sa le folosesti in mod corect. Inserarea lor

se face cu ajutorul tag-ului .

Vizualizare

HTML - img src

"src" este prescurtarea pentru "source" (sursa). Acest atribut se foloseste pentru a indica locatia fotografiei. Dupa cum am

explicat in capitolul destinat linkurilor se poate folosi orice tip de URL pentru a indica adresa fisierului.

Sursa Locala Descriere

src="image.jpg" fotografia este situata pe acelasi nivel cu fisierul .html

src="../image.jpg" fotografia este situata pe un nivel anterior fisierului .html.

src="../img/image.jpg" fotografia este situata in folderul "img" pe nivelui anterior fisierului .html
mailto:[email protected]?subject=Nelamuririmailto:[email protected]?subject=Nelamuriri&body=Scrie%20aici%20daca%20ai%20nelamuriri

Se poate folosi deasemenea adresa completa a fotografie. De exemplu

scr="http://www.tutorialehtml.com/img/image.jpg". Acest model de URL nu este recomandat deoarece la schimbarea

domeniului va trebui sa schimbi deasemenea si adresele tuturor fotografiilor. Sau in cazul in care imaginea este stocata

pe un alt domeniu scr="http://www.domeniu.com/image.jpg".

Faptul de a stoca imaginea pe un domeniu alternativ, prezinta un mare avantaj in cazul in care dispui de un spatiu limitat

pe domeniul pe care este stocat fisierul .html.

HTML - Atribute alternative pentru imagini

Atributul "alt" este folosit pentru a afisa un text in locul imagini, in cazul in care browser-ul pentru un oarecare motiv nu

poate afisa imaginea sau in cazul in care un user are deselectata functia "ShowImage".

Vizualizare

HTML - inaltimea si latimea unei imagini

Pentru a stabili inaltimea si latimea unei imagini sunt folosite atributele height si widith.

Vizualizare

HTML - Alinierea orizontala si verticala a unei imagini

In acest sens, sunt folosite atributele align si valign. Obtiunile oferite de aceste atribute sunt:

1. Align (orizontal)

- right

- left

- center

2.Valigh (vertical)

- top

- bottom

- center

Am atasat alaturat si un exemplu:

Acesta este primul paragraf ...

Acesta este cel deal doilea paragraf...

Acesta este cel de-al treilea paragraf...

Vizualizare

Acesta este primul paragraf, este doar un exemplu pentru a

putea intelege mai bine alinierea unei imagini.

Acesta este cel deal doilea paragraf, Imaginea va fi afisata

alaturat in partea dreapta, acesta este cel deal

doilea paragraf, Imaginea va fi afisata alaturat

in partea dreapta, acesta este cel deal doilea

paragraf, Imaginea va fi afisata alaturat in

partea dreapta, acesta este cel deal doilea

paragraf, Imaginea va fi afisata alaturat in partea dreapta,

Acesta este cel de-al treilea paragraf si ultimul, el nu contine

nimic dar l-am pus pentru ca "da bine".

HTML - Folosirea imaginilor ca link

Aceasta este doar o introducere, vom trata acest subiect mai pe larg intr-un tutorial urmator. Imaginile sunt foarte utile

pentru link-uri si se pot forma cu ajutorul codului urmator:

Vizualizare

Imaginea de mai sus te va trimite la pagina de start. O poti schimba cu pagina ta de start si vei obtine o imagine cu cu un

link catre pagina ta de start.

HTML - Tumbnails

Tumbnails-urile sunt versinui in miniatura (mult mai putini kilobytes) a unor imagini care in realitate sunt mult mai mari

si cu o calitate sporita. Pentru a realiza un tumbnail, salveza imaginea intr-o calitate mult mai scazuta cu dimensiuni

reduse. Fa apoi aceasa imagine un link ce va conduce la imaginea initiala de de dimensiuni sporite.

Vizualizare

Inserarea codurilor pentru muzica in HTML

Cu ceva timp in urma era destul de complicat sa introduci muzica sau sunete un general pe o pagina web.

In momentul de fata aceasta problema s-a rezolvat, adaugarea de sunete fiind foarte simpla.

Se recomanda ca atat inaltimea cat si latimea sa fie direct proportionale pentru a evita distorsionarea playerului.

Pentru a ascunde playerul valoarea atributului hidden (false) se va inlocuii cu true. Acest lucru se va face doar in cazul in

care esti absolut sigur ca userul nu va dorii sa opreasca sunetul.

Controlul si manipularea playerului

Sa mai aruncam o privire exemplului de mai sus:
http://www.tutorialehtml.com/http://www.tutorialehtml.com/img/fereastra.jpg

- autostart - stabileste daca sunetul va incepe imediat dupa incarcarea paginii web. Poate avea valoarea true sau false

- loop - stabileste daca sunetul va fi repetat la nesfarsit. Poate avea valoarea true sau false.

- volume - poate avea orice valoare intre 0 si 100

Experimenteaza putin cu aceste atribute pentru a le intelege mai bine si retine ca un volum ridicat este de cele mai

multe ori suparator pentru utilizator.

Inserarea de coduri pentru Video in HTML

Un fisier video se poate insera intr-o pagina html de doua moduri. Prima modalitate ar fi cu ajutorul tagului .

Acest tag nu are nevoie de un altul de inchidere, functioneaza in mare masura la fel ca si un tag de introducere a unei

fotografii.

Deasemenea se poate introduce un fisier video cu ajutorul unui link

film name

film name

Extensi video suportate de tagul embed

Acestea sunt dupa cum urmeaza:

- .swf - creat de Macromedia Flash

- .wmv - Microsoft Windows Media Video

- .mov - Quick Time Movie, apartine Apple

- .mpeg files - creat de Moving Pictures Expert Group.

Cele mai folosite find .mpeg si .swf, datorita formaului compact.

Atribute ale tagului embed

- autostart - stabileste daca fisierul va rula imediat dupa incarcarea paginii. Poate avea valoarea true sau false.

- hidden - stabileste daca butoanele sunt sau nu ascunse. Poate avea valoarea true sau false.

- volume - poate avea orice valoare intre 0 si 100
http://www.tutorialehtml.com/htmlt/example.mpeg

- loop - stabileste daca fisierul va fi reprodus in cerc sau nu. Poate avea valoarea true sau false.

- playcount - acesta stabileste de cate ori va fi reprodus fisierul. Spre exemplu playcount="2" (va fi reprodus de doua ori

dupa care se va opri).

Introducerea unui video de pe YouTube

Acest lucru se face foarte simplu, youtube avand pe pagina fiecarui video codul HTML corespunzator.

Adevarul este ca ai dreptate, tot ce vezi e cam haotic, dar partea buna este ca nu trebuie sa il faci tu ci doar sa il copiezi

de pe pagina youtube, si vei avea ca rezultat reprezentarea de mai jos, sau una asemanatoare in cazul in care alegi alt

video.

Voi mentiona insa ca scripturile de embed de pe pagina youtube nu sunt XHML valid. Pentru a genera coduri valide XHML

pentru filmuletele de pe youtube va recomand acest tool. ( Valid XHTML embed code for YouTube videos ). Trebuie

doar sa introduci url-ul unde ai gasit filmul si vei obtine un cod valid XHTML.

Pentru a obtine textul ingrosat vom folosii tagul bold:

Acest text este bold

Afisare

Acest text este bold

Text ingrosat - Aplicatii

In general textul ingrosat se foloseste pentru a scoate in evidenta anumite cuvinte sau anumiti termeni in interiorul unei

fraze.

Textul ingrosat este util pentru a scoate in evidenta
http://scriptgenerator.net/generator/valid-XHTML-YouTube-embed-code.php

anumiti termeni

Afisare

Textul ingrosat este util pentru a scoate in evidenta anumiti

termeni

Se poate folosii deasemena pentru scrierea tip definitie. Dar mai bine sa exemplificam.

Bold - Cuvantul corespondent in engleza pentru

ingrosat, deasemena poate insemna, vitez. "

Afisare

Bold - Cuvantul corespondent in engleza pentru ingrosat,

deasemenea poate insemana, viteaz "

Acest tag se foloseste ca si tagul bold pentru a sublinia sanumiti termeni sau cuvinte uneori o intreaga propozitie. Este

contraindicata folosirea in exces a acestora.

Pentru a realiza acest tip de text avem mai multe variante:

Tagul italic !

Tagul emphasized!

Tagul blockquote!

Tagul address!

Afisare

Tagul italic!

Tagul emphasized!

Tagul blockquote!

Tagul address!

In general browser-ul va interpreta la fel toate aceste taguri.

In general cele mai simple sunt si cele mai folosite, si anume si .

HTML

Hyper Text Markup Language

sau

HTML


Afisare

HTML


sau

HTML


HTML - Bold si Italic impreuna

De cele mai multe ori bold si italic sunt puse in alte taguri pentru a ajunge la formatarea finala a textului. In acest sens

mantionez ca nu trebuie uitata inchiderea tuturor tagurilor.

Trebuiesc inchise toate tagurile

Afisare

Trebuiesc inchise toate tagurile

Tagul permite sa formatezi textul ca fiind de computer. Acesta ofera o anumita dimensiune si o spatiera tipica

codului de calculator.

Acest text a fost formatat cu ajutorul tagului code

.

Afisare

Acest text a fost formatat cu ajutorul tagului

code.

Acest tag se foloseste pentru a reda anumite scripturi precum cele din acest tutorial.

HTML- Code Links

O alta utilizare a acestui tag este acela de a da o alta infatisare linkurilor.

Acesta este un exemplu de link spre Google

formatat cu ajutorul tagului code

Afisare

Acesta este un exemplu de link spre Google formatat cu

ajutorul tagului code

Atunci cand scriem un cod HTML in notepad vom introduce spatii tab-uri, sau enter-uri pentru a ne putea orienta mai usor

in cautarea fragmenului mentionat. Un browser insa va interpreta codul mentionat ca pe o singura linie de cod ignorand

sapatiile si taburile mentionate.

In acest sens avem tagul care faciliteaza afisarea in browser a formatarii din notepad.

Foaie verde Si-o lipie Am facut

Si-o poezie

Afisare

Foaie verde Si-o lipie Am facut

Si-o poezie

HTML - Text exponential, Superscript

Tentru a produce un text exponential in HTML vom folosi tag-ul .

Acest text este un text exponential!

Afisare

Acest text este un text exponential!

HTML - exponenti

Putem folosi tagul (superscript) pentru a redacta expresii matematice, dupa cum urmeaza:

32 = 9
http://www.google.ro/

14x

Afisare

32 = 9

10x

HTML - Note de subsol

Textul exponential se foloseste deasemenea pentru referinte, explicatii, completari sau orice alte adaugiri in nota de

subsol.

"Femeia1-i ochiul dracului."

1. Nu exista explicatie pentru acest element.

Afisare

"Femeia1-i ochiul dracului."

1. Nu exista explicatie pentru acest element.

Poti sa te joci putin cu acest element, pe cat de util pe atat de rar folosit.

Pentru a scrie un indice vom folosii tagul , dupa cum urmeaza.

Acesta este un indice!

Afisare

Acesta este un indice!

Subscript - Aplicatii practice

Tagul subscript la fel ca si tagul superscript se poate folosii la redactarea expresiilor matematice. Cu toate acestea locul

unde il intalnim cel mai des sunt formulele chimici.

H20 - Apa

O2 - Oxigen

CO2 - Dioxid de carbon

H2SO4 - Acid sulfuric

Afisare

H20 - Apa

O2 - Oxigen

CO2 - Dioxid de carbon

H2SO4 - Acid sulfuric

Dupa cum se poate observa in exemplul anterior scrierea cu indice este foarte practica.

TABELE HTML

Aceste etichete au o mare utilizare deoarece tabele constituie structura care sta la baza organizarii marii majoritati a paginilor web (inclusiv cea de fata).

Tabelul este format din linii si coloane impartind zona in celule. Fiecare celula pastreaza informatia care va fi

afisata. Pentru o afisare corecta a tabelului fiecare rand va avea acelasi numar de celule. Daca dorim ca o celula sa fie goala vom introduce un spatiu gol (space) sau codul echivalent .

Pentru inserarea unui tabel este folosita perechea de etichete si , pentru un rand si iar pentru o celula si .

Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe tabele.

Exemplu: tabel cu 2 coloane si 2 randuri, border 1, coloana 1 latime 80px, coloana 2 latime 160px, fiecare celula are o alta culoare de fond (bgcolor)

HTML Afisare

rosugalben albverde

rosu galben

alb verde

Atributele etichetei table sunt:

border = bordura (0 = lipsa bordura) width = latimea tabelului height = inaltimea tabelului bgcolor = culoarea de fundal background = imaginea de fundal cellspacing = distanta intre celule cellpaddind = distanta dintre marginea celului si continut

Atributele etichetei td sunt: align = aliniere pe orizontala a continutului (left=stanga, right=dreapta, center=centru) valign = aliniere pe verticalala a continutului (top=sus, bottom=jos, middle=mijloc) width = latimea celulei height = inaltimea celulei bgcolor = culoarea de fundal background = imaginea de fundal colspan = uneste celula cu cea din dreapta ei rowspan = uneste celula cu cea de sub ea

Exemplu: un tabel in care am folosit colspan pentru a uni celulele 1 si 2 din randul 2 si rowspan pentru a uni celula 1 din randul 3 cu celula 1 din randul 4

HTML Afisare
http://www.drogoreanu.ro/tutorials/html/exemplu5_1.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu5_2.html

R1 C1 R1 C2 R1 C3 R1 C4 R2 C1+C2 R2 C3 R2 C4 R3 C1 + R4 C1 R3 C2 R3 C3 R3 C4 R4 C2 R4 C3 R4 C4

R1 C1 R1 C2

R1 C3

R1 C4

R2 C1+C2 R2 C3

R2 C4

R3 C1

+ R4 C1

R3 C2

R3 C3

R3 C4

R4 C2

R4 C3

R4 C4

Daca dorim sa evidentiem continutul primului rand (capul de tabel) putem folosi perechea de etichete si in locul etichetelor si . Astfel continutul celulei va fi afisat ingrosat si aliniat pe mijloc.

Exemplu: un tabel cu 3 randuri si 2 coloane folosind pe primul rand etichetele si

HTML Afisare

Titlul 1 Titlul 2lt;/th> 1 2 3 4

Titlul 1 Titlul 2

1 2

3 4

Eticheta caption va adauga o linie text deasupra tabelului, centrata pe mijloc, deobicei folosita ca fiind un titlu al tabelului. caption se plaseaza obligatoriu imediat dupa tag-ul table dar inainte de prima eticheta tr.

Exemplu: un tabel cu 4 randuri si 2 coloane folosind eticheta caption

HTML Afisare

Necesar alimente Produse Cantitatelt;/th> Fructe 1 kg Legume 5 kg Carne 1,5 kg

Necesar alimente

Produse Cantitate

Fructe
http://www.drogoreanu.ro/tutorials/html/exemplu5_3.htmlhttp://www.drogoreanu.ro/tutorials/html/exemplu5_4.html

Documents

Tutoriale HTML