Tutorial HTML - Elemente
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.
- <p> - tag-ul pentru deschiderea unui paragraf.
- Continutul elementului - paragraful propriu-zis.
- </p> - tag-ul de inchidere.
***Nota:
Toate paginile web vor avea cel putin elementele de baza: html, head, title si body.
<html>element...</html>
Un document HTML intotdeauna va incepe si va termina cu un tag <html> si respectiv </html>. Aceasta este spructura standard a unui HTML.
Deschide te rog Notepad si copiaza urmatorul cod:
|
<html> |
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 <head>
Elementul <head> 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 <head> 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:
|
<html> |
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 <title>
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 </title>) va putea fi vizualizat ca si numele browser-ului, de obicei in partea din stanga sus. Alaturat avem si codul sursa:
|
<html> <title> Prima mea pagina web!</title> </head> |
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 <body>
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.
|
<html> <body> </html> |
Vizualizeaza acum toata isprava, dupa care te invit sa parcurgi urmatorul tutorial.
Comentarii
Si Notepad si Notepad++ salveaza fisierele cu extensia txt(implicit)pentru ca browserul sa afiseze folderul ca pagina web trebuie redenumit cu extensia html altfel il afiseaza tot sub forma de cod
Am specificat cum se salveaza documentele cu extensia .html in primul capitol al tutorialului... oricum nu strica sa reamintim si pe aici putin.
Am 15 ani, si incerc sa invat sa folosesc html k sa imi fie mai usor la liceu. NU e foarte simplu recunosc, dar din ce am citit eu aici este un lucru pe care nu il inteleg: care e diferenta dintre <title> si <h2>
<title> este un titlu mai mult pentru motorul de cautare, este numele pagini sau numele ferestrei.In timp ce <h2> este un titlu in pagina
deci iti multumesc !!! foarte utila pagina ta ! eu incep totul de la 0 si vreau sa-mi dau silinta, chiar mi-am facut un caiet in care sa-mi notez ce e mai important ca sa tin minte mai repede. Deocamdata nu mi se pare greu, le iau cu calm, sper sa reusesc
fain tutorialul...eu am ceva cunostinte...nu foarte multe ...am construit ceva situri ...doar ca nu le-am facut direct in html...ci cu ajutorul altui program...am inceput din joaca dar a devenit interesant ...sunt buna la design dar mai greu cu partea tehnica la mine:P...invatam ..sper
am parcurs o data cam toate elementele HTML (acum vreun an) si puteam sa fac cateva chestii... pentru asta am cautat de am zapacit si am facut rost de cateva tutoriale, dar nici unul atat de bine structurat cum imi pare asta... unde mai pui ca ai acces la el de oriunde :D
bafta ca nu e chiar greu... la CSS mi-am cam prins urechile... :))
Este f folositor si inteleg f bine tutorialele deocamdata. sper sa ma descurc si mai departe. in photoshop mi-a fost mai greu si am renuntat. aici sper sa resusesc sa fac treaba buna. FELICITARI PT SITE!
Pentru a scrie/afisa un text(paragraf) in pagina nu e nevoie neaparat de tag'ul <p>, dupa cum am observat.
Care e diferenta intre afisare text cu ajutorul tag'ului <p> si textul scris direct in <body>???
Sper sa fiu inteles.
Diferenta este ca scriind textul in tagul de paragraf (<p>) specifici browserului ca urmeaza un paragraf in loc sa il lasi sa ghiceasca. Pe de alta parte cu ajutorul css poti stabilii valori standard pe care tagul <p> le poate avea.
Ex: p { text-align: center; size:10px; color:#333 }
Ar mai fi si alte cateva argumente dar cre ca sunt de ajuns.
Mersi. Foarte prompt raspunzi tuturor. Bravo!
Eram destul de convins ca inaintand in tutorial imi voi da seama care e diferenta, dar am vrut sa intreb pe cineva care stie mai bine.
Intr'un fel e si logic...daca se puteau face toate lucrurile, care se fac cu tagul <p> fara el, direct in <body>'ul paginii nu s'ar mai fi inventat tagul <p>.
Sal. Mersi pt informatiile utile. Eu nu reusesc sa deschid o pagina simpla cu ajutorul <html>
</html>. E ceva ce nu fac bine si nu reusesc
@Alexia
ai salvat fisierul tau ca si "index.html" sau "ceva.html" daca da incearca imi dai mai multe detalii pana atunci nu ma pot pronunta asupra problemei
Sal. Dupa lungi incercari am reusit.Ms enorm. Acuma urmeaza sa exersez cu html-ul.
De fapt, stii ce, iti fac eu un tutorial, la schimb cum ar veni, tagurile de baza... daca vrei...
foarte bun tutorialul dar constat ca are probleme grave de gramatica gen "Elementele de HTML au multe ranguri." sau stiu eu ce alte defecte
toata stima pentru material
Trimite un comentariu!
