Despre Internet si Date

Click to addBookmark this page

Internetul reprezinta cea mai importanta descoperire a secolului XX. Desi cu totii cunoastem aces lucru nu toti stim exact ceea ce inseamna cuvantul Internet. Pentru multi
internetul este fereastra de Yahoo Messenger ("Intri si tu pe net diseara?") pentru altii Internetul este reprezentat doar de website -ul google.com ("Cauta pe net!"); Notiunea de
Internet este mult mai complexa si mai greu de explicat decat ne-am putea imagina. Prin Internet trebuie sa intelegem atat sistemele ce fac parte dintr-o retea globala si care
comunica intre ele cat si cantitatea imensa de informatie ce se transmite in fiecare secunda intre oricare dintre aceste sisteme interconectate prin cabluri, fibra optica sau wireless.
Pe parcursul acestui curs vom studia o mica parte din ceea ce reprezinta reteaua globala. Vom studia modalitatea de a face an umite
informatii accesibile de catre altii intr-o forma numita de noi toti "site web" printr-o metoda denumita "dezvoltare web" sau "programare web".
Practic vom folosi diferite limbaje de descriere sau programare pentru a face aceasta informatie accesibila prin diferite protocoale si reguli
cunoscute de orice computer conectat la Internet.
Pentru a construi un site web trebuie mai intai sa studiem limbajul de descriere numit HTML (HyperText Markup Language); Acest limbaj
este tranferat la nivelul unei retele de pe un server care sustine site-ul nostru printr-un protocol numit HTTP (HyperText Transfer Protocol) pe
computerul unei persoane numite "vizitator";
PHP este un limbaj de programare prin care dinamizam HTML-ul; Adica modificam site-ul in functie de anumite evenimente sau de
interactiunea utilizatorului si aplicatia web.
PHP inseamna Hypertext Pre Processor si a fost dezvoltat special pentru construirea paginilor web a site-urilor dinamice. Cu ajutorul PHP
modificam datele expuse pe o pagina web si modul de expunere a lor in functie de anumite evenimente. Putem crea aplicatii web care
interactioneaza cu utilizatorul prin formulare, sau aplicatii ce interactioneaza cu baze de date unde fiecare utilizator are propria sectiune pe
care o poate sau nu modifica sau prin indermediul careia poate avea acces privilegiat la anumite informatii.

In continuare, in acest curs fom folosi pentru scrierea codului aplicatia Neatbeans iar pentru serverul de baze de date vom folosi MySQL pe care il vom putea utiliza folosind
aplicatia XAMPP:
Descarcarea Neatbeans
Descarcarea XAMPP
 Pentru pornirea serverului web/mysql vom folosi utilitarul XAMPP
In primele cursuri nu este necesara pornirea serverului web Apache,deoarece tot codul scris in html sau css,ce actioneaza pe parte de client poate fi interpretat de catre client
si astfel nu este necesara prezenta unui server
In momentul in care vom scrie cod in limbajul php vom avea nevoie de un server web care sa interpreteze codul
Deoarece se urmareste o continuitate a cursului vom porni totusi serverul web chiar daca acesta nu este necesar momentan.

Retineti portul pe care asculta serverul de Apache,in cazul in care portul nu este 80(default).
Pentru a incepe sa scriem efectiv cod html vom folosi Neatbeans.
Vom crea un nou proiect PHP.
Dupa care ii vom da un nume proiectului nostru.
Nu uitati ca radacina sistemului de fisiere trebuie sa fie intotdeauna htdocs.
In urmatoarea fereastra apare motivul pentru care am mentionat ca portul pe care asculta serverul web in cazul in care acesta nu este 80.
In cazul in care portul este 80,atunci nu este nevoie sa faceti nici o modificare,iar fereastra va arata in felul urmator.
Daca portul pe care asculta serverul web este diferit atunci va fi nevoie sa agaugati si acest port in campul Project URL in felul urmator.
 Dupa aceste configurari se poate apasa butonul de Finish.
La momentul crearii proiectului ne va interesa in mod special folderul Source Files in care se gaseste fisierul nostru de tip php ce se numeste index.php
Daca doriti sa schimbati numele acestui fisier puteti face click-dreapta pe Source File->Properties,dupa care in modul Run
Configuration se poate modifica numele fisierului.
Alt lucru foarte important aici este din nou portul pe care asculta serverul web,din campul Project URL.
Pentru a rula codul exista doua posibilitati.
Fie puteti face click-dreapta pe proiect,dupa care click pe run.
 Fie puteti apasa pe butonul run din meniul Netbeans.

