HTML Əsasları. HTML Teqini Anlamaq Bütün HTML Teqlərini Necə Öyrənmək olar
HTML teqləri HTML dilinin əsasını təşkil edir. Teqlər işarələmədə elementlərin başlanğıcını və sonunu məhdudlaşdırmaq üçün istifadə olunur.
Hər bir HTML sənədi HTML elementləri və mətn ağacından ibarətdir. Hər bir HTML elementi başlanğıc (açma) və bitmə (bağlama) teqi ilə müəyyən edilir. Açılış və bağlanma teqlərində etiketin adı var.
Bütün HTML elementləri beş növə bölünür:
boş elementlər - , , , , , , , , , , , , , , ;
formatlaşdırılmamış mətnli elementlər - , ;
formatlaşdırılmamış mətni göstərən elementlər - , ;
başqa ad sahəsinin elementləri - MathML və SVG;
adi elementlər - bütün digər elementlər.
Cədvəl göstərir tam siyahı HTML4 və HTML5 tərəfindən dəstəklənən elementlər. Eksperimental və köhnə teqlər xaric edilir. HTML5 spesifikasiyasına əlavə edilmiş elementlər qara rəngdə vurğulanır.
HTML elementlərinin tam siyahısı
Cədvəl 1. HTML elementləri
Tag Təsviri
Şərh əlavə etmək üçün istifadə olunur.
Sənədin növünü elan edir və brauzerə əsas məlumatları - onun dilini və versiyasını təqdim edir.
Hipermətn bağlantıları yaradır.
Mətni abreviatura və ya abbreviatura kimi müəyyən edir. İzahlı mətn başlıq atributundan istifadə etməklə müəyyən edilir.
Sənədin və ya məqalənin müəllifinin/sahibinin əlaqə məlumatlarını göstərir. Brauzerdə kursivlə göstərilir.
Bu, təsvir xəritəsində müəyyən bir sahəyə və ya şəkil xəritəsində aktiv sahəyə uyğun gələn mətni olan hiperlinkdir. Həmişə etiketin içərisinə yerləşdirilir.
Jurnal məqaləsi, blog yazısı, şərh kimi sənədin və ya veb saytın müstəqil hissəsini təşkil edən məzmun bölməsi.
Səhifənin/saytın əsas məzmunu ilə dolayısı ilə əlaqəli olan səhifə məzmununu təmsil edir.
Audio məzmunu veb səhifəyə yükləyir.
Vurğulanmış mətnə vurğu və ya əhəmiyyət əlavə etmədən mətn keçidini qalın rənglə təyin edir.
Bütün nisbi ünvanların hesablandığı əsas ünvanı (URL) müəyyən edir. Bu, səhifəni başqa yerə köçürərkən problemlərin qarşısını almağa kömək edəcək, çünki bütün keçidlər əvvəlki kimi işləyəcək.
Mətnin qalan hissəsindən sağdan sola oxunduğu dildə yazılmış mətn keçidini təcrid edir.
Mətni cari mətn istiqamətinə üstünlük verərək dir atributunun təyin etdiyi istiqamətdə göstərir.
Mətni sitat kimi vurğulayır, böyük sitatları təsvir etmək üçün istifadə olunur.
Sənədin əsas hissəsini təmsil edir (sənədin metadatasına daxil olmayan məzmun).
Mətni yeni sətirə sarın.
İnteraktiv düymə yaradır. Məzmunu etiketin içərisinə yerləşdirə bilərsiniz - mətn və ya şəkil.
Sadə şəkillər, diaqramlar, qrafiklər və s. kimi şəkilləri dinamik şəkildə göstərmək üçün kətan konteyneri. Rəsm üçün JavaScript skript dili istifadə olunur.
Cədvələ başlıq əlavə edir. Etiketdən dərhal sonra daxil edilir
.
Sitatın mənbəyini göstərmək üçün istifadə olunur. Kursivlə göstərilir.
Monospace şrift ailəsində göstərilən proqram kodunun bir hissəsini təmsil edir.
Formatlaşdırma üçün eyni tip məlumatı ehtiva etməyən bir və ya bir neçə cədvəl sütununu seçir.
Bir çox məntiqi homojen hüceyrələri müəyyən edən struktur sütunlar qrupu yaradır.
Element maşın tərəfindən oxuna bilən formatda olan və kompüter tərəfindən emal edilə bilən dəyər atributunun dəyərini etiketin məzmunu ilə əlaqələndirmək üçün istifadə olunur.
Açılan siyahı elementi üçün konteyner elementi. Variant dəyərlər elementlərdə yerləşdirilir.
Bir etiketdən bir termini təsvir etmək üçün istifadə olunur.
Mətni silməklə onu silinmiş kimi qeyd edir.
İstifadəçinin aça və ya bağlaya biləcəyi interaktiv vidcet yaradır. Məzmun üçün konteyneri təmsil edir, vidcetin görünən başlığı teqdə yerləşdirilir.
Sözü kursivlə yazaraq termin kimi müəyyən edir. Sonrakı mətndə bu terminin tərifi olmalıdır.
İstifadəçinin dialoq qutusu, müfəttiş və ya pəncərə kimi tapşırığı yerinə yetirmək üçün qarşılıqlı əlaqədə olduğu interaktiv element. Açıq atribut olmadan o, istifadəçiyə görünmür.
HTML sənədinin bölmələri üçün konteyner etiketi. Üslublarla formatlaşdırma üçün blok elementlərini qruplaşdırmaq üçün istifadə olunur.
Termin və onun təsviri olan konteyner etiketi.
Termini təyin etmək üçün istifadə olunur.
Mətnin vacib hissələrini kursivlə göstərməklə vurğulayır.
Xarici interaktiv məzmunu və ya plagini daxil etmək üçün konteyner etiketi.
İllüstrasiyalar, diaqramlar, fotoşəkillər, kod nümunələri kimi məzmun üçün, adətən başlıqlı konteyner etiketi.
Sənədin və ya bölmənin bitmə sahəsini (footer) müəyyən edir.
İstifadəçilərdən məlumatların toplanması və serverə göndərilməsi üçün forma. Fəaliyyət atributu olmadan işləmir.
Əlaqədar bölmələr üçün altı səviyyəli başlıq yaradın.
HTML sənəd metadatası üçün konteyner elementi, məsələn, , , , , .
Saytın və ya naviqasiya keçidləri qrupunun giriş məlumatları üçün bölmə. Bir və ya bir neçə başlıq, loqo, müəllif haqqında məlumat ola bilər.
Paraqrafların tematik bölünməsi üçün üfüqi xətt.
HTML sənədinin kök elementi. Brauzerə bunun HTML sənədi olduğunu bildirir. Bu, bütün digər html elementləri üçün konteynerdir.
Əlavə vurğu vermədən mətnin keçidini kursiv yazır.
Cari HTML sənədinə başqa sənəd yükləyərək daxili çərçivə yaradır.
Dəyəri daxil edilmiş şəklin URL-i olan src atributundan istifadə edərək şəkilləri HTML sənədinə yerləşdirir.
İstifadəçinin məlumat daxil edə biləcəyi zəngin forma sahələri yaradır.
Mətni altından xətt çəkərək vurğulayır. Sənəddə edilən dəyişiklikləri vurğulamaq üçün istifadə olunur.
Bir boşluq şriftində klaviaturadan istifadə edərək istifadəçi tərəfindən daxil ediləcək mətni seçir.
Səhifə haqqında əlavə məlumat saxlamaq üçün istifadə olunur. Bu məlumat brauzerlər tərəfindən səhifəni emal etmək üçün, axtarış sistemləri isə onu indeksləşdirmək üçün istifadə olunur. Bir blokda bir neçə teq ola bilər, çünki istifadə olunan atributlardan asılı olaraq onlar müxtəlif məlumat daşıyırlar.
Verilmiş diapazonda ölçmə göstəricisi.
Sayt üçün naviqasiya keçidlərini ehtiva edən sənədin bölməsi.
Skripti dəstəkləməyən bölməni müəyyənləşdirir.
Multimedia daxil etmək üçün konteyner (məsələn, audio, video, Java proqramları, ActiveX, PDF və Flash). Siz həmçinin cari HTML sənədinə başqa veb səhifə əlavə edə bilərsiniz. Etiket plaqinin parametrlərini ötürmək üçün istifadə olunur.
Sıralı nömrələnmiş siyahı. Nömrələmə rəqəmli və ya əlifba sırası ilə ola bilər.
Bir qrup element üçün başlığı olan konteyner.
, və ya , açılan siyahıdan seçmək üçün seçim/seçim müəyyən edir.
Skriptdən istifadə edərək hesablanmış hesablamanın nəticəsini göstərmək üçün sahə.
Mətndə paraqraflar.
Elementdən istifadə edərək daxil edilmiş plaginlər üçün parametrləri müəyyənləşdirir.
Bir elementdən ibarət konteyner elementi və sıfır və ya daha çox element. Özü heç nə göstərmir. Brauzerə ən uyğun şəkli seçməyə imkan verir.
Mətni formatlaşdırmadan, boşluqları və mətn fasilələrini qoruyur. Kompüter kodunu, e-poçt mesajlarını və s. göstərmək üçün istifadə edilə bilər.
İstənilən növ tapşırığın tamamlanmasının göstəricisi.
Qısa sitat müəyyən edir.
Şərqi Asiya simvolları və onların dekodlanması üçün konteyner.
Daxili mətni annotasiyanın əsas komponenti kimi müəyyən edir.
Daha kiçik şriftlə göstərilən elementdə olan simvolların üstündə və ya altında qısa təsvir əlavə edir.
Daxil edilmiş mətni əlavə annotasiya kimi qeyd edir.
Brauzer elementi dəstəkləmirsə, alternativ mətni göstərir.
Cari olmayan mətni üstü üstü xəttlə göstərir.
Proqram kodunun və ya skriptin icrasının nəticəsini təmsil edən mətni, həmçinin sistem mesajlarını göstərmək üçün istifadə olunur. Monospace şriftində göstərilir.
Müştəri tərəfi skripti müəyyən etmək üçün istifadə olunur (adətən JavaScript). Tərkibində ya skript mətni var, ya da src atributundan istifadə edərək xarici skript faylına işarələr var.
Səhifənin məntiqi sahəsini (bölməsini) adətən başlıq ilə müəyyən edir.
Təklif olunan dəstdən dəyərləri seçməyə imkan verən nəzarət elementi. Variant dəyərlər yerləşdirilir.
Mətni daha kiçik şrift ölçüsündə göstərir.
, , üçün alternativ media resurslarının yerini və növünü müəyyən edir.
Daxili elementlər üçün konteyner. Fərdi sözləri rənglə vurğulamaq kimi mətn keçidlərini formatlamaq üçün istifadə edilə bilər.
Mətndə vurğu yerləşdirir, onu qalın hərflərlə vurğulayır.
Daxil edilə bilən stil cədvəlləri daxildir.
Simvolların, məsələn, kimyəvi düsturlardakı element indeksinin alt yazısını təyin edir.
Teq üçün görünən başlıq yaradır. Doldurulmuş üçbucaqla göstərilir, üzərinə klikləməklə başlıq təfərrüatlarına baxmaq imkanı verir.
Simvolların yuxarı yazısını təyin edir.
Cədvəl yaratmaq üçün etiket.
Cədvəlin gövdəsini müəyyənləşdirir.
Cədvəl xanası yaradır.
Skript vasitəsilə klonlana və sənədə daxil edilə bilən HTML kod fraqmentlərini elan etmək üçün istifadə olunur. Bir etiketin məzmunu onun uşağı deyil.
Böyük mətn daxiletmə sahələri yaradır.
Cədvəl altbilgisini müəyyən edir.
Cədvəl xanasının başlığını yaradır.
Cədvəlin başlığını müəyyənləşdirir.
Tarix/saat müəyyən edir.
Brauzerin başlıq çubuğunun yuxarısında görünən HTML sənədinin başlığı. Axtarış nəticələrində də görünə bilər, ona görə də başlıq təqdim edərkən bu nəzərə alınmalıdır.
Cədvəl sırası yaradır.
Elementlər və üçün altyazılar əlavə edir.
Əlavə vurğu olmadan mətnin bir hissəsini vurğulayır.
Səhifəyə video faylları əlavə edir. 3 video formatını dəstəkləyir: MP4, WebM, Ogg.
Brauzerə uzun xəttin kəsilə biləcəyi yeri göstərir.
Etiketləri olan fırıldaqçı vərəq
İstifadə rahatlığı üçün hər bir teq üçün ekran xassələri əlavə edərək tematik bölmələrə qruplaşdırdım. Masaya getmək üçün şəklin üzərinə klikləyin.
HTML .htm (html) uzantısı olan adi mətn faylıdır. Əvvəlcə sadə bir səhifə yaratmaq üçün sadəcə məşq edərkən sizə yalnız notepad lazımdır. Notepad açın və bir az mətn yazın.
Hər bir HTML elementi mötərizələrlə əhatə olunmuş teqdir. İstənilən fayl, html səhifəsi teqlə başlayır və etiketlə bitir.
Bu etiket sadəcə olaraq brauzerə (bu, internet səhifələrinə baxdığınız proqramdır) bu sənədin html işarələmə sənədi olduğunu göstərir.
Teq html sənədinin başlanğıcı, bağlanma teqi isə html sənədinin sonu deməkdir.
Bu teqlərin içərisində bir neçə başqa vacib teq var. Teqdən dərhal sonra səhifənin başlığını və səhifənin gövdəsini göstərən teqlər var.
İlk HTML səhifəm
Bu səhifə göstərildikdə etiket pəncərə başlığının başlığını bildirir. İndi siz Notepad-da yeni mətn sənədi yarada, yuxarıda təqdim olunan mətni kopyalayıb Page1.html olaraq saxlaya və brauzerdə işlədə bilərsiniz, brauzer pəncərəsinin başlıq sətrində səhifənin adını görəcəksiniz və boş səhifə, çünki Biz teqlərdə səhifənin mətnində heç nə göstərmirik.
Beləliklə, yuxarıdakı mətn bizim üçün istənilən veb səhifənin əsas skeleti olacaqdır.
Cütlənmiş və qoşalaşdırılmamış etiketlər!
, , Bunlar sadəcə qoşalaşmış teqlərdir - cüt olaraq gələn teqlər: teq və onun bağlanması, / simvolu ilə bağlanma teqi. Cütlənmiş teqlər üçün etiketin əvvəli ilə sonu arasında olan dəyər teqin hərəkətidir. Aksiya / simvolu olan etiket tapılana qədər davam edəcək.
Qoşalaşdırılmamış teqlər – onların bağlanma teqi yoxdur. Aşağıda bu cür etiketlərə nümunələr verəcəyik.
— Axtarış sistemləri üçün açar sözlər, müxtəlif skriptlər və s. olan html səhifəsinin başlığı.
— Html sənədinin özü.
Qoşalaşdırılmamış etiket.
Qeyd: Əksər hallarda, indi veb saytlar qurarkən, hazır rutinlər, plaginlər və s. – daha sürətli sayt yaratmaq üçün, lakin bu cür rutinləri və şablonları tətbiq etmək və istifadə etmək üçün hələ də sessiya məlumatları haqqında minimal bilik tələb olunur.
Siz artıq oxumusunuz ki, bütün dillər teqlərdən ibarətdir. Bu dərsdə biz HTML teqlərinə daha yaxından nəzər salacağıq. HTML dilində teqlər tək (qoşalaşdırılmamış) və qoşalanmış teqlərə bölünür. Beləliklə, tək HTML teqləri bir teqdən ibarətdir, yəni onların bağlanma teqi yoxdur. Və qoşalaşmış deskriptorların açılış və bağlanma etiketi var.
Tək HTML Teqləri
Tək teqlərin bağlanma teqi yoxdur. Misal üçün: , . Əvvəllər belə yazırdılar: , , indi tək teqlərin yazılmasının bu üslubu aktual deyil, ona görə də belə yazmayın. Ən çox istifadə edilən tək etiketlər: - yeni sətrə keçmək, - ayırma xətti, - şəkil daxil edin.
Cütlənmiş HTML teqləri
Daha çox qoşalanmış etiketlər var. Cütləşdirilmiş deskriptorun açılış və bağlanma teqi var. Cütlənmiş etiket bir konteyner təşkil edir. Konteynerin məzmunu açılış və bağlama etiketləri arasında olan şeydir. Bu məqalədəki nümunədə HTML-də deskriptorlar nədir? , deməli, bu qoşalaşmış teqdir, bu teqin məzmunu “HTML-də teqlər nədir?” mətnidir. Onun başlanğıcı etiketdir və sonu .
Cütlənmiş etiketlər yazmaqda yeni başlayanların əsas səhvi yuva qurarkən qarışıqlıqdır. Məsələn, bu düzgün girişdir:
Qalın abzas
. Və səhv budur:
Qalın abzas
, belə tərtibatlı HTML sənədi etibarsız sayılır. Yerləşdirməni çaşdırmamaq üçün bunu edin: qoşalaşmış teqlər yaradın, sonra başqalarını onlara yerləşdirin və sonunda hər iki teqin içinə mətni yazın.
Cütlənmiş etiketləri necə düzgün yazmaq olar
. HTML5-də etiketlər baxımından nə yenilik var?
HTML5 HTML4-ün uzantısıdır, ona görə də HTML4-dəki deskriptorların əksəriyyətini və ya hamısını saxlayır və özünün əlavələrini əlavə edir. HTML5 saytı əsas bloklara bölmək üçün xüsusi teqlər təqdim etdi: başlıq, menyu, altbilgi, yan panel və məzmun.
Etiketlərdən necə istifadə etməyi öyrənmək niyə vacibdir?
Yandex və Google axtarış motorlarına həssasdır HTML tərtibatı sənədlərin etibarlılığının yoxlanılması. Onlar xüsusi deskriptorlara daxil edilmiş açar sözləri və s. Ancaq bu bölmə bu barədə deyil. Bu, təşviqə (SEO) aiddir.
Bütün HTML etiketlərini necə öyrənmək olar?
Bəli, kifayət qədər etiketlər var. Amma onları xüsusi öyrətməyə ehtiyac yoxdur. Nə qədər ki, siz nəyisə yazmağa məşq edirsinizsə, qoşalaşmış və tək bütün deskriptorlar asanlıqla yadda qalacaq. Zamanla, əlbəttə.
tag ( PL. etiketlər, bəzən etiketlər) işarələmə yerinə yetirmək üçün istifadə olunan HTML dilinin elementidir mənbə mətn veb səhifələr. Teqlər bucaqlı mötərizədə yazılmış ingilis sözlərinin abreviaturaları və ya abbreviaturalarıdır, məsələn, tag
…
üçün abbreviatura İngilis sözüparaqraf, yəni bu teqdə olan mətn brauzerlər tərəfindən paraqraf kimi tanınacaq.
HTML-də hər bir teq xüsusi məna daşıyır və müəyyən məlumatların göstərilməsindən məsuldur. Teq adlarındakı hərflərin vəziyyətinin əhəmiyyəti yoxdur, məsələn, tag
…
və etiketləyin
…
- Eynidir. Yəni teqlər həm kiçik, həm də hərflərlə yazıla bilər böyük hərflərlə. Əvvəllər bütün teqləri böyük hərflərlə yazmaq adi bir təcrübə idi ki, teqlər adi mətndən fərqlənsin. İndi belə bir ehtiyac yoxdur, çünki bir çox redaktorda sintaksis vurğulanır. Etiket təsnifatı
HTML-də 90-dan çox teq var.Adətən, bir teq sənədin yalnız bir hissəsinə təsir edir, məsələn, birinci səviyyəli başlıq teq... Belə hallarda qoşalaşmış etiketlər istifadə olunur: açılış Və bağlanması. Açılış teqi (məsələn, ) effekti yaradır və bağlanma teqi ( ) effekti dayandırır. Nümunədən göründüyü kimi, bağlanma teqində həmişə bu simvol (/) - irəli slash işarəsi var. Bu etiketlər adlanır ikiqat artır.
Bəzi teqlər göründüyü yerdə birdəfəlik effekt verir. Məsələn, üfüqi çubuq etiketi və ya şəkil göstərmə etiketi . Belə teqlərin bağlanma teqləri yoxdur. Belə teqlər cütləşməmiş adlanır.
Etiket növləri
Bundan əlavə, etiketlər funksiyalarına görə fərqlənən bir neçə növə bölünür:
sənəd başlıq etiketləri;
blok elementləri;
daxili elementlər;
universal elementlər;
siyahılar;
masalar;
çərçivələr.
Bu bölmə ciddi deyil, ona görə də bəzi teqlər müxtəlif qruplardadır. Məsələn, siyahılar yaratmaq üçün etiketlər və
həm siyahılara, həm də blok elementlərinə tətbiq edilir. Etiket quruluşu
Brauzerə yükləndikdə, teqlər özləri göstərilmir, lakin onların məzmununun göstərilməsinə təsir göstərir. Teq səhv yazılıbsa, o, tamamilə nəzərə alınmır.
Bütün teqlər yazarkən əməl edilməli olan müəyyən bir quruluşa malikdir. Bundan əlavə, demək olar ki, bütün teqlər məzmunun göstərilmə tərzini dəyişə bilən müxtəlif atributlara malikdir.
Gəlin bir nəzər salaq düzgün quruluş atributları ehtiva edən etiketlər:
Nümunə olaraq iki tamamilə fərqli etiket verdim. Birinci tək - şəkillərin göstərilməsindən məsuldur, atribut - src="logo.jpg" . İkinci … qoşalaşmış linklər yaratmaq üçün cavabdehdir, atribut href = "site" dir.
Nəticə 1: Atributların qoşalaşmış və qoşalaşdırılmamış teqləri ola bilər.
Nəticə 2: Yalnız açılış teqlərinin atributları ola bilər, bağlanan teqlərin atributları yoxdur.
Aydınlıq üçün şəkil:
Şəkil 1. HTML teq strukturu
Diqqətlilik və HTML sintaksisi biliyi testi
Dərsdə baxdığımız sadə veb səhifə nümunəsinə baxaq.
HTML elementi HTML-də yazılmış veb səhifənin əsas struktur vahididir.
Elementin məzmunu açılış və bağlanma teqləri arasındakı hər şeydir. Məzmun mətn və/və ya digər HTML elementləri ola bilər.
Qeyd: Bağlama teqinə "/" işarəsi qoymağı unutmayın, o, brauzerə elementinizin bitdiyini və ondan sonra gələnin başqa element olduğunu bildirir. Əgər siz bağlanma teqinə "/" simvolunu qoymasanız, brauzer onu əvvəlki elementin içində yerləşdirilmiş yeni element kimi səhv salacaq və brauzer hələ də bağlanmadığını düşünür.
Tək teqlərdən ibarət HTML elementləri üçün sintaksis belədir:
Element yalnız açılış etiketindən ibarətdir.
Tək teqlərdən ibarət elementlər boş adlanır. HTML-də cəmi 16 tək teq var:
İç-içə Elementlər
Cütlənmiş teqlərdən ibarət HTML elementləri ya hər hansı digər elementləri ehtiva edə bilər, ya da özləri digər elementlər içərisində yuvalana bilər və elementlərin yuvalanma dərinliyi məhdud deyil.
Aşağıdakı nümunə ikisi iç-içə olan üç elementdən ibarətdir:
İlk abzasım
Bir element digərinin içərisinə yerləşdirildikdə, iç-içə elementin eyni elementdə başlayıb, bitdiyinə əmin olmalısınız. Beləliklə, məsələn, aşağıdakı kod səhvdir:
Bu çox
Maraqlıdır
Burada element elementin hüdudlarından kənara çıxır
Düzgün yerləşdirmə nümunəsi:
Çox maraqlıdır
Burada element düzgün şəkildə yerləşdirilib - o, tamamilə elementin daxilindədir
Boşluq simvolları
Brauzer HTML kodundakı boşluq simvollarına məhəl qoymur, beləliklə kodunuzu daha oxunaqlı etmək üçün onlardan öz xeyrinizə istifadə edə bilərsiniz. Boşluq simvollarına nişanlar, sətir fasilələri və müntəzəm boşluqlar daxildir; onlar istənilən miqdarda istifadə edilə bilər. Boşluqdan istifadə edən kod nümunəsi:
Başlıq Mənim ilk başlığım
İlk abzasım
Nümunə kodu ümumiyyətlə boşluqdan istifadə etmədən yazıla bilər, lakin belə kod daha az oxunaqlı olardı:
BaşlıqMənim ilk başlığım
İlk abzasım
HTML sənəd kodu zaman keçdikcə böyüdükcə və mürəkkəbləşdikcə siz boşluqdan istifadənin kodun oxunuşunu yaxşılaşdırdığını görəcəksiniz.
