# data[].attributes.body
1. Blender
2. Google Sketchup
3. AutoQ3D Comunității
4. 3D panza
5. DesignWorkshop Lite
6. K3D Surf
7. Bishop3D
8. FreeCad
9. 3DPlus
10. Anim8or
11.Maya

# data[].attributes.attachment_link.description
Create a new document and edit with others at the same time -- from your computer, phone or tablet. Get stuff done with or without an internet connection. Use Docs to edit Word files. Free from Google.

# data[].attributes.attachment_link.title
Invatam Pascal 1 - Structura unui program Pascal

# data[].attributes.attachment_link.readable_text
- Cunoasterea HTML este primul pas pentru cei care vor sa construiasca pagini web de calitate.
-Aici gasiti tutoriale, lectii, exemple si explicatii din care sa invatati, daca exersati si singuri. Cuprins Lectii : 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.

Acest curs prezinta elementele de baza ale limbajului HTML si modul de lucru cu acesta, va ajuta sa invatati cum sa creati pagini web folosind aceasta tehnologie.
Tot ce aveti nevoie este un editor de texte simplu, cum ar fi Notepad, si un navigator, de exemplu Mozilla Firefox, care este gratuit.
Pentru a invata cat mai bine elementele prezentate in aceste lectii, exersati personal fiecare exemplu prezentat si creati si altele pornind de la acestea.
Retineti ca acest curs reprezinta o baza si un punct de pornire pentru invatarea HTML, ne fiind prezentate aici toate proprietatile si elementele HTML. Pentru o cunoastere mai amanuntita a acestora, vizitati site-ul .

- Este un set de coduri logice care constituie aparitia unui document web si a informatiilor pe care le detine. Codurile sunt scrise intre "<"(paranteza deschisa) si ">" (paranteza inchisa), cu toate ca nu sunt chiar paranteze, asa se numesc si arata asa:< >.
Exemplu:

- Cele mai multe elemente ( numite si tag-uri) au un element (tag) de deschidere si un element de inchidere distins prin "/" in interiorul parantezei deschise "<".
Exemplu:
<FONT> ... </FONT>
- Primul cuvant care apare inauntru "<" se numeste element sau eticheta HTML si spune browser-ului sa faca ceva, precum <FONT>
- Cuvintele care urmeaza dupa element in interiorul "< >"se numesc atribute care descriu proprietatile elementului. Cum ar fi : culoarea, marimea, etc.
- Atributele sunt separate prin spatiu si urmate de semnul egal "=", dupa care sunt scrise, intre ghilimele (" ") valorile atributelor.
- Astfel, o eticheta HTML poate contine elementul de identificare, atribute si valori.
- In urmatorul exemplu elementul este FONT atributul COLOR si valoarea BLUE:

- Un document (fisier) HTML este alcatuit din mai multe elemente si atributele lor.
- La inceput un element HTML cuprinde (inconjoara ) datele documentului. Acest element contine doua sub-elemente principale: HEAD si BODY. In HEAD se poate adauga titlul paginii web si alte elemente numite metatag-uri, precum si scripturi JavaScript si stil-uri CSS. In BODY se adauga continutul documentului care va fi afisat in pagina web.
Exemplu:

Structura generala a unui document HTML

<HTML>
<HEAD> Acesta are si el mai multe sub-elemente:
<TITLE> Aici se scrie titlul documentului, cat mai sugestiv, si se incheie cu</TITLE>
<BASE> Poate fi folosit pentru a inregistra locatia documentului in forma URL. (Necesar daca documentul nu este accesat in locatia lui originala). Se incheie cu</BASE>
<LINK> Indica o relatie dintre document si alte obiecte de pe WEB. Se incheie cu</LINK>
<META> Aici sunt scrise informatii cum ar fi tastatura (limbaj) folosita, descrierea si cuvinte cheie care pot fi gasite de motoarele de cautare. Se incheie cu</META>
<SCRIPT> Contine oricare din JavaScript sau VB Script. Se incheie cu</SCRIPT>
<STYLE> Contine informatii privind stilul, grafica informatiilor care vor aparea pe pagina. Se incheie cu</STYLE>
Aici se incheie elementele adaugate in HEAD
</HEAD>
<BODY> Etichetele HTML si continutul documentului care va fi afisat in pagina web sunt incluse in acest element. Aici pot fi puse si elemente cum ar fi:<SCRIPT> </SCRIPT>
Se incheie cu
</BODY>
</HTML>- Lectia 1

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

