Programare HTML - Imagini si obiecte pe site - Lectia Numarul 6

In ultimii ani dezvoltarea de site-uri a crescut considerabil , iar pentru castigarea vizitatorilor pe site ,acesta trebuie sa aiba un design cat mai placut , atractiv si profesional ,iar viteza de incarcare a site-ului sa fie cat mai mare.Folosirea imaginilor sporeşte atractivitatea şi designul paginii, duce la o mai bună inţelegere a mesajului, dar trebuie luat în consideraţie şi faptul că excesul de imagini va duce la încărcarea greoaie a site-ului. Există numeroase formate grafice, dar cele mai răspândite sunt:

• GIF (Graphics Interchange Format) introdus de Compuserve 
• JPEG (Joint Photographic Expert Group) 
• PNG (Portable Network Graphic – Format Grafic portabil în reţea)

Aceste formate sunt dependente de platformă. Imaginile grafice sunt construite din pixeli, care sunt puncte distincte de informaţie de imagine. Fiecare pixel necesită un bit de culoare. Principalele caracteristici ale formatelor de imagine sunt: numărul de culori, compresia, transparenţa, întreţeserea şi animaţia. Asemănările şi deosebirile dintre cele trei formate grafice sunt: 

•  Imaginile GIF pot utiliza doar 256 de culori, având nevoie de 8 biţi, în timp ce formatele JPEG şi PNG pot utiliza milioane de culori, având 24 de biţi de culoare, respectiv 32 de biţi /pixeli de culoare. Ceea ce face formatul GIF atât de utilizat nu este numai paleta mică de culori (256), dar şi posibilitatea reducerii numărului de culori, astfel, dacă este nevoie doar de 2 culori, se utilizează numai un bit, ceea ce reduce dimensiunea fişierului de 8 ori. 
• Toate aceste trei formate grafice pot comprima imaginea pentru a reduce dimensiunile fişierelor. Comprimarea se poate face, în mod diferit, pentru fiecare format, şi, din aceste motive, ele pot avea dimensiuni mai mici într-un format decât în altul.
•  Formatele GIF şi PNG admit culoarea transparentă, în timp ce formatul JPEG nu admite transparenţa. Formatele GIF şi PNG admit animaţia, în timp ce, cu formatul JPEG, nu se poate obţine animaţie. De exemplu, pentru a obţine animaţie pentru imagini GIF se poate folosi pentru Windows pachetul GIF Construction Set, iar pentru Macintosh pachetul soft GIFBuilder. 
• Toate cele trei formate acceptă întreţeserea. De exemplu, când se vizualizează o pagină web, se pot observa imaginile care apar linie cu linie, de la forma brută până la redarea finală, aceasta reprezintă întreţeserea. Deşi dimensiunea fişierelor creşte cu până la 10%, cu ajutorul acestei întreţeseri, vizitatorul poate să-şi facă o imagine despre ceea ce se va descărca. 

Având în vedere cele cinci caracteristici ale formatelor de imagine, acestea pot fi recomandate: 

•  GIF – pentru majoritatea imaginilor din web, butoane, panouri publicitare, desene etc., datorită dimensiunii mici a fişierelor.
• JPEG pentru fotografii, când se doreşte să se redea cât mai exact culoarea reală a imaginii. 
• PNG – pentru desene complexe, dar şi pentru fotografii, acesta fiind formatul care îmbină caracteristicile celor două. 

Imaginile pot fi descărcate de la adrese absolute sau relative. Adresele URL (Uniform Resource Locator) reprezintă standarde de identificare a resurselor (de exemplu, fişiere) şi pot fi adrese URL absolute şi relative. 

Pentru inserarea imaginilor intr-un document html se foloseste eticheta <img>  ,care este o eticheta goala  (empty tags ), adica nu are tag de sfarsit ( </img> ).
* Exemplu : <img src="codingweb.jpg" alt="CodingWeb" width="104" height="142">
Tag-ul <img> contine atributul alternativ 'alt' si atributul obligatoriu "src" care este prescurtarea pentru 'source' care specifica sursa /adresa de unde este preluata imaginea .Acest atribut se foloseste pentru a indica locatia fotografiei. Dupa cum am explicat in capitolul destinat legaturilor pe care il gasiti >> Legaturi si ancore -Lectia Numarul 5  << se poate folosi orice tip de URL pentru a indica adresa fisierului.

Pentru a indica locatia unei imagini se pot utiliza urmatoarele instructiuni :

• src="image.jpg" - fotografia este situata pe acelasi nivel cu fisierul .html
• src="../image.jpg" - fotografia este situata pe un nivel anterior fisierului .html.
• src="../img/image.jpg" -fotografia este situata in folderul "img" pe nivelui anterior fisierului .html

Se poate folosi deasemenea adresa completa a fotografie. 
Exemplu: scr="http://www.tutorialehtml.com/img/image.jpg"

Acest model de URL nu este recomandat deoarece la schimbarea domeniului va trebui sa schimbi deasemenea si adresele tuturor fotografiilor. Sau in cazul in care imaginea este stocata pe un alt domeniu scr="http://www.domeniu.com/image.jpg".


Faptul de a stoca imaginea pe un domeniu alternativ, prezinta un mare avantaj in cazul in care dispui de un spatiu limitat pe domeniul pe care este stocat fisierul .html
Atributul "alt" este folosit pentru a afisa un text in locul imagini, in cazul in care browser-ul pentru un oarecare motiv nu poate afisa imaginea sau in cazul in care un user are deselectata functia "ShowImage".

<img alt="Imaginea nu poate fi incarcata" src="/coding_web/image.jpg" />

Pentru a stabili inaltimea si latimea unei imagini sunt folosite atributele height si widith.

