Blog

Cătălin

Cătălin

Contactați-mă la orice oră, pentru orice problemă.

Pentru că foarte puţini dintre noi mai lucrează cu CD-uri, trebuie să ştiţi cum puteţi crea un stick USB bootabil pentru a instala orice sistem de operare.

 

a fost întotdeauna o operaţiune relativ simplă. Cea mai complicată noţiune pe care trebuie să o aveţi în vedere, de cele mai multe ori, este legată de definirea unor partiţii. Înainte de aceasta, prioritară este însă obţinerea unui mediu de instalare. În mod uzual, aţi fi apelat la un CD sau DVD. Acea soluţie nu mai este însă valabilă într-un secol dominat de ultrabook-uri, hibride şi alte sistem portabile care vin fără o unitate optică. Ca urmare, a mai rămas opţiunea utilizării unui stick USB pentru a îndeplini exact aceeaşi operaţiune.

În principiu, acest tutorial se aplică şi pentru crearea de carduri SD bootabile, dar, pentru că este mult mai probabil să aveţi la îndemână un stick USB, în continuare voi face referinţe aproape exclusiv către acest mediu de stocare.

Mai jos, voi descrie în detaliu cum puteţi instala, pornind de la o imagine de CD sau DVD, orice sistem de operare. Multe dintre soluţiile prezentate se aplică în mai multe scenarii, există însă câteva situaţii în care sunt cele mai bune. Totul este să aveţi în vedere faptul că nu e suficientă copierea fişierelor de pe un disc pe un stick de memorie. Sunt necesare programe specializate sau diverse linii de comandă. Ca un mic detaliu, aproape de fiecare dată, ce aveţi pe respectivul stick USB sau card SD se va şterge.

 

O distribuţie Linux dintr-o imagine ISO

Cei de la Canonical, creatorii Ubuntu, recomandă folosirea utilitarului Universal USB Installer, descărcabil gratuit de aici. Acesta funcţionează de minune pe sistemele cu Windows şi vă poate crea stick-uri USB dintr-o varietate foarte mare de distribuţii. Interfaţa este foarte simplă. Nu trebuie decât să vă descărcaţi kitul de instalare al OS-ului de care aveţi nevoie în format ISO, să bifaţi din lista aplicaţiei numele respective distribuţii şi, printr-un click pe browse, să alegeţi fişierul descărcat anterior. După ce aţi trecut prin aceste etape şi aţi ales litera aferentă stick-ului USB, cu un click pe ,,Create” aţi demarat crearea stick-ului bootabil.

O unealtă alternativă pentru aceeaşi operaţiune este UNetbootin. Descărcabil de aici, acest utilitar are avantajul de a rula la fel de bine pe Windows şi pe Linux. Dacă aveţi deja instalat Ubuntu, printre utilitarele incluse în acest sistem de operare se numără şi Startup Disk Creator, o soluţie foarte facilă pentru aceleaşi activităţi.

O distribuţie Linux dintr-o imagine IMG

Unele distribuţii de Linux sunt disponibile pentru descărcare doar în format IMG, în loc de ISO. Acest tip de fişiere RAW trebuie scrise direct pe un mediu de stocare USB. Pentru asta, puteţi folosi Win32 Disk Imager. Descărcabil de aici, acest utilitar funcţionează atât pentru a inscripţiona conţinutul unui IMG pe un stick USB, cât şi pe un SD. Tot ce aveţi pe mediul de destinaţie se va şterge. Deşi este puţin probabil să folosiţi această funcţie, tot Win32 Disk Imager vă permite să creaţi un fişier IMG din conţinutul unui card sau stick de memorie.

Utilizatorii de Linux pot folosi o linie de comandă foarte simplă pentru îndeplinirea acestei sarcini. Cu un stick USB sau card SD conectat la PC, deschideţi o fereastră de terminal şi introduceţi această comandă, fără ghilimele ,,sudo dd if=/home/user/file.img of=/dev/sdX bs=1M”. Nu trebuie decât să înlocuiţi în comandă /home/user/file.img cu locaţia exactă a fişierului IMG sursă. De asemenea, /dev/sdX este calea spre stick-ul de memorie pe care trebuie să o personalizaţi în funcţie de ce aveţi voi în sistem.

Dacă greşiţi şi rămâne introdusă partiţia voastră de boot, riscaţi să v-o corupeţi cu conţinutul imaginii de CD, context în care computerul nu va mai porni.

 

Windows 7 dintr-un ISO

În urmă cu ceva timp, cei de la Microsoft au creat un utilitar foarte simplu de folosit cu numele de Windows 7 USB/DVD download tool. Acesta poate fi descărcat de pe website-ul Microsoft şi funcţionează atât pentru a crea stick-uri USB sau SD-uri bootabile, cât şi DVD-uri. Ca un mic detaliu, acest utilitar nu funcţionează decât cu imagini ISO originale, nemodificate, ce provin de la Microsoft. Dacă nu aveţi un astfel de ISO, îl puteţi descărca direct folosind link-urile de mai jos. Pentru a le folosi, la instalare veţi avea nevoie de un cod de licenţă. Dacă nu-l aveţi, Windows-ul instalat va expira în 30 de zile.

Utilitarul celor de la Microsoft este de genul Next-Next-Finish. În prima etapă alegeţi sursa în format ISO, în a doua etapă alegeţi mediul de stocare de destinaţie, USB Device sau DVD, iar în a treia etapă aşteptaţi câteva minute până se încheie procesul.

 

Windows 8 şi Windows 8.1 dintr-un cod de licenţă

Dacă aveţi o cheie de instalare pentru , puteţi descărca mediul de instalare direct de pe website-ul celor de la Microsoft. În acest mod puteţi obţine un ISO utilizabil ulterior sau puteţi crea direct un stick USB bootabil. Pentru întregul proces a fost creată o pagină web intitulată sugestiv Upgrade Windows with only a product key. Descărcaţi de acolo un utilitar de câţiva MB, introduceţi codul vostru de licenţă şi urmaţi cei doi, trei paşi, bifând realizarea unui ,,USB flash drive”.

Nu uitaţi că sunt coduri diferite pentru instalarea Windows 8 şi Windows 8.1. Dacă nu aveţi un cod pentru versiunea mai recentă de Windows, cel mai bine ar fi să instalaţi Windows 8 şi după aceea să faceţi upgrade gratuit la Windows 8.1. Aceasta este metoda recomandată şi suportată de Microsoft.

Windows 8 şi Windows 8.1 dintr-un ISO

În cazul în care aveţi deja un ISO cu Windows 8 sau WIndows 8.1 pe care vreţi să-l folosiţi la instalarea sistemului de operare de pe un stick USB, pentru crearea mediului de bootare, funcţionează la fel de bine utilitarul Windows 7 USB/DVD download tool. Nu trebuie decât să alegeţi în prima etapă ISO-ul pe care îl aveţi disponibil şi să urmaţi aceeaşi paşi pe care i-am detaliat mai sus.

 

Stick USB cu DOS

Chiar dacă suntem în 2014, nu este exclus să aveţi nevoie de un stick USB cu DOS pentru update de BIOS sau pentru actualizarea firmware-ului unei componente hardware, gen placă video. Rufus este un utilitar gratuit pentru această operaţiune ce poate fi descărcat de aici. Rufus foloseşte FreeDOS, o versiune open source a popularului sistem de operare ce vă permite să rulaţi orice program de DOS de care aţi avea nevoie.

Utilitarul în sine este foarte simplu de folosit. Îl porniţi cu un stick USB conectat pe care îl alegeţi ca destinaţie în partea de sus a ferestrei, în câmpul Device. În rest, bifaţi toate funcţiile precum în captura de ecran de mai sus, mai ales partea cu ,,Create a bootable disk using FreeDOS” şi faceţi click pe Start.

 

Stick USB bootabil cu Mac OS X

Cel mai recent OS X, Mavericks, poate fi descărcat gratuit din Mac AppStore. Pentru a trece respectivul fişier pe un stick USB aveţi două opţiuni. Puteţi folosi o linie de comandă în terminal, de forma ,,createinstallmedia” sau, mai intuitiv, puteţi folosi utilitarul DiskMaker X, descărcabil gratuit tot din AppStore-ul de Mac sau de aici.

Dacă vă încântă mai mult varianta complicată, în primul rând trebuie să fi descărcat OS X Mavericks. Pentru a verifica dacă îl aveţi descărcat, ar trebui să apară în Applications cu numele de Install OS X Mavericks. După această etapă, totul se rezumă la o linie de comandă pe care vă recomand să o copiaţi, fără ghilimele, exact cum o vedeţi mai jos.

,,sudo /Applications/Install\ OS\ X\ Mavericks.app/Contents/Resources/createinstallmedia –volume /Volumes/Name –applicationpath /Applications/Install\ OS\ X\ Mavericks.app –nointeraction”

Singura modificare pe care trebuie să o faceţi pe sistemul vostru este să înlocuiţi cuvântul Name, îngroşat mai sus, cu numele stick-ului USB exact aşa cum apare în Finder. Nu este exclus să poarte numele de Untitled, dacă a fost formatat recent, dar poate fi redenumit în orice.

Stick-ul proaspăt creat poate fi folosit pentru a instala cea mai recentă versiune de OS X pe orice Mac sau pentru a actualiza un sistem cu o versiune mai veche a sistemului de operare creat de Apple. Deşi OS-ul în sine este gratuit, cu un astfel de memory stick scăpaţi de timpi îndelungaţi de descărcare.

 

