# data[].attributes.attachment_link.readable_text
Limbajul
HTML

Pag 1
Limbajul HTML

World Wide Web (WWW)

Serviciul World-Wide Web (W3 sau simpul Web) s-a nascut in martie 1989 la initiativa lui
Tim Berners-Lee care l-a propus ca sistem de comunicare de informatii pentru comunitatea fizicienilor
de la CERN.

Definitia oficiala pentru World-Wide Web este : Wide-area hypermedia information

retrieval initiative aiming to give universal access to a large universe of documents.

Sistemul este bazat pe extinderea tehnicii hypertext (hypertext)la nivel de retele. Un

document hypertext este un fisier normal de text care are insa particularitatea urmatoare :
contine legaturi la alte parti ale documentului sau la alte documente.

Descrierea unui document Web se face prin HyperText Markup Language (HTML).
Continutul sau il constituie textul documentului impreuna cu diverse comenzi de formatare.

Sistemul WWW utilizeaza modelul client/server :

- un server WWW - este un program care ruleaza in permanenta pe un calculator (demonul
http) si are sarcina de tratata cererile sosiste de la componenta client a sistemului care
ruleaza pe alt calculator
- un client WWW (Explorer, Netscape, Mosaic) - este un program care permite utilzatorului
transmisia de cereri catre un server WWW si vizualizarea rezultatului
Protocolul utilizat pentru comunicare intre client si server se numeste HTTP (HyperText
Transmission Protocol)

Important : Nu exista o sesiune permanenta intre client si server

HTML nu este de fapt un limbaj de programare. Specificattile lui definesc un set de "tag"-uri
(comenzi) si regulile de scriere ale ascestora. Intr-un cuvint, cu ajutorl limbajului HTML formatam un
document pentru a putea fi accesat prin Internet. Cu ajutorul HTML putem realiza urmatoarele:
- documente independente de platforma (sistemul de operare)
- legaturi la alte documente de pe Internet
- introducerea de imagini, sunet si video
- interactivitate intre cititorul documentului si document
Documentele WWW sint de fapt texte ASCII care contin diferite elemente ale acestui limbaj
de formatare (HTML). De regula documentele HTML au extensia .html, dar si .htm in cazul serverelor
WWW ce ruleaza pe MS-Windows. Documentele HTML pot fi create manual folosind un editor de
texte ASCII (de exemplu "Notepad" din Windows), poate fi convertit din alte formate folosind diverse
editoare HTML sau pot fi create dinamic de un server WWW sau de un script.

Pag 2
Limbajul HTML
Un document HTML lucreaza extrem de simplu. El "spune" programului de navigare prin
Internet pe care-l folosim (browser), prin intermediul "tag"-urilor, ce sa faca cu textul, imaginile,
sunetul, sau celellate elemente cuprinse in document.

Sintaxa limbajului HTML

HTML nu tine cont de forma originala a textului. Nu conteaza cum arata textul cind este scris,
ci cum va arata pe ecran in fata unui privitor. Nu conteaza tab-urile, spatiile multiple, nu se tine cont
de sfirsitul de linie, etc. Pentru realizarea aspectului obtinut de regula cu ajutorul acestor caractere se
folosesc tag-uri.

Toate tag-urile (comenzi) sint scrise intre paranteze unghiulare: <nume-tag>

Aceste tag-uri sint de doua feluri: de inceput <nume-tag> si de sfirsit </nume-tag> si au efect
asupra obiectului descris intre ele (paragraf de text, imagine, etc).

Dupa numele tag-ului de inceput mai pot fi scrise si o serie de atribute, astfel:

<nume-tag [lista atribute]>obiectul afectat de tag</nume-tag> unde

lista atribute= nume-atribut="valoare-atribut" [nume-atribut="valoare-atribut" ...]

Deci daca intr-un tag exista mai multe atribute, acestea trebuie separate prin spatiu.
Obs. [...] semnifica faptul ca obiectul incadrat de parantezele patrate poate lipsi.
Uneori valorile atributelor pot fi date si fara " " .

Structura unui document HTML

Intreaga dezvoltare a limbajului HTML s-a facut in ideea cresterii calitatii fara sacrificarea
simplitatii. Fiecare document HTML este structurat in doua parti: antetul - "head" si continutul -
"body". Structura unui document HTML arata astfel:

