HTML - Notiuni de baza

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 <>.

In marea lor majoritate elementele sunt pereche, una de deschidere si alta de inchidere . 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: ... < / e t i c h e t a>

Componenta unui document HTML este:
1. versiunea HTML a documentului
2. zona head cu etichetele <> < / h e a d >
3. zona body cu etichetele <> < / b o d y > sau <> < / f r a m e s e t>

Versiunea HTML poate fi:

HTML 4.01 Strict
< ! D O C T Y P E H T M L P U B L I C " - / / W 3 C / / D T D H T M L 4 . 0 1 / / E N " " h t t p : / / w w w . w 3 . o r g / T R / h t m l 4 / s t r i c t . d t d " >

HTML 4.01 Transitional
< ! D O C T Y P E H T M L P U B L I C " - / / W 3 C / / D T D H T M L 4 . 0 1 T r a n s i t i o n a l / / E N " " h t t p : / / w w w . w 3 . o r g / T R / h t m l 4 / l o o s e . d t d " >

HTML 4.01 Frameset
< ! D O C T Y P E H T M L P U B L I C " - / / W 3 C / / D T D H T M L 4 . 0 1 F r a m e s e t / / E N " " h t t p : / / w w w . w 3 . o r g / T R / h t m l 4 / f r a m e s e t . d t d " >


Toate paginile HTML incep si se termina cu etichetele si .In interiorul acestor etichete gasim perechile <>, < / h e a d > si <>, < / b o d y >.

head contine titlul paginii intre etichetele <> si < / t i t l e>, descrieri de tip , 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:
< e = " n u m e " t = " c o n t i n u t ">

Exemplu: link catre un fisier extern CSS:
< l = " s t y l e s h e e t " e = " t e x t / c s s " f = " c s s . c s s ">

body gazduieste practic toate etichetele afisate de browser pe ecran.

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

<>
<>
<>
Titlu
< / t i t l e >
< / h e a d >
<>
Continut pagina
< / b o d y >
< / h t m l >

Comentariul in HTML, care bineinteles nu va fi afisat de browser, poate fi introdus astfel:
< ! - - Acesta este un comentariu in HTML - - >

Realizarea unui site

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.

< h = " 7 5 0 " r = " 0 " g = " 0 " g = " 0 ">

<> < n = " 2 "> H e a d e r < / t d > < / t r >

<> < h = " 1 5 0 "> M e n i u < / t d > < h = " 6 0 0 "> C o n t i n u t < / t d > < / t r >

<> < n = " 2 "> F o o t e r < / t d > < / t r >

< / t a b l e >

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.

< l = " s t y l e s h e e t " e = " t e x t / c s s " f = " s i t e . c s s ">

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.

Web

01). Tutorial hosting partea I
02). Tutorial hosting partea II
03). Realizarea unui site
04). HTML - Notiuni de baza

Convertire imagini in ASCII

Creati imagini din litere si simboluri folosind PHP.

        Probabil ati vazut imagini ASCII foarte etaliate si complexe si v-ati intrebat cum se fac.

Voi face si explica un script PHP prin care se pot obtine astfel de reprezentari ale imaginilor si va pun la dispozitie un generator de imagini ASCII, acesta avand anumite limitari legate de dimensiunile imaginii pentru a nu solicita in mod exagerat serverul.

    Imaginile astfel create vor fi formate din litere de diverse culori si pot fi transferate si an WORD sau alt editor de text. Pentru asta trebuie copiate din paginile unde sunt generate (ctrl + a), puse in WORD iar foarte important este sa setati marimea fontului la 5-6 pixeli si linie speacing la 2-3 (format>paragraph>linie spacing>exactly>2 sau 3 pixeli) [ms word 2003]

convoertor ASCII ->

Ce vom face este destul de simplu. Vom citi dimensiunea imaginii pe care dorim sa o convertim in cod ASCII, cu ajutorul a doua for-uri vom parcurge imaginea ca pe o matrice, (pixel cu pixel), vom trece culoarea fiecarui pixel intr-o variabila si vom afisa pentru fiecare pixel un caracter de aceiasi culoare...

Toate acestea sunt posibile datorita a doua functii PHP: Image Create From Jpeg() si Image Color A(), functii care permit citirea culorii unui anumit pixel daca stim coordonatele acestuia.

Scriptul va avea un sigur fisier, index.php imaginea va fi luata spre a fi prelucrata intr-un link prin metoda $_POST.

Iata codul care transforma imaginile jpg in arta ASCII:

/* functia care citeste extensia imaginii */ function getext($filename) {     $pos = strrpos($filename,'.');     $str = substr($filename, $pos);     return $str; } /* daca nu este apasat butonul de submit afisam formularul, iar daca este  afisat  executam codul de  creare  a  imaginii ASCII */ if(!isset($_POST['submit'])){ ?> " method="post">     URL imagine < e = " t e x t " e = " i m a g e "> <>       < e = " s u b m i t " e = "  s u b m i t " e = " C r e a t e "> //punem extensia intr-o variabila //verificam daca este jpg   if($ext == ".jpg"){         $img = ImageCreateFromJpeg($image);     }     else{         echo'Tipul Fisierului este gresit';     } //citim dimensiunile imaginii     $width = imagesx($img);     $height = imagesy($img); // am ales sa afisez din 6 in 6 pixeli          for($h=0;$h<$height;$h++){ if($h%6==0) {         for($w=0;$w<=$width;$w++){ if($w%6==0) {            // trecem culorile fiecarui pixel in cate o variabila                  $rgb = ImageColorAt($img, $w, $h);             $r = ($rgb>> 16) & 0xFF;             $g = ($rgb>> 8) & 0xFF;             $b = $rgb & 0xFF;            // afisam cate un caracter de culoarea pixelului             echo '#';             $widthi=$width-5;                          if($w>= $widthi){                 echo ' ';             }         }             }         }     } } ?>

HTML

Flash

Text cu enealta Path

Deschide un nou document de orice dimensiune: File -> New -> OK

Apoi selecteaza unealta Pen tool si ai grija de de sus sa fie bifate icon-urile ca in imaginea urmatoare.

Click acum in scena pentru a adauga punctul de start al liniei apoi click an alta parte , reprezentand urmatorul punct si tinand apasat click muti cursorul, astfel vei observa o linie curba.

Daca vrei sa mai adaugi puncte, dai click odata, si la fel faci o curba

Acum urmeaza sa adaugam textul pe o linie ce tocmai am desenat-o.

Selecteaza unealta Horizontal Type Tool, de sus pune ce setari vrei, apoi dai click undeva la inceputul liniei si incepi sa scrii textul. Dupa ce ai terminat de sus apasa butonul de validare (Commit button).

Vei observa in timp ce scrii textul ca acesta se axeaza pe linia desenata.

*Textul are aceleasi proprietati ca un text normal

Avand unealta Horizontal Type Tool activa poti selecta textul si apoi de sus sa-i schinbi culoarea sau marimea co orice altceva.

De asemenea Poti selecta unealta Direct Selection Tool si poti da click pe punctele care formeaza curba si sa le muti.

Sau cu aceeasi unealta, dand click oriunde pe text poti seta de unde sa inceapa textul.

De asemenea poti sa adaugi textul si pe conturul unui cerc sau al unui patrat.

Selecteaza forma pe care oresti, eu am folosit cercul, de sus bifezi icoana pentru Path upa care desenezi cercul.

Din nou selectezi unealta Horizontal Type Tool, dai click pe cerc si adaugi textul

La fel se poate cu oricare dintre forme.

Sper ca v-a fost de ajutor pentru inceput.

Succes!!!