Dintr-un ISO cu Windows pe Mac

Cea mai bună metodă pentru a rula Windows pe Mac implică sistemul BootCamp inclus în OS X. Acest utilitar, accesibil din secţiunea Utilities din Applications, vă trece prin toate etapele necesare realizării unui stick USB bootabil. În plus, cel mai important avantaj este că Boot Camp vă va trece conţinutul unui ISO cu Windows 7, Windows 8 sau Windows 8.1 pe stick şi vă va include pe acelaşi mediu de stocare şi toate driverele de care aveţi nevoie pentru ca lucrurile să meargă ca unse pe MacBook-ul vostru cu Windows. De asemenea, nu uitaţi că pentru a intra înapoi în OS X aveţi nevoie de utilitarul Boot Camp instalat pe Windows.

Stick-ul USB cu Windows realizat prin intermediul asistentului Boot Camp poate fi folosit pentru a instala Windows pe orice Mac, dar nu şi pentru a instala Windows pe un PC.

Ce trebuie să mai ştiţi?

Toate utilitarele descrise mai sus foarte intuitive. Mare problemă este că s-ar putea să nu le ştiţi numele, să nu ştiţi la ce folosesc, care sunt cele mai bune pentru scenariul vostru sau de unde le puteţi descărca. Răspunsul la toate aceste întrebări îl găsiţi mai sus.

playtech.ro

Zona geografică în care se află astăzi România, a fost în urmă cu peste 10.000 de ani, vatra lumii, locul unde a început cu adevărat civilizaţia umană. Acest adevăr este destul de greu de digerat pentru celelalte mari naţiuni, printre care şi cu aspiraţii inalte la titlul de popor ales.

Miceal Ledwith, confident al Papei Ioan Paul al II-lea şi omul care a avut acces la toate documentele secrete din biblioteca Vaticanului, a făcut recent o afirmaţie care a şocat lumea academică şi nu numai. El a declarat că latina cultă se trage din limba română străveche, nu invers, cum se credea până acum!

Într-un interviu acordat postului de televiziune TVR Cluj, în decembrie 2012, Miceal Ledwith, fost consilier al Papei Ioan Paul al II-lea (foto), unul din oamenii care au avut acces la cei 230 de kilometri de rafturi cu cărţi din arhiva bibliotecii Vaticanului şi fost membru al Comisiei Teologice Internaţionale, a făcut o declaraţie şocantă:

“Chiar dacă se ştie că latina e limba oficială a Bisericii Catolice, precum şi limba Imperiului Roman, iar limba română este o limbă latină, mai puţină lume cunoaşte că limba română, sau precursoarea sa, vine din locul din care se trage limba latină, şi nu invers.

Cu alte cuvinte, nu limba română este o limbă latină, ci mai degrabă limba latină este o limbă românească. Aşadar, vreau să-i salut pe oamenii din Munţii Bucegi, din Braşov, din Bucureşti. Voi sunteţi cei care aţi oferit un vehicul minunat lumii occidentale (limba latină – n.r.)”. Această declaraţie o puteţi vedea inclipul de mai jos, intre minutele 52.30 – 53.11.

Cu alte cuvinte, teoria conform căreia romanii au cucerit o parte din Dacia, iar dacii, inclusiv cei din teritoriile necucerite de Roma, şi-au abandonat limba strămoşilor lor şi au început să vorbească latina e falsă. Conform declaraţiei lui Ledwith, la întâlnirea lor cu romanii, dacii nu au avut nevoie de translatori: vorbeau deja limba din care se născuse chiar latina. Din această perspectivă, românii apar drept unul şi acelaşi popor cu dacii, continuatorii direcţi şi legitimi ai acestora. Mai mult, ar rezulta că şi romanii ar fi fost neam tracic.

Menţionăm că Miceal Ledwith este o personalitate irlandeză care nu are interese personale în România. De asemenea, reamintim că Papa Ioan Paul al II-lea a spus, cu ocazia vizitei în ţara noastră, din anul 1999, că România este “Grădina Maicii Domnului”. În această ordine de idei, se pune întrebarea: ce ştiu cei de la Vatican despre noi, iar noi habar nu avem?
Genetic, nu ne-am schimbat de 5.000 de ani, suntem tot daci

Un studiu de paleogenetică, realizat între anii 2003-2006, a arătat că, genetic, suntem daci, iar teoria latinizării făcute de Imperiul Roman este falsă.

Studiul, realizat de dr. Georgeta Cardoş, specialist în genetică, cu sprijinul Universităţii din Hamburg, Germania, a pornit de la ţesuturi osoase recoltate din peste 20 de situri arheologice din România, de la un număr de 50 de indivizi aparţinând populaţiilor care au trăit aici cu 5.000 de ani în urmă. Datele genetice obţinute au fost comparate cu cele ale românilor de astăzi. Concluzia a fost că între actuala populaţie a României şi cele care au trăit pe teritoriul acestei ţări cu 5.000 de ani în urmă există o clară înrudire genetică, iar fondul de bază dovedeşte continuitatea şi legătura strânsă cu populaţia străveche, adică cu dacii, ramura nord-dunăreană a marelui neam tracic.

Pilotii orbi - Mircea Eliade - 1937

Imoralitatea clasei conducãtoare românesti, care detine “puterea” politicã de la 1918 încoace, nu este cea mai gravã crimã a ei. Cã s-a furat ca în codru, cã s-a distrus burghezia nationalã în folosul elementelor alogene, cã s-a nãpãstuit tãrãnimea, cã s-a introdus politicianismul în administratie si învãtãmânt, cã s-au desnationalizat profesiunile libere - toate aceste crime împotriva sigurantei statului si toate aceste atentate contra fiintei neamului nostru, ar putea - dupã marea victorie finalã - sã fie iertate. Memoria generatiilor viitoare va pãstra, cum se cuvine, eforturile si eroismul anilor cumpliti 1916-1918, lãsând sã se astearnã uitarea asupra întunecatei epoci care a urmat unirii tuturor românilor.

Intrebarea pe care ne-o punem cu toții este:

De ce majoritatea persoanelor nu se simnt vinovate când ar trebui să se simntă așa?

Când iși dau seama că au făcut rău cuiva apropiat, de ce nu se simnt vinovați?

Explicația ne-o dă o teorie numită disonanță cognitivă. Disonanță cognitivă este o senzație de disconfort care apare atunci când două atitudini, sau o credință și un comportament intră în conflict.

Un exemplu concludent ar fi atunci când fumezi chiar dacă ști că te poti îmbolnăvi.

Acest mecanism de disonanță a fost confirmat prin mii de experimente și a fost localizat în creier.

Ființele umane sunt predispuse să dea atenție la informația care confirmă ideile propri și să ignore ori minimizeze  informația care combate ceea ce ei cred.

Mintea noastră este proiectată pentru ¨consonanță¨. Disonanța este în mod special dureroasă atunci când amenință un element din concepția pe care o avem despre noi inșine, când această informație pune în pericol felul în care ne vedem (considerăm), sau când chestionează o credință politică ori religioasă pe care o considerăm fundamentală.

(fragmente dintr-o scrisoare trimisa unui prieten)

 bl   As vrea sa plecam de la considerentul ca as putea fi un frate mai mare al tau sau un amic mai batran in care normal ar fi sa ai incredere. Tot ceea ce eu spun, o spun fara a pretinde ca am dreptate, o spun datorita experientei acumulata aici si a termenului de comparatie pe care eu il am traind in doua lumi (culturii) diferite din care una-i Romania noastra iar cealalta restul Europei, lumea civilizata.

HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor web. Paginile HTML contin elemente (etichete) si au extensia .html sau .htm.

Puteti scrie astfel de fisiere cu Notepad sau cel mai indicat cu un editor specializat, de exemplu Crimson Editor, care va indica si numarul liniilor, lucru util la depanarea codului HTML. Verificati ca nu aveti extensiile ascunse (My Computer -> Tools -> Folder Options -> View -> debifati Hide extensions for known file types). Pentru a putea crea fisiere html dati clic dreapta New -> Text Document, apoi il redenumiti index.html.

Elemetele sunt incadrate de tag-uri. Tag-urile sunt simbolurile care marcheaza inceputul si sfarsitul unui element. Tag-ul pentru inceput este < iar pentru sfarsit este >.

In marea lor majoritate elementele sunt pereche, una de deschidere <eticheta> si alta de inchidere </eticheta>. Browserul interpreteaza aceste etichete afisand rezultatul pe ecran. HTML nu este un limbaj case sensitiv (nu face deosebirea intre litere mici si mari).

Pagina principala a unui domeniu este fisierul index.html. Aceasta pagina este setata a fi afisata automat la vizitarea unui domeniu.
De exemplu la vizitarea domeniului www.nume.ro este afisata pagina www.nume.ro/index.html.

Unele etichete permit utilizarea de atribute care pot avea anumite valori:
<eticheta atribut="valoare"> ... </eticheta>

Componenta unui document HTML este:
1. versiunea HTML a documentului
2. zona head cu etichetele <head> </head>
3. zona body cu etichetele <body> </body> sau <frameset> </frameset>

Versiunea HTML poate fi:

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Toate paginile HTML incep si se termina cu etichetele <html> si </html>.
In interiorul acestor etichete gasim perechile <head>, </head> si <body>, </body>.