Dupa rularea proiectului,care momentan nu contine nimic,se va deschide o noua pagina goala in browser.
Veti observa ca proiectul incepe cu urmatoarele linii.

Prima linie specifica faptul ca pagina ce urmeaza trebuie interpretata de browser ca una html 5,prin specificarea DOCTYPE-ului html asigura
compatibilitatea si cu versiuni html anterioare.

O pagina este compusa din elemente.Un exemplu de astfel de elemente este cel HTML compus din tag de deschidere si tag de inchidere.
 Tot ceea ce se afla in interiorul unui element se cheama inner html
Html-ul ca element radacina are doua elemente componente:

 head

 body

Toate elementele si toate atributele conform conventiilor de scriere se scriu cu litere mici,asta nu insemna insa ca daca acestea se scriu cu
litere mari codul nu va functiona.
Intr-un element,pot fi trecute aricate atribute,ordinea acestora putand fi aleatorie.
Elementul title este folosit pentru a da un nume paginii html,care va aparea pe tabul in care este deschisa pagina.

In cazul in care se doreste scrierea pe mai multe paragrafe,un singur enter(trecerea pe un nou rand) su se va transpune in scrierea pe alt
rand si dupa rularea codului.
 Pentru a putea sa scriem pe un nou rand putem sa folosim <br/> inainte de textul pe care dorim sa-l trecem pe un nou rand sau sa folosim elementul p,diferenta dintre cele
doua metode constand in spatierea care este introdusa.
 Ar fi de mentionat si faptul ca indentarea este importanta in scrierea unui cod html pentru a putea fi citit foarte usor.
In Neatbens pentru a aranja codul in mod automat,se poate face click-dreapta in interiorul casetei de editare a codului,dupa care click
pe Format.

Titluri
Click to addBookmark this page
Pentru a defini un titlu se folosesc asa numitele taguri <hx> (x este inlocuit de un numar intre 1 si 6).
 As putea sa folosesc acestea drept titluri sau subtitluri,insa au un scop precis,si anume optimizarea motoarelor de cautare,in sensul in care paginile cu heading-ul cel mai
mic,sunt afisate cel mai rapid.
In heading-urile cu idexul cel mai mic se scriu de obicei cat mai putine cuvinte,relevante pentru pagina.
 Legaturi cu o pagina externa
Click to addBookmark this page
Un link reprezinta o legatura catre alta pagina.
Elementul folosit pentru crearea legaturii este a ce vine de la anchor(ancora)
Ancorele pot face legatura cu:

 O pagina interna

 O pagina externa

Legatura cu o pagina externa

Pentru a face legatura cu o pagina externa se foloseste atributul href care ia valoarea paginii catre care se doreste legatura.Nu uitati sa
specificati si protocolul folosit de pagina respectiva.

Dupa ce rulam codul,se va deschide un tab in care va aparea texul trecut in inner html,pe care daca apasam ne va conduce legatura specificata.
 De remarcat este faptul ca pagina catre care se face legatura este deschisa in acelasi tab in care a fost si link-ul nostru.
Pentru a deschide link-ul intr-un tab nou putem sa folosim atributul target caruia ii atribui "_blank".

Pentru a crea o legatura pentru o pagina interna este necesar ca mai intai aceasta sa existe.Pentru a crea o nou pagina in proiect se foloseste
urmatoarea procedura.
In pagina nou putem scrie un text sugestiv pentru a o putea identifica.
Pentru realizarea efectiva a legaturii se foloseste o procedura similara celei prezentate mai sus,cu diferenta ca atributului href ii este dat
numele paginii catre care dorim sa facem legatura,specificand si extensia acesteia.

Dupa rularea codului se observa ca avem optiunea de a merge catre pagina 2.

Inserarea de imagini
Click to addBookmark this page
Se mentioneaza faptul ca fiecare tip de fisier dintr-un proiect ar trebui sa aiba propriu sau folder.
Pentru crearea unui nou folder se foloseste urmatoarea procedura.
Imaginile ce se doresc a fi afisate,vor fi adaugate in folderul specific.
Pentru afisarea unei imagini se foloseste elementul <img/> in care tag-ul de deschidere si inchidere sunt comasate.
Atributul necesar pentru afisarea imaginilor este src care reprezinta sursa imaginii.
Aceasta sursa este usor sa fie specificata relativ la locatia curenta(index).
 Pentru redimensionarea imaginii putem folosi doua atribute:

 width

 height

In cazul in se foloseste un singur atribut atunci imaginea va fi scalata relativ la atributul folosit,daca se doreste controlul imaginii pe ambele
axe atunci se folosesc amblele atribute.
Un alt atribut ce poate fi folosit este Title.
 Se observa ca la trecerea cursorului peste imagine se afiseaza titlul acesteia.