<img alt="imagine exemplu" src="/coding_web/image.jpg"  width="200" height="100" />

Folosirea imaginilor ca link 

Aceasta este doar o introducere, vom trata acest subiect mai pe larg intr-un tutorial urmator. Imaginile sunt foarte utile pentru link-uri si se pot forma cu ajutorul codului urmator:

<a href="http://learncodingweb.blogspot.ro/" title="Exemplu de link imagine in html">
<img alt="imagine" src="/coding_web/image.jpg" width="120" height="75" />
</a>

Atributul title este folosit  in interfata grafica cu utilizatorul ,pentru mouse-over comments;
Atributul align se refera la alinierea in cadrul randului ,si nu in cadrul paginii ,iar valorile pe care le poate i-a sunt : middel pentru pozitionarea la mijloc , top -pozitionar la inceput si bottom -pozitionare la sfarsit.

Obiectele :

<object>...</object> -Acest element include in pagina un obiect ,al carui tip este specificat cu ajutorul atributului type . Obiectul poate fi incadrat in orice standard de internet pe care browser-ul il intelege ,cum sunt paginile incrustate,codul executat cu ajutorul unui program auxiliar (plug -in ) .Atributul classid seteaza o valoare pe post de identificator unic pentru URL.

<param>..</param> sau <param/>
Acest element poate fi dispus numai in cadrul unui element object .Folosind atributele name si value ,fiecare element seteaza un parametru pentru un  obiect : latime,font, culoare,grosime ,margini etc.


Exemplu:
<html>
<head>
<title>Imagini Si Obiecte</title>
</head>
<body>
<object classid="clsid:F08DF954-8592-11D1-B161-00C0F0283628" id="Slider1" width="100" height="100">
<param name="BorderStyle" value="1"/>
<param name="MousePointer" value="0"/>

<param name="Enabled" value="1"/>

<param name="Min" value="0"/>
<param name="Max" value="10">

</object>

</body>
</html>

<span>...</span> -Acest tag se foloseste pentru a grupa elementele pe aceeasi linie .Cu ajutorul lui se pot aplica diverse formatari in cadrul grupului de elemente.


Daca va placut acest articol sau altele de pe site-ul  ,meu  va rog sa le distribuiti mai departe pe facebook pentru a afla cat mai multe persoane si daca vreti sa imi dati si un like va invit pe pagina mea de facebook aici: https://www.facebook.com/OriginalsBlue/ 

Read More

Programare HTML - Legaturi sau ancore -Lectia Numarul 5

    Lagaturile sau link-urile reprezinta partea cea mai importanta a unei pagini Web. Ele transforma un text obisnuit in hipertext sau hiperlegatura, care premite trecerea rapida de la o informatie aflata pe un anumit server la alta informatie memorata pe un alt server aflat oriunde in lume. Legaturile sunt zone active intr-o pagina Web, adica zone de pe ecran sensibile la apasarea butonului stang al mouse-ului. Aceste elemente se folosesc cand vrem sa cream legaturi cu alte documente sau pagini web.

<a>....</a> -Atribute :

* href - reprezinta URL -specifica legatura sau referinta ;
* title - defineste numele legaturii asa cum apare in browser can trecem cu mouse-ul peste legatura ( mouse-over comments );
Exemplu :
<a href='aici introduceti adresa url' target='_blank' title='additional information'>Link text</a>
* rel -stabileste relatia dintre documentul curent si legatura URL : next,previous,index,start etc;
* target - specifica daca legatura se va deschide intr-o pagina nou sau va inlocui pagina actuala.

Exemplu:

<html>
<head>
<title>Legaturii</title>
</head>
<body>
<p> Legatura catre pagina Coding Web : <a href='http://learncodingweb.blogspot.ro/' title='Coding Web'> Click aici pentru a vizita Coding Web</a></p>
<p>Legatura care se deschide intr-o pagina noua: <a href='http://learncodingweb.blogspot.ro/' title='Coding Web' target='_blank'>Coding Web</a></p>
<p>Legatura catre <b>elemente de bloc</b>:<a href='bloc.html' title='Elemente de bloc'> Elemente de bloc</a>
<p>
</body>
</html>


Ancore definite prin atributul ID.  

Atributul ID este un atribut universal ,adica poate fi atasat oricarui element al unei pagini Web. Acest atribut va inlocui complet atributul name, care putea fi atasat numai anumitor elemente. Atributul ID primeste ca valoare un nume (de exemplu "id1") care identifica in mod unic un element. Atributul ID poate fi utilizat pe post de ancora intr-o pagina Web conform sintaxei: 
<eticheta id="nume_id">...</eticheta>
<a href="#nume_id">Link catre id specificat</a>
- unde eticheta poate fi orice element

In functie de culoarea legaturi exista trei tipuri de leagaturi :

* o culoare pentru legaturile vizitate - legaturi pe care sa efectuat cel putin un click pe ele 
* o culoare pentru legaturile active - deasupra carora se afla mouse-ul la un anumit moment dat
* o culoare pentru legaturile nevizitate - nu sa efectuat nici un click pe ele 
Aceste trei atribute pot fi stabilete cu ajutorul etichetei <body>.
* link -pentru legaturi nevizitate
*vlink -pentru legaturi vizitate
*alink -pentru legaturi active 

Exemplu :

<html>
<head>
<title> Culori pentru lagaturi</title>
</head> 
<body link="blue" vlink="green" alink="red">
<h3>Setarea culorilor pentru link-uri:<br>rosu pentru legaturi active, verde pentru legaturi vizitate si albastru pentru legaturi nevizitate </h3>
<a href=leg_ex1.html>
Link catre pagina 1 <br> 
<a href=leg_ex2.html>
Link catre pagina 2 <br> 
<a href=leg_ex11.html>
Link catre pagina 11 </a>
</body>
</html>