head contine titlul paginii intre etichetele <title> si </title>, descrieri de tip <meta>, stiluri pentru formatarea textului, scripturi si linkuri catre fisiere externe (de exemplu scripturi, fisiere de tip CSS sau favicon).

Etichetele de tip meta contin cuvinte cheie, descrierea paginii, date despre autor, informatii utile motoarelor de cautare si au urmatorul format:

<META NAME="nume" CONTENT="continut">

Exemplu: link catre un fisier extern CSS:

<link rel="stylesheet" type="text/css" href="/css.css">

body gazduieste practic toate etichetele afisate de browser pe ecran.

Exemplu: o pagina HTML cu titlul Exemplu iar continutul Continut pagina

<html>
<head>
<title>Titlu</title>
</head>
<body>
Continut pagina
</body>
</html>

Comentariul in HTML, care bineinteles nu va fi afisat de browser, poate fi introdus astfel:

<!-- Acesta este un comentariu in HTML -->

Formatare text

In HTML trecerea la un rand nou se face doar prin introducerea etichetei <br> iar pentru paragraf nou cu eticheta <p>.

Exemplu

HTML

Afisare

Proba text.<br>
Text pe un rand nou.<p>
Text intr-un paragraf nou.

Proba text.
Text pe un rand nou.

Text intr-un paragraf nou.

<hr> introduce o linie linie orizontala si trecerea la un rand nou.


Folosind etichete adecvate textul poate fi formatat.
Spre exemplu fonturilor li se poate modifica: marimea, culoarea, forma (normal, bold, italic), familia (Arial, Verdana, etc.), textul poate fi aliniat pe orizontala sau verticala iar titlurile (header), de la 1 la 6, sunt diferite ca marime (1 cel mai mare iar 6 cel mai mic).

Etichetele <span> si </span> delimiteaza un sir de caractere in vederea formatarii.

Etichetele <div> si </div> sunt similare etichetelor <span> si </span>, cu diferenta ca formateaza mai multe elemente si introduc un rand nou inainte si dupa sfarsitul zonei formatate.

Unul din atributele blocului div este align care poate lua valorile:
center aliniere pe centru
left aliniere la stanga
right aliniere la dreapta

In situatia in care dorim ca textul introdus sa fie afisat exact asa cum a fost introdus (text preformatat) in fisierul sursa vom folosi pereche de etichete <pre> si </pre>.

Exemplu

HTML

Afisare

text normal

text normal

<b>text bold</b>

text bold

<i>text cursiv</i>

text cursiv

<u>text subliniat</u>

text subliniat

<del>text taiat</del>

 

<sup>exponent</sup>

exponent

<sub>indice</sub>

indice

<tt>caractere monospatiate</tt>

caractere monospatiate

<cite>Citat</cite>

Citat

<em>evidentiat</em>

evidentiat

<code>text scris la tastatura</code>

text continand cod de computer

<kbd>text scris la tastatura</kbd>

text scris la tastatura

<samp>mostra de cod de computer</samp>

mostra de cod de computer

<strong>text ingrosat</strong>

text ingrosat

<big>mare</big>

mare

<small>mic</small>

mic

<font color="red">font rosu</font>

font rosu

<font face="Courier">font Courier</font>

font Courier

<font size="6">font size=6</font>

font size=6

<div align="center">text aliniat pe centru</div>

text aliniat pe centru

<div align="left">text aliniat la stanga</div>

text aliniat la stanga

<div align="right">text aliniat la dreapta</div>

text aliniat la dreapta

<h1>Titlu 1</h1>

Titlu 1

<h2>Titlu 2</h2>

Titlu 2

<h3>Titlu 3</h3>

Titlu 3

<h4>Titlu 4</h4>

Titlu 4

<h5>Titlu 5</h5>

Titlu 5

<h6>Titlu 6</h6>

Titlu 6

Legenda:
br = line break
p = paragraph
hr = horizontal rule

Liste

Listele sunt un mod simplu de organizare a informatiei si pot fi neordonate, ordonate si de definitii.

Liste neordonate
Aceste liste sunt delimitate de etichetele <ul> si </ul> iar elementele de <li> si </li>.

Exemplu

HTML

Afisare

Exemple de fructe:
<ul>
<li>mere</li>
<li>pere</li>
<li>struguri</li>
</ul>

Exemple de fructe:

  • mere
  • pere
  • struguri

Elementele listei pot fi particularizate folosind atributul type care poate lua valorile square, circle si disc.

Exemplu

HTML

Afisare

Exemple de legume:
<ul>
<li type="square">rosii</li>
<li type="circle">cartofi</li>
<li type="disc">morcovi</li>
</ul>

Exemple de legume:

  • rosii
  • cartofi
  • morcovi

Liste ordonate
Aceste liste sunt delimitate de etichetele <ol> si </ol> iar elementele de <li> si </li>.

Exemplu

HTML

Afisare

Exemple de combustibili:
<ol>
<li>benzina</li>
<li>motorina</li>
<li>gaz lichefiat</li>
</ol>

Exemple de combustibili:

  1. benzina
  2. motorina
  3. gaz lichefiat

Elementele listei pot fi particularizate folosind atributul type care poate lua valorile A (litere mari), a (litere mici), I (cifre romane mari), i (cifre romane mici), 1 (optiunea default):

Exemplu

HTML

Afisare

Medii de stocare:
<ol>
<li type="I">HDD-ul</li>
<li type="I">discheta</li>
<li type="I">CD-ROM-ul</li>
</ol>

Medii de stocare:

  1. HDD-ul
    1.      II.            discheta
    2. CD-ROM-ul

Liste de definitii
Aceste liste sunt delimitate de etichetele <dl> si </dl>.
Termenii listei sunt delimitati de etichetele <dt> si </dt> iar definitiile termenilor de <dd> si </dd>.

Exemplu

HTML

Afisare

Legenda:
<dl>
<dt>HTML</dt>
<dd>Hyper Text Mark-ul Language</dd>
<dt>IP</dt>
<dd>Internet Protocol</dd>
</dl>

Legenda:

HTML

Hyper Text Mark-ul Language

IP

Internet Protocol

Listele pot fi imbricate, adica in interior pot contine una sau mai multe liste.

Exemplu

HTML

Afisare

<ol>
<li>Monitoare
<ul>
<li>CRT</li>
<li>LCD</li>
</ul>
</li>
<li>Imprimante
<ul>
<li>cu jet de cerneala</li>
<li>laser</li>
</ul>
</li>
</ol>

  1. Monitoare
    • CRT
    • LCD
  2. Imprimante
    • cu jet de cerneala
    • laser

Legenda:
ul = unordered list
ol = ordered list
li = list item
dl = definition list
dt = term in a definition list
dd = description of a term in a definition list

Legaturi

Legaturi
Legatura (link-ul) este o eticheta foarte importanta in HTML deoarece confera utilizatorului posibilitatea navigarii de la o pagina la alta. Deobicei link-ul este subliniat iar atunci cand suntem deasupra lui cursorul isi schimba forma.

Link-ul este definit cu etichetele <a> si </a> si are atributele:
href - adresa fisierului destinatie
target - in ce fereastra se va deschide fisierul destinatie
title - mica descriere asociata legaturii afisata in momentul in care mouse-ul se afla deasupra legaturii

<a href="/adresa-fisier" target="_blank" title="titlu">

Adresa fisierului destinatie poate fi exprimata astfel:
nume fisier, daca se afla in acelasi folder cu pagina curenta

<a href="/fisier.html">

folder/nume fisier,daca se afla in alt folder

<a href="/folder/fisier.html">

adresa URL, fiind adresa completa a paginii

<a href="http://www.proba.ro/fisier.html">

Atributul target poate lua valorile:
_blank pagina va fi incarcata intr-o noua fereastra
_parent pagina va fi incarcata in fereastra parinte
_top pagina va fi incarcata in fereastra top a cadrului
_self pagina va fi incarcata in aceeasi fereastra

Exemplu: link catre pagina www.drogoreanu.ro

HTML

Afisare

<a href="http://www.drogoreanu.ro">Catalin Drogoreanu</a>

Catalin Drogoreanu

Exemplu: link catre pagina www.drogoreanu.ro incarcata intr-o noua fereastra

HTML

Afisare

<a href="http://www.drogoreanu.ro" target="_blank">Catalin Drogoreanu</a>

Catalin Drogoreanu

Putem insera un link catre o adresa de e-mail putand asocia si un subiect prestabilit

HTML

Afisare

<a href="mailto:Această adresă de email este protejată de spambots. Trebuie să aveți JavaScript activat ca să o puteți vedea. ">Trimite e-mail</a>

Această adresă de email este protejată de spambots. Trebuie să aveți JavaScript activat ca să o puteți vedea.

<a href='mailto:Această adresă de email este protejată de spambots. Trebuie să aveți JavaScript activat ca să o puteți vedea. ?subject="subiect prestabilit"'>Trimite e-mail</a>

Această adresă de email este protejată de spambots. Trebuie să aveți JavaScript activat ca să o puteți vedea.

Culoarea linkurilor
Poate fi modificata introducand in eticheta body urmatoarele atribute:
LINK legatura nevisitata (default albatru)
VLINK legatura visitata (default rosu)
ALINK legatura activa (nu prea se foloseste - default portocaliu)

Exemplu:

<html>
<head>
<title>Exemplul 3_3</title>
</head>
<body link="green" vlink="black" alink="yellow">
<a href="/link.html">Link</a>
</body>
</html>

