Jump to content
Winter MEGA update e aici. Click pentru detalii. ×
Recrutăm moderatori, designeri audio şi video. Click aici
Recrutăm designeri grafici. Click aici pentru detalii
Vino și tu pe serverul nostru de rage multiplayer: v.b-zone.ro!

[HTML] HTML pentru începători în detaliu: partea I!

silvohex

By silvohex,
in Web Development

 Share

Recommended Posts

silvohex Newbie

silvohex

Posted
Posted (edited)

Am observat că mai sunt tutoriale de HTML pentru începători aici, dar niciunul nu părea să ofere prea multe detalii sau explicații concrete; așa că voi încerca eu să pășesc în pământul nestrăbătut.

 

Acest tutorial este posibil incomplet. Dacă observați vreo greșeală, vă rog să mă ajutați să o corectez - tot ce am învățat eu a fost, de asemenea, pe Internet și în limba engleză. Unele semnificații pot fi pierdute în traducere.

 

P.S: dacă vedeți undeva „<.head>”, înlocuiți cu „<head>". Pentru un motiv necunoscut cuvântul „<head>” este blocat pentru mine.

@moderatori: de ce se întâmplă asta? :(

 

Capitolul I, Partea I - Introducere

Secțiunea 1 - Descriere generală

 

HTML înseamnă „HyperText Markup Language”. Hypertext înseamnă „text cu linkuri” - de fiecare dată când dai clic pe un cuvânt care te duce pe o nouă pagină web, ai dat clic pe hypertext!

Un limbaj de marcare („markup language”) este un limbaj folosit pentru a face textul să facă mai mult decât să doar stea pe o pagină: acest limbaj poate „transforma” textul în imagini, linkuri, tabele, liste și multe altele. Scopul său, în principiu, este reprezentat de către prezentarea informațiilor, decât descrierea semanticii documentului.

 

Ce dă „frumusețea” paginilor web? Ei bine, asta-i CSS - „Cascading Style Sheets”. Gândește-te la CSS (vezi că nu-i Counter-Strike: Source, rog să nu le confunzi) ca și cum ar fi pielea și machiajul ce acoperă oasele limbajului HTML. Vom începe cu HTML, dar ulterior voi da și exemple de folosire a CSS împreună cu acest limbaj de marcare.

 

Acum, să trecem la treabă! Adică, la o treabă.. relativ simplă. Primul lucru care trebuie să-l facem este să creăm „scheletul” paginii.

  1. Întotdeauna pune „<!DOCTYPE html>” pe prima linie. Asta-i zice browserului ce limbaj citește (în acest caz, HTML).
     
  2. Întotdeauna pune „<html>” pe linia a doua. Această „etichetă” deschide documentul HTML.
     
  3. Întotdeauna pune „</html>” pe ultima linie. Aceasta închide documentul HTML.

Rezultatul ar trebui să fie următorul:

<!DOCTYPE html>
<html>

</html>

Sectiunea 2 - Terminologie de bază

 

Pentru a învăța mai multe despre HTML, trebuie să învățăm să vorbim despre HTML. Deja ai văzut că folosim „<>” foarte mult.

  1. Lucrurile înăuntrul acelor paranteze se numesc etichete.
     
  2. Etichetele vin de obicei în perechi: o etichetă de deschidere, și una de închidere.
     
  3. Exemplu de etichetă de deschidere: <html>
     
  4. Exemplu de etichetă de închidere: </html>

Gândește-te la etichete ca la niște paranteze: când deschizi una, trebuie să o și închizi! Etichetele pot fi de asemenea puse una într-alta, cât timp sunt închise în ordinea corectă: cea mai recentă deschisă trebuie să fie prima închisă. Exemplu:

<prima etichetă><a doua etichetă>Text!</a doua etichetă></prima etichetă>

 

Secțiunea 3 - Eticheta „head” („capul”)

 

Între etichetele <html> și </html>, există două secțiuni ale documentului: „head” („capul”) și „body” („corpul”). Să începem cu „capul”.

  1. Are o etichetă de deschidere, și una de închidere.
     
  2. „head” conține informații importante despre site, cum ar fi titlul (cel care apare pe bara de sus a browserului, și nu în pagină).

Exemplu:

<!DOCTYPE html>
<html>
<.head>
	<title>Pagina mea de web!</title>
</head>
</html>

 

Secțiunea 4 - Paragrafe în „body” („corp”)

 

Am învățat despre etichete de deschidere și de închidere. Când punem ceva între etichete, etichetele împreună cu ce se află înăuntrul lor formează un „element”.

„body” are o etichetă de deschidere și una de închidere, ca „head”, și se situează tot între etichetele principale ale documentului, adică <html> și </html>, dar nu în „head”.

 

Exemplu:

<html>
<.head></head>
<body></body>
</html>

 

Hai să-i adăugăm paginii un titlu; și, pe lângă asta, hai să creăm un paragraf (de text, desigur)! Fiecare paragraf are nevoie de etichete de deschidere și de închidere: <p> și </p>. Conținutul se pune între etichete.

 

Exemplu:

<!DOCTYPE html>
<html>
<.head>
<title>Pagina mea de web!</title>
</head>
<body>
	<p>Îmi place limbajul HTML.</p>
	<p>Este simplu și ușor!</p>
</body>
</html>

 

Aceasta a fost partea întâi. Urmează partea a doua, în care vom prezenta lucruri cum ar fi: diverse feluri de titluri, adăugarea unei imagini în document ș.a.m.d.

Edited by silvohex
1
Link to comment
Share on other sites
Visarion Explorer

Visarion

Posted
Posted

Un tutorial excelent. Imi aduce aminte de orele de informatica din generala.

Oricum, parerea mea este ca ar trebui sa incerci sa explici ceva mai nou. HTML-ul a fost depasit cu mult de alte limbaje de programare mai noi.

Great job!

Link to comment
Share on other sites
Darky4Fun Rising Star

Darky4Fun

Posted
Posted

Forte excelent tutorial , am reușit și eu sa fac un html dar dacă ai putea sa ma contactezi pe mess sa te întreb câteva chestii ar fi și mai bine .Good Job forte multa munca

Link to comment
Share on other sites
South Ashima and Marlboro Regular

South Ashima and Marlboro

Posted
Posted

Felicitari.

 

Adaug si pentru cei care vor sa folosesca diacritice in site:

 

incepeti site-ul la modul:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script_blocat="content-type" content="text/html;charset=utf-8" />

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • 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.

  I accept