Utilizarea postei electronice 

Intr-o pagina Web se poate afla legaturi care permit lansarea in executie a aplicatiei de expediere a mesajelor electronice. 
Pentru aceasta se utilizeaza in constructia adresei URL serviciul Internet mailto: urmat de o adresa e-mail valida.

Pentru ca exemplul urmator sa functioneze trebuie ca:

• pe calculator sa fie instalat o aplicatie de expediere a mesajelor electrionice (Outlook Express pe calc. Windows , Pine pe calc. Unix);
• adresa sa fie valida si calculatorul sa fie conectat la Internet.

Exemplu :

<html>
<head>
<title> Expediere de mesaje electronice</title>
</head> 
<body>
<h3>Expediere de mesaje electronice</h3><br> 
<a href="mailto:a_bsz@yahoo.com"> 
Mesaje catre autorul paginii 
</body>

</html>

Legaturi catre un fisier oarecare

O pagina Web poate contine legaturi catre orice tip de fisiere aflate pe orice servere din Internet. Pentru aceasta se utilizeaza eticheta <a> avand valoarea atributului href egala cu adresa URL a fisierului destinatie.


Atunci cand se efectueaza clic pe legatura din exemplul urmator browserul se deschide o caseta de dialog - File download - care va permite:

• sa salvati pe discul local fisierul
• sa lansati in executie aplicatia capabila sa interpreteze corect fisierele de tipul respectiv

Exemplu :

<html>
<head>
<title> Legaturi catre fisiere oarecare</title>
</head> 
<body>
<h3>Legaturi catre fisiere oarecare</h3><br> 
<a href="fisier.zip"> 
Link catre fisierul fisier.zip 
</body>

</html>

Atributul Title: 

Atributul title apartine etichetei <a> si comanda aparitia unei mici ferestre in pagina Web cand mouse-ul se afla pe o legatura, fereastra in care este afisata valoarea data acestui atribut. 

Acest atribut are astfel menirea de a furniza informatii suplimentare despre semnificatia unei legaturi


<html>
<head>
<title> Atributul title</title>
</head> 
<body>
<h3>Atributul title</h3><br> 
<a href="mailto:a_bsz@yahoo.com" title="adresa mea de e-mail"> 
Mesaje catre autorul paginii 
</body>
</html>

                                      Legaturi catre un fisier de sunet

Sunetele pot fi stocate in fisiere in diverse formate:

• AU/m-law cu extensia .au;
• AIFF/AIFC cu extensiile .aiff, .aif;
• WAVE/WAV cu extensia .wav;
• MPEG Audio cu extensia .mpeg2, sau .mp2;
• MIDI cu extensia .mid sau .midi;

O legatura catre un fisier de sunet se realizeaza folosind eticheta <a> destinata legaturilor catre orice tip de fisiere, unde atributul href va avea valoarea egala cu adresa URL a fisierului de sunet. 
De exemplu:

<a href="numefisier.au">Link catre fisierul de sunet</a>

                                           Legaturi catre fisiere videoclipuri

Videoclipurile sunt stocate in fisiere diverse formate.Formatele si extensiile corespunazatoare pentru fisierele utilizabile in paginile Web sunt urmatoarele:

• MPEG cu extensia .mpeg sau mpg;
• QuickTime cu extensia .mov;
• AVI cu extensia .avi.

O legatura catre un fisier de sunet se realizeaza folosind eticheta <a> destinata legaturilor catre orice tip de fisiere, unde atributul href va avea valoarea egala cu adresa URL a fisierului videoclip. 
De exemplu: <a href="numefisier.avi">Link catre fisierul videoclip</a>

Daca va placut acest articol sau altele de pe site-ul  ,meu  va rog sa le distribuiti mai departe pe facebook pentru a afla cat mai multe persoane si daca vreti sa imi dati si un like va invit pe pagina mea de facebook aici: https://www.facebook.com/OriginalsBlue/ 

Read More

Programare HTML -Organizarea textului - Lectia Numarul 4

Elementele HTML se clasifica in elemente bloc si elemente de linie : Elementele bloc - sunt titluri ,paragrafe,liste sau tabele ,acestea sunt structuri mari care contin alte blocuri ,elemente de line sau text. Elementele line sau elementele de text -sunt hiperlegaturi ,referinte ,citate sau imagini ,care sunt structuri mici ce reprezinta  sau descriu secvente de text sau de date.

• Imbricarea elementelor

Elementele HTML se pot imbrica .Cum procedam atunci cand vrem ca in interiorul unui paragraf sa avem un cuvant ingrosat?
 <p>Aici trebuie sa avem un cuvant <em>evidentiat</em></p>
 <p>Aici trebuie sa avem un cuvant <em>evidentiat</p></em>
Care este varianta corecta ?
Imbricarea elementelor reprezinta incadrarea unor marcatori in interiorul altor marcatori , fara sa afecteze integritatea codului HTML. Codul html este considerat valid cand acesti marcatori sunt inchisi in ordinea inversa in care au fost deschisi.

• Exemplu corect : <p>Aici trebuie sa avem un cuvant <b>ingrosat</b></p>
• Exemplu gresit : <p>Aici trebuie sa avem un cuvant <b>ingrosat</p></b>

Ce parere aveti insa de urmatoarea varianta :
 <b>Aici testam cateva <u> formatari <b> de text</u>
Acest cod html este valid .Diferenta consta doar in tipul de text pe care utilizatorul vrea sa-l obtina . Daca executati acest cod o sa puteti observa ca textul ingrosat se opreste dupa cuvantul 'formatari', de unde continua numai textul subliniat.