Ancore
Se pot adauga puncte de reper (ancore) pentru o deplasare mai usoara in cazul unor pagini HTML lungi sau catre un loc anume aflat intr-o alta pagina.
Ancora se defineste tot intre etichetele <a> si </a> dar cu atributul name. Pentru a face trimitere catre ancora se introduce un link cu atributul href avand ca valoare denumirea ancorei.

Exemplu:

Ancora

<a name="nume">Ancora</a>

Link catre ancora aflata in aceeasi pagina

<a href="#nume">Inapoi la ancora</a>

Link catre ancora aflata in alta pagina

<a href="/pagina.html#nume">Inapoi la ancora din pagina.html</a>

Imagini

Folosind imagini pagina capata un plus de atractivitate dar puteti plati pretul unei incarcari greoaie daca dimensiunile imaginii sunt mari.

Cateva din formatele de imagini utilizate in paginile web sunt: JPEG (*.jpg sau *.jpeg), GIF (*.gif), BMP (*.bmp), PNG (*.png).

Formatul GIF (8 biti) contine maximum 256 culori, fiind recomandat pentru grafica (butoane, icon-uri, etc.). Imaginile gif pot fi animate. Puteti crea gif-uri animate folosind Adobe Image Ready.

Formatul JPG sau JPEG contine milioane de culori si este folosit pentru fotografii. Formatul JPG foloseste un algotitm complex de comprimare. Daca salvati imaginea JPG cu compresie mica, veti obtine o calitate foarte buna dar dimensiunea fiserului va fi foarte mare. Cu compresie mare imaginea va avea o calitate proasta dar fisierul va fi foarte mic. Un raport optim intre calitatea imaginii si dimensiunea fisierului veti obtine pentru o compresie 60%.

Formatul bmp este putin folosit datorita dimensiunilor mari.

Eticheta folosita pentru inserarea unei imagini in pagina este <img> si are urmatoarele atribute:
src = sursa, locul unde se afla imaginea
width = latimea imaginii
height = inaltimea imaginii
alt = numele care inlocuieste imaginea pana aceasta se incarca sau cand nu a fost gasita
border = chenar (0 = lipsa bordura)

Dimensiunea imaginii afisate de browser este stabilita de argumentele width si height care pot fi diferite de dimensiunile imaginii originale, caz in care imaginea va fi redimensionata automat de catre browser.

Exemplu: o imagine cu latime 100px, inaltime 75px, alt=poza si border=0 si inca o data cu border=1

HTML

Afisare

<img src="/poza.jpg" width="100" height="75" alt="poza" border="0">

 

<img src="/poza.jpg" width="100" height="75" alt="poza" border="1">

 

Pentru a micsora timpul incarcarii complete a paginii exista programe care optimizeaza imaginile. Optimizarea consta in:
1. reducerea dimensiunii imaginii fara degradarea majora a calitatii
2. eliminarea informatiilor tip metadata asociate imaginii. Aceste date (EXIF/IPTC) sunt asociate automat de programele de grafica (de ex. Adobe Photoshop) sau de aparatele de fotografiat digitale. Pentru eliminarea acestor informatii puteti folosi aplicatia Exifer.

In Internet Explorer valoarea atributului alt este afisata in browser in momentul in care mouse-ul se afla deasupra imaginii. Pentru a obtine aceeasi afisare in Firefox in eticheta img se adauga atributul title avand acceasi valoare ca si alt.

Exemplu: acceasi imagine care contine atributele alt si title (verificati cu Internet Explorer si Firefox)

 

 

HTML

Afisare

<img src="/poza.jpg" width="100" height="75" alt="poza" title="poza" border="0">

 

Tabele

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

Tabelul este format din linii si coloane impartind zona in celule. Fiecare celula pastreaza informatia care va fi afisata. Pentru o afisare corecta a tabelului fiecare rand va avea acelasi numar de celule. Daca dorim ca o celula sa fie goala vom introduce un spatiu gol (space) sau codul echivalent &nbsp;.

Pentru inserarea unui tabel este folosita perechea de etichete <table> si </table>, pentru un rand <tr> si </tr> iar pentru o celula <td> si </td>.

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

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

HTML

Afisare

<table border="1"> <tr><td width="80" bgcolor="red">rosu</td><td width="160" bgcolor="yellow">galben</td></tr> <tr><td bgcolor="white">alb</td><td bgcolor="green">verde</td></tr> </table>

rosu

galben

alb

verde

 

Atributele etichetei table sunt:
border = bordura (0 = lipsa bordura)
width = latimea tabelului
height = inaltimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folositi style)
cellspacing = distanta intre celule
cellpadding = distanta dintre marginea celulei si continut

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

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

HTML

Afisare

<table border="1"> <tr> <td bgcolor="white">R1 C1</td> <td bgcolor="yellow">R1 C2</td> <td bgcolor="white">R1 C3</td> <td bgcolor="yellow">R1 C4</td> </tr> <tr> <td colspan="2" bgcolor="red">R2 C1+C2</td> <td bgcolor="yellow">R2 C3</td> <td bgcolor="red">R2 C4</td> </tr> <tr> <td rowspan="2" bgcolor="white">R3 C1 + R4 C1</td> <td bgcolor="yellow">R3 C2</td> <td bgcolor="white">R3 C3</td> <td bgcolor="yellow">R3 C4</td> </tr> <tr> <td bgcolor="red">R4 C2</td> <td bgcolor="yellow">R4 C3</td> <td bgcolor="red">R4 C4</td> </tr> </table>

R1 C1

R1 C2

R1 C3

R1 C4

R2 C1+C2

R2 C3

R2 C4

R3 C1 + R4 C1

R3 C2

R3 C3

R3 C4

R4 C2

R4 C3

R4 C4

 

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

Exemplu: un tabel cu 3 randuri si 2 coloane folosind pe primul rand etichetele <th> si </th>

HTML

Afisare

<table border="1"> <tr> <th width="120">Titlul 1</th> <th width="120">Titlul 2lt;/th> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>

Titlul 1

Titlul 2

1

2

3

4

 

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

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

HTML

Afisare

<table border="1"> <caption>Necesar alimente</caption> <tr> <th width="120">Produse</th> <th width="120">Cantitatelt;/th> </tr> <tr> <td>Fructe</td> <td>1 kg</td> </tr> <tr> <td>Legume</td> <td>5 kg</td> </tr> <tr> <td>Carne</td> <td>1,5 kg</td> </tr> </table>

Necesar alimente

Produse

Cantitate

Fructe

1 kg

Legume

5 kg

Carne

1,5 kg

 

Exemplu: tabelului anterior ii adaugam o imagine de fundal folosind style in zona head

<html>
<head>
<style type="text/css">
#fundal {
background-image : url(poza.jpg);
}
</style>
</head>
<body>
<table border="1" id="fundal">
...
</body>
</html>

Legenda:
tr = Defines a row in a table
td = Defines a cell in a table
th = Defines a table header cell in a table

Sunete

Cateva din formatele de sunete utilizate in paginile web sunt: MIDI (*.mid sau *.midi), WAVE (*.wav), AU (*.au).

In pagini putem introduce:
1. link-uri catre fisiere de sunet
2. sunete care care sa fie audiate direct din pagina web
3. sunet de fond (fundal sonor)

Exemplu: Varianta 1 este un simplu link catre un fisier de sunet

HTML

Afisare

<a href="/1.mid">fisier sunet</a>

fisier sunet

A doua varianta mentionata se realizeaza folosind fisiere de tip flash, care pot contine si butoane de control de tip Play, Pause, Stop.

A treia varianta este acceptata doar de browserul Internet Explorer si consta in inserarea in interiorul corpului paginii a etichetei: <bgsound> care poate avea atributele:
src - fisierul sursa de sunet care va fi audiat
loop - numarul de repetitii ale fisierului ("infinite" sau "-1" pentru infinit si un numar intreg care indica de cate ori va fi audiat fisierul)

Videoclipuri

Formatele de videoclipuri utilizate in paginile web sunt: MPEG (*.mpg sau *.mpeg), QuickTime (*.mov), AVI (*.avi).

In pagini putem introduce:
1. link-uri catre fisiere video
2. videoclipuri care care sa fie vizionate direct din pagina web

Exemplu: Varianta 1 este un simplu link catre un fisier video

HTML

Afisare

<a href="/1.avi">fisier video</a>

fisier video

A doua varianta este acceptata doar de browserul Internet Explorer care permite atribute speciale in eticheta <img>:
dynsrc - fisierul sursa video care va fi vizionat
loop - numarul de repetitii ale fisierului ("infinite" sau "-1" pentru infinit si un numar intreg care indica de cate ori va fi vizionat fisierul)
start - indica momentul in care fisierul va fi vizionat (fileopen=cand pagina a fost incarcata, mouseover=cand mose-ul este deasupra imaginii)
controls - afiseaza butoanele de control

Cadre

Exemplele prezentate in capitolele anterioare incarcau o singura pagina HTML in fereastra browserului.

Sunt si situatii in care imaginea afisata de browser este formata din mai multe pagini HTML numite cadre. Caracteristic acestor pagini este ca perechea de etichete <body> </body> este inlocuita de <frameset> </frameset>, iar in interiorul lor cadrele sunt delimitate de <frame> si </frame>.

Atributele etichetei frameset sunt:
cols imparte pagina in coloane si are valori exprimate in procente din dimensiunea ferestrei, numar de pixeli sau * adica spatiul ramas
rows imparte pagina in randuri cu aceleasi valori ca la cols
bordercolor culoarea tuturor chenarelor conform modelului #rrggbb
frameborder inhibarea afisarii chenarelor cu valorile yes sau no

