HTML səhifəsi

Sənədin skeleti

HTML nişanlama dilidir: elementlər məzmunun rolunu bildirir. Açılış və bağlanış teqi məzmunu əhatə edir. Atribut açılış teqində əlavə məlumat verir. head görünməyən metadata, body görünən məzmundur.

<!doctype html>
<html lang="az">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ayselin səhifəsi</title>
  </head>
  <body>
    <h1>Aysel haqqında</h1>
    <h2>Maraqlarım</h2>
    <p>Veb proqramlaşdırma <strong>öyrənirəm</strong>.</p>
    <p>Yeni ideyaları <em>praktikada</em> yoxlayıram.</p>
  </body>
</html>

Nümunə

Teqləri məzmuna görə seç

h1 səhifənin əsas başlığıdır; h2 onun bölməsidir. p abzas, strong mühüm məna, em vurğu bildirir. Başlıq səviyyəsini yalnız iri görünməsi üçün seçmə. Boşluğu çoxlu boş sətir və br ilə düzəltmək əvəzinə sonradan CSS istifadə et.

Faylı index.html adı ilə saxla və brauzerdə aç. Dəyişiklikdən sonra faylı saxlayıb səhifəni yenilə. İç-içə teqləri əks sıra ilə bağla; məsələn, p daxilində açılan strong əvvəl bağlanmalıdır.

Əlavə qeydlər və mənbələr

HTML teqləri məzmunun quruluşunu təsvir edir. Sənədin əsas skeletini yarat, başlıq və abzasları yerləşdir, iç-içə elementləri düzgün bağla və nəticəni brauzerdə yoxla.

Niyə vacibdir?

Semantik HTML məzmunu həm insanlar, həm də köməkçi texnologiyalar üçün anlaşılan edir.

Əvvəlki biliklər

İş mühiti və VS Code

Bu mövzuda

doctype, html, head və body
Başlıqlar və abzaslar
Teqlər, atributlar və iç-içə struktur

Mövzuya baxış

Məna görünüşdən əvvəl gəlir

HTML elementini görünüşünə görə deyil, məzmunun roluna görə seç. Əsas başlıq üçün h1, başqa səhifəyə keçmək üçün a, əməliyyat üçün button istifadə et. div təkbaşına bu mənaları bildirmir.

<main>
  <h1>Mənim ilk səhifəm</h1>
  <p>Frontend öyrənməyə başlayıram.</p>
  <a href="https://developer.mozilla.org/">MDN sənədlərini aç</a>
</main>

Nümunə

Şəklin alt mətni onun məqsədini izah etməlidir. Sırf dekorativ şəkil üçün boş alt="" istifadə edilir. Forma sahəsinin etiketi placeholder ilə əvəz olunmur.

İlk sənəd və məlumat elementləri

Sənədin head hissəsi metadata, body isə görünən məzmun üçündür. UTF-8 kodlaşdırması Azərbaycan hərflərinin düzgün göstərilməsinə kömək edir. title brauzer vərəqində görünən addır.

<!doctype html>
<html lang="az">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mənim səhifəm</title>
  </head>
  <body>
    <main>
      <h1>Bacarıqlarım</h1>
      <ul><li>HTML</li><li>CSS</li></ul>
    </main>
  </body>
</html>

Nümunə

Ardıcıllığın vacib olduğu siyahıda ol, digərində ul istifadə et. a elementinin href atributu keçid ünvanıdır. table, tr, th və td əlaqəli cədvəl məlumatını göstərir; səhifənin ümumi layout-unu cədvəllə qurma. Şəkillərin nisbətini saxla və məqsədinə uyğun alt seç.

Mövzu üzrə praktika

Özünü təqdim edən bir HTML səhifəsi hazırla: bioqrafiya, bacarıqlar siyahısı, şəkil və etiketli əlaqə forması əlavə et.

Səhifədə bir əsas h1 var, forma sahələri etiketlidir və keçidlər klaviatura ilə işləyir.

Mövzunun yoxlama siyahısı

Başlıq səviyyələrini düzgün seç
header, nav, main və footer elementlərindən istifadə et
Şəkillərə alt, forma sahələrinə label əlavə et
Keçid ilə düymənin fərqini anla
doctype, head, body, title və UTF-8
Siyahılar, keçidlər, şəkillər və cədvəllər

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Mətni başlığa çevir

Element növünü dəyiş və görünüşü müqayisə et. Sonra h2 seç.

HTML elementi

Mətn

Hədəf: Mətni h2 başlığı kimi göstər.

İlk səhifəm

<p>İlk səhifəm</p>

Özün sına

Özün haqqında bir səhifə yarat: səhifə adı, bir h1, iki abzas və vurğulanmış mətn əlavə et.

Nəticəni necə yoxlayım?

Sənəd brauzerdə açılır, title və h1 fərqlidir, Azərbaycan hərfləri düzgün görünür və teqlər düzgün bağlanır.

Gözlənilən nəticə

Brauzer vərəqində Nümunə səhifə adı görünür.
Bir əsas başlıq, iki abzas, qalın və vurğulanmış mətn var.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

h 1 səhifənin əsas başlığıdır. strong və em mətnə məna əlavə edir, sadəcə iri şrift yaratmır.

index.html

<!doctype html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nümunə səhifə</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
  <h1>Aysel haqqında</h1>
  <p>Mən <strong>veb proqramlaşdırma</strong> öyrənirəm.</p>
  <p>Yeni ideyaları <em>praktikada</em> sınamağı sevirəm.</p>
</main>
</body>
</html>

styles.css

body{font:18px/1.7 Arial,sans-serif;max-width:640px;margin:24px auto;padding:16px}h1{font-size:32px}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.