Cum să îți creezi primul site web cu HTML și CSS

Află cum să construiești un site pas cu pas folosind HTML și CSS.

238
vizionări
Cum să îți creezi primul site web cu HTML și CSS
5 (100%) 8 voturi

În acest articol o să încerc să îți explic cât mai clar, pas cu pas, cu poți să construiești un site web folosind limbajul HTML (HyperText Markup Language) pentru a defini conținutul acestuia și limbajul CSS (Cascading Style Sheets) pentru a atribui elementelor paginii un anumit aspect.

În final, vei obține o pagină web precum aceasta:

Vezi aici site-ul pe care îl vei crea.

Pentru început, deschide desktopul PC-ului și creează un folder nou. Pune-i numele site. Deschide folderul și creează un fișier nou cu extensia .html. Pentru a face asta, apasă click dreapta oriunde în folder, apoi dă click pe New (Nou), apoi dă click pe text document. Dă-i fișierului ce nume vrei, șterge extensia .txt și înlocuiește-o cu .html. Acum putem începe programarea propriu-siză.

Dă click dreapta pe fișierul .html pe care l-ai creat, apoi apasă pe Open with (Deschide cu) și alege Notepad sau orice alt program cu care poți edita fișiere text.

HTML

Întâi va trebui să specificăm limbajul cu care a fost creat site-ul. Asta va face browserele să înțeleagă conținutul paginii și să o afișeze corespunzător. Pentru a face asta, scrie pe primul rând din fișier următorul cod:

Acum, vom împărți site-ul în 2 secțiuni: partea superioară, numită și head și partea inferioară, numită și body. În head vom oferi informații despre site, precum titlul și descrierea acestuia, iar în body vom scrie practic conținutul site-ului. Adaugă următorul cod în fișierul tău:

Tot ce vom scrie între <head> și </head> va reprezenta partea superioară a site-ului, despre care v-am vorbit mai devreme. La fel, partea inferioară a site-ului, în care vom adăugat conținutul vizibil, va fi codificată între <body> și </body>.

Pentru început, vom da un titlu site-ului, care va fi afișat în tabul borwserului. Pentru a face asta, adaugă următorul cod în secțiunea head a site-ului, între <head> și </head>:

În continuare vei adăga fotografia cu tine. Salvează-ți în folderul în care se află și fișierul .html o poză cu tine, apoi dă-i numele image.jpg. Întoarce-te în fișier și adaugă următorul cod în secțiunea body:

Aceasta este modalitatea prin care poți afișa o imagine pe o pagină web. Se folosește tagul <img>, la care se adaugă atributa src în care se precizează locul (link-ul) în care se poate găsi fotografia. Deoarece image.jpg se află în același folder cu fișierul .html, trebuie doar să specificăm doar numele acesteia.

De altfel, am dat imaginii atributa class pe care am definit-o ca poza. Asta ne va ajuta mai târziu să oferim un anumit aspect pozei.

În continuare, vom scrie numele tău pe pagină, folosind codul de mai jos:

Am folosit un tag <div> în care am introdus numele ce va fi afișat pe site. După ce am scris numele, am închis tagul folosit </div>. După cum probabil ai observat, am dat tagului atributa class definită ca nume, pentru a oferi ulterior un anumit aspect.

Acum vom adăuga o descriere cu codul următor:

Am deschis mai întâi un tag <div> căruia i-am specificat clasa ca fiind descrierea. Apoi am adăugat două paragrafe folosind tagul <p>. În tagurile pentru paragraf am adăugat câte o propoziție. De altfel, am folosit tagurile <b> pentru îngroșarea (bolduirea) cuvântului Salut și <u> pentru sublinierea (underline) cuvântului exemplu. După ce am terminat specificarea descrierii ce va apărea pe site, am închis tagul <div> prin </div>.

După toate acestea, vom adăuga un buton care, atunci când va fi apăsat ne va redirecționa la un anumit link. Codul necesar este următorul:

La început, am adăugat un tag <a> căruia i-am setat atributa href ca fiind link-ul site-ului meu. Practic, dacă utilizatorul site-ului va da click pe oricare element dintre tagul <a> și închierea acestuia, </a>, el va fi redirecționat pe link-ul precizat la atributa href.

După cum se vede, am adăugat un buton folosind tagul <button> în conținutul tagului <a>. Deci, dacă cineva va da click pe buton, i se va deschide link-ul specificat la href-ul tagului <a>. Butonului i-am specificat clasa buton, apoi am adăugat textul ce va fi afișat pe el. În sfârșit, am încheiat elementul buton cu </button>, apoi am încheiat și conținutul cu link cu </a>.

Acum tot ce ne-a mai rămas de făcut este să închidem conținutul body-ului folosind codul următor:

Pentru a-i spune browserului că conținutul html al paginii se sfârșește, trebuie adăugat următorul cod:

În cele din urmă, codul tău html ar trebui să arate așa:

Salvează fișierul, apoi dă dublu click pentru a-l deschide cu un broswer. Vei vedea că site-ul are tot conținutul specificat de tine, însă îi lipsește designul.

CSS

În continuare, creează un fișier nou în același folder în care se află și pagina .html cu extensia .css. Dă-i numele style.css. În acest fișier vei oferi toate detaliile despre designul site-ului.

Întoarce-te în fișierul .html și precizează în secțiunea head, de preferat sub tagul <title> faptul că informațiile despre aspectul site-ului se află în fișierul style.css. Pentru a face asta, scrie următorul cod:

Salvează pagina și întoarce-te în fișierul style.css. Adaugă următorul cod:

Cu acest cod îi vei spune browserului cum să afișeze site-ul. Folosind // am adăugat cât un comentariu pe fiecare rând al codului pentru a-ți explica ce reprezintă fiecare parte.

Salează și fișierul style.css, apoi deschide din nou site-ul făcând dublu click pe fișerul .html. Felicitări! Tocami ți-ai făcut primul site!

P.S.: Dacă nu ai reușit să faci ceva cum trebuie, ai vreo nelămurire sau sugestie, nu ezita să lași un comentariu 🙂

2 COMENTARII

LĂSAȚI UN MESAJ

Please enter your comment!
Please enter your name here