AcasaTutorial Complet HTLM
2 participanți
Pagina 1 din 1
Tutorial Complet HTLM
Scris de KinkyNesquick Sam Feb 19, 2011 10:30 am
Pregatire pentru HTML
P.S Este un tutorial mai lung dar foarte complex !!!
Crearea documentelor in HTML nu este dificila. Pentru inceput nu vei avea nevoie decat de notepad si de putina ambitie. Daca esti nou in domeniul programari si nu ai parcurs inca, Ghidul incepatorului, te sfatuiesc sa petreci cateva minute citindul.
Pagini Web
Paginile web au multe intrebuintari. Aici sunt explicate cateva dintre argumente:
- Cea mai simpla cale de a raspandii informatii pe internet
- O alta forma de a-ti amplifica afacerea
- Poti face cunoscut lumi ca ai ceva de spus intr-o pagina personala
Poate forum, un blog, o pagina de prezentare, sau orice altceva ce iti trece prin cap.
Cuvinte de retinut
- Tag - folosit pentru a specifica regiuni ale documentului HTML, pe care le va interpreta ulterior browser-ul. Tag-urile vor avea aceasta infatisare:
- Element - este un tag complet, avand un de deschidere si unul de inchidere .
- Attribute - este folosit pentru a modifica valoarea unui element in HTML. De obicei un element are mai multe atribute.
Deocamdata trebuie doar sa retii ca un tag este o comanda pe care browser-ul o interpreteaza, ca un element este un tag complet iar un atribut personalizeaza si modifica un element in HTML.
Urmatoarele tutoriale
Pentru tutorialele care urmeaza poti folosii meniul din stanga pentru a parcurge ceea ce te intereseaza, sau poti citi din scoarta in scoarta apasand butonul "Next | >", situat in partea de jos a paginii. Nu te retine in a lasa comentarii acolo unde ceva iti este neclar sau pur si simplu ai de facut o completare articolului.
Elementele HTML au multe ranguri. Tot ceea ce vezi, paragrafurile, banner-ul de deasupra, link-urile de navigare la dreapta si la stanga paginii, sunt toate elemente ale acestei pagini.
Un element are trei parti: un tag de deschidere, continutul elementului si tag-ul de inchidere.
-
***Nota:
Toate paginile web vor avea cel putin elementele de baza: html, head, title si body.
element...
Un document HTML intotdeauna va incepe si va termina cu un tag si respectiv . Aceasta este spructura standard a unui HTML.
Deschide te rog Notepad si copiaza urmatorul cod:
Salveaza documentul di meniul File / Save As. Selecteaza All Files si denumeste fisierul nou creeat, "index.html". Apasa Save. Deschide acum fisierul intr-un browser pentru a avea posibilitatea sa dam refresh (F5).
Daca ai facut totul bine vei putea vedea prima ta pagina web, complet alba!
Elementul
Elementul este cel care urmeaza. Atata timp cand il pui intre html si body totul ar trebuii sa fie OK. "Head" nu are nici o functie vizibila, asa ca vom discuta despre acest aspect in tutorialele ulterioare. Totusi vreau sa mentionez ca poate oferi browser-ului informatii foarte utile. Se pot insera aici printre altele coduri Javascript sau CSS.
Deocamdata insa il vom lasa gol cu exceptia faptului ca vom introduce urmatorul element pe lista, dar mai intai sa aruncam o privire fara el:
Daca vei salva documentul si vei incerca sa dai un refresh la pagina intiala din browser nu vei nota nici o diferenta. Ai putina rabdare, in continuare vom studia cateva elemente vizibile.
Elementul<br />Pentru ca totul sa iasa bine trebuie sa pui tag-ul title inauntrul celui de head. Ceea ce vei scrie intre cele doua tag-uri title (<title> si ) va putea fi vizualizat ca si numele browser-ului, de obicei in partea din stanga sus. Alaturat avem si codul sursa:
Prima mea pagina web!
Salveazal acum fisierul si deschide-l in browser. Vei putea vede titlul dupa cum am mai spus in partea din stanga sus, la marea majorilate a browser-elor
Poti pune orice nume doresti, daoar tine minte ca numele descriptive sunt cele mai usor de gasit ulterior
Elementul
Elementul body este cel care defineste inceperea continutului pagini propriu-zise (titluri paragrafuri ftografii muzica si orice altceva). Dupa cum poti vedea in meniul de la stanga, vom trata pe rand toate aceste elemnte de continut.
Deocamdata tot ce trebuie sa retii este ca body incapsuleaza tot continutul paginii.
Prima mea pagina web!
Salut Gasca! Aici voi pune mai tarziu continutul!
Vizualizeaza acum toata isprava, dupa care te invit sa parcurgi urmatorul tutorial.
Un browser citeste absolut tot ceea ce ai scris in documentul HTML. De fiecare data cand gaseste un tag il va trata ca atare si il va reda, ca de exemplu un paragraf, un titlu un tabel sau orice altceva. Tagurile au trei parti dupa cum am mai spus deschiderea, continutul si inchiderea.
Dupa cum vei putea invata mai departe exista sute de taguri HTML. Absolut toate elementele care vor fi redate de un browser au nevoie de un tag sau doua.
Continut
Tag-urile se scriu cu litere mici. Acesta este standardul de scriere in XHTML si Dynamic HTML.
Alaturat sunt cateva exemple de taguri in HTML.
Actioneaza ca o capsula asupra continutului.
Ingrosat (bold)
Inclinat (italic)
Exceptii - Tag-uri care nu au nevoie de inchidere
Exista cateva tag-uri care nu indeplinesc modelul anterior aratat. Motivul este ca in realitate aceste tag-uri nu au nevoie de nuci un continut. Datorita acestui fapt se va folosi o maniera modificat de criere a acestor taguri.
Cel mai simplu exemplu este "linebreak"
Acest tag a imbinat cele doua taguri, de deschidere si de inchidere, intro forma mult mai simpla si mai eficace de folosit. Line break se foloseste pentru a spune browser-ului ca vrem sa coboram cu o linie mai jos, fara insa a incheia paragraful.
Urmand acest exemplu si alte tag-uri au fost modificate pentru o scriere mai simpla si mai rapida.
-- Image Tag --
-- Line Break Tag --
-- Input Field --
Vizualizare
-- Line Break --
Dupa cum poti vedea borowser-ul este capabil sa reproduca aceasta imagine atata timp cat furnizam locatia cu ajutorul atributului "scr". Mai multe despre aceasta in tutorialul urmator
Atributele sunt folosite pentru a personaliza tag-urile. Ce vreau sa spun? Ca la un moment dat vei vrea sa redimensionezi o imagine sau un tabel sau sa schimbi culoarea de fond. Toate acestea sunt posibile cu ajutorul atributelor.
Cele mai multe tag-uri au propriile lor atribute. Vom vorbi despre aceasta pe masura ce introducem in discutie un nou tag. Acum insa vom vorbi despre un set de atribute generice care se pot folosi cu majoritatea tag-urilor.
Atributele se introduc intre parantezele unghiulare (<>) ale tag-ului de deschidere.
Atributele "class" si "id" in HTML
Atributele class si id sunt foarte asemanatoare. Ele nu au un rol direct in formatarea elementelor si mai degraba sunt utile in spatele scenei cu ajutorul CSS. Vom vorbi despre rolul acestora la momentul potrivit, atunci cand vom studia sintaxa si funcia lor in CSS.
Idea este ca atunci cand vrei sa stabilesti o clasa de tag-uri pentru a fi folosite mai tarziu ca ajutorul CSS, sa poti diferentia intre doua tag-uri identice dar cu atribute diferite. Priveste exempul alaturat.
Vizualizare
Paragraph type 1, inclinat
Paragraph type 2, ingrosat
HTML - Atributul "name"
"name" este ceva mai diferit fata de "id" si "class". Punand un nume unui element, acesta devine o variabila de script pentru Javascript, ASP si PHP. Cel mai des este intalnit in formulare si alte campuri de text interactive.
Vizualizare
Acest atribut (name) nu are nici un afect asupra redarii casutei de text, cu toate ca in background detine un rol foarte important.
HTML - Atributul "title"
Atributul title este folosit foarte putin fata de cat ar trebuii, el adauga un titlu (un pop-up) oricarui continut al unui element. Acest atribut nu ar trebui uitat. Poti denumi aproape orice si oricum doresti. Vizualizarea titlului apare atunci cand ne oprim co mausul cateva secunde deasupra contnutului.
Vizualizare
Un Titlu Oarecare
Treci cu mausul peste titlul de mai sus ca sa vezi magia atributului "title". Acest atribut va oferi site-ului tau multa interactiune cu cei ce te vor vizita. Nu il trece cu vederea.
HTML - Atributul "align"
Daca vrei sa aliniezi in mod diferit anumite elemente ale pagini tale, atunci ai la dispozitie atributul align. Poti alinia la stanga (left), dreapta (right) sau la mijlocul (center) pagini aproape orice element. Prin default elementele se aliniaza la stanga, esceptand atuci cand se specifica o alta aliniere.
Vizualizare
Titlu centrat
Alete exemple:
Vizualizare
Titlu aliniat la stanga
Titlu centrat
Titlu aliniat la dreapta
Valori standard pentru atribute
Multora dintere tag-uri li se atribuie, valori standard. Asta inseamna ca daca nu specifici un alt atribut, browser-ul o va face pentru tine. De exemplu un paragraf se va alinia singur la stanga, exceptand atunci cand specifici altfel; la fel si elementele unui tabel. Pe masura ce vei exersa vei intelege mai multe despre valorile default ale unor tag-uri
Atribute generice
Retine ca atributele sunt folosite pentru a personaliza elementele unei pagini web. Am alturat aici cateva dintre atributele cele mai comune, folosite in HTML:
Attribute Options Function
align right, left, center Aliniere orizontala
valign top, middle, bottom Aliniere verticala
bgcolor numeric, hexidecimal, sau valoare RGB Un background in spatele elementului
background URL O imagine in spatele elementului
id Definit de user Numeste un element care se va folosi cu CSS
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este
Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este
Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este
Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este
Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este
P.S Este un tutorial mai lung dar foarte complex !!!
Crearea documentelor in HTML nu este dificila. Pentru inceput nu vei avea nevoie decat de notepad si de putina ambitie. Daca esti nou in domeniul programari si nu ai parcurs inca, Ghidul incepatorului, te sfatuiesc sa petreci cateva minute citindul.
Pagini Web
Paginile web au multe intrebuintari. Aici sunt explicate cateva dintre argumente:
- Cea mai simpla cale de a raspandii informatii pe internet
- O alta forma de a-ti amplifica afacerea
- Poti face cunoscut lumi ca ai ceva de spus intr-o pagina personala
Poate forum, un blog, o pagina de prezentare, sau orice altceva ce iti trece prin cap.
Cuvinte de retinut
- Tag - folosit pentru a specifica regiuni ale documentului HTML, pe care le va interpreta ulterior browser-ul. Tag-urile vor avea aceasta infatisare:
- Element - este un tag complet, avand un
- Attribute - este folosit pentru a modifica valoarea unui element in HTML. De obicei un element are mai multe atribute.
Deocamdata trebuie doar sa retii ca un tag este o comanda pe care browser-ul o interpreteaza, ca un element este un tag complet iar un atribut personalizeaza si modifica un element in HTML.
Urmatoarele tutoriale
Pentru tutorialele care urmeaza poti folosii meniul din stanga pentru a parcurge ceea ce te intereseaza, sau poti citi din scoarta in scoarta apasand butonul "Next | >", situat in partea de jos a paginii. Nu te retine in a lasa comentarii acolo unde ceva iti este neclar sau pur si simplu ai de facut o completare articolului.
Elementele HTML au multe ranguri. Tot ceea ce vezi, paragrafurile, banner-ul de deasupra, link-urile de navigare la dreapta si la stanga paginii, sunt toate elemente ale acestei pagini.
Un element are trei parti: un tag de deschidere, continutul elementului si tag-ul de inchidere.
-
- tag-ul pentru deschiderea unui paragraf.
- Continutul elementului - paragraful propriu-zis.
-
***Nota:
Toate paginile web vor avea cel putin elementele de baza: html, head, title si body.
element...
Un document HTML intotdeauna va incepe si va termina cu un tag si respectiv . Aceasta este spructura standard a unui HTML.
Deschide te rog Notepad si copiaza urmatorul cod:
Salveaza documentul di meniul File / Save As. Selecteaza All Files si denumeste fisierul nou creeat, "index.html". Apasa Save. Deschide acum fisierul intr-un browser pentru a avea posibilitatea sa dam refresh (F5).
Daca ai facut totul bine vei putea vedea prima ta pagina web, complet alba!
Elementul
Elementul este cel care urmeaza. Atata timp cand il pui intre html si body totul ar trebuii sa fie OK. "Head" nu are nici o functie vizibila, asa ca vom discuta despre acest aspect in tutorialele ulterioare. Totusi vreau sa mentionez ca poate oferi browser-ului informatii foarte utile. Se pot insera aici printre altele coduri Javascript sau CSS.
Deocamdata insa il vom lasa gol cu exceptia faptului ca vom introduce urmatorul element pe lista, dar mai intai sa aruncam o privire fara el:
Daca vei salva documentul si vei incerca sa dai un refresh la pagina intiala din browser nu vei nota nici o diferenta. Ai putina rabdare, in continuare vom studia cateva elemente vizibile.
Elementul
Salveazal acum fisierul si deschide-l in browser. Vei putea vede titlul dupa cum am mai spus in partea din stanga sus, la marea majorilate a browser-elor
Poti pune orice nume doresti, daoar tine minte ca numele descriptive sunt cele mai usor de gasit ulterior
Elementul
Elementul body este cel care defineste inceperea continutului pagini propriu-zise (titluri paragrafuri ftografii muzica si orice altceva). Dupa cum poti vedea in meniul de la stanga, vom trata pe rand toate aceste elemnte de continut.
Deocamdata tot ce trebuie sa retii este ca body incapsuleaza tot continutul paginii.
Salut Gasca! Aici voi pune mai tarziu continutul!
Vizualizeaza acum toata isprava, dupa care te invit sa parcurgi urmatorul tutorial.
Un browser citeste absolut tot ceea ce ai scris in documentul HTML. De fiecare data cand gaseste un tag il va trata ca atare si il va reda, ca de exemplu un paragraf, un titlu un tabel sau orice altceva. Tagurile au trei parti dupa cum am mai spus deschiderea, continutul si inchiderea.
Dupa cum vei putea invata mai departe exista sute de taguri HTML. Absolut toate elementele care vor fi redate de un browser au nevoie de un tag sau doua.
Exemplu un paragraf
Tag-urile se scriu cu litere mici. Acesta este standardul de scriere in XHTML si Dynamic HTML.
Alaturat sunt cateva exemple de taguri in HTML.
Actioneaza ca o capsula asupra continutului.
Paragraf
Titlu (heading)
Ingrosat (bold)
Inclinat (italic)
Exceptii - Tag-uri care nu au nevoie de inchidere
Exista cateva tag-uri care nu indeplinesc modelul anterior aratat. Motivul este ca in realitate aceste tag-uri nu au nevoie de nuci un continut. Datorita acestui fapt se va folosi o maniera modificat de criere a acestor taguri.
Cel mai simplu exemplu este "linebreak"
Acest tag a imbinat cele doua taguri, de deschidere si de inchidere, intro forma mult mai simpla si mai eficace de folosit. Line break se foloseste pentru a spune browser-ului ca vrem sa coboram cu o linie mai jos, fara insa a incheia paragraful.
Urmand acest exemplu si alte tag-uri au fost modificate pentru o scriere mai simpla si mai rapida.
-- Image Tag ---- Line Break Tag --
-- Input Field --
Vizualizare
-- Line Break --
Dupa cum poti vedea borowser-ul este capabil sa reproduca aceasta imagine atata timp cat furnizam locatia cu ajutorul atributului "scr". Mai multe despre aceasta in tutorialul urmator
Atributele sunt folosite pentru a personaliza tag-urile. Ce vreau sa spun? Ca la un moment dat vei vrea sa redimensionezi o imagine sau un tabel sau sa schimbi culoarea de fond. Toate acestea sunt posibile cu ajutorul atributelor.
Cele mai multe tag-uri au propriile lor atribute. Vom vorbi despre aceasta pe masura ce introducem in discutie un nou tag. Acum insa vom vorbi despre un set de atribute generice care se pot folosi cu majoritatea tag-urilor.
Atributele se introduc intre parantezele unghiulare (<>) ale tag-ului de deschidere.
Atributele "class" si "id" in HTML
Atributele class si id sunt foarte asemanatoare. Ele nu au un rol direct in formatarea elementelor si mai degraba sunt utile in spatele scenei cu ajutorul CSS. Vom vorbi despre rolul acestora la momentul potrivit, atunci cand vom studia sintaxa si funcia lor in CSS.
Idea este ca atunci cand vrei sa stabilesti o clasa de tag-uri pentru a fi folosite mai tarziu ca ajutorul CSS, sa poti diferentia intre doua tag-uri identice dar cu atribute diferite. Priveste exempul alaturat.
Paragraph type 1, inclinat
Paragraph type 2, ingrosat
Vizualizare
Paragraph type 1, inclinat
Paragraph type 2, ingrosat
HTML - Atributul "name"
"name" este ceva mai diferit fata de "id" si "class". Punand un nume unui element, acesta devine o variabila de script pentru Javascript, ASP si PHP. Cel mai des este intalnit in formulare si alte campuri de text interactive.
Vizualizare
Acest atribut (name) nu are nici un afect asupra redarii casutei de text, cu toate ca in background detine un rol foarte important.
HTML - Atributul "title"
Atributul title este folosit foarte putin fata de cat ar trebuii, el adauga un titlu (un pop-up) oricarui continut al unui element. Acest atribut nu ar trebui uitat. Poti denumi aproape orice si oricum doresti. Vizualizarea titlului apare atunci cand ne oprim co mausul cateva secunde deasupra contnutului.
Un Titlu Oarecare
Vizualizare
Un Titlu Oarecare
Treci cu mausul peste titlul de mai sus ca sa vezi magia atributului "title". Acest atribut va oferi site-ului tau multa interactiune cu cei ce te vor vizita. Nu il trece cu vederea.
HTML - Atributul "align"
Daca vrei sa aliniezi in mod diferit anumite elemente ale pagini tale, atunci ai la dispozitie atributul align. Poti alinia la stanga (left), dreapta (right) sau la mijlocul (center) pagini aproape orice element. Prin default elementele se aliniaza la stanga, esceptand atuci cand se specifica o alta aliniere.
Titlu centrat
Vizualizare
Titlu centrat
Alete exemple:
Titlu aliniat la stanga
Titlu centrat
Titlu aliniat la dreapta
Vizualizare
Titlu aliniat la stanga
Titlu centrat
Titlu aliniat la dreapta
Valori standard pentru atribute
Multora dintere tag-uri li se atribuie, valori standard. Asta inseamna ca daca nu specifici un alt atribut, browser-ul o va face pentru tine. De exemplu un paragraf se va alinia singur la stanga, exceptand atunci cand specifici altfel; la fel si elementele unui tabel. Pe masura ce vei exersa vei intelege mai multe despre valorile default ale unor tag-uri
Atribute generice
Retine ca atributele sunt folosite pentru a personaliza elementele unei pagini web. Am alturat aici cateva dintre atributele cele mai comune, folosite in HTML:
Attribute Options Function
align right, left, center Aliniere orizontala
valign top, middle, bottom Aliniere verticala
bgcolor numeric, hexidecimal, sau valoare RGB Un background in spatele elementului
background URL O imagine in spatele elementului
id Definit de user Numeste un element care se va folosi cu CSS
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este
. Acesta va plasa o linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.
Paragraful este un elemet de baza in...
Acesta va plasa o linie goala deasupra si...
Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este
.
Acesta va plasa o linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.
HTML - Paragraf incadrat, justify
Paragrafele se pot formata aproximatix la fel de simplu ca si intr-un editor de texte. Incadrarea din exemplul alaturat s-a facut cu ajutorul atributului justify.
Paragraful este un elemet de baza in...
Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este
. Acesta va plasa o linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.
HTML - Paragraf centrat, center
Paragraful este un elemet de baza in...
Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este
. Acesta va plasa o linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.
In acest exemplu fiecare linie a paragrafului a fost centrata la mijlocul randului de redare.
HTML - Paragraf aliniat la dreapta, right
Paragraful este un elemet de baza in...
Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este
. Acesta va plasa o linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.
Toate randurile paragrafului au fost asezate, in acest exemplu, la dreapta.
class Definit de user Clasifica un element care se va folosi cu CSS
width Valoare numerica Specifica latimea unui tabel, imagine, sau casute de tabel.
height Valoare numerica Specifica inaltimea unui tabel, imagine, sau casute de tabel.
title Definit de user "Pop-up". Afiseaza un titlu pentru un element stabilit.
Voi veni cu un edit pentru mai multe informatii!
KinkyNesquick- Moderators
- Mesaje : 46
Data de inscriere : 19/02/2011
Varsta : 30
Localizare : Romania/Ploiesti
Anne- Helpers
- Mesaje : 45
Data de inscriere : 29/01/2011
Varsta : 29
Localizare : Bucuresti, Sectorul 2
Subiecte similare» Ghidul incepatorului in HTLM
» [GHID]Complet Despre CaluTzz
» Tutorial ClanMod
» Tutorial AmxMod
» Tutorial Efect de Oglindire!
» [GHID]Complet Despre CaluTzz
» Tutorial ClanMod
» Tutorial AmxMod
» Tutorial Efect de Oglindire!
Pagina 1 din 1
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum|
|
|