Cadrele sunt introduse prin perechea de etichete <frame> </frame>, si suporta atributele:
src fisierul sau adresa fisierului introdus
bordercolor culoarea chenarului cadrului curent conform modelului #rrggbb
noresize dezactiveaza posibilitatea vizitatorului de a redimensiona cadrul
scrolling adauga cadrului bare de defilare cu valorile yes no si auto

Exemplu: pagina cu doua cadre orizontale in proportia 20% si 80% din inaltimea totala. Pagina de sus are chenarul rosu iar cea de jos are scroll.

<html>
<head>
<title>Exemplul 8_1</title>
</head>
<frameset rows="20%,80%">
<frame src="/exemplu8_1_1.html" bordercolor="#ff0000">
<frame src="/exemplu8_1_2.html" scrolling="yes">
</frameset>
</html>

Exemplu: pagina cu doua cadre verticale in proportia 40% si 60% din latimea totala, fara posibilitatea de redimensionare a cadrelor

<html>
<head>
<title>Exemplul 8_2</title>
</head>
<frameset cols="40%,60%">
<frame src="/exemplu8_2_1.html">
<frame src="/exemplu8_2_2.html" noresize>
</frameset>
</html>

Exemplu: pagina cu doua cadre. In cadrul din stanga sunt link-ri catre alte pagini care se vor deschide in cadrul din dreapta (se poate verifica functionarea atributului target al legaturii). Cadrul din stanga va avea scroll.

In situatia in care browserul folosit nu suporta pagini care contin cadre, imaginea afisata va fi goala. Pentru a evita acest lucru vom introduce un mesaj incadrat de <body> si </body> intre etichetele <noframes> si </noframes> prin care informam vizitatorul ca foloseste un browser care nu suporta cadre.

<frameset cols = "30%, 40%,*">
<noframes>
<body>Browserul folosit nu suporta cadre</body>
</noframes>
<frame src ="pag1.html">
<frame src ="pag2.html">
<frame src ="pag3.html">
</frameset>

Cadre in-line
Sunt blocuri care se introduc in pagina prin perechea de etichete <iframe> si </iframe>, si au atributele:
src fisierul sau adresa acestuia
height inaltimea cadrul
width latimea cadrul
frameborder grosimea bordurii (chenarului)
scrolling adauga bare de defilare cu valorile yes no si auto
align aliniaza cadrul (left, right, center, top, bottom, middle)
vspace distanta peste si sub cadru
hspace distanta in stanga si in dreapta de cadru

Exemplu: o pagina in care este gazduit un cadru in-line. Si aici se poate introduce un mesaj pentru browserele care nu suporta cadre in-line. Modul de afisare al exemplului poate diferi de la un browser la altul.

<html>
<head>
<title>Exemplul 8_4</title>
</head>
Mai jos este un cadru in-line cu urmatori parametrii:<br>
width="300" si height="200" hspace="200" vspace="100" scrolling="yes"<br>
<iframe src="/pag.html" width="300" height="100" hspace="200" vspace="100" scrolling="yes">Browserul folosit nu suporta cadre in-line</iframe>
</body>
</html>

Formulare

Folosind formularele webdesignerul sau administratorul site-ului poate colecta diverse informatii de la vizitatori.

Cele mai importante atribute ale etichetei <form> sunt action si method.
action metioneaza adresa scriptului (aflat pe server) care va interpreta formularul. Aceste scripturi pot fi scrise in limbajele PHP sau Pearl.
method indica metoda folosita de browser pentru transmiterea formularului. Poate lua valorile get si post.
get - datele sunt trimise prin adaugarea la adresa indicata de action. Permite trimiterea unor mici cantitati de date.
 post - datele sunt trimise separat si sunt permise cantitati mari de date.

Exemplu: formular cu 2 campuri, buton Trimite si buton Sterge

HTML

Afisare

<form action="script.php" method="post">
Nume:<input type="text" name="nume">
Prenume:<input type="text" name="prenume"><br>
<input type="submit" value="Trimite"><input type="reset" value="Sterge">
</form>

Nume:
Prenume:

Eticheta <input> poate avea atributele:
type - indica tipul datelor care vor fi introduse (text=text, submit=trimite, reset=sterge, password=parola, hidden=nu este vizibil, checkbox=caseta de validare, button=buton, radio=selectarea unui singur element dintr-un grup, file=fisier pentru upload, image=butonul va fi inlocuit cu o imagine)
name - numele asociat cimpului respectiv. Este folosit la prelucrarea datelor de catre scriptul mentionat in action
size - numarul de caractere vizibile din camp
maxlenght - numarul maxim de caractere introduse in camp
readonly - datele prezente in camp nu pot fi modificate

Exemplu: formular continand toate valorile atributului <input>

HTML

Afisare

<form action="script.php" method="post">
Nume:<input type="text" name="nume">
Prenume:<input type="text" name="prenume"><br>
Telefon:<input type="text" name="telefon"><br>
Fax:<input type="text" name="fax"><br>
Email:<input type="text" name="email"><br>
Sexul: Masculin<input type="radio" name="sex" value="m"> Feminin<input type="radio" name="sex" value="f">

Studii: <select> <option value="scoala">Scoala profesionala <option value="liceu">Liceu <option value="facultate">Facultate </select>

Accesati Internetul de la:
Serviciu<input type="checkbox" name="serv">
Acasa<input type="checkbox" name="acasa">
Internet cafe<input type="checkbox" name="cafe">

Fisier: <input type="file" name="file">

Observatii:<textarea name="obs" rows="5" cols="30"></textarea>

<input type="submit" value="Trimite"><input type="reset" value="Sterge">
</form>

Nume:
Prenume:
Telefon:
Fax:
Email:

Sexul: Masculin Feminin

Studii:

Accesati Internetul de la:
Serviciu
Acasa
Internet cafe

Fisier:

Observatii:

Constructia select introduce un meniu derulant (lista de selectie), valorile fiind declarate prin option.

In campul textarea se poate introduce text, avand atributele cols (numar de coloane) si rows (numar de randuri).

Daca doriti puteti particulariza butoanele din formular folosind atributul type=image in cadrul etichetei input si indicand fisierul imagine.

HTML

Afisare

<form action="script.php" method="post">
<input type="image" src="/trimite.gif" alt="Trimite">
</form>

 

Harti de imagini

Hartile de imagini permit declararea unor zone din imagine ca legaturi catre alte pagini web si implica doua aspecte.

Imaginea este declarata ca fiind harta. Pentru aceasta eticheta <img> a imaginii are urmatoarele atribute:
src fisierul sau adresa fisierului imagine
usemap are valoarea de genul #nume care este folosit un interiorul etichetei <map> prezentate mai jos

Harta se defineste folosind perechea de etichete <map> si <map>, cu atributul obligatoriu name, avand aceeasi valoare ca la usemap din img.
Zona sau zonele continute de harta sunt introduse prin eticheta <area> cu atributele obligatorii:
shape fiind forma ariei declarate cu valorile: rect=dreptunghiulara, circle=circulara, poly=poligonala, default=alte forme (diferite de cele anterioare)
coords coordonatele zonei
href adresa paginii destinatie a legaturii

Exemplu: o harta de imagini care contine 5 zone

<html>
<head>
<title>Exemplul 10</title>
</head>
<body>
<b>Harti de imagini</b><p>
<img src="/harta.gif" usemap="#harta" width="280" height="160" border="0">
<map name="harta">
<area shape="rect" coords="20,20,70,70" href="/pag1.html">
<area shape="rect" coords="20,90,120,140" href="/pag2.html">
<area shape="circle" coords="200,80,30" href="/pag3.html">
<area shape="circle" coords="200,80,60" href="/pag1.html">
<area shape="poly" coords="90,70,120,70,120,20" href="/pag3.html">
</map>
</body>
</html>

Verificarea paginilor

Dupa ce ati terminat de construit paginile este recomandata o verificare din mai multe puncte de vedere inainte de a considera site-ul terminat.

Verificarea corectitudinii paginii
Verificarea corectitudinii codului HTML folosit poate fi facut online la una din adresele mentionate aici.

Verificati corectitudinea textului continut in pagini

Verificarea afisarii paginii
Se va verifica afisarea corecta a paginii in browser, incarcarea tuturor imaginilor si a continutului. Verificare se va face cu mai multe browser-e (Internet Explorer, Firefox, Opera si altele).

Verificarea link-urilor
Aceasta operatie poate fi usor efectuata folosind un Link checker online. Trimiterea catre o adresa invalida poate conduce vizitatorul la parasirea site-ului.
Se vor verifica datele din pagina de contact (adresa, telefoane si adresa de email).

Dupa ce am parcurs lectiile de HTML si CSS vom realiza impreuna un mic site, iar ca editor al codului sursa folosim Notepad.

Pentru pozitionarea elementelor distinctive ale paginii pot fi folosite tabele sau CSS. In exemplul nostru vom folosi tabelele.

Layout-ul paginii va fi:
- latime totala 750 px
- sus vom avea un header
- meniul in stanga, latime 150 px
- continutul paginii in drepta
- jos vom avea un footer

 

Vom crea un tabel cu latime 750 px, avand 3 randuri, iar pe fiecare rand cate 2 celule. Pe randul 1 si 3 unim cele 2 celule.