• Elemente de tip antet ( header )

<title>...</title>  - Acest element defineste titlul documentului .Browser-ul web afiseaza acest titlu pe bara de titlu a ferestrei .Elementul title  nu contine alte elemente .Intr-un document ,este permis un singur element title.
<base> - Acest element specifica un URL (Uniform Resource Locator) de baza penrtu toate referintele si hiperlegaturile din document .Trebuie dispus inaintea oricarui element ce poate referi o resursa externa .HTML permite un singur element base pentru un document. Elementul base are atribute ,dar nu are continut.
<link> - Acest element specifica legaturi catre alte documente si are doua atribute :
- atributul rel -descrie legaturile anterior si urmator (previous si next );
- atributul type - specifica tipul legaturii URL (text/css,text/javascript,image/gif);
Elementul link se trece intre tag-ul <head>   si </head> si poate sa existe de mai multe ori intr-un document html.

• Exemplu :

<html>
<head>
<title>Elemente head<t/itle>
<base href='http://learncodingweb.blogspot.ro/'>
</head>
</body>
</html>

<meta> -Acest element poate fi folosit pentru a specifica autorul ,data publicarii ,data expirarii,descrierea paginii,cuvinte cheie si orice alt fel de metadata. Datorita naturii generice , elementele meta specifica perechi de forma nume=valoare. Acest element nu are tag de sfarsit.
Atributul obligatoriu este content .Atributul obtional name impreuna cu valorile : author , description , keywords , revised  specifica autorul , descrierea , cuvintele cheie si ultima data la care pagina a fost revizuita, Atributul obtional http-equiv impreuna cu valoarea refresh specifica la cate secunde se reinnoieste pagina . Cele mai multe motoare de cautare folosesc programe robot (Web Spiders) . Aceste programe copiaza paginile vizitate intr-o baza de date , pe care mai tarziu o prelucreaza ,folosind o indexare dupa cuvinte cheie pentru a face mai usoara cautarea. Cuvintele cheie fac parte din metadate .Aceasta indexare se face prin citirea metadatelor din documentele sursa html .In functie de metadate ,fiecare pagina web este incadrata intr-o categorie.

ATENTIE ! -Metadata este o informatie care nu se afiseaza .Cu alte cuvinte ,informatia continuta intag-ul ,eta nu apare in pagina web.

Exemplu :
 *Cuvinte cheie sunt HTML,XHTML,CSS
<meta name='keywords' content='HTML,XHTML,CSS' />
 *Descrierea site-ului este -Coding Web programare si distractie
<meta name='description' content='Coding Web programare si distractie' />
*Ultima data cand pagina a fost revizuita este 26/03/2017 ,iar pagina a fost revizuita de Licode Yoka.
<meta http-equiv='refresh' content='5'>
*Pagina web va fi actualizata la fiecare 5 secunde .
<meta name=revised' content='Licode Yoka , 26/03/2017' />

• Elemente de tip body (corpul pagini)

<p>...</p> Acest element creeaza un paragraf.Este cel mai comun element de bloc.Tag-ul de sfarsit nu este obligatoriu. Acest elemente poate contine atributul align cu urmatoarele valori : left ,right,center si justify - care specifica alinierea textului in cadrul paginii.

ATENTIE ! - Odata cu versiunea HTML 4.01 atributul align a fost inlocuit cu stiluri. 

<blockqoute>...</blockqoute> -Acest element introduce un citat si este folosit cand citatul in sine contine elemente de bloc (de ex : citirea mai multor paragrafe).Atributul cite specifica sursa si trebuie sa fie un URL de tip linie .
<hr> Insereaza o line orizontala pentru controlul paginii.

• Exemplu

<html>
<head>
</head>
<body>
<blockqoute>
Acesta este un citat foarte lung <p>Acest este un citat foarte mare</p></blockqoute>CodingWeb For You !<hr>
</body>
</html>

• Elemente heading 

Definesc titluri de sectiuni la niveluri diferite .Pentru cel mai inal nivel -cel mai mare titlu se foloseste <h1>...</h1>. Pentru cel mai mic nivel se foloseste <h6>...</h6> -cel mai mic titlu.
     Atributul align specifica alinierea in pagina .De exemplu codul :
 <h1 align='center'>Coding Web</h1> - va genera un textul -Coding Web - de tip h1 centrat in pagina.Cele mai multe browsere dispun titlurile <h1> ca text mare cu un font diferit, si titlurile <h6> ca text mic ,ingrosat.

• Elemente generale 

Elemente de tip linie -pentru obtinerea unui cod html valid ,aceste elemente nu se plaseaza direct in interiorul elementului body ,ci se incadreaza in intregime in interiorul elementelor de bloc.
<em> ...</em> -Provine de la emphasis -subliniere ,evidentiere .Conventional se dispune textul inclinat.
<strong>...</strong> -Provine de la strong emphasis - subliniere ,evidentiere puternica .Conventional se dispune textul ingrosat.
<q>...</q> -Provine de la quotation -citat .Se pot folosi numai elemente de linie sau de text. Atibutul cite ofera sursa si trebuie sa constituie un URL corect.
<del>...</del> -Text sters ;textul apare taiat cu o linie la mijloc.
<ins>...</ins>Text inserat se foloseste de obicei pentru a marca inlocuirea tesxtului sters .Textul este afisat subliniat.

• Elemente pentru documentarea codului

Aceste elemente sunt folosite pentru documentarea dezvoltarii codului sursa si se refera la:
<code>...</code> -codul sursa
<samp>...</samp> -rezultatul executiei cudului
<kbd>...</kbd> -textul introdus de utilizator de la tastatura
<var>....<var> -variabile


