Download link: primapagina.html
Buna ziua si bine v-am regasit. Astazi vom incepe o noua serie intitulata “Invata in 10 minute” – videoclipurile ar trebuii sa dureze in jur de 10 minute, asadar, fara alte introduceri haideti sa incepem cu primul episod.
Ce este HTML?
Limbajul HTML nu merita o introducere aparte, acesta este folosit peste tot pe internet pentru structurarea continutului. HTML nu este un limbaj de programare – este un limbaj de marcare – defineste structura paginii web si ii spune browserului ce parti din pagina web reprezinta heading-ul, linkurile, si asa mai departe.
CSS este limbajul ce adauga stil paginii tale web – in el mentionezi culorile, aranjezi elementele in pagina si in general tot ce tine de estetica site-ului este cuprins in fisiere CSS.
Pentru pagini web mai avansate aveti nevoie si de Javascript – acesta este un limbaj de programare ce adauga functionalitati dinamice. Nu are nimic de-aface nu Java – Java nu este un limbaj ce trebuie sa il stiti pentru a programa un site web obisnuit. Limbajul Javascript poate fi folosit intr-un milion de moduri, dar pentru a va da un exemplu clar – puteti sa il folositi ca sa miscati diferite elemente din cadrul unei pagini. Este un limbaj client-side – adica nu aveti nevoie de un server pentru a-l compila, brower-ul web al clientului se va ocupa de tot.
PHP este un limbaj popular server-side – dar nu vi-l recomand sa il invatati, pana nu stapaniti destul de bine HTML-ul.
Pentru a scrie cod HTML nu aveti nevoie de editoare complicate, puteti sa folositi Notepad, sau orice alt editor text. La sfarsitul acestui tutorial ar trebuii sa aveti suficiente cunostiinte pentru a-l intelege.
Tagurile in HTML
Incepem cu un document gol – si vom scrie primul nostru tag. Tag-urile in HTML definesc diferite portiuni din document – portiuni ce urmeaza a fi interpretate de browser-ul web. Primul tag de care aveti nevoie in orice pagina web este tag-ul <html>. Majoritatea tag-urilor in HTML sunt urmate de un tag de inchidere, asadar vom avea nevoie si de </html>.
Tot continutul paginii web va venii scris intre aceste tag-uri principale. Voi folosii TAB pentru a identa codul si a-l face mai usor de citit si inteles. In interiorul acestui tag avem doua sectiuni:
- Sectiunea <head></head>
- Sectiunea <body></body>
Aceasta este structura de baza a oricarui document. Acum vom discuta despre cateva tag-uri vitale in ce trebuie stiute pentru a incepe sa construiti pagini web.
De asemenea, inainte de a incepe o pagina web, trebuie sa mentionam brower-ului ce versiune de HTML folosim. Este necesar sa mentionam la inceput <!DOCTYPE html> – deoarece in versiuni anterioare de HTML unele taguri nu au fost introduse.
Comentariile in HTML
Comentariile in HTML se scriu destul de simplu.
<!– Acesta este un comentariu –>
Este echivalentul /* Acesta este un comentariu */ in C++. Din pacate in HTML nu putem comenta o singura linie, asadar este nevoie tot timpul de inchiderea comentariului dupa ce l-am inceput.
Tagul <head>
In aceasta sectiune se regasesc informatiile generale despre pagina web, in timp ce continutul efectiv al paginii se gaseste in tagul <body>. Inainte de a salva fisierul, nu uitati ca acesta are nevoie de extensia .html la final.
<html>
<head>
<title>Tutoriale Pe NET cei mai tari</title>
</head>
<body>
</body>
</html>
Primul tag ce il vom discuta este tagul <title> – si vom exersa pe exemplul clasic in programare – afisarea “Hello world”. Acest tag seteaza titlul paginii web – titlu ce poate fi regasit sus de tot in tab-ul efectiv al browserului web. Dupa ce salvam pagina web putem vedea ca aceasta este goala, insa avem setat titlul ce l-am scris intre tagurile mentionate mai sus.
Tagul <body>
Acum bine-nteles dorim ca pagina noastra sa aiba contitnut – haideti sa ii dam un titlu mare. Pentru aceasta vom folosi tagul <h1>. Acest tag vine de la “heading” si este cel mai mare tag pe care il putem folosii intr-o pagina web.
Alte tag-uri similare mai sunt <h2> <h3> si tot asa pana la <h6>. Fiecare tag face textul din ce in ce mai mic, <h6> fiind ultima optiune posibila. Haideti acum sa mai scriem un heading jos ce va descrie aceasta pagina.
<html>
<head>
<title>Tutoriale Pe NET cei mai tari</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Invatam in 10 minute.</h2>
</body>
</html>
Tagul <p>
Acum bine-nteles dorim sa adaugam si ceva text, asa ca vom folosii tagul <p> – ce vine de la paragraph. Daca salvam pagina putem observa textul ce tocmai l-am introdus.
<html>
<head>
<title>Tutoriale Pe NET cei mai tari</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Invatam in 10 minute.</h2>
<p>Un scurt paragraf ce prezinta pagina noastra web, nimic complicat.</p>
</body>
</html>
Deoarece folosim tagurile corespunzator, browserul nostru pune singur spatii intre cele 3 sectiuni create de noi pana acum. Daca mai adaugam un paragraf, de exemplu, browserul va separa cele doua taguri <p> automat.
Tagul <img>
Orice pagina web nu este completa daca nu adaugam si imagini in aceasta, asadar pentru a introduce imagini, vom avea nevoie de tagul <img>. Acest tag este unul mai special si nu necesita inchiderea dupa ce a fost deschis.
<html>
<head>
<title>Tutoriale Pe NET cei mai tari</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Invatam in 10 minute.</h2>
<p>Un scurt paragraf ce prezinta pagina noastra web, nimic complicat.</p>
<p>Al doilea paragraf.</p>
<img src = "arrow.png">
</body>
</html>
Am descarcat de pe internet o sageata si am denumit fisierul “arrow.png”. Pentru a insera imaginea in pagina, trebuie sa specificam exact unde se afla fisierul nostru. Pentru a-i spune browserului web cum se numeste si unde se afla fisierul vom scrie SRC (de la source) imediat dupa “img”. Acest src trebuie urmat de un egal, iar imediat intre ghilimele vine locatia imaginii pur si simplu.
Foarte important atunci cand lucrati cu paginile web este sa mentionati exact unde se afla fisierul folosind calea relativa. De exemplu daca fisierul vostru se afla in folderul “invata10min”, calea relativa va fi pur si simplu “arrow.png”.
O greseala tipica incepatorilor este faptul ca acestia folosesc calea absoluta – adica “C:/Users/Mihai/invata10min/arrow.png”. Folosind aceasta metoda, site-ul vostru nu va mai functiona daca il mutati pe alt dispozitiv.
Daca imaginea voastra se afla intr-un folder numit “images”, atunci calea relativa ar fi fost “images/arrow.png”.
De asemenea tot in interiorul tagului <img> putem specifica lungimea si latimea imaginii noastre folosind proprietatile “width” si “height”. Puteti sa scrieti un numar, sau un procent intre ghilimele. Daca nu setati aceste proprietati, atunci pagina web va insera pur si simplu imaginea, asa cum aceasta este gasit in folder. Deoarece am specificat toate proprietatiile unei imagini, nu mai este necesar sa inchidem tagul, deoarece nu putem scrie efectiv nimic intre ele.
Inca un lucru important ce trebuie mentionat despre tagul <img> este atributul “alt”. Acest atribut descrie imaginea si afiseaza acel text in cazul in care imaginea nu a putut fi incarcata. Daca nu includeti acest atribut – tehnic nu aveti un tag <img> definit corect.
Tagul <br>
Sa spunem de exemplu ca avem doua propozitii ce vrem sa apara una sub alta. Am putea folosii doua taguri <p> insa textul nostru ar fi separat printr-un spatiu, iar eu nu vreau asta momentan. Daca dorim ca propozitiile noastre sa apara fix una sub cealalta, trebuie sa folosim tagul <br> (break).
<html>
<head>
<title>Tutoriale Pe NET cei mai tari</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Invatam in 10 minute.</h2>
<p>Un scurt paragraf ce prezinta pagina noastra web, nimic complicat. <br> Al doilea paragraf.</p>
<img src = "arrow.png" width="100px" height="50px">
</body>
</html>
Nu trebuie specificat nimic in interiorul acestui tag, acesta adauga pur si simplu textul pe al doilea rand – functioneaza la fel ca si tagul <img> – nu este necesar sa il inchidem deoarece nu introducem nici o informatie intre ele.
Tagul <hr>
Acesta este inca un tag ce nu necesita o inchidere – si creeaza pur si simplu o linie orizontal (horizontal rule). Putem folosii aceasta linie pentru a separa diferite sectiuni din pagina noastra web, eu am folosit-o pentru a separa scrisul de imaginea efectiva introdusa mai sus.
<html>
<head>
<title>Tutoriale Pe NET cei mai tari</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Invatam in 10 minute.</h2>
<p>Un scurt paragraf ce prezinta pagina noastra web, nimic complicat. <br> Al doilea paragraf.</p>
<hr>
<img src = "arrow.png" width="100px" height="50px">
</body>
</html>
Tagul <a>
Acest tag este folosit pentru a creea hyperlink-uri – adica acele bucati dintr-o pagina web ce iti permit sa deschizi alte pagini web. Exact ca tagul pentru imagini, acesta are nevoie de un atribut “href” ce specifica exact ce pagina web doresti sa deschizi.
<html>
<head>
<title>Tutoriale Pe NET cei mai tari</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Invatam in 10 minute.</h2>
<p>Un scurt paragraf ce prezinta pagina noastra web, nimic complicat. <br> Al doilea paragraf.</p>
<hr>
<img src = "arrow.png" width="100px" height="50px">
<a href="https://tutoriale-pe.net">Invata programare!</a>
</body>
</html>
Tagul <ul> si <ol>
Urmatorele taguri de pe lista noastra sunt <ul> si <ol> – le putem folosii pentru a creea o lista cu bulinute in HTML. <ul> vine de la “undered list in timp ce <ol> vine de la “ordered list”. Aceste taguri defineste o lista in interiorul careia putem introduce elemente. Elementele sunt introduse folosind tagul <li> (de la “list”).
<html>
<head>
<title>Tutoriale Pe NET cei mai tari</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Invatam in 10 minute.</h2>
<p>Un scurt paragraf ce prezinta pagina noastra web, nimic complicat. <br> Al doilea paragraf.</p>
<hr>
<img src = "arrow.png" width="100px" height="50px">
<a href="https://tutoriale-pe.net">Invata programare!</a>
<ul>
<li>Tutoriale C++</li>
<li>Tutoriale C#</li>
</ul>
<ol>
<li>Tutoriale PHP</li>
<li>Tutoriale HTML</li>
</ol>
</body>
</html>
Tagul <div>
Acest tag defineste o sectiune din cadrul unei pagini HTML – deseori este folosit ca si un container pentru a adauga culoare – folosind CSS – sau pentru a indeplinii anumite task-uri – folosind JavaScript.
Sper ca v-a placut primul nostru episod, stati pe faza mai urmeaza si altele in curand!