<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="2">Header</td></tr>
<tr><td width="150">Meniu</td><td width="600">Continut</td></tr>
<tr><td colspan="2">Footer</td></tr>
</table>

Inaltimea fiecarui rand va fi stabilita de elementul cel mai inalt (imagine sau text), sau prin introducerea atributului height in fiecare element td. Stabilim pentru randul 1 si 3 inaltime 50 px, iar pentru randul 2 inaltime 200 px.

Folosind CSS vom formata cele 4 celule in mod independent inserand in fiecare element td atributul class cu valoarea header, meniu, continut si footer.
Utilizarea CSS-ului extern o vom face inserand urmatoarea linie in zona head a paginii.

<link rel="stylesheet" type="text/css" href="/site.css">

In fisierul CSS extern stabilim pentru fiecare celula in parte culoarea si marimea fontului, culoarea fundalului, pozitionarea pe verticala sau orizontala a continutului, etc.

Puteti vedea fisierele finale html si css pentru pagina creata.

Voua va revine ultima etapa, adaugarea informatiei in fiecare celula. Pentru dezvoltarea in continuare a paginii puteti introduce in fiecare celula (in locul textului corespunzator: Header, Meniu, Continut, Footer) alte etichete html (liste, tabele, formulare) care pozitioneze informatia dorita.
Header-ul poate contine informatii despre tema site-ului sub forma text sau imagine (logo sau banner). In meniu introduceti o lista de link-uri catre celelalte pagini ale site-ului. Footer-ul poate contine link-uri catre: pagina de contact sau pagini externe.

Pentru a pastra layout-ul prezentat, celelalte pagini ale site-ului le obtineti copiind fisierul site.html si apoi le redenumiti, urmand sa modificati continutul functie de tema noii pagini.
Acest mod de obtinere a noilor pagini este cel mai simplu, dar nu cel mai eficient, fiind recomandat incepatorilor.
Metoda 1: utilizarea cadrelor, prin care fiecare zona o transformati in cadru, in acest fel de la o pagina la alta doar cadrul continut se schimba. Metoda 2: transformarea fisierelor html in php. Astfel zonele care se repeta vor fi transformate in fisiere php externe, ele find adaugate in pagina principala prin include.

Sper ca prin acest exemplu practic, realizarea unui site sa nu mai para ceva asa de complicat.

Etichete HTML

Data publicarii: Iunie 2006

 

eticheta

semnificatie

<!-- ??? -->

comentariu

<!DOCTYPE ...>

tipul documentului

<a ...>

legatura (link)

<area>

arie, folosita la hartile de imagini

<b>

bold, text ingrosat

<bgsound>

adauga paginii muzica de fond

<big>

font marit

<body ...>

corpul paginii, contine informatia ce va fi afisata

<br>

sfarsit de rand

<caption ...>

"titlul" tabelului

<code>

text continand cod de computer

<cite>

citat (text italic)

<dd>

descrierea definitiei

<del>

text taiat cu o linie orizontala

<div>

formateaza un sir de caractere

<dl>

lista de definitii

<dt>

termen dintr-o lista de definitii

<em>

text evidentiat

<font ...>

font

<form ...>

formular

<frame ...>

cadru

<frameset ...>

defineste blocul compus din cadre

<h1 ...>

header sau titlu (de la h1 la h6)

<head>

defineste antetul paginii HTML

<hr ...>

introduce o linie orizontala

<html>

anunta ca blocul este tip HTML

<i>

text italic

<iframe ...>

fereastra in-line

<img ...>

imagine

<input ...>

element (camp) al formularului

<kbd>

text introdus de la tastatura

<li ...>

termen al listei

<link ...>

legatura

<meta>

metainformatii despre pagina

<noframes>

text alternativ pentru cadru

<ol>

lista ordonata

<option ...>

element al listei de selectii

<p ...>

paragraf nou

<pre ...>

text preformatat

<select ...>

lista de selectii din formular

<samp>

mostra de cod

<span>

formateaza mai multe elemente

<small>

font micsorat

<strong>

text ingrosat

<sub>

text indice

<sup>

text exponent

<table ...>

tabel

<td ...>

celula a tabelului

<textarea>

camp din formular in care se introduce text

<th>

headerul tabelului

<title>

titlul paginii HTML

<tr ...>

rand al tabelului

<tt>

text monospatiat

<u>

text subliniat

<ul>

lista neordonata

 

 

CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web (de exemplu formatare text, background sau aranjare in pagina, etc.).

Beneficiile sintaxei CSS sunt:

  • formatarea este introdusa intr-un singur loc pentru tot documentul
  • editarea rapida a etichetelor
  • datorita introducerii intr-un singur loc a etichetelor se obtine o micsorare a codului paginii, implicit incarcarea mai rapida a acesteia

Sintaxa CSS este structurata pe trei nivele:
nivelul 1 fiind proprietatile etichetelor din documentul HTML, tip inline
nivelul 2 este informatia introdusa in blocul HEAD, tip embedded
nivelul 3 este reprezentat de comenzile aflate in pagini separate, tip externe

Cea mai mare importanta (suprascrie orice alt parametru) o are sintaxa de nivelul 1 iar cea mai mica importanta o are cea de nivelul 3.

Folosirea unui fisier extern sau nivel 3 care sa contina comenzi CSS este foarte practic deoarece poate fi utilizat in mai multe situatii (mai multe fisiere HTML pot folosi acelasi fisier extern CSS) eliminand timpul necesar introducerii codului corespunzator in fiecare pagina si totodata editarea lor intr-un singur loc pentru mai multe fisiere.
Extensia acestor fisiere este .css.
Legatura paginilor HTML cu fisierele extene CSS se face prin introducerea urmatoarei linii:

<link rel="stylesheet" type="text/css" href="/fisier_css.css">

Atributele indica urmatoarele: rel - fisierul este tip styleshhet
type - tip text ce contine comenzi CSS
href - fisierul sau adresa fisierului CSS.

Comenzile de nivel 2 sau embedded sunt cele gazduite oriunde intre perechea de etichete <head> si </head> conform sintaxei:

<style type="text/css">
<!--
... comenzi CSS ...
-->
</style>

Unde style -specifica unde incepe si unde se termina blocul CSS iar type este folosit pentru a ascunde de browserele vechi, care nu cunosc sintaxa CSS, continutul blocului style.

Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au sintaxa:

<eticheta style="codul CSS dorit">
...textul sau obiectul asupra caruia este aplicat codul CSS...
</eticheta>

Este permisa folosirea comentariilor in CSS astfel:

/* Acesta este un comentariu in CSS */

div, span si etichete CSS

Eticheta <div> functioneaza asemanator cu eticheta <p>, putand gazdui comenzi CSS aplicabile la un bloc sau mai multe din continutul paginii.

Eticheta <span> este similara cu eticheta <font> (pe cale de a fi eliminata de consortiul W3C) aplicandu-se elementelor dintr-un paragraf.

Etichetele CSS sunt cunoscute sub numele de elemente sau selectori avand un layout asemanator cu etichetele HTML.

eticheta HTML
<eticheta argument="valoare">

eticheta CSS
element{argument: valoare;}

elementul poate fi o eticheta HTML, un id sau un class, iar argumentul si valoarea sunt aceleasi ca in HTML.

Exemplu: acelasi text realizat in HTML si in HTML cu CSS

HTML
<font color="#00FF00">
<p>Text verde</p>
</font>

HTML cu CSS
<p style="color: #00FF00;">
Text verde
</p>

Comenzile de CSS pot fi plasate si in zona HEAD rezultand o functionare identica, chiar mai mult, aceleasi comenzi putand fi folosite in mai multe locuri in aceeasi pagina.

Exemplu: comenzi CSS incluse in zona HEAD