In cazul in care,din anumite motive,imaginea nu poate fi afisata,se foloseste atributul alt care va afisa un text definit de catre noi in locul
imaginii ce nu poate fi afisata.

Am putea sa combinam ultimele 2 notiuni invatate prin a crea o legatura catre imaginea afisata,la dimensiunile reale.
Crearea de tabele
Click to addBookmark this page
Un tabel HTML este definit prin tagul <table>.
Fiecare linie din tabel este definita prin tagul <tr>.Un titlu de linie este definit prin tagul <th>.Implicit titlurile de linie sunt ingrosate si
centrate.Datele dintr-un tabel sunt definite cu tagul <td>.
Folosind tagul <thread> definim un antet de tabel,tagul<tbody> defineste corpul tabelului,in timp ce <tfoot> defineste un subsol de tabel.
Se doreste realizarea unui tabel cu doua coloane,ce prezinta doua produse,avand specificat si pretul fiecarui produs.
Se observa ca afisarea tabelului se face fara linii,pentru adaugarea liniilor si a coloanelor,in elementul table se foloseste atributul border.
 Cu ajutorul atributului border putem seta grosimea liniilor tabelului.
Se observa ca subsolul tabelului se intinde pe o singura coloana,pentru a acoperi toate coloanele folosim atributul colspan caruia ii
specificam pe cate ale coloane dorim sa se intinda coloana pentru care folosim atributul.
 Liste neordonate
Click to addBookmark this page
Putem defini doua tipuri de liste:

 Liste ordonate

 Liste neordonate

Liste neordonate
O lista neordonata se defineste folosind tagul <ul>.Fiecare element din lista incepe cu tagul <li>.
 In mod implicit listele neordonate sunt marcate folosind punct.Daca dorim sa schimbam acest mod de marcate putem sa adaugam atributul style avand
sintaxa style="list-style-type:"tipul markerului dorit".Se pot alege dintr-o serie de maekeri asa cum se poate vedea mai jos.
Liste ordonate
Click to addBookmark this page
O lista ordonata se defineste folosind tagul <ol>.La fel ca la listele neordonate,fiecare element al listei este precedat de tagul <li>.

Implicit o lista ordonate folosete ca markeri cifrele arabe incepand de la 1.Daca dorim sa schimbam aceasta modalitate de marcare putem sa folosim atributul type dupa cum
urmeaza.
 Exista o serie de markeri ce pot fi folositi

 type="1" Lista va fi numerotata cu elementele default

 type="A" Lista va fi marcata cu litere mari incepand cu A

 type="a" Lista va fi marcata cu litere mici incepand cu a

 type="I" Lista va fi marcata folosint litere romane mari

 type="i" Lista va fi marcata folosint litere romane mici

Daca dorim sa pornim marcarea listei de la un anumit element putem sa folosim atributul start si sa specificam primul element cu care se
va face indexarea.
Listele imbricate sunt liste ce se definesc in interiorul altor liste
Click to addBookmark this page
Listele imbricate sunt liste ce se definesc in interiorul altor liste.

Se observa faptul ca sublista a fost definita inainte de tagul de inchidere al elementului din lista pentru care se defineste sublista,aceasta se
poate defini si in afara tagului de inchidere al elementului listei dar in felul acesta este mai greu de inteles.
Inserarea de continut audio/video
Click to addBookmark this page
Asa cum am specificat la momentul in care am vorbit de imagini este recomandat ca pentru fiecare tip de fisiere sa exista cate un folder dedicat pentru acestea.
Pentru a putea insera continut audio folosim elementul audio in interiorul caruia folosim elementul source.
In interiorul tagului de deschidere audio se trece argumentul controls autoplay pentru ca continutul audio sa fie redat automat la
deschiderea pagini si pentru a vedea controlerele pentru acest fisier.
Pentru a putea fi redat continutul audio trebuie specificat si tipul fisierului care este dat de obicei de extensia fisierului,insa pentru siguranta
trebuie specificat MIME type-ul,pentru acest lucru se foloseste atributul type.
 Este recomandat ca in cazul in care un continut audio nu poate fi redat,sa fie prezente si alte fisiere audio pentru inlocuirea acestuia.Acest procedeu este intalnit atunci cand se
doreste ca un fisier audio sa poata fi redat pe mai multe browsere,fisierele de rezerva fiind defapt acelasi fisier avand extensii diferite.
Continutul audio redat este primul din lista care poate fi redat.
Pentru inserarea de continut video procesura este aceeasi cu exceptia elementului audio ce va fi inlocuit cu elementul video.