Daca va placut acest articol sau altele de pe site-ul  ,meu  va rog sa le distribuiti mai departe pe facebook pentru a afla cat mai multe persoane si daca vreti sa imi dati si un like va invit pe pagina mea de facebook aici: https://www.facebook.com/OriginalsBlue/ 

Read More

Programare HTML - Formatarea textului si a pagini web - Lectia Numarul 3

In limbajul de programare HTML pentru a modifica dimensiunea ,culoarea sau aspectul unui text au fost create niste etichete sau taguri specifice cu ajutorul carora administratorii de site-uri pot modifica aspectul unui text dupa bunul plac. Pentru evidentierea textului se folosesc efecte de formatare specifice editoarelor de text .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) -<h1> ,<h2> ,<h3> ,<h4>,<h5>,<h6>, de la 1 la 6, sunt diferite ca marime (1 cel mai mare iar 6 cel mai mic). Etichetele si 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> .

• Tipuri de text :

In html pentru a defini fontul, marimea si culoarea textului , se folosesc urmatoarele atribute :

* face - defineste numele fontului
* size - defineste marimea textului
* color - defineste culoarea textului

Mai multe atibute gasiti in tabelul din dreapta

Exemplu :

 <font face=''nume_font' size='marime' color='culoare'>Aici introduceti textului caruia vreti sa iti aplicati aceste atribute</font> 

  ATENTIE ! - Odata cu versiunea HTML 4.01 tag-urile <font> si <u> au fost eliminate si inlocuite cu stiluri in CSS ( Cascade Style Sheets ) .Despre stiluri vom discuta in lectiile urmatoare cand vom trece la partea de programare CSS .
Tag-ul <br> face parte din categoria de elemente goale (empty tags ). Aceste elemete nu necesita tag de sfarsit .

Atributul color reprezinta culoarea prin nume ,de exemplu ,

<font color='red' > Ce faci ? </font>    sau prin cod hexazecimal :
<font color='0099FF'> Bine ! </font> 

• Tipuri de fundal

* Colorat : <body bgcolor='blue'></body>
* Imagine : <body background='C:\\Proiect Site\Img\insula.jpg'></body> - Dupa egal intre ghilimele se introduce adesa imagini alaturi de denumire si extensie.

  ATENTIE ! - Specificarea caii pana la imagine : In acest exemplu imaginea se afla pe partitia C in folderul Img din directorul Proiect site ,cu denumirea insula.jpg .Directorul (folderul ) 'Img' se afla in acelasi folder cu documentul html,astfel in loc de a trece toata calea catre imagine se poate scrie decat numele imagini -Ex <body background='insula.jpg'></body>. In cazul in care imaginea se afla in alt folder dacat in cel care se afla documentul html ,se specifica intreaga cale: 'E:\wallpapers\fundal.jpg'  

Exemplu :

<html>
<head>
<title>Formatare text</title>
</head>
<body backgound='aici introduceti adresa unei imagini'>
<b>Text ingrosat<b><br><u>Test subliniat</u><br>
<i>Text inclinat</i><br><big>Mare</big><br><small>Mic</small><br>
<font face='arial' size='+2' color='red'> Imi  place site-ul Coding Web </font>
</body>
</html>

In urma executari acestu cod se  va afisa aceasta pagina :

Daca va placut acest articol sau altele de pe site-ul  ,meu  va rog sa le distribuiti mai departe pe facebook pentru a afla cat mai multe persoane si daca vreti sa imi dati si un like va invit pe pagina mea de facebook aici: https://www.facebook.com/OriginalsBlue/ 

Read More

Programare HTML - Structura unui document HTML- Lectia Numarul 2

   

  
Tag-urile HTML . Ce sunt tag-urile HTML ? 

Tag-urile sunt niste marcaje sau etichete pe care limbajul HTML le foloseste alaturi de texte pentru a construi o pagina web si pentru a  ajuta browser-ul de internet sa afiseze corect continutul unei pagini web.Tag-urile din cadrul limbajului sunt foarte multe ,dar noi  astazi o sa vorbim doar despre o parte dintre ele ,care sunt cele mai importante si pe care le gasiti pe fiecare pagina a unui site.

 Aceste tag-uri sunt :  <html>  , <title> , <head> , <body>  

In cadrul limbajului Html tag-urile sunt de doua felulri:

 - taguri pereche , adica un tag de inceput si unul de sfarsit . 

  Exemplu :  <html> si </html> , <title> si </title> (Tag-urile de incheiere au in fata cuvantului cheie caracterul " / " pe cand tagul de inceput nu are acest caracter)

-taguri singulare ,adica tag-uri care nu au tag de incheiere 

 Exemplu:  <hr> ,  <br> ( aceste taguri nu au tag-urile </hr> si </br> , insa daca in cadrul unei pagini se folosesc aceste taguri nu este nicio problema , pagina web va afisa rezultatele fara erori)

  Tag-uri importante pe care le contine fiecare pagina web sunt :

* <html>  -cu acest tag incepe orice document ,pagina html .Prin folosirea acestui tag ii spunem browser-ului ca este vorba de un fisier HTML pentru ca acest sa il poata afisa corespunzator.

*<head> -intre aceste tag-uri sunt trecute informatiile care nu sunt afisate pe pagina web si anume putem trece informatii cu privire la titlul pagini,numele autorului,data cand a fost creata pagina si orice informatie pe care nu vrem sa o afisam pe pagina  web.

*<title> - cu acest tag se specifica titlul pagini web si de obicei acest tag se afla in interiorul tag-ului <head> si </head>. Dupa scrierea acestui tag se introduce numele titlului dorit dupa care uremeaza tag-ul de inchidere si anume : </title> .

 Exemplu: Pentru a pune titlul " Masini de vanzare " unei pagini web vom folosi urmatorul cod: <title> Masini de vanzare </title>

