[Html]Notiuni De Introducere Si Lectii

October 9, 2011

HTML - cuprins

Cunoasterea HTML este primul pas si cel mai important pentru cei care vor sa construiasca pagini web de calitate

Introducere - Introducere in HTML
1 - Elementele principale, cod HTML
2 - Crearea si editarea pagini HTML
3 - Titluri, Paragrafe, Un nou rand, Linie orizontala
4 - Formatul textului
5 - Marcatori si numerotare
6 - Lucrul cu Imagini
7 - Crearea de link-uri
8 - Harti de imagini
9 - Lucrul cu Tabele
10 - Lucrul cu mai multe cadre
11 - Crearea de form-uri
12 - Elemente speciale (META, embed, marquee, object)
13 - Lucrul cu stiluri CSS
14 - Despre tag-urile DIV si SPAN
15 - Trecerea de la HTML la XHTML
XHTML - Tag-uri si atributele lor
Tutorial HTML5
HTML5 - Elemente si atribute noi in formular
Desenare cu HTML5, canvas si JavaScript
Coduri culori pentru site
Caractere speciale si secvente escape

NOTE ! Nu postati in aceasta sectiune , intrebarile sau eventualele tutoriale , creati un topic separat.Iar eu va voi raspunde !

October 9, 2011

Introducere

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 indicatiile 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.

October 9, 2011

Principalele elemente HTML

1. Ce este HTML? (Hypertext Markup Language)

- Este un set de coduri logice care constituie apariţia unui document web si a informatiilor 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:

[/indent]

- Cele mai multe elemente (

numite si tag-uri

) au un element (tag) de deschidere si un element de închidere distins prin "

/

" in interiorul parantezei deschise "

<

".

Exemplu:

[/indent]

[/code]

[indent=1]

- Primul cuvânt care apare înăuntru "<" se numeşte

[b]

element

[/b]

sau

[b]

eticheta HTML

[/b]

si spune browser-ului sa facă ceva, precum <FONT>

[/indent]

- Cuvintele care urmeaza după element in interiorul "< >"se numesc

[b]

atribute

[/b]

care descriu proprietăţile elementului. Cum ar fi : culoarea, mărimea, etc. - Atributele sunt separate prin spatiu si urmate de semnul egal "

[b]

=

[/b]

", dupa care sunt scrise, intre ghilimele (

[b]

" "

[/b]

)

[b]

valorile atributelor

[/b]

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

[i]

In urmatorul exemplu elementul este FONT atributul COLOR si valoarea BLUE

[/i]

:

[indent=1]

[code]

[/indent]

<FONT COLOR="BLUE">Acest text va fi albastru</FONT>

[/code]

[b]

2. Structura documentului HTML

[/b]

[indent=1]

- Un document (fisier) HTML este alcatuit din mai multe elemente si atributele lor.

[/indent]

- La început un element

[b]

HTML

[/b]

cuprinde (înconjoară ) datele documentului. Acest element conţine doua sub-elemente principale:

[b]

HEAD

[/b]

si

[b]

BODY

[/b]

. 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:

[indent=1]

[CODE]

[/indent]

<html> <head> <title>Titlu Documentului</title> </head> <body> Continutul paginii </body></html>

[/code]

[indent=1]

[u]

Structura generala a unui document HTML

[/u]

[/indent]

[b]

<HTML>

[/b]

[b]

<HEAD>

[/b]

Acesta are si el mai multe sub-elemente:

[b]

<TITLE>

[/b]

Aici se scrie titlul documentului, cat mai sugestiv, si se încheie cu

[b]

</TITLE>

[/b]

[b]

<BASE>

[/b]

Poate fi folosit pentru a înregistra locaţia documentului in forma URL. (Necesar daca documentul nu este accesat in locaţia lui originala). Se încheie cu

[b]

</BASE>

[/b]

[b]

<LINK>

[/b]

Indica o relaţie dintre document si alte obiecte de pe WEB. Se încheie cu

[b]

</LINK>

[/b]

[b]

<META>

[/b]

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

[b]

</META>

[/b]

[b]

[/b]

Conţine oricare din JavaScript sau VB Script. Se încheie cu

[b]

</SCRIPT>

[/b]

[b]

<STYLE>

[/b]

Conţine informaţii privind stilul, grafica informaţiilor care vor apărea pe pagina. Se încheie cu

[b]

</STYLE>

[/b]

Aici se încheie elementele adaugate in HEAD

[b]

</HEAD>

[/b]

[b]

<BODY>

[/b]

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:

[b]

[/b]

Se încheie cu

[b]

</BODY>

[/b]

[b]

</HTML>

[/b]

[i]

- Lectia 1

[/i]

October 9, 2011

Crearea si editarea paginii HTML

Sunt mai multe programe cu care se pot crea pagini web, chiar fara a cunoaste limbjul HTML, cum sunt Microsoft FrontPage sau Macromedia Dreamweaver.

Editoarele de text sunt programele de baza, si cele mai folosite, pentru editarea paginii web. Avantajul folosirii lor este simplitatea, pentru creare paginii web sunt necesare 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, 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 sau Notepad++, dar cei avansati pot folosi si altele cum ar fi Dreamweaver.

1. Crearea bazei de început a unui document

Cum ati vazut in Lectia 1, sunt elemente sigure, generale, care sunt necesare pentru crearea unui document HTML.

Pentru început deschideti aplicatia NotePad si scrieti structura de baza a unei pagini web. Aceasta este:

<html> <head> <title> Titlul </title> </head> <body> Continut </body></html>

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 text reprezentativ ca titlu al documentului dv.; si in BODY un text "Continut". Ceea ce scrieti la TITLE va apare in linia cea mai de sus a browseru-lui (deasupra meniurilor). 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 pagina:

<html> <head> <title>Addicted Community,Games,Tutorials</title> </head> <body> <h1>Pagina HTML</h1> Lectii, exemple si explicatii. </body></html>

[/code]

[/size]

[/font]

[/indent]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

- <h1> </h1> este o eticheta HTML pentru afisare de text mare (ca un titlu) in pagina.

[/size]

[/font]

[/indent]

[font=Calibri, Arial, sans-serif]

[size=4]

- 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 "

[i]

Save as type

[/i]

" - All Files, apoi la "

[i]

File name

[/i]

" 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).

[/size]

[/font]

[font=Calibri, Arial, sans-serif]

[size=4]

[b]

2. Setarea proprietarilor documentului

[/b]

[/size]

[/font]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

- Proprietatile documentului pot fi controlate de atributele elementului BODY, de exemplu cum ar fi culorile pentru fondul paginii, pentru text si diferite faze ale link-urilor.

[/size]

[/font]

[/indent]

[font=Calibri, Arial, sans-serif]

[size=4]

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 '

[b]

#

[/b]

'. Fiecare 2 unitati ale codului reprezinta una din culorile RGB.

[/size]

[/font]

[font=Calibri, Arial, sans-serif]

[size=4]

De exemplu:

[b]

#00aa11

[/b]

reprezinta o culoare care nu are Rosu (00), are Verde (aa) si Albastru mai putin (11).

[/size]

[/font]

[font=Calibri, Arial, sans-serif]

[size=4]

[u]

[b]

Elementul BODY

[/b]

[/u]

[/size]

[/font]

[font=Calibri, Arial, sans-serif]
[size=4]
- Acestui element ii puteti adauga informatii care sa defineasca culoarea sau imaginea din fondul paginii, textul si culoarea link-urilor.
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
- Daca elementul BODY nu este completat cu alte atribute atunci browser-ul va prezenta culorile standard, de obicei fondul este alb.
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
- Pentru a seta culoare fondului paginii adaugati in eticheta <BODY> atributul
[b]
BGCOLOR
[/b]
.
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
- Urmatorul exemplu va prezenta un document a carui fond este de culoare albastra:
[/size]
[/font]

[code]

[/code]

[font=Calibri, Arial, sans-serif]

[size=4]

[b]

Culoarea textului

[/b]

[/size]

[/font]

[font=Calibri, Arial, sans-serif]
[size=4]
- Atributul
[b]
TEXT
[/b]
controleaza culoarea textului normal din document.
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
- Acesta va afecta tot textul din document care nu este colorat de alte elemente, cum ar fi link-ul.
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
- Culoarea standard pentru text este Negru.
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
- Iata un exemplu in care culoarea fondului va fi albastru si culoarea textului va fi rosu, atributul TEXT va fi adaugat astfel:
[/size]
[/font]

[code]

[/code]

[font=Calibri, Arial, sans-serif]

[size=4]

[b]

Link-uri (LINK, VLINK si ALINK)

[/b]

[/size]

[/font]

[font=Calibri, Arial, sans-serif]
[size=4]
- Aceste atribute controleaza culoarea link-ului in diferite stari
[/size]
[/font]

[font=Calibri, Arial, sans-serif]
[size=4]
1. LINK - culoarea initiala a link-ului. Standard este albastru
[/size]
[/font]

[font=Calibri, Arial, sans-serif]
[size=4]
2. VLINK - culoarea unui link vizitat. Standard este purpuriu.
[/size]
[/font]

[font=Calibri, Arial, sans-serif]
[size=4]
3. ALINK - culoarea link-ului in momentul activarii. Standard este rosu.
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
- Modul de setare al acestor atribute este urmatorul:
[/size]
[/font]

[font=Calibri, Arial, sans-serif]

[size=4]

[code]

[/code]

[/size]

[/font]

[list]
[font=Calibri, Arial, sans-serif]
[size=4]
Rezultatul va fi o pagina cu fondul alb, textul rosu, link-urile albastre, link-urile vizitate vor avea culoarea roz iar culoarea link-urilor in momentul activarii va fi galben.
[/size]
[/font]

[*]

[font=Calibri, Arial, sans-serif]

[size=4]

[b]

Folosirea unei imagini ca fond pentru pagina (background)

[/b]

[/size]

[/font]

[font=Calibri, Arial, sans-serif]
[size=4]
- Elementul body ofera posibilitatea înlocuiri fondului paginii cu o imagine (Background image). Daca imaginea este mai mica decât dimensiunile paginii atunci imaginea va fi multiplicata pana va acoperi întreg cadru documentului. Este indicat ca imaginea sa fie in format *.gif sau *.jpg. Folosirea unei imagini va da un aspect placut documentului.
[/size]
[/font]

[*]

[font=Calibri, Arial, sans-serif]

[size=4]

- Un exemplu de cod HTML cu imagine pentru background este urmatorul:

[/size]

[/font]

[/list]

[CODE]

[/code]

[list]
[font=Calibri, Arial, sans-serif]
[size=4]
In acest exemplu fondul pagini va fi dat de imaginea fisierului "imagine.gif" si de asemenea am setat BGCOLOR astfel incat in timpul procesului de încarcare a imaginii culoarea fondului va fi alba.
[/size]
[/font]

[/list]

[font=Calibri, Arial, sans-serif]

[size=4]

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 recunoaste. Extensia standard pentru un fisier care reprezinta o pagina web este "

[b]

.htm

[/b]

" sau "

[b]

.html

[/b]

". De obicei folosesc (".html").

[/size]

[/font]

[font=Calibri, Arial, sans-serif]

[size=4]

- Pentru a salva documentul ca sa arate ca o pagina web, in

[b]

NotePad

[/b]

alegeti din meniul

[b]

File

[/b]

comanda

[b]

Save

[/b]

si salvati fisierul cu orice nume doriti dar cu extensia

[b]

html

[/b]

(sau "htm") - (

[i]

La File name: scrieti si numele si extensia ".html", exemplu:

[u]

index.html

[/u]

[/i]

). Daca nu scrieti extensia, NotePad va salva documentul in format "

[i]

txt

[/i]

".

[/size]

[/font]

[font=Calibri, Arial, sans-serif]

[size=4]

- 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.

[/size]

[/font]

[font=Calibri, Arial, sans-serif]

[size=4]

- Pentru a continua munca, a face modificari paginii sau pentru a adauga altceva in documentul 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 modificati si dati clic pe butonul Open. Dupa ce terminati modificarile salvati, astfel daca redeschideti documentul ca o pagina web acesta va fi deschis cu noul format.

[/size]

[/font]

October 9, 2011

Titluri, Paragrafe, Un nou rând, Linie orizontala

1. 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>.

<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></html>

2. 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.

<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>

[/code]

[/indent]

[b]

3. Un nou rand <br>

[/b]

- Tag-ul
[b]
<br>
[/b]
permite sa decizi unde textul va incepe un nou rând, astfel se forteaza începerea unui nou rând.
-
[b]
<br>
[/b]
este un Element Gol dar poate sa conţin atribut.
[b]
<br>
[/b]
nu are si nu cere element de închidere,
[b]
nu se foloseste
[i]
</br>
[/i]
[/b]