TAG-ul <HTML>

Sintaxa: <HTML> documentul html </HTML>

TAG-ul <HEAD>

Include antetul (header-ul) document HTML. Acest tag poate include tag-urile <TITLE> si <META>.
Sintaxa: <HEAD> antetul documentului </HEAD>

TAG-ul <TITLE>

Cuprinde titlul documentului.

Sintaxa: <TITLE> titlul documentului </TITLE>

TAG-ul <META>

Atributele:
NAME - specifica numele informatiei suplimentare
CONTENT - defineste continutul informatiei suplimentare

Precum observam, acest tag nu are corespondent un tag de inchidere </META>, el fiind inchis
normal prin paranteza unghiulara.

TAG-ul <BODY>

Defineste atributele "corpului" documentului.

Atributele:
BACKGROUND - defineste o imagine utilizata ca fundal;
Ex: BACKGROUND="fond.jpg" Imaginea "fond.jpg" utilizata ca fundal;

BGCOLOR - defineste culoarea fondului documentului

Ex: BGCOLOR=#FF0000
fondul paginii va fi de culoare rosu pur (culoare scrisa in hexa);
BGCOLOR=Yellow
fondul paginii va fi de culoare galben pur (culoare scrisa in clar);
Culori in hexa:

Pag 4
Limbajul HTML
#BF0000 rosu inchis #0000BF albastru inchis
#FF0000 rosu #0000FF albastru
#BFBF00 galben inchis #BF00BF magenta inchis
#FFFF00 galben #FF00FF magenta
#00BF00 verde inchis #808080 gri inchis
#00FF00 verde #C0C0C0 gri
#00BFBF albastru mediu #000000 negru
#00FFFF albastru deschis #FFFFFF alb

TEXT - indica culoarea textului normal

Ex: TEXT=#FF0000 textul pe pagina va fi de culoare rosu pur (culoare scrisa in hexa);
TEXT=Yellow textul pe pagina va fi de culoare galben pur (culoare scrisa in
clar);

LINK - indica culoarea textului corespunzator unei hyperlegaturi nevizitate

Ex: LINK=#FF0000
textul corespunzator unei hyperlegaturi nevizitate va fi de culoare rosu pur
(culoare scrisa in hexa);
LINK=Yellow
textul de hyperlegatura nevizitata va fi de culoare galben pur (culoare scrisa in
clar);

VLINK - indica culoarea textului corespunzator unei hyperlegaturi vizitate

Ex: VLINK=#FF0000
textul corespunzator unei hyperlegaturi vizitate va fi de culoare rosu pur
(culoare scrisa in hexa);
VLINK=Yellow
textul corespunzator unei hyperlegaturi vizitate va fi de culoare galben pur
(culoare scrisa in clar);

Pag 5
Limbajul HTML

EXEMPLU:
<H1>Inceput de document</H1>
continutul documentului
<H2>Titlu de capitol</H2>
continutul capitolului
<H3>Titlu de sectiune</H3>
continutul sectiunii
<H4>Titlu de subsectiune</H4>
continutul subsectiunii
<H5>Titlu de paragraf</H5>
continutul paragrafului
<H6>Titlu de subparagraf</H6>
continutul subparagrafului

Formatarea textului
Formatarea textului se realizeaza extrem de simplu, folosind citeva tag-uri si atributele lor.

Ruperea rindurior
TAG-ul <P >

Atributele:
ALIGN - defineste alinierea paragrafului
ALIGN=center Paragraf aliniat pe centru;
ALIGN=left Paragraf aliniat la stinga;
ALIGN=right Paragraf aliniat la dreapta.

TAG-ul <BR>

Texte fara ruperi de rind

Specifica un text in care nu sint permise ruperilie de rind.

Sintaxa: <NOBR> text </NOBR>

Atributele:

WIDTH - indica latimea liniei orizontale in pixeli.

Ex: WIDTH=630
SIZE - defineste inaltimea liniei orizontale in pixeli.
Ex: SIZE=5
ALIGN - defineste alinierea liniei orizontale
ALIGN=left Alinierea la stinga a liniei orizontale;
ALIGN=center Alinierea pe centru a liniei orizontale;
ALIGN=right Alinierea la dreapta a liniei orizontale;