Cum ati vazut in Lectia 1, sunt elemente sigure, generale, care sunt necesare pentru crearea unui document HTML.
Pentru inceput deschideti aplicatia NotePad si scrieti structura de baza a unei pagini web. Aceasta este:

- <h1> </h1> este o eticheta HTML pentru afisare de text mare (ca un titlu) in pagina.
- Ca sa vedeti rezultatul, copiati acest cod intr-o pagina noua deschisa cu Notepad si apoi salvati fisierul cu extensia .html. Daca nu stiti deja, pt. a-l salva alegeti la " Save as type" - All Files, apoi la " File name" ii scrieti numele si extensia (ex.: "pagina.html"). Dupa ce a fost salvat fisierul, deschideti-l cu un browser (trebuie sa mearga cu dublu-click pe el).

- 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.
Culorile sunt setate folosind culorile de baza: rosu, verde si albastru; expresia folosita RGB (Red, Green, Blue), acestea sunt reprezentate ca valori hexadecimale si sunt scrise intre ghilimele (" "), la inceput trebuie adaugat caracterul '#'. Fiecare 2 unitati ale codului reprezinta una din culorile RGB.
De exemplu:#00aa11 reprezinta o culoare care nu are Rosu (00), are Verde (aa) si Albastru mai putin (11).

Elementul BODY

- Aceste atribute controleaza culoarea link-ului in diferite stari
1. LINK - culoarea initiala a link-ului. Standard este albastru
2. VLINK - culoarea unui link vizitat. Standard este purpuriu.
3. ALINK - culoarea link-ului in momentul activarii. Standard este rosu.

<body bgcolor="#ffffff" text="#ff0000" link="#0000ff" vlink="#ff00ff" alink="#ffff00"></body>

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.

- Elementul body ofera posibilitatea inlocuiri fondului paginii cu o imagine (Background image). Daca imaginea este mai mica decat dimensiunile paginii atunci imaginea va fi multiplicata pana va acoperi intreg cadru documentului. Este indicat ca imaginea sa fie in format *.gif sau *.jpg. Folosirea unei imagini va da un aspect placut documentului. Pentru a vedea cum arata un document al carui fond este o imagine click aici .

<body background="imagine.gif" bgcolor="#ffffff"></body>

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 incarcare a imaginii culoarea fondului va fi alba.

Dupa ce a-ti creat baza de inceput a unui document si a-ti setat proprietatile, trebuie sa salvati fisierul. Salvarea trebuie facuta intr-un format pe care browser-ul il poate recunoaste. Extensia standard pentru un fisier care reprezinta o pagina web este ".htm" sau ".html". De obicei folosesc (".html").
- Pentru a salva documentul ca sa arate ca o pagina web, in NotePad alegeti din meniul File comanda Save si salvati fisierul cu orice nume doriti dar cu extensia html (sau "htm") - ( La File name: scrieti si numele si extensia ".html", exemplu: index.html). Daca nu scrieti extensia, NotePad va salva documentul in format " txt".
- Pentru a vedea documentul ca o pagina web, duceti-va in directorul in care a-ti salvat fisierul si deschideti-l pur si simplu (cu Enter sau dublu-click la mouse), acesta va fi deschis automat de browser-ul pe care-l folositi (Mozilla Firefox, Internet Explorer, Opera). Sau deschide-ti browser-ul si din comanda Open deschideti documentul pe care l-ati salvat.
- Pentru a continua 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.

Aici puteti vedea structura generala a unei pagini Web

Mai jos puteti vedea exemplu:

Mai jos puteti vedea exemplu:

- <br> este un Element Gol dar poate sa contin atribut.<br> nu are si nu cere element de inchidere, nu se foloseste </br>

Mai jos puteti vedea exemplu:

- Elementul <br> foloseste un singur atribut - CLEAR care poate avea valoarea LEFT, RIGHT sau ALL, si sunt folosite daca este o imagine pe pagina. Atributul CLEAR forteaza o linie in jos. Daca o imagine este asezata in partea stanga a paginii, valoarea LEFT va muta cursorul jos la prima linie din marginea stanga.

Mai jos puteti vedea exemplu:

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

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.

<font size="+2">Doua marimi mai mare</font>

Elemente des folosite pentru formatul textului sunt:

Alte elemente folosite pentru formatul textului sunt:

- <em>Accentuare (Emphasis) </em> - Browser-ul de obicei arata aces element ca italic

