Jump to content
VTG

Tutorial HTML

Recommended Posts

Ce este HTML?

 

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

 

Tag-urile limbajului HTML 

 

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>

 

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://pubzone.ro">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://pubzone.ro">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.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
|

Theme Made by Zayon & Cyber Designs

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.