Primii Pasi HTML

2.
Primii pasi
Orice document HTML incepe cu notatia <html> si se termina cu notatia </html>. Aceste "chestii" se numesc in literatura de specialitate "TAG-uri".Prin conventie, toate informatiile HTML incep cu o paranteza un hiulara deschisa "<" si se termina cu o paranteza un hiulara inchisa ">". Ta -urile intre aceste paranteze transmit comenzi catre !ro"ser pentru a afisa pa ina intr-un anumit mod. #nele !locuri prezinta delimitator de sfarsit de !loc, in timp ce pentru alte !locuri acest delimitator este optional sau chiar interzis. $ntre cele doua marca%e <html> si </html> vom introduce doua sectiuni& -sectiunea de antet <head>...</head> si - corpul documentului <body>...</body>. 'locul <body>...</body> cuprinde continutul propriu-zis al pa inii HTML, adica ceea ce va fi afisat in ferastra !ro"ser-ului. O eticheta poate fi scris atat cu litere mici, cat si cu litere mari. Adica <HTML> = <HtmL> = <html>. (aracterele "spatiu" si "()*L+" ce apar intre etichete sunt i norate de catre !ro"ser. ,eci un prim document HTML ar fi ceva de enul asta&
<html> <head> </head> <body> </body> </html>
Asa arata primul document HTML. (opiati-l folosind (op-*Paste intr-un fisier nou si salvati-l ca P)$M.HTM sau P)$M.HTML. Apoi porniti .etscape .avi ator sau $nternet /0plorer, dati (T)L-O si introduceti calea spre fisier. ,ati O1 si ... nimic. 2a nu disperam ... vom adau a primele elemente la pa ina noastra. $n primul rand, titlul unei pa ini se o!tine inserand in sectiunea <head>...</head> a urmatoarei linii&
<title>Aceasta este prima mea pa ina de 3e!</title>
$n plus, in sectiunea <body>...</body> putem scrie te0te cat dorim. ,aca nu intalnim nici un marca% < sau > atunci interpretorul HTML le va lua ca te0te simple si le va afisa pe ecran. 2a vedem o noua versiune a pa inii noastre&
<html> <head> <title>Aceasta este prima mea pa ina de 3e!</title> </head> <body>
'ine ati venit in pa ina mea de 3e!4

</body> </html>
vezi acest exemplu
(ontinutul !locului <title>...</title> va aparea in !ara de titlu a ferestrei !ro"ser-ului. ,aca acest !loc lipseste intr-o pa ina HTML, atunci in !ara de titlu a ferstrei !ro"ser-ului va aparea numele fisierului.
,aca introducem mai multe linii intr-o pa ina !ro"ser-ul va afisa intr-un sin ur rand, intrucat caracterele " ()*L+ " sunt i norate de !ro"ser. Trecerea pe o linie noua se face la o comanda e0plicita, care tre!uie sa apara in pa ina html. Aceasta comanda este marca%ul 5 de la " line !rea6 " - intrerupere de linie 7. +olosind aceleasi operatii ca mai sus, vizualizati noua pa ina4 8eti vedea te0tul ce apare in fereastra navi atorului. $n plus, pa ina dvs. va avea un titlu nou, cel introdus de dvs.
<html> <head> <title> titlul pa inii</title> </head> <body> 'ine ati venit in pa ina mea de 3e!4 </body> </html>
vezi acest exemplu
Blocuri preformatate
Pentru ca !ro"ser-ul sa interpreteze corect caracterele " spatiu ", " ta! " si " ()*L+ " ce apar in cadrul unui te0t, acest te0t tre!uie inclus intr-un !loc <pre>...</pre>.
<html> <head> <title>!loc preformatat </title> </head> <body><pre>
</pre></body> </html>
Prima linie A doua linie A treia linie

vezi acest exemplu
Culoarea de fond
O culoare poate fi precizata in doua moduri& Printr-un nume de culoare.2unt disponi!ile cel putin 9: nume de culori& a;ua, !lac6, fuchsia, ra-, reen lime, maroon, nav-, olive, purple, red, silver, teal, "hite si -ello". Prin constructia " <rr !! " unde r 5red7, 5 reen7, sau ! 5!lue7 sunt cifre he0azecimale si pot lua valorile& =, 9, >, ?, @, A, :, B, C, D, a, A, !, ', c, (, d, ,, e, /, f, +E se pot defini astfel :AA?: de culori.
(uloarea unei pa ini se precizeaza prin intermediul unui atri!ut al etichetei <body>. (uloarea fondului pa inii 3e! se sta!ileste cu atri!utul bgcolor al etichetei <body>, de e0emplu& <body bgcolor = culoare>. #rmatorul e0emplu realizeaza o pa ina cu fondul de culoare ri.
<html> <head> <title>culoare de fond </title> </head> <body bgcolor=gray>
O pa ina 3e! cu fondul G)$4

</body> </html>
vezi acest exemplu
Culoarea textului
Acest lucru se face prin intermediul atri!utului text al etichetei <body> dupa sinta0a <body text=culoare>. $n urmatorul e0emplu te0tul are culorea rosie.
<html> <head> <title>culoare te0tului </title> </head> <body text=red>
#n te0t de culoare rosie.

</body> </html>
vezi acest exemplu
O eticheta poate avea mai multe atri!ute.,e e0emplu , o eticheta cu trei atri!ute arata astfel& Feticheta atri!ut9 G valoare9 atri!ut> G valoare> atri!ut? G valoare?H. #rmatorul e0emplu prezinta o pa ina cu fondul de culoare al!astra si te0tul de culoare al!ena.
<html> <head> <title>atri!ute multiple </title> </head> <body bgcolor=blue text=yellow>
+ond de culoare al!astra si te0t de culoare al!ena.

</body> </html>
vezi acest exemplu
Te0tul afisat este caracterizat de urmatoarele atri!ute& Marime 5 size7, (uloare 5color7, +ont 5style7. Acestea sunt atri!ute ale etichetei <ba efont>./ste o eticheta sin ulara 5fara delimitator de sfarsit de !loc7.
<basefont size = numar color = culoare style = font>
unde& numar - poate fi 9, >, ?, @, A, : sau BE 59 pentru fontul cel mai mic si B pentru fontul cel mai mare7E culoare - este o culoare precizata prin nume sau printr-o constructie )G'E font - poate fi un font eneric ca " serif ", " san serif ", " cursive ", " monospace ", "fantas" sau un font specific instalat pe calculatorului clientului, ca " Times .e" )oman ", " Helvetica " sau " Arial ".2e accepta ca valoare si o lista de fonturi separate prin vir ula, de e0emplu& " Times .e" )oman, serif,monospace ".
,omeniul de vala!ilitate al caracteristicelor precizate de aceasta eticheta se intinde de la locul in care apare eticheta pana la sfarsitul pa inii sau pana la urmataorea eticheta <ba efont>. ,aca acest atri!ut lipseste atunci te0tul din pa ina 3e! are atri!ute presta!ilite sau atri!ute precizate de !ro"serul utilizat. Atri!utele presta!ilite sunt& size G ?, color G !lac6, si st-le G " Times .e" )oman " .
Pozitionarea continutului pa inii 3e! fata de mar inile ferestrei !ro"serului se poate face cu a%utorul a doua atri!ute ale etichetei <body>&
leftmargin 5sta!ileste distanta dintre mar inea stan a a ferstrei !ro"serului si mar inea
stan a a continutului pa inii7E topmargin 5sta!ileste distanta dintre mar inea de sus a ferstrei !ro"serului si mar inea de sus a continutului pa inii7E
<html> <head> <title>(onfi urarea te0tului si sta!ilirea mar inii </title> </head> <body leftmargin="100" topmargin="50"> Te0tul are atri!ute implicite. <basefont style=" rial" color="blue" size="!"> Te0tul este scris cu fontul "Arial", culoare al!astru si marime :. </body> </html>
vezi acest exemplu
!tiluri pentru blocurile de text
Pentru ca un !loc de te0t sa apara in pa ina evidentiat 5cu caractere aldine7, tre!uie inclus intre delimitatorii ... 5! vine de la "!old" G indraznet7. Pentru ca un te0t sa fie scris cu carcatere mai mari cu o unitate decat cele curente acesta tre!uie inclus intr-un !loc delimitat de etichetele <bi">...</bi">. Pentru ca un te0t sa fie scris cu carcatere mai mici cu o unitate decat cele curente acesta tre!uie inclus intr-un !loc delimitat de etichetele < mall>...</ mall>. Pentru ca un te0t sa fie scris cu carcatere cursive acesta tre!uie inclus intr-un !loc delimitat de etichetele ... 5i vine de la " italic "7. Pentru a insera secvente de te0t aliniate ca indice 5su!-script7 sau ca e0ponent 5super-script7 , aceste fra mente tre!uie delimitate de etichetele < ub>...</ ub>, respectiv < up>...</ up>. Pentru a insera un !loc de caractere su!liniate se utilizeaza etichetele ... 5u vine de la " underline "7. Pentru a insera un !loc de caractere su!liniate se utilizeaza etichetele < tri#e>...</ tri#e> sau < >...</ >. $n e0emplul urmator vom utiliza toate etichetele mentionate anterior.
<html> <head> <title>2tiluri pentru !locuri de te0t </title> </head> <body> Te0t scris cu caractere in rosate. <big>Te0t cu caractere marite cu o unitate <big>mai mare<big> si mai mare<big> si mai mare.</big></big></big></big> Te0tul este scris cu caractere micsorate cu o unitate mai mic. Te0t scris cu caractere italice. $n aceasta linie sus este superscript iar %os este su!scirpt. <stri"e>Aceasta linie este in intre ime sectionata de o linie orizontala. </stri"e> $n aceasta linie urmatorul cuvant este su!liniat, iar cuvantul <s>stri6e</s> sectoinat. </body> </html>
vezi acest exemplu
!tiluri fi$ice i lo"ice
Am prezentat de%a C stiluri de scriere a caracterelor unui !loc de te0t, numite si stiluri fizice intrucat nu s-a acordat nici o atentie semnificatiei informatiei continute de aceste !locuri. $n continuare sunt prezentate stilurile utilizate la formatarea unui !loc. Aceste stiluri tin cont de semnificatia pe care o are !locul in cadrul pa inii 3e!. Pentru a pune in evidenta 5prin silul cursiv7 fra mente de te0t se utilizeaza etichetele& <cite>...</cite> 5" cite " inseamna citat7E ... 5em vine de la " emphasize " G a evidentia7.
$n locul lor se poate utiliza eticheta echivalenta .... #rmatoarele etichete au efecte similare./le permit scrierea fra mentului de te0t cu caractere monospatiate 5de tipul celor folosite de o masina de scris7& <code>...</code> 5"code" inseamna cod sau sursa7E <#bd>...</#bd> 56!d vine de la " 6e-!oard " G tastatura7E <tt>...</tt> 5tt vine de la " telet-pe " G teleprinter7.
/ticheta de tip !loc <blin#>...</blin#> delimiteaza fra menete de te0t clipitoare. Aceasta eticheta functioneaza numai in !ro"serul .etscape (ommunicator.
<html> <head> <title>'locuri de caractere monospatiate si clipitoare </title> </head> <body>
Aceasta linie este formata din te0t normal.F!rH (odul functiei f50,-7 este& <code>+unction f50,-7 Ireturn 0J-EK</code> Tastati urmatoarea comanda comanda ,O2& <"bd> cop- c&L"indo"sLM c&Ltemp<"bd> <tt>Asa scrie un teleprinter</tt> Acest cuvant clipeste <blin">'lin6</blin">
</body> </html>
vezi acest exemplu
/0emplul urmator ilustreaza ca etichetele pot fi im!ricate. un fra ment de te0t poate fi scris cu aldine si cursive in acelsi timpE pentru un fra ment de te0t se pot folosi simultan stilurile su!liniat, e0ponent, marit si cursiv.
'locul <%>...</%> permite inserarea in-line a citatelor.Aceste citate sunt afisate de catre !ro"ser cu caractere cursive. " % " vine de la " in-line ;uotation " 5citate inserate in-line7E 2i !locurile " % " pot fi im!ricate.
<html> <head> <title>$m!ricarea etichetelor </title>
</head> <body> Aceasta linie este formata din te0t normal.F!rH .ormal in rosat in rosat si italic in rosat . .ormal su!liniat su!liniat si in rosat <big>su!liniat, in rosat si marit. 2u!liniat, in rosat ,marit si italic. </big> </body> </html>

Primii Pasi HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Primii Pasi HTML

Încărcat de

Drepturi de autor:

Formate disponibile

2.

'ine ati venit in pa ina mea de 3e!4

Prima linie A doua linie A treia linie

O pa ina 3e! cu fondul G)$4

#n te0t de culoare rosie.

+ond de culoare al!astra si te0t de culoare al!ena.

!tiluri pentru blocurile de text

!tiluri fi$ice i lo"ice

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