HTML

HTML Dərsləri


HTML brauzerin oxuya biləcəyi hər hansı sənədi və ya səhifəni yaratmaq üçün xüsusi hipermətn dilidir. HTML internetin fundamental baza texnologiyasıdır və veb-səhifənin növünü, funksiyasını təyin edən diskriptorlar əsasında yaradılmış dildir.



PDF formatlı HTML dərslik kitabı .


HTML5, CSS3 ve JavaScrıpt ile Web Tasarımı

PDF formatlı Kitab . Kitab Türk dilindədir.


PDF formatli kitab.



HTML dildirmi? Teqlər


Birincisi biz bilməliyik ki, HTML bizim indi öyrəndiyimizdir. İkincisi də bilməliyik ki, HTML proqramlaşdırma dili deyil, o, mətn sənədlərinin nişanlanması üçün nəzərdə tutulub (Yəni mətnin formatlaşması üçün). Sizin mətnin görünməsini nişanlar (tags və ya teqlər) təyin edir. 

Teqə nümunə: <br> (mətnin yeni sətrə keçirilməsi, “Enter” kimi). Sənədimizdə “Xosh gelmisiniz”dən sonra bir neçə <br> teqi yazıb yaddaşa verin. Sonra brouzerdə baxın görək nə alınacaq.

Yəni < və > arasında yazılanların hamısı teqdir. < > işarələrinin arasında yazılmayanların hamısi brouzerdə görünəcək. 

Bizim nümunədən görürük ki, teqlər çox və müxtəlifdir:). Şəklə fikir verin, o burada elə-belə deyil, o bizə əsas teqləri göstərir. 

<html>
 

Bu teq sənədi açmalıdır. Əgər açılan teq varsa, onda onun bağlanan teqi də olmalıdır: 

</html>
 

Beləliklə həmişə, susmaya görə bu belə olur. Bəzi teqlər (<br> teqi kimi) özündən sonra bağlanan teq tələb etmirlər. 

Yenidən bizim sənədə və şəklə qayıdaq.


Vacib teqlər. Nə üçün başlığa gövdə, gövdəyə başlıq lazımdır?


<head> </head> – Sənədin başlığı
<body> </body> – Sənədin gövdəsi 

<head> </head> arasında yerləşən teqlərin hamısı xidməti məlumatlardır. (Bizim xidmət həm qorxulu, həm də çətindir və ilk addımda elə bil ki, görünmür:). Məsələn, <title> – başlıq. O nə üçündür? Bizim sənədlə Internet Explorer-i açın və öz diqqətinizi bütün sətirlərdən yuxarıya yönəldin (pəncərənin başlığına)… Gördünüz? 🙂 

Açılıb bağlanan <body> və </body> teqləri arasında yerləşənlərin hamısı sənədin tutumudur. Növbəti addımlar bu teqlərə həsr olunacaqlar: Biz fonun, mətnin rəngini dəyişməyi, mətni iri və xırda etməyi öyrənəcək, şəkillərdən, cədvəllərdən və s-dən danışacağıq:) Lakin hər şeydən əvvəl teqlər haqqında ümumi anlayışları sona çatdıraq.

<teq> </teq> – sadə teq deyil, bu konteyner teqdir, bunun daxilində digər teqlər və mətn də yerləşdirilə bilər. 

Fikir verin: 

<teq1><teq2><teq3> … </teq3></teq2></teq1>

Bu cür teqlər ardıcıllığı düzgündür, birinci açılan teq sonuncu bağlanır, həmçinin də digərləri. 

Yəni növbəti nümunə səhvdir, teqlərin düzgün yazılmaması sizin səhifənin səhv görünməsinə gətirib çıxarır: 

<teq1><teq2><teq3> … </teq3></teq1></teq2> 

Odur ki, öz səhifənizi yaradarkən bir az diqqətli olun.



Özün rənglə. Mətnin rəngini dəyişirik