*<body> dupa ce am deschis acest tag tot ce scrim in interiorul acestui tag va fi afisat pe pagina noastra web. ( Tot ce se scrie intre tag-urile <body> si </body> va fi afisat , de catre browser,iar tot ce va fi scris dupa tagul </body> nu va mai fi afisa pe pagina web) 

*</html>- este tag-ul de incheiere pentru tagul <html > si ii spune browser-ului ca documentul html a fost incheiat.

Observatie : Tag-urile pot fi scrise atat cu litere mici cat si cu litere mari .Limbajul HTML nu face diferenta dintre caracterele mari si mici  . 

Nu uita-ti atunci cand scrie-ti codul sursa al unei pagini web obisnui-ti-va ca odata ce a-ti deschis un tag sa il si inchideti pentru a evita erorile din cauza uitari inchideri unui tag. 

   

Prima Pagina Web - Primul document HTML?

Pentru a crea prima pagina web vom folosi editorul text- Notemap sau Wordpad. Vom incepe cu tag-ul <HTML>Pentru a nu uita de tag-ul de inchidere este bine sa-l pui si pe acesta tot la inceput. In continuare vin tag-urile <HEAD> si&nbsp</HEAD>Apoi intre cele doua tag-uri vom pune perechea de tag-uri <TITLE> si </TITLE>. Intre aceste tag-uri punem titlul paginii: Prima mea pagina web. Urmeaza tag-urile <BODY></BODY>. Ce vom scrie intre ele va fi afisat in browserul de internet.

Iata cum ar trebui sa arate codul HTML:

<html> <!--Acesta este inceputul documentului-->
<head> <!--Inceput antet-->
<title>Prima mea pagina web</title><!--Titlu Pagini-->
</head> <!-- Sfarsit antet-->
<body> <!-- Inceputul corp documentului. Zona vizibila de pe site-->
Bine ai venit!Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!
</body><!--Sfarsit corp documentului-->
</html><!-- Sfarsit documentului-->

Am folosit tag-ul <BR> pentru a trece pe urmatorul rand. Astfel ii spunem browser-ului ca ce va fi scris dupa tag-ul <BR> va trebui afisat pe urmatorul rand. Tag-ul <BR> nu are un tag de inchidere. Perechea de etichete /tag <html> si </html>  defineste un document  HTML . Singurele elemente admise  in cadrul unui element html  sunt element head si unul body . Perechea de etichete <head> si </head> delimiteaza sectiunea de antet a documentului ,unde sunt scrise informatii despre pagina respectiva. Elementul head contine si metadate pentru document .
Perechea de etichete <body> si </body> delimiteaza documentul si este sectiunea in care se gaseste continutul efectiv al paginii web .

Dupa ce am scris codul, va trebui sa salvam documentul cu extensia .html . Din meniul File alege optiunea Save As, iar apoi redenumim documentul asa cum vrem, dar cu una din extensiile de mai sus. Apasa butonul Save. Ai acum un document html, care reprezinta prima ta pagina web.

Intra in fisierul unde ai salvat documentul si deschide-l. Daca nu se deschide o pagina alba pe care sa scrie "Prima mea pagina web " ,atunci dai click drapta pe fisierul html si selectea za optiunea "Open AS"  dupa care selecteaza unul dintre browser-ele de internet ( Google Chrome ,Mozila Firefox, Internet Explorer,Opera ,etc)  

 @ Pentru a vedea codul unei pagini web scrise cu HTML click dreapta si alege din meniul  optiunea View Source (in functie de browser poate sa difere modul in care poti vedea sursa unei pagini web)

Read More

Programare HTML- Elemente de baza -Lectia Numarul 1

   

           
  Cu ajutorul limbajului HTML  poti construi pagini web nu foarte pretentioase insa reprezinta un inceput pentru realizarea site-urilor profesionale. Sigur ca va trebui sa mai treaca ceva timp pana vei putea realiza pagini web complexe ca cele ale marilor firme, insa asa cum spuneam, invatarea limbajului HTML reprezinta un inceput. Pe parcursul acestui curs, vei gasi foarte multe exemple, iar in ultima lectie, folosind notiunile invatate, vom realiza impreuna site-ul unei gradinite particulare. 

 Ce este limbajul HTML?

 HTML este prescurtarea de la Hypertext Markup Language, ceea ce reprezinta de fapt limbajul pe care browserele de internet il inteleg si cu ajutorul lui pot fi afisate paginile web. Limbajul HTML nu este greu de invatat, asa cum te vei putea convinge din acest curs. Este de ajuns sa cunosti tag-urile de baza ale acestui limbaj (vom vedea mai incolo ce inseamna aceste tag-uri) pentru a putea crea o pagina web. Pentru aceasta trebuie sa exersezi cat mai mult, incepand cu exemplele din cadrul cursului HTML pe intelesul tuturor, sa scrii tu codul pentru fiecare exemplu. In felul acesta vei dobandi foarte repede cunostintele de baza, care te vor ajuta sa creezi pagini web din ce in ce mai performante. 

 De ce trebuie sa invat HTML?

           Exista multe programe cu ajutorul carora scrierea codului HTML nu mai este necesara, aceste programe scriindu-l in locul tau. Insa aceste programe nu fac subiectul acestui curs, iar pentru a putea construi o pagina web este nevoie cel putin de niste cunostinte elementare de HTML pe care am incercat sa le explicam in cadrul cursului. Cursul de fata se adreseaza, in primul rand, celor care vor sa invete limbajul HTML, si astfel, prin scrierea codului, sa detina controlul absolut asupra viitoarei pagini web. Aceste programe se numesc editoare HTML si pot fi de doua tipuri: editoare clasice si editoare de tipul WYSIWYG (What You See Is What You Get, care se traduce prin ceea ce vezi este ceea ce obtii). In cazul celei de-a doua categorii de editoare HTML, utilizatorii nu trebuie decat sa se ocupe de partea grafica, de asezarea in pagina etc., scrierea codului HTML ramanand in seama acestor programe. O observatie demna de luat in seama este si aceea ca cele mai bune editoare HTML nu sunt gratuite. Sfatul meu este ca pentru realizarea paginilor web sa folosesti un editor HTML, care iti este cel mai de folos, dar numai atunci cand te vei familiariza cu limbajul HTML. 

  Invatarea limbajului HTML are trei mari avantaje: 