- <tt> Teletype</tt> - Ca si PRE, browser-ul prezinta acesta intr-un singur tip de font, indiferent de fontul ales cu atributul FACE, in interiorul elementului FONT

Mai jos puteti vedea cateva exemple de coduri si modul lor de afisare in browser.

- In browser va fi afisat asa:

Cateva elemente pot avea atributul ( ALIGN) pentru aliniere, cum ar fi Titlurile<Hx> , Paragraful <p>...</p> si Linia orizontala <hr> . Cele trei valori ale atributului ALIGN sunt: LEFT, RIGHT si CENTER.
Aliniamentul celor mai multe elemente se face cu ajutorul altor elemente:

In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser.

- In browser va fi afisat asa:

Prezinta textul intr-un font mare
Prezinta textul intr-un font mic
Aseaza textul in pozitia subscript normal Aseaza textul in pozitia superscript

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

In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser.

- In browser va fi afisat asa:

Definite exemplu de termen inchis Folosit pentru extragerea unui cod de program Folosit pentru simple productii de programe, scripturi , etc. Folosit pentru text care va fi scris de utilizator
Folosit pentru variabile sau argumente de comenzi

- Alte elemente pentru formatul textului:

In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser.

- In browser va fi afisat asa:

Daca vrei si crezi, orice este posibil.

Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca bucurie.
Aceasta este prima zi din restul vietii tale.
180 Attwell Dr. Suite 130
Toronto, ON
M9W 6A9 - Lectia 4
HTML contine cateva tag-uri utile pentru asezarea continutului in pagina. Prin acestea textul este mai usor de citit si evidentiat.

Un element des folosit in formarea listelor (neordonate) este <ul>.

Mai jos puteti vedea exemplu.

- In pagina web apare asa:

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

- In pagina web apare asa:

Iata un exemplu:

- In pagina web apare asa:

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

De asemenea se poate specifica numarul de inceput al numerotarii printr-o valoare data atributului start.
Exemplu:

- In pagina web apare asa:

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

- In pagina web apare asa:

- Hyper Text Markup Language

- Limbaj pentru pagini web

animal de casa

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

- Observati ca tot ce contine "<ol> ... </ol>" este adaugat in cadrul unui "<li> </li>"
- In pagina web apare asa:
- Lectia 5
HTML contine si elemente pentru adaugarea de imagini in pagina web.

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:

Pentru a introduce o imagine intr-un format HTML se foloseste elementul <img> ... </img> impreuna cu urmatoarele atribute :

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>

- In pagina web va aparea:

Incercati singuri mai multe exemple, folosind si alte atribute si valori prezentate mai sus.- Lectia 6

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 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 ( Narciz)
- 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, vezi

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

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

b) Link-uri externe catre 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:

2. Link-uri interne - sunt link-uri catre alte texte din aceeasi pagina. Se folosesc cand 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:

2. In locul unde vrem sa fie link-ul (acolo unde o sa dam click pentru a face saltul catre textul ales), se scrie urmatorul cod:

Link-urile interne si externe pot fi combinate. Astfel putem face saltul catre 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:
- Lectia 7
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.

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:

- 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 tabelul de mai jos puteti vedea atributele care se folosesc si descrierea acestora:

Iata un exemplu practic, avem imaginea de mai jos.
In aceasta imagine avem trei zone distincte: dreptunghi, cerc si romb (poligon); pe care, prin codurile HTML de creare a hartii de imagini, le-am definit sa fie tratate ca zone diferite, separate, si cand dam click pe ele, fiecare deschide cate o pagina diferita ( sugerata de numele din zona respectiva).

- Observati ca mouse-ul isi schimba forma numai cand este deasupra zonelor care au fost definite ca sa fie suprafete a hartii de imagini. Aceasta definire nu este facuta prin desen, ci prin coordonatele folosite in atributul "coords", coordonate care au fost alese pentru a se potrivi cu desenul. Reperul cel mai important este lungimea in pixeli din coltul stanga-sus pana in punctele care formeaza zona dorita.

Codul HTML pentru acest exemplu este urmatorul ( studiati cu atentie atributele folosite si coordonatele scrise; revizuiti si tabelul de mai sus):

<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="dir/contact.php" alt="Date de contact" title="Date de contact"
shape="rect" coords="6,116,97,184">
<area
href="curs.html" alt="Curs HTML" title="Curs HTML"
shape="circle" coords="251,143,47">
<area
href="../index.html" alt="Pagina principala" title="Pagina principala"
shape="poly" coords="150,217, 190,257, 150,297,110,257">
</map>