COLOR - defineste culoarea liniei orizontale.

Ex: COLOR=red

EXEMPLU:
<HR>
The Faculty of Computer Science - Iasi

Centrarea textului
TAG-ul <CENTER>

Defineste centrarea unei portiuni de document (text, tabele, imagini), fata de dimensiunile curente ale
ferestrei.
Sintaxa: <CENTER> text </CENTER>

Fonturi
TAG-ul <FONT>

Defineste aspectul textului cuprins intre tag-urile de inceput si cel de sfirsit.

Sintaxa: <FONT [COLOR=culoare] [FACE=font] SIZE=dimesiune> text </FONT>

Atributele:
COLOR - specifica culoarea textului
Ex: COLOR=#FF0000 textul va fi de culoare rosu pur (culoare scrisa in hexa);
COLOR=Yellow textul va fi de culoare galben pur (culoare scrisa in clar);
FACE - defineste tipul de caractere
Ex: FACE=Arial tipul de caracter folosit (font);
Obs. Cele mai folosite fonturi pentru document HTML sint Arial, Times New Roman, Verdana,
Helvetica, Courier, etc.
Pag 7
Limbajul HTML

SIZE - defineste dimensiunea textului;

Ex: SIZE=2
Obs. Dimensiunile variaza intre 1 si 7 si pot fi prefixate cu + sau - caz in care specifica distanta dintre
dimensiunea fontului curent si fontul de baza

TAG-ul <BASEFONT>

Permite schimbarea dimensiunii fontului de baza.

Sintaxa: <BASEFONT SIZE=dimensiune> text </BASEFONT>

Atributele:
SIZE - defineste dimensiunea fontului de baza
Obs. Dimensiunile fonturilor de baza variaza si ele intre 1 si 7 dar nu pot fi prefixate cu + sau -

Stiluri
TAG-ul <B>

Defineste text ingrosat (bold).

Sintaxa: <B> text </B>

TAG-ul <I>

Defineste text inclinat (italic).

Sintaxa: <I> text </I>

TAG-ul <U>

Defineste text subliniat (underline).

Sintaxa: <U> text </U>

Tagul <FONT> poate include printre alte tag-uri si tag-urile <B>, <I> si <U>.

Pag 8
Limbajul HTML

Inserarea de comentarii si citate

Permite inserarea de adnotari in documente HTML. Comentariile sunt ignorate de navigator si se pot
extinde pe mai multe rinduri.
Sintaxa: <! text-comentariu>

TAG-ul <BLOCKQUOTE>

Defineste un citat. Punerea in evidenta a citatelor se face de regula prin indentare diferita fata de restul
textului din documentul HTML.
Sintaxa <BLOCKQUOTE> textul citatului <BLOCKQUOTE>

EXEMPLU:
<BLOCKQUOTE> Ce e val ca valul trece <BLOCKQUOTE>

Referinte (legaturi)
O caracteristica majora a HTML-ului o reprezinta abilitatea lui de legare a unei portiuni de text
de alte documente, de a purta cu el referinte. Acest lucru este realizat cu hyperlink-uri. Browserul
afiseaza textele care fac legaturi sau referinte cu alte culori si/sau subliniate pentru a evidentia faptul
ca sint legaturi hypertext.
Pentru a naviga printr-un document Web, care deci este un hypertext, utilizatorul activeaza de
regula o legatura (hyperlink) cu ajutorul tastaturii sau a mouse-ului. Puterea WWW consta in faptul ca
aceste referinte pot lega alte documente in acelasi director, oriunde in alta parte pe acelasi server
WWW sau oriunde in alta parte pe alte servere de tip WWW sau oarecare localizate oriunde in lume.
Fiecare referinta (hyperlink) intr-un document HTML este definita de doua componente:
- elementul de activare, de tip text sau de tip grafic, prin intermediul caruia (cu ajutorul mouse-ului
sau a tastaturii) se activeaza legatura;
- elementul URL care descrie adresa documentului adresat si eventual a punctului de intrare in
document (ancora), dupa ce hyperlink-ul este activat.