[indent=1]

[b]

[i]

[code]

<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>

[/code]

[/i]

[/b]

[/indent]

[indent=1]

- Elementul

[b]

<br>

[/b]

foloseşte un singur atribut – CLEAR care poate avea valoarea LEFT, RIGHT sau ALL, si sunt folosite daca este o imagine pe pagina. Atributul CLEAR forţează o linie in jos. Daca o imagine este aşezata in partea stanga a paginii, valoarea LEFT va muta cursorul jos la prima linie din marginea ştanga.

[/indent]

[b]

4. Linie orizontala <hr>

[/b]

- Acest element afiseaza o linie orizontala in document
- Acest element nu foloseşte element de închidere [
[i]
[b]
</hr>
[/b]
[/i]
]
- Elementul
[b]
<hr>
[/b]
foloseste urmatoarele atribute:
[list]
- SIZE = latimea liniei, in pixeli (standard este 2)
- WIDTH = lungii liniei, in pixeli sau procente din lungimea afisarii paginii (standard 100%)
- NOSHADE = afiseaza linia fara a avea un aspect 3D
- ALIGN = aliniaza linia (Left, Center, Right), adica Stanga, Centru sau Dreapta paginii ( Standard centru)
- COLOR = seteaza culoarea liniei

[*]

[CODE]

<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 color="#1111fe" size="4" width="50%"><p>Paragraf 2</p></body></html>

[/code]

[/list]

October 9, 2011

Formatul textului

HTML contine mai multe elemente, tag-uri si atribute, pentru afisarea textului in mai multe formate cu aspecte grafice diferite.

1. Tag-ul <FONT> ... </FONT>

Cu acest element,

<FONT>

, puteti modifica aspectul textului, cum sunt tipul fontului folosit, marimea si culoarea textului.

Marimea textului poate fi modificata cu elementul
FONT
si atributul
SIZE
. Atributul SIZE poate lua valorile numerice de la 1 la 7 si pe langa acestea poate folosi, ca valoare relativa, semnele "
+
" sau "
-
". Textul normal (daca nu este specificat acest atribut) are valoarea 3.
Exemplu :

<font size="+2">Doua mărimi mai mare</font>

- Tipul fontului poate fi modificat cu elementul FONT si atributul FACE.
Exemplu :

<font face="Arial Black">Acesta este tipul de font Arial Black</font>

[/code]

[/indent]

- Culoarea textului poate fi modificata cu elementul
[b]
FONT
[/b]
si atributul
[b]
COLOR
[/b]
.
Exemplu :

[indent=1]

[code]

<font color="#00dd00">Acest text are culoarea verde</font>

[/code]

[/indent]

[b]

2. Bold, Italic, Underline si alte elemente

[/b]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

Elemente des folosite pentru formatul textului sunt:

[/size]

[/font]

[/indent]

[font=Calibri, Arial, sans-serif]
[size=4]
- Bold (ingrosat)
[b]
<b> ... </b>
[/b]
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
- Italic (inclinat)
[b]
<i> ... </i>
[/b]
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
- Underline (subliniat)
[b]
<u> ... </u>
[/b]
[/size]
[/font]

[font=Calibri, Arial, sans-serif]

[size=4]

Exemple:

[/size]

[/font]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

[code]

<b> Bold </b><i> Italic </i><u> Underline </u>

[/code]

[/size]

[/font]

[/indent]

[indent=1]

Alte elemente folosite pentru formatul textului sunt:

[/indent]

-
[b]
<pre>
[/b]
Performated
[b]
</pre>
[/b]
- Textul incadrat de elementul PRE este prezentat intr-un singur font, oricare ar fi atributul FACE. Spatiile mai lungi si liniile necesare sunt prezentate aşa cum sunt scrise in NotePad, ne mai fiind nevoie de alte elemente adiţionale, cum ar fi <
[b]
br
[/b]
> pentru o noua linie si pentru mai mult spaţiu intre cuvinte.
-
[b]
<em>
[/b]

[i]
Accentuare (Emphasis)
[/i]

[b]
</em>
[/b]
- Browser-ul de obicei arata aces element ca italic
-
[b]
<strong> Strong </strong>
[/b]
- Browser-ul de obicei arata aces element ca bold
-
[b]
<tt>
[/b]
Teletype
[b]
</tt>
[/b]
- Ca si PRE, browser-ul prezinta acesta intr-un singur tip de font, indiferent de fontul ales cu atributul FACE, in interiorul elementului FONT
-
[b]
<cite>
[/b]
Citatie
[b]
</cite>
[/b]
- Reprezinta o citatie din document.

[indent=1]

[code]

<html><head><title>titlu documentului</title></head><body><p><font size="+1">O singura marire</font>- normal -<font size="-1">O singura micsorare</font><br><b>Bold</b>- <i> Italic </i> - <u> Subliniat </u> -<font color="#ff0000"> Colorat </font><br><em>Accentut</em> - <strong> Strong </strong> -<tt>Tele type</tt><br><cite> Citatie </cite></p></body></html>

[/code]

[/indent]

[b]

3. Alinierea

[/b]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

Câteva elemente pot avea atributul (

[b]

ALIGN

[/b]

) pentru aliniere, cum ar fi Titlurile

[b]

<Hx>

[/b]

, Paragraful

[b]

[/b]

si Linia orizontala

[b]

<hr>

[/b]

. Cele trei valori ale atributului

[b]

ALIGN

[/b]

sunt: LEFT, RIGHT si CENTER. Aliniamentul celor mai multe elemente se face cu ajutorul altor elemente:

[/size]

[/font]

[/indent]