</div>
- Lectia 8
Tabelele sunt elemente foarte utile pentru asezarea si prezentarea continutului intr-o pagina web.

Pentru a crea tabele in paginile web se foloseste elementul <table> ... </table> , acesta incadreaza alte patru sub-elemente, care alcatuiesc structura tabelului.

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:

- In pagina web apare asa:

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:

- In pagina web apare asa:

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

- In pagina web apare asa:

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

Pentru inceput se adauga un element <FRAMESET> ... </FRAMESET> in interiorul documentului HTML, in sectiunea HEAD.
<FRAMESET> determina cat din spatiul ferestrei este atribuit fiecarui cadru, folosind atributele ROWS sau COLS care impart ecranul in Linii sau Coloane.
Acesta va contine elemente<FRAME>, cate unul pentru fiecare divizare a ferestrei din browser.

- pixeli absoluti ; ex : "360,120"
- procente din inaltimea ecranului ; ex : "75%,25%"
- valori proportionale, folosind (*). Acesta putand fi combinat cu procente sau pixeli. Ex : "120,*" sau "30%,*"

- pixeli absoluti ; ex : "380,120"
- procente din lungimea ecranului ; ex : "33%,77%"
- valori proportionale, folosind (*). Acesta putand fi combinat cu procente sau pixeli. Ex : "120,*" sau "30%,*"

Mai jos puteti vedea cum poate fi creata o pagina HTML care sa contina doua cadre, cel din stanga ocupand 23% din spatiul paginii iar cel din dreapta 77%

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:

Cand sunt create link-uri care sunt folosite pentru a deschide pagini in cadre, este nevoie de specificarea unui atribut in eticheta de link "<a>" numit target, acesta spune browser-ului in ce cadru sa deschida pagina.
Atributul target foloseste ca valoare textul din atributul NAME al elementului FRAME in care se va deschide noua pagina.
De exemplu, daca avem un link in Meniu.htm care vrem sa deschida pagina Doc3.htm in spatiul in care se afla celalat cadru, de exemplu Continut.htm; codul HTML pentru link va arata astfel in Meniu.htm:

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

Special Target:

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

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

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.

Pentru a crea un formular in HTTML se foloseste elementul <form> ... </form>, in cadrul acestuia se vor adauga celelalte elemente specifice.
Elementul<form> ... </form> nu contine atribute pentru format, foloseste insa urmatoarele atribute:

- aici putem scrie get , sau post. Aceste valori specifica ce metoda HTTP va fi folosita pentru a trimite continutul formularului la server.

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>

In browser va apare:

In browser va apare:

In browser va apare:

In browser va apare:

In browser va apare:

In browser va apare:

In browser va apare:

In browser va apare:
Buton Reset
In browser va apare:

In browser va apare:

In browser va apare:

- Toate aceste elemente trebuie incadrate in tag-ul "<form> ... </form>"!- Lectia 11

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.

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:

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

<bgsound src="sunet.midi" loop="3" title="titlul melodiei" derlay="5">

<embed src="sunet.midi" width="145"height="60" autostart="truie" volume"100" controls="console" hidden="false">

- 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 " src" 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,<object> </object>
-- Iata un exemplu de cod prin care puteti adauga imagini flash in pagina web:

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

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

HTML are un tag special, <marquee> </marquee>, prin care puteti crea un efect de miscare a unui text (sau imagine) care este incadrat de a cest element.
Are urmatoarele atribute:

- directia de miscare (left, right, up, down) - ( stanga, dreapta, sus, jos)

Exemplu de miscare pe orizontala

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

In pagina va arata asa:

Iata un alt exemplu unde miscarea se face pe verticala:

<marquee behavior="alternate" bgcolor="#00ffff" direction="up" width="100" height="100">Marquee text</marquee>

In pagina va arata asa:

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

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

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 id sau class in interiorul etichetelor HTML la care vrem sa aplicam un anumit stil.
Diferenta dintre id si class 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"

- In exemplu de sus, stilul creat poate fi folosit doar de elementele unde vom adauga comanda class="cuvant", celelalte elemente nefiind afectate.

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

Incercati singuri aceste exemple pentru a vedea rezultatul.

In tabelul de mai jos sunt cateva atribute (sau proprietati) care pot fi modificate cu STYLE

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

- in acest exemplu se pot aplica elemente de stil css clasei (.cls) care vor afecta doar portiunea de text inclusa intre tag-ul "<span>".
Pentru mai multe informatii despre lucru cu stiluri CSS, studiati lectiile de la Curs CSS . - Lectia 13
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.

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.

