HTML — Qısa və Konkret
UI Test Automation
Məqalənin məzmunu
- HTML nədir?
- Sintaksinin əsasları
- Static sayt yarada bilərik
HTML nədir? What is HTML?
HTML — Hyper Text Markup Language — proqramlaşdırma dili deyil, mark up dilidir. Veb səhifənin görünüşünün skeletini yaratmaq üçün istifadə olunur. Faylın daxilində kodu yazıb tipini .html qeyd edərək html faylını yarada bilirik. İstəsəniz İDE istifadə edin, amma adi bloknotda da yazmaq olar.
Sintaksisin əsasları hansılardır?
Düşünürəm standard bir kodu yazıb üzərindən keçərək izah etsəm daha yaxşı olar. Ona görə gəlin birdənə mətn faylı yaradaq (.txt formatında). Onun daxilinə aşağıda yazılan kodu yazaq və yaddaşda saxlayaq. Sonra “.txt” formatını dəyişək edək “.html”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first veb page</title>
</head>
<body>
</body>
</html>
Yazılanları elə ardıcıllıqla analiz edək və mənasını başa düşək. HTML üçün yazdığımız kod teqlərdən (tag) ibarətdir. Teqlər <> simvolunun daxilində yazılanlardır. </> sləş işarəsi olanlar açılan teqlərin bağlanmasını qeyd etmək üçün istifadə olunur. Elə teqlər var ki, təkcə bağlanan teq istifadə edir.
İlk sətirdə gördüyümüz <!DOCTYPE html> brauzerə deyir ki, bu fayl html faylıdır. Sonra gələn <html> teq əsas teqlərdən biridir. Ən sonda bağlanan teqi də var </html> və bütün html kodlarını həmin bu iki teqin daxilində yazmalıyıq. Növbəti 2 əsas teqlər, html daxilində yerləşir: head və body. Bu iki teqlərin öz məqsədləri var. <head> </head> teqlərinin arasında müxtəlif məlumatlar yerləşir ki, hansını biz bir başa veb səhifəmizdə görmürük. Misal üçün hazırda biz meta teqini görürük, həmin teq brauzerə deyir ki, faylda olan məlumat utf-8 standartlarına uyğundur. Meta teqin bunu deməsi üçün “charset” istifadə olunub. “charset” - teqin atributu adlanır, “utf-8” isə onun dəyəri. Eyni qaydada digər meta teqində “name” və “content” atributları var. <head> teqində müxtəlif teqlər öz atributları ilə ola bilər ki, body hissəsində yazdığımız kodu dəstəkləsin vəya brauzerə hansısa məlumatı ötürsün. Head daxilində olan əsas teqlərdən biri də “title” teqidir. <title> </title> teqlerinin arasında nə yazsaq, brauzer tablarının üzərində əks olunacaq. Ona görə gəlin orada “My first veb page” yazaq.
<body> </body> teqlerin arasında yazdıqlarımızın əsas veb səhifədə istədiklərimizi əks etdirmək üçündür. Burada nə istəsək yaza bilərik amma mən sadəcə əsas teqləri vurğulamaq istəyirəm. Çünki məqaləmiz sadəcə html-a giriş məqsədi daşıyır. HTML kursları Azərbaycan dilində belə kifayət qədər çoxdur. Məsləhət görürəm biraz baxıb öyrənəsiniz, əgər məqalə kifayət etmirsə.
<body>
<img height="500px" src="path_to_image/image.jpg" />
<h1> Birinci header </h1>
<h2> Ikinci header </h2>
<h3> 3 header </h3>
<h4> 4 header </h4>
<h5> 5 header </h5>
<h6> 6 header </h6>
<p> paraqraph </p>
<ul>
<li> unordered (bulleted) list item 1 </li>
<li> unordered (bulleted) list item 2 </li>
<li> unordered (bulleted) list item 3 </li>
</ul>
<ol>
<li> ordered list item 1 </li>
<li> ordered list item 2 </li>
<li> ordered list item 3 </li>
</ol>
<a href="https://aytiqaqash.dev/">aytiqaqash</a>
<br>
<br>
<form>
<label>Username: </label>
<input type="text" placeholder="İstifadəçi adını daxil edin...">
<label>Password: </label>
<input type="password">
</form>
<table>
<tr>
<th>Başlıq 1</th>
<th>Başlıq 2</th>
</tr>
<tr>
<td>Sütün 1 sətir 1</td>
<td>Sütün 2 sətir 1</td>
</tr>
<tr>
<td>Sütün 1 sətir 2</td>
<td>Sütün 2 sətir 2</td>
</tr>
</table>
</body>
Yuxarıda artıq <body> teqlərinin daxilinə <img> və header teqlərini yazdıq. <img> teqini biz şəkil təsvir etmək üçün istifadə edirik. Teqin atributlarından ən əsası “src” source sözünün qısaldılmış variantıdır və şəkilin yerləşdiyi yeri qeyd edilməsi üçün istifadə olunur. Brauzer ondan bilir ki, şəkili haradan yükləməlidir. Növbəti gələn teqlər <h1> dən <h6>ya dək hamısı mətnin başlığını qeyd etmək üçün istifadə olunan teqlərdir.
Növbəti teqimiz <p> paraqraph </p> paraqraf yazmaq üçün istifadə olunan teqdir. Teqlərin arasında mətn yaza bilərik.
Bəs biz siyahı yazmaq istəsək nə edəcəyik? Siyahılar üçün <ul> nömrələnməyən siyahıdır, <ol> isə nömrələnən siyahıdır. Hər <li> siyahının bir elementidir.
Bir saytdan digər sayta keçid etmək üçün və ya elə saytıd daxilində digər səhifələrə keçmək üçün linklərdən istifadə olunur. Həmin bu linkləri yaradan teqlərimiz: <a> </a>. “href” atributu vasitəsi ilə keçəcəyimiz ünvanı qeyd edirik. Bizim kodumuzda “aytiqaqash” sözünə kliklədikdə aytiqaqash.dev saytına keçid edəcək.
<br> teqi vasitəsi ilə yeni sətirlər yarada bilirik.
Saytlarda müxtəlif məlumat daxil etmək üçün xanalar olur ki, oraya istifadəçi məlumat daxil edə bilir. Login, Contact səhifələrində daha çox rast gəlmək olur. Bunun üçün html teqlərindən <form> </form> teqləri var ki, daxilində əlavə teqlər yazmaqla, istifadəçinin məlumatları daxil etməsi üçün, yetərincə xana yarada bilirik. <label> Username </label> misal üçün istifadəçinin login səhifəsin istifadəçi adının daxil edilməsi üçün nəzərdə tutulan xanın yanında məlumat vermək üçün qeyd olunu. Xananın özünü qeyd etmək üçün isə <input> teqini qeyd edirsiniz. Bu teqin əsas attributlarından biri “type” xananın məqsədi, özünü necə aparmasını təyin etmək üçün istifadə olunur. Dəyər olaraq misal üçün “text” qəbul edəndə sadə bir xana olur. Lakin “password” edəndə, xanaya yazdığımız mətni gizli saxlayır, şifrənin həsas bir məlumat olduğuna görə. Əlavə atributlar da yaza bilərik <input> teq üçün: placeholder=”İstifadəçi adını daxil edin…”. Xananın daxilində köməkçi mətn kimi əks olunacaq, və biz xanaya yazmağa başlayanda “placeholder”in mətni itəcək.
<hr> teqi vasitəsi ilə, veb səhifədə horizontal xətt yerləşdirmək mümkündür.
Əsaslardan danışmışkan gərək cədvəlləri qurmağı da bilək. Cədvəllər sütun və sətirlərdən ibarətdir. Birinci sətir başlıqları müəyyən etmək üçün istifadə oluna bilər. Cədvəl yaratmaq üçün HTMLdə <table> </table> teqləri istifadə olunur. Daxilində neçə sətir olacağını müəyyən etmək üçün <tr> </tr> teqlərindən istifadə edirik. Sütünların sayını təyin etmək üçün isə <td></td> teqlərini “tr” teqlərinin daxilində istədiyimiz sayda qeyd edirik. İlk sətiri başlıq kimi qeyd etmək üçün sadə “td” sütun teqinin əvəzinə, “th” istifadə edirik. Nümunələr yuxarıda qeyd etdiyimiz kodlardır. Cədvəllər üçün istifadə olun attributlar da var.
HTML ilə bağlı detallı məlumatlar və ya dərindən öyrənmək üçün müxtəlif fərqli saytlara üz tuta bilərsiniz.
Static sayt yarada bilərik
Bu hissəni sizə tapşırıq kimi saxlamaq istəyirəm. Bir dənə veb səhifə yaradın, sizin ümumi təcrübənizi təqdim eləsin və bacarıqlarınızı siyahı kimi təqdim edin. Şəkilinizi əlavə edin və facebook səhifənizə link yerləşdirin. Teqlərlə müxtəlif kombinasiyalardan istifadə edərək maraqlı kontent qura bilərsiniz.
Bizi dəstəkləmək üçün bizi izləmək, youtube kanalımıza abunə olmaq və ya kofe qonağı etməyi unutmayın.