[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<div align="
[i]
valoare
[/i]
"> ... </div>
[/b]
Poate conţine cele mai multe elemente. Tot ce este poziţionat cu elementul DIV poate fi aliniat oriunde-n pagina, indiferent daca in acel loc se afla si alt ceva (Imagine, Text, …).
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<center> ... </center>
[/b]
Va centra elementele
[/size]
[/font]

[font=Calibri, Arial, sans-serif]

[size=4]

[b]

4. Alte etichete HTML pentru formatul textului

[/b]

[/size]

[/font]

[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<strike>
[/b]
Text taiat
[b]
</strike>
[/b]
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<big>
[/b]
Prezinta textul intr-un font mare
[b]
</big>
[/b]
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<small>
[/b]
Prezinta textul intr-un font mic
[b]
</small>
[/b]
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<sub>
[/b]
Afisaza textul in pozitia subscript
[b]
</sub>
[/b]
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<sup>
[/b]
Aseaza textul in pozitia superscript
[b]
</sup>
[/b]
[/size]
[/font]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

[b]

[code]

<html><head><title>Titlu documentului</title></head><body><p><strike> Text taiat </strike><br><big> Prezinta textul intr-un font mare </big><br><small> Prezinta textul intr-un font mic </small><br><sub> Aseaza textul in pozitia subscript </sub> normal<sup> Aseaza textul in pozitia superscript </sup><br></p></body></html>

[/code]

[/b]

[/size]

[/font]

[/indent]

[font=Calibri, Arial, sans-serif]

[size=4]

[/size]

[/font]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

- Urmatoarele elemente pentru format sunt folosite mai rar si sunt pentru documente cu aplicatii tehnice

[/size]

[/font]

[/indent]

[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<dfn>
[/b]
Defineste exemplu de termen inchis
[b]
</dfn>
[/b]
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<code>
[/b]
Folosit pentru extragerea unui cod de program
[b]
</code>
[/b]
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<samp>
[/b]
Folosit pentru simple productii de programe, scripturi , etc.
[b]
</samp>
[/b]
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<kbd>
[/b]
Folosit pentru text care va fi scris de utilizator
[b]
</kbd>
[/b]
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<var>
[/b]
Folosit pentru variabile sau argumente de comenzi
[b]
</var>
[/b]
[/size]
[/font]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

[b]

[code]

<html><head><title>Titlu documentului</title></head><body><p><dfn> Definite exemplu de termen inchis </dfn><br><code> Folosit pentru extragerea unui cod de program </code><br><samp> Folosit pentru simple productii de programe, scripturi , etc. </samp><br><kbd> Folosit pentru text care va fi scris de utilizator </kbd><br><var> Folosit pentru variabile sau argumente de comenzi </var><br></p></body></html>

[/code]

[/b]

[/size]

[/font]

[/indent]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

- Alte elemente pentru formatul textului:

[/size]

[/font]

[/indent]

[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<q> ... </q>
[/b]
- Folosit pentru citate scurte.
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<blockquote> ... </blockquote>
[/b]
- Folosit pentru incadrarea de citate mai lungi, creaza spatiu pentru text. Pentru a crea mai mult spatiu puteti adauga de mai multe ori acest element.
[/size]
[/font]
[font=Calibri, Arial, sans-serif]
[size=4]
-
[b]
<address> ... </address>
[/b]
- Cu acest element se specifica informatii cum ar fi autorul documentului si detalii pentru contact.
[/size]
[/font]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

[CODE]

<html><head><title>Titlu documentului</title></head><body><p><q>Daca vrei si crezi, orice este posibil.</q><blockquote>Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca bucurie. <br>Aceasta este prima zi din restul vietii tale.</blockquote><center><address>180 Attwell Dr. Suite 130 <br> Toronto, ON <br> M9W 6A9</address></center></p></body></html>

[/code]

[/size]

[/font]

[/indent]

October 9, 2011

Marcatori si numerotare

HTML contine cateva tag-uri utile pentru asezarea continutului in pagina. Prin acestea textul este mai usor de citit si evidentiat.

1. Elementele pentru marcatori si numerotare

Un element des folosit in formarea listelor (neordonate) este

<ul>

.

- <ul> este elementul de început si dupa scrierea listei se incheie cu </ul>.
- Majoritatea elementelor pentru marcatori si numerotare sunt compuse din unu sau mai multe elemente <li> ... </li> (list element). Fara atributul "type" specificat in "<ul>" acestea prezintă un marcaj ca un bullet.

<html><head><title>titlu documentului</title></head><body><ul><li>List item 1 ...</li><li>List item 2 ...</li><li>List item 3 ...</li></ul></body></html>

- Sunt 3 tipuri de marcaje: disc, circle (cerc) si square (patrat) - Tipul de marcaj care se doreste folosit se introduce prin atributul type in eticheta <ul> - Exemplu:

<html><head><title>titlu documentului</title></head><body><ul type="square"><li>List item 1 ...</li><li>List item 2 ...</li><li>List item 3 ...</li></ul></body></html>[/code]




Un alt element folosit pentru formarea listelor (ordonate) este [b]<ol>[/b].

- [b]<ol> ... </ol>[/b] este un element de numerotare. Elementele din lista sunt numerotate automat.
- Impreuna cu [b]<ol>[/b] se foloseste [b]<li> ... </li>[/b]

Iata un exemplu:

[code]<html><head><title>titlu documentului</title></head><body><ol><li>List item 1 ...</li><li>List item 2 ...</li><li>List item 3 ...</li></ol></body></html>[/code]

Sunt mai multe tipuri de numerotare care pot fi folosite. Acestea sunt controlate de atributul "[b]type[/b] care este adaugat in elementul [b]<ol>[/b], le puteti vetea mai jos:

- [b]type="1"[/b] - stil: [b]1, 2, 3, ...[/b]
- [b]type="a"[/b] - stil: [b]a, b, c, ...[/b]
- [b]type="i"[/b] - stil: [b]i, ii, iii, ...[/b]
- [b]type="I"[/b] - stil: [b]I, II, III, ...[/b]

De asemenea se poate specifica numarul de inceput al numerotarii printr-o valoare data atributului [b]start[/b].

[code]<html><head><title>titlu documentului</title></head><body><ol type="a"><li>List item 1 ...</li><li>List item 2 ...</li><li>List item 3 ...</li></ol>- Alta lista:<ol type="I" start="3"><li>List item 1 ...</li><li>List item 2 ...</li><li>List item 3 ...</li></ol></body></html>[/code]

[b] 2. Alte elemente pentru asezarea textului in pagina[/b][indent=1][font=Calibri, Arial, sans-serif][size=4]Alte elemente pentru asezarea textului sunt: tag-ul [b]<dl>[/b], care cuprinde in el elementele [b]<dt>[/b] si [b]<dd>[/b][/size][/font][/indent]

[font=Calibri, Arial, sans-serif][size=4]- [b]<dl> ... </dl>[/b] este folosit (impreuna cu "dt" si "dd") pentru definirea si incadrarea unei liste de definitii.[/size][/font]
[font=Calibri, Arial, sans-serif][size=4]- [b]<dt> ... </dt>[/b] Defineste elementul din lista. Fiecare tip de astfel de element trebuie precedad de unul sau mai multe elemente [b]<dd> ... </dd>[/b], folosite pentru descrierea elementului definit.[/size][/font]

[font=Calibri, Arial, sans-serif][size=4]Aceste elemente ajuta pentru a da un aspect ordonat si placut textului si a putea face o separare mai buna a continutului. In urmatorul exemplu puteti vedea cum se folosesc aceste element

[code]<html><head><title>titlu documentului</title></head><body><dl> <dt>HTML</dt> <dd> - Hyper Text Markup Language</dd> <dd> - Limbaj pentru pagini web</dd> <dt>Dog</dt> <dd>dog = caine</dd> <dd>animal de casa</dd></dl></body></html>[/code]

[/size][/font] Pentru o eficienta mai buna se pot combina elementele de marcaj si numerotare, introducand elementele [b]<ul>[/b] si [b]<ol>[/b]imbricate ([i]unele in celelalte[/i]) impreuna cu elementele [b]<li>[/b] Exemplu:

[CODE]<html><head><title>titlu documentului</title></head><body><ul type="square"><li> List item 1 ... </li><li> List item 2 ... <ol type="a" start="3"> <li> Alt List item ... </li> <li> Alt List item ... </li> </ol></li><li> List item 5 ... </li></ul></body></html>[/code]

[b] Observati ca tot ce contine "<ol> ... </ol>" este adaugat in cadrul unui "<li> </li>"[/b]

October 9, 2011

HTML contine si elemente pentru adaugarea de imagini in pagina web.

1. Formatul imaginilor care pot fi folosite

Cele mai folosite formate pentru imaginile adaugate intr-o pagina HTML sun

GIF

si

JPEG

(JPG ; JPE), avantajul acestora este ca imaginile care au aceste extensii au o marime mica (in bytes), avand maximum 256 de culori.

Alte tipuri de formate (folosite mai rar) sunt:

PNG, BMP, TIFF, PCX

2. Adaugarea unei imagini intr-o pagina web

Pentru a introduce o imagine intr-un format HTML se foloseşte elementul

<img> ... </img>

împreuna cu urmatoarele atribute :

- src - Valoarea acestui atribut determina locatia fisierului care contine imaginea.
- alt - La acest atribut se scrie textul care va aparea daca imaginea nu e afisata (de unele browsere) sau cand utilizatorul va pozitiona, in browser, mouse-ul peste imagine.
- align - Acest atribut permite asezarea imagini in locuri diferite pe pagina. Pot fi folosite urmatoarele optiuni:
- Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle , Baseline , ABSBottom
[*]- width - Valoarea acestui atribut reprezinta lungimea imaginii, in pixeli. Daca nu este scris imaginea va fi prezentata cu lungimea originala.
[*]- height - Valoarea acestui atribut reprezinta inaltimea (latimea) imaginii, in pixeli. Daca nu este scris imaginea va fi prezentata cu inaltimea originala.
[*]- border - Prin adaugarea acestui atribut imaginea va aparea înconjurata de un chenar, valoarea acestui atribut reprezinta grosimea chenarului, in pixeli.
[*]- hspace - Acest atribut este pentru spatiu orizontal pe ambele parti ale imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel, in pârtile orizontale ale imaginii.
[*]- vspace - Acest atribut este pentru spatiu vertical pe ambele parti ale imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel, in pârtile verticale ale imaginii.

In exemplu de mai jos puteti vedea modul de introducere a unei imagini pe o pagina web si cum pot fi folosite atributele :

<html><head><title>titlu documentului</title></head><body><img src="imagine.jpg" alt="puteti adauga orice text" align="top" width="100" height="120" border="4" hspace="10" vspace="7"></img></body></html>

NOTE ! De obicei atunci cand se creeaza o pagina web , imaginile folosite se pun intr-un folder numit "images" .Acest forum poate purta orice nume dar editoarele grafice cu ar fi Macromedia Dreamweaver creeaza automat acest folder la salvarea documentului ! Sursa imaginii acum devine

<html><head><title>titlu documentului</title></head><body><img src="images/imagine.jpg"></img></body></html>[/code]

October 9, 2011

Crearea de link-uri

Link-urile (links) sunt elemente HTML cu ajutorul carora putem deschide alte pagini, sari de la un document la altul sau la alt site. Sunt foarte importante in crearea de pagini web.

Forma generala pentru crearea unui link este urmatoarea:

<a href="url" title="Titlu link">Nume</a>

- a este elementul specific pentru crearea link-urilor

- href este atributul care marcheaza indicarea adresei link-ului

- url este adresa link-ului (a paginii care va fi deschisa). De exemplu (http://www.addicted2.ro)

- title este atributul prin care se da un titlu link-ului (un text ascuns, care apare numai cand este pozitionat mouse-ul deasupra link-ului)

- Titlu link este textul ascuns care apare cand este pozitionat mouse-ul deasupra link-ului

- Nume este textul care va aparea in browser si pe care trebuie dat click cu mouse-ul. In loc de acest text se poate folosi si o imagine, astfel "Nume" va fi inlocuit cu <img src="nume_imagine.extensie">

Cand documentul este alcatuit din mai multe cadre se foloseste si atributul target

Culoarea link-urilor poate fi schimbata de următoarele atribute, care trebuie scrise in interiorul elementului <BODY>

link="#0000ff - reprezinta culoarea link-ului in browser.
vlink="#00ffff - reprezinta culoarea link-ului când pagina respectiva a fost / este vizitata.
alink="#ff0000 - reprezinta culoarea link-ului când acesta este activat.

Exemplu:

<body bgcolor="#00ffff" link="#000000" vlink="#ff0000" alink="#00ff00">

Link-urile sunt de doua feluri: 1. Link-uri externe - (sunt cele mai utilizate), care sunt si ele de doua feluri: a) Link-uri externe câtre pagini ale aceluiasi site. Pentru acestea URL-ul poate sa nu includa si domeniul site-ului, cum ar fi "http://www.nume.com", ci se poate folosi doar cale in directoare, numele si extensia documentului la care se face saltul. De exemplu:

- daca documentul tinta se afla in acelasi director cu fisierul in care se scrie link-ul, codul va fi scris asa:
- <a href="nume_fisier.extensie" title="Titlu link">Nume</a>

- daca documentul tinta se afla intr-un director anterior celui in care se afla fisierul in care se scrie link-ul, codul va fi scris asa:
- <a href="../nume_fisier.extensie" title="Titlu link">Nume</a>

- daca documentul tinta se afla intr-un director din cel care se afla fisierul in care se scrie link-ul, codul va fi scris asa:
- <a href="director/nume_fisier.extensie" title="Titlu link">Nume</a>
- B) Link-uri externe câtre alte site-uri. Aici, adresa URL din link trebuie sa contina si domeniul (numele site-ului) paginii tinta, codul HTML se va scrie, de exemplu, asa:

<a href="http://nume_site/pagina" title="Titlu link">Nume</a>

2. Link-uri interne - sunt link-uri câtre alte texte din aceeasi pagina. Se folosesc când pagina respectiva este lunga si e nevoie sa se sara spre anumite texte din pagina. - Pentru creare de link-uri interne trebuie urmati urmatorii pasi:

1. Se scrie urmatorul cod la textul tinta, care marcheaza locatia unde se va face saltul si se afla in aceeasi pagina cu linkul
- <a name="cuvant">Textul tinta</a>
- - atributul "name" indica tinta pentru link, e un fel de semn care indica locatia.
- - "cuvant" poate fi orice cuvânt, trebuie sa fie unic pentru fiecare link.
- - "Textul tinta" este textul unde se face saltul. [*]2. In locul unde vrem sa fie link-ul (acolo unde o sa dam click pentru a face saltul câtre textul ales), se scrie urmatorul cod:
  - <a href="#cuvant">Nume</a>
  - - aici "cuvant" este acelasi text scris la pasul 1.
- Link-urile interne si externe pot fi combinate. Astfel putem face saltul câtre un anumit text aflat intr-o alta pagina. In pagina respectiva se scrie codul de la pasul 1, la textul ales pentru tinta link-ului, iar in pagina in care va fi link-ul se scrie:

<a href="adresa_pagina#cuvant">Nume</a>

Un alt exemplu ar fi , saltul in topul pagini printr-un click atunci cand pagina are un scroll foarte mare.Acest exemplu este folosit la paginile de tutoriale , paginile unde este scris un text foarte lung , sau o sectiune de FAQ , sa scrii Intrebarea si sa te duca direct la raspuns. Urmati exemplul de mai jos !

<html><head><title>titlu documentului</title></head><body><div id="top">Top</div><br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br>Addicted Top<br><a href="#top">Click pentru Top-ul paginii !</a></body></html>[/code]

October 9, 2011

Harti de imagini

Hartile de imagini sunt parti din aceeasi imagine care este "impartita" in mai multe zone, apoi in functie de zona pe care se executa click, browserul poate afisea o alta pagina.

De exemplu, pe un site dedicat turismului am putea avea pe pagina principala o imagine care reprezinta harta tarii (in care definim zonele dupa conturul judetelor); in cazul unui click pe zona Brasov se incarca o pagina care descrie diverse obiective turistice din judetul Brasov, iar un click pe o alta zona de judet ar duce la alta pagina care descrie obiectivele turistice din acel judet.

O harta de imagini ar putea fi folosita si pentru navigarea in cadrul unui site: daca avem mai multe butoane de navigare grupate, se poate folosi o imagine care reprezinta toate acele butoane - mai multe imagini se incarca mai incet decat o imagine cu dimensiunea egala cu suma celorlalte (in kb) deoarece comunicarea cu serverul (cand se cere imaginea) se face o singura data.

Pana aici am prezentat numai avantaje; dezavantajul major este ca un vizitator care are browserul setat sa nu incarce imagini pentru a naviga mai repede nu va vedea imaginea si nu va intelege mai nimic (putem totusi folosi marcajul "alt" de specificare a textului alternativ pentru imagini). Totusi acest lucru este foarte rar.

Crearea hartii de imagini

Pentru formarea unei harti de imagini, se adauga in interiorul tag-ului "

<img>

" atributul "

usemap

" a carui valoare reprezinta numele hartii, apoi se incepe formarea hartii prin elementul:

<map name="nume_harta"> </map>

- unde pt. "nume_harta" a atributului "name" se foloseste acelasi cuvant adaugat la "usemap"

- in cadrul acestuia se adauga elemente

<area atribute>

- acestea definesc zonele hartii imaginii si forma acestora (prin valorile atributelor),

- numarul de elemente "AREA" reprezinta numarul de suprafete (cu link-uri specifice) in care este "impartita" imaginea.

In urmatorul exemplu puteti vedea forma generala a creari unei "harti de imagini" (cu 2 cadre), URL poate fi orice adresa de site sau pagina a site-ului curent:

<img src="poza.jpg" usemap="#map1">
<map name="map1">
<area shape="rect" coords="9, 120, 56, 149" href="url">
<area shape="rect" coords="100, 200, 156, 249" href="url">
</map>

In codurile de mai jos puteti vedea atributele si descrierea acestora !

Instructiune<map atribute >< / map >Atributename = "nume_harta"Descrierename = "nume_harta"  numele hartii de imagine (corespunzator atributului USEMAP al marcajului <IMG>)

Instructiune<img atribute>Atribute[/b]ismap[/b]usemap="nume_harta"lowscr = "url"Descriereismap - specifica faptul ca este o harta de imagine pe server (se foloseste mai rar; de obicei folosim harti de imagine la client)usemap="nume_harta" -  specifica harta de imagine la clientlowscr = "url" -  imaginea de rezolutie scazuta care se incarca prima (doar pentru Netscape) [/code]

[code]Instructiune<area atribute >Atributeshape = "forma"coords = "coordonate"href = "=url="alt = "text"Descriereshape = "forma" - forma regiunii: rect sau rectangle (dreptunghi), circle sau circ (cerc), point (punct), poly sau polygon (poligon)coords = "coordonate" - coordonatele unei regiuni (in pixeli); se calculeaza in functie de coltul din stanga sus al imaginii (care are coordonatele (0, 0), adica x = 0, y = 0); variaza in functie de SHAPE = forma regiunii:- pentru rect (dreptunghi) se dau coordonatele celor 4 colturi sau a celor din stg. sus si dr. jos ale regiunii- pentru circ (cerc) se dau coordonatele centrului cercului si raza- pentru point (punct) se dau coordonatele punctului- pentru poly (poligon) se dau coordonatele colturilor poligonuluihref = "=url=" - URL - ul asociat regiunii specificate din cadrul imaginii; in cazul unui clic pe acea regiune se incarca pagina specificata prin URLalt = "text" - textul asociat regiunii specificate din cadrul imaginii; apare plasand mouse-ul deasupra regiunii respective sau celor cu browserul setat sa nu incarce imagini[/code]

Un model pentru o harta arata cam asa !

[CODE]<div align="center"><img src="image_map.gif" alt="Harta de imagini" border="0" width="300" height="300" usemap="#map1"><map name="map1"> <area href="link1.php" alt="Link 1" title="Link 1" shape="rect" coords="6,116,97,184"> <area href="link2.phpl" alt="Link 2" title="Link 2" shape="circle" coords="251,143,47"> <area href="link3.phpl" alt="Link 3a" title="Link 3" shape="poly" coords="150,217, 190,257, 150,297,110,257"></map></div>[/code]

October 9, 2011

Lucru cu tabele

Tabelele sunt elemente foarte utile pentru asezarea si prezentarea continutului intr-o pagina web.

1. Crearea de tabele

Pentru a crea tabele in paginile web se foloseste elementul

<table> ... </table>

, acesta incadreaza alte patru sub-elemente, care alcatuiesc structura tabelului.

- Linia (randul) Tabelului <tr> ... </tr>
- Titlul Tabelului <th> ... </th>
- Coloanele tabelului (datele) <dt> ... </dt>
- Sub-titlu tabelului <caption> ... </caption>

Linia tabelului de obicei contine elementul pentru titlurile tabelului si elementul pentru coloanele tabelului.

In cadrul elementelor pentru titluri si coloanele tabelului se pot adauga si alte elemente HTML, cum ar fi cele pentru formatul textului, paragrafe, link-uri sau imagini

Mai jos puteti vedea un exemplu de cod HTML pentru crearea unui tabel:

<table border="1"><tr>	<th>titlu 1</th>	<th>titlu 2</th></tr><tr>	<td>linia 2- coloana 1</td>	<td>linia 2- coloana 2</td></tr><tr>	<td>linia 3- coloana 1</td>	<td>linia 3- coloana 2</td></tr><tr>	<td>linia 4- coloana 1</td>	<td>linia 4- coloana 2</td></tr></table>

2. Atributele Tabelului

- bgcolor = defineste culoarea tabelului
- width = specifica lungimea tabelului (In pixeli sau procente din lungimea paginii)
- border = grosimea liniei (in pixeli) ce defineste tabelul si înconjoara fiecare celula
- cellspacing = spatiu dintre celule (in pixeli)
- cellpadding = spatiu dintre linia celulei si continutul acesteia (in pixeli)
- align = controlează poziţionarea tabelului in pagina, cu următoarele atribute : left, right, sau center
- background = controleaza culoarea de fond a tabelului, care poate fi si o imagine
- bordercolor = culoarea liniei din jurul tabelului
- bordercolorlight = culoarea luminoasa folosita de doua linii din cele patru care înconjoara tabelul
- bordercolordark = culoarea întunecata folosita de doua linii din cele patru care înconjoara tabelul

Sub-titlu tabelului - Sub-titlu tabelului "caption" permite specificarea unei linii de text care va aparea deasupra sau sub tabel, acest lucru este definit de atributul "align" care poate lua valorile: top (deasupra) bottom (jos) Exemplu:

<table border="1" cellpadding="2"><caption align="bottom">acesta este textul</caption><tr>    <th>titlu 1</th>    <th>titlu 2</th></tr><tr>    <td>linia 2- coloana 1</td>    <td>linia 2- coloana 2</td></tr></table>[/code]


 

 

[b]	3. Atributele specifice elementelor pentru titlu si coloane[/b]

- [b]colspan[/b] = specifica cat de multe coloane ale tabelului aceasta celula va inlocui
- [b]rowspan[/b] = specifica cat de multe randuri ale tabelului aceasta celula va inlocui
- [b]align[/b] = alinierea datelor celulei pe orizontala ([b]left, right[/b] sau [b]center[/b])
- [b]valign[/b] = alinierea datelor celulei pe verticala ([b]top, middle[/b] sau [b]bottom[/b])
- [b]background[/b] = controleaza culoarea de fond a celulei, care poate fi si o imagine
- [b]bgcolor[/b] = defineste culoarea celulei ([i]dar nu imagine[/i])
- [b]width[/b] = specifica lungimea celulei (In pixeli sau procente din lungimea paginii)
- [b]height[/b] = specifica inaltimea celulei (In pixeli sau procente din inaltimea paginii)

in urmatorul exemplu puteti vedea rezultatul folosirii atributelor: "colspan" "rowspan" si "bgcolor"

[CODE]<table border="1" cellpadding="2"><caption align="bottom">acesta este textul</caption><tr> <th>titlu 1</th> <th>titlu 2</th></tr><tr> <td colspan="2">linia 2- coloana 1</td></tr><tr> <td rowspan="2">linia 3- coloana 1</td> <td>linia 3- coloana 2</td></tr><tr> <td bgcolor="#adadff">linia 4- coloana 2 - colorat</td></tr></table>[/code]

[b][color=#ff0000]NOTE ! [i]Exersati singuri si alte exemple de tabele, cu mai multe randuri si coloane.[/i][/color][/b]

October 9, 2011

Utilizarea cadrelor

Cadrele, sau frame-uri, sunt folosite pentru impartirea ferestrei browser-ului astfel incat sa fie afisate mai multe pagini in aceeasi fereastra de browser.

Un frame (cadru) este o parte din suprafata ferestrei browserului.

Fiecare frame prezinta în interior un document propriu (in general un document HTML). De exemplu puteti creea doua cadre intr-o fereastra, in primul cadru puteti incarca un document HTML (ex. doc1.htm) iar in al doilea cadru un alt document HTML, de la alta adresa (ex. doc2.htm)

Dupa cum puteti vedea in imaginea de mai jos.

Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML:

<frameset> si <frame> sau <iframe>

1. Configurarea cadrelor

Pentru inceput se adauga un element

<FRAMESET>

...

</FRAMESET>

in interiorul documentului HTML, în sectiunea HEAD.

<FRAMESET>

determina cat din spaţiul ferestrei este atribuit fiecărui cadru, folosind atributele ROWS sau COLS care impart ecranul in Linii sau Coloane.

Acesta va conţine elemente

<FRAME>

, cate unul pentru fiecare divizare a ferestrei din browser.

ROWS

Determina numarul de linii si marimea cadrelor care vor fi asezate in linie, începând de sus.
Pot fi folosite urmatoarele valori:
- - pixeli absoluti ; ex : "360,120"
  - procente din inaltimea ecranului ; ex : "75%,25%"
  - valori proportionale, folosind (*). Acesta putând fi combinat cu procente sau pixeli. Ex : "120,*" sau "30%,*"

COLS

Determina numarul de coloane si marimea cadrelor care vor fi asezate pe coloane, începând din stanga.
Pot fi folosite urmatoarele valori:
- - pixeli absoluti ; ex : "380,120"
  - procente din lungimea ecranului ; ex : "33%,77%"
  - valori proportionale, folosind (*). Acesta putând fi combinat cu procente sau pixeli. Ex : "120,*" sau "30%,*"

Alte atribute ale elementului <FRAMESET>

FRAMEBORDER - Stabileste afisarea sau nu a unei borduri in jurul cadrelor. Posibile valori: 0, 1 sau YES, NO.
FRAMESPACING - Acest atribut este specificat in pixeli. Daca FRAMEBORDER este 0 atunci si acesta trebuie sa aiba valoarea 0
BORDER - Marginea cadrelor. Valori posibile: 0 sau 1
BORDERCOLOR - Acest atribut permite sa alegi culoarea bordurii.

Elementul <FRAME>

Acest element defineste un singur cadru , este scris in interiorul elementului <FRAMESET>
Pentru fiecare cadru trebuie scris cate un element <FRAME>
Acesta are urmatoarele atribute:
- SRC - Aici trebuie scrisa adresa si numele paginii folosite pentru cadru
- NAME - Aici trebuie scris numele de identificare al cadrului.
- MARGINWIDTH - Atribut optional, valoare in pixeli. Determina spatiul orizontal dintre continutul cadrului si marginea acestuia
- MARGINHEIGHT - Atribut optional, valoare in pixeli. Determina spatiul vertical dintre continutul cadrului si marginea acestuia.
- SCROLLING - Afiseaza un Scroll Bar in cadru. Valori posibile: YES (permite afisarea Scroll Bar-ului), NO (nu va fi prezentat nici un Scroll Bar) si AUTO (browser-ul va decide daca este nevoie de Scroll Bar. Aceasta valoare este cea mai indicata)
- NORESIZE - Optional, impiedica utilizatorul sa modifice marimea cadrului, prin selectarea marginii acestuia si mutarea in stânga sau dreapta ori sus sau jos.

Mai jos puteti vedea cum poate fi creata o pagina HTML care sa contina doua cadre, cel din stânga ocupând 23% din spatiul paginii iar cel din dreapta 77%

<HTML><HEAD><TITLE> TITLU PAGINII </TITLE></HEAD><FRAMESET COLS="23%,77%"><FRAME SRC="doc1.htm" NAME="left" SROLLING="NO"><FRAME SRC="doc2.htm" NAME="right" SROLLING="YES"></FRAMESET><BODY></BODY></HTML>

De asemenea se poate crea un design de cadre cu o combinatie de linii si coloane. In acest caz, un al doilea element "<FRAMESET>" va fi scris in locul elementului "<FRAME>" care descrie a doua linie. Al doilea element <FRAMESET> va divide spatiul ramas in doua coloane. Pentru aceasta, al doilea element "<FRAMESET>" trebuie urmat de inca doua elemente "<FRAME>" - Pentru o mai buna intelegere puteti studia exemplu de mai jos, care creaza o pagina ce contine trei cadre:

<HTML><HEAD><TITLE> TITLU PAGINII </TITLE></HEAD><FRAMESET COLS="120,*"><FRAME SRC="baner.htm"><FRAMESET COLS="120,*"><FRAME SRC="Meniu.htm" NAME="meniu"><FRAME SRC="Continut.htm" NAME="date"></FRAMESET></FRAMESET><BODY></BODY></HTML>[/code]

[/left]

[b] 2. Atributul target[/b]

[font=Calibri, Arial, sans-serif][size=4][indent=1]Cand sunt create link-uri care sunt folosite pentru a deschide pagini in cadre, este nevoie de specificarea unui atribut in eticheta de link "[b]<a>[/b]" numit [b]target[/b], acesta spune browser-ului in ce cadru sa deschida pagina.

Atributul [b]target[/b] foloseste ca valoare textul din atributul [b]NAME[/b] al elementului [b]FRAME[/b] in care se va deschide noua pagina.

De exemplu, daca avem un link in [b]Meniu.htm[/b] care vrem sa deschidă pagina [b]Doc3.htm[/b] in spaţiul in care se afla celalat cadru, de exemplu [b]Continut.htm[/b]; codul HTML pentru link va arata astfel in [b]Meniu.htm[/b]:[/size][/font][/indent]

[b]<a href="Doc3.htm" target="numele cadrului Continut.htm"> Numele link-ului </a>[/b]

- daca nu se specifica atributul TARGET , pagina se va deschide in cadrul curent

- atributul TARGET trebuie sa aiba acelasi nume specificat in codul HTML, ca si atributul NAME din FRAME-ul in care se doreste afisarea paginii.

[u]Special Target:[/u]

Sunt 4 nume speciale de TARGET, care nu pot fi asociate cu atributul NAME. Fiecare are o functie speciala.
[b]target="_top"[/b]
[list]
- acesta va încarca link-ul in toata fereastra browser-ului, disparând astfel cadrele.

[*][b]target="_blank"[/b]

- acesta va încarca link-ul intr-o noua fereastra de browser, astfel ramanand deschisa si vechea fereastra.

[*][b]target="_self"[/b]

- acesta va încarca link-ul in aceeasi fereastra de unde a fost actionat.

[*][b]target="_parent"[/b]

- cadrul "_parent" este cadrul anterior de la care a fost deschis noul cadru, daca acesta nu exista atunci link-ul se va deschide in actuala fereastra de browser.

[/list]

[b] 3. Adaugarea cadrelor iframe[/b]

[font=Calibri, Arial, sans-serif][size=4][indent=1]Pentru crearea unui cadru cu "<iframe>" puteti folosi, ca exemplu, urmatoarea sintaxa (aceasta se adauca in sectiunea BODY, in locul unde doriti sa apara frame-ul):[/size][/font][/indent]

[b]<iframe src="url_pagina" width="600" height="200" align="center" scrolling="yes" frameborder="0" name="nume_frame"> </iframe>[/b]

- Unde "[b]iframe[/b]" este elementul principal care indica adaugarea unui frame in pagina.

- "[b]url_pagina[/b]" e adresa paginii care va fi incarcata in iframe, "[b]width[/b]" si "[b]height[/b]" reprezinta lungimea respectiv inaltimea cadrului (exprimata in procente sau pixeli), "[b]scrolling[/b]" reprezinta permisiunea de derulare a paginii din cadru ([i]yes[/i] sau [i]no[/i]), "[b]frameborder[/b]" specifica daca va fi sau nu afisata o margine (bordura) pentru cadru (1=da, 0=nu), iar "[b]nume_frame[/b]" este numele cadrului (necesar pentru atributul "TARGET" in link-uri sau cand frame-ul este folosit de JavaScript).

October 9, 2011

Crearea formularelor

De cele mai multe ori formularele HTML sunt create pentru a fi folosite impreuna cu alte programe si scripturi web, cum sunt PHP, JavaScript si altele.

1. Tag-ul FORM

Pentru a crea un formular in HTTML se foloseşte elementul

<form> ... </form>

, in cadrul acestuia se vor adauga celelalte elemente specifice.

Elementul <form> ... </form> nu contine atribute pentru format, foloseste insa urmatoarele atribute:

action - aici se scrie adresa URL a unui script de pe server (de obicei PHP sau CGI), program care trebuie sa accepte datele din FORM , le proceseaza si trimite înapoi raspunsul la browser.
method - aici putem scrie get , sau post. Aceste valori specifica ce metoda HTTP va fi folosita pentru a trimite continutul formularului la server.
enctye - determina mecanismul folosit pentru a codifica continutul transmis din formular.
name - Este numele formularului, folosit de scripturi PHP , VB (Visula Basic) sau JavaSript.
target - Este tinta cadrului (frame) unde pagina va fi vizualizata, dupa transmiterea datelor din form.

2. Elementele de formular

In continuare sunt prezentate restul elementelor de formular care sunt folosite pentru a crea diferite campuri, casete, butoane in pagina web, necesare pentru a aduna datele care vor fi trimise la aplicatie pe server.

Cele mai multe se creaza prin atributul type al elementului <input> ... </input>

Proprietatile elementului <input> ... </input>

type - tipul de FORM folosit (caseta text, buton si altele ...)
name - numele elementului respectiv de formular, folosit de scripturile la care sunt trimise datele
value - datele (valoarea) asociate acelui element de formular si care sunt trimise, impreuna cu numele, catre scripturi (PHP, CGI, JavaScript)
size - specifica numarul de caractere care dau lungimea zonei de text
maxlength - numarul maxim de caractere acceptate
checked - specifica daca un buton sau alta forma va fi initial selectata (bifata).
readonly - folosit pentru campuri de tip text, impedica modificarea valorii (textului) din acel camp
disabled - impedica folosirea campului care are aceasta proprietate. Va fi vizibil dar nu va putea fi folosit, datele acestuia nu vor fi trimise din formular la vreun script.

Casete de text

- este folosit pentru a crea in pagina un camp pentru text (cu o singura linie).

Codul este :

<input type="text"></input>

- Acest element foloseste urmatoarele atribute:

type - text
name - numele casutei de text, folosit de scriptul la care sunt trimise datele
value - va reprezenta propriul context ca valoare aleasa. Un sir de text care apare in casuta de text
size - specifica numarul de caractere care dau lungimea casutei de text (default 20)
maxlength - numarul maxim de caractere acceptate sa fie adaugate de utilizator

Camp textarea

- "textarea" este un element ce creaza un camp in pagina, in care utilizatorul poate adauga mai multe linii de text.

Codul este:

<textarea;></textarea>

[/code]

[/indent]

[indent=1]

- Acest element foloseste urmatoarele atribute:

[/indent]

[b]
name
[/b]
- numele campului de text, folosit de scriptul la care sunt trimise datele
[b]
rows
[/b]
- numarul de linii a zonei de text
[b]
cols
[/b]
- numarul de coloane a zonei de text
[b]
wrap
[/b]
- standard este OFF. Dar poate avea valorile : "VIRTUAL" sau "PHYSICAL", astfel ca textul wraps in browser sa fie prezentat exact cum este scris de utilizator.

[indent=1]

[b]

Casete pentru parole

[/b]

[/indent]

- "
[i]
password
[/i]
" este folosit pentru a permite adaugarea de parole. Caracterele adaugate in aceasta caseta nu sunt afisate cu valoarea lor reala, pentru a nu se vedea parola scrisa.

[indent=1]

Codul este:

[/indent]

[indent=1]

[code]

[/code]

[/indent]

[indent=1]

Acest element foloseste urmatoarele atribute:

[/indent]

[b]
type
[/b]
- password
[b]
name
[/b]
- numele casutei pentru parole, folosit de scriptul la care sunt trimise datele
[b]
value
[/b]
- de obicei nu este adaugat. Daca este scris, va reprezenta parola default din acea caseta.
[b]
size
[/b]
- specifica numarul de caractere care dau lungimea casutei pt. adaugarea parolei (default 20)
[b]
maxlength
[/b]
- numarul maxim de caractere acceptate sa fie adaugate de utilizator

[indent=1]

[b]

Casete de formular ascunse

[/b]

[/indent]

- "
[i]
hidden
[/i]
" este folosit pentru a adauga in formular date care sa nu fie vizibile in browser si care sunt trimise la scripturi impreuna cu celelalte date din formular.
- Codul este
[b]
<input type="hidden"></input>
[/b]
- Acest element foloseste urmatoarele atribute:
[list]
[b]
type
[/b]
- hidden
[b]
name
[/b]
- numele casutei ascunse, folosit de scriptul la care sunt trimise datele
[b]
value
[/b]
- valoarea care se doreste sa fie transmisa prin acea caseta ascunsa.

[/list]

[indent=1]

[b]

Check box

[/b]

[/indent]

- este folosit pentru adaugarea mai multor optiuni pe care utilizatorul le poate alege (oricate din ele) prin bifarea lor

[indent=1]

Codul este:

[/indent]

[indent=1]

[b]

[/b]

[/indent]

[indent=1]

- Acest element foloseste urmatoarele atribute:

[/indent]

[b]
type
[/b]
- checkbox
[b]
name
[/b]
- numele casutei checkbox, folosit de scriptul la care sunt trimise datele
[b]
value
[/b]
- valoarea casetei checkbox respective, care poate fi selectata (bifata)
[b]
checked
[/b]
- daca este adaugat acest atribut, caseta checkbox respectiva este selectata (bifata).

[indent=1]

[b]

Radio button

[/b]

[/indent]

- este folosit pentru adaugarea mai multor optiuni dintre care utilizatorul poate alege una singura

[indent=1]

Codul este:

[/indent]

[indent=1]

[code]

[/code]

[/indent]

[indent=1]

- Acest element foloseste urmatoarele atribute:

[/indent]

[b]
type
[/b]
- radio
[b]
name
[/b]
- numele casutei radio, folosit de scriptul la care sunt trimise datele
[b]
value
[/b]
- valoarea casetei radio respective, care poate fi selectata (bifata)
[b]
checked
[/b]
- daca este adaugat acest atribut, caseta radio respectiva este selectata (bifata).

[indent=1]

[b]

Casete pentru upload

[/b]

[/indent]

- "
[i]
file upload
[/i]
" este folosit pentru a permite utilizatorului sa incarce alte documente pe serverul web. Aceasta caseta este insotita de un buton "Browse" prin care se alege documentul care va fi transferat pe server. (upload-ul se face tot prin intermediul unui script (PHP, CGI)

[indent=1]

Codul este:

[/indent]

[indent=1]

[code]

[/code]

[/indent]

[indent=1]

- Acest element foloseste urmatoarele atribute:

[/indent]

[b]
type
[/b]
- file
[b]
name
[/b]
- numele casutei upload, folosit de scriptul la care sunt trimise datele
[b]
size
[/b]
- specifica numarul de caractere care dau lungimea casutei upload.

[indent=1]

[b]

Buton simplu

[/b]

[/indent]

- acesta este folosit cu JavaScript sau VBScript pentru a efectua o actiune când este apasat

[indent=1]

Codul este:

[/indent]

[indent=1]

[b]

[code]

[/code]

[/b]

[/indent]

[indent=1]

- Acest element foloseste urmatoarele atribute:

[/indent]

[b]
type
[/b]
- button
[b]
name
[/b]
- numele butonului, necesar pentru a fi folosit de script
[b]
value
[/b]
- textul care apare pe buton.

[indent=1]

[b]

Buton Submit

[/b]

[/indent]

- acest element face ca prin apasarea lui browser-ul sa trimita numele si valoarea tuturor celorlalte elemente din formular la scriptul de pe server

Codul este:

[code]

[/code]

Acest element foloseste urmatoarele atribute:

[b]
type
[/b]
- submit
[b]
name
[/b]
- numele butonului, poate fi folosit de scriptul la care se trimit datele
[b]
value
[/b]
- textul care apare pe buton.

[indent=1]

[b]

Imagine pentru buton Submit

[/b]

[/indent]

- permite aplicarea unei imagine in locul butonului Submit standard
- Codul este
[b]
<input type="image" src="locatie_imagine"></input>
[/b]
- Acest element foloseste urmatoarele atribute:
[list]
[b]
type
[/b]
- image
[b]
name
[/b]
- numele butonului, poate fi folosit de scriptul la care se trimit datele
[b]
src
[/b]
- locatia imaginii folosite.

[*]

[b]

Buton Reset

[/b]

- permite utilizatorului sa stearga toate datele pe care le-a scris in celelalte elemente din formular

[*]

Codul este:

[/list]

[indent=1]

[code]

[/code]

[/indent]

[indent=1]

- Acest element foloseste urmatoarele atribute:

[/indent]

[b]
type
[/b]
- reset
[b]
value
[/b]
- textul care apare pe buton.

[indent=1]

[b]

Elemente select

[/b]

[/indent]

- pentru acest element se foloseste tag-ul "
[b]
<select></select>
[/b]
", care formeaza o lista, un meniu, cu date ce pot fi selectate.
- Atributete elementului "<select>" sunt:
[list]
[b]
name
[/b]
- numele acestui element, necesar pentru a fi folosit de scriptul la care sunt trimise datele
[b]
size
[/b]
- seteaza inaltimea elementului Select, care reprezinta si numarul de optiuni din lista care vor fi vizibile initial
[b]
multiple
[/b]
- prezenta acestui atribut specifica faptul ca utilizatorul poate selecta mai multe optiuni.

[*]

- "

[b]

[/b]

" este folosit impreuna cu elemente "

[b]

[/b]

" care reprezinta lista elementelor ce sunt adaugate si afisate in lista de selectare.

[*]

-

[b]

[/b]

foloseste doua atribute:

[b]
selected
[/b]
- cand acesta este adaugat, optiunea respectiva este selectata când pagina web este initial incarcat. Cand sunt adaugate mai multe optiuni, este indicat folosirea acestui atribut doar cu una singura.
[b]
value
[/b]
- specifica valoarea variabilei numita in optiunea respectiva (necesara pt. scriptul care va primi datele).

[*]

- sunt doua tipuri de elemente Select, unde diferenta o face folosirea atributului SIZE

[*]

- Cele doua tipuri de elemente Select sunt:

[*]

[b]

1. Drop Down List

[/b]

(

[i]

Lista de derulare

[/i]

)

[/list]

[indent=1]

Codul este:

[/indent]

[indent=1]

[code]

<select name="select"> <option>Optiune 1</option> <option>Optiune 2</option></select>

[/code]

[/indent]

[indent=1]

- unde "name" este atributul care defineste numele acestui tag SELECT, iar "<option>" impreuna cu "

[i]

Optiune 1

[/i]

" (si 2) reprezinta elementele din lista de selectare.

[/indent]

[indent=1]

[b]

2. List Box

[/b]

[/indent]

[indent=1]

[b]

Codul este:

[/b]

[/indent]

[indent=1]

[b]

[CODE]

<select name="select" size="4"> <option>Optiune 1</option> <option>Optiune 2</option></select>

[/code]

[/b]

[/indent]

Unde "name" este atributul care defineste numele acestui tag SELECT, atributul "size" determina inaltimea elementului select care determina si numarul de optiuni vizibile initial, iar "<option>" impreuna cu "

[i]

Optiune 1

[/i]

" (si 2) reprezinta elementele din lista de selectare.

October 10, 2011

Elemente speciale meta, embed, marquee, object

Codul HTML contine si anumite elemente speciale, unele folosite pentru optimizarea paginii in vederea unei cat mai bune indexari in motoarele de cautare sau altele pentru adaugarea de aplicatii audio si video ori alte elemente in pagina.

1. Elemente pentru optimizarea indexarii paginii

Aceste elemente de optimizare se adauga in sectiunea HEAD a documentului HTML.

Cel mai important este tag-ul

<title></title>

Alte elemente importante pentru motoarele de cautare sunt cele META, (numite si "meta tag-uri), acestea au 2 atribute:

name

(care determina tipul meta tag-ului) si

content

(care determina continutul meta tag-ului).

In continuare sunt prezentate exemple de meta tag-uri care sunt indicate sa fie adaugate in fiecare pagina HTML:

<meta content="text/html; charset=UTF-8" http-equiv=Content-Type>

- indica browserului ca este un fisier HTML
- charset stabileste tipul de caractere (in general se foloseste ISO-8859-1 sau UTF-8), dar exista si altele.

<meta name="description" content="O fraza care descrie pe scurt continutul paginii">

- in cazul unei cautari dupa cuvinte-cheie, motorul de cautare ne da o lista de pagini; pentru fiecare pagina (site) din lista apare titlul ei (dat cu marcajul TITLE) urmat de o fraza (cea de la
name="description" content="o fraza care descrie ..."
); daca nu avem in marcajul META acea fraza, motorul va indexa dupa prima fraza din pagina; tot ea va fi data la o eventuala cautare.
- textul adaugat cu acest tag pentru descriere are prioritate inaintea frazelor din continut. (folositi maxim 40, 50 caractere).

<meta name="keywords" content="lista, de cuvinte, separate, prin, virgula">

- motoarele de cautare tin cont de cuvintele din meta "keywords" in momentul indexarii site-ului pentru atunci cand sunt afisate rezultate de cautari. (folositi maxim 15-20 cuvinte).

<meta name="author" content="numele dvs., e-mail, etc">

- acesta nu este neaparat necesar, dar nu strica sa-l folositi. Arata autorul documentului.

Recomandare:

Cuvintele din tag-ul <title> ... </title> este bine sa se regaseasca si in meta tag-urile "keywords", "description" cat si in titlurile din continutul paginii.

Un alt meta tag care este cateodata necesar, dar nu are legatura cu motoarele de cautare, este "Refresh", acesta are urmatoarea forma:

<meta http-equiv="Refresh" content="4;url=http://www.nume_site/pagina">

- acesta determina browser-ul sa incarce o noua pagina, cea care este adaugata la url-ul din acest tag (aici
http://www.nume_site/pagina
), dupa un anumit numar de secunde (aici 4). Practic, face un redirect.

2. Adaugarea de sunet la o pagina HTML

Pentru a adauga sunet intr-o pagina web, puteti folosi elementele <embed> sau <bgsound>:

1.

<bgsound></bgsound>

- introduce un background (fundal) audio in pagina, are urmatoarele atribute:

src - Defineste locatia fisierului audio folosit (midi .au sau wav)
loop - defineste de cate ori se va repeta sunetul
delay - defineste timpul dintre repetari
title - Textul care va descrie sunetul.

Exemplu:

2.

<embed></embed>

- afiseaza o consola pentru sunet, are urmatoarele atribute:

src - Defineste locatia fisierului audio folosit (midi .au sau wav)
controls - ofera posibilitatea alegerii mai multor controale care includ: console, console mici, butoane de play si altele
autostart - cand este TRUE sunetul incepe in timp ce sunetul este descarcat de browser
hidden - cand este TRUE va ascunde controalele, standard este FALSE
loop - defineste de cate ori se va repeta sunetul
volume - seteaza volumul sunetului (sonorul)
height - inaltimea in pixeli a consolei
width - lungimea in pixeli a consolei.

Exemplu:

[/code]

[/indent]

[indent=1]

- Tag-ul "<embed>" poate fi folosit si pentru afisarea de imagini video, care au extensiile ".movs", ".mpeg" sau ".avi", recomandat este ".movs". Se adauga similar ca si sunetul, la "

[b]

src

[/b]

" scriti calea catre fisierul video. Diferenta e ca nu trebuie folosit atributul "hidden" iar pentru "width" si "height" dimensiunile nu trebuie sa fie mai mici decat dimensiunile in care este salvat fisierul video. - Totusi, afisarea de imagini video necesita mai mult timp deoarece fisierele video au dimensiuni destul de mari. -- "<embed>" se foloseste si pentru adaugarea de imagini flash (cu extensia ".swf"), pentru aceasta este incadrat in alt element,

[b]

[/b]

-- Iata un exemplu de cod prin care puteti adauga imagini flash in pagina web:

[/indent]

[indent=1]

[code]

[/code]

[/indent]

[indent=1]

Unde "width" si "height" sunt dimensiunile cadrului in care este afisata imaginea flash, iar la atributele "value" si "src" se scrie calea catre fisierul ".swf" (trebuie scrisa aceeasi cale la ambele atribute).

[b]

-

[i]

Afisarea in pagina a elementelor cu EMBED necesita folosirea unui plug-in, care de cele mai multe ori, daca acesta nu este deja instalat, este ceruta automat incarcarea lui de catre browser

[/i]

[/b]

.

[/indent]

[b]

3. Elemente de animatie text

[/b]

[font=Calibri, Arial, sans-serif]

[size=4]

[indent=1]

HTML are un tag special,

[b]

[/b]

, prin care puteti crea un efect de miscare a unui text (sau imagine) care este incadrat de a cest element. Are urmatoarele atribute:

[/size]

[/font]

[/indent]

[b]
loop
[/b]
- defineste de cate ori se va misca textul
[b]
height
[/b]
- inaltimea in pixeli a zonei in care se misca textul
[b]
width
[/b]
- lungimea in pixeli a zonei in care se misca textul
[b]
bgcolor
[/b]
- culoarea zonei in care se misca textul
[b]
direction
[/b]
- directia de miscare (left, right, up, down) - (
[i]
stanga, dreapta, sus, jos
[/i]
)
[b]
behavior
[/b]
- defineste cum se va misca textul (scroll, slide, alternate)
[b]
scrolldelay
[/b]
- seteaza numarul, in milisecunde, intre refreshuri de miscare.

Exemplu de miscare pe orizontala:

[indent=1]

[code]

<marquee behavior="alternate" bgcolor="#00ffff" direction="right">Marquee text</marquee>

[/code]

[/indent]

[indent=1]

-

[i]

In loc de text poate fi folosit si o imagine, inlocuind textul (aici "Marquee text") cu tagul "<img> pentru imagine

[/i]

.

[/indent]

[b]

4. Includerea unei pagini HTML externe

[/b]

[font=Calibri, Arial, sans-serif]

[size=4]

[indent=1]

In afara de modalitatea cu folosirea tag-ului

[b]

[/b]

pentru afisarea in pagina web HTML a continutului din alta pagina HTML Ex.:

[b]

[i]

[/i]

[/b]

- exista si o alta solutie, data de tag-ul

[b]

[/b]

folosit cu atributele "

[b]

data

[/b]

" si "

[b]

type

[/b]

". Urmatorul cod HTML este sintaxa generala de afisare intr-o pagina web a continutului HTML aflat in alta pagina externa:

[/size]

[/font]

[/indent]

[font=Calibri, Arial, sans-serif]

[size=4]

[/size]

[/font]

[font=Calibri, Arial, sans-serif]

[size=4]

[indent=1]

[CODE]

[/code]

[/size]

[/font]

[/indent]

[font=Calibri, Arial, sans-serif]

[size=4]

[/size]

[/font]

[font=Calibri, Arial, sans-serif]

[size=4]

[indent=1]

- Avantajul utilizarii uneia din aceste 2 metode, pentru cei care fac site-uri doar cu HTML, este faptul ca acelasi continut HTML poate fi inclus in mai multe pagini din site, fiind scris o singura data. De exemplu, in cazul unui Meniu ce trebuie afisat in toate paginile site-ului; codul acestuia poate fi scris intr-un fisier special ("

[i]

meniu.html

[/i]

") apoi, cu una din formulele de mai sus (tag-ul "<iframe>" sau "<object>") se adauga in fiecare fisier al paginilor, iar la o eventuala modificare a meniului se va face doar in codul acestuia din "

[i]

meniu.html

[/i]

".

[/size]

[/font]

[/indent]

October 10, 2011

Stiluri CSS in HTML

Cu HTML 4.0 au aparut specificatiile pentru modele de stiluri, cunoscute ca Modele de Stiluri in Cascada (Cascading Style Sheets - CSS). Acestea ajuta la afisarea grafica si incadrarea continutului in pagina.

Cu alte cuvinte , HTML fara CSS este egal cu 0

Pana la acea data, forma, culoarea si marimea textului puteau fi date cu instructiunea "font" si cu atributele sale: "face", "color", "size".

Modelele de stiluri pot fi aplicate aproape oricarei etichete HTML, folosind proprietati si valori specifice codului CSS, unele din ele sunt prezentate in tabelul de jos al paginii.

Modelele de stiluri pot fi aplicate in mai multe moduri:

1. Intern - direct in eticheta HTML

- Pentru adaugarea unui STYLE intern la un element se foloseste atributul style urmat de proprietati si valori, folosind urmatoarea sintaxa:
- <element style="proprietate:valoare; proprietate:valoare;"></element>
[*]- Exemplu:

<h4 style="color:#ff1111;">Exemplu h4</h4>

2. In antetul (header-ul) fisierului

- In acest caz se adauga in sectiunea HEAD a documentului HTML urmatoarea sintaxa <style type="text/css"> ... </style>. Aceasta spune browser-ului ca sunt adaugate elemente de stil CSS.
- Aceasta metoda este utila cand se doreste folosirea acelorasi stiluri pentru mai multe elemente din pagina astfel sunt scrise o singura data si nu la fiecare element.
- Proprietatile si valorile de sti CSS se introdul in acest element STYLE, dupa cum puteti vedea in exemplul urmator:

<html><head><title>titlu</title><style type="text/css"></style></head><body>

[/indent]

</body></html>

[/code]

[/indent]

- Conform acestui cod, toate textele "h2" din pagina vor avea culoarea albastra si vor fi subliniate.
-
[i]
Se foloseste (optional) "" pentru browserele care nu recunosc elementul "<style>" si astfel il ignora
[/i]
.

[b]

3. Extern

[/b]

- Aici proprietatile si valorile pentru diverse stiluri sunt specificate intr-un fisier extern special, de obicei cu extensia "css" (pe care il putem construi cu un editor de simplu texte gen Notepad).
- Avantajul folosirii fisierelor externe CSS este faptul ca aceleasi coduri de stil pot fi folosite de mai multe pagini din site, chiar tot site-ul, fiind scrise o singura data. In plus ajuta la micsorarea ca marime (in bytes) a documentului HTML care astfel se incarca mai repede.
- In fisierul extern CSS se scriu direct elementele cu proprietatile si valorile dorite, NU se mai adauga eticheta "
[i]
style
[/i]
".
Exemplu de model pentru creare unui fisier ".css" :
Se scrie intr-o pagina noua, deschisa cu NotePad, urmatoarele, si se salveaza fisierul cu extensia ".css"

[indent=1]

[code]

a:link { color:#0000ff; text-decoration:none; font-weight:normal; font-size:15px; font-family: Arial;}a:visited { color:#008080; text-decoration:none; font-weight:normal; font-size: 15px; font-family: Arial;}

[/indent]

a:active { color:#b54090; text-decoration:underline;}a:hover { color:#b54090; text-decoration:underline; font-weight:normal; font-size: 15px; font-family: Arial;}p { font-weight: normal; font-size: 11pt; line-height: 12pt; text-indent: 20px; font-family: Arial;}

[/code]

[/indent]

Pentru a adauga acest stil CSS intr-o pagina web, adaugati in sectiunea HEAD a documentului HTML care va folosi acel fisier cu stiluri, (
[i]
intre <head> ... </head>
[/i]
) urmatoarea comanda:
[list]
[b]
<link href="fisier.css" rel="stylesheet" type="text/css">
[/b]

[*]

- unde la "href" se scrie calea si numele fisierului css folosit.

[/list]

Se poate face chiar ca un anumit stil sa poata fi aplicat numai unei singure etichete HTML, iar altul sa poata fi aplicat mai multor etichete HTML de tipuri diferite. Pentru aceasta se foloseste atributul

[b]

id

[/b]

sau

[b]

class

[/b]

in interiorul etichetelor HTML la care vrem sa aplicam un anumit stil. Diferenta dintre

[b]

id

[/b]

si

[b]

class

[/b]

este faptul ca se poate folosi acelasi atribut "class" pentru mai multe elemente HTML, pe cand acelasi "id" se foloseste numai pentru un singur element HTML. Exemplu pentru "class"

[indent=1]

[code]

<html><head><title>Titlul</title><style type="text/css"></style></head><body><h2 class="cuvant">Text ...</h2><h3 class="cuvant">Alt text ... </h3></body></html>

[/indent]

[/code]

- In exemplu de sus, stilul creat poate fi folosit doar de elementele unde vom adauga comanda

[b]

class="cuvant"

[/b]

, celelalte elemente nefiind afectate.

[/indent]

[b]
Important: selectorul (aici "cuvant") in STYLE trebuie sa inceapa cu punct (.)
[/b]

[indent=1]

[b]

Exemplu pentru "id"

[/b]

[indent=1]

[b]

[code]

<html><head><title>Titlul</title><style type="text/css"></style></head><body><h2 id="idh">Text ...</h2><h2>Alt text ... </h2></body></html>

[/code]

[/b]

[indent=1]

- In acest exemplu, stilul creat pentru "idh" va fi folosit doar pentru primul element "h2" care contine '

[i]

id="idh"

[/i]

'

[b]
Important: Pentru stilurile definite de ID, selectorul (aici "idh") trebuie sa inceapa cu #.
[/b]

[i]

Incercati singuri aceste exemple pentru a vedea rezultatul

[/i]

.

[center]

[/center]

[left]

- Pentru aplicarea unui stil css asupra unei portiuni dintr-un text, se foloseste eticheta

[b]

[/b]

, ca in exemplu urmator:

[/left]

[left]

[CODE]

O fraza <span class="cls"> cu orice text</span> si caractere.

[/code]

[/left]

[left]

- in acest exemplu se pot aplica elemente de stil css clasei (.cls) care vor afecta doar portiunea de text inclusa intre tag-ul "<span>".

[/left]

[left]

Pentru mai multe informatii despre lucru cu stiluri CSS, studiati lectiile de la

[b]

[color=#ff0000]

[size=3]

[Css]Notiuni De Introducere Si Lectii

[/size]

[/color]

[/b]

[/left]

October 10, 2011

DIV si SPAN

Tag-urile

<div></div>

si

<span></span>

nu au efecte importante daca sunt folosite singure.

- Tag-ul DIV creaza sectiuni de blocuri in pagina, al caror forma si grafica de continut pot fi manipulate pentru fiecare separat. Are doar un singur atribut HTML, align (pt. aliniere pe orizontala) care poate avea urmatoarele valori: left (stanga), right (dreapta), center (centru), justify (distanta textului fata de margini egala).

- Tag-ul SPAN creaza posibilitatea modificarii separate a unei portiunii dintr-un context, putand fi folosit si ca o "classa" cu CSS. Singur nu are nici un efect vizual poropriu si nu foloseste nici un atribut HTML special.

Chiar daca folosite singure, DIV si SPAN nu au nici un efect major, in combinatie cu CSS pot crea aspecte grafice importante. Pentru aceasta, ambele pot folosi atributul style (cu proprietati CSS) ori atributele id sau class ca identificator pentru stiluri CSS.

1. Tag-ul DIV

Tag-ul

<div></div>

este unul din cele mai folosite elemente HTML, aceasta deoarece in combinatie cu proprietati CSS poate crea efecte grafice deosebite, iar in interiorul lui pot fi incluse oricare elemente HTML: tabele, formulare, marcatori, linii sau alte DIV-uri. Cadrul in care acestea sunt adaugate poate avea propriul fundal (background), lungime, inaltime si margini cu diferite linii.

Iata un exemplu in care avem 2 div-uri, unul contine un formular iar celalalt o lista "<ul></ul>", fiecare DIV cu proria culoare de fundal, dimensiuni stabilite si margini diferite.

<div style="width:250px; background:#aaee88; border:1px solid blue;">	<form action="" method="post">		Nume: <input type="text"></input><br>		E-mail:<input type="text"></input><br>		<input type="submit" value="Trimite"></input>	</form></div>Alt DIV<div style="width:180px; background:#88aafe; border:5px outset #888888;">	<ul>		<li>Linie 1</li>		<li>Linie 2</li>		<li>Linie 3</li>	</ul></div>

- In atributul "style" sunt specificate proprietatile CSS care stabilesc aspectul grafic al fiecarui DIV (lungime in pixeli, fundal si bordura) Un alt aspect important este si faptul ca putem pozitiona continutul din interiorul tag-ului <div> </div>oriunde in pagina, folosind proprietati CSS precum:

position - care poate lua valorile: static, relative, fixed sau absolute

margin

- care stabileste distanta dintre marginea cadrului sectiunii (blocul) DIV si elementele din jurul lui

Iata un exemplu in care, prin folosirea mai multor DIV-uri pozitionate suprapus, putem afisa in pagina un titlu cu aspect grafic deosebit. Codul este urmatorul

<div style="position:relative; font-size:21px;"> <div style="position:absolute; margin-top:-1; margin-left:-2; color:white;">Titlu - Exemplu</div> <div style="position:absolute; margin-top:1; margin-left:2; color:black;">Titlu - Exemplu</div> <div style="position:absolute; margin-top:0; margin-left:0; color:silver;">Titlu - Exemplu</div></div>

[/code]

[/indent]

[indent=1]

In acest exemplu avem un prim DIV cu atributul "style" in care avem o proprietate de pozitionare

[u]

relativa

[/u]

(

[i]

pt. a pozitiona toate celelalte elemente pe care el le incadreaza dupa contextul scris anterior

[/i]

) si o alta proprietate pentru marimea textului. In interiorul acestui DIV avem alte 3 div-uri, pozitionate

[u]

absolut

[/u]

si care incadreaza fiecare cate un text identic. Prin pozitionarea absoluta div-urile se suprapun, la o distanta stabilita de proprietatile "margin-top" si "margin-left", iar prin culoare diferita (cu proprietatea "color") data textului din fiecare "div"

[/indent]

[indent=1]

[i]

[b]

- Pentru a folosi tag-urile DIV eficient si cu rezultate deosebite este necesar sa cunoasteti proprietatile CSS de baza (pentru fonturi, pozitionare, margini, borduri, background) pe care le puteti invata la Cursul CSS din acest forum.

[/b]

[/i]

[/indent]

[b]

2. Tag-ul SPAN

[/b]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

Cu tag-ul

[b]

[/b]

puteti adauga stiluri grafice unei anumite portiuni dintr-un context. Pentru aceasta trebuie folosit impreuna cu proprietati CSS care pot fi adaugate printr-un atribut "

[b]

style

[/b]

" in interiorul etichetei "

[b]

<span>

[/b]

" (sau in foi de stil). Pentru a intelege mai bine, iata un exemplu in care se scoate in evidenta anumite cuvinte dintr-un text. Pentru aceasta incadram cuvintele respective intr-un tag SPAN caruia ii adaugam proprietatile dorite, ca in exemplul urmator.

[/size]

[/font]

[/indent]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

[font=Calibri, Arial, sans-serif]

[size=4]

[code]

Aceasta este o lectie din <span style="background:#88fe88; font-weight:bold;">Cursul HTML</span> de pe Addicted2.ro

[/code]

[/size]

[/font]

[/size]

[/font]

[/indent]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

[font=Calibri, Arial, sans-serif]

[size=4]

[font=Calibri, Arial, sans-serif]

[size=4]

- Am adaugat portiunea din context (

[i]

aici textul "Curs HTML"

[/i]

) intr-un tag SPAN pentru a-i putea aplica proprietatile grafice dorite si care nu afecteaza restul continutului. - Proprietatile adaugate in "style" sunt (

[i]

background:#88fe88;

[/i]

si

[i]

font-weight:bold;

[/i]

).

[/size]

[/font]

[/size]

[/font]

[/size]

[/font]

[/indent]

[indent=1]

Tag-ul SPAN poate fi folosit si ca o classa pentru CSS. Astfel, proprietatile adaugate elementului "

[b]

span

[/b]

" intr-o foaie de stil vor fi transferate tuturor elementelor din pagina care sunt incadrate in tag-uri "<span></span>".

[/indent]

Iata un exemplu

[code]

<html><head> <title>Titlul</title> <style type="text/css"> span { border:2px solid red; padding:1px; color:#1111fe; } </style></head><body><h4>Exemplu de <span>text cu eticheta SPAN</span> in interiorul frazei.</h4><ul> <li>Linia 1</li> <li><span> Linie 2, in span </span></li> <li>Linia 3</li> <li><span> Linie 4, in span </span></li> <li>Linia 5</li></ul></body></html>

[/code]

- Observati cum a fost adaugat elementul "span" in tag-ul "<style> </style>" din sectiunea HEAD a codului HTML. Acest element face referire la toate tag-urile "<span></span>" din document si le transmite aceleasi proprietati.

[b]

3. Diferenta dintre DIV si SPAN

[/b]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

- Diferenta dintre DIV si SPAN este faptul ca DIV incadreaza o sectiune din document

[u]

sub forma unui bloc

[/u]

iar SPAN incadreaza o portiune din context

[u]

sub forma de linii

[/u]

. Iata un exemplu din care se poate intelege mai bine, atribuim aceeasi proprietate grafica (bordura rosie) unui tag DIV si unui tag SPAN.'

[/size]

[/font]

[/indent]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

[font=Calibri, Arial, sans-serif]

[size=4]

[CODE]

<div style="border:1px solid #fe1111;">Fraza pe mai multe linii, <br>continua cu linia a doua, <br>se termina cu linia a treia.</div><br>- Acum cu SPAN:<br><br><span style="border:1px solid #fe1111;">Fraza pe mai multe linii, <br>continua cu linia a doua, <br>se termina cu linia a treia.</span>

[/code]

[/size]

[/font]

[/size]

[/font]

[/indent]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

[font=Calibri, Arial, sans-serif]

[size=4]

[font=Calibri, Arial, sans-serif]

[size=4]

- Observati diferenta, modul in care este afisata bordura. Pentru DIV aceasta incadreaza exteriorul sectiunii (blocul) div-ului, iar pentru SPAN bordura este afisata pe fiecare linie.

- De aceea este indicata folosirea tag-ului "<span></span>" pentru continut din interiorul unei linii.

[/size]

[/font]

[/size]

[/font]

[/size]

[/font]

[/indent]

[indent=1]

[font=Calibri, Arial, sans-serif]

[size=4]

[font=Calibri, Arial, sans-serif]

[size=4]

[font=Calibri, Arial, sans-serif]

[size=4]

[font=Calibri, Arial, sans-serif]

[size=4]

- Cand aveti mai multe elemente

[b]

[/b]

si

[b]

[/b]

in pagina, este indicat folosirea atributului "

[b]

id

[/b]

" sau "

[b]

class

[/b]

". Acestora le acordati proprietati CSS o singura data in sectiunea HEAD sau intr-un fisier CSS extern. Este mai eficient decat sa scrieti in fiecare "<div>" si "<span>" cate un atribut "style".

Pentru mai multe detalii despre "ID" si "CLASS" folosite cu CSS, puteti studia prima lectie de la Cursul CSS

[/size]

[/font]

[/size]

[/font]

[/size]

[/font]

[/size]

[/font]

[/indent]

October 10, 2011

Si cu ultima lectie am incheiat "subiectul" HTML

Daca cititi si exersati cu atentie lectiile de mai sus , la final puteti spune ca aveti o baza foarte buna in ceea ce priveste limbajul de marcare HTML , atentie marcare nu PROGRAMARE , pentru ca html nu programeaza nimic doar ii da browserului o cale de a citi anumite informatii si de a le afisa asa cum dorim noi sau Designeri de pagini WEB

In continuare vom trece la un alt nivel legat de HTML si anume XTML un UPGRADE al acestui limbaj de marcare.

Lectii HTML postate de stafful Addicted pentru comunitatea Addicted.

Copyright Addicted2.ro

By Html

October 10, 2011

XTML - eXtensible HyperText Markup Language

October 10, 2011

De la HTML la XHTML

Explicatiile din acest tutorial sunt pentru cei care cunosc deja limbajul HTML, prezentat detaliat in lectiile si tutorialele precedente din acest curs.

XHTML (eXtensible HyperText Markup Language) are acelasi rol si capacitati ca HTML, fiind o varianta avansata a acestuia, dar cu o sintaxa putin diferita, mai stricta.

XHTML este un inlocuitor modern al HTML-ului, o combinatie intre HTML si XML, fiind aproape identic cu HTML 4.01.

Principala diferenta ce trebuie avuta in vedere la XHTML fata de HTML este la sintaxa acestuia.

Daca stiti deja limbajul HTML, respectand regulile de sintaxa XHTML, prezentate mai jos, se poate spune ca stiti si XHTML.

Reguli de sintaxa XHTML

1. - Pentru ca un document XHTML sa fie considerat valid, acesta trebuie sa aibe la inceput (prima linie) o declaratie !DOCTYPE, un DTD (Document Type Definitions) ce contine regulile standard ale elementelor din pagina.

Sunt 3 tipuri de DTD ce pot fi folosite: Strict, Transitional si Frameset. Iata cod-ul specifc fiecaruia, ce trebuie sccris in prima linie din pagina:

Strict - folosit pentru o sinntaxa stricta, fara vreun element ce nu e specific XHTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>

Transitional - este tipul cel mai comun si indicat. Acesta permite in pagina si elemente HTML ce nu sunt stricte XHTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/code]

[b]Frameset[/b] - mai putin folosit, acest tip e pentru cazuri cand in pagina se folosesc frame-uri.

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd";>[/code]

Dupa una din aceste declaratii se adauga codul pentru structura documentului XHTML, cum se vede in urmatorul exemplu ([i]structura standard ce trebuie sa o aibe o pagina de site XHTML[/i]):

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="ro"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Titlul paginii</title><meta name="description" content="Descrierea paginii" /><meta name="keywords" content="cuvinte, principale, din, pagina" /></head><body>Continutul paginii, care apare in fereastra navigatorului web.</body></html>[/code]

[b]2.[/b] - Toate elementele si atributele trebuie scrise cu litera mica.

[b]Corect:[/b] <div> [i][color=#ff0000][b]Incorect:[/b][/color] <DIV>[/i]
[b]Corect:[/b] <tag atribut="valoare"> [color=#ff0000] [/color][i][color=#ff0000][b]Incorect:[/b][/color] <tag [u]A[/u]tribut="valoare">[/i]

[b]3.[/b] - Valorile tuturor atributelor trebuie scrise intre ghilimele.

[b]Corect:[/b] <tag width="80">
[i][color=#ff0000][b]Incorect:[/b][/color] <tag width=80>[/i]

[b]4.[/b] - Spre deosebire de HTML, in care elementele sunt inchise cu un al doilea tag (identic) de inchidere, iar unele nici nu trebuie sa aibe inchidere, in XHTML toate elementele trebuie inchise si exista tag-uri specifice care au inchidere singulara, in acelasi tag.

[center] [/center]

[left]Celelalte, precum <p> </p>, <div> </div>, <span> </span>, ... etc. sunt la fel.

[b]5.[/b] - La inchiderea tag-urilor trebuie sa se respecte ordinea simetrica de deschidere.[/left]

[b]Corect:[/b] <b>Ceva <i>altceva</i></b>
[i][color=#ff0000][b]Incorect:[/b][/color] <b>Ceva <i>altceva[u]</b></i>[/u][/i]

[b]6.[/b] - Toate atributele trebuie sa fie insotite de o valoare. In HTML fiind atribute, precum "checked", care sunt scrise fara vreo valoare. Iata cateva din cele mai folosite:

[center] [/center]

[b]7.[/b] - Atributul [b]name[/b] din tag-urile <a> si <map> a fost inlocuit cu [b]id[/b].

October 10, 2011

XHTML - Tag-uri si atributele lor

In aceasta pagina gasiti o lista, clasificata pe grupe de elemente cu tag-urile XHTML si atributele ce po fi folosite pentru fiecare TAG.

Aceasta lista poate fi de folos mai ales cand doriti sa creati pagini web valide XHTML (Transitional), oferind o referinta la ce atribute pot fi folosite cu un anume TAG.

Structura

<html> </html> - Tag-ul radacina, ce contine toate celelalte tag-uri si indica browser-ului ca acesta este inceputul /sfarsitul documentului (X)HTML.xmlnsdirlangxml:lang<head> </head> - Contine meta informatii (meta-tags), tag-ul "<title> </title>" si alte tag-uri pt. scripturi si stiluri CSS. Toate acestea, cu exceptia Titlului, nu sunt afisate de navigatorul web.xml:langprofile<body> </body> - In acest tag se adauga continutul ce va fi afisat in pagina web. Acest continut poate fi alcatuit si din alte tag-uri, prezentate in continuare.classidstyletitleonmousedownonmouseoveronkeypressonkeyuponmouseuponload

Tag-uri ce pot fi incluse in zona <head>

<title> </title> - Contine Titlul ce va fi afisat in bara de sus a browser-ului.xml:lang<meta /> - Adauga meta informatii despre document, precum: descriere, cuvinte cheie, autor, si altele.namecontenthttp-equivxml:langscheme<link /> - Este folosit in tag-ul <head> pentru a face legatura cu (sau a include) o resursa externa, in general CSS (Cascading Style Sheet).classidstyletitlehrefxml:langhreflangcharsettyperelrevmedia<style> </style> - Este folosit pentru a defini proprietati de stil CSS pentru elementele din pagina.typemediadirtitlelangxml:lang[/code]




[b][color=#ff0000]	Text[/color][/b]

[code]<span> </span> - O sectiune in document, fara linie noua la inceput si sfarsit. Singur nu face nimic, de aceea este adesea folosit cu un "id" sau "class" pentru ca sa-i fie aplicate proprietati CSS.classidstyletitlexml:lang<div> </div> - O sectiune in document, un cadru cu linie noua inainte si dupa el. Singur nu face nimic, de aceea este adesea folosit cu un "id" sau "class" pentru ca sa-i fie aplicate proprietati CSS.classidstyletitlexml:lang<p> </p> - Un paragraf cu o linie noua in plus inainte si dupa el.classidstyletitlexml:lang<h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5> si <h6> </h6> - Folosit in general pentru titluri si sub-titluri in pagina web. Textul apare ingrosat si mare pt. "<h1>", descrescand treptat pana la "<h6>".classidstyletitlexml:lang<br /> - Adauga o linie noua dupa el.classidstyletitle<blockquote> </blockquote> - Acest Tag poate fi folosit pentru citate /fraze lungi. Cadrul definit de acesta lasa un anumit spatiu in exterior (stanga si dreapta).classidstyletitlexml:langcite<q> </q> - In acest tag se adauga de obicei fraze scurte, citate, ce vor fi afisate intre ghilimele.classidstyletitlexml:langcite<code> </code> - Poate fi folosit pentru a prezenta coduri de program, textul fiind afisat distinct pt. acest tip.classidstyletitlexml:lang<u> </u> - Afiseaza textul subliniat.classidstyletitlexml:lang<i> </i> - Afiseaza textul inclinat.classidstyletitlexml:lang<b> </b> - Afiseaza textul ingrosat.classidstyletitlexml:lang<strong> </strong> - Afiseaza textul ingrosat (similar cu <b>).classidstyletitlexml:lang<em> </em> - Afiseaza textul inclinat (similar cu <i>).classidstyletitlexml:lang<sup> </sup> - Afiseaza textul in partea de sus a liniei randului, si mai mic.classidstyletitlexml:lang<sub> </sub> - Afiseaza textul in partea de jos a liniei randului, si mai mic.classidstyletitlexml:lang<a> </a> - Creaza o legatura catre alta pagina web sau zona din pagina curenta (link intern).classidstyletitlexml:langaccesskeycharsettypehrefhreflangonblurrevrelshapecoordstabindexonfocusonclick[/code]

[color=#ff0000] [b]Liste[/b][/color]

[code]<ol> </ol> - Tag folosit pentru afisarea unei liste ordonate, numerotate.classidstyletitlexml:lang<ul> </ul> - Tag utilizat pentru afisarea unei liste neordonate numeric, ci cu simboluri gen: disc, cerc, patrat.classidstyletitlexml:lang<li> </li> - Defineste un element in liste <ol> sau <ul>, fiind adaugat in cadrul acestora.classidstyletitlexml:lang<dl> </dl> - Creaza o lista de definitii. Trebuie sa contina tag-urile <dt> si <dd>.classidstyletitlexml:lang<dt> </dt> - Defineste un termen pentru lista de definitii.classidstyletitlexml:lang<dd> </dd> - Se adauga in cadrul tag-ului <dt> si prezinta lista de definitii pentru termenul definit de acel tag.classidstyletitlexml:lang[/code]

[b] [color=#ff0000][b] Obiecte[/b][/color][/b] [color=#ff0000][b]

[code]<object> </object> - Folosit pentru a include in pagina elemente multimedia.classidstyletitlexml:langusemapnameheightwidthclassidcodebasedatatypecodetypestandbytabindexarchive<param /> - Este adaugat in cadrul tag-ului <object> si e folosit pentru a trimite parametri la obiectul respectiv, inclus in pagina XHTML.valuetypevaluetypeidname[/code]

[/b][/color] [color=#ff0000][b]Tabele[/b][/color]

[code]<table> </table> - Defineste un tabel in care pot fi adaugate randuri, coloane, titluri, celule de tabel.classidstyletitlexml:langborderalignsummarywidthdellpaddingcellspacingframerules<thead> </thead> - Defineste zona de Header (Antet) a tabelului, unde se pot include linii si coloane.classidstyletitlexml:langcharcharoffalignvalign<tfoot> </tfoot> - Defineste zona de subsol a tabelului, unde se pot include linii si coloane.classidstyletitlexml:langcharcharoffalignvalign<tbody> </tbody> - Defineste corpul tabelului, unde se pot include linii si coloane.classidstyletitlexml:langcharcharoffalignvalign<tr> </tr> - Creaza o linie noua in tabel, in care se includ coloane.classidstyletitlexml:langcharcharoffalignvalign<th> </th> - Se foloseste pt. celule cu titlu pentru coloane. Afiseaza un scris mai ingrosat.classidstyletitlexml:langaxisabbrheadersrowspancolspanscopecharcharoffalignvalign<td> </td> - Se foloseste pt. a crea coloane si celule in randurile tabelului. Trebuie adaugat in cadrul tag-ului <tr>.classidstyletitlexml:langaxisabbrheadersrowspancolspanscopecharcharoffalignvalign<caption> </caption> - Defineste un titlu pentru tabel. Acest tag trebuie adaugat imediat dupa eticheta <table> si poate fi adaugat doar unul singur.classidstyletitlexml:lang [/code]

[b][color=#ff0000]Formular[/color][/b] [b][color=#ff0000]

[code]<form> </form> - Incepe crearea unui formular in care pot fi incluse diferite casute si butoane.classidstyletitlexml:langactionenctypemethodonsubmitonresetacceptaccept-charset<label /> - Defineste o eticheta ce va corespunde unei casute de formular a carui "id" e adaugat in atributul "for". Cand se da click pe textul din eticheta sa, comuta controlul la acea casuta de formular.classidstyletitlexml:langforaccesskeyonfocusonblur<input /> - Adauga o casuta in formular, specificata la atributul "type".classidstyletitlexml:langnamevaluecheckeddisabledreadonlysizemaxlenghtsrcaltusemaptabindexaccesskeyacceptonfocusonbluronselectonchange<select> </select> - Creaza o lista de selectare optiuni. Aceste optiuni sunt adaugate cu tag-ul <option>.classidstyletitlexml:langnamedisabledmultiplesizetabindexonfocusonbluronchange<option> </option> - Adauga lista cu optiuni in tag-ul <select>.classidstyletitlexml:langdisabledselectedlabelvalue<textarea> </textarea> - Creaza un camp pentru adaugare de text.classidstyletitlexml:langnamedisabledrowscolsreadonlytabindexaccesskeyonfocusonbluronchangeonselect[/code]

[/color][/b] [b][color=#ff0000]Alte tag-uri[/color][/b]

[code][b]<img />[/b] - [i]Include o imagine in documentul XHTML.[/i][list] [*]class[*]id[*]style[*]title[*]src[*]alt[*]height[*]width[*]xml:lang[*]longdesc[*]usemap[*]ismap[/list][b]<script> </script>[/b] - [i]Folosit pentru a adauga un script in document, de obicei JavaScript.[/i][list] [*]type[*]src[*]defer[*]charset[*]xml:lang[/list][b]<noscript> </noscript>[/b] - [i]Afiseaza textul din el daca browserul nu stie sa lucreze cu un anumit script.[/i][list] [*]class[*]id[*]style[*]title[*]xml:lang[/list][/code]

October 10, 2011

Succes la invatat.Invit membrii staffului sau membrii comunitatii sa posteze nelamuriri , tutoriale etc. pentru a avea o sursa completa in tot ce priveste HTML , XHTML.

P.S:Va sfatuiesc sa aruncati ochii pe noul upgrade HTML si anume HTML5 a fost actualizat cu chestii interesante ce inlocuiesc cu succes java script,flash,PHP.

Cu stima Html , ne vedem la celelalte cursuri !

Lectii HTML postate de stafful Addicted pentru comunitatea Addicted.

Copyright Addicted2.ro

By Html

Sign In

[Html]Notiuni De Introducere Si Lectii

Recommended Posts

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Guest html

Link to comment

Share on other sites

Recently Browsing

Popular Contributors

Browse

Activity