- este foarte simpla si nu necesita mult timp 
- ofera controlul absolut asupra realizarii paginii web 
-poti folosi in cadrul paginilor pe care le vei realiza secvente de cod HTML "imprumutate" de la alte pagini web .

Ce trebuie sa stiu pentru a ma apuca sa invat HTML? 

Invatarea limbajului HTML este foarte usoara, nu ai nevoie decat de urmatoarele: sa stii sa utilizezi un editor de text (ex: Notepad etc.) sa ai cel putin un browser de internet (ex: Microsoft Internet Explorer, Mozilla Firefox, Google Chrome etc.) sa-ti faci un pic de timp liber (de exemplu o jumatate de ora pe zi), pentru a urma cursul de fata si pentru a scrie tu fiecare exemplu pe care-l vei intalni aici Acum, inainte de a incepe, este cazul sa-ti pui cel putin urmatoarele doua intrebari: Vreau sa invat limbajul HTML? Ma va ajuta cu ceva daca o sa stiu sa fac pagini web folosind HTML?

 Daca ai raspuns afirmativ la aceste intrebari, sa trecem la fapte, adica la realizarea primului document HTML. Sa incepem, deci, prima lectie, in care vom afla care este structura unui document HTML. In partea dreapta a site-ului (atat in pagina cursului, cat si in paginile lectiilor) ai cuprinsul cursului si poti merge in orice moment la oricare dintre lectiile cursului (trebuie doar sa dai un click pe numele lectiei care te intereseaza). Scopul este ca atunci cand ai uitat o notiune invatata intr-o alta lectie sau pur si simplu vrei sa treci de la o lectie la alta, sa o poti face cu usurinta, doar cu un simplu click...

Read More

Proiectarea Interfetelor Web - Programare Web -Aspecte Generale

Aplicatiile Web ofera acesul interactiv la informatii prin Internet ,de aceea acest tip de aplicatii este orientat spre interfata cu utilizatorul. 
   Proiectarea interfetelor web se inscrie in domeniul proiectarii interfetelor grafice cu utilizatorul ( GUI -Graphical User Interface ) ,activitate care necesita cunostinte din domeniul interactiunii om-calculator.Interactiunea om-calculator ( Human-Computer Interaction =HCI ) este definita de ACM (Association For Computing Machinery ) drep "disciplina : care se ocupa cu proiectarea ,evaluarea si implementarea sistemelor interactive utilizate de oameni ,precum si cu studierea fenomenelor semnificative legate de acestea".

  Proiectarea interfetelor web (numite si site) este centrata pe utilizator si parcurge urmatoarele etape:

* Identificarea potentialilor utilizatori , a categoriilor sociale si profesionale din care acestia fac parte;
* Identificarea si intelegerea cerintelor utilizatorilor finali;
* Analiza activitatilor si contextul interactiunii dintre om si calculator;
* Crearea unui prototip al site-ului;
* Realizarea site-ului;
* Evaluarea site-ului
* Reluarea etapelor anterioare dupa corectarea erorilor semnalate la evaluare -daca acestea exista.

In toate aceste etape trebuie luate in considerare cel putin urmatoarele aspecte generale ale proiectarii:

* Informatiile oferite pe site trebuie sa fie determinate de obiectivele propuse si de publicul( vizitatorii) tinta.
* Prima impresie nu se produce decat o singura data;
* Un site trebuie sa furnizeze raspunsuri la urmatoarele intrebari:Ce informatii si functionalitatii ofera ? Cine ofera aceste informatii? Cand au fost actualizate aceste informatii?
* Informatiile importante trebuie evidentiate prin pozitie,efecte cromatice,animatie,etc.;
* Un site care se incarca greu sau este "neatractiv" va fi ignorat in favoarea altuia ;
* Paginile site-ului trebuie sa fie consistente si coerente ;
* Site-ul trebuie sa fie interactiv ,sa ofere utilizatorului posibilitatea de a comunica ( de aceea este necesar ca un site sa contina cel putin o sectiune de contact);
* Este necesara includerea in site a unei pagini care precizeaza conditiile de utilizare ( drepturi,restrictii).

Organizarea Continutului Pe Pagina !

Utilizatorii citesc rareori pasaje lungi de text pe ecranele calculatoarelor ; majoritatea oamenilor care cauta o anumita informatie vor avea dificultati in localizarea datelor dorite ,daca vor fi dirijati sa parcurga  blocuri lungi de text  pentru a gasi ceea ce cauta .Fragmentand informatia  in secvente  de dimensiuni reduse ,aceasta se poate organiza mult mai usor  in unitati modulare  care respecta  o schema de organizare  consistenta ,formand o ierarhie de module informationale .
Activitatea de organizare a informatiilor pentru Web poate fi impartita in urmatoarele subactivitati dependente una de alta:

 * Divizarea informatiilor in unitati logice;
 * Stabilirea unei ierarhii a modulelor de date ,in functie de importanta si de generalitate;
 * Utilizarea acestei ierarhii pentru a crea relatii intre unitatile logice;
 * Analizarea rezultatului  din punct de vedere estetic si functional .