<html>
<head>
<title>Exemplul 1_1</title>
<style type="text/css">
<!-- p{color: #00FF00;}-->
</style>
</head>
<body>
<p>Text verde</p>
Text negru
<p>Text verde</p>
</body>
</html>

Elementele id si class

id si class sunt comenzi care dau unei formatari CSS un nume. Se folosesc atunci cand dorim sa aplicam un style de formatare unei anume zone. Pentru compatibilitate cu versiunile anterioare de browsere numele asociate zonelor nu vor contine caracterul _.

Elementul id se aplica unui style de format o singura data sau la o singura eticheta HTML, plasandu-se un nume acelui style. Acest element necesita existenta comezilor CSS in zona HEAD sau intr-un fisier extern.

Exemplu: folosirea elementului id

<html>
<head>
<title>Exemplu 2_1</title>
<style type="text/css">
<!-- #albastru{color: #0000FF;}-->
</style>
</head>
<body>
<p id="albastru">Text albastru introdus prin id "albastru"</p>
Text negru
</body>
</html>

Elementul class se similar cu id dar spre deosebire de acesta poate fi folosit de mai multe ori sau pentru zone mai mari. Ca si la id necesita existenta comezilor CSS in zona HEAD sau intr-un fisier extern.

Exemplu: folosirea elementului class

<html>
<head>
<title>Exemplu 2_2</title>
<style type="text/css">
<!-- .rosu{color: #FF0000;}-->
</style>
</head>
<body>
<p class="rosu">Primul text rosu introdus prin class "rosu"</p>
Text negru
<p class="rosu">Al doilea text rosu introdus prin class "rosu"</p>
</body>
</html>

Stiluri pentru fonturi

Aceste elemente specifica argumentul fontului care se asociaza unui element HTML fiind incluse ori in zona HEAD ori in interiorul etichetei dorite.
In cazul de fata se remarca asemanarea cu eticheta font din HTML care accepta argumentele type, style, size si weight.

font-family
font-family este de fapt o lista de fonturi din care browserul va folosi in ordinea in care le recunoaste (primul folosit va fi primul din lista, daca nu este recunoscut il foloseste pe al doilea si tot asa mai departe). Este recomandat ca ultima pozitie din lista sa fie un font generic (de exemplu serif, sans-serif sau monospace).
In situatia in care numele fontului este format din doua cuvinte se incadreaza intre ghilimele duble pentru ca browserul sa le interpreteze impreuna.

Exemplu: CSS introdus in HEAD aplicat etichetei p. Browserul nu recunoaste primele doua fonturi din lista, folosindu-l pe al treilea

<html>
<head>
<title>Exemplu 3_1</title>
<style type="text/css">
<!-- p{font-family: font1,font2,arial;}-->
</style>
</head>
<body>
<p>Text scris cu cu fontul Arial</p>
Text negru
<p>Text scris cu cu fontul Arial</p>
</body>
</html>

Exemplu: acelasi exemplu dar CSS introdus in eticheta p din HTML

<html>
<head>
<title>Exemplu 3_2</title>
</head>
<body>
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
Text negru
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
</body>
</html>

font-size
Este parametrul prin care stabilim dimesiunea fontului, exprimat in pixeli (px), puncte (pt), keywords sau procente. Are o functionare asemanatoare cu eticheta <font>.

Exemplu: CSS introdus in HEAD aplicat etichetei p, dimensiunea exprimata in pixeli

<html>
<head>
<title>Exemplu 3_3</title>
<style type="text/css">
<!-- p{font-size: 20px;}-->
</style>
</head>
<body>
<p>Text scris cu font de 20px</p>
Text negru
</body>
</html>

Pentru dimensiunea exprimata in puncte folosim acelasi exemplu inlocuid px cu pt.

Dimensiunea exprimata prin keywords foloseste cuvinte in loc de cifre. Sapte cuvinte inlocuiesc dimensiunile de la 1 la 7 de la veche eticheta FONT FACE din HTML.

CSS keyword

numar FONT size

xx-small

1

x-small

2

small

3

medium

4

large

5

x-large

6

xx-large

7

Pentru verificare se poate folosi exemplul anterior in care se inlocuieste 20px cu unul din cuvintele de mai sus.

Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate poate fi vizualizata diferit de browsere diferite.
Ca verificare folositi acelasi exemplu schimband 20px cu 200%.

font-style
font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile normal si italic.

<style type="text/css">
<!-- p{font-style: italic;}-->
</style>

font-weight
font-weight este paramerul care stabileste grosimea caracterului putand lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.

<style type="text/css">
<!-- p{font-weight: 700;}-->
</style>

Compunerea stilurilor
Stilurile prezentate anterior pot fi folosite simultan in interiorul aceeasi etichete fiind despartite de caracterul ; (punct si virgula).

Exemplu: folosirea unui stil compus aplicat etichetei p

<html>
<head>
<title>Exemplu 3_4</title>
<style type="text/css">
<!--
p{
font-family: arial;
font-size: 20px;
font-style: italic;
font-weight: 800;}
-->
</style>
</head>
<body>
<p>Text scris cu Arial, 20px, italic, 800</p>
Text negru
</body>
</html>

Stiluri pentru text

Aliniere
text-align pozitioneaza pe orizontala obiecte (de exemplu text sau imagini) si admite valorile left, right si center ca si eticheta align din HTML.

In continuare este prezentat ca exemplu codul folosit in HEAD, aplicat etichetei p:

<style type="text/css">
<!--
p{text-align: center;}
-->
</style>

Exemplu: prin intermediul lui div aplicam stilul pecentru imaginii si textului

<html>
<head>
<title>Exemplu 4_1</title>
<style type="text/css">
<!--
p{text-align: center;}
-->
</style>
</head>
<body>
<div class="pecentru"><img src="/poza.jpg"></div>
Text neformatat
<div class="pecentru">Text formatat</div>
</body>
</html>

vertical-align este folosit pentru alinierea pe verticala a obiectelor dintr-un tabel si poate lua valorile: top, middle si bottom.
In exemplul de mai jos este creat clasa sus care va putea fi aplicat elementelor <td> ale tabelului

<style type="text/css">
<!--
.sus{vertical-align: top;}
-->
</style>

float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right. In functie de valoarea aleasa imaginea va fi aliniata in partea opusa a paginii.

Exemplu: cream clasa auto si o aplicam inaginii

<html>
<head>
<title>Exemplu 4_2</title>
<style type="text/css">
<!--
.auto{float: left;}
-->
</style>
</head>
<body>
<img src="/poza.jpg" class="auto">
Textul se aliniaza la dreapta, iar poza la stanga datorita clasei "auto".
</body>
</html>

Tabulare
text-indent este folosit pentru alinierea textului in interior avand valori exprimate in inci (in), centimetri (cm) sau pixeli (px).
In exemplul de mai jos text-indent este aplicat etichetei p deplasand textul cu 10 pixeli in interior

<style type="text/css">
<!--
p{text-indent: 10px;}
-->
</style>

Decorare
text-decoration adauga sublinierea sau taierea blocului text asociat si poate avea valorile underline, line-through sau none.

Exemplu: stilul asociat etichetei p este prezentat in HEAD

<html>
<head>
<title>Exemplu 4_3</title>
<style type="text/css">
<!--
p{text-decoration: underline;}
-->
</style>
</head>
<body>
Text normal
<p>Text subliniat</p>
</body>
</html>

Culoare
color defineste culoarea textului dintr-o zona sau intraga pagina.

Exemplu: stilul asociat etichetei p este prezentat in HEAD

<html>
<head>
<title>Exemplu 4_4</title>
<style type="text/css">
<!--
p{color: #0000FF;}
-->
</style>
</head>
<body>
Text normal
<p>Text albastru</p>
</body>
</html>

Stiluri pentru legaturi
In HTML culoarea legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK declarate in interiorul etichetei BODY.
Acelasi lucru si chiar mai mult poate fi realizat folosind sintaxa CSS.

Exemplu

<html>
<head>
<title>Exemplu 4_5</title>
<style type="text/css">
<!--
a{font-family: arial; font-size: 20px;}
a:link {color: #0000FF;}
a:visited {color: #00FF00;}
a:active {color: #FF0000;}
a:hover {color: #000000;}
-->
</style>
</head>
<body>
Text normal
<a href="/exemplu4_4.html">link</a> catre exemplul 4_4
</body>
</html>

a defineste stilul general pentru legatura
a:link defineste stilul legaturii nevizitate
a:visited defineste stilul legaturii vizitate
a:active defineste stilul legaturii active (nu prea se foloseste)
a:hover defineste stilul cand mouse-ul este deasupra legaturii

Stiluri pentru background

Background culoare sau imagine poate fi definita pentru intreaga pagina, o celula a tabelului sau pentru text.

Culoare de fond
background-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML.

Exemplu: definim un stil pentru intreg BODY si un altul pentru eticheta p

<html>
<head>
<title>Exemplu 5_1</title>
<style type="text/css">
<!--
body {background-color: #FFFF00;}
p {background-color: #FF0000;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu background rosu</p>
</body>
</html>

Imagine de fond
Imaginile pot fi folosite ca fundal in spatele intregii pagini, a unui obiect sau a textului.
background-image asociaza o imagine ca fundal unui obiect.

Exemplu: definim un stil pentru eticheta p

<html>
<head>
<title>Exemplu 5_2</title>
<style type="text/css">
<!--
p {background-image: url(poza.jpg);}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>

Repetare
Functie de dimensiunile obiectului caruia ii sunt asociate imaginile de fond se repeta pe orizontala si verticala.
Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile:
repeat-x imaginea se repeta pe orizontala
repeat-y imaginea se repeta pe verticala
no-repeat imaginea nu se repeta

Exemplu: imaginea nu se repeta sub eticheta p

<html>
<head>
<title>Exemplu 5_3</title>
<style type="text/css">
<!--
p {background-image: url(poza.jpg);
background-repeat: no-repeat;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>

Pozitia
In mod normal imaginea de fundal incepe din coltul stanga sus al obiectului asociat, dar acest lucru poate fi controlat prin comanda CSS background-position.
Sunt acceptate doua valori:
in prima pozitie poate fi: top, center, bottom, percentage sau pixel
in a doua pozitie poate fi: right, center, left, percentage sau pixel

Exemplu: imaginea de fundal este asociata etichetei BODY fiind amplasata top si center, fara repetare

<html>
<head>
<title>Exemplu 5_4</title>
<style type="text/css">
<!--
body {background-image: url(poza.jpg);
background-repeat: no-repeat;
background-position: top center;}
-->
</style>
</head>
<body>
Text normal
</body>
</html>

Stiluri pentru liste

list-style-type
Folosind eticheta ol din HTML cream liste ordonate sau numerotate. Adaugand comenzi CSS in zona HEAD putem adauga pe langa numere si cifre sau alte simboluri. Browserul Netscape nu permite asocierea comenzilor CSS decat pentru eticheta li.

Sintaxa este:

<style type="text/css">
<!--
li {list-style-type: valoare;}
-->
</style>

valoarea poate fi:

valoare

disc

disc

disc

circle

cerc

square

patrat

decimal

numere intregi

lower-roman

numere romane, caractere mici (i, ii, iii, iv)

upper-roman

numere romane, caractere mari (I, II, III, IV)

upper-alpha

litere mari (A, B, C, D)

lower-alpha

litere mici (a, b, c, d)

none

nimic

Exemplu: lista ordonata folosind marcaje cu litere mici

<html>
<head>
<title>Exemplu 6_1</title>
<style type="text/css">
<!--
li {list-style-type: lower-alpha;}
-->
</style>
</head>
<body>
Necesar materiale:
<ol>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ol>
</body>
</html>

list-style-image
In afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite si imagini prin comansa CSS list-style-image. Imaginile sunt introduse prin adresa url().

Exemplu: lista ordonata folosind ca marcaj imaginea punct.gif

<html>
<head>
<title>Exemplu 6_2</title>
<style type="text/css">
<!--
li {list-style-image: url(punct.gif);}
-->
</style>
</head>
<body>
Necesar materiale:
<ul>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ul>
</body>
</html>

Chenare si margini

Fiecare element este incadrat intr-o caseta care este compusa din urmatoarele elemente:

 


marginea (margin) este spatiul exterior chenarului pana la celelalte elemente
chenarul (border) este o bordura care inconjoara elementul
completarea (padding) stabileste distanta dintre continut si chenar
continutul include informatia utila (text, tabele, imagini, formulare, etc.)

Originea elementului este considerat coltul din dreapta sus fata de care se vor raporta toate dimensiunile prezentate in continuare.

width si height
Latimea si inaltimea unui element sunt stabilite in HTML prin atributele width si height. Aceste atribute pot fi adaugate sau suprascrise prin comenzi CSS.

Exemplu: folosind comenzi CSS modificam dimensiunile originale ale imaginii

<html>
<head>
<title>Exemplu 7_1</title>
<style type="text/css">
<!--
img {width: 50px; height: 100px;}
-->
</style>
</head>
<body>
<img src="/margini.gif">
</body>
</html>

padding si margin
padding stabileste distanta dintre obiect si chenar simultan pentru toate laturile. Distantele pot fi stabilite si individual folosind padding-top, padding-bottom, padding-left sau padding-right.

margin stabileste distanta dintre chenar si celelalte obiecte din pagina simultan pentru toate laturile. Distantele pot fi stabilite si individual folosind margin-top, margin-bottom, margin-left sau margin-right.

Valorile pentru padding si margin pot fi exprimate in: px (pixeli), in (inci), pt (puncte) sau cm (centimetri).

Exemplu: folosind comenzi CSS imaginea este pozitionata la 100px fata de latura stanga si 25px fata de latura de sus

<html>
<head>
<title>Exemplu 7_2</title>
<style type="text/css">
<!--
img {margin-left: 100px; margin-top: 25px;}
-->
</style>
</head>
<body>
<img src="/margini.gif">
</body>
</html>

border
Netscape si Internet Explorer afiseaza diferit chenarele. Comanda CSS pentru definirea chenarului este border avand proprietatile asociate width, style si color. Pentru a fi siguri ca aceste proprietati functioneaza atat in Internet Explorer cat si in Netscape trebuie sa declaram pentru border cel putin width si style.

border-width stabileste grosimea chenarului si poate fi exprimata in px (pixeli), pt (puncte), cm (centimetri) sau in (inci).

border-style stabileste tipul chenarului si poate fi dotted, dashed, solid, double, groove, ridge, inset si outset.

border-color stabileste culoarea chenarului si poate fi exprimata prin valoare hexazecimala sau in cuvinte.

Exemplu: definim noua clase utilizand proprietatile border-width border-style si border-color

<html>
<head>
<title>Exemplu 7_3</title>
<style type="text/css">
<!--
.clasa1 {border-width: 2px; border-style: dotted; border-color: red;}
.clasa2 {border-width: 3px; border-style: dashed; border-color: blue;}
.clasa3 {border-width: 2px; border-style: solid; border-color: green;}
.clasa4 {border-width: 3px; border-style: double; border-color: black;}
.clasa5 {border-width: 2px; border-style: groove; border-color: silver;}
.clasa6 {border-width: 3px; border-style: ridge; border-color: lime;}
.clasa7 {border-width: 2px; border-style: inset; border-color: yellow;}
.clasa8 {border-width: 3px; border-style: outset; border-color: aqua;}
.clasa9 {border-width: 2px; border-style: hidden; border-color: olive;}
-->
</style>
</head>
<body>
<div class="clasa1">border-width: 2px; border-style: dotted; border-color: red;</div><br>
<div class="clasa2">border-width: 3px; border-style: dashed; border-color: blue;</div><br>
<div class="clasa3">border-width: 2px; border-style: solid; border-color: green;</div><br>
<div class="clasa4">border-width: 3px; border-style: double; border-color: black;</div><br>
<div class="clasa5">border-width: 2px; border-style: groove; border-color: silver;</div><br>
<div class="clasa6">border-width: 3px; border-style: ridge; border-color: lime;</div><br>
<div class="clasa7">border-width: 2px; border-style: inset; border-color: yellow;</div><br>
<div class="clasa8">border-width: 3px; border-style: outset; border-color: aqua;</div><br>
<div class="clasa9">border-width: 2px; border-style: hidden; border-color: olive;</div>
</body>
</html>

Pozitionare

Pozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele. Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.

Atat pozitionarea absoluta (ASOLUTE) cat si cea relativa (RELATIVE) folosesc proprietatile LEFT si TOP exprimate in px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri).

Pozitionare absoluta plaseaza obiectul in pagina exact in locatia data de left si top. Astfel poate fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine.

Exemplu: am aplicat pozitionarea absoluta etichetei h4

<html>
<head>
<title>Exemplu 8_1</title>
</head>
<body>
<h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4>
<h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4>
</body>
</html>

Pozitionare relativa este pozitia normala pe care o ocupa un element, dupa elementele anterioare si inaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie folosind proprietatile left si top.

Exemplu: am folosit doua obiecte, unul pozitionat absolut, celalalt relativ

<html>
<head>
<title>Exemplu 8_2</title>
<style type="text/css">
<!--
.absolut {position: absolute; left: 200px; top: 150px;}
.relativ {position: relative; left: 50px; top: 50px;}
-->
</style>
</head>
<body>
<div class="absolut">Pozitionare absoluta, independent de celelate obiecte din pagina</div>
Text
<div class="relativ">Pozitionare relativa, dupa "Text"</div>
</body>
</html>

Pozitionarea tridimensionala
Elementele sunt pozitionate pe ecran pe o suprafata bidimensionala dar pot fi asezate si unul deasupra celuilalt, intr-o stiva utilizand un indicativ (index-z) incepand cu 0, urmatorul 1 si tot asa in continuare. Elementul cu indexul cel mai mare este asezat deasupra.

Exemplu: am folosit trei obiecte pozitionate absolut

<html>
<head>
<title>Exemplu 8_3</title>
<style type="text/css">
<!--
.element1 {position: absolute; left: 30px; top: 30px; z-index: 3}
.element2 {position: absolute; left: 50px; top: 50px; z-index: 2}
.element3 {position: absolute; left: 70px; top: 70px; z-index: 1}
-->
</style>
</head>
<body>
<div class="element1"><img src="/poza.jpg"></div>
<div class="element2"><img src="/poza.jpg"></div>
<div class="element3"><img src="/poza.jpg"></div>
</body>
</html>

Pozitionare

Pozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele. Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.

Atat pozitionarea absoluta (ASOLUTE) cat si cea relativa (RELATIVE) folosesc proprietatile LEFT si TOP exprimate in px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri).

Pozitionare absoluta plaseaza obiectul in pagina exact in locatia data de left si top. Astfel poate fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine.

Exemplu: am aplicat pozitionarea absoluta etichetei h4

<html>
<head>
<title>Exemplu 8_1</title>
</head>
<body>
<h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4>
<h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4>
</body>
</html>

Pozitionare relativa este pozitia normala pe care o ocupa un element, dupa elementele anterioare si inaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie folosind proprietatile left si top.

Exemplu: am folosit doua obiecte, unul pozitionat absolut, celalalt relativ

<html>
<head>
<title>Exemplu 8_2</title>
<style type="text/css">
<!--
.absolut {position: absolute; left: 200px; top: 150px;}
.relativ {position: relative; left: 50px; top: 50px;}
-->
</style>
</head>
<body>
<div class="absolut">Pozitionare absoluta, independent de celelate obiecte din pagina</div>
Text
<div class="relativ">Pozitionare relativa, dupa "Text"</div>
</body>
</html>

Pozitionarea tridimensionala
Elementele sunt pozitionate pe ecran pe o suprafata bidimensionala dar pot fi asezate si unul deasupra celuilalt, intr-o stiva utilizand un indicativ (index-z) incepand cu 0, urmatorul 1 si tot asa in continuare. Elementul cu indexul cel mai mare este asezat deasupra.

Exemplu: am folosit trei obiecte pozitionate absolut

<html>
<head>
<title>Exemplu 8_3</title>
<style type="text/css">
<!--
.element1 {position: absolute; left: 30px; top: 30px; z-index: 3}
.element2 {position: absolute; left: 50px; top: 50px; z-index: 2}
.element3 {position: absolute; left: 70px; top: 70px; z-index: 1}
-->
</style>
</head>
<body>
<div class="element1"><img src="/poza.jpg"></div>
<div class="element2"><img src="/poza.jpg"></div>
<div class="element3"><img src="/poza.jpg"></div>
</body>
</html> 

JoomShaper