- In atributul " style" sunt specificate proprietatile CSS care stabilesc aspectul grafic al fiecarui DIV (lungime in pixeli, fundal si bordura).
Acest cod va afisa intr-o pagina web urmatorul rezultat:

- care poate lua valorile: static, relative, fixed sau absolute ( pt. mai multe detalii vezi Pozitionare CSS ).

- care stabileste distanta dintre marginea cadrului sectiunii (blocul) DIV si elementele din jurul lui ( pt. mai multe detalii vezi Margini si chenare CSS ).

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>

In acest exemplu avem un prim DIV cu atributul "style" in care avem o proprietate de pozitionare relativa ( pt. a pozitiona toate celelalte elemente pe care el le incadreaza dupa contextul scris anterior) si o alta proprietate pentru marimea textului. In interiorul acestui DIV avem alte 3 div-uri, pozitionate absolut 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" va apare in pagina web urmatorul rezultat:

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

Cu tag-ul <span></span> 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 " style" in interiorul etichetei "<span>" (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.

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

- Am adaugat portiunea din context ( aici textul "Curs HTML") intr-un tag SPAN pentru a-i putea aplica proprietatile grafice dorite si care nu afecteaza restul continutului.
- Astfel, prin proprietatile adaugate in "style" ( background:#88fe88; si font-weight:bold;), in pagina web va fi afisat textul in felul urmator:

Tag-ul SPAN poate fi folosit si ca o classa pentru CSS. Astfel, proprietatile adaugate elementului " span" intr-o foaie de stil vor fi transferate tuturor elementelor din pagina care sunt incadrate in tag-uri "<span></span>".
Iata un exemplu

- 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.
- Acest cod va afisa intr-o pagina web urmatorul rezultat:

- Diferenta dintre DIV si SPAN este faptul ca DIV incadreaza o sectiune din document sub forma unui bloc iar SPAN incadreaza o portiune din context sub forma de linii.
Iata un exemplu din care se poate intelege mai bine, atribuim aceeasi proprietate grafica (bordura rosie) unui tag DIV si unui tag SPAN.'

- In pagina web va apare

Fraza pe mai multe linii,
continua cu linia a doua,
se termina cu linia a treia.

- Acum cu SPAN:

Fraza pe mai multe linii,
continua cu linia a doua,
se termina cu linia a treia.

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

- Cand aveti mai multe elemente <div></div> si<span></span> in pagina, este indicat folosirea atributului " id" sau " class". 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, Scriere cod CSS .
- Lectia 14
Aici gasiti un tabel cu mai multe culori ce pot fi utilizate in designul paginilor web, prin cod HTML si CSS, dar si in alte aplicatii cum ar fi editoare de imagini sau flash.
Fiecare culoare are 3 reprezentari: Denumirea ( in engleza), Cod Hexazecimal ( perechi de numere de la 0 la 9 si litere de la A la F), Cod Decimal ( numere de la 0 la 255).
Astfel, puteti utiliza o culoare folosind oricare din cele 3 reprezentari. Daca nu stiti cum, studiati exemplele urmatoare:

De exemplu, daca doriti sa folositi intr-un stil o nuanta de albastru deschis (luam DeepSkyBlue), puteti adauga intr-un cod CSS una din urmatoarele expresii, folosind denumirea culorii, codul hexa sau cel decimal (pentru hexadecimal se adauga in fata caracterul# iar pentru decimal se foloseste sintaxa rgb(r, g, b); )

In general asa se folosesc aceste coduri de culori, de exemplu, pentru cod HTML la "font" ( aici nu se foloseste decimal):

<font color=" DeepSkyBlue">Text de culoare DeepSkyBlue</font>
<font color="#00BFFF">Text de culoare DeepSkyBlue</font>

Iata inca un exemplu pt. CSS, cu proprietatea "background-color", de data asta o culoare spre verde (am ales SpringGreen)
- Lectia 15 Curs realizat de Narciz

# data[].attributes.attachment_link.description
Cunoasterea HTML este primul pas pentru cei care vor sa construiasca pagini web de calitate. -Aici gasiti tutoriale, lectii, exemple si explicatii din care sa invatati, daca exersati si singuri. Cuprins Lectii : Introducere HTML (HyperText Markup Language) este un limbaj utilizat pentru crearea paginilor web ce pot fi afisate intr-un browser (sau navigator).