De cele mai multe ori ,modul de organizare a informatiilor dintr-un site determina modul de organizare a intrumentelor de navigare puse la dispozitie utilizatorului.Un mod de navigare foarte des intalnit este cel oferit de un meniu orizontal  de legaturi ,afisat in partea superioara a fiecarei pagini .

Elemetul selectat la un moment dat este clar evidentiat fata de celelate elemente .In felul acesta utilizatorul stie exact unde se afla pe site si are posibilitatea de a ajunge foarte repede dintr-un modul de informatie in altul.Meniul este organizat logic si natural ,astfel incat utilizatorul sa poata intui ce categorii de informatii sau functionalitati ii sunt oferite prin accesarea unei legaturi .

Read More

Mediu de lucru server Web ! Dezvoltarea aplicatiilor web cu PHP !

Dinamica informatiilor si a serviciilor pe Internet impune gestiunea acestora astfel incat continutul sa fie "la zi" ,iar accesul foarte bine controlat pentru a raspunde cerintelor de securitate si protectie. Ca utilizatori ,suntem familiarizati cu efectele de schimbare da imaginilor observate de vizitarea repetata a unui site .Cu siguranta ,multi dintre voi v-ati intrebat cum sunt realizate aceste efecte? O solutie intuitiva ar putea fi data de organizarea imaginilor intr-o baza de date  si extragera lor aleatoare ,in momentul vizitarii. Dar contorizarea vizitatorilor ,sau realizarea votului electronic? Bazele de date si prelucrarile corespunzatoare prin limbaje de programare specializate respective o solutie si pentru aceste cerinte. Pentru a tine ritmul cu cerintele utilizatoriilor ,in toata industria de software au fost create intrumente de lucru care sa permita dezvoltarea aplicatiilor web atat la nivelul gestiuni prin baze ,cat si a accesului si al prezentarii .Un exemplu il reprezinta bazele de date MySQL cu acces PHP si prezentare HTML.

Pentru dezvolatarea aplicatiilor web in acest context  ,sunt necesare urmatoarele componente:

• Server web
• PHP-interpretor de comenzi pentru realizarea secventelor executate pe server;

In literatura de specialitate , pentru aceste secvente se foloseste termenul script , PHP este un instrument de lucru pentru dezvoltarea  aplicatiilor web foarte accesibil si atractiv . Iata cateva argumente :

-poate fi integrat cu usurinta intr-un cod html ,chiar si intr-o pagina web existenta;
-permite controlul datelor (variabile elementare ,tablouri) foarte asemanator cu limbajele de programare algoritmice (PASCAL,C/C++),printr-o sintaxa foarte simpla;
-permite accesul la baze de date sau prelucrarea acestora ,corespunzator cerintelor specifice aplicatiei.

• MySQL-pachetul de programe pentru gestiunea bazelor de date.

Orice tip de server Web poate lucra cu PHP si MySQL ,dar cel mai recomandat este Apache -Server public si gratuit.

Exemple de domenii si aplicatii care necesita gestiunea datelor pe Internet.
Portal , serviciu complex de informare ,prezentare,comunicare si colaborare ,care ofera in special firmelor posibilitatea de a-si prezenta produsele ,de a atrage clienti sau de a stabili relatii cu parteneri de afaceri .Portalul este imaginea de zi a firmei pe  care o reprezinta ,de aceea informatiile sunt oraganizate in colectii usor de actualizat si de consultat ( baze de date       Informatiile publice oferite de portal sunt contorlate de un serviciu de administratie care asigura atat redactarea clara si accesibila ,cat si caliatatea informatiei. Un portal poate oferi sesiuni de lucru echipei ,in timp real ,prin discuti (chat) sau prin dezbateri (forum) , liste de discutii si comentarii .Vizitatorii portalului pot intra in corespondenta ,prin email,cu persoana de contact autorizata sa preaia si sa distribuie corespondenta.

Read More

Modelul Client - Server ! Dezvoltare Aplicatii Cu Modelul Client-Server !

Necesitatea aplicatiilor in retea a impus dezvolaterea unor modele de interconectare ,in care calculatoarele au roluri stabilite protivit functiilor care le revin : server sau client.Serverul este calculatorul  pasiv care asteapta cereri de la clienti- calculatoare active. Dupa primirea unei cereri ,aceasta este procesata de catre server , iar rezultatul este transmis clientului.Toate  serviciile Internet sunt oferite de catre servere.Spre exemplu ,aplicatiile de tip pagini web functioneaza pe modelul de client server: cand consultam o enciclopedie on-line ,calculatorul de la care  lucram ,impreuna cu web browser-ul folosit ,formeaza componenta client; calculatorul pe care se gasesc depozitatele de informatie ,impreuna cu toate aplicatiile necesare  gestiunii acestora ,formaza componenta server web.

Acest model se numeste si master slave ( "stapan-slav") ;componenta master trimite comenzi ,iar componenta slave le executa. In afara celor doua elemente fizice ,in acest tip de model exista si componente logice care asigura stocarea si procesarea datelor :datebase server( serverul dedicat  datelor ,spre exemplu MySQL) si application server (serverul de aplicatie).
In urma distributiei activitatilor de management pentru date si activitati ,creste gradul de securitate a datelor ,prin accesul controlat la nivelul fiecarui server. Cererile simultate din partea clientiilor pot duce insa la ingreunarea traficului  si chiar la congestionarea sau blocarea acestuia.

Read More

Dezvoltarea Aplicatiilor Web -Introducere In Lumea Programari Web !

Acest rezumat nu este disponibil. Dați clic aici pentru a vedea postarea.

Read More