Ən sadədən çətinə doğru gedək. Bu addımda biz rəngləməyi öyrənəcəyik:) Əvvəldə bizə palitra lazım olacaq (internetin bütün rəngləri – http://www.artlebedev.ru/tools/colors/). Palitranı özünüz üçün diskə yazmağı (File – Save as) unutmayın, o sizə gələcəkdə lazım olacaq.

Bu nə üçündür? Çunki HTML-də bütün rənglər bu üsulla yazılırlar. Məsələn, ağ rəng – ffffff. Bizim misaldakı səhifəyə qayıdaq. Gəlin “Xosh gelmisiniz” sözünü qırmızı rəngdə rəngləyək. 

<font color=”#CC0000″> Xosh gelmisiniz 🙂 </font>


“font” teqinin “color” atributu bu konteyner daxilindəki mətnin rəngini dəyişir. “color” atributu bu teqə məxsus deyil, o, həmçinin digər teqlərdə də istifadə edilə bilər. 

İndi “CC0000” əvəzinə rənglərin başqa kodlarını yazın. Fikir verin ki, rəng kodundan əvvəldə # işarəsi olmalıdır.

Əgər siz bizim dərslərdəki materiaları mənimsəmək istəyirsinizsə, burda verilən bütün nümunələri özünüz fərdi olaraq test edin. 
  
<html>
<head>
<title>Menim ilk addimim</title>
</head>
<body>
Salam, bu menim ilk sehifemdir.
<br>
<font color=”#CC0000″>Xosh gelmisiniz 🙂 </font>
</body>
</html> Nümunə 
<font></font> teqi çox funksiyalıdır. Onunla təkcə mətnin müəyyən hissəsinin rəngini yox, həmçinin mətnin rəngini və şriftini də (Arial) vermək olar. Bu haqda bir az sonra. 

Sənədin rəngini başqa cür necə dəyişmək olar? – açılan <body> teqini yada salaq: 

<body text=”#336699″>
 

Bu onu göstərir ki, bütün sənədin mətnlərinin rəngləri göy rəngdə olacaq, <font></font> teqinin arasında yazılanlardan başqa (əgər <body> teqində rəng verilməyibsə, onda susmaya görə sənədin mətni qara rəngdə olacaq). 
 



Səhifənin fonunun rəngini necə dəyişməli. Bir az rənglər haqqında

Bu addımda biz fonun rəngini dəyişməyi öyrənəcəyik və həmçinin bir az etika haqqında danışacağıq. 

Fonun rəngi artıq bizə məlum olan <body> teqində verilir: 

<body bgcolor=”#000000″>
 

Görünməsi üçün mən qara rəng seçdim, siz isə öz sənədinizi başqa rənglə də rəngləyə bilərsiniz (Əgər <body> teqində rəng yazılmayıbsa, onda standarta görə ağ rəng qəbul edilir. Lakin bəzən ağdan başqa digər rənglər də ola bilər, ona görə də “body” teqində fonun rəngini versəniz yaxşı olar. 

<html>
<head>
<title>Menim ilk addimim</title>
</head>
<body text=”#336699″ bgcolor=”#000000″>
Salam, bu menim ilk sehifemdir.
<br>
<font color=”#CC0000″> Xosh gelmisiniz</font> 🙂 
</body>
</html> Nümunə 
Fikir verin, biz eyni zamanda <body> teqində həm fonun rəngini, həm də mətnin rəngini verə bilərik. 

<body text=”#336699″ bgcolor=”#000000″>
 

Bu hissə ilə biz demək olar ki, qurtarmışıq, indi isə bir az rənglər haqqında danışaq. 

Hörmətli dostum, mən səndən fonun rənglərini açıq rəngdə verməməyi xahiş edirəm (sarı, qırmızı, narıncı və həmçinin qara fonda açıq mətnlə). Nə üçün? Bəli, sadəcə olaraq öz dostlarının və tanışlarının gözlərinə heyifin gəlsin. Həmçinin öz səhifəndə ayrı-ayrı fonların rənglərindən də istifadə etmə, bu da açıq rəng kimi diqqəti yayındırır və sənin məqaləni oxumağa mane olur. 

Fonun rəngi haqqında bu qədər, indi növbəti addıma keçək.



Paraqraflar

Bu bölmədə biz paraqraflar haqqında danışacağıq. Paraqraf aşağıdakı teq vasitəsi ilə verilir: 

<p> </p>
 

Paraqraf vasitəsi ilə biz mətni mərkəzləşdirə bilərik: 

<p align=”center”>mətn</p>
 

Paraqraf vasitəsi ilə biz mətni sol tərəf üzrə düzləndirə bilərik: 

<p align=”left”>mətn</p>
 

Və ya mətni sağ tərəf üzrə düzləndirə bilərik: 

<p align=”right”>mətn</p>
 

Hər iki tərəf üzrə nizamlaya bilərik: 

<p align=”justify”>mətn</p>
 

İndi paraqrafı bizim sənədə daxil edək və görək nə alınacaq (Bizim nümunədə mən paraqrafı mətnin mərkəzləşdirilməsi ilə istifadə etdim (align=”center”), siz isə paraqrafın digər xassələrini də yoxlayın (left, right və justify).

 
 
 
 
<html>
<head>
<title>Menim ilk addimim</title>
</head>
<body text=”#336699″ bgcolor=”#000000″>
<p align=”center”>
Salam, bu menim ilk sehifemdir.
<br>
<font color=”#CC0000″> Xosh gelmisiniz</font> 🙂 </p>
</body>
</html> Nümunə

 
Bizim HTML və paraqrafa qayıdaq. Yadda saxlayın: Heç vaxt sənəddə aşağıdakı tip konstruksiyadan istifadə etməyin:

<p></p>


Heç bir elementdən ibarət olmayan boş <p> elementləri brouzerlər tərəfindən iqnor olunmur. Bunu yaddan çıxarmayın. Fikir verin ki, əgər mətndə paraqrafdan istifadə edilməyibsə, onda mətn susmaya görə sol tərəfdən düzlənmiş yazılır. Həmçinin onu da yadda saxlayın ki, paraqrafda yeni sətrə keçid olan <br> teqindən istifadə olunmur, yəni burada keçid susmaya görə yazılır. Əgər sizə bu keçid heç cür lazım deyilsə, onda nə etməli? <p align=”center”> teqinə oxşar teq var: 

<center> mətn </center>

 
 
 
 
<html>
<head>
<title>Menim ilk addimim</title>
</head>
<body text=”#336699″ bgcolor=”#000000″>
<center>
Salam, bu menim ilk sehifemdir.
<br>
<font color=”#CC0000″>Xosh gelmisiniz</font> 🙂 </center>
</body>
</html> Nümunə

 
Həmçinin, oxucumuz hirslənə bilər ki, “Bəs digər uyğunlaşma tipləri? Siz alternativ mərkəzləşmədən danışdınız.” 

Narahat olmayın, sadəcə olaraq mən sizə hamısını danışa bilmədim 🙂

<center> teqi yaxşıdır, lakin o HTML-in digər variantlarından mövcuddur (onlardan da çox olar, bu dünyada hər şey inkişaf edir, HTML də bunlardan kənarda qalmır). Hələ ki, bu teqi heç kim götürməyib, onu istifadə etmək olar, lakin çox da arzu olunan deyil.

Bəs necə etməli? Yaxşısı budur <div></div> teqlərindən istifadə etməli, onun “align” atributunun aşağıdakı 4 xassəsi var:

<div align=”center”> mətn </div> 
<div align=”left”> mətn </div> 
<div align=”right”> mətn </div> 
<div align=”justify”> mətn </div>

 
 
 
 
<html>
<head>
<title>Menim ilk addimim</title>
</head>
<body text=”#336699″ bgcolor=”#000000″>
<div align=”center”>
Salam, bu menim ilk sehifemdir.
<br>
<font color=”#CC0000″>Xoş gəlmisiniz</font> 🙂 </div>
<p align=”justify”>
Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqqimda oxumaq uchun bura baxa bilerler, oz urek sozlerini qonaq kitabima yaza bilerler. Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve menim daha bir virtual dostum artsin. 🙂
</p> 
</body>
</html> Nümunə

 
Burada sizin üçün elə-belə, çıxış mətni yazmışam, yəqin ki, siz öz mətninizi fikirləşərsiniz. Lakin biz hər şeydən əvvəl <div> və <p> haqqında söhbəti sona çatdıraq. Paraqraf daxilində digər paraqraflar saxlamır, həmçinin də <div></div>. Yəni növbəti konstruksiya düzgün deyil və bu cür sənəd yaratmaq düzgün deyil:

<p align=”right”>
<p>mətn</p>
<p>mətn</p>
<p>mətn</p>
</p>




<p align=”right”>
<div>mətn</div>
<p>mətn</p>
<div>mətn</div>
</p>


Lakin <div> öz daxilində paraqraflar saxlaya bilir. Onun köməkliyi ilə biz onları məsələn, sağ tərəf üzrə düzləndirə bilərik.

<div align=”right”>
<p>1-ci abzasın teqi</p>
<p>2-ci abzasın teqi</p>
<p>3-cü abzasın teqi</p>
</div>


Əlbəttə ki, <p> və <div> özlərində təkcə elementlərin uyğunlaşmasını saxlamırlar. Lakin burda biz yalnız uyğunlaşmadan danışdığımız üçün <div> və <p>-nin digər xassələrindən danışmayacağıq, onlar haqqında növbəti mövzularda danışılacaq. Yəni bu bir az çətin mövzudur və buna hələ ki, siz hazır deyilsiniz.