Pag 9
Limbajul HTML

direct documente HTML din fisiere de pe acelasi sistem, fara sa fie necesara utilizarea vreunui server.
Structura unui URL relativ este urmatoarea:
[cale relativa]fisier[#ancora]

EXEMPLE: doc2#ancora2 ../doc3 subdir/doc4#ancora4

URL-ul absolut descrie calea completa spre un anumit document. Structura unui URL absolut
este urmatoarea:
protocol://masina[:port][/cale/fisier][#ancora][?lista de parametri]
Protocolul poate fi : file, ftp, http, telnet, gopher, wais, news

TAG-ul <A>
Marcarea textului activ (sau a imaginii active) in documentul HTML initial (de la care porneste
legatura) se face cu ajutorul acestiu tag.

Sintaxa: <A HREF="URL-document"> text activare hiperlegatura </A>

EXEMPLU:
<A HREF="localizarea fisierului care trebuie incarcat">Textul activ care selectat determina incarcarea
</A>

Legaturi interne si intre sectiuni

EXEMPLU:
<A NAME="top">Top of page</A>

Hyperlink-ul cu numele "top" apare in alta pozitie in cadrul aceluiasi document.

EXEMPLU:
Return to the <A HREF="#top">top of page</A>

Pag 10
Limbajul HTML
In mod analog se pot face si linkuri cu nume declarate in alte fisiere.

Legaturi locale

Cea mai simpla legatura locala se realizeaza precizind calea relativa a documentului (un
URL relativ). Selectarea unei legaturi ca cea prezentata mai jos determina serverul sa caute
documentul solicitat in acelasi folder ca si documentul in care a inceput legatura.

Fisierul local Textul care

care va fi incarcat poate fi selectat

<A HREF="pagina.html">Prima pagina</A>

Tag de inceput Tag de sfirsit

Referirea relativa a documentelor locale se face conform tabelului urmator:

documentelor HTML de pe un sistem pe altul (sau dintr-un loc in altul chiar pe acelasi sistem) fara
modificari majore in surse.

Legaturi indepartate

Inserarea intr-un document HTML a unei legaturi indepartate se face asemanator in cazul
referintelor la documente locale. Tag-ul de inceput este <A> si cel de sfirsit </A>. Textul dintre tag-
uri va fi afisat diferit fata de restul documentului pentru a arata ca este selectabil. Legatura hypertext
(HREF) va contine insa URL-ul tintei, de forma
Legatura care se va stabili

Protocol Nume sistem gazda

<A HREF="http://www.infoiasi.ro/">Faculty of Computer

Tag de inceput Science - Home Page</A>

Text care poate fi selectat Tag de sfirsit

Alte exemple: <A HREF="telnet://sigma.tuiasi.ro"> telnet Technical University </A>

<A HREF="ftp://ftp.dntis.ro">ftp DNT Iasi</A>
<A HREF="gopher://gopher.uaic.ro">gopher University "Al.I.Cuza" Iasi</A>

Pentru legarea directa la un document indepartat se utilizeaza un URL absolut de forma:

http://www.infoiasi.ro/fcs/en/now.html

Protocol Nume sistem gazda Cale Nume fisier

Imagini, sunete, animatie in documentele HTML

Se spune ca o imagine valoreaza cit o mie de cuvinte. Intr-adevar, imaginile imbogatesc
paginile Web atit sub aspect decorativ, cit si prin sporirea nivelului de informatii. O conditie pentru ca
imaginile sa poata fi parte componenta a unei pagini Web, este ca acestea sa fie salvate intr-unul din
formatele GIF sau JPG. Dar cum putem insera o imagine in documentul HTML ?

TAG-ul <IMG>

Acest tag va avea ca efect afisarea intai a imaginii foto3b.gif si apoi a imaginii foto3.gif, intr-un
dreptunghi cu dimensiunile de 300x56 pixeli si cu un chenar de 2 pixeli.

Liste
Listele pot fi nenumerotate, ordonate sau descriptive

TAG-ul <UL>

Tagu-ul <UL> defineste o lista nenumerotata.

Sintaxa: <UL [TYPE=disk|circle|square] > lista </UL>

Atributul TYPE permite inserarea de buline de tip disc, cerc sau patrat-umplut in fata elementelor liste
cu exceptia celor care au atributul TYPE in linia de definitie a elementului (tag-ul <LI>). Valoarea
implicita este disk. Daca atributul TYPE lipseste, bulina inserata in fata va fi un disk

TAG-ul <LI>

Defineste un element de lista nenumerotate.

Sintaxa:<LI [TYPE=disk|circle|square]> element-lista <LI>

Atributul TYPE are aceeasi semnificatie ca la tag-ul <UL> insa afecteaza doar elementul listei definit
de tag-ul <LI> curent.

Interpretarea de catre navigator este urmatoarea:

 primul element are bulina disc
 al doilea element are bulina disc
 al treilea element are bulina disc
<UL TYPE=square>
<LI>primul element are bulina patrat</LI>
<LI TYPE=circle>al doilea element are bulina cerc</LI>
<LI>al treilea element are bulina patrat</LI>
</UL>
Interpretarea de catre navigator este urmatoarea:
 primul element are bulina patrat
o al doilea element are bulina cerc
 al treilea element are bulina patrat

TAG-ul <OL>

Defineste o lista numerotata.

Sintaxa: <OL [TYPE=A|a|1|I START=numar]> lista </OL>

TAG-ul <LI>

Defineste un element de lista ordonata

Sintaxa:<LI> element-lista <LI>

Liste descriptive

Elementele unor astfel de liste sunt aliniate cu ajutorul caracterelor de tabulare.

TAG-ul <DL>

Defineste o lista descriptiva.

Sintaxa: <DL> lista </DL>

TAG-ul <DT>

Defineste un antet.
Sintaxa: <DT> antet </DT>

TAG-ul <DD>

Defineste un subantet.
Sintaxa: <DD> lista </DD>

Pag 15
Limbajul HTML

TAG-ul <TABLE>

Alinierea datelor din tabel

Pentru estetica continutului tabelului exista citeva atribute care permit alinierea datelor in
interiorul celulelor, atit pe orizontala, cit si pe verticala.
Implicit datele din celulele cap de tabel sint centrate atit orizontal cit si vertical, iar informatiile
din celulele de date sint centrate vertical, dar aliniate orizontal la stinga.

Tabele simple

Tabelele simple sunt tabelele in care celulele unei linii au aceeasi inaltime iar celulele unei coloane au
aceeasi latime.

TAG-ul <TR>

"Table Row" defineste o linie din tabel.

Sintaxa: <TR> continut-linie </TR>

TAG-ul <TH>

"Table Head" specifica o celula de tip antet

Sintaxa: <TH> antet </TH>

TAG-ul <TD>

"Table Data" defineste o celula normala din tabel.

Sintaxa: <TD [ALIGN=left|center|right] [VALIGN=left|center|right]> continut-celula </TD>

Pag 17
Limbajul HTML

ALIGN=right Este utilizat pentru alinierea orizontala la dreapta;

VALIGN - specifica alinierea verticala
VALIGN=top Este utilizat pentru alinierea verticala in partea de sus a celulei;
VALIGN=middle Este utilizat pentru alinierea verticala in partea de mijloc a celulei;
VALIGN=bottom Este utilizat pentru alinierea verticala in partea de jos a celulei.

EXEMPLU:
Se considera un tabel cu latimea de 500 pixeli si cu un chenar de 1 pixel, cu 2 linii si 3 coloane:

Imagine 1 Text normal 1 Imagine 2

Text normal 2Text normal 3 Text normal 4

<TABLE width=500 border=1>
<TR>
<TD>
Imagine1, inserata cu ajutorul tag-ului <IMG> astfel:
<IMG src="imagine1.gif" border=0 alt=" textul ce numeste prima imagine">
</TD>
<TD>Text normal 1</TD>
<TD>
Imagine2, inserata cu ajutorul tag-ului <IMG> astfel:
<IMG src="imagine2.gif" border=0 alt="textul ce numeste imaginea a doua">
</TD>
</TR>
In acest moment am scris prima linie din tabel, linie care contine 3 coloane, respectiv 3 celule
"table data", "umplute" fiecare cu ceea ce ne-am propus, respectiv imagini si text. Trecem acum
sa scriem ce-a de-a doua linie a tabelului.
<TR>
Acest text il dorim aliniat catre dreapta si la baza celului tabelului, deci in tag-ul <TD> vom
introduce atributele align=right si valign=bottom, astfel:
<TD align=right valign=bottom>Text normal 2</TD>
<TD>Text normal 3</TD>
<TD>
Spre deosebire de celelalte texte din tabel, care vor fi afisate in modul "default" (implicit),
nefiind supuse vreunei formataris speciale, de data aceasta, cel de-al patrulea text il dorin
cu caractere Arial, de dimensiunea 10 puncte si de culoare verde:
<FONT face=Arial size=+2 color=green>Text normal 4</FONT>
</TD>
</TR>
Incheind si ce-a de-a doua linie a tabelului prin tag-ul </TR>, am terminat de fapt de scris tabelul
in ansamblul sau. Nu ne mai ramine decit sa "comandam" navigatorului sa deseneze pe monitor
tabelul, prin tag-ul </table>:
</TABLE>
Pentru a avea un exemplu clar de tabel, din exemplul de mai sus vom scoate comentariile
marcate prin culoarea albastra, si vom scrie corect tabelul si continutul sau astfel:
<TABLE width=500 border=1>
<TR>
<TD><IMG src="imagine1.gif" border=0 alt=" textul ce numeste prima imagine"></TD>
<TD>Text normal 1</TD>

EXEMPLU de tabel extins cu o celula extinsa pe mai multe linii :

Tabele cu antete
EXEMPLU de tabel cu antete pe rinduri :

Pag 19
Limbajul HTML

ANTET 1 ANTET 2 ANTET 3

TAG-ul <FRAMESET>

Acest tag realizeaza declaratia unui impartiri in frame-uri a ferestrei navigatorului (browser-ului). El
trebuie sa contina fie o declaratie de cadre orizontale, fie o declaratie de cadre verticale.
Sintaxa: <FRAMESET COLS="lista-dimensiuni-1" ROWS="lista-dimensiuni-2">...</FRAMESET>

TAG-ul <FRAME>

Legaturi in frame-uri

Pag 23
Limbajul HTML

EXEMPLU:
<A HREF="URL_document" TARGET="nume_tinta">Hyperlink Text</A>
unde "nume_tinta" poate fi un nume de frame sau un nume implicit.

Ca nume implicite putem folosi:

SELF - Va fi actualizat cadrul ce contine legatura selectata (implicit);
PARENT - Va fi actualizat cadrul parinte, daca cadrul ce contine legatura este un cadru-fiu. Altfel are
acelasi efect ca si self.
TOP- Va fi actualizata intreaga fereastra activa a browser-ului.

Formulare
Formularele (forms) permit construirea de ecrane de comunicare (transmisie) de date catre un
script (aplicatie, program) prin intermediul unui server Web.

TAG-ul <FORM>

Defineste un formular:
Sintaxa: <FORM ACTION="URL" METHOD=get|post> continut formular </FORM>

Pag 24
Limbajul HTML

Cimpuri de intrare si butoane

Cimpurile de intrare sunt variabile (zone) care pot receptiona informatii de tip text introduse de
catre utilizatorul formularului. Fiecare cimp are asociata o fereastra pe ecranul formularului.
Butoanele sunt obiecte care permit setarea unor optiuni ce urmeaza a fi transmise script-ul server
sau lansarea unor operatii speciale - transmisia datelor formularului (butonul de validare) sau
reinitilizarea datelor cu valorile lor implicite (butonul reset)

Cimpuri de intrare simple si butoane

Cimpurile de intrare simple se caracterizeaza prin aceea ca in fereastra asociata cu cimpul respectiv
nu pot fi introduse mai multe linii de text.

Cimpuri de intrare multilinii

Cimpurile de intrare multilinii se caracterizeaza prin aceea ca in fereastra asociata cu cimpul

respectiv pot fi introduse mai multe linii de text. Tastarea <ENTER> marcheaza sfirsitul unei linii de
text.

TAG-ul <TEXTAREA>

Sintaxa: <TEXTAREA [NAME="nume"] ROWS=nr.linii COLS=nr.coloane >

Liste de selectie

Permit operarea unei selectii intre mai multe optiuni.

TAG-ul <SELECT>

Defineste o lista de optiuni.

Sintaxa: <SELECT NAME="nume" [SIZE=valoare] [MULTIPLE]> lista optiuni </SELECT>

TAG-ul <OPTION>

Defineste o optiune.
Sintaxa: <OPTION [SELECTED]>

Atributul SELECTED indica faptul ca optiunea este cosiderata implicit selectata.

Cimp simplu : <INPUT TYPE="text" NAME="text-scurt" SIZE=40 VALUE="text initial "> <P>

Cimp multilinii : <TEXTAREA NAME="text-lung" ROWS=5 COLS=50>Prima linie

A doua linie</TEXTAREA><P>

Password : <INPUT TYPE="password" NAME="parola" SIZE=20 ></P>

Butoane radio : <INPUT TYPE="radio" NAME="br" VALUE="da" CHECKED> da

Boxe de marcare : <INPUT TYPE="checkbox" NAME="bm" SIZE=40 VALUE="1" CHECKED > 1

Lista de selectie: <SELECT NAME="selectie">

Buton reset : <INPUT TYPE="reset" VALUE="anulare"> <P>

Buton validare : <INPUT TYPE="submit" VALUE="tranmisie"> <P>

Pag 27
Limbajul HTML

Rezultatul procesarii documentului HTML de catre navigator:

text initial
Cimp simplu :

Cimp multilinii :

Butoane radio : da nu

Boxe de marcare : 1 2 3 4 5

Optiune 2
Lista de selectie:

anulare
Buton reset :

tranmisie
Buton validare :

Interpretarea navigatorului:

The Library of the "Gh.Asachi" Technical

University of Iasi
Select one or more of the following data bases:
carti : books (1993-1999)

brevete : patents (1993-1998)

standarde : standards (1993-1998)

articole : articles (1993-1998)

reviste : reviews (1993-1998)

Click herefor the searching query syntax explanations

Enter your query:

start search reset query

100 Engilsh
Maximum number of responses: Language for the next messages:

Pag 30

# data[].attributes.attachment_link.description
Limbajul HTML Pag 1Limbajul HTML Serviciul World-Wide Web (W3 sau simpul Web) s-a nascut in martie 1989 la initiativa luiTim Berners-Lee care l-a propus ca sistem de comunicare de informatii pentru comunitatea fizicienilorde la CERN. retrieval initiative aiming to give universal access to a large universe of documents.

# data[].attributes.attachment_link.readable_text
De ce instrumente ai nevoie pentru a învăța HTML

Pentru a învăța limbajul HTML, ai nevoie de un computer. Nu contează cât de nou e, de cine este fabricat, sau ce putere are. Nici măcar sistemul de operare nu contează atât de mult. Fie că folosești Windows, Linux sau MacOS, limbajul HTML este universal valabil.

Dar pentru că majoritatea folosește Windows 10, vom folosi și noi în acest tutorial sistemul de operare al Microsoft: Windows 10.

Activarea vizibilități extensiilor în Windows 10

Pentru genera mai ușor fisire de tip HTML, este necesar să modificăm o mică setare în Windows 10.

Deschidem o fererastra File Explorer folosind tasta Windows + E. (tasta Windows este în gereral localizată pe tastatură între Ctrl și Alt în colțul din stânga jos). În File Explorer mergem la tabul View, apoi facem click pe Options. Se va deschide o fereastră nouă numită Folder Options. Aici mergem în tabul View și debifam "Hide extentions for known file types". Click pe OK și modificările au fost salvate.

Creăm primul fișier HTML

Mergem pe desktop unde vom crea primul fișier HTML. Facem click dreapta pe desktop apoi mergem la New -> Text Document. Pe desktop avem acum fișierul New Text Document.txt pe care îl redenumim în index.html. Windows ne va avertiza că pot fi probleme dacă schimbăm extensia, dar confirmăm operațiunea.

Cu un dublu click pe index.html deschidem fișierul în browserul web setat că default. (Noi va recomandăm să folosiți Chrome sau Firefox).

Adăugăm conținut în fișierul HTML

Browserul web s-a deshis, dar nu este decât o paqina goală. Urmează să adăugăm conținut în această pagină, dar în primul rând trebuie să adăugăm structura.

Mergem înapoi pe desktop, facem click dreapta pe index.html și apoi Open With -> Notepad, și deshis codul sursă al fișierului index.html.

Putem instala Visual Studio Code gratuit pentru o experiență mai bună la editare.

Apoi în editor scriem următorul cod:

Pentru a salva moficarile folosim Ctrl + S, apoi mergem în browserul web și îi dăm refresh ( F5) fișierului index.html. Observăm că pagina are acum un titlu "Pagina HTML" și conținut texul "Invat bazele HTML".

Finalizăm partea de adăugat conținut cu inserarea unul paragraf în secțiunea body:

Adăugarea unei poze într-o pagină HTML

În codul sursă, sub paragraful adăugat anterior vom adăuga o imagine. Dar pentru asta avem nevoie de un fișier jpg sau png. Cu siguranță aveți undeva în calculator o poză pe care o vom copia pe desktop și o vom redenumi "poza.jpg". Apoi doar adăugam codul:

Adăugarea unui link către o altă pagină

În codul sursă adăugăm sub poză:

Observați că am creat un link către AltWeb, dar acesta este pe aceeași linie cu poza. Pentru a muta link-ul sub poză, inserăm în cod, între poză și link:

Adăugarea unui link către o pagină locală

Creăm un alt fișier, să îl denumim "despre-noi.html". În acest fișier adăugăm următoarea structura:

Salvăm și ne întoarcem la "index.html" unde în codul sursă adăugăm sub link-ul către AltWeb.ro, codul:

Adăugarea unei liste într-o pagină HTML

Codul pentru adăugarea unei liste este intuitiv:

Elemente HTML ce conțin alte elemente HTML

Să zicem că avem nevoie de o listă de link-uri, așa că înlocuim conținutul listei de mai sus cu link-uri. Codul exemplu este mai jos:

Construim un tabel în HTML

Pentru organizarea datelor un tabel este mereu util. Observați structura:

Tabelul este deschis de tagul TABLE. Apoi fiecare rând este deschis de TR (table row).

Primul rând conțin elemente TH (table heading), iar celelalte rânduri conțin elemente TD (celulele de baza ale tabelului).

Observați că am adăugat border și cellpadding pentru a vizualiza cu ușurință structura.

Pentru a nu complica foarte mult lucrurile ne oprim aici cu lecția. După ce stăpâniți bazele HTML, va recomandăm să vizitați https://www.w3schools.com/html pentru a aprofunda aceste cunoștințe.

Ce urmează după ce învățați HTML

După aprofundarea limbajului HTML, urmează să învățați CSS și JavaScript pentru a stiliza și a adaugă elemente interactive paginii web.

După ce stăpâniți CSS și JavaScript urmează să învățați PHP și MySql pentru a putea lucra cu resurse stocate în baze de date și pentru a interacționa cu serverul.

Aveți nevoie de multă pasiune pentru a aprofunda măcar bazele acestor limbaje.

Dacă vreți să învățați să creați pagini web, folosiți recomandările noastre și încercați să învățați lucrând, aplicând din mers ce ați învățat.

Dar dacă vreți să învățați să faceți pagini web doar pentru a vă face un website, va recomandăm să apelați la specialiști, mai ales dacă timpul este prețios pentru dumneavoastră. Nu am recomandă nici măcar Wordpress, chiar dacă este ușor de instalat și de pus în funcțiune, adăugarea de conținut într-o structura dorită necesită alte tutoriale care va vor mânca din timp și presupun învățarea de elemente PHP și CSS.

Pentru orice sfat ne puteți oricând contacta și vă vom îndruma către soluția cea mai bună.

# data[].attributes.attachment_link.title
Curs gratuit web design - Tutorial simplu pentru începători

# data[].attributes.attachment_link.description
Vrei să înveți să faci un website în HTML? Învață ușor HTML folosind un curs de web design simplu si accesibil tuturor, indiferent de nivelul de cunoștințe tehnice. Învață cum poți adăuga o imagine, un link, o listă și un tabel.