Başlayanlar üçün HTML: Bu gün HTML kodunu öyrənin

Açıqlama: Dəstəyiniz saytın işini davam etdirməyə kömək edir! Bu səhifədə tövsiyə etdiyimiz bəzi xidmətlər üçün bir müraciət haqqı qazanırıq.


Kiçik biznes sahibindən sinif proyekti yaradan tələbəyə və ya bir blogda və ya fərdi layihədə onlayn işləyən təsadüfi şəxslərə qədər HTML bilikləri olduqca faydalıdır. Bir proqramlaşdırma dilini öyrənməyin perspektivi əlbəttə ki, çox cəlbedici görünsə də, yaxşı xəbər budur ki, HTML adi sözlərdən istifadə edir və beləliklə almaq kifayət qədər sadə olur.

Bu təlimatda mütləq başlanğıc üçün mükəmməl olan (inşallah) asan başa düşülən bir şəkildə əsasları əhatə edirik. Bununla belə, biz əsaslarla dayanmırıq – hətta təcrübəli təcrübə ustaları HTML haqqında iş biliklərinizi genişləndirmək üçün faydalı məsləhətlər tapacaqlar. Biz hətta XHTML, DHTML və HTML5-də ən yeni şeylərə dalacağıq.

Başlayanlar üçün HTML

Contents

HTML 1-4 qısa tarixi

HTML 1980-ci illərin sonu 1990-cı illərin əvvəllərində Tim Berners-Lee tərəfindən icad edilmişdir. İlk “açıq” buraxılış 1991-ci ildə edildi. SGML (Standart Ümumi Markup Dili) əvvəllər işarələnmə dilinə əsaslanır..

HTML’nin əsas yeniliyi, hiperlinkdən istifadəsi idi. Artıq buna öyrəşmişik, o zaman bu fikrin nə qədər inqilabi olduğunu başa düşmək çətindir.

İstiqamət, hər hansı bir sənədin başqa bir sənədə istinad etməsinə imkan verir və həmin sənədin dərhal əldə edilməsini təmin edir. Hiperlinklər, yalnız bir kitabxana və ya verilənlər bazası deyil, Ümumdünya İnternetini İnternet halına gətirən şeydir.

IETF HTML-ni standart olaraq qəbul etdi və ilk HTML təklifini 1993-cü ildə nəşr etdi. HTML 2.0, ilk tam rəsmi dəqiqləşdirmə 1995-ci ildə buraxıldı. 1997-ci ilə qədər W3C standartın idarəçiliyini öz üzərinə götürdü və HTML 3.2 buraxıldı..

HTML 4.0 1997-ci ilin sonuna doğru buraxıldı və növbəti il ​​bir neçə yeniləmə ilə yenidən başladı. Üç dəyişikliyi (sərt, keçid və çərçivə) ilə standartın bu versiyası növbəti ongünlüyün ən çox HTML-ni təyin etdi.

İnternetin ən çox xas xüsusiyyətlərinin artması zamanı qüvvədə olan versiya: Vikipediya, Google, Facebook, WordPress, Myspace, AOL. 2008-ci ildən əvvəl veb səhifələrin necə qurulacağını öyrənmisinizsə, demək olar ki, bu versiyanı öyrənmisiniz.

HTML 4.0 ilə yanaşı XHTML adlı bir layihə də var idi. Bu ilk olaraq HTML 4.0-in XML əsaslı tətbiqi olaraq 2000 və 2001-ci illərdə buraxılmışdır. XML HTML-dən daha sərt bir sintaksisə sahib olduğundan və XML analizatoru tərəfindən asanlıqla təsdiqlənə biləcəyi üçün XHTML tətbiqinin veb məzmun müəlliflərini daha dəqiq sənədlər yaratmağa məcbur edəcəyi düşünülürdü.

Çox hissəsi üçün bu baş vermədi. Təcrübədə, XHTML – HTML4’ün üç çeşidi və brauzer göstərilməsindəki vəhşi dəyişmə ilə birlikdə, “standart” olmayan HTML ilə ümumi qarışıqlığa səbəb oldu..

XHTML’in diqqətəlayiq bir təsiri, boş etiketləri arxa cığırla “bağlamaq” lazım olduğuna dair fikirdir. Yazmaq vərdişiniz varsa
əvəzinə sadəcə
, XHTML-ə təşəkkür edə bilərsiniz – bütün etiketlərin bağlanmalı olduğu bir XML sintaksis tələbi idi.

Ümumi HTML

Ümumi HTML

Aşağıda oxumağa başlayın və ya müəyyən bir mövzuya keçmək üçün sağdakı naviqasiyadan istifadə edin.

HTML əsasları

Bu bölmə HTML, veb səhifələrin müəllifi üçün istifadə olunan dili ilə tanış edir və tarixi və istifadə səbəbi ilə bağlı bir az məlumat verir.

HTML nədir?

HTML, sənədlər və veb səhifələr yaratmaq üçün bir format olan Hypertext Markup Dilidir. Əvvəlcə 1990-cı illərin əvvəllərində Tim Berners-Lee tərəfindən icad edilmiş və SGML (Standart Ümumiləşdirilmiş Markup Dili) adlanan daha əvvəl işarələnmə dilinə söykənmiş, bu da IBM-də hazırlanmış GML (Ümumiləşdirilmiş Markup Dil) adlı daha əvvəlki formata əsaslanır. 1960-cı illər.

HTML əsasən insan mənalı mətni əhatə edən bucaqlı mötərizəli yazıların uyğun cütlərindən ibarətdir. Etiketlər, əhatə etdikləri mətnə ​​məna, kontekst və görüntülü məlumat verir.

İşarələmə dili nədir?

Heç oxumadığınız hər hansı bir mətn əsaslı bir sənəd düşünün: veb sayt, bir kitab, bir PDF, bir Word sənəd, kilsə bülleteni. Əlbəttə ki, mətn var – ancaq başqa bir şeyi ifadə edir: mətn necə göstərilir. Sözlərin bəziləri daha böyük və ya kiçikdir, bəziləri itiv və ya qalın rəngdədir, bəziləri fərqli rəng və ya fərqli bir şriftdir.

Bu sənədlərdən birində saxlanılan faylda həm insan oxuya bilən mətn, həm də ekran haqqında məlumat olmalıdır. Bunu həyata keçirməyin bir sıra müxtəlif üsulları sınanmışdır və bunun ən əlverişli yolu məlumatı mətnin özünə uyğun saxlamaqdır.

Buna görə, məsələn, bir mətnin qalın və ya itiv etmək istəsəniz, belə bir şey edə bilərsiniz:

Bu sözləri qalın [son qalın] və [ital başlamalı] etmək istərdim.

Hansı ki, nəzəri olaraq bir şey istehsal etməlidir:

Etmək istəyirəm bu sözlər qalın və bu digər sözlər də kursivdir.

Bu uyğun olmayan cüt üslub bəyannamələrinə etiketlər deyilir və buna bənzər bir şey demək olar ki, hər işarə dilinin əsasını təşkil edir. Yuxarıda göstərilən bu format HTML deyil, sadəcə bir az düzəldilmiş nümunədir.

Yuxarıdakı nümunə bununla bağlı bir çox problemə sahibdir və HTML (və SGML və GML) ixtiraçıları oxşar bir şey hazırladılar, lakin daha yaxşı:

  • Kvadrat mötərizələr tez-tez mətndə istifadə olunur, buna görə etiketlərdə istifadə üçün ehtiyat etmək problem yarada bilər. Bunun əvəzinə HTML bucaq mötərizələrindən istifadə edir: < və >.
  • Başlanğıc və sona yazmaq çox yorucu. HTML etiket adının özünü “başlanğıc” bəyannaməsi kimi istifadə edərək bunu asanlaşdırır. Qarşısında bir kəsikli etiket adı (/) bitən etiket kimi istifadə olunur.
  • “Qalın” və “kursiv” sözlərindən daha çox, HTML yazmağı daha sürətli etmək üçün oxumaq üçün daha az və oxumaqdan çəkindirmək üçün ixtisarlar istifadə edir..

Beləliklə, bunları nəzərə alaraq yuxarıdakı nümunə aşağıdakı kimi görünür:

Etmək istəyirəm bu sözlər qalınbu digər sözlər kursivdir.

Etmək istəyirəm bu sözlər qalın və bu digər sözlər də kursivdir.

Son zamanlarda, tipografik detalları açıq şəkildə açıqlamaqdan uzaqlaşma var (kimi) cəsur və kursiv) və əvəzinə işarədən istifadə edərək yalnız görünüşü deyil, mənasını çatdırmaq lazımdır. Buna görə də etiketlər artıq istifadə üçün tövsiyə edilmir. Bunun əvəzinə üstünlük verilən etiketlərdir və (vurğu). Beləliklə, müasir sənədlərdə yuxarıdakı cümlə belə ola bilər:

Etmək istəyirəm bu sözlər fərqlidir və bu sözləri vurğulamaq.

Etmək istəyirəm bu sözlər fərqlidir və bu sözləri vurğulamaq.

HTML əsas işarələnmə etiketləri toplusundan daha mürəkkəb bir şey deyil.

Hipertekst nədir?

Hipertekst 1960-cı illərdə oxucunun sənəddəki və ya başqa bir sənədə başqa yerlərə atlanmasına imkan verən əlaqələri ehtiva edən sənədləri təsvir etmək üçün icad edilmiş bir sözdür. Müasir internetdə indi qəbul etdiyimiz bu bağlantılar, kompüterlər ilk yetkinliyə girəndə çox şey idi.

Daxili və xarici əlaqələrin “hiper” konsepsiyası, İnternetdə məzmunun təşkili baxımından bir o qədər inqilabi olmuşdur ki, söz bir çox yerdə özünü göstərir:

  • HTML “HyperText işarələmə dili” dir
  • http: // “HyperText Transfer Protokolu” deməkdir
  • Bir səhifədən digərinə bir keçid “hiperlink” adlanır və bir keçidin göstərildiyi yeri göstərən atribut “hiper istinad” adlanır.

HTML harada və necə istifadə olunur?

HTML demək olar ki, bütün veb səhifələr üçün istifadə olunur. Hal hazırda oxuduğunuz veb səhifə HTML istifadə edir. Veb saytların standart dilidir.

Elektron kitablar kimi digər sənəd növləri üçün də istifadə edilə bilər.

HTML sənədləri bir veb brauzer (bu səhifəni oxumaq üçün istifadə etdiyiniz tətbiq) tərəfindən göstərilir. HTML görüntüləmə bütün etiketləri gizlədir və məzmunun qalan hissəsinin görüntüsünü həmin etiketlərin necə göründüyünə əsaslanaraq dəyişir.

Veb saytımı işlətmək üçün HTML öyrənməliyəmmi??

Bir veb geliştiricisi olmağı və sıfırdan səhifələr qurmağı planlaşdırmırsınızsa, HTML-nin bütün mürəkkəb detallarını bilməyinizə ehtiyac yoxdur.

Yalnız bir blog platforması, sayt qurucusu və ya başqası tərəfindən qurulmuş Məzmun İdarəetmə Sistemini (CMS) istifadə edirsinizsə, heç bir HTML bilmədən əldə edə bilərsiniz – məzmun əlavə edən “qrafik” redaktorlar var Microsoft Word və ya e-poçtda yazmağa bənzər bir bloqa.

Ancaq bəzən o qrafik redaktorlar tam şəkildə düzgün işləmirlər, bəzən bir şey etmək istəyəcəksiniz və niyə belə etdiyinizi başa düşməyəcəksiniz. Buna görə də veb üçün yazmaq istəsəniz, hətta adi müntəzəm blog yazıları və elanların əsas HTML anlayışlarını yaxşı başa düşməyiniz tövsiyə olunur..

Bundan əlavə, HTML sənədlərinin necə qurulduğuna dair məlumatlar var ki, bu da Search Engine Optimization (SEO) və məlumat toplama kimi şeylərə təsir göstərir. Veb saytınızın insan olmayan ziyarətçilərə necə görünməsi barədə məlumatlı olmağınız istəyirsinizsə, HTML’i anlamaq vacib bir bacarıqdır.

Eynilə, veb saytın əlçatanlığı – bir veb saytın vizual və ya digər əlil insanlar tərəfindən uğurla idarə edilməsi imkanı – getdikcə daha vacib bir məqamdır. Korlar veb saytları səsə çevirmək üçün kompüterli ekran oxuyanlara güvənirlər və əsas HTML sənədinin keyfiyyəti və quruluşu ekran oxuyucusunun düzgün işləmə qabiliyyətinə böyük təsir göstərir..

Əsasən, HTML müasir internetin ümumi əsas dilidir. Dünyanın necə işlədiyini başa düşmək istəyirsinizsə, heç olmasa HTML ilə bir az tanış olmağınız yaxşı bir fikirdir.

HTML-də alt xətt

HTML – Hipertext İşarələmə Dili – veb səhifələrin və digər veb əsaslı sənədlərin yaradılması üçün istifadə olunan dildir. Əsasən insan mənalı mətnin bölmələrini əhatə edən bucaqlı mötərizəli yazıların uyğun cütlərindən ibarətdir. Veb brauzerləri tərəfindən göstərilməyən etiketlər, mətnin və səhifənin necə göstəriləcəyi barədə məlumat vermək üçün istifadə olunur.

HTML elementləri və yazıları

Bu bölmə HTML-nin əsas quruluş blokları olan etiketlərə yaxından nəzər salır. Bu, necə işlədiyini, normal işlədikləri bəzi istisnaları və etiket atributları haqqında qısa bir müzakirəni əhatə edir.

Etiketlərin quruluşu

Ümumiyyətlə, uyğun teq cütləri təsir etdikləri mətn hissəsini əhatə edir. İki uyğun cüt etiket, əlavə etdikləri məzmunla birlikdə “element” adlanır.

Bu element başlayır və bitir "güclü" etiket.

Açıq etiketdə etiketin məzmunu və necə göstəriləcəyi haqqında daha çox məlumat verən əlavə xüsusiyyətlər ola bilər. Bu atributlar bərabər (=) işarəsi ilə ayrılmış, kotirovka şəklində yerləşdirilən ad-dəyər cütü kimi yazılmışdır.

href ="http://example.com">Bu bir əlaqədir. Etiket birdir "a" üçün "çapa," və href (hiper istinad) atributu keçidin harada işarə etdiyini göstərir.

Uyğun cütlüklərdə bir neçə etiket meydana gəlmir, çünki mətni təsvir etmək əvəzinə bir şey daxil etmək üçün istifadə olunur. Bunlara “boş” və ya “boş” etiketlər deyilir və ən çox yayılanlar şəkil daxil etmək üçün istifadə olunanlardır. Src atributu görüntünün URL-sini təyin etmək üçün istifadə olunur.

src ="şəkillər / html-yeni başlayanlar-öyrənmək üçün-kodu-html-today.png" />

Diqqət yetirin, bağlama etiketi yoxdur və buna görə də əlavə mətn yoxdur. Son bucaq mötərizəsindən dərhal əvvəl boşluq (/> ) etiketi “özünə bağlamaq” üçün istifadə olunur. Bu, mütləq tələb olunmur, amma yaxşı bir xatırlatmadır ki, aşağıdakılar əlavə olunmayacaqdır. (XHTML-də tələb olunur, bu məqalədə daha sonra müzakirə ediləcək.)

Bir neçə başqa boş etiket var. İki kifayət qədər irəli və ümumi.

  • bir xətt-break daxil edir.
  • üfüqi bir qayda (xətt) ayırıcı qoyur.

Digərləri vizual bir şey daxil etmir, ancaq səhifənin özü haqqında məlumat vermək üçün istifadə olunur.

rel ="üslub cədvəli" növü ="mətn / css" href ="tema.css" />

adı ="təsviri" məzmun ="Bu səhifənin adı." />

Bundan əlavə, etiket (səhifəyə Javascript əlavə etmək üçün istifadə olunur) boş ola bilər, ancaq bu olmalı deyil.

(, Və etiketlər haqqında daha çox məlumat bu təlimatda daha sonra veriləcəkdir.)

Block səviyyəli vs daxili

Sənədin özü haqqında məlumat verən etiketlər istisna olmaqla, HTML etiketləri iki kateqoriyaya bölünür, blok və inline.

Blok elementləri

Blok elementləri düzbucaqlı tərkib hissələrini təmsil edir. Onlardan əvvəl və sonra nəzərdə tutulan bir xətt ara verilmişdir. Blok elementlərinə paraqraflar kimi bölmə məzmunu daxildir (

), bölmələr () və başlıqlar (

,

, və s.).

Çox blok səviyyəli etiketləri məzmunlarının üstündən və altından ayrı xəttlərdə yazmaq standart bir təcrübədir:

Bu bir div.

Ancaq bu, həmişə başlıqlarla birlikdə həmişə edilmir:

Bu səhifənin başlığıdır

Bu əsas hissədir

Bir abzasdakı bəzi məzmun.

Blok səviyyəli elementlər iç-içə edilə bilər, lakin bəzi blok səviyyəli elementlərdə digər blok səviyyəli elementlər ola bilməz:

Bir məqalənin adı

Məqalənin birinci abzası.

Paraqraflar və başlıqlarda digər blok səviyyəli elementlər ola bilməz.

Inline elementlər

Inline elementlər mətn daxilində istifadə olunan elementlərdir. Qalın ( ), kursiv () və bağlantılar () hamısı daxili elementlərdir.

Inline elementlərə bəzən “span səviyyəli” elementlər deyilir. Ümumi bir span səviyyəli bir element də var, sadəcə bir span () adlanır. Bu, öz-özünə bütöv bir şey etmir, ancaq elementlərdən istifadə etməklə mətn ekranının xüsusi növlərini yaratmaq üçün istifadə edilə bilər.

sinif ="xüsusi mətn">Bu mətn xüsusi.

(Sinifin necə ediləcəyi haqqında məlumat üçün CSS bölməsinə baxın)"xüsusi mətn" xüsusi formatda göstərin.)

Bəzi mənası yoxdur

Şəkillər ( ) blok səviyyəli elementlər kimi hiss edin – düzbucaqlıdır, müəyyən ölçülərə malikdirlər və ümumiyyətlə mətn axınının xaricində göstərilir.

Lakin onlar həqiqətən inline elementlərdir. Bunun səbəbi, əsasən, veb dizaynın az inkişaf etmiş bir dövrünün tutulmasıdır, lakin indi bununla əlaqədardır. Bunun qəribə təsirlərini asanlıqla qarşısını almaq olar, ancaq bunu bilmək yaxşıdır. (Şəkillərdəki bölməyə və CSS-də olan bölməyə baxın.)

Bu kimi digər qəribə məsələlər var və gəldikdə daha sonra bu təlimatda yer alacaqlar.

Atributlar haqqında daha çox

Demək olar ki, hər element etiketi atributları daxil edə bilər. Bir çox elementin dəstəklədikləri müəyyən xüsusiyyətlərə malikdir (kimi) və src = atribut), lakin qlobal miqyasda bütün element növləri tərəfindən dəstəklənən bir neçə element var.

İki vacib atribut növləri sinif və iddir.

href ="http://example.com" sinif ="nümunə-link" id ="link27">Bu lövbər etiketinin üç atributu var.

Sinif atributları

Sinif atributları, bir və ya bir neçə elementi müəyyən bir “sinif” və ya qrupa aid etmək üçün istifadə olunur – bunları eyni şəkildə göstərmək üçün istifadə edilə bilər.

Məsələn, tənzimlənməmiş bir siyahıdan istifadə etmək çox yayılmışdır (

    ) bir menyu olaraq və siyahı elementini etmək üçün (
  • ) cari səhifəyə işarə edənlər eyni siyahıdakı bütün digər bağlantılardan fərqli görünür.

    sinif ="menyusu">
    sinif ="menyu maddəsi">
    href ="/ev">Ev

  • sinif ="cari-maddə">
    href ="/ haqqında">Haqqında

    sinif ="menyu maddəsi">
    href ="/ əlaqə">Əlaqə

Bir element birdən çox sinifə sahib ola bilər. Birdən çox siniflər sinif elementinin içərisindəki boşluqlarla ayrılır.

sinif ="ilk damla qapağı">
Bu birinci abzasdır və eyni zamanda açılan qapaq sinifinin bir hissəsidir.

Dərslər boşluq ilə ayrıldığı üçün siniflərdə adlarında boşluq ola bilməz.

CSS, JavaScript və digər dillərdə bir element sinfi addan əvvəl nöqtə ilə qeyd olunur.

/ * CSS * /

.ilk {
rəng: yaşıl;
}

Yuxarıda göstərilən CSS kodu, ilk sinfi olan hər hansı bir element içərisində mətn rəngi yaşıl rəngdə göstərilmək deməkdir.

ID atributu

ID atributu Class atributuna bənzər şəkildə işləyir, lakin konseptual olaraq fərqlidir. Bir qrupdakı elementlərin üzvlüyünə işarə etmək əvəzinə, o elementi özünəməxsus şəkildə müəyyənləşdirir. Bu səbəbdən hər hansı bir səhifədə hər hansı bir şəxsiyyət identifikasiyası olan yalnız bir element ola bilər.

id ="səhifə başlığı">Bu səhifənin başlığıdır

Şəxsiyyət sənədləri ekrana təsir göstərmək üçün daha az istifadə olunur və daha çox funksional məqsədlər üçün istifadə olunur.

Şəxsiyyət sənədləri bir sənədin daxili bağlantısı üçün istifadə edilə bilər, məsələn, vikipediya məqaləsindəki məzmun cədvəli.

  1. href ="#intro">Giriş
  2. href ="# tarix_fəaliyyət_topik">Mövzu tarixi

id ="intro" sinif ="bölmə başlığı">Giriş

Giriş hissəsinin mətni.

id ="tarix_of_topik" sinif ="bölmə başlığı">

Bu mövzuda bəzi tarix.

Diqqət yetirin ki, bölmələrə bağlantılar hash və ya funt işarəsi ilə (#) əvvəlcədən yazılmış etiketin adını daxil edir. Bu elementin idinə istinad etmək üçün standart bir yoldur:

/ * CSS * /

#intro {
şrift ölçüsü: 14px;
}

Digər atributlar

Hər HTML etiketində xüsusi təyinatlı xüsusiyyətləri olan öz əlamətləri var. Məsələn, bir keçid nöqtəsini təyin edən etiket, href (hiper-istinad) atributunu ehtiva edir, bu URL-yə bağlandığını göstərir.

Sonrakı hissələrdə hər etiketə ayrıca baxdığımız üçün bu atributlar daha ətraflı şəkildə əhatə olunacaqdır.

Bir sıra “qlobal” atributlar da var – hər hansı bir elementin sahib ola biləcəyi atributlar. Bunlar daha sonra daha ətraflı şəkildə əhatə olunacaq, çünki istifadəsi daha aktuallaşır.

Şərh etiketlər

Əsas HTML etiketlərində örtüləcək son nöqtə şərhdir. Şərhlər bir bucaq mötərizəsi, sonra bir nida nöqtəsi və iki tire ilə başlayır. İki tire və bağlama bucağı olan mötərizə ilə bitir.

Şərhlər çox xəttli ola bilər.

Nə vaxt istifadə ediləcək

The

etiket axtarış motorları tərəfindən səhifədəki ən vacib başlıq hesab olunur və səhifənin nə ilə əlaqəli olduğuna dair bir cavab axtarın. Buna görə, mümkün olduqda etiketin içindəki məzmuna uyğun olmalıdır və bunlar yalnız bir olmalıdır

hər hansı bir səhifədəki element.

Əsas səhifənizdə və blogunuzun səhifəsində saytınızın adını bu yerə qoymaq yaxşıdır

etiket və daxili bir blog indeksindəki məqalələrin başlıqlarını

etiketlər.

Ancaq tək məqaləli səhifədə yazının və ya məqalənin adı içəridə olmalıdır

etiket, bir veb saytın adı ilə

və ya hətta

etiket.

Eynilə bir kateqoriya əsaslı və ya etiket əsaslı bir arxiv səhifəsində kateqoriya və ya etiket adını birinin içərisinə qoymaq yaxşı olar

etiket.
İyerarxik təşkilat

SEO üçün (yüngülcə) yaxşıdır və oxucular üçün məqalələri məntiqi hissələrə ayırmaq və məqalənin məzmunundakı müvafiq başlıq yazılarından istifadə etmək çox yaxşıdır. Başlıq etiketləri iyerarxik bir şəkildə istifadə edilməlidir – əgər

aşağıdakı bir

etiket, tabe bir bölüm üçün başlıq olmalıdır.

Altyazılar

Subtitr ilə başlıq olmalıdır deyil iki fərqli mövzu etiketi istifadə edildi:

Bunun əvəzinə, bütün başlığı və alt yazıları bir başlıq etiketinə qoyun və əlaqəni təyin etmək üçün başqa bir etiket istifadə edin:

Bu maddənin əsas adı:
Eyni məqalənin alt mövzusu

Bu maddənin əsas adı: sinif ="altyazı">Eyni məqalənin alt mövzusu

Widgets mövzusunda başlıqlar

Yan panel bölmələrinə və ya vidjetlərə başlıqlar lazımdır, lakin bunlar ümumiyyətlə məzmun (SEO) baxımından uyğun deyildir. Ən çox məlumatlı dizaynerlər istifadə edirlər

bu məqsəd üçün etiketlər, rezervasiya

,

, və

sözlə əlaqəli məzmun üçün.
 

Son ismarıclar

  • href ="#">Yazının adı
  • href ="#">Yazının adı
  • href ="#">Yazının adı

Arxiv

  • href ="#">İyun 2015
  • href ="#">May 2015
  • href ="#">Aprel 2015

Ancaq müntəzəm olaraq istifadə etdiyiniz səhifə məzmununda bu qədər alt bölmə varsa

ana mətninizdəki başlıqlar, istifadə etməyinizdə heç bir pis bir şey yoxdur
və ya hətta
yan çubuğunuz başlıqlarda.
Bağlantı hədəfləri kimi başlıqlar

Xüsusilə uzun bir sənəddə, yalnız səhifəyə bütövlükdə deyil, müəyyən bir hissəyə bağlantı etmək üçün yaxşı bir fikir ola bilər..

Keçmişdə yalnız lövbər etiketləri ( ) bir keçidin hədəfi olaraq istifadə edilə bilər, ancaq bu artıq deyil – hər hansı bir element səhifə yeri müəyyən bir linkin hədəfinə çevrilə bilər.

Bu cür bağlantılar üçün təbii namizəd başlıq yazılarıdır, çünki bölmələrin başlanğıcını təyin etmək üçün istifadə olunur.

Bu işi düzəltmək üçün lazım olanların hamısı özünəməxsus əlavə etməkdir id başlıq elementinə aiddir. Bu hissəyə bağlantılar sadəcə hash işarəsi ilə əlavə edilmiş səhifənin URL-ləridir ( # ) və şəxsiyyət vəsiqəsi.




 id ="bəzi başlıq">Bəzi başlıqlar səhifənin yarısında
href ="http://example.com/page#some-headline">Buraya getmək üçün buraya vurun.
  • Pisdir.
  • Bu səhfdir.
  • Dəstək deyil.
  • Sifariş siyahısı

    Sifarişli siyahılar nömrələnən və ya hərflə yazılmış siyahılardır. Xarici elementdir

      , və
    1. etiket hər bir maddə üçün yenidən istifadə olunur.

      1. Alt paltarları yığın.
      2. ???
      3. Mənfəət.
      1. Alt paltarları yığın.
      2. ???
      3. Mənfəət.

      The

        element siyahının necə nömrələndiyini dəyişdirən bir neçə atributu dəstəkləyir.

        Tip atributu, standart ərəb rəqəmlərini (1, 2, 3) hərflərə və ya Roma rəqəmlərinə (baş hərflər və ya kiçik hərflər) dəyişdirmək üçün istifadə edilə bilər.

        növü ="i">
      1. Kiçik hərflərlə 1 rəqəmi.
      2. 2 kiçik hərflə yazılmış rəqəm.
      3. 3 kiçik hərflə yazılmış Roma rəqəmi.
      1. Kiçik hərflərlə 1 rəqəmi.
      2. 2 kiçik hərflə yazılmış rəqəm.
      3. 3 kiçik hərflə yazılmış Roma rəqəmi.

      Tip üçün seçimlər bunlardır:

      • 1 - ərəb rəqəmləri (1, 2, 3) - Bu standartdır.
      • A - Baş hərflər (A, B, C)
      • a - kiçik hərflər (a, b, c)
      • I - Baş Roma rəqəmləri (I, II, III)
      • i - kiçik hərflərlə yazılmış Roma rəqəmləri (i, ii, iii)

      Başlanğıc atributu siyahıdan 1-dən başqa bir nömrəyə başlamaq üçün istifadə edilə bilər. Bu nömrələr və ya digər növlər üçün istifadə edilə bilər.

      başlanğıc ="10">
    2. Şokolad
    3. Vanil
    4. Motor Yağı
    növü ="Mən" başlanğıc ="8">
  • Telesfor
  • Hyginus
  • Pius
  • Aniket
    1. Şokolad
    2. Vanil
    3. Motor Yağı
    1. Telesfor
    2. Hyginus
    3. Pius
    4. Aniket

    Nəhayət tərs atributu siyahı maddələrini tərs qaydada nömrələmək üçün istifadə etmək olar. Bu digər atributların (ya da hər ikisinin) hər biri ilə birləşdirilə bilər.

    Başlanğıc qapısından kənarda!

    başlanğıc ="-3">
  • Gözləyin.
  • Gözləyin.
  • Gözləyin.
  • GET!
  • Ən yaxşı on səbəb

    başlanğıc ="10" tərsinə>
  • Çünki.
  • Buna görə də.
  • QED
  • və s.
  • Başlanğıc qapısından kənarda!

    1. Gözləyin.
    2. Gözləyin.
    3. Gözləyin.
    4. GET!

    Ən yaxşı on səbəb

    1. Çünki.
    2. Buna görə də.
    3. QED
    4. və s.

    Bu iki nümunəyə diqqət yetirəcək şeylər:

    1. Başlanğıc atributu mənfi ola bilər.
    2. Siyahı ləğv olunsa da başlanğıc dəyəri əvvəlcə siyahı üçün nömrə.
    3. Ters çevrilmiş atribut bir dəyəri göstərməyə ehtiyac duymur. Çünki bunun yalnız iki mümkün dəyəri var: həqiqi (indiki) və ya yalan (mövcud deyil).
    4. Bir ilk onluq (və ya oxşar geri sayma) siyahısında 1 ilə başa çatdıqda başlanğıc atributu göstərməyə ehtiyac yoxdur, hər zaman başqa bir göstərilmədiyi təqdirdə tərs siyahıdakı sonuncu olacaqdır. Yuxarıdakı misalda on şey olmur, buna görə dəqiqləşdirmək lazım idi.
    5. Varsayılan davranış, hər bir sonrakı siyahı maddəsinin sayını artırmaqdır. Buna görə mənfi bir nömrədən "geri saymaq" istəsəniz, etməlisiniz deyil tərs atributu daxil edin.
    Təsvir / Tərif siyahıları

    Təsvir siyahıları (və ya "tərif" siyahıları, daha uyğun deyildikləri üçün) sifariş edilmiş və tənzimlənməmiş siyahılardan bir az fərqlidir. Bunlar terminlərin siyahısını, izahlı bir lüğətdə olduğu kimi təmin etmək üçün istifadə olunur.

    Bütün siyahı etiketlə sarılır. Siyahıdakı hər bir termin etiket ilə qeyd olunur ("tərif termini") və hər bir termin bir və ya daha çox elementlə izlənir ("tərifin təsviri").

    Siyahı növləri

    Sifariş siyahısı Əşyaların bir nömrəli siyahısı. Sıralanmayan siyahı Güllələnmiş əşyaların siyahısı. Tərif siyahısı Əlaqəli təriflərlə terminlərin siyahısı. Hər bir terminin bir və ya daha çox tərifi var.

    Siyahı növləri

    Sifariş siyahısı Əşyaların bir nömrəli siyahısı. Sıralanmayan siyahı Güllələnmiş əşyaların siyahısı. Tərif siyahısı Əlaqəli təriflərlə terminlərin siyahısı. Hər bir terminin bir və ya daha çox tərifi var.

    Təsvir siyahısı üçün açıq istifadə bir lüğət və ya bir lüğətdir, lakin bu yalnız standart istifadə deyildir.

    Adların siyahısı: təsvirdə əlaqə məlumatları ilə. Audio track adlarının siyahısı: təsvirdə ətraflı track məlumatı ilə. Məhsul təkliflərinin siyahısı: təsvirdəki məhsullar haqqında məlumat. Statistikaların siyahısı: müddəti olan stat adı və təsvirdəki stat dəyəri olan

    Hər zaman daha ətraflı məlumat tələb edən maddələrin siyahısı var, təsvir siyahısı yaxşı bir fikirdir.

    Tərif siyahıları, əvvəlcədən başa düşdüyünüzdən daha güclüdür, çünki etiket - təsvir - hər hansı digər elementləri saxlaya bilər: paraqraflar, şəkillər, digər siyahılar. Bu o deməkdir ki, hər birində hər hansı bir əlavə təfərrüata ehtiyacı olan ayrı-ayrı əşyalar olduqda təsvir siyahısının çox məzmunlu işarələmə sxemi ola bilər..

    Təsvir siyahıları üçün bir-birindən kənar istifadə də var, bu da bir qədər mübahisəlidir. Bu HTML4 spesifikasiyasında bir nümunə kimi daxil edildi, lakin HTML5 üçün silindi: skript kimi dialoq.

    Oxucu Ən sevdiyiniz HTML varlığı nədir? Müəllif Xahiş etməli olduğunuz əyləncəli! Bu təsvir siyahısı. Oxucu Həqiqətən? Bu qədər böyük nə var? Müəllif Çox qəribə bir çevikdir.

    Bu pis görünür

    1. Birincisi
    2. İkinci maddə
      1. A alt maddəsi.
      2. B alt maddəsi.
        1. I yarımbəndi.
        2. İi alt yarımbənd.
        3. İii alt yarımbənd.
      3. C alt maddəsi.
    3. Üçüncü bənd

    Bunu necə etməlisiniz

    1. Birincisi
    2. İkinci maddə
      1. A alt maddəsi.
      2. B alt maddəsi.
        1. I yarımbəndi.
        2. İi alt yarımbənd.
          1. Hiyerarxiyada yola davam edin.
          2. Hər kəsin bu çox siyahı səviyyəsinə ehtiyacı varmı??
            1. Bu gülməli alınır.
        3. İii alt yarımbənd.
      3. C alt maddəsi.
    3. Üçüncü bənd

    Daxil edilmiş siyahılar siyahı növlərini qarışdıra bilər.

    Bu sifarişli bir siyahı:
    1. Tortlar.
    2. Pies.
    3. Tort yalandır.
    Bu tənzimlənməmiş bir siyahıdır, siyahı növlərini sadalayırıq:
    • Sifarişli siyahılar
    • Sıralanmamış siyahılar
    • Təsvir siyahıları
    Bu, bu təsvir siyahısının içərisindəki sifariş edilmiş bir siyahının içərisinə yerləşdirilmiş nizamsız bir siyahıdır:
    1. Birinci maddə.
    2. İkinci maddə.
    3. İçəri siyahı olan üçüncü maddə.
      • Bıçaq
      • Çəngəl
      • Qaşıq
      • Qığılcım
      • Chopsticks
    4. Bu dördüncü bənd yalnız iç içə siyahıları daha yaxşı çərçivəyə salmaq üçün burada.
    Bu sifarişli bir siyahı:
    1. Tortlar.
    2. Pies.
    3. Tort yalandır.
    Bu tənzimlənməmiş bir siyahıdır, siyahı növlərini sadalayırıq:
    • Sifarişli siyahılar
    • Sıralanmamış siyahılar
    • Təsvir siyahıları
    Bu, bu təsvir siyahısının içərisindəki sifariş edilmiş bir siyahının içərisinə yerləşdirilmiş nizamsız bir siyahıdır:
    1. Birinci maddə.
    2. İkinci maddə.
    3. İçəri siyahı olan üçüncü maddə.
      • Bıçaq
      • Çəngəl
      • Qaşıq
      • Qığılcım
      • Chopsticks
    4. Bu dördüncü bənd yalnız iç içə siyahıları daha yaxşı çərçivəyə salmaq üçün burada.

    Qeyd etmək lazımdır ki, siyahılar paraqraf elementlərinin içərisinə yerləşdirilə bilməz (

    ). Bütün siyahılar blok səviyyəli elementlər olduğundan və paraqraflar (bloklar da daxil olmaqla) yalnız span səviyyəli elementləri əhatə edə bilər.

    Bu, bəzən əsəbi ola bilər, çünki normal yazılı mətndə bir abzasın içərisində siyahının daxil edilməsini istəmək üçün bəzən mükəmməl yaxşı səbəblər var. Ancaq sadəcə işləmir.

    Qiymətləndirmələri və inline sitatları bloklayın

    Birisinə və ya bir şeyə sitat gətirirsinizsə, iki HTML sitat elementindən birini istifadə edin.

    Blockquotes

    Blokquot daha çox yaygındır. Bunun səbəbi normal mətbəə konvensiyasıdır:

    • bloknotlar (çox sətirli kotirovkalar və ya çıxarışlar) xüsusi bir şəkildə göstərilir (adətən girişli və bəzən itivləşdirilmiş),
    • inline sitatlar sadəcə yumruqla qeyd olunur.
    Olmaq və ya olmamaq, sual budur.

    Olmaq və ya olmamaq, sual budur.

    Blockquotes, materialın ədəbi bir əsərdən, mahnıdan, başqa bir blog yazıından və ya cavab verdiyiniz bir e-poçt mesajından bir çıxarış olub-olmamasından asılı olmayaraq, sitat gətirilən materialın böyük blokları üçün istifadə edilə bilər..

    Sitat mənbəyini göstərmək istəyirsinizsə, bunun iki yolu var. Elementə bir cite atributu verilə bilər və ya qaynaq başlığını əhatə edən etiket ilə bir xətt əlavə edilə bilər. Hər ikisini də edə bilərsiniz.

    sitat ="http://www.gutenberg.org/ebooks/2265"> Olmaq və ya olmamaq, sual budur.
    - Hamlet, Uilyam Şekspir

    Olmaq və ya olmamaq, sual budur.
    - Hamlet, Uilyam Şekspir

    Qeyd etmək lazımdır ki, etiketdə sitat gətirilən orijinal əsərin adı daxil edilməli və müəllifin adı və digər məlumatlar (səhifə nömrəsi və ya akt və səhnə nömrəsi kimi) ola bilər..

    Sitatın sonundakı sitat, bir elementin içərisinə yerləşdirilibsə və sitatın özü mənbə materialı ilə əlaqəli olsa daha yaxşı müəyyən edilə bilər. Bunu etiket etiketindəki sitat atributunu lazımsız hala gətirərsiniz, buna görə də çıxarın. Nəhayət, bir paraqraf etiketi əlavə edin və tire (-) çıxarın ki, yalnız məlumat - və detalları göstərməsin -.

    sitat ="http://www.gutenberg.org/ebooks/2265">

    Olmaq və ya olmamaq, sual budur.

    href ="http://www.gutenberg.org/ebooks/2265">Hamlet, William Shakespeare

    Bir bloknotda sitatın özünü tanıtmaq və ya orijinal başlıq məlumatı sitat gətirmək üçün istifadə edilə bilən bir şey də ola bilər..

    Inline Sitat

    Daha az istifadə olunan sitat elementi inline sitatdır, .

    Hamletdəki ən sevdiyim xətt deyəndə = sitat gətir"http://www.gutenberg.org/ebooks/2265"> Olmaq və ya olmamaq, sual budur.

    Hamletdəki ən sevdiyim xətt, "Olma ya olmayım" dedikdə, sual budur.

    Bu tez-tez istifadə edilmir, çünki bir şeyə sitat gətirdiyinizi göstərmək üçün mükəmməl yaxşı bir yol var - tirnoq işarələrindən istifadə etməklə.

    Bununla birlikdə, sadə tirnoq əvəzinə etiketdən istifadə bir neçə üstünlükə malikdir.

    • Dırnaqarası nişanların görüntüsü CSS vasitəsilə dəyişdirilə bilər, bu da beynəlmiləlləşmə üçün faydalıdır, çünki bütün ölkələr kotirovkalar üçün eyni simvollardan istifadə etmir.
    • Mətnin başqa mənbədən sitat gətirməsi semantik olaraq aydındır, halbuki sitat işarələri başqa səbəblərdən istifadə edilə bilər:
      • ritorik "qorxudan sitatlar"
      • bir kəlmə və ya ifadəni qeyd etmək
      • mənbə mətni olmayan həqiqi bir söhbət haqqında məlumat verir
    • Sitatın orijinal mənbəyinə bağlanan sitat istinadını daxil etmək imkanı.

    İstiqamətlər

    HTML-də ən vacib etiketlərdən biri, bir keçidini təyin edən lövbər etiketi (). Sənədləri bağlantı şəbəkəsinə bağlamaq bacarığı vebin özüdür və "hipertekst" anlayışıdır.

    Bir səhifədəki bəzi xüsusi mətnə ​​əlaqəli URL-ləri bağlamaq üçün istifadə edildiyi üçün element "lövbər" adlanır. (Bu, mətnin müəyyən bir hissəsini deyil, bütün sənədi birləşdirən etiketdən fərqli olaraq.)

    Elementin içindəki mətn "lövbər mətni" adlanır və əlaqəli URL href atributunda göstərilib.

    href ="http://example.com">Bu example.com-a bağlantıdır Bu example.com-a bağlantıdır

    Href ilə yanaşı etiket bir neçə vacib xüsusiyyətlərə malikdir.

    • hədəf linki açmaq üçün hansı pəncərəni (və ya brauzer nişanını) göstərir. Varsayılan eyni pəncərədir. Yeni bir nişan dəsti açmaq istəyirsinizsə hədəf ="_boş".
    • başlıq bir linkin tooltip və ya hover-mətnini təyin edir. İstifadəçi lövbər mətni üzərində gəzdikdə bu kiçik bir popupda görünür. İstifadəçinin tıklamağa hazırlaşdığı şey haqqında bəzi əlavə məlumatlar vermək faydalıdır.
    • əlaqəli sənədlə mövcud sənəd arasındakı əlaqəyə dair rel. Bir neçə mümkün dəyərə malikdir:
      • alternativ - Bağlı sənəd cari sənədlə eyni məzmuna malikdir, lakin alternativ bir formatda. RSS yayımlarına bağlamaq üçün ən çox istifadə olunur.
      • müəllif - Əlaqəli sənəd, mövcud sənədin və ya məqalənin müəllifinin profil səhifəsidir.
      • əlfəcin - Sənədin müəyyən bir nöqtəsinə bir keçid (məsələn, səhifə səhifəsini hazırlayarkən).
      • kömək - Əlaqəli sənəd mövcud sənədə kömək sənədlərini təqdim edir.
      • lisenziya - Əlaqəli sənəd mövcud sənəd üçün lisenziyanın mətnidir.
      • sonrakı - Bağlı sənəd, səhifəli bir seriyanın növbəti hissəsidir. Bəzi brauzerlər istifadəçi nəhayət tıkladığı zaman göstərilməsini sürətləndirmək üçün əlaqəli sənədin məzmununu əvvəlcədən götürür..
      • nofollow - Bağlı sənəddir təsdiq edilmir mövcud sənədin müəllifi tərəfindən. Bağlı səhifəyə SEO fayda verməsinin qarşısını almaq üçün istifadə olunur. Şərh sistemləri bunu ümumiyyətlə istifadəçi tərəfindən daxil edilmiş bağlantılara standart olaraq əlavə edir.
      • noreferrer - Istifadəçi linki tıkladığı zaman HTTP sorğu başlığına istinad məlumatı göndərməsinin qarşısını almaq üçün istifadə olunur. Tipik olaraq, HTTP sorğusunda istifadəçinin haradan gəldiyini (indiki səhifə) göstərəcəkdir. Bu, brauzer müştərisinin bu məlumatı buraxmamasını tələb edir.
      • prefetch - Növbəti kimi, lakin faktiki ardıcıl əlaqəni nəzərdə tutmadan. Bu, brauzerdən istifadəçinin üzərinə tıklamadan əvvəl əlaqəli səhifənin məzmununu gətirməsini tələb edir, beləliklə növbəti səhifəyə naviqasiya dərhal görünür..
      • prev - Növbəti tərs, bu dəyər əlaqəli sənədin pagined seriyasındakı əvvəlki səhifə olduğunu göstərir. Bəzi brauzerlər məzmunu əvvəlcədən müəyyənləşdirə bilər.
      • axtarış - Əlaqəli səhifə cari sənəd və əlaqəli sənədləri axtarmaq üçün xüsusi bir interfeys təqdim edir.
      • etiket - Əlaqəli sənəd cari səhifənin mövzusuna dair məzmun təmin edir.

    Rel atributu, texniki olmayan veb sayt yaradıcıları tərəfindən istifadə edilmir və zəng motorları, semantik məlumatları axtarış motorları, aqreqatorlar və ekran oxuyucularının başa düşə biləcəyi şəkildə işarələməyə gətirmək üçün əla bir yoldur..

    Məsələn: Google rel = istifadə edir"müəllif" axtarış nəticələrində eyni müəllif tərəfindən digər məzmuna bağlantılar göstərmək üçün link (Google+ profilinə bağlıdırsa). - Google görüntü axtarışına lisenziya ilə axtarış etmək, yenidən istifadə üçün Creative Commons lisenziyalı məzmun tapmaq imkanı daxildir. Bu xüsusiyyət qismən rel = -dən asılıdır"lisenziyası" atribut Creative Commons və digər açıq lisenziyalara bağlantılarda istifadə olunur. Bir neçə axtarış motorları və xəbər toplama saytları lövbər mətnindən və rel = istinad səhifəsindən istifadə edirlər"etiket" verilmiş bir səhifənin mövzusunu müəyyənləşdirmək üçün link.

    Rel etiketi, mövcud HTML atributları daxilində əlavə semantik məlumatların daxil edilməsinin sadə yolları olan Microformatlarda da istifadə edilə bilər (adətən rel və sinif).

    Məsələn, XFN Microformat, əlaqəniz olan insanların ev və ya profil səhifələrinə bağlanarkən rel atributundan istifadə etməyi təklif edir.

    Gələn ay href = ilə bir konfransda bütün həftə sonu keçirəcəyəm"http://example.com/kami-profile" rel ="iş yoldaşı">Kami. Konfrans doğma şəhərimin yaxınlığındadır, buna görə href = ilə nahar edə biləcəyimə ümid edirəm"http://example.com/dave-profile" rel ="valideyn">atam.

    Rel etiketindən istifadə edən bir neçə əlavə Microformatlar, veb saytınızın işarələməsinə bu cür semantik məlumatları daxil etməyin digər yolları da var. Bunlar Semantik HTML bölməsində əhatə olunacaq.

    Mətn bəzəyi

    Bir paraqraf və ya digər element daxilində əsas mətn işarələməsi üçün istifadə olunan bir sıra sadə etiketlər var.

    Qalın

    Mətn hazırlamaq üçün istifadə edilə bilən iki etiket var cəsur.

    • "vacib" mətni qeyd etmək üçün istifadə üçün tövsiyə olunur. Bükülmüş mətnin qalın kimi görünməsinə səbəb olur, eyni zamanda semantik məna daşıyır (mətnin özü birtəhər vacibdir).
    • sadəcə heç bir semantik məna təklif etmədən mətni qalınlaşdırır.
    Kursivdir

    Kimi cəsur, kursivdə mətn görüntüsünün iki yolu var.

    • bükülmüş mətnin birtəhər “vurğulanmasını” təklif edir.
    • sadəcə semantik bir məna əlavə edilmədən, kursivlidir.
    Altını çəkin

    Bu yaxınlarda daha az populyar olmasına baxmayaraq, hiperlink () üçün standart mətn ekranı onları vurğulamaqdır. Buna görə, link olmayan alt tez-tez istifadə olunmur. Buna baxmayaraq işarə etiketləri var.

    • mətnin altına qoyulması üçün ümumi etiketdir. Spesifikasiyalarda təqdim olunan istifadə şəraiti səhv yazılmış sözlərin altındadır. HTML5 xüsusiyyəti, digər elementlərin ümumiyyətlə daha uyğun olduğunu bilmənizi istəyir və bir keçid üçün səhv edilə bilərsə istifadə etmir.
    • daxil edilmiş və ümumiyyətlə etiket ilə əlaqəli bir mətn, mətnə ​​edilən dəyişiklikləri göstərmək üçün istifadə olunan mətn deməkdir.

    Şou axşam 19: 00-dan 8: 00-da başlayacaq.

    Şou axşam 19: 00-dan 8: 00-da başlayacaq

    Xətt vasitəsilə

    Mətni işarələyən iki element var. Hər birinin bir qədər fərqli mənası var.

    • silinmiş və ya dəyişdirilmiş kimi başa düşülən və yuxarıda qeyd olunduğu etiket ilə istifadə olunan mətn üçündür.
    • artıq düzgün olmayan və ya müvafiq olmayan mətn üçün istifadə olunur.

    HTML4-də mövcud olan bir etiket də var.

    Texniki şərtlərin təsviri və nəzəriyyədə bir qədər fərqli olsa da, mütəxəssislər fərqin praktik təfərrüatları və ya hansı vəziyyətlərin digərindən daha çox tələb etməsi barədə heç bir razılığa gələ bilmədilər..

    Mənbə kodu və işlənməmiş mətn

    Brauzer tərəfindən göstərilməsini istəmədiyiniz mətn və ya kodu göstərmək üçün istifadə olunan iki element var, sadəcə istifadə olunanlara "xam" göstərilir.

    • - Kod blokları və ya işlənməmiş mətn üçün istifadə olunur.
    • - Mətninizə uyğun bir qısa söz və ya kod ifadəsini daxil etməyiniz lazım olduqda istifadə olunur.

    İkisi də bir boşluq şriftində göstərilir (adətən Courier) default olaraq boş yer qorumaq və heç bir etiket göstərmir.

    Bu təlimatda həm mənbə kodu nümunələrini göstərmək, həm də elementlərin etiket adlarını müzakirə etmək üçün istifadə olunur.

    Mətn ölçüsü

    Mətni başqa heç bir mənası olmayan iki elementlə ixtiyari olaraq daha böyük və ya kiçik edə bilərsiniz:

    Ölçü elementlərinin ən çox yayılmış istifadəsi səhifənin və ya məqalənin alt yazılarını başlıq etiketinin içərisinə yerləşdirilmiş bir elementə yerləşdirməkdir..

    Ümumi element

    Semantik və ya üslubu məqsədləri üçün müəyyən bir mətn uzunluğunu işarələməlisiniz, ancaq mövcud etiketlərin heç biri məna vermirsə, istədiyiniz effekti yaratmaq üçün ümumi bir ünsür (və bəzi CSS) ilə birlikdə istifadə edə bilərsiniz..

    Sarkazm etiketinin niyə olmadığını bilmirəm. Bəlkə yalnız sinif lazım olmadığı üçün lazım deyil"sarkazm">tonu İnternetdə oxumaq çox asandır.

    / * CSS * / .hiyləgər { rəng: bənövşəyi; yazı tipi: kursiv; }

    .hiyləgər {
    rəng: bənövşəyi;
    yazı tipi: kursiv;
    }

    Sarkazm etiketinin niyə olmadığını bilmirəm. Bəlkə sadəcə İnternetdə ton oxumaq asan olduğuna görə ehtiyac yoxdur.

    Ayırıcılar

    HTML mətn daxilində ayrılıq əlavə etmək üçün iki etiket təqdim edir.


    • bir xətt fasilə verir
    • üfüqi bir xətt əlavə edir

    Bu elementlərin heç biri bağlama etiketini tələb etmir, çünki heç bir mətni əhatə etmirlər. Mənbə kodunuzu daha yaxşı oxumağınıza kömək edərsə, özünüzə bağlanan son kəsik əlavə edə bilərsiniz:
    və .

    Xətt fasilələri, xüsusən də sərt xətlərin, digər həll yollarının olması lazım olduqda faydalıdır

    etiketlərin mənası yoxdur. İki yaxşı nümunə şeir və ya mahnı sözləri və ünvanlarıdır.

    Güllər qırmızıdır
    Bənövşələr mavidir
    Rhyming çətindir
    HTML5 zəhmlidir.

    123 Main St.
    Fort Worth, TX 76148

    Güllər qırmızıdır
    Bənövşələr mavidir
    Rhyming çətindir
    HTML5 zəhmlidir.

    123 Main St.
    Fort Worth, TX 76148

    Göründüyü daha asandır

    Bütün bunlar mürəkkəb görünə bilər, amma həqiqətən deyil. Mütəmadi olaraq ehtiyacınız olan etiketlərin çoxunu xatırlamaq asandır: başlıqlar, paraqraflar, nizamsız siyahı. Hər birinin arxasında olan bütün fərqli variantları və ya mənaları əzbərləməyiniz lazım deyil. Sadəcə yadda saxlamağa çalışın ki, hər hansı bir normal mətbəə elementi (başlıq, siyahı, abzas və ya keçid kimi) bunu yerinə yetirmək üçün mövcud HTML etiketinə malikdir. Bunu unutmayın, sadəcə bu şeylərə fikir vermədən yaza bilər və yadınıza düşə bilmədiyiniz xüsusi maddələrə baxa bilərsiniz.

    Seçimlərlə də üzləşməməyə çalışın. Əhəmiyyətli olan, işarələməyin həddindən artıq mürəkkəbləşmədən mümkün qədər mənalı olmasıdır. İki və ya daha çox seçimdən hansının daha yaxşı olduğunu qərar verə bilmirsinizsə, hansının daha mənalı olduğunu soruşun. Bunu anlaya bilmirsinizsə, hansının daha sadə olduğunu soruşun. Hələ də qərar verə bilmirsinizsə, sadəcə birini seçin - əgər onlar oxşar görünsələr, deməli, bunun necə işlədiyində böyük bir fərq olmayacaq..

    Struktur HTML

    Bu bölmə HTML sənədinin ümumi quruluşunu və daxilində hansı növ məlumatların daxil olduğunu izah edir. Tipik bir veb səhifənin müxtəlif bölmələrini necə təşkil etməyinizi də izah edir. Aşağıdakı HTML5 bölməsində daha çox məlumat olacaq.

    Əsas HTML sənəd quruluşu

    HTML sənədləri (veb səhifələr) düzgün işləməsi və veb brauzerlər tərəfindən dəqiq oxunması üçün bir neçə əsas struktur qaydalarına əməl etməlidir.

    Sənəd DOCTYPE elan etməklə başlamalıdır. İllər ərzində istifadədə olan bir neçə fərqli HTML (və əlaqəli) standartlar var və buna görə sənədinizin hansı sənəd növü (hansı HTML standartı) istifadə etdiyini müəyyən etmək vacibdir..

    Çoxu bu gün düzgün DOCTYPE sadəcə html-dir. Beləliklə, HTML sənədi ilə başlamalı:

    html>

    Bu tam mənada bir HTML etiketi deyil, əksinə brauzerin izlədiyi digər yazıları necə şərh edəcəyini izah edir.

    DOCTYPE bəyannaməsindən sonra açılış etiketi etiketdir. Etiketin bağlanması sənədin sonuncu sətri olacaq.

    HTML etiketinin içərisində sənədin dilini göstərə bilərsiniz (bu vəziyyətdə İngilis dili).

    html> lang ="en"> . . . . .

    Etiket içərisinə qoyulmuş iki hissədən ibarətdir və. Cəsəd bütün görünən məzmunu, başı isə sənədin özü haqqında məlumatları ehtiva edir. Bu iki hissədən başqa heç nə yoxdur.

    html> lang ="en"> . . . . . .

    Bu hər HTML sənədinin əsas quruluşudur. Hər şey əsasən əlavə.

    Məzmunu

    Bir html sənədinin elementi ümumiyyətlə sənədin düzgün göstərilməsi üçün brauzer tərəfindən lazım olan bütün məlumatları, məzmunu təsvir edən əlavə məlumatları (məcmu və botların xeyrinə) ehtiva edir..

    Metadata

    Etiket müxtəlif metadataları (sənəd haqqında məlumatları) müəyyən etmək üçün bir neçə dəfə istifadə olunur..

    Metataglar boş etiketdir, heç bir bağlama etiketi tələb etmir. Onları öz-özünə bağlayan zərbə ilə başa vura bilərsiniz (/>), lakin bu tələb olunmur (və bəzi insanlar bunu xüsusi olaraq rədd edirlər).

    Xarakter kodlaşdırması

    Kompüter yaddaşında simvollar (hərflər, nömrələr və durğu işarələri) kodlaşdırmağın bir neçə fərqli ümumi yolu var. Hansı birini istifadə etdiyinizi göstərmirsinizsə, veb brauzer qarışıqlıq yarada bilər və bəzi səhv simvolları göstərə bilər.

    Çox vaxt, bu günlərdə UTF-8 simvol dəstini təyin etmək istəyirsən.

    (Digər ümumi kodlaşdırma - ASCII - em-tire və qıvrımlı sitatlar kimi bütün uzadılmış işarələrə sahib deyildir. Əgər əvvəllər kotirovkaların və ya apostrofların görünən təsadüfi işarələrlə əvəz olunduğu qəribə tipli glitchləri görmüsünüzsə, sənədin yazıldığı üçün UTF-8 lakin ASCII istifadə edərək göstərildi - bu, kimsə sənəddə düzgün işarəni göstərmədiyini göstərir.)

    charset ="utf-8">
    Təsvir, müəllif və açar sözlər

    Sənəd haqqında əsas məlumatlar - onu kim yazdı və nə haqqında - etiketlər vasitəsilə də çatdırılır. Bunların hər ikisində iki xüsusiyyət var: etiketin adı və etiketin məzmunu.

    adı ="təsviri" məzmun ="HTML haqqında səhifə."> adı ="açar sözlər" məzmun ="HTML, etiketlər, metadata"> adı ="müəllif" məzmun ="Adam Michael Wood">

    SEO məqsədləri üçün xüsusilə vacib olan bu cür məlumatlar. Artıq bunun SEO-da böyük rol oynadığı hal deyil, lakin buna təsir göstərir. Daha da əhəmiyyətlisi, bu elementlərdə düzgün və ətraflı məlumatın olması, bütün məzmunun maşınlar tərəfindən asanlıqla tapıla bilən və mübahisəli olduğu semantik bir vebə kömək edir..

    (Məzmun İdarəetmə Sistemindən istifadə etsəniz, redaktor ekranında yazdığınız etiketlər və yazı təsvirləri ümumiyyətlə bu meta yazılarında göstərilir.)

    Başlıq

    Etiket başında görünür və ümumiyyətlə heç bir atribut yoxdur. Başlığı əhatə edir.

    Bu səhifənin başlığıdır.

    Başlıq dəqiq olmalı və mümkünsə səhifədəki görünən başlığa uyğun olmalıdır (adətən.)

    və ya

    başlıq etiketi) bədəndə. Başlığın məzmunu ümumiyyətlə brauzer pəncərəsinin yuxarısındakı sekmədə göstərilir.

    Bu deyil başlıqdakı digər etiketləri yerləşdirmək üçün yaxşı bir fikirdir (kimi) və ya ) çünki ümumiyyətlə düzgün göstərməyəcəklər.

    HTML sənədində yalnız bir başlıq göstərilə bilər.

    CSS bağlantıları

    CSS (Cascading Style Sheet) dilində yazılmış Style Sheets, səhifəni brauzerdə necə göstəriləcəyi barədə məlumat verən ayrıca sənədlərdir. Ölçülər, rənglər, yerləşdirmə və şriftlər haqqında məlumatlar hamısı stil cədvəlində var. Bu təfərrüatları əsas HTML sənədindən ayrı saxlamaq sənədin özünə təsir etmədən onları dəyişdirməyi asanlaşdırır.

    CSS üslub cədvəlləri etiketdən istifadə edərək HTML sənəd daxilində bağlanır. Href atributu üslub cədvəli sənədinin URL-sini və rel atributu əlaqənin üslub cədvəli bağlantısı olduğunu göstərir (digər bağlantı növləri də var).

    href ="/css/style.css" rel ="üslub cədvəli">
    RSS məlumatı

    RSS - Zəngin Sayt Xülasəsi və ya Həqiqətən Sadə Sindikasiya - sayt yeniləmələrinin (yeni blog yazıları kimi) abunəçilərinə yeni bir məzmun barədə məlumat verməsi və bu məzmunu RSS-dən oxuya bilməsi üçün təmin etmək üsuludur. saytınızı ziyarət etmədən oxucu.

    Məzmun İdarəetmə Sistemindən istifadə edirsinizsə, ümumiyyətlə öz URL-də mövcud olan bir XML sənəd olan sizin üçün RSS yemi yaradacaqdır. RSS oxuyucuları və veb brauzerləri asanlıqla tapa bilməsi üçün bu URL, bloqlarınızın əsas səhifəsi ilə əlaqələndirilməlidir.

    rel ="alternativ" növü ="tətbiq / rss + xml" başlıq ="RSS" href ="/feed.xml" />

    Rel ="alternativ" atribut, əlaqəli URL-nin eyni məzmunu (blog yazılarının siyahısı), lakin alternativ bir formatda olması deməkdir. Tip atributu formatın növünü (RSS) müəyyənləşdirir.

    Digər məlumatlar

    Sənəd haqqında bir çox əlavə məlumat tez-tez görünür. Bunlar daha sonra, müvafiq hissələrdə daha ətraflı şəkildə əhatə ediləcəkdir.

    Javascript bağlantıları

    Başlıqdan JS fayllarına bağlamaq mümkündür və bu adi bir tətbiqdir. Ancaq ümumiyyətlə, mümkünsə bunları sənədin sonuna yerləşdirmək daha yaxşıdır.

    HTML sənəd nümunəsi tamamlandı

    html> lang ="en"> charset ="utf-8"> adı ="təsviri" məzmun ="HTML haqqında səhifə."> adı ="açar sözlər" məzmun ="HTML, etiketlər, metadata"> adı ="müəllif" məzmun ="Adam Michael Wood"> href ="/css/style.css" rel ="üslub cədvəli"> HTML üçün bələdçi rel ="alternativ" növü ="tətbiq / rss + xml" başlıq ="RSS" href ="/feed.xml" /> . . . .

    Məzmunu

    Etiket HML sənədinin əsas hissəsidir və hər cür şeyi ehtiva edə bilər.

    Tipik olaraq, bir HTML gövdəsinin quruluşu bir və ya bir neçə alt hissəyə malik bir neçə hissəyə bölünə bilər:

    • başlıq
      • logo / marka / sayt adı
      • əsas naviqasiya
      • axtarış çubuğu
    • əsas məzmun
      • bir və ya daha çox məqalə
      • məqalə başlığı
      • məqalə məzmunu
      • məqalə metadatası (müəllif, etiketlər, göndərilən tarix)
    • yan çubuğu
      • vidjetlər
      • ikincil naviqasiya (tarix, kateqoriya və ya etiket arxivləri)
    • altbilgi
      • müəllif hüquqları / lisenziya məlumatı
      • üçüncü naviqasiya
      • Əlaqə məlumatı
      • ünvan / telefon
      • sosial bağlantılar

    Bu bölmələrin hamısı hər səhifəyə daxil edilməyəcək və ya eyni şəkildə görünməyəcəkdir. Bununla birlikdə, bu fərqli parçaların sənəd sənədinə necə birləşdiriləcəyinə dair bir nümunə üçün yaxşı bir başlanğıc nöqtəsi təmin edir.

    Element

    Bir veb səhifənin qurulması üçün ən ümumi blok səviyyəli element elementdir. Bu, bir dəfə səhifə məzmununun hər bölməsi və alt bölməsi üçün istifadə edilmişdir.

    Bu, çox sayda iç içə etiketlə nəticələndi.

    sinif ="başlıq"> sinif ="logo"> sinif ="əsas nav"> sinif ="axtarış çubuğu"> sinif ="səhifə məzmunu"> sinif ="ana"> sinif ="məqalə"> sinif ="məqalə başlığı">

    Məqalənin adı

    sinif ="məqalə-meta"> sinif ="məqalə məzmunu">

    Məqalə.

    Məzmun.

    sinif ="məqalə altbilgi"> sinif ="şərhlər"> sinif ="yan çubuğu"> sinif ="altbilgi"> sinif ="lisenziyası"> sinif ="Əlaqə məlumatı">

    Ən son HTML standartında (HTML5) qurulmuş etiket dəsti sayəsində, axtarış motorları və səhifənizdən məlumat çıxartan digər sistemlər (korlar üçün ekran oxucuları kimi) üçün daha mənalı oxumaq asanlaşdırıla bilər..

    HTML masaları

    Bu bölmə, müxtəlif istifadə hallarını necə qeyd edəcəyinizi bilmək üçün lazım olan hər şeyi daxil olmaqla HTML masaları əhatə edir. Cədvəl başlıqları, altbilgi, gövdə və sütunlar da daxil olmaqla bütün əsas masa elementləri və atributları əhatə olunmuşdur. Bu bölmədə masa işarələməsi ilə qurulan bəzi çətinliklərin öhdəsindən gəlmək üçün konkret təkliflər verilir və real dünya təcrübələrinə toxunulur.

    Cədvəllər nədir?

    HTML-də bir cədvəl "cədvəl məlumatlarını" - yayılmış hesabatda təmsil oluna bilən məlumatları təqdim etmək üçün bir yoldur. HTML-dəki masalar satır və sütunlu iki ölçülü masadır.

    Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41

    Cədvəl məlumatları bir çox formada gəlir. Tərif siyahısı kimi fərqli bir sintaksisdən fərqli olaraq bir şeyin bir cədvəldə olub olmadığını söyləməyin ən asan yolu özünüzdən soruşmaqdır: "Bu bir cədvəl kimi məna verərmi?"

    Məlumatlar bir cədvəl kimi mənalı olarsa, bir masa üçün yaxşı bir namizəddir.

    Cədvəl sintaksisi

    Əsas Sintaksis

    Bütün masalar istifadə edir

    element, masa sıra ( ) elementi və masa hüceyrəsi ( ) anında.

    ) element.

    Yalnız bu üç element sadə bir masa üçün kifayətdir. Bir cədvəl bir sıra qurulur (

    John Smith 31
    Jane 32
    Terri Jones 41
    John Smith 31
    Jane 32
    Terri Jones 41
    Cədvəl başlıqları: Seçim 1

    Tez-tez bir masanın başında başlıq qoymaq istənir. Bunun bir yolu normal masa hüceyrələrini əvəz etməkdir ( ) masa başlığı hüceyrələri ilə ().

    Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41
    Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41

    Bu yanaşmanın faydası, bütün sətirə təsir etməməsidir, yalnız başlıq olaraq təyin edilmiş hüceyrələrə aiddir. Yəni - nə etmək istədiyiniz varsa, bunun faydası.

    Cədvəl başlıqları (və bədən): Seçim 2

    Cədvəl başlıqlarını düzəltməyin digər yolu, bütün ilk sətri (və ya bir neçə satır, hətta) masa başlığı () elementinə sarmaqdır.

    Bu edildikdə, qalan məzmun ümumiyyətlə bir masa gövdəsi () elementinə sarılır.

    Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41

    Bunu etmək, bütün baş sətirinin səpkili olmasına imkan verir.

    thead { background-color: qara; rəng: ağ; şrift çəkisi: qalın; }

    # thead-example thead {
    background-color: qara;
    rəng: ağ;
    şrift çəkisi: qalın;
    }

    Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41

    Bəlkə də daha maraqlısı, bu da masanın gövdəsinə başı təsir etmədən qəşəng olmağa imkan verir.

    tbody tr: nth-uşaq (tək) { background-color: #eee; } tbody tr: nth-uşaq (hətta) { background-color: #fff; }

    # tbody-nümunə thead {
    background-color: qara;
    rəng: ağ;
    şrift çəkisi: qalın;
    }
    # tbody-example tbody tr: nth-uşaq (tək) {
    background-color: #eee;
    }
    # tbody-example tbody tr: nth-uşaq (hətta) {
    background-color: #fff;
    }

    Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41
    Cədvəl altbilgi

    Bir masa başlığı və masa gövdəsi ilə yanaşı, bir və ya daha çox satırın tablonun altbilgisinə aid olduğunu təyin edə bilərsiniz (). Sonuncu cərgəni digər cərgələrdən fərqli olaraq tərtib etməlisinizsə bu faydalıdır. Ən çox, sonuncu satır yuxarıdakı sətirlərə əsasən bir toplama və ya hesablama olarsa istifadə edilə bilər.

    thead { background-color: qara; rəng: ağ; şrift çəkisi: qalın; } tbody tr: nth-uşaq (tək) { background-color: #eee; } tbody tr: nth-uşaq (hətta) { background-color: #fff; } tfoot { background-color: # 222222; rəng: ağ; yazı tipi: kursiv; } Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41
    Orta Yaş 34.67

    # tfoot-nümunə thead {
    background-color: qara;
    rəng: ağ;
    şrift çəkisi: qalın;
    }
    # tfoot-example tbody tr: nth-uşaq (tək) {
    background-color: #eee;
    }
    # tfoot-example tbody tr: nth-uşaq (hətta) {
    background-color: #fff;
    }

    # tfoot-nümunə tfoot {
    background-color: # 222222;
    rəng: ağ;
    yazı tipi: kursiv;
    }

    Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41
    Orta Yaş 34.67
    Cədvəl sütunları

    Bəzən bir masa sütunu tərtib etməlisiniz. Buna (müəyyən dərəcədə) sütun işarələyərək istifadə etməklə nail olmaq olar.

    Sütunlar HTML-də bir az qəribə işləyir. Cədvəllər bir sıra satır şəklində yazıldığından, sütunlar masanın ikinci dərəcəli üst-üstə düşməsi kimi təyin olunur.

    Cədvəlin yuxarı hissəsində, sütunların masanın üzərinə necə qoyulacağını müəyyənləşdirir. İçəridə elementdən istifadə edərək fərdi sütun tərifləri var. Hər biri bir və ya daha çox sütunu əhatə edir və stylable bir varlığı təyin edir.

    stil ="fon-rəng: siyan;"> stil ="background-color: sarı;"> stil ="background-color: qırmızı;"> Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41
    Orta Yaş 34.67
    Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41
    Orta Yaş 34.67

    Yuxarıdakı nümunədəki hər biri cədvəl hücrələrinin bir sütununu əhatə edir. İki ad sütununa vahid olaraq üslub tətbiq etmək istəsək, spanı iki hüceyrə sütunu edə bilərdik.

    span ="2" stil ="fon-rəng: siyan;"> stil ="background-color: sarı;"> Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41
    Orta Yaş 34.67
    Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41
    Orta Yaş 34.67

    Təəssüf ki, işarələmədən istifadə ilə bağlı problemlər var:

    • yalnız fon, genişlik, haşiyə və görünmə ilə əlaqəli üslubları dəstəkləyir. Bu, məsələn, cədvəlin ilk sütununu tərtib edə bilməyəcəyiniz deməkdir cəsur.
    • Nə valideyn, nə də hər hansı bir masa bölmələrinin (baş, gövdə, altbilgi) elementi olmadığına görə bir bölmə daxilində müəyyən bir sütunu hədəfləyə bilməzsiniz.
    • Üstəlik, masa bölmələri və masa satırları elementdən daha spesifikdir, buna görə hissələrə tətbiq olunan üslublar tətbiq olunan istənilən üslubu ləğv edəcəkdir.

    Bu mövzulara görə masa tərtibatı üçün məhdud bir faydası var.

    Bunun iki ümumi həlli var: sinif atributları və n-uşaq seçiciləri.

    Sinif atributlarından istifadə etmək üçün hər birinə sütuna məxsus sinif tətbiq edin (və / və ya) element.

    sinif ="col1">Ad sinif ="col2">Soyad sinif ="col3">Yaş sinif ="col1">John sinif ="col2">Smith sinif ="col3">31 sinif ="col1">Jane sinif ="col2">Ağ sinif ="col3">32 sinif ="col1">Terri sinif ="col2">Jones sinif ="col3">41 sinif ="col1"> sinif ="col2">Orta Yaş sinif ="col3">34.67

    Əlbəttə ki, bu çox tələb olunmayan bir çox işarə əlavə edir. Daha yaxşı bir yol istifadə etmək olar: ilk uşaq,: nth-uşaq və: son uşaq CSS seçiciləri.

    Məsələn, Ad Ad sütununun qalın olmasını və yaşların qırmızı, bir boşluq şriftində göstərilməsini istəyərdiksə - əvvəllər müəyyən edilmiş digər başlıq və altbilgi üslubları ilə birlikdə?

    thead { background-color: qara; rəng: ağ; şrift çəkisi: qalın; } tbody tr: nth-uşaq (tək) { background-color: #eee; } tbody tr: nth-uşaq (hətta) { background-color: #fff; } tfoot { background-color: # 222222; rəng: ağ; yazı tipi: kursiv; } td: ilk uşaq { şrift çəkisi: qalın; } td: son uşaq { şrift ailəsi: monosfer; rəng: qırmızı; Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41
    Orta Yaş 34.67

    # pseudokolumns-nümunə thead {
    background-color: qara;
    rəng: ağ;
    şrift çəkisi: qalın;
    }
    # pseudokolumns-example tbody tr: nth-uşaq (tək) {
    background-color: #eee;
    }
    # pseudokolumns-example tbody tr: nth-uşaq (hətta) {
    background-color: #fff;
    }

    # pseudokolumns-nümunə tfoot {
    background-color: # 222222;
    rəng: ağ;
    yazı tipi: kursiv;
    }

    # pseudokolumns-td: ilk uşaq {
    şrift çəkisi: qalın;
    }

    # pseudokolumns-Məsələn td: sonuncu uşaq {
    şrift ailəsi: monosfer;
    rəng: # a20000;
    }

    # pseudokolumns-misal tfoot td: sonuncu uşaq {
    rəng: # ff3e3e;
    }

    Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41
    Orta Yaş 34.67
    Gridin qırılması: satır və kolspan

    Bəzən cədvəl məlumatlarınız bir cədvəlin yaratdığı qrafaya uyğun gəlmir. İki və ya daha çox sütunu əhatə etmək üçün bir masa hüceyrəsinə ehtiyacınız varsa, colspan atributundan istifadə edin. Birdən çox sıra uzatmaq lazımdırsa, satırlar istifadə edin.

    Məsələn, yaş cədvəlimizdə "Orta yaş" etiketi olan altbilgi cərgəsi var. Bu ikinci sütununa sıxışdırılması lazım deyil. Etiket son sütundakı ilk iki hüceyrəni əhatə etsə daha yaxşı olar.

    colspan ="2"> Orta yaş: 34.67

    # colspan-nümunə thead {
    background-color: qara;
    rəng: ağ;
    şrift çəkisi: qalın;
    }
    # colspan-example tbody tr: nth-uşaq (tək) {
    background-color: #eee;
    }
    # colspan-example tbody tr: nth-uşaq (hətta) {
    background-color: #fff;
    }

    # colspan-nümunə tfoot {
    background-color: # 222222;
    rəng: ağ;
    yazı tipi: kursiv;
    }

    Ad Soyad Yaş
    John Smith 31
    Jane 32
    Terri Jones 41
    Orta Yaş 34.67

    Bənzər bir sintaksis iki cərgə çəkmək üçün istifadə edilə bilər. (Yaxşı bunun üçün bir sütun əlavə etməliyik, çünki hüceyrələrin birləşməsi üçün yaxşı namizədlərimiz yoxdur.)

    Ad Soyad Yaş Cohort satırlar ="2">Oregon Trail Nəsil colspan ="2">Orta Yaş
    John Smith 31
    Jane 32
    Terri Jones 41 Nəsil X
    34.67

    # satırlar-nümunə thead {
    background-color: qara;
    rəng: ağ;
    şrift çəkisi: qalın;
    }
    # satırpan-misal tbody tr: nth-uşaq (tək) {
    background-color: #eee;
    }
    # satırpan-misal tbody tr: nth-uşaq (hətta) {
    background-color: #fff;
    }

    # satırpan-nümunə
    background-color: # 222222;
    rəng: ağ;
    yazı tipi: kursiv;
    }

    Ad Soyad Yaş Cohort
    John Smith 31 Oregon Trail Nəsil
    Jane 32
    Terri Jones 41 Nəsil X
    Orta Yaş 34.67

    Cədvəllər deyil?

    Həqiqətən demək lazım deyil, amma:

    Masalar layout üçün deyil. Cədvəllər sütunları və başlıqları bütöv bir sənəd səviyyəsində düzəltmək üçün əlverişli bir yol kimi istifadə edilməməlidir.

    Bu gün bəzən bu gün də bir problemdir, çünki standartlara əsaslanan veb-brauzerlər və semantik işarələmə dövründən əvvəl bir çox insan HTML sənədlərinin tərtibində masalardan (bir çox mürəkkəb üslub qaydaları ilə) istifadə edirdi..

    Bu da bir sıra səbəblərə görə pis bir fikir idi: mənbə sənədini demək olar ki, oxunmayan hala gətirdi, semantikanı tamamilə pozdu, hamısını yenidən yazmadan bir səhifəni yenidən düzəltmək demək olar ki, mümkünsüz oldu..

    Bu gün bunun qarşısını almağın yeni bir səbəbi var - bu, digərlərini ləkələyən bir səbəb: bu mobil işləmir. Cədvəl əsaslı tərtibat qətiliklə cavab vermir, müxtəlif ekran ölçülərinə sığışdırmaq üçün əlverişli deyil.

    Bütün bunlardan başqa - işlərin düzgün aparılması ilə müqayisədə masa əsaslı quruluş daha çətindir. Sadəcə bunu etmə.

    Cədvəl kənarları işi - yan-yana tərcümələr

    Kifayət qədər ümumi olan cədvəllər üçün bir məlumat istifadəsi yan-yana tərcümədir. Dantes ilahi komediyasından aşağıdakı hissəni nəzərdən keçirək.

    # inferno-açılış {
    sərhəd: heç biri;
    sərhəd arası: 10px;
    }

    Nel mezzo del cammin di nostra vita
    una selva oscura başına mil ritrovai,
    Châ © la diritta vasitəsilə dövr smarrita.
    Həyatımızın səyahətində Midway
    Mən özümü bir meşə qaranlığı içərisində tapdım,
    Çünki düz yol itirilmişdi.
    Ahi kvo bir dir kral dövrü
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    Ah! nə qədər çətin olduğunu söyləmək
    Bu meşə vəhşisi, kobud və sərt nə idi,
    Çox düşüncədə qorxunu təzələyir.
    Tant ara amara che poco ii pi ¹ mé;
    ma trattar del ben chi vi trovai,
    diri de laltre cose chi vho scorte.
    Buna görə acıdır, ölüm bir az çoxdur;
    Ancaq müalicə üçün yaxşı olanı orada tapdım,
    Orada gördüyüm digər şeylərdən danışacağam.

    Bu, əlbəttə ki, sadəcə bir az üslubu olan bir masadır:

    # inferno-açılış { sərhəd: heç biri; sərhəd arası: 10px; } id ="inferno-açılış"> Nel mezzo del cammin di nostra vita
    una selva oscura başına mil ritrovai,
    Châ © la diritta vasitəsilə dövr smarrita.
    Həyatımızın səyahətində Midway
    Mən özümü bir meşə qaranlığı içərisində tapdım,
    Çünki düz yol itirilmişdi.
    Ahi kvo bir dir kral dövrü
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    Ah! nə qədər çətin olduğunu söyləmək
    Bu meşə vəhşisi, kobud və sərt nə idi,
    Çox düşüncədə qorxunu təzələyir.
    Tant ara amara che poco ii pi ¹ mé;
    ma trattar del ben chi vi trovai,
    diri de laltre cose chi vho scorte.
    Buna görə acıdır, ölüm bir az çoxdur;
    Ancaq müalicə üçün yaxşı olanı orada tapdım,
    Orada gördüyüm digər şeylərdən danışacağam.

    Bu nümunədəki cədvəllərdən faydalanması ondadır ki, hər bir satır avtomatik olaraq hündürlüyünü satırdakı bütün hüceyrələrdəki məzmuna görə tənzimləyir. Bu, tərcümə olunan məzmunu bir dilin digərindən daha çox olmasına baxmayaraq mənbəyinin yanında saxlayır.

    Bir çox tərtibatçı bu nümunəni tərcümə edilmiş mətn üçün istifadə edir və çox yaxşıdır. Ancaq daha yaxşı bir yol ola bilər.

    Aşağıdakı HTML düşünün:

    id ="canto-1"> sinif ="italyan"> id ="it-1" sinif ="səh1"> Nel mezzo del cammin di nostra vita
    una selva oscura başına mil ritrovai,
    Châ © la diritta vasitəsilə dövr smarrita.
    id ="it-2" sinif ="səh2"> Ahi kvo bir dir kral dövrü
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    id ="it-3" sinif ="səh.3"> Tant ara amara che poco ii pi ¹ mé;
    ma trattar del ben chi vi trovai,
    diri de laltre cose chi vho scorte.
    sinif ="ingilis"> id ="en-1" sinif ="səh1"> Həyatımızın səyahətində Midway
    Mən özümü bir meşə qaranlığı içərisində tapdım,
    Çünki düz yol itirilmişdi.
    id ="en-2" sinif ="səh2"> Ah! nə qədər çətin olduğunu söyləmək
    Bu meşə vəhşisi, kobud və sərt nə idi,
    Çox düşüncədə qorxunu təzələyir.
    id ="en-3" sinif ="səh.3"> Buna görə acıdır, ölüm bir az çoxdur;
    Ancaq müalicə üçün yaxşı olanı orada tapdım,
    Orada gördüyüm digər şeylərdən danışacağam.

    CSS-dən istifadə edərək iki dillərin bir-birinin yanında və JS-nin hər cüt paraqrafın eyni hündürlüyə malik olmasını təmin etmək, eyni effekt masaya müraciət etmədən yaradıla bilər. əsaslı layout.

    Üstünlüklər:

    • Bəzi ekranlar hər iki mətn sütununu yan-yana yerləşdirmək üçün geniş ola bilməz. Bu yanaşmadan istifadə edərək, bu və ya digərinə fərdi baxıla bilər.
    • Bu, bir mətnin çox paraqrafının surəti və yapışdırılması üçün seçilməsinə imkan verir. Masa əsaslı bir versiya ilə bu mümkün deyil.

    Dezavantajları:

    • JavaScript tələb edir
    • Hər bir paraqraf işarədə identifikasiya edilməlidir.

    Real Dünyadakı masalar

    Cədvəllər üçün standart üslublar həqiqətən olduqca cəlbedicidir və buna görə nadir hallarda istifadə olunur. Ən ön UI çərçivələri (Bootstrap və Skeleton kimi) çox təkmilləşdirilmiş standart masa üslubunu təmin edir.

    Bir ön UI çərçivəsini istifadə etməyinizə baxmayaraq, yüngül, modul çərçivələrdən birindən masalar üçün üslubları çəkmək yaxşı bir fikir ola bilər. Masaların bir çox qəribə üslublu kənarları var, əgər üslubu özünüzə sıfırdan düzəltməyə çalışırsınızsa, ehtimal ki örtməyəcəksiniz..

    Masalar güclüdür

    Masalar, ehtimal ki, HTML-də ən mürəkkəb işarələnmə quruluşudur və əvvəllər qurulma üçün konteyner kimi istifadə etmək üçün sui-istifadə edilmişdir. Bununla birlikdə, cədvəl məlumatları bir səhifədə göstərilməli olduqda, masalar getmək üçün bir yoldur.

    HTML formaları

    Bu bölmə HTML formalarını ətraflı şəkildə əhatə edir. Forma elementlərinin və istifadəçi giriş interfeysinin müxtəlif çeşidləri, formaların təşkili və üslubu üçün tövsiyələr ilə birlikdə əhatə olunur.

    Form əsasları

    HTML forması, istifadəçiyə bu məlumatları serverə təqdim etmək mexanizmi ilə birlikdə məlumat verməyə imkan verən UI elementlər toplusudur..

    Çox əsas bir nümunə görünə bilər:

    Bu sadə formada da istifadəçinin məlumatları daxil etməsinə (ad və soyad) və həmin məlumatları serverə göndərməsinin bir fürsət olduğunu görə bilərik..

    Formalar çox mürəkkəbləşə bilər və indi HTML5 sayəsində çox maraqlı giriş növləri mövcuddur, lakin nə qədər mürəkkəb olsalar da, HTML formasının ürəyi eynidır: bir sıra istifadəçi giriş elementləri ilə birlikdə təqdim etmə yolu ilə serverə giriş.

    Bir Form necə işləyir

    Bütün fərqli istifadəçi interfeysi elementlərinə dalışdan əvvəl istifadəçi məlumatlarını serverə göndərərkən bir formanın necə işlədiyini aydın bir şəkildə düşünmək yaxşı olardı..

    Bir forma bir HTTP sorğusu yaradır - bir səhifə yüklədikdə brauzerinizin göndərdiyi eyni tip sorğu. Bu sorğunun məzmunu formaya daxil edilmiş dəyərlərlə müəyyən edilir. Serverdən gələn cavab, bir səhifə yüklənməsindən alınan cavab növü ilə eynidır və brauzer də cavabı yeni səhifə kimi yükləyərək eyni şəkildə cavab verir..

    Başqa sözlə: bir forma təqdimetmə, yeni bir səhifə tələbi ilə eynidır, sorğu özündə forma girişləri ilə verilən istifadəçi tərəfindən müəyyən edilmiş məlumatları yerinə yetirmədən başqa.

    Tələb olunan məlumatlarla nə baş verərsə, server tərəfindəki skriptlər üçün mövzu (PHP, Ruby və s.), Buna görə narahat olmayacağıq..

    HTTP sorğuları və Form üsulları

    Formalar iki müxtəlif növ sorğu göndərə bilər:

    • POST
    • GET

    Bu iki tələb növünün fərqli mənalara sahib olması, fərqli davranmalarına səbəb olur və buna görə də fərqli vəziyyətlərdə istifadə edilməlidir.

    __ POST və GET arasındakı semantik fərq

    Bir GET standart HTTP sorğusudur və ünvan çubuğuna bir ünvan yazdığınız zaman brauzerinizin istifadə etdiyi eyni tip bir istəkdir. Bir şey almaq üçün bir xahişdir.

    POST bir şey əldə etmək istəyi deyil, bir şey göndərmək və ya təqdim etmək istəyidir. Məktub göndərmək, girov qoymaq və ya bir işarə yazmaq barədə düşünə bilərsiniz.

    Texniki fərq

    GET tələbi istifadə edərkən giriş parametrləri URL-ə daxil edilir.

    http://example.com/search?term=thing+i+am+searaching+ üçün

    POST tələbi ilə giriş parametrləri URL-ə daxil deyil, əksinə sorğunun gövdəsinə göndərilir.

    Buradakı fərq, hər bir tələb növünün mənasına görə məna kəsb edir:

    • GET bir sorğu URL tərəfindən təyin olunan müəyyən bir mənbə tələb edir. Buna görə, həmin sorğunun təfərrüatları URL-ə daxil edilməlidir, çünki həmin məlumatlar sorğunun əslində hansı mənbədən istədiyini müəyyənləşdirir.
    • POST tələbi müəyyən bir ünvana mesaj göndərir. Ünvan URL-də, mesaj isə sorğu orqanında müəyyən edilir.
    Formalarda POST və GET istifadə edərkən

    Bir forma məlumat və məlumat tələb etmək üçün istifadə olunursa - məsələn, axtarış forması - və əsasən məzmun əlavə etmək və ya redaktə etmək üçün nəzərdə tutulmayıbsa, GETrequest istifadə etmək daha yaxşı olar.

    Digər göstəricilər GET düzgün seçimdir:

    • Eyni məlumatları formaya təqdim edən iki fərqli istifadəçi eyni cavabları almalıdır.
    • Formadan gələn cavab birbaşa əlaqələndirmək istədiyi bir şeydir.
    • Trafik və fəaliyyətə girişdən başqa, verilənlər bazanız əvvəl olduğu kimi forma təqdim edildikdən sonra eynidir.
    • Forma axtarış formasıdır.
    • İstifadəçi saytdan bəzi məlumatları əldə etmək üçün sizə məlumat vermək üçün bu formadan istifadə edir.

    Məlumat təqdim etmək üçün bir forma istifadə olunursa, bir POST çox güman ki, düzgün seçimdir.

    POSTun düzgün seçim olduğunu göstərən digər əlamətlər:

    • İki fərqli istifadəçinin eyni məlumatı təqdim etməsi ehtimalı azdır.
    • Tək bir istifadəçinin eyni məlumatları bir dəfədən çox təqdim etməsi ehtimalı azdır.
    • Forma, məlumatı saytdan almaq üçün deyil, ondan məlumat almaq üçün istifadə olunur.
    • Cavab səhifəsinə birbaşa bağlamaq mənasız olardı.
    • Forma əvvəlkindən daha çox təqdim edildikdən sonra verilənlər bazanız fərqlidir.

    Əlavə olaraq, GET tələbi digər səbəblərə görə daha mənalı olmasına baxmayaraq bir POST-un istifadə edilməsinin iki səbəbi var:

    • Təhlükəsizliyə görə, giriş parametrlərini URL-ə salmamaq üstünlük verilir.
    • GET sorğusundan istifadə edən URL uzunluğu 2000 simvoldan çox olacaqdır.
    POST'u harada təyin edin və ya alın

    Hər bir forma GET və ya POST tələb növü istifadə edərək məlumatı serverə təqdim edir. Bu elementdəki metod atributu ilə müəyyən edilir.

    metod ="GET"> metod ="POST">

    Varsayılan metod, POST ən yaxşı seçim olanda GET-in istifadə edilməməsinə səbəb olan GETdir. Defoltdan etibar etməyin - vəziyyətiniz üçün düzgün metoddan istifadə edin.

    Forma Fəaliyyəti - Tələb olunan URL

    Bir forma ya bir qaynaq (bir URL tərəfindən müəyyən edilir) alır və ya bir məlumatı bir URL-yə (URL tərəfindən müəyyən edilir) göndərir.

    Resursun URL-si bir formada fəaliyyət atributu ilə müəyyən edilir.

    fəaliyyət ="axtarış.php" metod ="GET"> fəaliyyət ="redaktə-post.php" metod ="POST">

    Href və src atributlarında olduğu kimi, URL də nisbi ola bilər (fəaliyyət ="axtarış.php") və ya mütləq (fəaliyyət ="http://example.com/search.php").

    Fəaliyyət atributu buraxılıbsa, standart URL cari səhifədir. (Bu, normal vəziyyətdə, hələ də səhifənin yenidən yüklənməsinə səbəb olacaqdır.

    Digər atributları

    Aşağıdakı atributlar elementə tətbiq olunur:

    • qəbul-charset - Forma məlumatlarını təqdim etmək üçün istifadə olunan simvol dəstini müəyyənləşdirir. Varsayılan sənədlər simvolu dəsti ilə eynidır, buna görə ümumiyyətlə ehtiyac yoxdur.
    • fəaliyyət - Forma təqdim etmək üçün hədəf URL. Yuxarıda izah.
    • autocomplete - Dəstəklənən brauzerlərdə avtomatik tamamlamanı aktivləşdirir. Dəyərlər açıq və ya söndürülmüşdür. Varsayılan dəyər aktivdir. Bu parametrləri fərdi forma elementlərində ləğv etmək mümkündür.
    • enctype - Forma məlumatlarının necə şifrələnməsini göstərir. Bu yalnız POST formalarına aiddir. Dəyərlər:
      • application / x-www-form-urlencoded - Bütün simvol göndərilməzdən əvvəl kodlanır. Boşluqlar + işarələrə, xüsusi simvollar isə ASCII HEX dəyərlərinə çevrilir. Bu standartdır.
      • multipart / form-data - İşarələr kodlanmır. Formanızda bir fayl yükləyicisindən istifadə edirsinizsə bu tələb olunur.
      • text / düz - Boşluqlar + işarələrə çevrilir, lakin xüsusi simvollar kodlanmır.
    • metod - Get və ya POST
    • adı - Formanın adı. Adətən birini daxil etmək yaxşı bir fikirdir və id ilə eyni ola bilməyəcəyinə heç bir səbəb yoxdur.
    • novalidate - Forma məlumatları təqdim edildikdə avtomatik təsdiqlənməməli olduğunu göstərir. Bu atribut heç bir dəyəri qəbul etmir. (Bununla diqqətli olun.)
    • hədəf - Lövbər bağlantılarında hədəf atributuna ekvivalent (), bu atribut formadan cavabın harada göstəriləcəyini göstərir..
      • _ özü - cavabı eyni pəncərədə açır. Bu standartdır.
      • _blank - cavabı yeni pəncərədə və ya nişanda açır.
      • _parent - cavabı valideyn pəncərəsində və ya çərçivədə açır.
      • _top - Cavabı pəncərənin tam bədənində açır.
      • framename - Səhifədə əvvəlcədən açılmış və adlandırdığınız yerlərdə cavabı açmaq üçün bir çərçivənin adını da göstərə bilərsiniz..

    Form elementlərindən istifadə

    Element adları

    Bir forma serverə təqdim edildikdə, istək - POST və ya GET olsun - istifadəçi tərəfindən formaya daxil edilmiş məlumatlar var. Bu məlumatlar bir sıra açar dəyər cütü şəklində göndərilir.

    Hər bir forma elementinin dəyəri istifadəçi tərəfindən daxil edilmiş məlumatlardır. Hər bir element üçün açar həmin elementin adı atributudur. Bu səbəbdən formadakı hər bir məlumat giriş elementinin unikal bir ad atributu olması kritikdir.

    fəaliyyət ="" metod ="post"> üçün ="ilk ad">Ad növü ="mətn" adı ="ilk ad" id ="ilk ad"> üçün ="ilk ad">Soyad növü ="mətn" adı ="Soyad" id ="Soyad"> növü ="təqdim">
    Element etiketləri

    Element çox vacibdir, çünki hər hansı bir forma elementi üçün etiketi müəyyənləşdirir.

    Bəzi dizaynerlər etiket mətnini giriş elementinə yerləşdirməyi üstün tutduqları üçün forma etiketlərindən istifadə etməyi xoşlamırlar.

    fəaliyyət ="" metod ="yazı"> növü ="mətn" adı ="ilk ad" yerdəyişmə ="Ad"> növü ="mətn" adı ="Soyad" yerdəyişmə ="Soyad"> növü ="təqdim">

    Dizaynınız üçün bu daha yaxşı görünə bilərsə də, iki ciddi məqsədəuyğunluq var:

    • Etiketlər ekrandan oxuyanlar tərəfindən kor istifadəçilərə sahələrin nə olduğunu izah etmək üçün istifadə olunur.
    • Bütün brauzerlər “yerdəyişən” atributunu dəstəkləmir.

    Düzgün etiket olmadan, bəzi istifadəçilərinizin formanızı tamamlaya bilməməsi riskiniz var.

    İnsanların daxil olması təəssüf ki, çox yaygındır element, lakin düzgün istifadə etməyin.

    Etiket elementinin düzgün işləməsi üçün üçün atributu dəyəri ehtiva etməlidir id giriş elementindəki xüsusiyyət.

     üçün ="ilk ad">Ad
     növü ="mətn" adı ="ilk ad" id ="ad">

    Bu iki məqsədə xidmət edir:

    • İşarələmənin etiketin hansı elementə tətbiq olunduğuna əmin olmaq, ekran oxucularına etiketləri giriş elementlərinə bağlamağa kömək edir ki, kor istifadəçilər formanızı daha yaxşı idarə edə bilsinlər..
    • Etiketi tıklamaq giriş elementini tıklamaq kimi hərəkət edəcəkdir. Bu, xüsusən işaret qutuları və radio düymələri kimi tıkla keçid elementlərində istifadəni çox yaxşılaşdırır.

    İstifadəsinə əlavə olaraq üçün atribut, bir etiket daxil daxil daxil olmaqla bir giriş ilə bağlı ola bilər element.

    
    
    Rəng

    Qırmızı

    Mavi

    Yaşıl

    Defolt Dəyərləri təyin etmək

    The dəyəri atribut bir forma giriş elementinin cari dəyərinə uyğundur. Üçün bir dəyəri daxil olmaqla dəyəri, hər hansı bir forma elementi üçün standart (başlanğıc) vəziyyətini təyin edə bilərsiniz.

     fəaliyyət ="" metod ="yazı">
     üçün ="ilk ad">Ad
     növü ="mətn" adı ="ilk ad" id ="ilk ad"dəyəri="John">
     üçün ="Soyad">Soyad
     növü ="mətn" adı ="Soyad" id ="Soyad" dəyəri ="Smith">
     növü ="təqdim">
    

    Bəzi inkişaf etdiricilər istifadə etmək üçün tələsirlər dəyəri atributu doldurucu və ya istifadəçi işarəsi mətni ilə təmin etmək üçün bir yol kimi. Bu ümumiyyətlə pis bir fikirdir, çünki dəyər dəyişdirilmədiyi təqdirdə, doldurucu mətni demək olar ki, heç vaxt istəməyən serverə göndəriləcəkdir.

    Yuxarıdakı nümunədə (şəxslərin adı), “John Smith” dəyərlərini istifadəçi üçün yer və ya işarə kimi istifadə etmək pis bir fikir olar – istifadəçi bunu serverə təqdim edə bilər. Ancaq bu (məsələn) istifadəçilərin öz məlumatlarını yeniləyə biləcəyi bir profil səhifəsi olsaydı ya da eyni burax, sonra bu şəkildə dəyəri istifadə etmək məna verir.

    İstifadəçi forma elementindəki giriş məlumatlarını dəyişdirirsə dəyəri atribut da dəyişir. Elementlərin dəyərini əldə etmək üçün JavaScript-dən istifadə etmisinizsə, sənəd mənbəyindəki orijinal dəyər deyil, yenilənmiş dəyər olduğunu tapacaqsınız.

    Elementləri deaktiv etmək

    Əksər elementləri əlavə etməklə əlil ola bilər əlil onlara aid. Əlil elementlər tıklana və ya redaktə edilə bilməz.

     fəaliyyət ="" metod ="yazı">
     üçün ="ilk ad">Ad
     növü ="mətn" adı ="ilk ad" dəyəri ="John" id ="ilk ad">
     üçün ="Soyad">Soyad
     növü ="mətn" adı ="Soyad" dəyəri ="Smith" id ="Soyad" əlil>
     növü ="təqdim">
    

    Əlil elementlər forma təqdim edildikdə heç bir dəyər vermir, buna görə istifadəçinin dəyişdirməsini istəmədiyiniz profil məlumatlarını (məsələn) göstərmək üçün istifadə edin..

    The element

    Ən vacib və çox yönlü forma elementidir . Bir funksiyası olan əksər digər forma elementlərindən fərqli olaraq element sadə mətndən mürəkkəb qarşılıqlı əlaqəyə qədər düymələrdən bir çox funksiya üçün istifadə olunur (bir forma təqdim etmə düyməsini adətən element).

    Giriş nəzarətinin müxtəlif növləri ilə təyin edilmişdir növü atributu element.

    Növ: Mətn

    Ən əsas (və standart) giriş növüdür mətn. Bu giriş şəklində bir istifadəçi adı üçün və ya bir axtarış şəklində bir sorğu daxil etmək üçün istifadə ediləcəyi kimi bir sətirli mətn girişini təyin edir..

    növü ="mətn">

    The siyahısı atribut bir giriş üçün əvvəlcədən təyin edilmiş dəyərlərin siyahısını təyin etmək üçün istifadə edilə bilər.

    növü ="mətn" siyahı ="seçimlər"> id ="seçimlər"> dəyəri ="qırmızı"> dəyəri ="yaşıl"> dəyəri ="mavi">
    Növ: Göndər

    İkinci ən əsas giriş növüdür təqdim formaları təqdim düyməsini təyin edən giriş.

     növü ="təqdim">

    Göndərmə düyməsindəki standart mətn “Göndər” dir. Bu ilə dəyişdirilə bilər dəyəri atributu.

    adı ="axtarış"> növü ="təqdim" dəyəri ="Axtarış">

    Başqa bir giriş növü isə oxşar bir GUI yaradır təqdim növü – düyməsini basın növü. Bununla birlikdə istifadə etməyin düyməsini basın ümumi forma təqdim etmək üçün. (İşləməyəcək.) Və istifadə etmirəm təqdim bir forma daxilində ümumi düymələr üçün düymə – səhv işləyir.

    Növ: Şifrə

    Mətn daxil edilən simvolları qaralmaq istəyirsinizsə, istifadə edin parol növü.

    üçün ="istifadəçi adı">İstifadəçi adı
    adı ="istifadəçi adı" növü ="mətn" id ="istifadəçi adı">

    üçün ="şifrə">Şifrə
    növü ="şifrə" adı ="şifrə" id ="şifrə">

    növü ="təqdim" dəyəri ="Daxil ol">
    Təsdiqləmə ilə mətn daxiletmə növləri

    Bir neçə giriş növü eyni GUI yaradır – mətni yazmaq üçün bir qutu – ancaq daxilolma qaydasını təsdiqləmək üçün fərqli şərait yaradır.

    Məsələn, e-poçt daxil edilmiş məlumatların standart e-poçt ünvanı formatına (bəzi mətn, ardınca gələnlər) uyğun olduğundan əmin olmaq üçün çek tipini yoxlayın @ işarəsi, ardınca ən azı bir nöqtəni əhatə edən mətn).

    Bu növlər:

    • e-poçt
    • nömrə – Sahə yalnız nömrələri qəbul edir.
    • tel – Bir telefon nömrəsi. (Telepon nömrələrinin təsdiqlənməsi brauzerlərdə geniş dəstəklənmir.)
    • url – Yalnız yaxşı qurulmuş URL-ləri qəbul edir.

    Bu dəyərlər, forma təqdim edildikdə təsdiqlənir novalidate atribut forma və ya formnovalidat atribut fərdi elementlərdə göstərilib.

    Tarix və ya Vaxt seçiciləri olan növləri

    Bir neçə giriş növü bir təqvimdən bir tarix və / və ya bir vaxt seçmək üçün pop-up UI elementləri yaradır. Bu UI elementləri brauzer əsaslıdır və hamı tərəfindən dəstəklənmir.

    Bu növlər:

    • Tarix
    • Tarix vaxt
    • datetime-yerli
    • ay
    • vaxt
    • həftə
    üçün ="Tarix">Tarix Girişinə Nümunə
    növü ="Tarix" adı ="Tarix" id ="Tarix">

    üçün ="Tarix vaxt">Datetime Girişinə Nümunə
    növü ="Tarix vaxt" adı ="Tarix vaxt" id ="Tarix vaxt">

    üçün ="datetime-yerli"> Datetime Yerli nümunəsi
    növü ="datetime-yerli" adı ="datetime-yerli" id ="datetime-yerli">

    üçün ="ay">Ay girişinin nümunəsi
    növü ="ay" adı ="ay" id ="ay">

    üçün ="vaxt">Zaman girişi nümunəsi
    növü ="vaxt" adı ="vaxt" id ="vaxt">

    üçün ="həftə">Həftə girişinə misal
    növü ="həftə" adı ="həftə" id ="həftə">

    Növ: Radio

    Radio düymələri bir dəstdə yalnız bir elementin seçilə biləcəyi bir forma növüdür.

    Radio düymələri dəstindəki hər düymə özünə aiddir düyməsini basın və bunların tərkibində olan bir elementin övladları kimi bir-birinə bağlanması tələb olunmur.

    Bir neçə radio düyməsini bir dəstə bağlayan atribut adı atributu.

    növü ="radio" adı ="forma" dəyəri ="kvadrat"> Meydan
    növü ="radio" adı ="forma" dəyəri ="dairə"> Dairə
    növü ="radio" adı ="forma" dəyəri ="üçbucaq"> Üçbucaq
    növü ="radio" adı ="rəng" dəyəri ="qırmızı"> Qırmızı
    növü ="radio" adı ="rəng" dəyəri ="mavi"> Mavi
    növü ="radio" adı ="rəng" dəyəri ="Yaşıl"> Yaşıl
    Forma



    Rəng



    Hər biri üçün serverə təqdim olunan dəyər adı məzmunu dəyəri hər cüt üçün seçilmiş radio düyməsinin atributu. İstənilən etiketləmə yalnız istifadəçi üçündür və serverə ötürülən dəyərə təsir etmir.

    Girişləri bir sıra radion düymələrinə etiketləyin ən yaxşı yolu sarğıdır element və etiket mətnini a daxil edin element. Bu etiket mətnini tıklanabilir hala gətirir, istifadəsi daha asandır.

    
    
    növü ="radio" adı ="forma" dəyəri ="kvadrat"> Meydan
    növü ="radio" adı ="forma" dəyəri ="dairə"> Dairə
    növü ="radio" adı ="forma" dəyəri ="üçbucaq"> Üçbucaq
    növü ="radio" adı ="rəng" dəyəri ="qırmızı"> Qırmızı
    növü ="radio" adı ="rəng" dəyəri ="mavi"> Mavi
    növü ="radio" adı ="rəng" dəyəri ="Yaşıl"> Yaşıl
    Forma

    Meydan

    Dairə

    Üçbucaq

    Rəng

    Qırmızı

    Mavi

    Yaşıl

    Diqqət yetirin elementi sarar element, üçünid atributlara ehtiyac yoxdur.

    Növ: onay qutusu

    Onay qutusuna giriş növü iki növ giriş kontrolundan birini təyin etmək üçün istifadə edilə bilər (hər ikisi də onay qutularına bənzəyir).

    Birinci növ, bir neçə dəyərə malik ola bilən tək düymədir (bəzən çox seçim deyilir). İkinci növ boolean (TRUE / FALSE) açardır.

    Eyni düyməyə verilə bilən dəyərlər bir sıra yaratmaq üçün sadəcə bir qrup yaradın onay qutusu eyni ilə giriş adı atributu.

    Bəyəndiyim rənglər
    növü ="onay qutusu" adı ="rəng" dəyəri ="mavi"> Mavi
    növü ="onay qutusu" adı ="rəng" dəyəri ="yaşıl"> Yaşıl
    növü ="onay qutusu" adı ="rəng" dəyəri ="sarı"> Sarı
    növü ="onay qutusu" adı ="rəng" dəyəri ="qırmızı"> Qırmızı
    Bəyəndiyim rənglər

    Rənglər

    Mavi

    Yaşıl

    Sarı

    Qırmızı

    Bu nümunədə çox rəngi seçimlər edilə bilər. Hər biri sorğuda fərdi parametrlər olaraq serverə göndəriləcəkdir. Məsələn, hamısı a-da seçilibsə GET forma, tələb olunan URL aşağıdakı kimi görünür:

    http://example.com?color=blue&color=green&color=yellow&color=red

    Boolean (TRUE / FALSE) dəyərlərini təmsil etmək üçün ayrıca onay qutularından istifadə edə bilərsiniz.

    növü ="onay qutusu" adı ="tos" dəyəri ="DOĞRU"> Burada tıklayarak Xidmət şərtlərimizi qəbul etdiyinizi təsdiqləyirsiniz.

    Burada tıklayarak Xidmət şərtlərimizi qəbul etdiyinizi təsdiqləyirsiniz.

    Əlbəttə ki, hər hansı dəyəri server tərəfi kodu atributun varlığını necə şərh edəcəyini bilənə qədər işləyərdim.

    Hər iki halda, heç bir qutu yoxlanılmasa, adı açar sorğuda göndərilmir.

    Məsələn, yuxarıdakı rənglər nümunəsində, seçimlərdən heç biri yoxlanılmadığı təqdirdə təqdim edilmiş məlumatlar olmazdı hər hansı bir istinad daxildir rəngi giriş açarı. (Boş bir dəst belə deyil.)

    Növ: Düymə

    Giriş növünü istifadə edərək bir düymə bir formada yaradıla bilər düyməsini basın. Digər giriş növlərindən fərqli olaraq, bu bir forma daxilində heç bir xüsusi məna daşımır və ümumiyyətlə yalnız bəzi JavaScript hərəkətlərini tətik etmək üçün istifadə olunur.

     növü ="düymə" dəyəri ="Düymə etiketi" onclick ="xəbərdarlıq ('Mən düyməyəm!')">
    Növ: Rəng

    HTML5-də Yeni – və yalnız bəzi brauzerlərdə dəstəklənir – rəng seçmə giriş növüdür.

    Dəstəkləyən brauzerlərdə bu elementi tıklayaraq rəng seçmək üçün GUI təqdim edir. Serverə təqdim olunan dəyər HTML / CSS altıbucaqlı rəngdir (ex. ağ = #ffffff).

    üçün ="sevimli rəng">Sənin sevimli rəngin hansıdır?
    növü ="rəng" adı ="sevimli rəng" id ="sevimli rəng">

    Növü: Menzil

    Ayrıca HTML5-də yeni, brauzer dəstəyindən də asılıdır menzil giriş. Bu giriş istifadəçinin üfüqi şəkildə hərəkət edə biləcəyi sürüşmə şəklində görünür.

    Giriş elementi aralığın ən yüksək və ən aşağı dəyərini təyin etməlidir. İstifadəçi tərəfindən təyin olunan dəyər forma ilə təqdim olunur.

    
    
    üçün ="forma anlayışı">Formaları nə qədər yaxşı başa düşürsən?

    Dəyməz.
    növü ="sıra" adı ="forma anlayışı" id ="forma anlayışı" min ="0" max ="100"> Cox yaxsi.

    Dəyməz.

    Cox yaxsi.

    Növ: Şəkil

    The şəkil giriş a əvəz edir təqdim düyməsini istifadə edərək, bir düyməni bir şəkil istifadə etməyə imkan verir.

    Düymənin işləmə üsulunu dəyişdirməklə yanaşı, təqdim sorğusuna şəkil daxilində tıklayan istifadəçilərin X və Y koordinatları da daxildir. Bu, təqdim formasının server tərəfində görüntü xəritəsi kimi fəaliyyət göstərməsinə imkan verir.

    növü ="görüntü" src ="Məsələn.jpg">
    Növ: Fayl

    Bir forma ilə bir fayl yükləmə girişi daxil ola bilər fayl növü. Fayl yükləmə GUI-nin tam ekranı və işləməsi brauzer tərəfindən idarə olunur. Faylın işlənməsi (faylın saxlanacağı yer) server tərəfində də göstərilməlidir.

    növü ="fayl" adı ="fayl yüklə">

    İstifadə edərək, fayl girişi ilə qəbul edilən sənədləri məhdudlaşdıra bilərsiniz qəbul edin Bu uzantıların siyahısını və ya MIME növlərinin siyahısını təyin etməyə imkan verən atribut.

    
    
    
    növü ="fayl" adı ="uzadılması məhdud olan yükləyən" qəbul =".png, .gif, .jpg, .jpeg">
    növü ="fayl" adı ="mime-məhdud yükləyən" qəbul ="image, image / png, image / gif, image / jpg, image / jpeg">

    Fayl uzantısı üçün brauzer dəstəyi universal deyildir, buna görə MIME tipli siyahı bəlkə də daha yaxşı bir yoldur. (Ətraflı məlumat üçün MIME növlərinin bu siyahısına baxın.)

    Istifadə etsəniz də qəbul edin Forma vasitəsilə yüklənə biləcək fayl uzantılarını məhdudlaşdırmaq üçün atribut, həm fayl növü, həm də serverdəki fayl məzmununu yoxlamaq vacibdir. Ən azı iki səbəbə görə:

    • Zərərli (və ya diqqətsiz) bir istifadəçi səhv bir uzantısı olan bir faylı səhv sala bilər. The qəbul edin bir fayl yükləyicisinə qoyulan məhdudiyyət yalnız uzantıya baxır, həqiqi sənəd formatına deyil, buna görə bir faylın düzgün bir növ olmasına zəmanət yoxdur.
    • Formanı atmaq və birbaşa sorğu göndərmək mümkündür. (Buna görə BÜTÜN girişlər serverdə təsdiqlənməlidir.)
    Növ: Gizli

    Görünməyən bir təyin edə bilərsiniz giriş növü istifadə edərək, forma təqdim edildikdə dəyəri daxil ediləcək element gizli.

     növü ="gizli" adı ="gizli dəyər" dəyəri ="">

    Gizli bir giriş üçün ən çox istifadə, ümumiyyətlə JavaScript vasitəsi ilə səhifənin başqa yerində yaradılan bir dəyərin sahibi kimi istifadə olunur. Səhifədəki istifadəçi qarşılıqlılığı gizli girişə təyin olunan bir dəyəri təyin etməyə səbəb olur və bu da forma təqdim edilməsinə daxil edilir.

    Xüsusiyyətləri

    The element çox sayda xüsusiyyətlərə malikdir. Onlardan bəziləri yalnız müəyyən giriş növlərinə aiddir, digərləri isə hər hansı bir giriş ilə istifadə edilə bilər.

    • qəbul edin – Həm uzadılması ya da MIME növü ilə fayl növlərinin siyahısını müəyyənləşdirir. Yalnız istifadə olunur type = "file".
    • alt – Alt mətni müəyyənləşdirir. Yalnız istifadə olunur type = "image".
    • avtoqəza – Giriş sahəsinin avtomatik tamamlanmasının lazım olub olmadığını müəyyənləşdirir. Dəyərlər var yandır və ya off. Forma səviyyəsini ləğv edir avtoqəza atributu. Yalnız mətn əsaslı girişlərə tətbiq olunur.
    • avtofokus – olduğunu ifadə edir səhifə yüklədikdə diqqət mərkəzində olmalıdır. Dəyər tələb olunmur. Yalnız bir sənəddə istifadə olunmalıdır.
    • yoxlanılır – A təyin edir radio və ya onay qutusu yoxlanılmış vəziyyətə giriş.
    • əlil – Əlil edir element. Əlil elementlər forma təqdim edildikdə öz dəyərlərini göndərmir. Heç bir dəyər tələb olunmur.
    • forma – müəyyənləşdirir
      olan aid olduqda istifadə üçün element xaricindədir element. Dəyərdir id hədəf şəklindədir. Bu atribut universal şəkildə dəstəklənmir.
    • formalaşma – Formanı təqdim etmək üçün bir URL göstərir. Ləğv edir fəaliyyət atributu
      özü və ya əvəz edir. Bu yalnız üzərində istifadə olunur təqdim və ya şəkil növləri. Bunun forma əvəzinə istifadə etməsinin yeganə səbəbi fəaliyyət atribut, bir forma müxtəlif hərəkətlərlə çoxsaylı təqdimetmə düymələrini tələb edirsə.
    • formencip – Təqdim olunan məlumatların xarakter kodlamasını təyin edir. Ləğv edir növ atributu
      element. Bu yalnız üzərində istifadə olunur təqdimşəkil növləri. Dəyərlər:
      • tətbiq / x-www-form-urlencoded
      • multipart / form-data
      • mətn / düzənlik
    • formmethod – Metodu müəyyənləşdirir (almaq və ya post) forma təqdim. Ləğv edir metodu atributu
      element. Bu yalnız üzərində istifadə olunur təqdimşəkil növləri.
    • formnovalidat – Forma məlumatlarının təqdim olunmadan əvvəl təsdiqlənməməsini göstərir. Ləğv edir novalidate atributu
      element. Bu yalnız üzərində istifadə olunur təqdimşəkil növləri. Bu atribut heç bir dəyər tələb etmir.
    • formtarget – Cavabın göstəriləcəyi brauzer kontekstini təyin edir. Ləğv edir hədəf atributu
      element. Bu yalnız üzərində istifadə olunur təqdimşəkil növləri. Dəyərlər:
      • _boş
      • _ özü
      • _par
      • _top
      • çərçivə adı
    • hündürlük – Hündürlüyü, piksel ilə müəyyənləşdirir şəkil giriş. Bunu təyin etmək üçün CSS-dən istifadə etmək daha yaxşı olar.
    • siyahısı – Dəqiqləşdirir id a əvvəlcədən müəyyən edilmiş variantları ehtiva edən element. Yalnız mətn əsaslı girişlərlə istifadə olunur.
    • maksimum – Bir sıra və ya tarixə əsaslanan giriş üçün maksimum dəyəri təyin edir.
    • maksimum uzunluq – Mətn əsaslı bir girişdə simvolların maksimum sayını təyin edir.
    • dəq – Bir sıra və ya tarixə əsaslanan giriş üçün minimum dəyəri müəyyənləşdirir.
    • çoxsaylı – İstifadəçinin birdən çox dəyəri daxil edə biləcəyini göstərir. İlə istifadə olunur e-poçtfayl giriş növləri. Bu atribut heç bir dəyər tələb etmir.
    • adı – Girişin adını göstərir. Forma təqdim edildikdə girişi təmsil edən açar dəyər cütlüyündə açar kimi istifadə olunur. Unikaldır adı bütün forma elementləri üçün təmin edilməlidir.
    • naxış – Mətn əsaslı bir giriş dəyərinin doğrulanması üçün istifadə ediləcək adi bir ifadəni təyin edir.
    • yerdəyişmə – Mətn əsaslı bir giriş üçün doldurucu və ya “köməkçi” mətni müəyyənləşdirir.
    • oxumaq üçün – Giriş istifadəçi tərəfindən redaktə edilə bilməyəcəyini göstərir. Davranışda da oxşar əlil atribut, yalnız oxumaq üçün daxilolmalardan başqa etmək forma təqdim edildikdə öz dəyərlərini serverə göndərin. Çox vaxt JavaScript ilə istifadəçinin müəyyən şərtlər yerinə yetirilməyincə bir dəyəri düzəldə bilməyəcəyini və ya müəyyən şərtlər yerinə yetirildikdən sonra bir dəyəri düzəldə bilməyəcəyini təmin etmək üçün istifadə olunur. Bu atribut heç bir dəyər tələb etmir.
    • tələb olunur – olduğunu ifadə edir bir dəyəri olmalıdır və ya forma təqdim olunmayacaqdır. Bu atribut heç bir dəyər tələb etmir.
    • ölçüsü – Mətn əsaslı bir giriş elementinin genişliyini, simvol olaraq təyin edir. CSS-dən istifadə ümumiyyətlə bunu həyata keçirmək üçün daha yaxşı bir yoldur.
    • src – Bir üçün bir görüntü URL müəyyənləşdirir şəkil giriş.
    • addım – Bir sıra əsaslı girişdə etibarlı girişlər arasındakı interval müəyyənləşdirir.
    • növü – növünü müəyyənləşdirir element. Defoltdur mətn. Bütün brauzerlərdə mümkün olan bütün dəyərlər dəstəklənmir. Dəyərlər:
      • düyməsini basın
      • onay qutusu
      • rəngi
      • Tarix
      • Tarix vaxt
      • datetime-yerli
      • e-poçt
      • fayl
      • gizli
      • şəkil
      • ay
      • nömrə
      • parol
      • radio
      • menzil
      • yenidən qur
      • axtarış
      • təqdim
      • tel
      • mətn
      • vaxt
      • url
      • həftə
    • dəyəri – Girişin başlanğıc dəyərini təyin edir.
    • eni – Bir eni, piksel, müəyyən edir şəkil giriş. CSS-dən istifadə ümumiyyətlə bunu həyata keçirmək üçün daha yaxşı bir yoldur.

    Mətn sahəsi

    Giriş üçün qısa, tək mətn xətti istəsəniz, istifadə edin element. Daha uzun bir mesaj üçün daha böyük bir əraziyə ehtiyacınız varsa, istifadə edin

    # tekstarea-misal mətn {
    boy: 6em;
    eni: 30em;
    }

    Element içərisindəki hər hansı bir mətn mətn sahəsində göstərilir.


    üçün ="msgstr">Sənin mesajın:

    adı ="msgstr" id ="msgstr">Bu mətn textarea elementinin içindədir. İstifadəçi tərəfindən görüləcəkdir. İstifadəçi dəyişdirməzsə, forma ilə təqdim olunur.

    # textarea-text-example textarea {
    boy: 6em;
    eni: 30em;
    }

    Sənin mesajın:

    Xüsusiyyətlər aşağıdakılardır:

    • autofocus - Səhifə yüklədikdə diqqət mərkəzində olacağını göstərir. Yalnız bir sənəddə istifadə olunmalıdır. Bu atribut heç bir dəyər tələb etmir.
    • cols - Mətn sahəsinin genişliyini, işarələrdə göstərər. Bu CSS ilə daha yaxşı yerinə yetirilir.
    • əlil - əlil edir. Əlil forma elementləri forma təqdim edildikdə öz dəyərlərini serverə göndərmirlər. Bu atribut heç bir dəyər tələb etmir.
    • forma - istifadə üçün elementin daxilində olmayan bir id şəklini göstərir. Bütün brauzerlərdə dəstəklənmir.
    • maxlength - icazə verilən simvolların sayını göstərir .
    • name - adını müəyyənləşdirir və forma təqdim etmə sorğusunda təmsil edən açar dəyər cütü üçün açar kimi xidmət edir. Bütün forma elementləri özünəməxsus bir ad daxil etməlidir.
    • yerdəyişmə - İstifadəçi daxil etməzdən əvvəl içəridə göstəriləcək yer doldurucusu və ya köməkçi mətni müəyyənləşdirir.
    • oxumaq üçün - Girişin istifadəçi tərəfindən redaktə edilə bilməyəcəyini göstərir. Əlil atributa bənzər davranış, oxunan elementlərdən başqa, forma təqdim edildikdə öz dəyərlərini serverə göndərir. Çox vaxt JavaScript ilə istifadəçinin müəyyən şərtlər yerinə yetirilməyincə bir dəyəri düzəldə bilməyəcəyini və ya müəyyən şərtlər yerinə yetirildikdən sonra bir dəyəri düzəldə bilməyəcəyini təmin etmək üçün istifadə olunur. Bu atribut heç bir dəyər tələb etmir.
    • tələb olunur - bir dəyəri olmalıdır və ya forma təqdim olunmayacağını göstərir. Bu atribut heç bir dəyər tələb etmir.
    • satır - hündürlüyü, mətn sətirlərində, olanı təyin edir. Bəzi hallarda bu, CSS-dən (məsələn, həqiqi xətlərin sayı müvafiq olduqda) istifadə etmək üstünlük təşkil edir, ancaq hündürlüyü müəyyən etmək üçün CSS ümumiyyətlə daha yaxşı seçimdir.
    • sarmalama - Girişin sərtləşməsinin (hər bir sətir aralığında bir xətt kəsmə simvolu daxil edilməsinin) və ya yumşaq sarmanın (istifadəçi bir xətt kəsilməsini təyin etdiyi yerdə bir xətt kəsmə simvolu daxil edin) olub olmadığını müəyyənləşdirir. Dəyərlər yumşaq və ya sərtdir.

    Seçin (Düşüşdürün)

    Açılan bir selektoru təyin etmək üçün elementi uşaq elementləri ilə istifadə edin.

    üçün ="sevimli rəng">Sənin sevimli rəngin hansıdır?
    adı ="sevimli rəng" id ="sevimli rəng">
    dəyəri ="qırmızı">Qırmızı
    dəyəri ="mavi">Mavi
    dəyəri ="yaşıl">Yaşıl
    dəyəri ="sarı">Sarı

    Sənin sevimli rəngin hansıdır?
    Qırmızı
    Mavi
    Yaşıl
    Sarı

    Seçimlər birlikdə qruplaşdırıla bilər və element ilə qrup səviyyəli etiketlər verilə bilər.

    üçün ="sevimli rəng">Sənin sevimli rəngin hansıdır?
    adı ="sevimli rəng" id ="sevimli rəng">
    etiket ="İlkin rənglər">
    dəyəri ="qırmızı">Qırmızı
    dəyəri ="mavi">Mavi
    dəyəri ="sarı">Sarı

    etiket ="Orta rənglər">
    dəyəri ="yaşıl">Yaşıl
    dəyəri ="narıncı">Narıncı
    dəyəri ="bənövşəyi">Bənövşəyi

    etiket ="Əslində rənglər deyil">
    dəyəri ="qara">Qara
    dəyəri ="ağ">Ağ
    dəyəri ="Boz">Boz

    Sənin sevimli rəngin hansıdır?
    Qırmızı
    Mavi
    Sarı

    Yaşıl
    Narıncı
    Bənövşəyi

    Qara

    Boz

    Elementin içindəki məzmun istifadəçi ilə əlaqəli etiket təmin edir, lakin serverə göndərilən dəyər elementin məzmunu ilə deyil, dəyər atributu ilə müəyyən edilir.

    Elementin xüsusiyyətləri:

    • autofocus - səhifə yüklədikdə elementin diqqət mərkəzində olacağını göstərir. Yalnız bir sənəddə istifadə olunmalıdır. Bu atribut heç bir dəyər tələb etmir.
    • əlil - Elementi deaktiv edir. Əlil elementlər forma təqdim edildikdə dəyəri serverə göndərmir. Bu atribut heç bir dəyər tələb etmir.
    • form - Bu elementin istifadə ediləcəyi idi müəyyənləşdirir, sonra istifadə edilmir. Bütün brauzerlərdə dəstəklənmir.
    • çox - İstifadəçinin birdən çoxunu seçə biləcəyini göstərir. Birdən çox seçim çox açar dəyər cütü olaraq göndərilir. Bu atribut heç bir dəyər tələb etmir.
    • name - Forma serverə təqdim edildikdə elementi təmsil edən açar dəyər cütlüyündə açar kimi xidmət edən elementin adı.
    • tələb olunur - Elementin seçilmiş bir dəyərə sahib olduğunu və ya başqa bir forma təqdim edilməyəcəyini göstərir. Bu atribut heç bir dəyər tələb etmir.
    • ölçüsü - görünən variantların sayını göstərir. Mənim cari 1-dir.

    Elementlərin atributu bunlardır:

    • əlil - Seçilməyəcəyini göstərir.
    • label - açılan ekranda elementin məzmununu əvəz edən etiketi göstərir.
    • seçilmiş - səhifə yükləmə zamanı əvvəlcədən seçilməli olduğunu göstərir.
    • dəyər - serverə göndərilən dəyəri təyin edir.

    Formanın təşkili

    Böyük və ya mürəkkəb bir forma, forma elementlərini qablara qruplaşdıraraq tərzini və istifadəsini asanlaşdıra bilər. Hər biri bir element ilə adlandırıla bilər.

    Şəxsi məlumat
    üçün ="ilk ad">Ad
    adı ="ilk ad" id ="ilk ad">

    üçün ="Soyad">Soyad
    adı ="Soyad" id ="Soyad">

    üçün ="Doğum tarixi">Doğum tarixi
    adı ="Doğum tarixi" id ="Doğum tarixi">

    Sevimli şeylər
    üçün ="sevimli rəng">Sevimli rəng
    adı ="sevimli rəng" id ="sevimli rəng">
    etiket ="İlkin rənglər">
    dəyəri ="qırmızı">Qırmızı
    dəyəri ="mavi">Mavi
    dəyəri ="sarı">Sarı

    etiket ="Orta rənglər">
    dəyəri ="yaşıl">Yaşıl
    dəyəri ="narıncı">Narıncı
    dəyəri ="bənövşəyi">Bənövşəyi

    etiket ="Əslində rənglər deyil">
    dəyəri ="qara">Qara
    dəyəri ="ağ">Ağ
    dəyəri ="Boz">Boz

    üçün ="sevimliShape">Sevimli Şekiller
    adı ="sevimliShape">
    dəyəri ="üçbucaq">Üçbucaq
    dəyəri ="kvadrat">Meydan
    dəyəri ="dairə">Dairə

    növü ="təqdim">

    Forma tərtibatı

    Bir çox brauzerdə forma elementlərinin standart görüntüsü son dərəcə cəlbedicidir. Düymələr və açılan UI-lərin ümumi "döyüş gəmisi boz" larından əlavə, hizalanma, xətt boyu və boşluqla bağlı adətən ciddi problemlər mövcuddur..

    Bu iki problemə səbəb olur:

    • Forma elementlərinin çoxu fərdi olaraq pis görünür.
      • Məsələn - Radio Düymələri və Yoxlama qutuları ümumiyyətlə öz etiketləri ilə düzgün uyğunlaşmır.
    • Forma elementləri birlikdə yaxşı görünmür.
      • Məsələn - eyni xəttdə bir element və açılan bir-biri ilə düzgün bir şəkildə birləşməyəcəkdir.

    Bu çox əsəbi ola bilər.

    Bəzi problemlər - şaquli hündürlük və boşluq kimi, daha populyar CSS sıfırlanmalarının bəzilərində həll olunur, lakin bunların hamısı deyil.

    Layihəniz üçün sıfırdan bir CSS tərtibatı vərəqi qurmağı planlaşdırırsınızsa, müxtəlif formada olan bütün elementlərdən istifadə edərək bir neçə detallı nümunə formaları yaratmağınızdan əmin olun. Xüsusilə çox sütunlu formalara diqqət yetirin.

    Forma tərtibatında çətinliklər olduğundan, forma üslublarını populyar bir ön çərçivədən istifadə etmək çox vaxt yaxşı bir fikirdir.

    HTML və CSS - Qısaca Giriş

    Bu bölmə, veb üslubu dili - CSS - ni təqdim edir və HTML ilə necə əlaqəli olduğunu izah edir. Bu mövzuya tam bələdçi olmasa da, sayt dizaynına kifayət qədər dərin konseptual bir görünüş verir. Əhatə olunan mövzular arasında struktur CSS, "qutu modeli", mətn tərtibatı, mətbəə, animasiya, cavab dizayn və ön çərçivələrin istifadəsi var..

    CSS nədir?

    CSS Cascading Style Sheets üçün dayanır. HTML sənədinin bir səhifədə necə göstəriləcəyini müəyyən etmək üçün istifadə olunan bir dildir.

    Bir sənədin bütün məzmunu və yalnız məzmunu ehtiva etməsi və ayrı bir sənəd və ya vərəqin üslublar haqqında məlumat ehtiva etməsi fikrinə istinad edərək "üslub cədvəli" adlanır..

    Bu, "kaskad" adlanır, çünki valideynlərdən uşaq elementlərinə qədər "kaskad" mətni görüntüsü ilə əlaqəli üslublar. Məsələn, bir paraqraf üçün CSS varsa (

    ) mətnin rəngini mavi, sonra qalın bir aralıq təyin edir yeni bir üslub bəyannaməsi dəyişdirməyincə bu paraqrafın içərisindəki kursiv () mətn də mavi olacaqdır.

    CSS-in necə işlədiyi - Əsas baxış

    Bir sənəddə CSS-i necə daxil etmək olar

    CSS bir sənəd içərisindəki bir elementin içərisinə və ya HTML sənədindən, başın içərisinə bağlanan ayrıca .css fayllarına ("stil tabloları" adlanır) daxil edilə bilər..

    rel ="üslub cədvəli" növü ="mətn / css" href ="tema.css">

    p {
    şrift ailəsi: Gürcüstan, "Times New Roman", serif;
    }

    Bir sənəddə birdən çox üslub cədvəlinə bağlaya və birdən çox etiket əlavə edə bilərsiniz.

    Demək olar ki, həmişə səhifəyə bir element yerləşdirməkdənsə CSS-ni əlaqəli bir stil cədvəli vasitəsilə daxil etmək daha yaxşı bir təcrübədir. Bağlı üslubların mənalı olduğu xüsusi hallar var (məsələn, e-poçt), lakin baş barmağın ümumi qaydası belədir - bir tərz cədvəlinə qoşula bilsəniz,.

    Stil bəyannamələri

    Bir üslub cədvəli bir sıra üslub bəyannaməsi şəklini alır. Bunlar aşağıdakı kimi qeyd olunur:

    [selektor] {
    [atribut]: [dəyər];
    [atribut]: [dəyər];
    }

    / * burada şərhlər * /

    Yəni:

    • Nümunə edildiyini ifadə edən bir selektor və ya element identifikatoru. Bunlara aşağıdakılar daxildir (daha çox var):
      • Bir element növünün adı: a, p, dl və s. Bu tip üslubun bütün elementlərinə şamil olunur.
      • Sinif identifikatoru - nöqtəli (.) Prefiks edilmiş bir sinif adı..
      • Şəxsiyyət identifikatoru - hash işarəsi (#) ilə əvvəlcədən təsdiqlənən şəxsiyyət adı..
      • Yuxarıda göstərilənlərdən biri və başqa bir ixtisas seçicisi, məsələn bir psevdoklass: hover.
    • Verilmiş elementlə bağlı üslub qaydalarının başlanğıcını bildirən açılış qıvrımlı qolbaq.
    • Xüsusiyyət dəyəri cütləri ilə ifadə olunan və yarım nöqtəli nöqtələrlə bağlanan üslub qaydaları.
    • Bu element üçün üslub qaydalarının bitməsini bildirən bağlanmış qıvrımlı qolbaq.

    Misal üçün:

    html {
    rəng: # 222222; / * mətn rəngi - çox tünd boz * /
    şrift ailəsi: Gürcüstan, "Times New Roman", Garamond, serif;
    şrift ölçüsü: 14px;
    xətt boyu: 22px;
    }

    / * Bu bir şərhdir. * /

    #logo {/ * Element ID tərəfindən stil * /
    rəng: # B20000;
    şrift ailəsi: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .widget {/ * Element sinifinə görə stil. * /
    eni: 100%;
    haşiyə: bərk 2px qara;
    padding: 22px 11px;
    }

    a {
    rəng: # 008AE6;
    }

    a: hover {
    rəng: # 006EB8;
    mətn bəzəyi: alt;
    }

    Sənəd Ağacı

    Bir çox insan HTML sənədini xətti bir quruluş kimi düşünür: əvvəlcə, sonra, sonra, sonra .

    Ancaq HTML sənəd həqiqətən bir ağacdır:

    • HTML
      • Baş
      • Başlıq
      • Meta
      • Bədən
      • Başlıq
        • H1
        • nav
      • Əsas
        • səh
          • a
          • a
          • güclü
        • ol
          • li
          • li
          • li
            • a
      • Bir kənara
        • bölmə
        • bölmə
        • bölmə
      • Altbilgi

    Hər bir element başqa bir elementin içərisinə qoyulur.

    CSS-də bəzi üslub bəyannamələri elementin ölçüsünə və ya formasına təsir göstərir. Bunun içindəki elementlərə heç bir təsiri yoxdur.

    Lakin digər üslublar elementin məzmununa təsir göstərir - mətn rəngi, fon rəngi, şrift ölçüsü, boşluq. Bu üslublara sənəd ağacından aşağı "kaskad" deyilir. Fərqli bir üslub bəyannaməsi daha konkret bir nöqtədə ləğv etməyincə, digər elementlər də daxil olmaqla bütün məzmun təsirlənir.

    Aşağıdakı nümunəni nəzərdən keçirin:

    href ="">Bir başlıq içərisində lövbər

    href ="">

    Çapa içərisində başlıq

    a {
    rəng: mavi;
    }

    h1 {
    rəng: yaşıl;
    }

    Hansı biri mavi, kimisi yaşıl olacaq?

    Bu vəziyyətdə, ilk xətt (bir başlıq içərisindəki lövbər) mavi, digəri isə yaşıl olacaq.

    Niyə?

    Birinci misalda,

    stil yaşıldır, buna görə içindəki hər şey yaşıl olmalıdır. Ancaq sonra, içərisində, mətni mavi rəngə gətirən bir lövbər. Lövbər daha konkretdir - stillənmiş mətnə ​​daha yaxındır - buna görə də mavi üslubu üstünlük təşkil edir.

    Bunun əksi ikinci nümunədəki vəziyyətdir. Element mavi məzmuna sahib olmalıdır, lakin bu üslub məzmununu yaşıl rəngə çevirən başlıqdan üstündür.

    CSS seçiciləri

    Hər CSS bəyannaməsi bir seçici ilə başlayır. Bu element növü, sinif və şəxsiyyət və ya bir sıra digər şeylər ola bilər.

    Bir sənəddə yalnız hər hansı bir elementi hədəfləmək üçün bir yol var - yalnız sinif və şəxsiyyət sənədinə görə deyil, sənəddəki yer, kontekst, digər atributlar.

    Selektor bəyannamələri də birləşdirilə bilər. Misal üçün:

    # konteyner div {
    }

    Bu # kontakt elementinin içərisindəki bütün elementləri seçir.

    Budur daha vacib seçicilər və seçici formatları.

    • * - Bütün elementləri seçir.
    • element adı - müəyyən bir növün bütün elementlərini seçir.
    • .sinif adı - Elementləri sinif adı ilə seçir.
    • #id - ID ilə elementləri seçir.
    • element-name.class-name - Sinif adına uyğun müəyyən bir element elementlərini seçir.
    • selector1, selector2 - Vergilərlə ayrılmış seçicilər ya selector1, ya da selector2 ilə göstərilən bütün elementlərə uyğundur.
    • selector1 selector2 - Yalnız bir boşluq olan digər bir seçicinin ardınca gələn bir selektor, uyğun bir selektorun içərisində olan bütün selektorları uyğunlaşdırır..
    • selektor1>selector2 - Selector1-in dərhal uşaqları olan selector2-ə uyğun bütün elementləri seçir.
    • [atribut] - Kvadrat mötərizədə olan bir atribut adı, dəyəri nə olursa olsun, bu atributu olan bütün elementləri seçir.
    • [atribut = dəyər] - Xüsusi xüsusiyyət-dəyər cütü olan elementləri seçir.
    • [atribut ~ = string] - Göstərilən atributlar dəyərində göstərilən sətrin olduğu elementləri seçir.
    • selektor: ilk uşaq - ana elementlərinin ilk övladı olan elementləri seçir. Bu səhifədəki açılış abzasını tərtib etmək üçün əsas p: ilk uşağa (məsələn) istifadə edilə bilər.
    • selector :: birinci məktub - Uyğun elementin ilk hərfini seçir. Damla effekti yaratmaq üçün istifadə edilə bilər.
    • selector :: birinci sətir - Uyğun elementdə mətnin ilk sətrini seçir.
    • giriş: odaklanma - Fokus olduqda bir forma daxil etmə üslubu.
    • a: hover, a: aktiv, a: ziyarət edildi - üslub lövbərləri qarşılıqlı təsir dövrlərindəki müxtəlif nöqtələrdə.

    Bunlara əlavə olaraq daha çox şey var.

    CSS və səhifə quruluşu - qutu modeli

    CSS Box Model, CSS-in görüntüləri və blok səviyyəli elementlərin mövqeyinin izahıdır.

    Blok elementləri nədir?

    Blok səviyyəli elementlər, eni və hündürlüyü olan və (əvvəlcədən) əvvəl və sonrakı bir xətt fasiləsi olan HTML elementləridir. Onlar məzmun bloklarını təmsil edirlər. (Bu mətn aralığını təmsil edən və standart olaraq yeni xətlər yaratmayan daxili elementlərdən fərqli olaraq.)

    Defolt olaraq blok səviyyəsində olan bir sıra elementlər var:

    • - Əlaqə məlumatı.
    • - Məqalə məzmunu.
    • - Məzmunu bir kənara.
    • - Səs pleyeri.
    • - Uzun ("blok") kotirovka.
    • - Kətan çəkmək.
    • - Tərif təsviri.
    • - Sənəd bölgüsü.
    • - Tərif siyahısı.
    • - Sahə dəsti etiketi.
    • - Şəkil başlığı.
    • - Başlığı olan media (adətən bir görüntü).
    • - Bölmə və ya səhifə altbilgi.
    • - Giriş forması.
    • ,

      ,

      ,

      ,

      ,
      - Başlıqlar.

    • - Bölmə və ya səhifə başlığı.
    • - Üfüqi qayda (bölücü xətt).
    • - Bu sənəd üçün unikal olan mərkəzi məzmunu ehtiva edir.
    • - naviqasiya əlaqələrini ehtiva edir.
    • - Skriptləmə dəstəklənmirsə və ya söndürülərsə istifadə ediləcək məzmun.
      1. - Sifarişli siyahı.
      2. - Forma çıxışı.
      3. - Paraqraf.

      4. - Ön formatlı mətn.
      5. - Bir veb səhifənin bölməsi.
      6. - Cədvəl.
      7. - Cədvəl altlığı.
        • - Sıralanmamış siyahı.
        • - Video pleyer.

        Hər hansı bir elementin stil ekranını təyin edərək blok səviyyəli element kimi davranmasına səbəb ola bilərsiniz: blok;.

        Genişlik və Boy

        Varsayılan olaraq, bir blok səviyyəli elementin eni hər hansı bir kənar, haşiyə və ya boşluq daxil olmaqla, blok səviyyəli elementin 100% -ni təşkil edir. (Yəni, kənar, haşiyə və boşluq daxil olmaqla bütün elementlər qabın içərisinə sığacaqdır.)

        Blok səviyyəli elementin standart hündürlüyü bütün məzmunun hündürlüyü, üstəlik hər hansı bir kənar, haşiyə və ya boşluqdur.

        Çox vaxt bir səhifə sxemini tərtib edərkən, hündürlüyünü deyil, elementlərin genişliyini də göstərmək istəyərsiniz. Bunun səbəbi, bir ekran pəncərəsinin eni hər hansı bir ekranda sabit ölçüdür, lakin səhifə istənilən hündürlük boyunca yuxarı və aşağı hərəkət edə bilər.

        Genişliyi (və hündürlüyü, lakin bunu tez-tez etmirsiniz) təyin etməyinizin qəribə tərəfi odur ki, göstərdiyiniz eni elementin ümumi eni olmayacaq.

        Qaydalar, haşiyə və padding

        Bir elementin məzmununa əlavə olaraq ümumi eni və ümumi hündürlüyü digər üç atribut tərəfindən müəyyən edilir:

        • margin - Bir element ətrafındakı sahə.
        • haşiyə - elementin perimetri ətrafında bir xətt.
        • padding - elementin perimetri içərisindəki boşluq.

        Hər hansı bir fon bəyannaməsi (məsələn, fon, rəngli rəng və ya fon şəkli) məzmun sahəsini, padding və haşiyəni əhatə edir. Marj arxa planı göstərmir.

        .sahə {
        eni: 100%;
        background-color: # 66FF33; / * Əhəng yaşıl * /
        }
        .içəri {
        eni: 100px;
        marj: 25px;
        haşiyə: 15px qara;
        padding: 25px;
        background-color: # 90acff;
        rəng: # 002346;
        şrift çəkisi: qalın;
        }

        sinif ="sahə">
        sinif ="içəri">
        Bu içəridə bəzi mətn var. Diqqət yetirin ki, daxili kənardan uzaqlaşdırılıb. Bu padding səbəb olur.

        # margin-padding-border .field {
        eni: 100%;
        background-color: # 66FF33; / * Əhəng yaşıl * /
        }
        # margin-padding-border .inside {
        eni: 100px;
        marj: 25px;
        haşiyə: 15px qara;
        padding: 25px;
        background-color: # 90acff;
        rəng: # 002346;
        şrift çəkisi: qalın;
        }

        Bu içəridə bəzi mətn var. Diqqət yetirin ki, daxili kənardan uzaqlaşdırılıb. Bu padding səbəb olur.

        Diqqət: Margin, haşiyə və boşluqlar CSS tərəfindən elan edilmiş genişliyə əlavə olunur. - Hündürlük məzmuna görə müəyyən edilir. - İçərişin marjası onu sahənin sol tərəfindən itələyir, lakin üst və alt üçün eyni deyil. Bu, CSS-in sınağıdır. İçindəki elementi qabın yuxarısından itələmək üçün tərkibindəki elementə padding əlavə edərdiniz. - Bir elementin sol və sağındakı marj onun ana elementi ilə və bacı elementləri ilə münasibətlərinə təsir göstərir. - Bir elementin yuxarı və altındakı marj yalnız bacı elementləri ilə münasibətlərinə təsir göstərir. - Fon rəngi məzmunun sahəsini, padding və haşiyəni doldurur, ancaq kənar deyil.

        Ümumi eni elan edilmiş genişliyi və həmçinin hər hansı bir kənarın, haşiyənin və padding genişliyini əhatə etdiyi üçün aşağıdakı bəyannamə işləmir:

        div {
        eni: 100%;
        marj: 5px;
        padding: 15px;
        }

        Əgər bu kimi bir iş görsəniz, 40px ilə tərkibindəki elementin sağ tərəfindən keçmiş genişləndiyini tapacaqsınız.

        Bu misalda, fikrin konteynerin tam genişliyini doldurmasına səbəb olduğu göründüyü üçün ən yaxşısı eni bəyannaməsini buraxmamaqdır. Bu, elementin daşqın olmadan, sadəcə qabının genişliyini doldurmasına səbəb olacaqdır.

        div {
        marj: 5px;
        padding: 15px;
        }

        Bununla birlikdə, yan sütunlara sahib olmaq üçün mövcud genişliyin yalnız yarısını alacaq bir elementə sahib olmaq istəyirsinizsə, bir az fərqli bir şey etməlisiniz..

        Üzən elementlər

        Blok səviyyəli elementlərin standart davranışları, konteynerlərinin tam genişliyini doldurmaq və özlərindən əvvəl və sonra bir xətt fasiləsi yaratmaqdır. Bir sıra blok səviyyəli elementləri bir sıra yerləşdirsəniz, onlar sadəcə səhifədən aşağıda görünəcək, hər biri əvvəlki kimidir:

        # konteyner {
        eni: 400px;
        background-color: #eeeeee;
        padding: 20px;
        }
        #container div {/ * #container-in uşaq elementləri olan bütün divləri hədəf alır. * /
        hündürlüyü: 50px;
        }
        #red {
        background-color: qırmızı;
        }
        #mavi {
        background-color: mavi;
        }
        # yaşıl {
        background-color: yaşıl;
        }

        id ="konteyner">
        id ="qırmızı">
        id ="mavi">
        id ="yaşıl">

        # div yığma. konteyner {
        eni: 400px;
        background-color: #eeeeee;
        padding: 20px;
        }
        # div yığın. konteyner div {
        hündürlüyü: 50px;
        }
        # div-stack .red {
        background-color: qırmızı;
        }
        # div yığın .blue {
        background-color: mavi;
        }
        # div yığın .yaşıl {
        background-color: yaşıl;
        }

        Hər birinin içini bir-birinin yanında oturacaqları qədər kiçik olsaq da, xətt kəsilməsi yenə də olacaq.

        # konteyner {
        eni: 400px;
        background-color: #eeeeee;
        padding: 20px;
        }
        # konteyner div {
        hündürlüyü: 50px;
        eni: 50px;
        }
        #red {
        background-color: qırmızı;
        }
        #mavi {
        background-color: mavi;
        }
        # yaşıl {
        background-color: yaşıl;
        }

        id ="konteyner">
        id ="qırmızı">
        id ="mavi">
        id ="yaşıl">

        # div-yığın-cılız. konteyner {
        eni: 400px;
        background-color: #eeeeee;
        padding: 20px;
        }
        # div-stack-skinny .container div {/ * #container-in uşaq elementləri olan bütün divləri hədəf alır. * /
        hündürlüyü: 50px;
        }
        # div-yığılmış cılız .red {
        background-color: qırmızı;
        }
        # div-yığın-cılız .blue {
        background-color: mavi;
        }
        # div-yığılmış cılız. yaşıl {
        background-color: yaşıl;
        }

        Hər birinin yanında oturmalarına icazə vermək üçün "üzməyə" icazə verilməlidir. CSS-də "float" sənədin digər elementlərinin üzən elementin ətrafında axmasına icazə vermək deməkdir. Bir blok element sola, sağa və ya mərkəzə yerləşdirilə bilər (mərkəz qeyri-adi). Birdən çox bacı elementləri üzmək üçün qurulubsa, kənarları ilə ayrılmış bir-birinin yanında olurlar.

        Bu üç rəngli qutulu saytı bir-birinin yanında etmək üçün sadəcə float əlavə etməliyik: sol və ya float: hər üçü üçün sağ.

        # konteyner {
        eni: 400px;
        background-color: #eeeeee;
        padding: 20px;
        }
        # konteyner div {
        hündürlüyü: 50px;
        eni: 50px;
        üzmək: sol;
        }
        #red {
        background-color: qırmızı;
        }
        #mavi {
        background-color: mavi;
        }
        # yaşıl {
        background-color: yaşıl;
        }

        id ="konteyner">
        id ="qırmızı">
        id ="mavi">
        id ="yaşıl">

        # div-üzmək. konteyner {
        eni: 400px;
        background-color: #eeeeee;
        padding: 20px;
        }
        # div-float .container div {/ * #container-in uşaq elementləri olan bütün divləri hədəf alır. * /
        hündürlüyü: 50px;
        }
        # div-üzən .red {
        background-color: qırmızı;
        }
        # div-üzmək .blue {
        background-color: mavi;
        }
        # div-üzən .yaşıl {
        background-color: yaşıl;
        }

        Xəbərdarlıq:

        • İlk rəngli blok (#red) konteynerin sol tərəfindədir, ardınca #blue və #green.
        • Onların marjası yoxdur, buna görə də birbaşa bir-birinin yanındadır.
        • # Konteynerin içindəki boşluq blokları aşağı və yuxarı sol küncdən uzaqlaşdırır.

        Ancaq - oh yox - # kontakt elementi ilə nə baş verir? Niyə rəngli bloklar asılıb?

        Üzmə ilə bağlı problemi həll edir: üzən bir element, ümumiyyətlə, qabının hündürlüyünə kömək etmir. Beləliklə, qabın hündürlüyü cəmi ilə müəyyən edilir:

        • hündürlüyü bəyannaməsi, əgər bir (bu yoxdursa) və ya onun elan edilməmiş bir hündürlüyü yoxdursa, üzülməmiş tərkibi var (bu vəziyyətdə, o da yoxdur)
        • şaquli döşəmə (üst və alt)
        • şaquli haşiyələr (üst və alt)
        • şaquli marj (yuxarı və alt)

        Bu vəziyyətdə # konteyner elementinin daxili hündürlüyü sıfır, ümumi hündürlüyü isə yastığının cəmi 2x-dir..

        Bu çox zəhlətökən və çox yayılmış problemdir. Həll (bir az hack) clearfix həlli adlanır. Bunu necə düzəltməyin bir neçə variantı var, lakin nümunələrimiz üçün daşqın əlavə edərək ən sadə birini istifadə edəcəyik. Bu işləmir bütün brauzerlərdə və ya bütün kontekstlərdə, lakin əksər brauzerlərdə kifayət qədər yaxşı işləyəcək ki, buradakı nümunələrimiz üçün əladır..

        Budur aydınlaşdırmanın əlavə olunması.

        # konteyner {
        eni: 400px;
        background-color: #eeeeee;
        padding: 20px;
        daşmaq: avto;
        }
        # konteyner div {
        hündürlüyü: 50px;
        eni: 50px;
        üzmək: sol;
        }
        #red {
        background-color: qırmızı;
        }
        #mavi {
        background-color: mavi;
        }
        # yaşıl {
        background-color: yaşıl;
        }

        id ="konteyner">
        id ="qırmızı">
        id ="mavi">
        id ="yaşıl">

        # div-float-fix. konteyner {
        eni: 400px;
        background-color: #eeeeee;
        padding: 20px;
        }
        # div-float-fix .container div {/ * #container-in uşaq elementləri olan bütün divləri hədəf alır. * /
        hündürlüyü: 50px;
        }
        # div-float-fix .red {
        background-color: qırmızı;
        }
        # div-float-fix .blue {
        background-color: mavi;
        }
        # div-float-fix .yaşıl {
        background-color: yaşıl;
        }

        İndi bəzi kənarları, padding, məzmunu və daha az parlaq rənglər əlavə etsək, bu əsas fikrin standart bir məzmuna + yan çubuğu düzülüşünə necə çevrilə biləcəyini görə bilərsiniz..

        # konteyner {
        background-color: #eeeeee;
        daşmaq: avto;
        padding: 20px;
        eni: 600px;
        }

        əsas {
        üzmək: sol;
        background-color: #efefef;
        eni: 300px;
        padding: 15px;
        marja sağ: 20px;
        }

        kənara {
        üzmək: sol;
        background-color: #dedede;
        padding: 15px;
        eni: 220px;
        }

        id ="konteyner">

        Lorem Ipsum

        Lorem ipsum dolor amet oturur, adipiscing elit. Əsas şərtlər, bir neçə elementi ulamcorper, yalnız iki növ turpis, yalnız bir turpis turpis aussed. Quisque vel malesuada erat. Vestibulum qeyri-felis və turpis iaculis iaculis.

        Aralıq metusda, aracı lacinia mühazirələrini oxudu. Vestibulum vulputate neque eget və normal məhsullardır. Bir turpis nec scelerisque təsirini aradan qaldırır. Donec mallar, diam id id nəticələr, yalnız bir sərbəst buraxma, fringilla ante dui işgəncə. İpsum nec pellentesque-də sed effektivliyi.

        Arxivlər

        • May 2015
        • Aprel 2015
        • Mart 2015
        • Fevral 2015
        • Yanvar 2015

        # sadə tərəfli çubuğu. konteyner {
        background-color: #eeeeee;
        daşmaq: avto;
        padding: 20px;
        eni: 600px;
        }

        # sadə tərəfli əsas {
        üzmək: sol;
        background-color: #efefef;
        eni: 300px;
        padding: 15px;
        marja sağ: 20px;
        }

        # sadə tərəfli panel kənara {
        üzmək: sol;
        background-color: #dedede;
        padding: 15px;
        eni: 220px;
        }

        Lorem Ipsum

        Lorem ipsum dolor amet oturur, adipiscing elit. Əsas şərtlər, bir neçə elementi ulamcorper, yalnız iki növ turpis, yalnız bir turpis turpis aussed. Quisque vel malesuada erat. Vestibulum qeyri-felis və turpis iaculis iaculis.

        Aralıq metusda, aracı lacinia mühazirələrini oxudu. Vestibulum vulputate neque eget və normal məhsullardır. Bir turpis nec scelerisque təsirini aradan qaldırır. Donec mallar, diam id id nəticələr, yalnız bir sərbəst buraxma, fringilla ante dui işgəncə. İpsum nec pellentesque-də sed effektivliyi.

        Arxivlər

        • May 2015
        • Aprel 2015
        • Mart 2015
        • Fevral 2015
        • Yanvar 2015

        #### __Extra

        s__

        Mükəmməl bir dünyada, HTML sənədindəki hər bir element semantik cəhətdən əhəmiyyətli olacaq, yalnız sənədin məzmunu ilə əlaqəli və təqdimat üslublarını dəstəkləmək üçün heç vaxt əlavə edilməzdi.

        Əsl dünya, təəssüf ki, mükəmməldən uzaqdır. Son on ildə işlər daha yaxşı alındı, ancaq səhifəni düzgün göstərmədən başqa heç bir səbəb olmadan kənar element əlavə etməyiniz lazım olduğu vaxtlar var..

        Bloqların çoxu - yəqin ki, əksər veb saytlar - adi bir nümunəni izləyin:

        • Səhifənin genişliyini əhatə edən başlıq bölməsi
        • Mərkəzi məzmun sahəsi iki sütuna bölünür:
          • Əsas məzmun üçün eni 2/3
          • Bir widget yan çubuğu üçün eni 1/3
        • Səhifənin genişliyini əhatə edən altbilgi hissəsi.

        Bu sənəd quruluşu üçün ideal işarələmə:

        Təəssüf ki, tərkibində olan bir elementin içərisində üzə bilmədikləri təqdirdə və elementlərin bir-birinin yanında düzgün oturmasına səbəb olmur..

        Buna görə, tipik bir blog düzeni üçün ən çox görülən işarələmə quruluşu həqiqətən belə görünür:

        id ="konteyner">

        Tez-tez oxşar bir konteyner elementinin düzgün bir səhifəni göstərməsi üçün ehtiyac duyduğu hal olacaq. Bundan narahat olmayın - veb mətnə ​​əsaslanan sənədlər toplusu olduğu qədər vizual bir mühitdir.

        Mətn üslubu üçün CSS

        CSS həm sənəd quruluşunun, həm səhifə quruluşu, həm də mətn üslubu daxil olmaqla bütün sənədlər üçün istifadə olunur. CSS və mətbəə ilə bağlı bir kitab ola bilər, ancaq əsas anlayışlara qısa bir giriş bu təlimat üçün ediləcəkdir.

        Kaskad

        CSS-də mətn üslubu haqqında düşünərkən Cascading Style Sheets-in kaskad hissəsini xatırlamaq xüsusilə vacibdir..

        Məzmunu təsir edən bir stil əlavə etdikdə (element şəkli, ölçüsü və ya yerləşdirilməsindən fərqli olaraq), sənəd stili aşağıya endirilir. Beləliklə tətbiq olunan hər hansı bir üslub bütün məzmunu təsir etmək üçün tətbiq olunur, tətbiq olunan hər hansı bir üslub isə içindəki bütün məzmunu təsir edir.

        Bunun praktik əhəmiyyəti budur ki, üslub cədvəlinizi ümumi səviyyədən spesifikaya qədər qurmalısınız. Adətən məzmunun əksər hissəsini əhatə edən vahid baza şriftini qoymalı və ardınca fərqli olan müəyyən nöqtədə (məsələn, menyular və ya düymələr üçün) hər hansı bir şrift qoymalısınız..

        Mətbəə ilə əlaqəli hər hansı bir üslub bəyannaməsi, tətbiq olunduğu ən ümumi (ağacın ən yüksək) nöqtəsinə daxil edilməlidir. Bu, üslubları təkrarlamamağa kömək edəcəkdir.

        Üslublar

        Mətn üslubu və mətbəə üçün ən uyğun stil bəyannamələri:

        font-family: İstifadə ediləcək şrift (lər) i müəyyənləşdirir. : Ən yaxşı təcrübə, seçdiyiniz şriftdən və ümumi bir şrift ailəsi ilə bitən bir sıra nöqsanlardan başlayaraq şrift siyahısını elan etməkdir. : Boşluq olan şrift adları sitat işarələrinə sarılmalıdır. : font-ailə: Garamond, Georgia, "Times New Roman", serif;

        font-size: Mətnin ölçüsünü təyin edir. : Piksel ölçüsü (14px), valideynlərin mətn ölçüsü (1em) əsasında tipografik ems, valideynlərin mətn ölçüsünə görə faiz (115%), təsvir ölçüsü adı (kiçik, orta, böyük) və ya valideynlərin mətn ölçüsünə əsaslanan müqayisəli təsviri (daha kiçik, daha böyük). : şrift ölçüsü: 14px;

        line-height: Mətn xəttinin hündürlüyünü göstərir. : Bu adətən şrift ölçüsündən daha böyük olmalıdır. Mətnin bir xətti, adətən, xətt boyu daxilində mərkəzləşmişdir. : Sətir boyu piksel, ems və ya faizlə göstərilə bilər. Ayrıca şrift ölçüsündə bir çarpan olaraq təyin edilə bilər; bu vahid şəkilçi şəkilçisi çıxarmaqla edilir. : xətt boyu: 1.4;

        margin-bottom: Paraqraflar, başlıqlar, siyahılar və digər mətbəə elementlərinin altındakı marj ümumi oxunuşa kömək edir. : Bu atribut sənəddə və ya bölmədə deyil, hər təsirə məruz qalan elementdə qurulmalıdır. : Tipik olaraq, xətt hündürlüyünə bərabər olan margin altını təyin etmək ən yaxşı nəticələr yaratdı. : margin-alt: 1.4em;

        rəng: Mətnin standart rəngi qara rəngdədir. Bunu daha az diqqətəlayiq bir şeyə dəyişmək istəyə bilərsiniz. : rəng: # 111111; : Ayrıca, keçidlərdə olub olmadığını bildirmək üçün standart rənglər dəsti və aktiv vəziyyətlərini ifadə edən bir rəng var. : Tipik olaraq, standart link rəngi xüsusilə arzu olunmur. Çapa etiketinin müxtəlif vəziyyətləri üçün rəng dəyişdirmək üçün: a: link (standart), a: hover, a: ziyarət edildi və a: aktiv. : a: hover {color: # 3399FF; }

        font-weight: Font-weight mətnin qalın və ya normal olub-olmadığını idarə edən xüsusiyyətdir. : Spesifikasiyaya görə, çəki çox dəqiqliklə təyin etmək üçün rəqəmsal bir dəyər istifadə edə bilərsiniz. Ancaq bu, çox şriftlər və ya brauzerlər tərəfindən yaxşı dəstəklənmir və bu adi bir hal deyil. : Şrift-çəkinin ən çox yayılmış istifadəsi sadəcə qalınlığı göstərməkdir. : güclü {font-weight: qalın; }

        font-stil: Şrift üslubu kursiv tipi göstərmək üçün istifadə olunur. : Müvafiq dəyərlər normal və kursivdir. (Üçüncü bir seçim, oblique, nadir hallarda istifadə olunur.: Em {font-style: italic;}

        mətn bəzəyi: Bu, mətn aralığına bir sətir əlavə etmək üçün istifadə olunur: artıq (üst-üstə düşür - nadir hallarda istifadə olunur), üzərindən (xətti ilə - silinmiş mətn üçün istifadə olunur) və ya altında (alt-alt - bağlantılar üçün istifadə olunur və bəzən başlıqlar üçün) . : a {mətn bəzək: alt alt; }

        text-transform: Bu xüsusiyyət mətnin kapitallaşmasına nəzarət etməyə imkan verir. : Müvafiq dəyərlər bunlardır: böyük hərflə yaz (başlıq işi), böyük hərf (BÜTÜN CAPS) və kiçik hərf (bütün kiçik hərflər). : h3 {mətn çevirmək: böyük; }

        font-variant: Bu kiçik hərfləri təyin etmək üçün istifadə olunur. Məzmundakı bütün kiçik hərfləri kiçik hərf ölçüsündə böyük hərflərlə tənzimləyir. : h1 {font-variant: kiçik başlıqlar; }

        @ font-face: Bu bir elementə təyin edilmiş bir xüsusiyyət deyil, lakin CSS sənədində selektor rolunu oynayır. Yeni bir şrift ailəsini təyin etmək üçün istifadə olunur. Bu, dizaynerlərə müştəri kompüterlərinin sistem şriftlərinə güvənmək əvəzinə istədikləri şriftləri təyin etməyə imkan verir. : Şrift-ailə mülkiyyəti yeni şriftin adını (digər elementlərin şrift-ailə xüsusiyyətində istifadə ediləcək) müəyyənləşdirir və src xassəsi bir yazı sənədini göstərir. : Bütün brauzerlərdə bütün font fayl formatları dəstəklənmir. Ən çox dəstəklənən formatlar TTF, OTF və WOFF (lakin WOFF2 deyil). : Bir şriftin dəyişmələri (qalın, kursiv) ayrıca yazı sənədlərinə ehtiyac duyursa, fərqli @ src xassələri olan və kontekstini göstərən əlavə xassələri olan (misal üçün - font-weight: qalın ;): @ font-face {font-family: myNewFont; src: url (myNewFont.woff;}

        Tipoqrafiya haqqında göstərişlər

        Veb mətbəəsi çətin məsələdir. Əksər brauzerlərdə mətnin standart görüntüsü həqiqətən cəlbedicidir və mətnin yaxşı görünməsi və oxunması asan olmayan bir problemdir.

        Bir sayt tipografiyasını tərtib edirsinizsə, aşağıdakı tövsiyələri unutmayın.

        • Bütün mümkün mətbəə üslublarını ehtiva edən bir mətn səhifəsindən istifadə edin. Bir çox veb mətbəə dizaynerləri, sonrakı təsvirlər siyahılarını (), bloknotları (), başlıqları unuturlar

          (

          ,

          ,
          ) və digər nadir hallarda istifadə olunan üslublar. Ancaq nadir hallarda istifadə olunsalar da, istifadə olunurlar. İçinə daxil edilmiş siyahıları, başlığı olan və olmayan şəkilləri və kod nümunələrini də daxil etməyinizə əmin olun (texnologiya haqqında yazırsınızsa).
        • Elementlərin marjlarının bir-biri ilə və konteksti ilə necə qarşılıqlı olduğuna diqqət yetirin. Məsələn, başlıqlara marjalı üst qoymaq çox yaygındır. Bəzi kontekstlərdə bu məna verə bilər, lakin əgər onun ilk elementi varsa, bu düzgün görünməməlidir. Eynilə, bir abzasdan sonra bir bölmə başlığı, bir xətt boşluğunu çoxaltmaqla nəticələnə bilər, istədiyinizdən daha çox vizual fasilə yaradır..
        • Səhifələrin mətnini daimi ritmdə saxlamaq üçün xətt boyu dəyərini miqyaslı qayda olaraq istifadə edin. Qlobal xətt boyundan daha böyük şriftlər (məsələn, başlıqlar) onların xətt boyu qlobal dəyərdən çox olmalıdır. Elementlərin altındakı kənarlar və quraşdırılmış (girintili) hissələr üçün xətt boyu dəyərini də istifadə edin.
        • Paraqrafları ikiqat xətt aralığı ilə müəyyən etmək adi haldır (xətt hündürlüyü ilə eyni dəyərə qoyulan bir kənar-alt ilə tamamlanır). Ayrıca abzasların qoyulmaması da adi haldır.
        • Lists, hündürlüyü (və ya bir neçə) hündürlüyü ilə təxminən eyni məsafədə daha yaxşı qurulmuş görünür.
        • Təsvir siyahılarında həqiqətən pis standart tərz var. Ümumiyyətlə bütün siyahı qurulmuş, qalın və yığılmış daha yaxşı görünürlər.
        • Bir səhifə üçün ilkin şrift ölçüsünü 12px-a təyin etmək çox yaygındır, lakin bu çox oxunmur. 14px və ya hətta 16px-ı qlobal bir baza şrift ölçüsü kimi qəbul edin (şrift ailənizə görə).
        • Şriftin rəngini qara (standart) tərk etmək çox yaygındır, lakin ümumiyyətlə çox tünd boz daha cəlbedici və oxunaqlıdır.
        • Links () internetin başlanğıcından bəri demək olar ki, hər brauzerdə standart olaraq mavi rəngdədir. Brendinizə uyğun bağlantılar rəngini dəyişdirmək istəsəniz (və etməlisiniz), ehtimal ki, mavi bir kölgə olmalıdır. Mavi mətni digər yerlərdə istifadə etməkdə də diqqətli olun, çünki istifadəçilərə mətni vura bilməsi üçün siqnal verə bilər.
        • Eynilə, vurulmuş mətn, bir şeyin tıklanabilir olduğuna dair universal bir siqnaldır. Bu konvensiyanı öz təhlükənizlə dəyişdirin.
        • İnternetdə serif şriftlərdən yayınmaq və yalnız sans serif şriftlərdən istifadə etmək üçün ümumi bir məsləhət idi. Bu yaxşı məsləhət idi, çünki serif şriftlər aşağı qətnamə ekranlarında göstərilmir. Ancaq bu artıq insanların çoxu üçün narahat deyil. Bir serif şriftdən (Gürcüstan, Times və ya Garamond kimi) istifadə etmək mətni daha oxunaqlı hala gətirə bilər.
        • Ümumiyyətlə, bir səhifədə üçdən çox şrift istəmirsiniz:
          • Serif və ya sans ola biləcək bir məzmun şriftidir.
          • Adətən sans serif olmalıdır və eyni zamanda məzmun şriftinizlə eyni ola biləcək bir menyu və naviqasiya şriftidir.
          • Kod nümunələri üçün bir şrift (bu cür bir iş görsəniz), Courier və ya Console kimi bir monosfer şrifti olmalıdır.
        • Bir mətnin "ölçüsü" bir sətirdə işarələrin sayıdır. 80 simvoldan çox ölçü oxunmaz hala gəlir. Əksər mütəxəssislər ideal sətirdə təxminən 65 simvoldan istifadə edəcəklər. Bu məzmun sahənizin genişliyi və şriftinizin ölçüsüdür.
        • Bir səhifəyə öz şriftinizi idxal etmək üçün @ font-face istifadə edirsinizsə, bunun birdən çox brauzerdə necə göründüyünə əmin olun. Bəzi brauzerlər müəyyən şriftləri zəif göstərirlər. Ayrıca şifrə-ailə bəyannamələrinizə geri fonları daxil etməyinizə əmin olun - hər vəziyyətdə işləmək üçün hər zaman @ font-face-yə arxalana bilməzsiniz.

        CSS Animasiya

        CSS Javascript olmadan HTML elementlərini canlandırmağa imkan verir. Sadə effektlər üçün bu olduqca əlverişli ola bilər. Javascript-də yaradılan bənzər effektlərdən daha sürətli görünür və hətta Javascript əlili olan brauzerlərdə də dəstəklənəcəkdir.

        Açar çərçivələr

        Bir animasiya @keyframes adlanan CSS seçicisi ilə müəyyən edilir. Bir @keyframes bəyannaməsinin adı var və animasiyada müxtəlif nöqtələr (açar çərçivələr) üçün üslub qaydaları toplusu.

        @keyframes colorChange {
        dən {
        background-color: qırmızı;
        }
        üçün {
        background-color: mavi;
        }
        }

        Yuxarıdakı misalda, "colorChange" animasiya bir elementin fon rəngini qırmızıdan maviyə dəyişdirməsinə səbəb olur.

        Daha çox rəng canlandırıla bilər. Vəzifə təyin etmək üçün @keyframes qaydalarından istifadə təsirlənmiş elementin bir yerdən digərinə keçməsinə səbəb olacaqdır.

        @keyframes hərəkətLeft {
        dən {
        mövqe: nisbi;
        sol: 100px;
        üçün {
        mövqe: nisbi;
        sol: 0px;
        }
        }

        Faizlərdən istifadə edərək çox nöqtəli bir animasiya da təyin edilə bilər.

        @keyframes hərəkətAround {
        0% {
        üst: 0px;
        sol: 0px;
        }
        25% {
        üst: 0px;
        sol: 50px;
        }
        50% {
        üst: 50px;
        sol: 50px;
        }
        75% {
        üst: 50px;
        sol: 0px;
        }
        100% {
        üst: 0px;
        sol: 0px;
        }
        }

        Bu animasiya cizgi elementinin yuxarı, aşağı, geri hərəkət etməsinə və orijinal vəziyyətinə qayıtmasına səbəb olardı.

        Elementlərə animasiyalar təyin etmək

        Animasiyalar təsir edəcək elementlərdən ayrıca təyin olunur. Animasiyalar yuxarıda göstərildiyi kimi @keyframes bəyannamələrində müəyyən edilir və sonra elementlərə tətbiq olunur.

        Animasiyalar @keyframe adını istifadə edərək elementlərə tətbiq olunur və animasiyanın davam etməsi üçün uzun müddətdir. Digər atributlar animasiyaya da təsir edə bilər.

        @keyframes colorChange {
        dən {
        background-color: qırmızı;
        }
        üçün {
        background-color: mavi;
        }
        }

        .rəng dəyişən {
        eni: 100px;
        hündürlüyü: 100px;
        animasiya adı: colorChange;
        animasiya müddəti: 5s;
        }

        @keyframes colorChange {
        dən {
        background-color: qırmızı;
        }
        üçün {
        background-color: mavi;
        }
        }

        @ -webkit-keyframe colorChange {
        dən {
        background-color: qırmızı;
        }
        üçün {
        background-color: mavi;
        }
        }

        # rəng dəyişdirmə-demo. rəng dəyişdirən {
        eni: 100px;
        hündürlüyü: 100px;
        animasiya adı: colorChange;
        animasiya müddəti: 5s;
        -webkit-animasiya adı: colorChange;
        -webkit-animasiya-müddəti: 5s;
        }

        Animasiya müddətini təyin etməsəniz, animasiya işə düşməyəcək, çünki standart dəyəri 0-dır.

        Bir neçə digər animasiya xüsusiyyətləri də təyin edilə bilər:

        • animasiya gecikməsi - bir animasiyanın başlaması üçün bir gecikməni təyin edir. Varsayılan 0, yəni animasiya dərhal oynayacaqdır. Adətən saniyə (s) ilə qeyd olunur, eyni zamanda millisaniyədə (ms) qeyd edilə bilər.
        • animasiya istiqaməti - Bir animasiyanın normal olaraq (standart) tərs olaraq işləməsini və ya tərs istiqamətdə irəliləməsi üçün alternativ olduğunu təyin edir. Alternativ dəyər yalnız animasiya-iteration-sayı 1-dən yüksək olduqda işləyir.
        • animasiya doldurma rejimi - animasiyanın işləmədiyi zaman (bitdikdə və ya gecikmə olduqda) animasiyadan olan üslubların elementə necə təsir etdiyini və necə olacağını müəyyənləşdirir..
          • normal - Defolt. Animasiya üslubları element çalmadığı zaman elementə təsir göstərmir.
          • irəli - Sonuncu kadr çərçivəsi üslubu (və ya 100% animasiya tərs işləməsə) elementə tətbiq olunur.
          • geriyə - İlk açar çərçivə üslubu (animasiya tərs işləmədiyi təqdirdə və ya 0%) elementə tətbiq olunur.
        • animation-iteration-count - Bir animasiyanın ifa olunma müddətini göstərir.
        • animasiya-vaxtlama funksiyası - animasiyanın sürət əyrisini müəyyənləşdirir:
          • rahatlıq - Cizgi yavaş başlayır, sürətlənir və sonra yavaş-yavaş bitir.
          • rahatlıq - Animasiya yavaş başlayır, sürətlənir və tam sürətlə başa çatır.
          • rahatlaşma - Animasiya tam sürətlə başlayır, ancaq sona çatdıqca yavaşlayır.
          • xətti - animasiya əvvəldən sona qədər tam sürətlə davam edir.
        Animasiyalar üçün brauzer dəstəyi

        Əksər brauzerlər CSS animasiyalarını dəstəkləyir, lakin WebKit göstərici enegine (Safari, Chrome, Opera) istifadə edən brauzerlərlə qəribə bir söhbət yaradır..

        Animasiyaların həmin brauzerlərdə işləyəcəyinə əmin olmaq üçün @keyframes bəyannaməsini və animasiya tapşırıq atributlarını xüsusi bir webkit sintaksisi ilə kopyalamalısınız.

        / * Bu webkit olmayan brauzerlər üçündür. * /
        @keyframes hərəkətLeft {
        dən {
        mövqe: nisbi;
        sol: 100px;
        üçün {
        mövqe: nisbi;
        sol: 0px;
        }
        }

        / * Bu, webkit brauzerlər üçündür: Chrome, Safari və Opera. * /
        @ -webkit-keyframe hərəkətLeft {
        dən {
        mövqe: nisbi;
        sol: 100px;
        üçün {
        mövqe: nisbi;
        sol: 0px;
        }
        }

        #animationSupportDemo {
        animasiya adı: moveLeft;
        animasiya müddəti: 4s;
        -webkit-animasiya-ad: moveLeft; / * Chrome, Safari və Opera. * /
        -webkit-animasiya-müddəti: 4s; / * Chrome, Safari və Opera. * /
        }

        (Yuxarıdakı canlı nümunələrdə bu əlavə üslublar daha az mürəkkəbləşdirmək üçün kod nümunələrinə deyil, çalışan demo kodlarına əlavə edilmişdir.)

        Bu lazımsız və səfeh görünə bilər (çünki bu), ancaq animasiyaların həmin brauzerlərdə işləməsini təmin etməyin yeganə yolu.

        CSS Animasiyalarından nə vaxt istifadə ediləcək

        Bir arcade oyunu kimi ekranın ətrafında uçan yüksək dinamik elementlərə ehtiyacınız varsa, CSS animasiyaları həqiqətən getmək yolu deyil - Javascript-ə daha uyğundur.

        Bir səhifəyə incə dizayn inkişaf etdirmələri üçün CSS animasiyalarından ən yaxşısı istifadə olunur. Bəzi misallar: bir qrafik çubuğunu doldurmaq - hover-də bir nişanı aşağı çəkmək - Bir istifadəçi səhifəni fırladaraq uçan elementlər - Arka plan rənginin yavaş və incə dəyişiklikləri - tıklamağı təşviq etmək üçün "dönən" düymələr

        CSS Animasiyasını Javascript ilə birləşdirir

        CSS animasiyalar ya dərhal başlayır, ya da müəyyən bir gecikmədən sonra. Ancaq baş verən bir hadisə ilə əlaqədar bir CSS animasiyasını tetiklemek istəsəniz, CSS-də animasiyanı "durdurulmuş" vəziyyətə gətirə bilərsiniz və sonra Javascript-lə bir ara verin. Animasiyaya fasilə vermək atribut animasiya-play-statusu ilə edilir.

        .ara verildiAnimasiya {
        animasiya adı: nümunə;
        animasiya müddəti: 5s;
        animasiya-play-status: durduruldu;
        -webkit-animasiya-ad: misal;
        -webkit-animasiya-müddəti: 5s;
        -webkit-animasiya-play-status: durduruldu;
        }

        Boşaldılmadığı zaman animasiya-play-statusun dəyəri. Bunu Javascriptdə idarə etmək olar:

        [element] .style.animationPlayState = "qaçış"

        Real Dünyada CSS

        Veb inkişafı və dizaynının real dünyasında çox az inkişaf edən bir HTML sənəd və boş CSS faylı ilə oturub sıfırdan üslublar göstərməyə başlayır. (Buna baxmayaraq əlbəttə əyləncəli ola bilər.)

        CSS dizaynerlərinin işlərini daha asan və ardıcıl etmək üçün adətən izlədikləri bir sıra tipik "yaxşı təcrübələr" var.

        CSS sıfırlama

        Bütün HTML elementləri brauzer tərəfindən təyin edilmiş standart üslublara malikdir. Hər brauzerdə bir az fərqli standart üslub var. Bu, bir stil cədvəli olan bir sənədin müxtəlif brauzerlərdə fərqli görünə biləcəyi deməkdir. (Dəstək və uyğunluq məsələlərindən başqa.)

        "CSS sıfırlama" hər hansı digər üslub elan olunmazdan əvvəl CSS üslub cədvəlinə yerləşdirilə bilən üslublar toplusudur. CSS resent bütün brauzerlərdə üslub əlavə etmək üçün ümumi bir baza təqdim edir.

        CSS sıfırlamaları, köhnə brauzerlərdə standart görüntülərə sahib olmaya biləcək HTML5 elementləri üçün standart ekran üslublarını təyin etmək üçün də istifadə olunur - kimi və .

        Bir neçə ümumi CSS sıfırlama şablonu var. Ən məşhuru Eric Meyerin yaratdığı əsərdir.

        / * http://meyerweb.com/eric/tools/css/reset/
        v2.0 | 20110126
        Lisenziya: heç biri (ictimai sahə)
        * /

        html, bədən, div, span, alma, obyekt, iframe,
        h1, h2, h3, h4, h5, h6, p, bloknot, əvvəlcədən,
        a, abbr, qısaltma, ünvan, böyük, sitat, kod,
        del, dfn, em, img, ins, kbd, q, s, samp,
        kiçik, tətil, güclü, alt, sup, tt, var,
        b, u, i, mərkəz,
        dl, dt, dd, ol, ul, li,
        sahələr, forma, etiket, əfsanə,
        masa, başlıq, tbe, tfoot, thead, tr, th, td,
        məqalə, bir kənara, kətan, detallar, yapışdırmaq,
        rəqəm, heykəlcik, altbilgi, başlıq, hgroup,
        menyu, nav, çıxış, yaqut, bölmə, xülasə,
        vaxt, işarə, audio, video {
        marj: 0;
        taxma: 0;
        sərhəd: 0;
        şrift ölçüsü: 100%;
        şrift: miras;
        şaquli-hizalama: əsas;
        }
        / * Yaşlı brauzerlər üçün HTML5 ekran rolu sıfırlaması * /
        məqalə, bir kənara, detallar, şekiller, rəqəm,
        altbilgi, başlıq, hgroup, menyu, nav, bölmə {
        ekran: blok;
        }
        bədən {
        xətt boyu: 1;
        }
        ol, ul {
        siyahı tərzi: heç biri;
        }
        blokqu, q {
        sitatlar: heç biri;
        }
        blockquote: əvvəl, blockquote: sonra,
        q: əvvəl, q: sonra {
        məzmun: '';
        məzmun: heç biri;
        }
        masa {
        sərhəd-dağlıq: dağılma;
        sərhəd arası: 0;
        }

        CSS hazırlayıcıları

        Veb saytınızın dizaynı üçün rənglər dəstini təyin etdiyinizi və CSS boyunca müxtəlif yerlərdə istifadə etmək istədiyinizi düşünün.

        Müəllif hüququ ilə bağlı bildirişinizdə (və s.) Etdiyiniz ikinci başlıqlara eyni rəng tətbiq etsəniz, rəng bəyannaməsini bir neçə fərqli yerdə təkrarlayacaqsınız.

        Onu dəyişdirmək istəyəndə nə olur?

        Mətn ölçüsünün miqyası haqqında nə demək olar? Siz standart mətn ölçüsünüzü 12px-a təyin etdiniz və hər bir başlıq ölçüsü vahid ölçüdə bir dəst düzəltmək üçün bu ölçüyə məxsus bir çoxdur. Defolt ölçüsü dəyişdiyinizdə nə olur?

        CSS elan dilidir - hər bir fərdi əmlakın və dəyərin göstərilməsini tələb edir və işləri asanlaşdırmaq üçün dəyişənlər, funksiyalar və ya hesablamalar mövcud deyil.

        Eyni şəkildə PHP (və digər dillər) hər səhifədə məzmunu təkrar etmədən HTML çıxartmağı asanlaşdırır, CSS hazırlayıcıları dəyişənləri, funksiyanı və digər proqramlaşdırma quruluşlarını tərz cədvəllərinə daxil etməyə imkan verir.

        Bu rəng sxemlərini, ölçü nisbətlərini və digər təkrarlanan bəyannamələrin növlərini təyin etməyi asanlaşdırır.

        Ən populyar iki CSS hazırlayıcısı bunlardır: Daha az - Twitter Bootstrap tərəfindən istifadə olunur - Sass - Ruby tərəfindən relslər, Jekyll və digər yaqut əsaslı inkişaf vasitələrində istifadə olunur.

        Ümumiyyətlə, inkişaf etdiricilər üslub cədvəllərini az və ya Sass-da yazırlar və sonra bir sayt başlamazdan əvvəl CSS-də tərtib edirlər. Javascript-də yazılmış müştəri (in-brauzer) tərtibçiləri də var, lakin bunlar çox mənbələrdən istifadə edir və adətən yalnız inkişafa meyllidirlər.

        Peşəkar bir veb geliştiricinin Az və ya Sass istifadə etməməsi bu anda olduqca qeyri-adi haldır.

        Bu təlimat bu vasitələrin hər ikisinə giriş ola bilməz, buna görə də sadəcə özünüzü daha çox öyrənməyə təşviq edirik.

        Cavablı Dizayn

        Saytınızın ziyarətçilərinin səhifənizi hansı səhifəyə baxacağını bildiyinizə əmin ola biləcəyiniz bir zaman var idi: bir ovuc standart ölçülərdən birində masaüstü monitor..

        O günlər çox keçdi.

        İstifadəçilər saytınızı bir sıra cihazlardan və ekran ölçülərindən hər hansı birində izləyə bilər: mobil telefon, mini planşetlər, planşetlər, noutbuklar, masaüstləri, televizorlar.

        Bütün bu fərqli ekran ölçülərini fərdi olaraq hədəfə almaq demək olar ki, mümkün deyil və sadəcə bunlara məhəl qoymursunuz.

        Saytlarınızın demoqrafik masaüstü ilə daha çox göründüyünü düşünə bilərsiniz, lakin bu, hər vəziyyətdə həqiqətə uyğun deyil. İnternet trafikinin 60% -dən çoxu mobil cihazlardan gəlir. Pis bir mobil təcrübə olan bir veb saytın olması, işiniz üçün pis olacaqdır.

        Daha çox nə varsa, Google saytların cib cihazları üçün optimallaşdırılıb-edilməməsinə əsaslanaraq axtarış nəticələrini dəyişdirməyə başladı. Getdikcə, mobil olaraq yaxşı görünməsən, heç kim səni görməz.

        Bu problemin həlli cavabdeh Dizayndır.

        Məsuliyyətli dizayn sayt dizaynına bir yanaşmadır - bir fəlsəfə - bir vasitə və ya bir proqram deyil. Səhifənin elementləri müxtəlif ölçülü pəncərələrdə müvafiq şəkildə yenidən qurulacaq şəkildə səhifə qeydini və CSS-ni quruluşu bir yoldur..

        Cavab verən veb dizaynın üç sütunu bunlardır:

        Maye ızgaraları: Maye ızgaraları, mütləq pikselə deyil, faiz nisbətinə görə səhifələrin bölünməsini əhatə edir. Məsələn, bir ekranın 70% -i və 30% -i əhatə edən bir yan sütun ola bilər. Ekran böyüdükdə və ya azaldıqca, grid də genişlənir və kiçilir.

        Maye Şəkillər: Şəkillər heç vaxt nümayiş olunan ekrandan daha geniş olmamalıdır, yəni heç vaxt onları əhatə edən elementdən daha geniş olmamalıdır. Bunun ən asan həlli şəkillərdəki maksimum genişliyi 100% səviyyəsində təyin etməkdir. img {max-width: 100%; }

        Media sorğuları: Media sorğuları bir az daha mürəkkəbdir. Onlar CSS-ə yalnız xüsusi şərtlərdə tətbiq olunan qaydaları elan edərək müəyyən ekran tiplərini və ölçüləri hədəf almağa imkan verir. Mediya sorğularından istifadə edərək əsas məzmununuzu və yan çubuğunuzu daha böyük ekranlarda yan-yana görünə və onları kiçik ekranlarda bir-birinin üstünə şaquli şəkildə yığa bilərsiniz. Media sorğuları ayrı-ayrı kontekstlərdə daha az və ya daha faydalı olacaq müəyyən elementləri gizlətmək və ya göstərmək üçün istifadə edilə bilər, həmçinin şrift ölçüləri kimi şeyləri dəyişdirir və ya hətta fərqli şəkilləri dəyişdirir.

        Həssas veb dizaynı sadə anlayışlar üzərində qurulmuşdur, lakin bunun gerçək həyata keçirilməsi - fərqli ekran ölçüləri, cihaz növləri və brauzerləri olan bu qədər fərqli kontekstdə düzgün almağa çalışmaq əslində çox mürəkkəb və çətindir.

        Bu səbəbdən və digər səbəblərdən, bu gün işləyən bir çox dizayner bu problemləri özləri həll etməyə çalışmır, ancaq ön son çərçivədən istifadə etməyi seçirlər.

        Ön son çərçivələr

        Bir sayt dizaynı üçün CSS kodlaşdırarkən düşünməli bir çox şey var və bu qısa giriş yalnız bir az toxundu.

        • Hər brauzerdə və cihazda işləmək üçün cavab verici bir quruluş əldə etmək.
        • Müvafiq media sorğularının tərtib edilməsi və ən yaxşı ekran genişliyi nöqtələrinin müəyyənləşdirilməsi.
        • Gözəl və oxunması asan olan mətbəə.
        • Formalar düzəltmək həm gözəl, həm də istifadəçi dostu olmağa imkan vermir.
        • 1997-ci ildən bəri göründüyü üçün stil masaları.
        • Yaşlı brauzerlər üçün ləzzətli deqradasiya.
        • Müəyyən veb-xüsusiyyətlər üçün təkrarlama üslubu qaydalarından istifadə etməyi xatırlayırsınız (və hər dəfə eyni qaydanı eyni şəkildə yazdığınızdan əmin olun).
        • CSS və Javascript-in düzgün şəkildə qarşılıqlı əlaqədə olması.

        Bu məsələlərin çoxu yeni dizayn və xüsusiyyətlərin kodlaşdırılmasından çox vaxt tələb edən sadə “qazan” kodlaşdırma vəzifələridir və bir çoxu hər layihədə “əl kodlaşdırma” riski vermək üçün çox mürəkkəbdir. Heç kim 50% və ya daha çox inkişaf vaxtının təməl kodu həll etmək istəmir - inkişaf etdiricilər inkişaf etdirmək istəyirlər.

        Bu səbəblərə görə və tətbiq kodu inkişafında bənzər bir tendensiyanı izləyərək getdikcə daha çox inkişaf etdiricilər cəbhə çərçivələrinə dönürlər..

        Bir ön çərçivə bir və ya daha çox HTML sənəd quruluşunu və yuxarıda sadalanan bəzi və ya bütün əsas ehtiyacları idarə edən tam CSS üslub cədvəlini təmin edir. Bu, inkişaf etdiriciləri media-sorğuların düzgün işləməsinə çalışmaq əvəzinə, faktiki dizayn qərarlarına diqqət yetirməkdən azad edir.

        Tətbiq inkişaf çərçivələrində olduğu kimi, geniş imkanlar da mövcuddur. Bəzi çərçivələr rəng və düymə formaları da daxil olmaqla bir çox dizayn elementini göstərir. Digərləri sadəcə minimal cavab verən bir şəbəkə təmin edir. Bəzi çərçivələr olduqca özelleştirilebilir, digərləri bir ölçülü uyğun və ya uyğun olmayan bir yanaşma təmin edir. Bəzilərinə Javascript interaktivliyi daxildir, bəziləri isə yoxdur.

        Hal-hazırda istifadə edilən daha populyar ön dizayn dizayn çərçivələrindən bəziləri:

        • Bootstrap - Twitterdəki inkişaf qrupundan Bootstrap veb tətbiqetmələrin prototipini və inkişafını sürətləndirmək üçün hazırlanmışdır. Mükəmməl forma və interaktiv UI və cəsarətli, fərqli bir dizayn təmin edir. Təcrübəsiz istifadəçilərin HTML-yə üslub dərsləri əlavə etmələri tövsiyə olunduğundan, bir çox insanlar bunun şişmiş işarə yaratdığından şikayətlənir (edir). Buna baxmayaraq, hər hansı bir forma əsaslı veb tətbiqinin sürətli prototiplənməsi üçün əla bir vasitə təqdim edir.
        • Pure.css - Fərdi və ya bütövlükdə istifadə edilə bilən CSS çərçivə hissələrinin modul bir alət dəsti.
        • Vəqf - "Dünyanın ən qabaqcıl cavabdeh cəbhə çərçivəsi" kimi hesablaşma Vəqfinin çoxu yaxşı işarələməyə əhəmiyyət verən insanlar üçün Bootstrap kimi olacağını düşünür..
        • Skelet - Skelet, cavab verən bir şəbəkə, təmiz mətbəə və ümumiyyətlə minimal dizayn təmin edən "ölü sadə" CSS çərçivəsidir. Bu "bir çərçivə deyil, başlanğıc nöqtəsi" olmaq üçün nəzərdə tutulmuşdur.

        Bunlardan başqa daha çox şey var və yeniləri hər zaman inkişaf etdirilir. Bundan əlavə, fərdi parçalar var - CSS parçaları - bu bespoke çərçivəsinə yığıla bilər. Məsələn, sadə bir maye şəbəkə alətini tipoqrafik kitabxana ilə birləşdirə və formalar üçün üçüncü alət dəstindən istifadə edə bilərsiniz.

        CSS Çərçivələri - proqram təminatı çərçivələri kimi - mürəkkəb veb dizayn və inkişaf üçün irəliyə aparan bir yoldur. Hər yeni layihə ilə təkər icad etmək və ya eyni həlli təkrarlamaqda heç bir məna yoxdur.

        Hələ - bir CSS çərçivəsindən maksimum yararlanmaq üçün CSS-in necə işlədiyini və HTML ilə necə əlaqəli olduğunu başa düşməlisiniz.

        CSS HTML-in vacib bir hissəsidir

        CSS - Cascading Style Sheets - dizayn və internetdəki vizual təqdimat dilidir. HTML sənəd yalnız məzmun qovşaqlarının toplusudur, lakin CSS brauzerə həmin məzmunu istifadəçiyə necə təqdim edəcəyini söyləyir.

        HTML-də olduğu kimi, CSS-nin həm struktur aspektləri, həm də mətn səviyyəli aspektləri var. CSS dinamik animasiyalar və cavab layout yaratmaq üçün də istifadə edilə bilər.

        Müasir sayt dizaynının çox mürəkkəb olduğuna görə - əsasən gəzən cihazların və ekran ölçülərinin müxtəlifliyinə görə - sayt dizaynı cavabdeh olmalıdır. Yəni istənilən ölçüdə və ya cihazda işləməlidir - səhifə ətraf mühitə cavab verməlidir.

        Bir sayt dizaynının bu qədər fərqli parametrlərdə işləyə biləcəyinə və çox sayda rəqabət maraqlarının həll olunduğuna əmin olmağın çətinliyi və yorğunluğu əksər inkişaf etdiricilərin CSS çərçivələrini qəbul etmələrinə səbəb oldu..

        Tətbiq inkişaf çərçivəsi kimi, CSS (və ya "cəbhə") çərçivələri yeni bir sayt dizaynının inkişafı üçün başlanğıc nöqtəsidir. Quruluşu, rəhbərliyi və bir səhifənin necə qurulacağına dair bir fikir verirlər.

        CSS Çərçivə sənədləri, demək olar ki, hər kəsin məsuliyyətli və işləyən veb saytlar yaratmağını təmin edə bilər, lakin yalnız öz CSS və HTML anlayışının dərinliyinə sahib birisi ən çox istifadə edə bilər..

        JavaScript və HTML

        Bu bölmə Javascript, ən müasir veb brauzerlərdə qurulan skript dili ilə tanış edir. Javascript-in HTML və brauzerlə necə işlədiyinə, JavaScript-ni bir geliştirici olaraq istifadə etməyə başlamağın bəzi praktik tövsiyələri ilə əlaqələndirilir. Əhatə olunan mövzular Document Object Model, JavaScript Kitabxanaları və JavaScript tətbiqi çərçivələrini əhatə edir. Bu bölmə JavaScript təlimatı deyil.

        JavaScript nədir

        JavaScript, demək olar ki, hər veb brauzerdə qurulmuş bir yazı dilidir. Veb səhifələrə dinamik qarşılıqlı əlaqə və skript əlavə etmək üçün istifadə olunur. (Bundan əlavə, Node.js kimi alətlərlə yanaşı server tərəfində də istifadə edilə bilər, lakin bu burada diqqət çəkmir.)

        JavaScript tam xüsusiyyətli bir proqramlaşdırma dilidir, buna görə hər şey mümkündür. Bununla birlikdə, xüsusən HTML sənədləri ilə qarşılıqlı əlaqələrin və manipulyasiya ehtiyaclarına yönəldilmişdir.

        ECMAScript

        Ümumiyyətlə JavaScript ilə işləsəniz, çox qəribə bir adla qarşılaşacaqsınız "ECMAScript." Bu JavaScriipt-in "rəsmi" adıdır.

        Dil üçün standart spesifikasiyanı, əvvəllər Avropa Kompüter İstehsalçıları Birliyi olan Ecma adlı bir təşkilat qoruyur. Bu vaxtdan bəri adlarını sadəcə "Ecma" olaraq dəyişdirdilər, bu artıq heç bir şey üçün bir qisim deyil.

        Hər bir veb brauzer ECMAScript standartını bir az fərqli şəkildə tətbiq edir (və Microsoft Javascript əvəzinə onların həyata keçirilməsini JScript adlandırmağa davam edir). Beləliklə, bəzi insanlar veb brauzerlərdə qurulmuş hər hansı bir dialekt və ya törəmələrə deyil, xüsusi olaraq dilin standart formasına istinad etmək üçün "ECMAscript" dən istifadə edəcəklər.

        JavaScript və Java

        Sadəcə olaraq heç bir qarışıqlıq olmur - JavaScript-in Java ilə əsl əlaqəsi yoxdur. Java ilk dəfə işlənildikdə Java yeni və cəlbedici bir dil idi və orijinal fikir JavaScript-in Java-ya əsaslandığı və buna görə də adın olmasıdır. Ancaq JavaScript ümumiyyətlə Java-ya əsaslanmadı və addan başqa iki dildə həqiqətən çox oxşarlıqlar var..

        Sənəd obyekti modeli

        Javascript-də yaxşı bir qola sahib olmaq istəməyinizi başa düşməyiniz lazım olan əsas şeylərdən biri də Document Object Model-dir.

        Document Object Model, konsepsiya baxımından əvvəlki hissələrdə təsvir olunan sənəd ağacı quruluşuna çox oxşardır - əslində eyni şeyə aiddir.

        DOM Javascript kodunun HTML sənədi ilə qarşılıqlı olduğu API (Tətbiq Proqramlaşdırma İnterfeysi) dir. Sənəd bir brauzer tərəfindən göstərildikdə, brauzer yalnız əlavə stil qaydaları ilə mənbə kodunu göstərmir. Brauzer mənbə kodunu oxudu və bunun əsasında bir görünüş yaratdı. Sənəddəki hər bir element Javascript tərəfindən əldə edilə bilən atributları və metodları ilə bir obyektə (proqramlaşdırma mənasında) çevrildi.

        DOM obyektinin atributlarına HTML elementinin elan edilmiş (və elan edilə bilən) atributları (sinif, id və ad kimi), elementin CSS üslubu və elementin özü daxildir. Hər DOM obyekti ilə əlaqəli metodlara bu atributların hər hansı birini dəyişdirmək funksiyaları daxildir.

        Brauzerdə göstərilən bir veb səhifə, Document Object Model-in canlı görünüşüdür. Bu o deməkdir ki, DOM hər halda dəyişərsə (məsələn - hər hansı bir elementin atributları dəyişdirilir), görünüş də dəyişəcəkdir. Bu JavaScript səhifəni yeniləmədən və ya yenidən yükləmədən veb səhifənin məzmununu yeniləməyə və dəyişdirməyə imkan verir.

        JavaScript də bir çox brauzer funksiyası üçün API-lərə malikdir, buna görə də (məsələn) sənədin cari vəziyyətini oxuya, təzələyə, brauzer pəncərəsinin genişliyini əldə edə və brauzer pəncərəsinin ölçüsünü dəyişə bilər.

        Javascript istifadə

        Bu JavaScript təlimatı deyil. Bu bölmə yalnız JavaScript ilə məşğul olan HTML inkişaf etdiriciləri üçün faydalı kontekst təmin etməyə çalışır.

        Səhifədə JavaScript daxil olmaqla

        CSS kimi, JavaScript də bir veb səhifəyə iki yolla daxil edilə bilər - əlaqədar skriptlər və əlaqəli mənbələr.

        Bir skript əlavə etmək üçün etiketlər arasında JavaScript kodu da daxil edin.

        funksiya dəyişdirməkColor (dəyişdirmək, yeniColor) {
        sənəd.getElementbyId (dəyişdirmək) .style.backgroundColor = newColor;
        }
        </ ssenari>

        Ayrı bir JavaScript sənədini HTML sənədinə daxil etmək üçün elementlə əlaqələndirin.

        növü ="mətn / javascript" src ="tətbiq.js">

        JavaScript faylı URL (nisbi və ya tam olaraq göstərilmişdir) src atributuna yerləşdirilmişdir. Tip atributu HTML5-də qətiyyən lazım deyil, lakin həm geri, həm də (potensial) irəli uyğunluq üçün yaxşı bir şeydir. Bundan əlavə, bir səhifədə bir çox element varsa, onlara hər bir unikal id atributu vermək pis bir fikir deyildir.

        Ümumiyyətlə JavaScript-ni səhifəyə əlavə etmək əvəzinə ayrıca bir fayl kimi daxil etmək daha yaxşı hesab olunur. Bu funksiyanı (JS) məzmundan (HTML) ayrı saxlayır. Bununla birlikdə bu ümumi siyasətdə praktik istisnalar mövcuddur. Məsələn, izləmə kodunu (Google Analytics tərəfindən təmin edilmiş JS parçası kimi) birbaşa səhifəyə daxil etmək adi bir təcrübədir..

        JavaScript harada

        Bir səhifədə JavaScript daxil etmək üçün iki ümumi yer var, aşağıda və aşağıda .

        Bir sənədin içərisində bir JavaScript faylına bağlantıların yerləşdirilməsi yaxşı semantik məna verir - bütövlükdə səhifəyə təsir edən bir skriptdir, buna görə sənəddəki digər oxşar elementlərə aiddir. .

        Lakin, JavaScript sənədləri alındıqda və təhlil edildikdə səhifənin yüklənməsi dayandırıldığından, etiketləri ənənəvi olaraq qarışdırdılar. Tipik tövsiyə, bunları içəridən son element kimi yerləşdirməkdir .

        Bu hələ yaxşı məsləhətdir. Bununla birlikdə, indi odl məsləhətə bir bükülmə var: səhifə göstərilməsinin yavaşlamasına səbəb olmadan sənədləri elementlərə yerləşdirməyin bir yolu var. HTML5 olaraq etiket async etiketli bir atributu ehtiva edir. Skript etiketinizə async atributu əlavə etsəniz, səhifə göstərilməsini dayandırmayacaq və JS təhlil edilərək asinxron şəkildə icra ediləcək (yəni ayrı bir mövzuda).

        növü ="mətn / javascript" src ="tətbiq.js" async>

        Bu, bütövlükdə səhifənin yüklənməsini və göstərilməsini sürətləndirməlidir. Lakin, asinxron yükləmə və analizlər hələ də bəzi problemlərə səbəb ola bilər. Məlumat bağlantısı yavaş olarsa və ya müştərilərin kompüteri xüsusilə güclü deyilsə, yenə də səhifənin göstərilməsini ləngidə bilər.

        Xüsusilə yavaş bağlantılarda və aşağı güclü cihazlarda hər hansı bir səmərəsizliyi sıxmaqdan narahat olsanız, etiketlərinizi sənədin altına qoymağın mənası ola bilər..

        JSON

        Semantik HTML bölmələrində toxunulmuş bir JavaScript dəsti JSON - JavaScript Obyekt Notation.

        JavaScript obyekt yönümlü bir dildir, yəni (digərləri arasında) fərdi obyektlərin (sözün həqiqi mənasında) məlumat obyektlərinə (sözün proqramlaşdırma mənasında) kodlaşdırıla bilməsi deməkdir. Məsələn, bir blog yazısı ("əsl dünya" obyekti) JavaScript obyekti kimi kodlana bilər:

        {
        "başlıq" : "Lorem Ipsum və Bütün Caz",
        "müəllif" : "Adam Wood",
        "məzmunu" :
        'Lorem ipsum dolor amet oturur, adipiscing elit. Sed mauris metus, euismod olmayan sodes, molestie congue nibh. Nunc eu ləyaqətli bir dəyər deyil. Sərbəst buraxılmayan nəbzlər, pulvinar vitae sapien. Alqı-satqının nəticələrini yoxlayın. Aenean malesuada risus nec volappat dapibus. Aliquam otur amet bibendum enim. Suspendisse at faucibus erat. Proin quis facilisis nisl. Vivamus oturmaq yaxşıdır. Nisl sapien, sagittis nita, nounu təsirsiz hala gətirir.,
        }

        Semantic Markup ilə gördüyümüz kimi, JSON, bir Semant Markup API kimi istehlak üçün bir səhifənin məzmunu haqqında məlumatları kodlaşdırmaq üçün istifadə edilə bilər. Bu Googles indekslənməsi üçün faydalıdır.

        Theres də JSON üçün başqa bir vacib istifadədir - AJAX.

        AJAX

        AJAX, asenkron HTTP sorğularının JavaScript tərəfindən edildiyi bir dizayn nümunəsidir, təzə məlumatların səhifənin yenidən yüklənməsini tələb etmədən veb səhifəyə yayılmasına imkan verir..

        AJAX əvvəlcə "Asinxron JavaScript və XML" tərəfdarı idi, çünki əvvəlcə bu tip dizayn üçün ən çox yayılmış məlumat ötürmə dili XML idi. Bununla birlikdə, JSON daha yüngül, çevik, JavaScript doğma və oxumaq asan olduğu üçün ən çox yayılmış bir dil halına gəldi. (Təəssüf ki, "AJAJ" çox cəlbedici deyil, buna görə köhnə adı yapışdırdı.)

        AJAX nümunəsi əksər səhifələrdə heç bir məna kəsb etmir, ancaq veb tətbiqetmələrdə (məsələn, e-poçt kimi) dünyanın hər tərəfini dəyişə bilər.

        AJAX "asinxron JavaScript" adlanır, çünki JS kodu server yükləmədən başqa vaxtlarda zəng edir (brauzer ümumiyyətlə serverə zəng edəndə). İstifadəçinin hərəkətlərinə və ya keçən vaxta əsasən, AJAX tipli bir veb tətbiqi səhifəni yenidən yükləmədən serverə sorğu göndərir. Bundan sonra verilən məlumatlar DOM-u yeniləmək üçün istifadə olunur (və beləliklə istifadəçi görünüşü).

        Bu tip dizayn, yeni mesaj göndərmək və almaq üçün (məsələn) bir e-poçt və ya söhbət tətbiqində istifadə edilə bilər. Sosial Şəbəkə saytları bundan yeni yazılar əlavə etmək üçün istifadə edir, hətta bəzi bloglar da səhifəyə yeni yayımlanmış məzmun əlavə etmək üçün istifadə edirlər.

        JSON, JavaScript üçün doğma olduğu üçün bu tip istifadə üçün ideal bir məlumat formatıdır. Bir brauzerin onu "anlaması" üçün JavaScript-də təhlil edilməli olan XML-dən fərqli olaraq, JSON artıq hədəf dillərindədir.

        Bundan əlavə, JSON bir JavaScript sənədinin yeganə məzmunu ola biləcəyi üçün (hər hansı bir domenin src URL-si ola bilər), JSON çapraz mənşəli kilidlənmənin qarşısını almaq üçün istifadə edilə bilər. Tipik olaraq veb brauzerlər veb saytların ilkin sənədin sahəsindən başqa domenlərdən sorğu və məlumat almasına mane olur. Bununla birlikdə, JavaScript (CSS və şəkillər kimi) hər hansı bir yerdən gələ biləcək ayrı bir qaynaq kimi qəbul edilir. AJAX nümunəsinin JSON tətbiqi ilə çarpaz mənşəli sorğu bir qaynaq daxil olaraq "gizlədilə" bilər.

        Real dünyada JavaScript

        JQuery

        JavaScript-in sintaksisi bəzən bir az verboza (və qeyri-adi) ola bilər və bir çox ümumi əməliyyatlara çox sayda “qazan şablonu” kodu tələb olunur.

        Bu səbəbdən demək olar ki, bütün JS tərtibatçıları JQuery adlı JavaScript kitabxanasından istifadə edirlər. JQuery sənəd dəyişkənliyi, DOM manipulyasiyası və AJAX kimi bir sıra ümumi istifadə halları üçün qısa API təmin edir.

        Əksər proqramlaşdırma dillərində "standart bir kitabxana" var, proqramçıların dildə etməsi lazım olan ən çox görülən işləri avtomatlaşdıran və ya mücərrəd edən bir dil uzantılarının əsas dəsti. JavaScript-də rəsmi standart kitabxana yoxdur. Sadiq inkişaf etdirici bazaları olan (Bağlanma və Prototip kimi) digər rəqabətçi layihələr olsa da, JQuery - bir çox insanlar üçün - JavaScript standart kitabxanası.

        Budur, JQuery-nin inkişafı sürətləndirdiyinə dair çox qısa bir nümunə. Bir elementin bir atributunu dəyişdirmək istədiyinizi düşünün.

        // "təmiz" JavaScript yolu.

        sənəd.getElementById ("dəyişmək") .setAtribut ("başlıq","Yeni başlıq mətni");

        // JQuery yolu.

        $. ("#dəyişmək") .attr ("başlıq","Yeni başlıq mətni");

        Bu vəziyyətdə yalnız 28 simvol xilas olur, ancaq bəzən bu daha çoxdur. Və hətta kiçik əmanətlər böyük bir layihəyə əlavə edir.

        JavaScript Ön Son Kitabxanaları

        HTML və CSS-i yaxşı başa düşən bir çox layiqli veb dizayneri, JavaScript proqramçısı olmadan JavaScript GUI aksesuarlarından istifadə edir.

        Bu mümkündür, çünki nisbətən asan HTML API təmin edən bir sıra JavaScript UI kitabxanaları (JQuery UI kimi) və ön son çərçivələr (Bootstrap kimi) var..

        Tətbiq Proqramlaşdırma İnterfeysində bir API (yuxarıda qeyd edildiyi kimi). Yəni bir proqramın bir hissəsinin həmin proqram xaricində işləməsinə giriş yolu. HTML xüsusiyyətləri və HTML xüsusiyyətləri kontekstində, bu, JavaScript işarələrini HTML-yə sadəcə işarələməyə (adətən xüsusi siniflərə) əlavə etməklə asanlıqla daxil etmək deməkdir..

        JavaScript UI kitabxanalarının xüsusiyyət toplusunu araşdırmaq, başlanğıc tərtibatçılarını (və başlanğıc olmayanları) bir saytın interaktivliyini yaxşılaşdırmaq üçün bir çox asan fikirlər və bu ideyaları həyata keçirən vasitələrlə təmin edə bilər. (Sadəcə birini seçib bir layihə üçün yapışdırmağı unutmayın - müxtəlif UI kitabxanalarını qarışdırıb uyğunlaşdırmamağa çalışın. Nəticələr vizual xaos və dizayn qarışıqlığıdır.)

        JavaScript Ön Tətbiq Çərçivələri

        CSS-də əvvəlki hissədə müzakirə olunan ön dizayn dizayn çərçivələrindən (Bootstrap kimi) ayrı, bir ön tətbiq çərçivəsi vizual dizayn üçün deyil, əsl funksionallıq üçün başlanğıc nöqtəsi kimi xidmət edən bir skelet proqram təminatıdır. veb tətbiqi.

        Backbone.js və Angular kimi JavaScript tətbiqi çərçivələri, bir sıra ümumi vəzifələri avtomatlaşdıran və dizayn memarlığını təmin edən bir veb tətbiq üçün strukturlaşdırılmış bir şablon təmin edir..

        Əksər JS tətbiq çərçivələri MVC və ya Model View Controller, dizayn nümunəsini tətbiq edir. Bu nümunə belə işləyir:

        • Model məlumatları idarə edir
        • View məlumatları göstərir
        • Nəzarətçi modeldəki məlumatları görünüşü ilə birləşdirir və tətbiqi məntiqlə işləyir

        Hər bir JS çərçivəsi bu patteni fərqli şəkildə həyata keçirir, lakin demək olar ki, hamısı bunun bəzi versiyasını edirlər.

        Bir JavaScript tətbiqini qurmağa cəhd edərsən, sıfırdan qurmağa çalışmaq demək olar ki, həmişə qorxunc bir fikirdir. Çərçivə istifadə edərək tətbiqinizin möhkəm bir memarlıq təməli üzərində qurulduğunu təmin edir və əks halda aşağı səviyyəli, ümumi funksionallığı kodlaşdırmağa sərf olunan saysız-hesabsız saatlara qənaət edir..

        Bir çox proqram inkişafında olduğu kimi, yaxşı bir JavaScript tərtibçisi olmaq JavaScript-in necə kodlandığını bilməkdən başqa bir şey deyil - kitabxanaların və çərçivələrin müxtəlif növ tətbiqlərə ən yaxşı uyğun olduğunu bilmək və onlardan müəyyən dərəcədə istifadə edə bilməkdir. axıcılıq.

        JavaScript hər zamankindən daha güclü və faydalıdır

        JavaScript, veb səhifələrdə axmaq effektlər və kiçik inkişaflar üçün istifadə olunan aşağı güclü bir dil kimi həyatına başladı. Lakin son on ildə və ya daha çox yeni bir standart standartlara uyğun veb brauzerlər, inkişaf etmiş JavaScript kitabxanaları və çərçivələri ilə birlikdə, geniş miqyaslı brauzer tətbiqləri üçün ciddi bir platformaya çevrildi..

        HTML və hər şey

        Bu bölmə HTML-yə bir neçə kontekstdə alternativlərə baxaraq HTML-nin müasir texnologiya mənzərəsindəki məzmun üçün dominant bir dil olduğunu göstərərək HTML əhatə dairəmizi tamamlayır.

        Alternativ olaraq HTML

        HTML vebin standart dilidir, lakin digər dizayn və məzmun növləri üçün bir platforma olaraq da istifadə olunur.

        Elektron kitablar

        Elektron kitablar üçün ən populyar açıq mənbə standartı olan .epub formatı - Amazon Kindle xaricində demək olar ki, bütün e-oxuyucularda istifadə edilə bilən - yalnız HTML əsaslı bir formatdır. Fərdi bölmələr və məzmun cədvəlləri və indekslər kimi bölmələr fərdi HTML sənədləridir. Şəkillər və CSS sənədləri kimi aktivlərlə birlikdə bütün məzmun sənədləri sadəcə bir fayla sıxılır və .epub fayl uzantısı verilir. Bir çox cəhətdən .epub kitabı bir çox səhifəsi olan bir veb saytına bənzəyir.

        Amazon Kindle həmişə mülkiyyət sənəd formatına üstünlük verib. Kindles'in ilk nəsli .mobi istifadə etdi və bundan sonra əlaqəli bir format .azw adlandı. Bunlar .epub formatından daha mürəkkəb idi və HTML-yə əsaslanmırdı.

        Bununla birlikdə, son nəsil Kindles HTML5 bazasında olan yeni .azw3 formatından istifadə edir. Dönüşüm proqramı vasitəsi ilə HTML-dən Kindle e-kitabları yaratmaq həmişə mümkün olsa da, HTML indi e-kitab məzmunu üçün əsas müəllif dilidir.

        Mobil proqramlar

        Ən populyar iki mobil platforma - Android və iPhone - tətbiqetmənin inkişafı üçün tamamilə fərqli proqramlaşdırma dillərindən istifadə edin. Android tətbiqetməsinin inkişafı ümumiyyətlə Java-da aparılır, iOS isə Objective C və yeni dil Swift istifadə edir.

        Bu o deməkdir ki, hər iki platforma üçün bir tətbiq qurmaq və buraxmaq istəsəniz, hər şeyi iki fərqli dildə ümumiyyətlə iki dəfə düzəltməlisiniz. Facebook kimi böyük proqram şirkətləri üçün bu yaxşıdır, ancaq kiçik inkişaf evlərinə ciddi bir gərginlik gətirə bilər.

        Bu problemin bir neçə fərqli həlli yaradıldı, lakin ən maraqlısı HTML (JavaScript və CSS ilə birlikdə) istifadəsidir..

        PhoneGap kimi alətlər, inkişaf etdiricilərə brauzer əsaslı dillərdə (HTML, JS, CSS) bir dəfə bir tətbiq qurmağa və sonra fərqli əməliyyat sistemləri üçün tətbiqetmələrə daxil etməyə imkan verir. PhoneGap proqramı, brauzer əsaslanan tətbiqetməni "xromsiz bir brauzer" - yalnız tətbiqlər qovluğunda olan fayllara baxan və istifadəçi yönümlü naviqasiya təmin edən bir brauzer tərzində göstərici çərçivəyə keçirir. Bu, tətbiqlərin bir dəfə qurulmasına və hər yerdə yerləşdirilməsinə imkan verən dəstəklənən əməliyyat sistemi üçün edilə bilər.

        HTML universal dil oldu.

        HTML alternativləri

        HTML vebin ana dili və qarşılıqlı əlaqə üçün güclü bir platforma olsa da, getməkdən imtina edən bəzi alternativ texnologiyalar var.

        Fləş

        Flash, bir çox plugin ilə veb brauzerlərdə işləyə bilən bir multimedia proqram platformasıdır.

        1990-cı illərin sonlarında Flash əsaslı veb saytdan daha sərin bir şey yox idi. Sadə HTML əsaslı saytlara nisbətən yüksək interaktiv, cizgi və daha yaxşı qrafiklə öyünürdülər. Onların hətta musiqi və video ifa etmələrini də istəyə bilərsiniz.

        Bu saytlar tez yorucu və əsəbi oldu, lakin texnologiya vərdişdən (insanlar yazdıqlarını yazırlar) və HTML5 və JavaScript-də yazılmış saytların və tətbiqlərin bütün brauzerlərdə dəstəklənməyəcəyindən qorxdu. Internet Explorer 6 daha yaxşı, standartlara uyğun brauzerlərin yaranmasından sonra illər ərzində ağır istifadədə qaldı, buna görə insanlar Flash əsaslı saytları sıxışdırmağa davam etdilər..

        Çox hissəsi üçün bu tendensiya azaldı. Artıq Flash əsasən masaüstü və mobil video oyunlar üçün istifadə olunur və internetdə istifadəsi ağıllı izdiham arasında əsasən məhdudlaşdırılıb.

        Təəssüf ki, kiçik qeyri-texnoloji müəssisələr (xüsusilə kilsələr və icma mənfəəti) texnologiya meyllərindən bir neçə il geridə qalır və bir çoxları hələ də Flash elementlərini ("Flash Intro" kimi) veb saytlarına daxil etmək istəyirlər. Bu demək olar ki, həmişə səhvdir.

        • İnteraktiv olmayan veb saytlarda ən çox istifadə edilən istifadəçi üçün olduqca əsəbi olan "Flash Intro" dir. Heç kim saytınızda axtardıqlarını tapmadan əyləncəli pre-şounu gözləmək və izləmək istəmir. Heç vaxt, heç belə etməyin.
        • Bəzi insanlar, məzmun və menyuların Flash tətbiqetməsinə yerləşdirilməsinin yaxşı bir fikir olduğunu düşünürlər ki, yüngül menyu elementləri və ya yayma nişanlar kimi sərin effektlər yarada bilsinlər. Bu pis bir fikirdir:
          • İnsanlar xüsusi effektlərinizə deyil, məzmununuza əhəmiyyət verirlər. Məzmununuzu oxumağı asanlıqla və asanlıqla idarə edin. Heç kim saytınızda daha uzun müddət qalmayacaq və ya dostlarına tövsiyə etməyəcək, çünki uçan menyunun düyməsini basdıqda məzmununuzun sürüşmə kimi açılmağını bəyəniblər..
          • Məzmunu HTML yerinə, Flash yerinə yerləşdirmək, Axtarış motorlarından gizlədir, saytınızı Google üçün effektiv görünməz hala gətirir.
          • Məzmunu Flash-a yerləşdirmək, məzmununuzun hər hansı bir görünüşünün əslində paylaşılan bir URL deyil, işləyən bir tətbiqdə xüsusi bir vəziyyət olduğunu bildirir. Bu, istifadəçilərin məzmununuzu işarələməyi və ya paylaşmasını çox çətinləşdirir.
          • Flash tətbiqindəki məzmun və naviqasiya ekran oxuyucuları üçün əlçatan deyil, saytınızı görmə qabiliyyətli insanlar üçün əlçatmaz edir.
          • Flash-da yaratmaq istədiyiniz effektlərin əksəriyyəti bu problemlərdən heç birini yaratmadan daha asan JavaScript və CSS-də yaradıla bilər.
        PDF

        PDF - Portativ Sənəd Formatı - çap mərkəzli sənədlər üçün əla çarpaz platform formatıdır.

        PDF ilə məzmununuzun tək bir görünüşünü yaradırsınız. Bir PDF-də xüsusi səhifə ölçüləri, müəyyən bir nizam və sənəd axını, müəyyən bir şrift, müəyyən bir mətn ölçüsü var. PDF sənədləri printerlər üçün məlumat daxil edə bilər (mürəkkəb rəngləri kimi).

        PDF sənədlərini vərəq musiqisi və çap kitabları kimi şeylər üçün yaxşı bir seçim etmək, onlayn məzmun üçün dəhşətli bir seçimdir.

        Yenə də bir çox insan və təşkilatlar (xüsusən kiçik kiçik texnoloji müəssisələr və qeyri-kommersiya) PDF sənədlərini internetə yayımlamağa davam edirlər. Davranışın geniş yayılmış bir nümunəsi, veb səhifədə hazırlanan çap mərkəzli broşuraların yaradılmasıdır, halbuki heç kim çap olunmuş bir nüsxəni almır..

        Broşuradakı məlumatları görmək istəyən hər kəs bir PDF görmək istəmir. Məzmununuzu istəyirlər və orta səviyyəyə uyğun formatda təqdim etməlisiniz - brauzerlərdə bu orta HTMLdir.

        HTML-nin daha yaxşı bir seçim olacağı PDF-lərdən xüsusilə həssas istifadəsi doldurulan formalardır. Bir çox təşkilat bir PDF oxuyucusu içərisində doldurula bilən və sonra geri göndərilən PDF formaları yaradır. Biri bu formaları ofisin daxili istifadə etdiyi hər hansı bir verilənlər bazası sisteminə köçürdüyünü xəyal edir.

        Daha həssas bir həll, məlumatları birbaşa verilənlər bazası tətbiqinə göndərən bir onlayn HTML forması olacaqdır. Bu əməyi qənaət edir və səhvləri azaldır. HTTPS ilə, ətrafdakı PDF formalarını e-poçtla göndərməkdən daha etibarlı olar.

        HTML qazanır

        HTML veb kitabların və e-kitablar və mobil tətbiqetmələr kimi əlaqəli texnologiyaların universal dilinə çevrildi.

        Bəzi hallarda HTML, digər hər hansı bir texnologiya seçimi kimi bir sıra üstünlüklər və çatışmazlıqlar təmin edən bir neçə variant arasındadır. Digər hallarda, HTML yalnız aydın qalib deyil, yalnız ağlabatan seçimdir.

        XHTML və XHTML5

        XHTML

        XHTML eXtensible Hypertext İşarələmə Dili deməkdir. Əsasən HTML-nin XML tətbiqidir. İlk dəfə hazırlananda HTML (versiya 4) rahat qurulmuşdu. XHTML HTML yüksək quruluşlu etdi. Uzun müddət veb üçün işarələməyin gələcəyi olaraq görülürdü. Lakin HTML5 əsasən onu keçib. Hələ də geniş istifadə olunur.

        HTML-dən istifadə edən bir çox veb səhifədə tapılmış pis kodla mübarizə vasitəsi kimi inkişaf etdirildi, məsələn, bağlama etiketlərinin olmaması, etiketlərin düzgün yerləşdirilməməsi və oxşar boş kodlaşdırma təcrübələri. XHTML, bütün etiketlər bağlanmalı və düzgün qaydada olmalıdır kimi qaydalar quraraq bu səhvlərlə mübarizə aparır.

        Tarix

        1998-ci ildə W3C, XML-də HTML-in yenidən qurulması adlı iş layihəsini nəşr etdi. Bu yeni dil HTML 4-ə əsaslandı, lakin XML-in daha sərt sintaksis qaydalarına riayət edildi. 1999-cu ilin fevral ayında spesifikasiyanın adı XHTML 1.0 olaraq dəyişdirildi: eXtensible HyperText Markup Language. Nəhayət, 2000-ci ilin yanvarında XHTML rəsmi W3C tövsiyəsi oldu.

        XHTML, XHTML 1.1-in növbəti versiyası hələ 2001-ci ilin mayında dərc olundu, bu da hələ ciddi qaydalara əsaslanaraq lakin özelleştirmeleri və kiçik dəyişikliklərə icazə verildi. XHTML 2.0 işləmə qarışığı kimi başlamış, lakin HTML5 və XHTML5 lehinə 2009-cu ildə tərk edilmişdir.

        XHTML əsas prinsipləri

        XHTML HTML ilə demək olar ki, eyni olsa da, bütün kodların etibarlı və düzgün olmasını təmin edən yeni qaydalar toplusunu təqdim etdi. Bu qaydalar:

        • Bütün elementlər və atribut adları kiçik hərflərdə olmalıdır.
        • Bütün boş elementlər XML-nin xüsusi boş element etiketindən istifadə edilməklə yazılmalıdır.
        • Bütün son etiketlər mövcud olmalıdır və əlavə son etiketlər yoxdur.
        • HTML elementləri tək baş elementi, ardınca tək bir bədən elementi və ya tək bir çərçivə elementi ehtiva etməlidir.
        • Hər baş tək başlıqdan ibarət olmalıdır.

        Yuxarıda göstərilən qaydalarla yanaşı, XHTML əvvəlcə HTML 4.01-in üç fərqli versiyasına uyğun üç rəsmi Document Type Definition (DTD) təqdim etdi.

        • XHTML 1.0 sərt sərt HTML 4.01-ə XML ekvivalentidir və HTML 4.01 spesifikasiyasında köhnəlməmiş qeyd olunmayan elementlər və atributları ehtiva edir. Noyabr 2015 tarixindən etibarən XHTML 1.0 Strict, World Wide Web Consortiumun veb səhifəsinin ana səhifəsi üçün istifadə olunan sənəd növüdür..
        • XHTML 1.0 Keçid HTML 4.01 keçidinin XML ekvivalentidir və sərt versiyasından xaric edilmiş təqdimat elementlərini (mərkəz, şrift və tətil kimi) ehtiva edir..
        • XHTML 1.0 Çərçivə HTML 4.01 Frameset-in XML ekvivalentidir və çərçivə sənədlərinin müəyyənləşdirilməsinə imkan verir - 1990-cı illərin sonlarında ortaq bir veb xüsusiyyəti.

        Nümunə

        HTML'nin ilk versiyaları rahat qurulmuşdu və pis kodlaşdırma tətbiqetmələri olan veb səhifələri tapmaq olduqca adi idi. XHTML-də lazımi veb səhifə belə görünür:

        İlk veb səhifəm

        Salam Dünya!

        Mən etibarlı XHTML kodu olan çox sadə, lakin tam işləyən veb səhifəm!

        Onlayn Resurslar

        XHTML HTML5 tərəfindən ələ keçirildiyi görünsə də, XHTML-i daha yaxşı qavramağa kömək edə biləcək çox sayda onlayn resurs var. Əsas spesifikasiyadan cheatsheets-ə qədər təsdiqləyicidən tutorials-a qədər aşağıda göstərilən bağlantılar XHTML ilə bağlı hər hansı bir sualınızda sizə kömək edəcəkdir..

        İstinad

        • XHTML Rəsmi Xüsusiyyət: XHTML-in inkişaf qərarını izah edən və onun inkişafı üçün əlavə mənbələr təqdim edən rəsmi veb sayt.
        • XHTML 1.0: HTML 4-də XML 1.0-də yenidən işləmə üçün işlənmiş layihənin ikinci düzəliş edilmiş versiyası
        • XHTML Əsas Xüsusiyyət: masaüstü, TV və mobil telefonlar kimi cihazlarda paylaşıla bilən bir XHTML sənəd növü təqdim edir..
        • XHTML: Təmiz Kod Həll: HTML və yeni standartlar arasındakı fərqlərə yönəlmiş ətraflı XHTML icmalını təqdim edir.
        • Niyə XHTML-ə keçid: iş axınını tənzimləmək və daha təmiz kod istehsal etmək üçün XHTML-ə keçmək üçün məcburi bir arqument təqdim edir.

        Alətlər

        Bu vasitələr kodunuzun etibarlılığını yoxlamağa və gözəl görünməyə kömək edəcəkdir.

        • HTML / XHTML Doğrulama Xidməti: W3C təsdiqləyicisi həm HTML, həm də XHTML sənədlərini rəsmi spesifikasiyalara uyğunluğunu yoxlayır.
        • HTML Tidy: HTML sənədlərini avtomatik təmizləməyə və standart xüsusiyyətlərə uyğunlaşdırmağa kömək edir. Əvvəlcə W3C-nin Dave Ragget tərəfindən hazırlanmışdır və indi SourceForge-də açıq mənbəli bir layihədir.

        Dərsliklər

        Həqiqətən XHTML inkişafına dalmaq istəyirsinizsə, bu dərslər sizə getməlidir.

        • XHTML Açıklaması: XHTML-in necə meydana gəldiyinə dair bir ümumi məlumat verir və baş verən bütün dəyişiklikləri izah edir, ardınca kod nümunələri, DTD icmalı və ən yaxşı kodlaşdırma təcrübələri.
        • Başlayanlar üçün XHTML Veb Dizayn: şərhlər, mətn və daha çox daxil olmaqla XHTML-in inkişaf etmiş tikinti bloklarını araşdırır.
        • XHTML Təlimatı: XHTML əsas anlayışlarını qısa şəkildə əhatə edən çox qısa bir dərslik.
        • Girişli HTML / XHTML formaları: bilmək üçün lazım olanları əhatə edən bir başlanğıc səviyyəli dərslik.
        • HTML başlayaraq (XHTML): yeni başlayanlar üçün XHTML əsaslarını öyrənmək üçün uyğun bir video dərsliyi.
        • Proqram Testi Metodologiyaları: HTML inkişaf etdiriciləri üçün ümumi maraq doğuran proqram test üsulları və alətlərinə giriş.

        Kitablar

        XHTML HTML ilə bağlı olduğundan, bir çox kitab birlikdə bu iki dildə müzakirə edir. Tamamilə yeni başlayanlara yönəlmiş kitabları, həmçinin kodlaşdırma təcrübəsi olan və biliklərini genişləndirmək istəyənlərə yönəlmiş kitabları tapacaqsınız..

        • HTML, XHTML və CSS: Elizabeth Castro tərəfindən Visual QuickStart Bələdçisi (2006): yeni başlayanlar üçün uyğun bir dildə bütün HTML və XHTML əsaslarını izah edir. Kitabın vizual nümunələri çoxdur və əlavə material, nümunələr, yeniliklər və daha çoxu olan bir yoldaş veb saytı var.
        • Tittel və Noble tərəfindən HTML, XHTML və CSS For Dummies (2011): HTML, XHTML və CSS-ə giriş sənədi, XHTML sənədlərini necə yaratmağı, bu prinsipləri WordPress və Drupal kimi məşhur CMS-lərə tətbiq etməyi və mobil dizayn üçün məlumat verən qurğular.
        • Jon Duckett tərəfindən HTML, XHTML və CSS (2011) ilə Veb Proqramlaşdırmaya başlayaraq: HTML, XHTML və CSS istifadə edərək veb səhifələrini necə yazmağı sizə öyrədir. Bu standartlara əsaslanan prinsiplərə uyğundur, eyni zamanda oxuculara (X) HTML istifadə ilə qarşılaşacaqları problemlər yollarını öyrədir.

        XHTML Bu gün

        İlk əvvəl yaradıldığı kimi XHTML artıq fəal şəkildə inkişaf etdirilmir və saxlanılmır. Onun lütfdən düşməsinin əsas səbəbi, səhv olduqda veb səhifələrin göstərilməsini dayandıran səbəb olan çox ciddi bir səhv istifadəsi idi. Bu HTML5 üzərində işləməyə başlayan Web Hypertext Tətbiq Texnologiyaları Qrupunun (WHATWG) yaranmasına səbəb oldu. Onlar XHTML 2.0 işçi qrupunun sonda bölüşdürülməsinə öz töhfələrini verdilər.

        Bu gün W3C tərəfindən görülən bütün iş HTML5 və HTML5 qaralmada HTML5 ilə təyin olunan XHTML5.1 olaraq bilinən XHTML sintaksisinə yönəldilmişdir..

        XHTML HTML5 tərəfindən kənara qoyulsa da, bunun arxasındakı tarixi və müvafiq kodlaşdırma təcrübələrini bilmək gələcək üçün güclü bir zəmin yaradır. Yuxarıdakı mənbələr sizi etibarlı kodu öyrənmək üçün doğru yola yönəldəcəkdir.

        HTML5

        HTML5

        HTML5 HTML standartının hazırkı versiyasıdır. Bu veb sənədlər və tətbiqlər üçün istifadə olunan işarələmə dilidir. HTML5, dilə bir sıra əsas əlavələr və dəyişikliklər daxildir. Bunları və bir az daha müzakirə edəcəyik.

        Tarix və Giriş

        1-dən 4-cü versiyalara keçdiyimiz kimi HTML tarixinə keçdik. Lakin HTML5 tarixi daha da maraqlı və əhəmiyyətlidir.

        HTML 5-ə gedən yol

        İnternetin kütləvi şəkildə qəbul edilməsinin ilk illərində, əsas brauzer təminatçıları özlərinin şəxsi HTML elementlərini və göstərməyə öz yanaşmalarını inkişaf etdirdilər.

        Bir brauzer üçün yaradılan HTML sənədləri başqalarında, xüsusən HTML səhifələrində forma nəzarəti kimi interaktiv elementlər olsaydı, demək olar ki yararsız idi.

        HTML 4.0 və XHTML sabitləşdikcə Veb Standartları hərəkəti brauzer istehsalçılarını veb standart səhifələrin istənilən brauzerə uyğun olması üçün açıq standartları qəbul etməyə məcbur etdi..

        Bu iş çox müvəffəq oldu, lakin iki cərəyan, bütün açıqlıq və qarşılıqlı əlaqə prinsiplərini təhdid edən HTML sərhədlərini itələdi.

        Birincisi, "quirks mode" brauzer hədəf alan kollektiv pis vərdişlər. Xüsusi brauzerlər üçün dizaynları cırmaq məcburiyyətində qaldıqdan sonra bir çox dizayner bu şəkildə kodlaşdırmağa davam etdi.

        İkincisi, HTML-də dəstəklənməyən zəngin, interaktiv məzmun üçün artan bir istək idi. Bu Flashın geniş yayılmasına səbəb oldu.

        2004-cü ildə Mozilla və Opera W3C sonradan HTML5 olacağını müdafiə edən bir mövqe kağızı təqdim etdilər. Dilin yeni iterasiyası, standartlara uyğun veb brauzerlər ilə geri qalmaqla yanaşı, yeni interaktiv funksionallıq və zəngin mediaya dəstək olardı..

        Bu son nöqtə çox vacib idi - yeni versiya zərif dərəcədə azaldılmalı və alt HTML kimi etibarlı HTML 4.0 olmalıdır; Əks təqdirdə, artıq izdihamlı bir ekosistemin başqa bir qarışıq variantı olardı.

        WHATWG HTML5 üzərində işləməyə dərhal başladı və ilk ictimai layihə 2008-ci ildə nəşr olundu. Brauzer istehsalçıları inkişafını davam etdirən standart hissələrini təcrübi şəkildə tətbiq etməyə başladılar..

        2012-ci ildə sabit bir "Namizəd Tövsiyəsi", 2014-cü ildə isə tamamilə sabit W3C Tövsiyəsi yayımlandı. Bu vaxta qədər bütün böyük brauzerlər standartın ən vacib hissələrini dəstəkləyirdilər.

        İndi HTML5 standartında iki paralel inkişaf yolu var. W3C artan versiya nömrələri ilə sabit bir buraxılış dövrünə malikdir - bir sıra "anlar". WHATWG davamlı olaraq əlavə olunan yeni xüsusiyyətlərlə inkişaf edən "yaşayış standartı" saxlayır.

        HTML5-də nə var?

        Xüsusiyyətin özü də daxil olmaqla HTML5-də bir çox yeni var. HTML 4.0, əslində, mövcud işarə etiketlərinin inventarı idi. HTML5 buna daxildir, lakin standartda müəyyən edilmiş brauzer əsaslı texnologiyaların modul ekosisteminin yalnız bir parçasıdır.

        İşarələmə

        HTML5 üçün işarələmə dəyişiklikləri ümumiyyətlə bir neçə kateqoriyaya düşür.

        Semantika

        Semantik işarələmə məna daşıyan işarədir. Məsələn, HTML 4.0-də yeganə əsas səhifə quruluşu elementi idi. Bir şey ola bilər: bir başlıq, altbilgi, bir sütun, yan çubuğu, menyu. HTML5-də bir sıra semantik səhifə quruluşu elementləri əlavə edildi:

        • .

        HTML5 əlavə digər semantik elementləri daxildir:

        • və təsvirlər və diaqramlar üçün istifadə olunan;
        • vurğulanmış və ya işarələnmiş mətni müəyyən edən;
        • bir datetime müəyyənləşdirir.

        HTML5 də bunu açıq şəkildə göstərir və üstünlük verilməlidir .

        Multimedia

        Medianı dəstəkləmək üçün HTML5-ə yeni elementlər əlavə edildi:

        • .

        Elementlər JavaScript, Flash və ya hər hansı bir şəkildə yerləşdirilmədən medianın doğma səslənməsinə imkan verir - görüntü daxil olmaqla sadədir. Element JavaScript proqramı ilə səhifədə qrafik yaratmaq üçün işləyir.

        HTML5 də genişlənən Vektor Qrafikası (SVG) üçün açıq bir dəstək var.

        İnteraktivlik

        HTML5, bir tətbiq platforması olaraq dili dəstəkləyən bir sıra yeni forma elementləri və giriş tiplərinə malikdir. Bunlara daxildir:

        • .

        Giriş növləri indi daxildir: rəng, tarix, məlumat müddəti, datetime-yerli, e-poçt, ay, nömrə, sıra, axtarış, tel, vaxt, URL və həftə.

        Yeni forma nəzarəti ilə yanaşı, vizual rəy təmin edən və formalardan kənarda istifadə edilə bilən HTML5 tətbiq olundu. Bundan əlavə, bir neçə yeni qlobal atributlar interaktiv xüsusiyyətlərə imkan verir:

        • məzmunlu
        • kontekst menyusu
        • məlumat- *
        • sürüklənən
        • damcı zonası
        • yazım.
        Leksinq və təhlil qaydaları

        Mövcud elementlərin kataloğundakı dəyişikliklərdən başqa, HTML5 işarələmə daha sərt və daha yaxşı müəyyən edilmiş leksika və təhlil qaydalarına tabedir. Artıq XML və ya SGML-in bir versiyası deyil, tam uyğun bir işarə dilidir.

        Uyğun brauzerlərdə oxşar davranış təmin edərək, sintaksis səhvləri və ya pis formalaşmış işarələmənin ardıcıl olaraq uğursuz olacağı gözlənilir.

        Brauzer və DOM API

        HTML5, DOM (Document Object Model - səhifədəki məzmun) və brauzerlə qarşılıqlı əlaqə üçün bir sıra JavaScript API-lərini göstərir. Bunlara daxildir:

        • Yuxarıda göstərilən kətan, səhifədə qrafik göstərilməsi üçün.
        • Istifadə üçün və Müddətli Media Playback .
        • Onlayn / Offline status yoxlanışı.
        • Brauzerə müəyyən bir filetip və ya rabitə protokolunu idarə etmək üçün standart bir yol olaraq veb sayt seçməyə imkan verən MIME növü və protokol idarəedicisinin qeydiyyatı. Məsələn, bir webmail tətbiqinə mailto: linklər ilə işləməyə icazə verin.
        • Atributlar kimi semantik metadata yuva qurmağa imkan verən Microdata.
        • İki fərqli brauzer kontekstində açılmış iki fərqli domen mənbəyindən iki səhifənin bir-biri ilə əlaqə yaratmasına imkan verən çarpaz sənədli mesajlaşma.
        • Veb saxlama, çərəzlərə bənzər, lakin istifadəsi daha asan və daha böyük saxlama qabiliyyətinə malik davamlı bir açar dəyər cütlüyü məlumat anbarı.

        HTML5 uğuru

        HTML5 müvəffəqiyyətini iki saymaq olar:

        • dəqiqləşdirmə məqsədlərini nə dərəcədə yerinə yetirir
        • onun qəbulu nə qədər genişdir.

        Hər iki cəhətdən, HTML5 olduqca uğurlu olmuşdur.

        HTML5-nin hədəfləri bunlar idi:

        • brauzerin qarşılıqlı əlaqəsi
        • pluginlər üçün azaldılmış və ya aradan qaldırılmış ehtiyac
        • geri mövcud standartlara uyğunluğu.

        Bunlara böyük dərəcədə nail olunmuşdur. Mühüm brauzerlərdə göstərilən mühərriklər və JavaScript tətbiqetmələri bir veb səhifəsinə daxil olmanın bütün brauzerlərdə ardıcıl bir təcrübə qazandıracağı nöqtəyə çevrildi..

        Multimedia, brauzer saxlama və digər tətbiq yönümlü xüsusiyyətlərə dəstək Flash ehtiyacını aradan qaldırdı və doğma HTML5 veb tətbiqlərində partlayışa səbəb oldu..

        HTML5-də yaradılan sənədlər, daha inkişaf etmiş veb tətbiqləri işləməsə də, köhnə brauzerlərdə yaxşı görünür.

        Qəbul tez bir zamanda, standart rəsmi olana qədər başlamışdır. Bu yazıya görə, ilk 10 milyon veb saytın əksəriyyəti HTML5 istifadə edir. Bundan əlavə, yeni veb məzmunun əksəriyyəti HTML5-də istehsal olunur.

        Daha da maraqlısı HTML5 brauzer xaricində istifadəsidir. Elektron masaüstü üçün elektron və mobil telefon üçün telefon dəstəyi HTML5 (CSS3 və JavaScript ilə) doğma tətbiq dilinə çevrildi..

        Ümumi HTML5 Resursları

        • HTML5 W3C Tövsiyəsi və WHATWG HTML Yaşayış Standartı HTML5'i təyin edən iki rəsmi mənbədir.
        • W3C HTML5 üzrə bir sıra təlim kursları təklif edir:
          • HTML5 Giriş
          • HTML5 Hissə 1: HTML5 kodlaşdırma əsasları və ən yaxşı təcrübələr
          • HTML5 Part 2: HTML5 Tətbiqlərinin Dizaynı Üçün İnkişaf Etmiş Texnikalar
        • Mozilla Developer Network hərtərəfli HTML5 arayışını təqdim edir.

        HTML5 Gələcəkdir

        HTML5 vebin bu günü və gələcəyidir. Veb texnologiyaları ilə işləsəniz və ya veb məzmunu yayımlayırsınızsa, standartla tanış olmalısınız. 2010-cu ildən əvvəl veb dizayn dizaynını öyrənmisinizsə və dəyişikliklərə davam gətirməmisinizsə, HTML5-də yoxlanmağa dəyər bir çox əla şey var.

        Audio və video mənbəyi

        HTML5 gəlməmişdən əvvəl, audio və videoları veb səhifələrə yerləşdirmək düz deyildi. Fərqli texnologiyalar və MIME növləri fərqli plaginlər tələb edir.

        Ayrıca media bəzən iframes istifadə edərək yapışdırılmalı idi. Bu ideal deyil, çünki bu, hakerlər zərərli kodu daxil etmək üçün də istifadə edirlər.

        HTML5, ilk növbədə, praktiki olaraq hər hansı bir saytda istifadə edilə bilən standartları təqdim etdikləri üçün media idarəçiliyini asanlaşdıran yeni etiketlər təqdim edir. Bütün HTML5 etiketlərində olduğu kimi, etiketlər köhnə brauzerlərlə uyğunlaşmaya biləcəyi üçün bir qədər ehtiyatlı olmaq lazımdır.

        Səs və ya video yerləşdirmək üçün HTML5-də yeni və elementlərdən istifadə edə bilərsiniz. Bir nümunə:

        Zəhmət olmasa brauzerinizi yeniləyin.

        Aşağıda, hər bir elementi öz atributları ilə parçaladıq.

        Daxiletmə Video

        HTML5 brauzer eklentlərinə ehtiyacı aradan qaldıran yeni bir element təqdim edir.

        Elementin açılış və bağlama etiketləri arasında alternativ mətni göstərə bilərsiniz. Bu yalnız brauzer elementi dəstəkləmədikdə göstərilir.

        Element keyfiyyətləri

        Element içərisində müxtəlif atributları təyin edə bilərsiniz:

        eni, boyu

        Bu atributlar ekranda videonun ölçülərini təyin edir. İsteğe bağlı olsalar da, səhifənin qalan hissəsi yüklənərkən düzgün görünməsi üçün onları daxil etməyiniz yaxşı olar.

        Videonun eni və hündürlüyü piksellərlə göstərilməlidir.

        nəzarət edir

        Nəzarət atributu, brauzerə bir çalma / fasilə düyməsini və səs səviyyəsini idarə edən bir sürgü göstərməsini söyləyir. Videonu nəzarət olmadan göstərmək üçün atributu buraxın.

        avtoplay

        Autoplay istifadəçidən heç bir müdaxilə olmadan videonu masaüstü cihazlarda oynamağa məcbur edəcək. Avtomatik ifa etmədən göstərmək üçün sadəcə atributu buraxın.

        Mobil cihazlarda, avtomatik oynatma atributu nəzərə alınmır.

        Daxiletmə Audio

        Səs daxil etmək üçün elementdən istifadə edin. Elementə çox oxşardır.

        Elementin açılış və bağlama etiketləri arasında alternativ mətni göstərə bilərsiniz. Bu yalnız brauzer elementi dəstəkləmədikdə göstərilir.

        Element keyfiyyətləri

        Element içərisində müxtəlif atributları təyin edə bilərsiniz:

        döngə

        Döngə atributu brauzerə səs izini başladıqdan sonra yenidən başlatmağı tapşırır.

        nəzarət edir

        Nəzarət atributu brauzerə video etiketi ilə olduğu kimi eyni çalma / fasilə düyməsini və səs səviyyəsini idarə edən sürgüçüsünü göstərməyi söyləyir. Səsi nəzarət olmadan göstərmək üçün sadəcə atributu buraxın.

        avtoplay

        Avtomatik ifa atributu, səsin avtomatik çalmağa başlamasını məcbur edəcək. Səsinizi avtopoyram olmadan yerləşdirmək üçün sadəcə atributu buraxın.

        səssiz

        Səssiz atribut səs yüklədikdə səs səviyyəsini ləğv edəcəkdir.

        əvvəlcədən yükləyin

        Öncədən yükləmə atributu, səs məzmunundan əvvəl səs yükləməyinizə imkan verir. Qəbul edilə bilən dəyərlər avtomatik, metadata və ya heç biri deyil.

        Element

        Element faylı və MIME tipini müəyyənləşdirir və ya element daxilində istifadə olunmalıdır. Ən azı bir element olmalıdır. Bir faylın alternativ versiyasını təyin etmək istəyirsinizsə əlavə elementlər əlavə edə bilərsiniz.

        Misal üçün:

        Brauzeriniz video etiketini dəstəkləmir.

        Element keyfiyyətləri

        Aşağıdakı xüsusiyyətlərə malikdir:

        src

        Src atributu, video və ya audio fayl üçün mənbə yolunu və adını göstərir.

        növü

        Faylın MIME növü.

        Video üçün məqbul dəyərlər video / mp4, video / webm və video / ogg. Səs üçün məqbul dəyərlər audio / mpeg, audio / wav və audio / ogg.

        Müasir brauzerlər nəzəri cəhətdən elementin özünü dəstəkləsə də, bəziləri müəyyən MIME növləri ilə mübarizə apara bilər.

        Çarpaz brauzer uyğunluğunun ən yaxşı şansı üçün video / mp4 MIME tipi video üçün tövsiyə olunur və səs / mpeg MIME növü audio üçün ən yaxşısıdır. Məsələn, eyni videonun bir ogg və mp4 versiyasını təmin etmək istəyirsinizsə, çox elementi göstərə bilərsiniz.

        Element

        Element, səs və ya video ilə birlikdə təqdim olunan bir mətn qaynağını təyin etməyə imkan verir. Bunun üçün ən çox istifadə edilən bir yazı altyazı faylını və ya başlıqlarını təyin etməkdir.

        Hər video və ya səs elementi üçün birdən çox trek göstərə bilərsiniz. Məsələn, fərqli dillər üçün elementlər əlavə etmək istəyə bilərsiniz:

        Element keyfiyyətləri

        Element aşağıdakı xüsusiyyətlərə malikdir:

        src

        Mətn faylı üçün mənbə yolu və fayl adı.

        mehriban

        Tip atributuna bənzər, növ atributu faylın xarakterini müəyyənləşdirir. Subtitrlər, fəsillər, təsvirlər, metadata və ya alt yazılardan istifadə edə bilərsiniz.

        srclang

        Srclang atributu mətn sənədinin dilini təyin etməyə imkan verir. Müvafiq dil kodu istifadə edin.

        defolt

        Defolt atributu istifadə edərək hansının seçim olacağını müəyyənləşdirin.

        etiket

        Mətn izinə bir ad verir.

        Audio və video mənbələri

        • Mozilla, HTML5 Audio və Video istifadə edərək, bu əla bələdçi hazırladı. Sizi sadə tətbiqetmədən istifadəyə aparacaq.
        • Apple, inkişaf etdiricilər üçün xüsusi bir təlimat yayımladı. İOS və ya Safari üçün inkişaf etdirdiyiniz təqdirdə bu oxumağa dəyər.
        • Microsoft-un Internet Explorer-də HTML5 səs və video üçün öz rəhbərliyi var.

        Tətbiq Cache

        HTML5 yalnız işarələmə sintaksisini dəyişdirmədi. Ayrıca brauzerə əsaslanan bir sıra texnologiyalar, o cümlədən veb tətbiqlərin oflayn istifadəsi ilə əlaqəli bir neçə texnologiya müəyyən edilmişdir.

        Tətbiq Cache (və ya "AppCache"), inkişaf etdiricilərə mənbələrin əvvəlcədən götürülməsini və yerli olaraq saxlanılmasını təmin etməyə imkan verən bir xüsusiyyətdir..

        Bu qaynaqlar veb səhifənin başlığından bağlanmış bir önbelleğe açıq bir faylda elan edilir. Bu, offline işləyən bir veb tətbiqini dizayn etmək və ya sadəcə istifadəçi təcrübəsini sürətləndirmək üçün istifadə edilə bilər.

        AppCache, xüsusilə tək səhifəli veb tətbiqləri kontekstində çox potensiala sahib bir xüsusiyyətdir. Təəssüf ki, xüsusiyyətin də bir çox problemi var və köhnəlir və standartdan çıxarılır.

        Deyilənlərə görə, AppCache hələ də istifadə edilə bilər və müəyyən effektləri həyata keçirməyin yeganə yolu.

        Bu qarışıqlığı aradan qaldırmağınıza kömək etmək üçün, mövzunu müxtəlif cəhətlərdən araşdıran ən yaxşı dərs vəsaitlərini və tətbiqi Keşlə topladıq..

        Tətbiq Cache Dərslikləri

        • Tətbiq Keshini istifadə etmək üçün yeni başlayan bir təlimat, mövzuya dair ən yaxşı giriş dərslərindən biridir.
        • Tətbiq Cache istifadə Mozilla Developer Şəbəkəsindən bir geliştirici yönümlü texniki təlimatdır.
        • Gəlin bu oflayn olaq - AppCache-dən necə istifadə olunacağınızın ətraflı, izahlı izahı.
        • Mobil Veb Tətbiqlərində HTML5 Tətbiqetmə Cache-dən istifadə AppCache-nin ümumi istifadəsini əhatə edir və mobil brauzerlər üçün HTML5 veb tətbiqləri hazırlayarkən istifadə edərkən xüsusi məsələləri araşdırır.
        • Tek səhifə tətbiqetmələri üçün HTML 5 tətbiqi önbelleğinden istifadə, bir Ember.js tətbiqi kontekstində AppCache istifadəsini ətraflı şəkildə izah edir.
        • Təlimat: Offline HTML5 Veb Tətbiqi, offline işləyən bir veb tətbiqinin necə qurulacağını izah etmək üçün RSS oxucu nümunəsindən istifadə edir. Xüsusi maraq kəsb edən məqam, AppCache'nin çərəzlər, Yerli saxlama və WebSQL kimi bir sıra digər HTML məlumat dükanları ilə birlikdə istifadə edilməsidir..
        • IndexedDB və WebSQL ilə sadə bir çarpaz bir brauzerin oflayn siyahısı qurulması, oflayn məlumatların saxlanması xüsusiyyətləri üçün müxtəlif dəstəyi olan birdən çox brauzerdə işləyən oflayn ilk iş siyahısı siyahısı hazırlayır. Proqram Cache, IndexedDB və WebSQL ilə birlikdə istifadə olunur.
        • HTML5 App Cache ilə Oflayn Tətbiqin yaradılması, Appache-in istifadəsini, bir təzahür yaratmağın necə qurulması ilə bağlı addım-addım təlimatları və Apache-də manifest faylını düzgün şəkildə təmin etmək üçün .htaccess-in istifadəsini ətraflı şəkildə əks etdirir..
        • HTML5 Offline Veb Tətbiqlərini yaratmaq, AppCache daxil olmaqla bir neçə yerli məlumat saxlama metodlarının yerlərini və materiallarını araşdırır.
        • 5 dəqiqə ərzində Veb Tətbiqinizi sürətləndirmək üçün HTML5 Tətbiqetmə Cache-i əlavə etmək, AppCache-dən tez istifadə edəcək qısa bir dərslikdir. Bu dərslikdəki diqqət, oflayn tətbiqetmə təcrübəsini təmin etmək üçün deyil, onlayn veb sayt təcrübəsini sürətləndirmək üçün önbelleğden istifadə etməkdir.
        • HTML5 AppCache ilə Veb Tətbiqlərinizi Offline işlətmək, önbelle əlaqəli hadisələr və hərəkətləri detallaşdıran önbelleği və JavaScript API-ni əhatə edir.
        • Tətbiq Cache nədir? AppCache-nin yüksək səviyyədə icmalını təqdim edir.
        • Tətbiq Keshi, Veb Anbarı və ASP.NET MVC ilə HTML5 Offline Tətbiq qurun, təzə bir faylın düzgün quruluşunu tam əhatə etməklə, AppCache-nin əslində necə işlədiyinə ətraflı nəzər salın. Bu ümumi izahatdan sonra təlimat ASP.NET tətbiqetməsində bu prosesi necə idarə edəcəyinizi göstərmək üçün davam edir.

        Əlavə Tətbiq Cache Öyrənmə materialları

        • HTML5 ilə daha sürətli bir veb tətbiqi üçün ən yaxşı təcrübələr yalnız bir bölmədə Application Cache-ə toxunur, lakin App Cache-in daha böyük bir performans strategiyasının bir hissəsi olaraq necə istifadə edildiyini anlamaqda çox faydalıdır..
        • Application Cache istifadə edərkən göstərişlər AppCache-nin bəzi ümumi problemləri ilə məşğul olmaq üçün ən yaxşı təcrübələrin siyahısı.
        • Bir HTML tətbiqi önbelleğini silmək, bir neçə brauzerdəki yerli tətbiq cache yaddaşınızı necə silməyinizi izah edir. Layihənizin sənədləri AppCache onları yenilədikdən daha sürətli dəyişdikdə bu, yerli inkişaf və sınaq zamanı xüsusilə faydalıdır.
        • HTML5 Tətbiq Cache istifadə edərkən qarşısını almaq üçün ümumi zərərlər AppCache-nin ən çox yayılmış problemlərini əhatə edir və onları necə aradan qaldırmağı izah edir..
        • Application Cache bir Douchebag, məzəli, amma hamısı çox dəqiqdir, tətbiq Cache ilə işləməyin çətinliyindən xəbər verir. Bu esse cəbhə inkişaf etdiriciləri arasında ani bir klassik idi və AppCache ilə maraqlanan hər kəs üçün mütləq mütaliə tələb olunur.

        Tətbiq Cache İstinadı

        • Tətbiq Keshini istifadə edə bilərəmmi? hansı brauzerlərin AppCache-i dəstəklədiyi barədə qısa məlumat verir.

        Application Cache ilə işləmə vasitələri

        • Cache Manifest Validator, AppCache Manifest sənədlərinizi doğrulamaq üçün bir onlayn vasitədir.
        • GWT AppCache Dəstək Kitabxanası, Appcache manifest fayllarının nəslini avtomatlaşdıran Google Web Toolkit üçün moduldur.
        • Appcache-Manifest, əmr satırından Application Cache Manifest sənədləri yaratmaq üçün bir Node.js vasitədir. Alət, manifest fayllarının MD5 hash-inə daxildir, yenilənmiş faylların müştəridə müvafiq cache etibarsızlığına səbəb olan manifestin avtomatik olaraq dəyişdirilməsini təmin edir..
        • CacheMan, Cache Manifest nəslini idarə edən masaüstü bir tətbiqdir.

        Tətbiq Keshi ilə İrəliləmək

        Proqram Cache-dən necə istifadə etməyi öyrənməlisiniz? Veb tətbiqetmələrində işləyən bir ön hazırlayıcısınızsa - tamamilə bəli. Bununla yanaşı, nəyin gəldiyini və brauzer anbarının necə inkişaf etdiyini də bilməlisiniz.

        AppCache üçün nəzərdə tutulan əvəz xidmət işçiləridir. Artıq bəzi brauzerlərdə Xidmət İşçilərindən istifadə edə bilərsiniz və onları asanlıqla həyata keçirmək üçün əla vasitələr var. Digər tərəfdən, bəzi brauzerlər bu funksiyanı nə vaxt tətbiq edib-etməyəcəyinə belə qərar vermədilər.

        Beləliklə, öz veb tətbiqetmələrinizdə nə etməlisiniz?

        İndiyə qədər AppCache-dən istifadə edin, ancaq Xidmət İşçiləri üçün hazırlayın.

        Oyunlar, Qrafika və Animasiyalar

        Ölçülən vektor qrafikası (SVG) və HTML5 kətan elementi qrafika, animasiya və hətta brauzer əsaslı oyun yaratmaq üçün iki güclü vasitədir. Bu texnologiyaların hər ikisi eyni məqsədlər üçün istifadə edilə bilsə də, kökündən fərqli şəkildə işləyirlər.

        • Bir kətan elementi bir piksel-by-piksel əsasında paslanmış şəkilləri çəkə və manipulyasiya edə biləcəyiniz bitmap məkandır..
        • Bir SVG, qətnamədən asılı olmayan vektor qrafikasını təsvir edən bir koddur.

        Həm kətan elementləri, həm də SVG-lər proqramla skriptləmə ilə yaradıla bilər və istifadəçi girişinə cavab vermək üçün hazırlanmışdır. Nəticədə SVG və kətan elementləri statik qrafika və interaktiv animasiyalar yaratmaq üçün istifadə edilə bilər.

        SVG vs Canvas

        Əvvəla, kətan olarkən SVG HTML5 spesifikasiyasının bir hissəsi deyildir. SVG, iki ölçülü qrafikanı təsvir etmək üçün istifadə olunan bir dildir. Bu HTML və XML sənədlərinə daxil edilə bilən bağımsız bir veb standartdır.

        Bir HTML sənədinə daxil edildikdə, SVG, HTML5 sintaksiyasına uyğun bir sintaksis işlədir və beləliklə bəziləri SVG'nin HTML elementi olduğunu səhv düşünməyə vadar edir.

        SVG və HTML5 kətan elementləri brauzerlər tərəfindən tamamilə fərqli şəkildə göstərilir:

        • Kətan elementləri "sürətlə" göstərilir. Bu o deməkdir ki, kətan elementləri brauzer tərəfindən işləndikləri üçün real vaxtda çəkilir.
        • SVG dərhal çəkilmir. Brauzer bir SVG ilə qarşılaşdıqda əvvəlcə SVG üçün DOM qurur və sonra DOM təqdim edir.

        Bu cüzi fərq kimi görünə bilər, amma elə deyil. Bu, brauzerin bir kətan ilə qarşılaşdıqda DOM qurması lazım deyil, ancaq bir SVG göstərildiyi zaman lazımdır.

        Sadə animasiyalar üçün fərq cüzidir. Bununla birlikdə, olduqca mürəkkəb kətan animasiyalar SVG-lərə nisbətən daha az brauzer mənbəyinə ehtiyac duyur.

        Digər tərəfdən, bir SVG-yə kiçik bir dəyişiklik etmək istəyirsinizsə, DOM-u keçib dəyişiklik edə bilərsiniz, hər hansı bir dəyişiklik etmək üçün bütün bir kətan elementi yenidən işlənməlidir.

        Kətan elementlərinin və SVG-lərin fərqlənməsinin başqa bir yolu qətnamədir. Kətan elementləri qətnamədən asılıdır. Bir kətan elementini böyüdüyünüzdə qətnamə azalır. Digər tərəfdən, bir SVG, qətnamədən müstəqildir və istənilən resoultionda mükəmməl görünəcəkdir.

        SVG və kətanlardan nə vaxt istifadə ediləcək

        Bütün bunlar sual doğurur: SVG və kətan elementlərinin hər biri nə vaxt istifadə edilməlidir? Bu vasitələrin tətbiqində bir sıra krossover olsa da, ümumiyyətlə bu qaydalara əməl edin:

        • Hər hansı bir ölçülü cihazlarda kəskin görünməli olan piksel mükəmməl animasiyalar və qrafiklər üçün SVG-ləri istifadə edin.
        • JavaScript istifadə etməməyiniz lazımdırsa və ya animasiya məzmununun əlçatanlığı vacibdirsə SVG-ləri istifadə edin.
        • Mürəkkəb animasiyalar və çox sayda istifadəçi girişi daxil edən oyunlar yaratmaq üçün HTML5 kətandan istifadə edin.

        SVG-lərin istifadəsi haqqında daha çox məlumat əldə etmək istəyirsinizsə, SVG-lərin siyahısını daxil edən SVG-ləri və SWF-ləri müqayisə edərək məqaləmizə nəzər yetirin. HTML5 kətan elementi haqqında daha çox məlumat əldə etmək üçün oxuyun.

        Kətan qaynaqları

        Əsaslardan başlayaq:

        • Mozilla Developer Network Canvas Tutorial: bu dərslik əsas istifadədən başlayır və rəsm şəklini, mətni, şəkillərdən istifadə edərək, dəyişikliklər və animasiyalar, piksel manipulyasiya və daha çox şeyləri əhatə etmək üçün hərəkət edir. Bu dərsliyin sonunda qabaqcıl animasiyalar, davamlı panorama və rəng seçmə tətbiqetməsi yaradacaqsınız.
        • Dev.Opera HTML5 Canvas - Əsaslar: kətanlara bu hərtərəfli giriş təsvir üsulları, şəkillərlə işləmək, piksel əsaslı manipulyasiya, həmçinin mətn, kölgələr və gradientləri əhatə edir.
        • W3Schools Canvas Tutorial: Rəsm işinin əsaslarını, koordinatlar, gradients, rəsm mətni və şəkillərlə işləməyi öyrənin. Sonra, bir kətan saatı quraraq öyrəndiklərinizi tətbiq edin. Nəhayət, hamısını bir yerə qoyun və bir neçə fərqli əsas HTML5 oyunu yaradın.
        • Əməlli JavaScript, Fəsil 16: Kətan üzərində rəsm: bu mətn, yalnız veb tərtibatçılarına sadə fəndləri öyrətmək üçün deyil, JavaScript proqramçılarını öyrətmək üçün hazırlanmışdır. Bütün bu interaktiv ebook bir qızıl mədənidir, ancaq diqqətiniz kətan elementi ilə necə işləməyi öyrənmək üzərində qurulmuşdursa, fəsil 16 JavaScript və HTML kətan elementinin qarşılıqlı əlaqədə olmasına əsas verir..

        Kətan əsaslarını möhkəm bir şəkildə dərk edərək, inkişaf etmiş texnikalara keçmək istərdiniz:

        • Yaradıcı JS 31 Gün Tuval Təlimləri: bir ay ərzində (daha çox və ya daha az) kətan elementini mənimsəyin. Bu seriyanı bitirin və bir neçə qabaqcıl kətan animasiya texnikasını öyrəndiniz.
        • HTML5 Rocks Case Studie: Bina Racer: Bu iş araşdırmasına baxın və Google-da peşəkar mühəndislərin JavaScript və kətan ilə necə işlədiyini görəcəksiniz..

        Bir şey qurmaqdan daha yaxşı bir yol yoxdur. Bu dərslər istifadə etməyi öyrəndiklərinizi qoyacaq və bəzi sadə HTML5 oyunlarını necə yaratmağı sizə göstərəcək:

        • CSS-tövsiyələr öyrənmə kətanları: Bir ilan oyunu etmək: CSS-fəndləri texniki cəhətdən əla dərslər və məqalələr təqdim etməklə tanınır. Bu təlimatı izləyin və eyni zamanda Twitter-də bir ön mühəndisdən kətan ilə necə işləməyi öyrənərkən əyləncəli ilan oyunu istehsal edin..
        • HTML5 Oyunlar üçün göz yaşı tökməyən HTML5 Rok: bu dərslik sadə bir kosmik işğalçı oyunu qurma prosesi ilə addım-addım gəzəcək.
        • Envato Tuts + HTML5 Canvas Çini Mübadilə Puzzleını yaradın: bu dərslikdə bir kafel dəyişdirərək bir kafel dəyişdirmək üçün kətan və JavaScript istifadə etməyi öyrənin. Nəticə hər hansı bir görüntü ilə istifadə edə biləcəyiniz tənzimlənən çətinliklə sadə bir tətbiq olacaqdır.
        • Dev.Opera HTML 5 Canvas və Raycasting ilə yalançı 3D oyun yaratmaq: bu dərslik, 90-cı illərin əvvəllərində əfsanəvi oyun Wolfenstein 3D üslubunda HTML5 və kətan ilə yalançı 3D oyun xəritəsini necə yaratmağı sizə göstərəcəkdir. Bu dərslik işlək bir 3D ilk şəxs atıcı oyunu istehsal etməsə də, rekvizitlər və mühafizəçilərlə tamamlanmış bir yaraşıqlı 3D xəritəsi necə hazırlamağı öyrənəcəksiniz..

        Bir və ya iki dərin mətn üzərində işləməkdən daha yaxşı bir mövzu sənətini inkişaf etdirmək üçün daha yaxşı bir yol yoxdur. Budur, bu gün ən yaxşı HTML5 kətan mətnlərindən üçü:

        • Fulton və Fulton tərəfindən HTML5 Canvas (2013): kətan və JavaScript ilə interaktiv multimedia veb tətbiqləri qurmağı öyrənin. Bu mətn sadə 2D təsvirləri, riyaziyyat əsaslı hərəkəti inkişaf etdirmək üçün alqoritmlərdən istifadə, video və şəkillərdən istifadə, kətan tətbiqlərinə cavab vermək və daha çox şeyləri əhatə edir..
        • Çox yüklənmiş JavaScript qrafikası: HTML5 kətan, jQuery və daha çox (2011) ilə Raffaele Cecco: bu inkişaf etmiş mətn HTML5 kətanları mənimsəməyə kömək edəcək və toqquşma aşkarlanması, cisimlə işləmə, hamar sürüşmə və Google məlumat vizual alətləri.
        • Core HTML5 Canvas: Qrafika, Animasiya və Oyun İnkişafı (2011) David Geary: bu yeni başlayanlar üçün bir mətn deyil. JavaScript'nin orta səviyyəli qavramasına sahib olan təcrübəli inkişaf etdiricilər tərəfindən oxumaq üçün hazırlanmışdır. Bu mətn kətan əsaslarını əhatə etməsə də, əsas diqqət oyun inkişafı, xüsusi tətbiq nəzarəti, fizikanın HTML5 oyunlarına tətbiqi və mobil tətbiqetmələrin inkişafı kimi mövzulara yönəldilmişdir..

        İnteraktiv elementlər

        HTML5, interaktiv veb səhifələrin yaradılmasını asanlaşdırmaq üçün bir neçə atribut əlavə etdi.

        Ətraflı və Xülasə Etiketləri

        HTML5 istifadə edərək, və etiketlər vasitəsi ilə genişlənə və yıxıla bilən siyahılar yaratmaq mümkündür. Güllələnmiş siyahıları istifadə edərək HTML-nin əvvəlki versiyalarında olduğu kimi yaratmaq olar

        • etiketlər, bunlar statikdir və yıxıla bilməz.
          Element

          Siyahı üçün başlanğıc nöqtəsini təmin etmək üçün tərtibatçılar elementdən başlamalıdırlar. Bu element eyni ilə işləyir

            etiket. Aşağıdakı nümunə bu etiket ilə bir kod seqmentinə başlamaq üçün bir yol göstərir:

            ...

            Detal etiketlərini əlavə etmək siyahını tamamlamaq üçün kifayət deyil. Xülasə etiketləri də əlavə etmək lazımdır.

            Element

            Xülasə etiketi genişlənə və yıxıla bilən siyahıya tətbiq olunan etiketi göstərir. Dağılan və genişlənə biləcək əşyalar, məzmun tərəfindən dərhal xülasə etiketi altında göstərilmişdir.

            Xülasə etiketi məzmunu daxil olmaqla hər hansı bir HTML elementi ilə təyin oluna bilər

            və ya

              . Aşağıdakı və etiketlərin istifadəsinin sadə bir nümunəsidir:

              Siyahı etiketi

              Ətraflı məlumat buraya gedir...

              Başqa bir dəstin içərisinə və etiketlərə də yuva salmaq mümkündür. Bu başqa bir siyahı içərisində yığıla bilən / genişlənən bir siyahı yaradacaqdır.

              Budur və etiketlərdən istifadə edərək başqa bir siyahıdakı bir siyahı nümunəsi:

              Məhsulların siyahısı

              1-ci bənd

              2-ci bənd

              3-cü bənd

              Maddə a

              B maddəsi

              4-cü bənd

              Təfərrüatlar və xülasə etiketləri, bir veb səhifədə dinamik olaraq açılan və bağlanan siyahıların təsirini yaratmaq üçün istifadə edilə bilər. Bu, açıla və ya bağlana bilən suallara cavabları əks etdirən suallar da daxil olmaqla müxtəlif ssenarilərə tətbiq edilə bilər.

              Xülasə etiketində sual ola bilər, bu zaman cavablandırıla bilən məzmun cavab veriləcəkdir.

              Menyu və Menuitem Yazıları

              İnterneti gəzərkən istifadəçilər brauzerin menyusuna sağ siçan düyməsini basaraq daxil ola bilərlər. Yaranan menyu, brauzerdən brauzerə qədər dəyişir. Bəzi yeni HTML5 etiketləri ilə istifadəçilərin edə biləcəyi əlavə hərəkətləri əlavə etmək üçün menyunu düzəltmək mümkündür.

              Bundan əlavə, tədbirlər veb səhifənin özündə müəyyən hissələrə və ya yerlərə uyğunlaşdırıla bilər. Məsələn, veb səhifənin əsas hissəsinə qarşı naviqasiya zonasında fərqli hərəkətlər və ya menyu elementləri göstərilə bilər.

              Bunu mümkün edən etiketlər və etiketlərdir. Bunlar eksperimental etiketlər olduğundan geniş dəstəklənmir. Firefox hazırda onları dəstəkləyən yeganə böyük brauzerdir.

              Element

              Hər zaman bir menyu əlavə etmək lazımdır, maddələr seriyası etiketlə başlamalıdır. Bu seriya bağlama etiketi ilə sona çatdı, .

              Tərtibatçılar bu etiketlərdən diqqətli olmalıdırlar, çünki bunlar kontekst menyulardır və göstərilməməsi kodun HTML faylı daxilində yerləşməsindən asılıdır. Bu, tərtibatçılar elementlərdən istifadə etdikdə xüsusilə doğrudur. Aşağıdakı kodu nəzərdən keçirin:

              ...

              Bu vəziyyətdə, istifadəçi sağdakı "tmpDiv" içərisində siçan düyməsini basdıqda xüsusi menyunun elementləri görünəcəkdir. Əksər HTML5 etiketləri kimi, menyu etiketi də etiket və tip adlandırılan xüsusiyyətlərə malikdir.

              Etiket, sadəcə kontekst, siyahı və ya alətlər çubuğu kimi təyin oluna bilsə, menyu üçün eyniləşdiricidir. Çox menyu tipi göstərilə bilsə də, yalnız kontekst menyusu dəstəklənir.

              Element

              Menyuya maddələr əlavə etmək üçün tərtibatçılar etiketdən istifadə edən elementlərin adlarını göstərməlidirlər. Etiketdə həm menyu elementinin həm görünüşünə, həm də davranışına təsir göstərən bəzi xüsusiyyətlər var.

              Menuitem etiketi üçün atributlara etiket, simge və onklick daxildir.

              Etiketdə istifadəçi menyudan brauzerdən aktiv olduqda istifadə edəcəyi menyu elementi ilə tanış olacağı mətni göstərir. Geliştiricilər, mətnin solunda görünəcək menyu elementi üçün istifadə olunan simvolu təyin edə bilərlər. Onclick atributu istifadəçi tərəfindən menyu elementi işə salındıqda alınan hərəkətlərə nəzarət edir.

              Onclick atributunun apardığı tədbirlər javascript kodunu icra edə bilər. Məsələn, istifadəçilər bir xəbərdarlıq qutusu görə bilirdilər. "Salam" deyən bir popup göstərəcək bir menuitem etiketinin necə qurulacağına dair bir nümunə:

              Xüsusi menyular yaratmaq üçün menyu və menuitem etiketlərindən istifadə edilə bilər. Bu, istifadəçilərə tıklandığı menyu maddəsindən asılı olaraq müxtəlif tədbirlər görməyə imkan verəcəkdir. Ancaq bu etiketlərin məhdud dəstəyindən çəkinin.

              Doğma Çək və Drop

              HTLM5-dən əvvəl, inkişaf etdiricilər veb saytlara və tətbiqlərə animasiya əlavə etmək üçün jQuery UI və ya Dojo kimi JavaScript kitabxanalarından istifadə etməli idilər..

              Bununla birlikdə, HTML5 sürükləmə hadisələri üçün yerli brauzer dəstəyi, bir JavaScript API və bu qarşılıqlı əlaqələri dəstəkləmək üçün xüsusi işarələmə əlavə edir. Bu bölmədə, HTML5-də sürükləməyə nəzər salacağıq və bu xüsusiyyətin əsas tətbiqini kodlaşdıracağıq.

              Tikinti blokları

              Bir sürükleyip qarşılıqlı əlaqə qurmaq üçün HTML işarələməyinizə üç növ element daxil etməlisiniz:

              • Mənbə elementi: sürüklənəcək element, HTML5 atributu kimi təyin olunan sürüklənə bilən element"doğru".
              • Hədəf elementi: sürüklənmiş elementin atılacağı element, HTML5 atributu tərəfindən təyin olunan damla ="doğru".
              • Bir yükləmə: sürüklənmiş bir element düşdükdə ötürüləcək məlumatlar.

              Çək və Drop API Tədbirləri

              JavaScript API altı hadisəni və sürükləmə və atma qarşılıqlı əlaqəsi yaratmaq üçün istifadə etməli olduğunuz bir obyekti ehtiva edir.

              • Bu sürüklənmə obyekti seçildikdə sürüklənir.
              • Sürüşdürmə obyekti seçilərkən siçan işarəsi aşağı düşən bir obyektə girəndə sürükləyir.
              • Bu sürüklənmə obyekti seçilərkən və siçan göstəricisi aşağı düşən bir obyekt üzərində olarkən siçan hərəkət edərkən hər dəfə atəş açılır..
              • Sürgülü bir hadisə seçildikdə və siçan göstəricisi aşağı düşən bir obyekt buraxdıqda yanğın baş verir.
              • Siçan düyməsini sərbəst buraxmaq və ya brauzer pəncərəsini tərk etməklə sürüklənə bilən bir obyekt seçilmədikdə sürüklənən hadisə yanır.
              • Açılan hadisə, süründürülən bir obyekt düşən obyektə düşdükdə yanır.
              • DataTransfer obyekti sürüklənmiş məlumatları saxlamaq üçün istifadə olunur.

              Çək və atma nümunəsi

              Veb saytınızdakı HTML5 sürükləmə və buraxma xüsusiyyətlərindən necə istifadə edə biləcəyinizi nümayiş etdirmək üçün veb sayt ziyarətçisinə üç elementi üstünlüklərinə uyğun sıraya düzməyə imkan verən sadə bir widget yaradaq..

              Bu nümunə üçün ilham rolunu oynayan məqalə HTML5 Roklar: Native HTML5 Çək və Drop.

              HTML ilə başlayaq

              Sevimli DnD tətbiqi
              HTML51
              jQuery UI2
              Dojo3

              Üç div yaratdıq, hər birində fərqli sürükləmə və tətbiqetmə ilə əlaqəli bir az mətn var. Həm də irəli getdik və hər üçü 1, 2 və 3 təyin edilmiş üstünlüklə standart qaydada düzəltdik.

              Hər divə düşmə = bir atribut verilmişdir"doğru" və sürüklənə bilən ="doğru" üçü bir-birimizlə dəyişdirə biləcəyimizi əks etdirmək.

              Bəzi əsas üslubu əlavə etməyə imkan verir.

              # qutular {
              mətn align: center;
              eni: 100%;
              maksimal en: 658px;
              marjası: 0 avto;
              marjası: 0 avto;
              font-family: 'Mənbə Sans Pro', FreeSans, Arimo,"Droid Sans",Helvetica, Arial, sans-serif;
              daşmaq: avto;
              }
              .başlıq {
              ekran: blok;
              şrift ölçüsü: 1.25em;
              padding: 10px;
              }
              .Qutu {
              background-color: # bcd5e0;
              haşiyə: 2px bərk #aaa;
              marj: 10px;
              kursor: hərəkət etmək;
              daşmaq: avto;
              }
              .qutu .dnd-tech {
              şrift ölçüsü: 1em;
              ekran: inline-blok;
              padding: 10px 0;
              }
              .qutu. mövqe {
              şrift ölçüsü: 1em;
              üzmək: sol;
              padding: 10px;
              haşiyə sağ: 2px bərk #aaa;
              rəng: #fff;
              background-color: # 0a5194;
              }

              Bu üslubları ardıcıl olaraq keçməyəcəyimiz halda, əslində gördüklərimiz qutuları yan-yana düzəldir və bəzi üslubu tətbiq edir. Budur, indi qutularımızın görünüşü:

              İşarələ və Yerləşdir

              Sürüklənən və düşə bilən elementlərə tətbiq ediləcək bəzi üslublar yaradaq.

              .box.dragged {
              qeyri-şəffaflıq: .5;
              }
              .box.over {
              haşiyə: 2px # 222;
              qeyri-şəffaflıq: .5;
              }

              JavaScript-də aktivdir. İstifadəçi fəaliyyətinə əsaslanan sürüklənmiş və yuxarı siniflərin əlavə edilməsi və aradan qaldırılması ilə məşğul olan funksiyaları yaratmağa başlayaq.

              funksiyası dragStartHandler (e) {
              this.classList.add ('sürükləndi');
              }

              funksiyası dragEnterHandler (e) {
              bu.classList.add ('bitdi');
              }

              fəaliyyət sürüşdürməkHandler (e) {
              this.classList.remove ('bitdi');
              }

              funksiyası dragEndHandler (e) {
              [] .forEach.call (qutular, funksiya (qutu) {
              box.classList.remove ('bitdi', 'sürükləndi');
              });
              }
              var qutular = document.querySelectorAll ('# qutular .box');

              Hal-hazırda bu funksiyalar heç bir şey etmir. Hər an, hər birini uyğun bir hadisəyə bağlayacağıq. İndi hər kəsin nə etdiyinə baxaq.

              Birinci funksiya, dragStartHandler, sürüklənən sinifə sürüklənmiş element əlavə edəcəkdir.

              Növbəti iki funksiya, yuxarıdan yuxarı sinifləri süründürülən elementlərin üzərindən keçdikləri üçün əlavə edib siləcəkdir.

              Son funksiya bütün qutuları təkrarlayır və yuxarıdan və sürüklənən sinifləri çıxardır.

              Sonra, süründürmə hadisəsini həll etmək üçün bir az təmizlik işi aparacaq bir funksiya yazmalıyıq.

              funksiyası dragOverHandler (e) {
              əgər (e.preventDefault) {
              e.preventDefault ();
              }
              yalan qaytarma;
              }

              Bu funksiyanı sürükləmək üçün bağladığımızdan bəzən sürükləmə və buraxma qarşılıqlılığı zamanı yola çıxa bilən standart brauzer davranışını aradan qaldıracaq.

              Bundan sonra qarşılıqlı əlaqə ilə köçürüləcək məlumatları seçmək üçün dataTransfer obyektindən istifadə edə biləcəyimiz üçün iki fərqli funksiyaya kod əlavə etməliyik..

              funksiyası dragStartHandler (e) {
              this.classList.add ('sürükləndi');

              dragData = bu;
              e.dataTransfer.setData ('text / html', this.firstElementChild.innerHTML);
              }

              funksiya dropHandler (e) {
              əgər (e.stopPropagation) {
              e.stopPropagation ();
              }
              əgər (dragData! = bu) {
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML;
              this.firstElementChild.innerHTML = e.dataTransfer.getData ('text / html');
              }
              yalan qaytarma;
              }

              Biz əvvəllər dragStartHandler funksiyasını görmüşdük, amma indi iki sətir əlavə etdik. Birincisi, sürüklənmiş qutunu dragData dəyişəninə təyin edir.

              İkincisi, seçilmiş qutunun ilk uşaq elementinin (HTML elementi) daxili HTML-ni dataTransfer obyektinə təyin etmək üçün dataTransfer obyektinin setData metodundan istifadə edir.

              DropHandler funksiyası əvvəlcə brauzerin standart davranışını dayandırır. Sonra, sürüklənmiş obyektin eyni zamanda düşmə obyekti olmadığını yoxlayır. Olmasa, sonrakı iki sətir daxil olur və sürüklənə bilən və yıxıla bilən qutuların adlarını dəyişdirin.

              Beləliklə, indi bütün funksiyalarımızı yerinə yetiririk və onları altı sürükləmə və DOM hadisələrinə buraxmaq lazımdır. Bunu tək forEach funksiyası ilə edə bilərik.

              [] .forEach.call (qutular, funksiya (qutu) {
              box.addEventListener ('dragstart', dragStartHandler, saxta);
              box.addEventListener ('sürükleyici', dragEnterHandler, saxta);
              box.addEventListener ('dragover', dragOverHandler, saxta);
              box.addEventListener ('sürükləmə', dragHandler, saxta);
              box.addEventListener ('açılan', dropHandler, saxta);
              box.addEventListener ('dragend', dragEndHandler, saxta);
              });

              Bu kodun nə etməsi, hər altı qutuda bütün altı sürükləmə hadisələrini dinləmək və sonra baş verən hadisələrə əsaslanan bir funksiyanı işlətməkdir. Bu kodun hamısını bir yerə yığdıqdan sonra bu gözəl sürüklənə bilən və yıxıla bilən qutuları hazırlayırıq. Bir cəhd edin:

              # qutular {
              mətn align: center;
              eni: 100%;
              maksimal en: 658px;
              marjası: 0 avto;
              font-family: 'Mənbə Sans Pro', FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
              daşmaq: avto;
              }
              .başlıq {
              ekran: blok;
              şrift ölçüsü: 1.25em;
              padding: 10px;
              }
              .Qutu {
              background-color: # bcd5e0;
              haşiyə: 2px bərk #aaa;
              marj: 10px;
              kursor: hərəkət etmək;
              daşmaq: avto;
              }
              .qutu .dnd-tech {
              şrift ölçüsü: 1em;
              ekran: inline-blok;
              padding: 10px 0;
              }
              .qutu. mövqe {
              şrift ölçüsü: 1em;
              üzmək: sol;
              padding: 10px;
              haşiyə sağ: 2px bərk #aaa;
              rəng: #fff;
              background-color: # 0a5194;
              }
              .box.dragged {
              qeyri-şəffaflıq: .5;
              }
              .box.over {
              haşiyə: 2px # 222;
              qeyri-şəffaflıq: .5;
              }

              Sevimli DnD tətbiqi

              HTML51
              jQuery UI2
              Dojo3

              funksiyası dragStartHandler (e) {
              this.classList.add ('sürükləndi');

              dragData = bu;
              e.dataTransfer.setData ('text / html', this.firstElementChild.innerHTML);

              }

              funksiyası dragEnterHandler (e) {
              bu.classList.add ('artıq');
              }

              fəaliyyət sürüşdürməkHandler (e) {
              this.classList.remove ('artıq');
              }

              funksiyası dragOverHandler (e) {
              əgər (e.preventDefault) {
              e.preventDefault ();
              }
              yalan qaytarma;
              }

              funksiya dropHandler (e) {
              əgər (e.stopPropagation) {
              e.stopPropagation ();
              }
              əgər (dragData! = bu) {
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML;
              this.firstElementChild.innerHTML = e.dataTransfer.getData ('text / html');
              }
              yalan qaytarma;
              }

              funksiyası dragEndHandler (e) {
              [] .forEach.call (qutular, funksiya (qutu) {
              box.classList.remove ('bitdi', 'sürükləndi');
              });
              }

              var box = document.querySelectorAll ('# qutu .box');
              [] .forEach.call (qutular, funksiya (qutu) {
              box.addEventListener ('dragstart', dragStartHandler, saxta);
              box.addEventListener ('sürükleyici', dragEnterHandler, saxta);
              box.addEventListener ('dragover', dragOverHandler, saxta);
              box.addEventListener ('dragleave', dragHandler, saxta);
              box.addEventListener ('drop', dropHandler, saxta);
              box.addEventListener ('dragend', dragEndHandler, saxta);
              });

              Nə gözləyirsiniz?

              HTML5 sürüklənə bilən və düşmə qabiliyyətli elementlər üçün yerli brauzer dəstəyi əlavə edir. Çək və açılan işləmə funksiyasını həyata keçirmək altı fərqli sürükləmə hadisələrinin və JavaScript ilə bir məlumat obyektinin manipulyasiyasını əhatə edir.

              İframe

              Əslində, bir iframe hər hansı bir HTML sənədi yükləyə biləcəyiniz bir veb səhifənin içərisinə yerləşdirilmiş kiçik bir brauzer pəncərəsini yaradan HTML elementidir..

              Iframes nələr üçün istifadə olunur?

              Müasir İnternetdə iframe üçün ən çox istifadə edilənlərdən biri axın mediasını veb səhifəyə yerləşdirməkdir. Spotify, Vimeo və YouTube kimi media axın saytları, məzmununun digər veb saytlarda yerləşdirilməsinə icazə vermək üçün iframe-lərdən istifadə edirlər.

              Məsələn, YouTube-a gedin, istənilən videonu açın, videoya sağ vurun və Göndərmə kodunu kopyalayın. Etdiyiniz zaman bu kimi bir şey görünən kod panoya kopyalanacaq:

              Həmin bit kodu veb səhifəyə əlavə edin və iframe src atributu tərəfindən istinad edilən URL-də yerləşdirilən YouTube videonu yükləmək üçün istifadə ediləcək.

              Axın mediası iframe-lər üçün yaxşı olan tək şey deyil. Iframes-in istifadə edilməsinin başqa bir yolu, məzmunu veb səhifənin qalan hissəsindən təcrid etməkdir. Burada iki nümunə var:

              • Dərsliklərdə çox sayda kodu göstərən saytlar iframes-i istifadə edərək veb saytlarına tətbiq olunan standart üslublara və skriptlərə qarşı mübarizə aparmadan həmin kodu göstərə bilər..
              • Üçüncü tərəf reklamlarını əks etdirən saytlar bu reklamları yükləmək üçün iframe-lərdən çox istifadə edirlər, yəni reklamın göstərildiyi veb səhifədəki koda heç bir şey etmədən mənbə sənədindəki kodu dəyişdirərək dəyişdirilə bilər..

              HTML 4.01 Iframe

              Iframe elementi HTML 4.01-də təqdim edildi və dörd əsas atributu özündə cəmləşdirdi:

              • src: iframe-də göstəriləcək HTML sənədinin URL-sini göstərir.
              • eni və boyu: iframe ölçüsünü pikseldə göstərir.
              • ad: iframe a, forma, düymə və ya giriş elementləri ilə hədəflənməyə imkan verir.

              HTML 4.01, əlavə əhəmiyyətə malik olan bir sıra əlavə atributları da əhatə etmişdir. Ancaq bunların çoxu HTML5-də köhnəlmiş və ya açıq şəkildə silinmişdir.

              HTML5 tərəfindən silinən iframe xüsusiyyətləri

              Çıxarılan atributların ən böyük qrupu, CSS ilə daha yaxşı əlaqəli olan amillərə müraciət edənlər idi.

              • Align atributu, iframe sxemini idarə etmək üçün float, display və margin CSS xüsusiyyətlərindən istifadə lehinə ləğv edildi.
              • Çərçivə atributu CSS sərhədlərinin lehinə ləğv edildi.
              • Marginheight və marginwidth atributları CSS doldurma lehinə amortizasiya edildi.
              • Sürüşdürülən atribut daşqın tətbiq etmək lehinə ləğv edildi: gizli; iframe kaydırıcılarını gizlətmək.

              Əlavə bir xüsusiyyət, longdesc, geniş yayılmış sui-istifadə hallarından əziyyət çəkdi. Nəticədə artıq köhnəlmişdir.

              HTML5 tərəfindən əlavə olunan iframe xüsusiyyətləri

              HTML5 iframe elementinə iki yeni atribut əlavə etdi: sandbox və srcdoc.

              Sandbox atributu iframe məzmununun imkanlarını məhdudlaşdırmaq üçün istifadə olunur.

              Məsələn, bir iframe-də qum qutusunu əlavə etmək, daxil edilmiş məzmunun skriptlərin icrasına, formaların təqdim olunmasına, məzmunun yuxarı səviyyəli baxış kontekstində yüklənməsinə və digər şeylərə mane olur. İframe tətbiq olunan məhdudiyyətlər atributuna dəyər əlavə etməklə azaldıla bilər.

              Məsələn, sandbox ="icazə formaları" iframe-dəki formaların təqdim olunmasına imkan verəcəkdir. Bu atribut üçün əlavə dəyərlər, pop-poplar, eyni mənşəli, icazə-skriptlər və üst-üstə naviqasiya imkanlarını əhatə edir, lakin bununla məhdudlaşmır..

              Srcdoc atributu HTML-ni iframe-də göstərmək üçün istifadə edilə bilər. Məsələn, aşağıdakı kod iframe-də bir şəkil göstərərdi:

              Iframe qaynaqları

              Iframes haqqında daha çox məlumat əldə etmək istəsəniz, ən geniş mənbələrdən biri Mozilla Developer Şəbəkəsi İframe Element Referans Səhifəsidir. Burada hər bir iframe atributunun ətraflı təsviri, o cümlədən bütün mümkün sandbox dəyərlərinin dərin müzakirəsi tapa bilərsiniz.

              Microdata

              Hostinq baxışlarımızı ziyarət etdiyiniz zaman "752 baxış" və "5 ulduzdan 4" reytinqi kimi bir şey görə bilərsiniz. Instincively, 752 istifadəçi rəyinin 5 ulduzdan 4-ü ümumi bir ümumi reytinq yaratmaq üçün birləşdirildiyini başa düşdünüz.

              Ancaq axtarış motorları sizin qədər ağıllı deyil və mikdata daxil olduğu yerdir.

              Microdata, müəyyən məzmun növləri üçün maşın oxunan yazıları təmin etmək üçün HTML5 spesifikasiyasının bir hissəsi kimi əlavə edilmiş HTML atributları toplusudur. Bu etiketlərdən istifadə axtarış motorlarına saytınızın məzmununu daha yaxşı başa düşməyə və indeksləşdirməyə və daha yaxşı axtarış nəticələrini çıxarmağa imkan verir.

              Microdata əsasları

              Microdata, bir vahiddə birlikdə qruplaşdırılmış əlaqəli ad dəyəri cütlərindən ibarətdir. Ümumiləşdirilmiş bir nümunəyə baxaq.

              Bir veb sayt kimi bir elementlə başlayırıq. Bir veb sayt ilə əlaqəli olduğumuzu bildikdən sonra, URL, veb sayt adı və ya təsviri kimi potensial əlaqə qura biləcəyimiz çox sayda ad dəyəri var..

              Bir mikrodata elementi yaratmaq üçün veb saytın bütün mikdata sahib olması üçün ana element yaratmaqla başlayacağıq. Sonra uşaq elementlərindəki mikdata məlumatlarını sadaladıq və uyğun mikdata etiketləri ilə qeyd edərdik.

              Sonda bir axtarış motoru səhifəyə daxil olur, veb sayt elementini müəyyənləşdirir və bütün uyğun mikdata məlumatlarını həmin elementlə əlaqələndirir.

              Əgər hamısı bu anda bir az mücərrəd səslənirsə, faktiki microdata işarələməsini görmək bütün bunları daha aydın edəcək. Ancaq bunu etməzdən əvvəl, microdata atributlarını tanıtmalıyıq.

              Microdata Markup

              HTML5 spesifikasiyasının bir hissəsi olan dörd microdata atributu var:

              • itemscope yeni bir maddə yaradan atributdur.
              • yaradılmış maddənin növünü müəyyən etmək üçün maddələr növünə əlavə olunur. Əksər hallarda, bir schema.org maddə növü istifadə olunur.
              • itemprop növü bir xüsusiyyət olan hər bir elementə əlavə olunur.
              • itemref maddələr cope elementinə əlavə olunur və maddələr cope elementinin birbaşa nəslindən olmayan elementləri element ilə əlaqələndirir..

              Bütün bu atributları uydurma veb host reytinqinə əlavə edək ki, hamısını hərəkətdə görə bilərsiniz.

              Super Linux Hosting

              Reytinq:
              5 ulduzdan 4-ü
              423 real istifadəçi rəyləri.

              Xüsusi istifadəçi icmalı

              Bu əla bir ev sahibidir! Mən onları sevirəm!
              5 ulduzdan 5-i!

              Yuxarıdakı kod bir sıra ad dəyəri cütü olan bir element yaradır:

              • Əvvəlcə bir korporasiya maddəsi yaratdıq.
              • Maddə adı Super Linux Hosting olaraq təyin edilmişdir.
              • Maddə URL-si http://superlinuxhosting.com olaraq təyin edilmişdir
              • Maddə məcmu icmal, iki ad dəyəri cütü olan iç içə bir maddədir: 4 ulduzdan 5 ulduzun qiymətləndirmə dəyəri və 423 baxış sayı..
              • Nəhayət, ilk elementə əlavə edilmiş elementref atributu yolu ilə, soyad dəyəri cütü, iki dəyəri dəyər cütü olan bir araşdırmadır: təsvir və 5 ulduzdan 5-nin reytinqi..

              Microdata'nın olması ilə, Google və digər axtarış motorları məlumatları indeksləşdirəcək və Super Linux Hosting korporasiyasını və əlaqəli məcmu reytinqi və fərdi araşdırmanı tanıyacaqdı.

              Microdata qaynaqları

              Microdata haqqında daha çox məlumat əldə etmək istəyirsinizsə, getməli olduğunuz iki yer var:

              • Schema.org ilə işə başlamaq Microdata-dan istifadə etmək bu mövzuya asanlıqla əməl etməkdir. Bundan əlavə, bütün schema.org element növlərinin bu siyahısını əl ilə saxlamaq istərdiniz.
              • HTML: Yaşayış standartı, Bölmə 5 Microdata, mikdata texniki baxışdır. Şəbəkə xaricində xüsusi tətbiqlər üçün mikdata istifadə etməyi öyrənmək istəyirsinizsə, bu axtardığınız mənbələrdir.

              Qlobal xüsusiyyətlər

              Elementin standart işləməsini və ya davranışını dəyişdirmək üçün xüsusiyyətlər hər hansı bir HTML elementinə əlavə edilə bilər. Bunlar atributu adlandırmaq və sonra elementin açılış etiketində bir atribut dəyərini göstərməklə əlavə olunur:

              Məzmun

              Atributların əksəriyyəti yalnız müəyyən növ elementlərə tətbiq oluna bilər. Bununla birlikdə qlobal atributlar adlandırılan digər atributlar istənilən HTML elementi ilə istifadə edilə bilər. HTML5 spesifikasiyası aşağıdakı qlobal atributları müəyyənləşdirir:

              • accesskey: bir elementə klaviatura qısa yolunu təyin edir.
              • sinif: üslub və ya JavaScript proqramı üçün Cascading Style Sheets (CSS) ilə bir elementin hədəflənməsinə icazə vermək üçün sinif adı əlavə edir..
              • məzmunlu: bir veb sayt ziyarətçisi tərəfindən düzəliş edilə bilən bir element yaradır.
              • contextmenu: xüsusi bir kontekst menyusu seçimini bir element ilə əlaqələndirir.
              • data- *: CSS vərəqləri və ya JavaScript proqramları daxilində seçim üçün istifadə üçün səhifə xüsusi məlumatı tutmaq üçün istifadə edilə bilən xüsusi bir məlumat atributu.
              • dir: bir elementin mətn məzmununa yönləndirmə təyin edir.
              • sürüklənə bilən: bir elementə sürüklənmə hadisələri üçün doğma HTML5 dəstəyindən istifadə edərək sürüklənməyə imkan verir.
              • dropzone: sürüklənmiş bir əşyanın atıldığı zaman baş verməli olan hərəkəti təyin edir. Seçimlərə kopyalama, keçid və köçürmə daxildir.
              • gizli: bir element görünənə qədər gizlətmək üçün istifadə olunur. Bunu etmək üçün uyğun olduqda atribut JavaScript ilə silinir.
              • id: bir elementə unikal identifikator təyin edir.
              • lang: əlaqəli elementdəki məzmunun dilini müəyyənləşdirir.
              • imla yoxlaması: bir istifadəçi girişinin imla üçün yoxlanılmadığını təyin edir.
              • stil: CSS üslublarının birbaşa HTML elementinə qoşulmasına imkan verir.
              • tabindex: elementin görünməli olduğu sekme indeksindəki mövqeyi müəyyənləşdirir.
              • başlıq: bir ziyarətçi siçanı element üzərində gəzdirdikdə bir göstəriş kimi göstərilən mətn əlavə edir.
              • tərcümə: xüsusi HTML elementlərinin mətn məzmununun brauzer tərcüməsinin qarşısını almaq üçün istifadə olunur.

              Hadisə idarəçiləri

              Bundan əlavə, hər hansı bir HTML elementinə HTML atributu kimi əlavə edilə bilən 50-dən çox hadisə idarəedicisi var. Bu hadisələrin idarəedicilərinin hər biri hadisə baş verdikdə işə salmaq üçün bəzi əlaqəli kodu işə salmaq üçün istifadə edilə bilər.

              Aşağıdakı siyahıda işleyicini tetikleyen hadisənin təsviri izlənilən bütün hadisə idarəediciləri atributları var.

              Qeyd etmək lazımdır ki, bu hadisə idarəedicilərinin çoxu HTML spesifikasiyasının istənilən HTML elementinə tətbiqinə imkan verdiyinə baxmayaraq yalnız bir neçə HTML elementinə şamil olunur.

              • onabort: bir elementin yüklənməsi ləğv edildi.
              • onfokus və onblur: bir element diqqət almış və ya itirmişdir.
              • oncancel: istifadəçilər bir dialoq elementini rədd etdi.
              • oncanplay və oncanplaythrough: bir media elementi oynatmağa başlamaq və ya bufer etmədən oynatmağı tamamlamaq üçün kifayət qədər məlumat yüklədi..
              • onchange: giriş və ya mətn elementi kimi bir forma elementinin dəyəri dəyişdi.
              • onclick və ondblclick: bir element tıklandı və ya cüt vuruldu.
              • onclose: bir neçə fərqli yaxın hadisədən biri meydana gəldi.
              • oncontextmenu: elementə sağ tıklayarak kontekst menyusu açıldı.
              • onkopiya, oncut və onpaste: hədəf element kəsilmiş, kopyalanmış və ya yapışdırılmışdır.
              • oncuechange: bir media qaynağı ilə əlaqəli bir mətn izi, hazırda nümayiş olunan istəkləri dəyişdirdi.
              • ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop: süründürülə bilən element HTML5 sürükleyici API istifadə edərək idarə olunur.
              • ondurationchange: bir media elementinin müddəti atributu dəyişdi.
              • inempted: bir media elementi boş oldu.
              • əlavə edildi: bir media elementinin sonu çatdı.
              • onerror: resurs yüklənə bilmədi.
              • oninput: bir giriş və ya məzmunlu elementin dəyəri dəyişdi.
              • oninvalid: təqdim edilmiş bir element yoxlanıla bilmədi.
              • onkeydown, onkeypress və onkeyup: bir klaviatura düyməsini basma hadisəsi baş verdi.
              • onload, onloadeddata, onloadedmetadata, onloadstart: ya bütün bir mənbə, ya da mənbənin göstərilən hissəsi yüklənməni tamamladı.
              • onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover və onmouseup: istifadəçi və element arasında siçan əsaslı qarşılıqlı əlaqə meydana gəldi..
              • onwheel: bir siçanın təkər düyməsi döndü.
              • onplay və onplaying: bir media elementi çalmağa başladı və ya dayandırıldı (ya qəsdən ya da əlavə məlumat gözləyərkən) və çalışı davam etdirməyə hazırdır.
              • onpause: medianın çalışı dayandırıldı.
              • davam: bir əməliyyat başladı və davam edir.
              • onratechange: medianın çalma sürəti dəyişdi.
              • onreset: bir forma elementi yenidən quruldu.
              • onresize: sənəd görüntüsünün ölçüsü dəyişdi.
              • onscroll: görünüş portu və ya element sürüşdürülmüşdür.
              • onseeked və onseeking: bir media elementinin axtarış xüsusiyyəti istifadə edilmişdir və ya istifadə olunur.
              • seç: bir elementin bəzi məzmunu seçildi.
              • onshow: kontekst menyusu işə salındı, fokusdakı elementdə bir kontekst menyusu var.
              • quraşdırıldı: medianın alınması gözlənilmədən gecikdi və ya dayandırıldı.
              • onsubmit: bir forma elementi təqdim edildi.
              • onsuspend: bir media elementinin yüklənməsi dayandırıldı.
              • ontimeupdate: bir media elementinin cari atributu yeniləndi.
              • ontoggle: bir detal elementi açıldı və ya bağlandı.
              • onvolumechange: bir media elementinin ifa həcmi dəyişdirildi.
              • gözləmə: daha çox məlumat yüklənməsini gözləyərkən ifa dayandırıldı.

              DOM elementləri

              Bir brauzer bir veb səhifəsi təqdim edərkən, sadəcə veb səhifəni HTML göstərmir. Bunun əvəzinə brauzer əvvəlcə səhifənin HTML məzmununun yerli, interaktiv bir modelini qurur.

              Brauzer yaddaşında yerli olaraq qurulan və saxlanılan bu model Document Object Model (DOM) adlanır. DOM daxilində hər HTML element tək bir node kimi mövcuddur və qovşaqların cəmi DOM-u təşkil edir.

              DOM-a daxil olmaq

              JavaScript kimi langaugesin DOM ilə qarşılıqlı əlaqəsi üçün hər node standart dildə müstəqil atributlar və metodlardan istifadə etməklə zəng olunmalıdır.

              Bu atributlar və hadisələr interfeys tərifi dilindən (IDL) istifadə edərək müəyyən edilir və bu IDL atributları və hadisələri DOM qovşaqlarını hər hansı bir proqramlaşdırma dilində yazılmış skriptlərə məruz qoyur, baxmayaraq ki JavaScript ən çox yayılmışdır.

              Nəticə HTML elementi götürən bir sistemdir (məsələn:

              Bəzi mətn

              ) və bu məlumatların hamısını özündə birləşdirən DOM qovşaqını yaradır (məsələn: Bəzi mətnin dəyəri olan bir p node və IDL atributları className ="bədən-mətn" və başlıq ="nümunə").

              Skriptləmə dillərindən sonra, DOM qovşaqlarının node IDL atributlarına istinad etməklə istifadə edilə bilər.

              Fundamental IDL xüsusiyyətləri və metodları

              HTML5 spesifikasiyası HTMLElement interfeysini müəyyənləşdirir və bütün HTML elementlərinə tətbiq olunan bir sıra IDL atributları və metodlarını sadalayır.

              Hər bir fərdi DOM node, bütün bu IDL atributlarını və metodlarını miras alır və əlavə atribut və metodlar əlavə edərək HTMLElement interfeysində genişlənə bilər.

              HTMLElement interfeysi

              HTMLElement interfeysi bütün DOM qovşaqlarına aiddir və üç qrupa bölünə bilər: metadata atributları, istifadəçi qarşılıqlılığı və qlobal hadisə idarəediciləri.

              Metadata atributlarına aşağıdakılar daxildir:

              • Başlıq IDL atributu başlıq HTML atributu tərəfindən təyin edilir.
              • Lang IDL atributu lang HTML atributu tərəfindən təyin edilir və DOM qovşağının içərisinə daxil edilmiş məzmunun dilini müəyyənləşdirmək üçün istifadə olunur. Heç bir lang atributu təmin edilmirsə, ən yaxın ana node üçün təyin olunan dil nəzərdə tutulur.
              • Tərcümə atributu veb səhifə məzmununun müştəri tərcüməsinin qarşısını almaq üçün istifadə olunur. Tərcümə üçün atribut defoltdur = sənəd səviyyəsində və əl ilə tərcümə olunmalı, tərcümə edilməməli olan qovluqlar üçün yox.
              • Dir atributu tərkibindəki mətnin istiqamətini müəyyənləşdirir. Atributun heç bir standart dəyəri yoxdur.
              • verilənlər bazası IDL atributu xüsusi məlumat atributu məlumatlarının oxunan DOM nümayəndəsidir- *. Xüsusi məlumat atributları HTML elementinə əlavə edildikdə, məsələn data-postId ="6057", həmin məlumat atributları vahid verilənlər bazası IDL atributuna toplanır və nəticədə DOM qovşağına təyin olunur.

              İstifadəçi qarşılıqlı əlaqələrinə daxildir:

              • Gizli atribut, DOM nodunun görkəmli olub olmadığını müəyyənləşdirən bir boolandır.
              • Klik () hadisəsi siçan klik istifadəçi qarşılıqlı əlaqəsini simüle edir.
              • TabIndex atributu, DOM nodunun sekmə indeksində görünməsini qaydasını təyin edir.
              • Fokus () hadisəsi, hədəf DOM nodunun diqqət mərkəzinə girdiyi bir istifadəçi qarşılıqlı əlaqəsini simulyasiya edir.
              • Qarışıqlıq () metodu hədəf DOM nodunu fokuslamaq üçün istifadə olunur.
              • AccessKey IDL atributu accesskey HTML element atributu tərəfindən təyin edilir və hədəf node üçün klaviatura qısa yol təyin edir.
              • AccessKeyLabel IDL atributu təyin edilmiş giriş açarının oxunuşda təmsil olunmasıdır.
              • Bu contentEditable IDL atributu məzmunlu HTML element atributu tərəfindən təyin edilir və istifadəçilər hədəf nodunu redaktə edib-etməyəcəyini təyin edir.
              • Bu isContentEditable IDL atributu, hədəf nodunun düzəliş olunacağını göstərən oxunan bir boolean dəyəridir..
              • Orfoqrafiya IDL atributu, bir giriş nodu olan DOM nodunun məzmununun düzgün yazıldığı üçün yoxlanılmadığını müəyyən edən bir boolean dəyəridir..

              Qlobal hadisə idarəedicilərinin siyahısı əlli giriş uzunluğunda. Aşağıdakı on hadisə idarəedicisi ən vacib və çox istifadə olunan qlobal hadisə idarəedicilərindən biridir:

              • onclick
              • onfokus
              • onkeypress
              • yükləmə
              • onmouseenter
              • onmouseleave
              • onmouseover
              • onscroll
              • seçmə
              • onsubmit.

              Formalar

              Formalar uzun müddət HTML spesifikasiyasının bir hissəsi olmuşdur. Bununla birlikdə, HTML5 forma funksiyası giriş və forma elementləri, yeni giriş növləri və hətta bir neçə yeni element üçün yeni atributlar ilə əhəmiyyətli dərəcədə genişlənir.

              HTML Forması Əsasları

              HTML forması qurarkən ümumiyyətlə forma etiketi ilə başlamalısınız:

              Bu etiketlər arasında məlumat qəbul etmək və təqdim etmək üçün müxtəlif sahələr yuva salacaqsınız. Ən vacib forma elementləri:

              • Standart bir mətn sahəsinə çıxarılan giriş elementi. Ancaq tip atributundan istifadə edərək, giriş elementləri parolları qəbul etmək, bütün forma sahələrini yenidən qurmaq, radio düymələrini və ya onay qutularını göstərmək, düymələri yaratmaq və forma məzmununu göndərmək üçün biçimlənə bilər..
              • Uzun formalı tipli cavablar üçün mətn daxiletmə sahələrini yaratmaq üçün istifadə olunan tekstarea elementi.
              • Açılan siyahıları yaratmaq üçün seçim elementi ilə birlikdə istifadə olunan seçmə element. Seçim elementi siyahı yaradır və seçilmiş element içərisinə daxil edilmiş hər bir seçim siyahıda mövcud olan başqa bir seçimi təmsil edir.
              • Forma düymələri yaratmaq üçün istifadə olunan düymə elementidir.

              HTML5 Forması Aksesuarları

              HTML5 bir çox yeni giriş növü, giriş və forma atributları və üç yeni forma elementini təqdim etdi. Hər birini növbə ilə əhatə edək.

              Yeni giriş elementi növləri:

              • Rəng daxiletmə növü bir rəng qəbul etməli sahəni müəyyənləşdirir və bəzi brauzerlər sahə diqqət mərkəzində olduqda rəng seçici yaradacaqdır.
              • HTML5, hər biri dəstəklənən brauzerlərdə bir tarix seçicisi yaradan altı yeni vaxt və tarix giriş növü təqdim etdi:
                • tarix: gün, ay və ili əhatə edən bir tarix seçin.
                • datetime: vaxt zonası məlumatları ilə birlikdə bir tarix və vaxt seçin.
                • yerli vaxt: tarix və vaxtı seçin, ancaq vaxt zonası məlumatını buraxın.
                • vaxt: vaxt seçin.
                • həftə: bir həftə və il seçin.
                • ay: bir ay və il seçin.
              • E-poçt giriş növü bir e-poçt ünvanını qəbul etməli bir sahəni müəyyən etmək üçün istifadə olunur. Dəstəklənən brauzerlər eyni zamanda bir e-poçt adının yazıldığına əmin olmaq üçün əsas giriş yoxlamasını da həyata keçirəcəkdir.
              • HTML5 iki yeni nömrəli yönümlü giriş növünü təqdim etdi: nömrə və sıra. Nömrə, minimum və maksimum dəyər məhdudiyyətlərinə məruz qalmaqla istənilən nömrəni daxil etməyə imkan verir. Range, minimum və maksimum dəyərlər ilə məhdudlaşan bir istifadəçi üçün qəbul edilən dəyərlər daxilində bir dəyər seçməsinə imkan verən sürüşmə çubuğu yaradır.
              • Axtarış girişi növü axtarış sürətini müəyyən etmək üçün istifadə olunur.
              • Tel giriş növü telefon nömrəsini qəbul etməli bir sahəni müəyyən etmək üçün istifadə olunur. Dəstəklənən brauzerlər bir telefon nömrəsinin daxil edildiyini təsdiqləmək üçün əsas giriş yoxlamasını həyata keçirəcəkdir.
              • Url giriş növü, url qəbul etməli bir sahəni müəyyənləşdirir. Dəstəklənən brauzerlər əsas yoxlama aparacaq və dəstəklənən mobil qurğular .com tipepad düyməsini göstərə bilər.

              Yeni giriş elementi atributları:

              • autocomplete: giriş elementi üçün avtomatik tamamlamanı yandırır və ya söndürür. Aktiv olduqda, avtomatik doldurma dəyərləri qeyd edilmiş forma girişlərindən götürüləcəkdir.
              • avtofokus: səhifə yüklədikdə avtomatik diqqət mərkəzində olacaq bir giriş elementini göstərir.
              • forma: forma daxilində yuva qoyulmayan bir giriş elementini assiocate etmək üçün bir formaya təyin edilmiş id istifadə edir..
              • Formaction: forma işlənməsi üçün alternativ bir URL təmin etməklə standart forma davranışını ləğv etmək üçün bir təqdim sahəsinə təyin edilmişdir.
              • formenctype: poçt metodundan istifadə edərək təqdim olunan məlumatlara müraciət etmək üçün kodlaşdırma növünü göstərmək üçün bir təqdim sahəsinə əlavə edildi.
              • formmethod: forma təqdim etmək üçün istifadə ediləcək HTTP metodunu, göndərmək və ya almaq üçün bir təqdim sahəsinə əlavə edildi.
              • formnovalidate: forma məlumatlarının brauzer doğrulamasının qarşısını almaq üçün təqdim sahəsi ilə istifadə olunur.
              • formtarget: brauzerə cari pəncərədə və ya yeni bir pəncərədə forma cavabını göstərmək üçün bir təqdim sahəsinə əlavə edildi.
              • boyu və eni: bir növ = ölçüsünü təyin etmək üçün istifadə olunur"şəkil" forma düyməsini göndərin.
              • min və maksimum: seçilmiş dəyər arasında düşməli olan minimum və maksimum dəyəri təyin etmək üçün bir sıra, sıra və ya datetime yönəldilmiş giriş növü ilə birlikdə istifadə olunur.
              • çox: bir istifadəçiyə birdən çox dəyər əlavə etmək üçün sənəd və ya e-poçt giriş növü ilə birlikdə istifadə olunur.
              • desen: bir e-poçt, şifrə, axtarış, telefon, mətn və ya url sahəsinə daxil edilmiş məlumatları doğrulamaq üçün adi bir ifadəni təyin etmək üçün istifadə olunur.
              • yer doldurucu: element diqqət mərkəzinə gəldikdə silinəcək bir giriş elementinə yer doldurucu mətni təyin edir.
              • tələb olunur: forma təqdim etmədən əvvəl doldurulmalı olan bir elementi müəyyənləşdirir.
              • addım: sayı, sıra və ya bir datetime yönəldilmiş giriş növü ilə birlikdə dəyərlərin seçilə biləcəyi addımları təyin etmək üçün istifadə olunur. Məsələn, addım = əlavə etmək"10" minimum 0 ilə 30 arasındakı dəyərlərlə məhdudlaşan bir sayta giriş 0, 10, 20 və ya 30-u təqdim etməyə imkan verir.

              Yeni forma element atributları:

              • autocomplete: bütöv bir forma üçün avtomatik tamamlamanı yandırır və ya söndürür. Giriş başına avtomatik doldurma fərdi giriş elementlərində eyni atributdan istifadə etməklə hələ də idarə edilə bilər.
              • novalidate: bir forma təqdim brauzer təsdiqləməsini söndürür.

              Yeni forma elementləri:

              Datalist element bir giriş elementi üçün əvvəlcədən təyin edilmiş təkliflərin açılan siyahısını yaradır. Qeyd edək ki, bu element giriş sahəsini bu dəyərlərlə məhdudlaşdırmır. Bunun əvəzinə, onlar sadəcə təklif kimi çıxış edirlər.

              Açılan maddələrin siyahısı yeni siyahı atributu tərəfindən bir giriş elementi ilə əlaqələndirilir. Misal üçün:

              Çıxış elementi bir hesablama kimi bir prosesin nəticəsini göstərmək üçün yer yerini yaradır. Qeyd edək ki, çıxış əslində heç bir hesablama aparmır - bunu hələ JavaScript və ya bir server tərəf proqramı ilə etməlisiniz - sadəcə nəticəni göstərmək üçün yer verir. Misal üçün:

              Formula: y = mx + b

              Yamac (m):

              X dəyəri:

              Y kəsişməsi (b):

              Y dəyəri:

              Hesablama prosesini həyata keçirmək və CSS ilə əlaqə qurmaq üçün JavaScript-də lineformula () yazsaq, aşağıdakı sadə, lakin işləyən JavaScript kalkulyatorunu hazırlaya bilərik:

              funksiya lineformula () {
              var y = 0;
              var m = sənəd.getElementById ("m"). dəyəri;
              var x = document.getElementById ("x"). dəyəri;
              var b = sənəd.getElementById ("b"). dəyəri;
              y = + m * + x + + b;
              sənəd.getElementById ("y"). dəyəri = y;
              }

              # nümunə forması {
              eni: 100%;
              maksimum eni: 400px;
              marjası: 0 avto;
              sərhəd: 1px bərk #bbb;
              background-color: #eee;
              }
              # misal forma p giriş, # misal forma p çıxışı {
              üzmək: sağ;
              eni: 100px;
              }
              # nümunə forması p {
              daşmaq: avto;
              padding: 10px;
              marj: 0;
              }
              # nümunə forması p: deyil (: sonuncu uşaq) {
              border-alt: 1px bərk #bbb;
              }

              Formula: y = mx + b

              Yamac (m):

              X dəyəri:

              Y kəsişməsi (b):

              Y dəyəri:

              Açar element də istifadəçiləri identifikasiya etmək üçün HTML5-də əlavə edildi. Element, forma təqdim etmənin nəticələrinin yalnız müvafiq istifadəçiyə göstərilməsini təmin etmək üçün istifadə edilə bilən açıq şəxsi açar cütü yaratmaq üçün hazırlanmışdır. Bununla birlikdə, element indi HTML5 spesifikasiyasından çıxarmaq üçün planlaşdırılıb və istifadə edilməməlidir.

              Semantik elementlər

              Bir çox HTML elementi veb səhifənin məzmununa semantik məna əlavə etmək üçün hazırlanmışdır. Bunun mənası budur ki, müəyyən HTML elementləri elementin məzmunu ilə bağlı müəyyən bir məna ifadə edir.

              Məsələn, vurğu etiketlərinin istifadəsi, kursiv şrift istifadə edərək brauzer tərəfindən göstərilib və elementin məzmunu ətrafdakılardan daha çox diqqətlə oxunmalı və başa düşülməlidir..

              Bütün HTML elementləri semantik məna daşımasa da, mümkün olduqda HTML etiketlərini semantik mənalarına görə istifadə etmək vacibdir.

              Niyə Semantika məsələsi

              Semantika ən azı dörd əsas səbəbə görə vacibdir:

              • Semantika əlçatanlığı artırır. Köməkçi texnologiyalar, HTML elementlərinin seçimi səhifə məzmununun mənasına dair ipuçlarını təmin etdikdə veb səhifənin mənasını daha yaxşı çatdıra bilər..
              • Semantika məzmunu daha aşkar edir. Axtarış motorları, HTML elementləri müvafiq semantik məqsədlərinə uyğun istifadə edildikdə bir veb səhifənin məzmununu daha yaxşı başa düşə və indeksləşdirə bilirlər..
              • Semantik ünsürlər beynəlmiləlləşməyə təkan verir. Dünyanın 15% -dən azının doğma İngilis dillərindən ibarət olduğunu daha yaxşı tanımaq üçün yeni semantik elementlər yaqut və bdi HTML5-də təqdim edildi..
              • Semantika, inkişaf etdiricilərin və tətbiqlərin veb səhifənin məzmununu başa düşməsini və qarşılıqlı əlaqəsini asanlaşdıraraq qarşılıqlı əlaqəni inkişaf etdirir..

              Hər şeyin İnternetinə (IOE) gediş sürətlə davam etdikcə semantika getdikcə daha çox əhəmiyyət kəsb edir.

              İnternetə qoşulan cihazların sayı və müxtəlifliyi artdıqca HTML və digər veb formalarda düzgün semantikanın istifadəsi daha kritikləşir..

              Bu gün, ilk növbədə noutbuklarda və smartfonlarda görünmək üçün bir veb səhifə yaratdığınıza fikir verə bilərsiniz, amma başqa 10 ildə kimlərsə veb saytınızın məzmununa daxil olmağa və məna verməyə çalışacağını bilmir..

              Semantikanı düzgün əldə etmək, məlumatların zamanla çox əlçatan olmasını təmin etmək üçün açardır.

              HTML5-dən əvvəl HTML-də semantika

              HTML elementləri həmişə semantik məna daşıyırdı. Forma və ya masa elementlərinin istifadəsi həmişə elementin məzmununa müəyyən məna və məqsəd qoymuşdur.

              Siyahlar, bra və ya ol və ul etiketlərinin istifadəsi ilə təbiətdə sifariş edilmiş və ya tənzimlənməmiş olduğunu müəyyən etdi. Eyni şəkildə, semantik məna əlavə etmək üçün mətn daxilində istifadə oluna biləcək əvvəlcədən HTML5 elementlərinin geniş siyahısı var:

              • Em və güclü etiketlər vurğulamaq və güclü vurğu.
              • S, del və ins etiketləri artıq tətbiq olunmayan və ya yenilənmiş məlumatlarla əvəz olunmuş məlumatları müəyyən etmək üçün istifadə olunur.
              • Sitat və sitat etiketləri kotirovkaların və yaradıcı işlərin müəyyənləşdirilməsi üçün istifadə olunur.
              • Abbr və dfn yazıları izahlı şərhləri müəyyənləşdirməyə ehtiyacı olan bir terminlə əlaqələndirmək üçün istifadə olunur.
              • Kod, samp, kbd və var elementləri müəyyən mətn növlərini müəyyən etmək üçün istifadə olunur: proqramlaşdırma kodu, nümunə kompüter proqramı çıxışı, klaviatura girişi və formula dəyişənləri.
              • Üst və alt elementlər alt və ya alt mətn kimi görünməli olan məzmunu müəyyənləşdirir.

              HTML5-i əvvəlcədən təyin edən çoxlu HTML elementi semantik məna daşıyırsa da, HTML5-in müraciət etdiyi dildə bir əsas çatışmazlıq var: struktur semantik elementlərin olmaması.

              HTML sənədindən əvvəl HTML sənəd quruluşu

              HTML5-dən əvvəl, div element veb səhifəsinə sənəd əlavə etmək üçün istifadə olunan əsas konteyner idi. Divlərdən istifadə edərək qurulmuş və bu kimi bir şeyə bənzər bir sənəd quruluşu istehsal edən veb səhifələrin görüldüyü və hələ də olduqca yaygındır:

              Div elementi ilə səhifə quruluşuna yanaşma - divit adlanan bir təcrübə - HTML elementlərinin özlərini səhifənin quruluşuna heç bir məna ifadə etmək üçün istifadə etmir. HTML5-dən əvvəl, tərtibatçılar bu cür təcrübə üçün bağışlana bilər.

              Bununla birlikdə HTML5-də yeni struktur semantik elementlərin olması ilə daha yaxşı bir yol var.

              HTML5-də struktur semantik elementləri

              HTML5 yuxarıdakı nümunədə göstərilən div şorbasının yerinə istifadə ediləcək aşağıdakı elementləri təqdim etdi. Bu elementlər eyni zamanda sənədin müxtəlif hissələrinə xüsusi bir məna ifadə edərkən bir sənədin quruluşunu təmin edir:

              • Əsas element bir veb səhifənin ilkin məzmununu saxlamaq üçün hazırlanmışdır. Bir veb sayt eyni səhifəni və altbilgini bütün səhifələr boyu təkrar istifadə edərsə, bunlar adətən əsas elementdən silinir, digər veb səhifələrin əsas hissəsi əsas elementin içərisinə düzgün yerləşdirilə bilər..
              • Başlıq elementi bir veb səhifənin və ya bir veb səhifənin bir hissəsi haqqında giriş məzmununa malikdir. Veb saytın hər səhifəsində görünən başlığı tutmaq üçün istifadə etmək, həmçinin başlıq və digər giriş məlumatlarını məqalə və ya səhifə bölümünün yuxarısında saxlamaq üçün istifadə etmək məqsədəuyğundur.
              • Altbilgi elementi ana elementi haqqında xülasə məlumatı tutmaq üçün hazırlanmışdır. Bu veb saytın hər səhifəsində görünən bir veb səhifənin altbilgisini ehtiva etmək üçün istifadə edilə bilər, məsələn müəlliflik, mövzular, yayımlanma tarixi və istifadəçi şərhləri kimi məqalə xülasə məlumatlarını saxlamaq üçün..
              • Bölmə elementi tematik olaraq əlaqəli məzmunu bir-birinə qruplaşdırmaq üçün istifadə olunur və adətən bir başlıq elementindən başlayır. Məsələn, bir blogda, səhifənin əsas hissəsi bir bölmə, yan çubuğu ikinci hissəni tuta bilər.
              • Nav element naviqasiya əlaqələri bir qrupu müəyyən etmək üçün istifadə olunur. Tipik olaraq, nav elementləri veb səhifənin başlıqlarında, altbilgilərdə və yan çubuqlarda görünənlər kimi təkrar istifadə edilə bilən sayt genişliyi naviqasiya elementləri ilə məhdudlaşır..
              • Məqalə elementi, blog yazısı və ya xəbər məqaləsi kimi veb səhifədən ayrı bir vahid kimi mənalı olan məzmunu bir araya gətirmək üçün istifadə olunur. Məqalələrdə başlıq, altbilgi, bölmə və kənar elementlər ola bilər.
              • Kənar element ana elementdəki məzmunun ilkin axınından başqa başa düşülməli olan məlumatları müəyyən etmək üçün istifadə olunur.

              Veb səhifə quruluşunu tərtib edərkən bütün bu elementlərdən istifadə etməyiniz lazım olmasa da, səhifənin hər hissəsinin semantik mənası barədə daha aydın bir şəkil təmin etmək üçün istifadə üçün mövcuddur..

              Div şorba planımıza yenidən baxsaq və bu yeni etiketləri həyata keçirmək üçün yenidən nəzərdən keçirsək, buna bənzər bir şey əldə edirik:

              HTML5-də mətn semantik elementləri

              Əhatə etdiyimiz struktur elementlərinə əlavə olaraq, HTML5 mətn məzmununun müəyyən mənalarını müəyyən mənaları ifadə edən bir sıra elementləri də təqdim etdi. Bunlara nəzər salaq:

              • Ünvan elementi bir veb səhifənin və ya məqalənin müəllifinə və ya sahibinə aid ünvan məlumatlarını müəyyən etmək üçün istifadə olunur.
              • Şəkil və fiqqaption elementləri veb səhifənin məzmunu ilə əlaqəli vizual məzmunu - məsələn, bir qraf, diaqram və ya illüstrasiya kimi müəyyənləşdirmək və yazmaq üçün istifadə olunur, lakin sənədin məzmunu ilə uyğun görünməyə ehtiyac yoxdur.
              • Nişan etiketi, mövcud kontekstdə xüsusi bir məna daşıyan mətni müəyyən etmək üçün istifadə olunur. Məsələn, axtarış nəticələrini göstərən bir səhifədə bir axtarış müddətinin hər meydana gəlməsini müəyyən etmək üçün istifadə edilə bilər.
              • Vaxt elementi bir az mətni zamanla müəyyən bir nöqtəni təmsil edən kimi müəyyənləşdirir. Vaxt etiketinə vaxtında müəyyən bir nöqtənin maşın oxunan versiyasını əlavə etmək üçün datetime atributu istifadə edilə bilər.
              • Bdi elementi, sağdan sola bir nümunə izləyən dillər üçün məzmunun bir hissəsinin istiqamətini dəyişdirmək üçün istifadə olunur.
              • Yaqut, rp və rt elementləri, müəyyən Asiya dili simvolları üçün tələffüz yardımlarını və ya yaqutları təmin etmək üçün istifadə olunur.

              Dinamik HTML

              Dinamik HTML

              Müasir veb səhifə haqqında düşünəndə ümumiyyətlə statik bir veb saytı təsəvvür etmirsiniz. JavaScript və PHP kimi skript dillərinin meydana gəlməsi sayəsində bu gün gördüyümüz saytlar sələflərindən daha interaktiv və dinamikdir.

              Dinamik bir veb səhifə yaratmaq üçün müxtəlif yanaşmalar olsa da, bəlkə də tanış olduğunuz bir xüsusi texnika var, baxmayaraq ki, bu barədə çox eşitməmisiniz: DHTML.

              "DHTML" adı bir az səhvdir. Adını çəkdiyi HTML işarələmə dilindən fərqli olaraq, Dinamik Hipertext İşarələmə Dili əslində dinamik veb saytlar yaratmaq üçün istifadə olunan bir sıra texnologiya və dilləri izah edən bir termindir..

              Bunlar DHTML-in dörd əsas elementidir:

              • HTML: statik səhifələr və tətbiqlər yaratmaq üçün istifadə olunan işarələmə dili.
              • CSS: bir səhifənin təqdimat tərzi ilə diktə etmək üçün istifadə olunan dil.
              • JavaScript: səhifədə interaktiv elementlər hazırlamaq üçün istifadə olunan proqramlaşdırma dili.
              • DOM: səhifənin kodunun dəyişdirilə biləcəyi proqramlaşdırma interfeysi.

              DHTML haqqında daha çox məlumat almaq istəyirsinizsə, aşağıdakı mənbələr siyahısına istinad materialı, addım-addım təlimatlar və DHTML-dən istifadə edərək dinamik veb səhifələr yaratmağınıza köməkçi vasitələr daxildir..

              Kitablar

              Veb saytlar hər zaman başlamaq üçün çox yaxşı bir təməl olsa da, sizi DHTML-in kənarları ilə gəzmək üçün bəzi masaüstü mənbələrə yanlış sərmayə edə bilməzsiniz..

              • JavaScript: Definitive Guide (2006), David Flanagan: bu, JavaScript öyrənmək üçün təlimat, eləcə də DHTML ilə əlaqəli bütün məsələlər üçün əla istinad materialıdır..
              • İnternet üçün İnteraktiv Məlumat Görünüşü: Scott Murray tərəfindən D3 (2013) ilə Dizaynla Giriş: DHTML əsaslarını öyrənmək üçün bir dəfə dinamik məzmun dizaynının əsaslarını öyrənmək üçün bu addım-addım bələdçidən istifadə edin..
              • DOM Skript: JavaScript ilə Veb Dizayn və Keyt və Sambells tərəfindən Sənəd Obyekt Modeli (2010): real dünya tətbiqləri ilə DOM və təcrübəni daha yaxşı anlamaq istədikdə mükəmməl bir qaynaq..
              • JavaScript istifadə Web Animation: inkişaf & Dizayn (2015) Julian Shapiro tərəfindən hazırlanmışdır: DHTML vasitəsi ilə animasiyalara yiyələnmək istəyirsinizsə, bunu yoxlayın.

              Alətlər

              DHTML-dəki bu üçüncü tərəf töhfələri, inkişaf etdiricilərə daha təmiz kodu yazmağa, asanlıqla həll etməyə və səylərini artırmaq üçün əvvəlcədən yazılmış skriptlərdən istifadə etməyə kömək etməkdir..

              • Dynamic Drive: bu veb sayt geliştiriciləri pulsuz JavaScript (və digər DHTML) skriptləri ilə təmin etməyə həsr edilmişdir.
              • DHTML Goodies: pulsuz DHTML (və Ajax) skriptləri təmin edən başqa bir onlayn resurs.
              • JavaScript Kit Skriptləri: müxtəlif dizayn və animasiya effektləri yaratmağa kömək etmək üçün JavaScript skriptlərini tapmaq üçün başqa bir pulsuz mənbə.

              Onlayn təlimatlar və təlimatlar

              HTML, CSS, JavaScript və DOM haqqında öyrənmək üçün addım-addım bələdçi istəyirsiniz? Və ya bəlkə bəzi praktik təcrübələrə üstünlük verirsiniz? Aşağıdakı təlimatlar bütün əsaslarınızı əhatə edəcəkdir.

              • Başlayanlar üçün Veb İnkişaf Yol Xəritəsi: bu "Kod öyrənin" təlimatı, HTML əsaslarından (Fəsil 1) JavaScript və jQuery (Fəsil 5) ilə əsas götürüldüyünüz üçün DHTML ilə işə başlamaq üçün əla yerdir..
              • W3Schools DHTML Təlimləri: W3Schools üç müxtəlif proqramlaşdırma dilləri ilə parçalanmış DHTML-də müxtəlif dərslər təqdim edir.
              • Mozilla Veb Texnologiyaları Təlimləri: Mozilla Developer Şəbəkəsi DHTML-də iştirak edən müxtəlif proqramlaşdırma dillərində mövcud olan daha əhatəli (və yaxşı təşkil olunmuş) təlimatlardan biridir..
              • QcTutorials DHTML Tutorial: DHTML öyrənmək üçün sadə və düz irəli yanaşma axtarırsınız? Bu dərs vəsaiti ilə gəzin və sonra DHTML və HTML DOM nümunələrini gələcək sened üçün əlinizdə saxlayın.
              • Başlanğıcın DHTML Təlimatına dair təlimatı: işə başlamağınız üçün bir sıra təlimlərdən ibarət DHTML-yə giriş.
              • Veb Geliştiricisi və CSS Dərslikləri: CSS ilə əlaqəli öyrənə biləcəyiniz çox şey var, buna görə özünüzü yalnız əsaslarla məhdudlaşdırmayın. Bu mənbəyə xüsusi veb saytınızın ehtiyaclarına əsasən müxtəlif CSS dərsləri daxildir.
              • JavaScript Təlimatları: JavaScript dəstindən başqa bir bələdçi, yalnız bu yalnız JavaScript ilə əlaqəli vəzifələrə yönəlmişdir.
              • CSS arayış: bu sadə mənbədən CSS yazarkən tez bir məlumat kitabçası kimi istifadə edin.
              • DOM Referans: fərqli DOM obyektləri haqqında daha çox məlumat əldə edin.

              İşə get!

              Veb saytınız üçün dinamik məzmun yaratmağı planlaşdırırsınızsa, hər bir elementin necə işlədiyini və hamısının DHTML çətiri altında necə oynadığını dəqiq şəkildə bilmək vacibdir..

              Yuxarıda göstərilən təlimatlar başlamaq üçün yaxşı bir yerdir, ancaq yeni bir proqramlaşdırma texnikasını öyrənməklə yaranan fürsət hədlərini itələmək istəsəniz heç bir şey praktikaya uyğun gəlmir..

              Yaxşı HTML tərtib etmək və Doğrulaşdırıcılardan istifadə etmək

              .mənbəCode span.kw
              .mənbəCode span.dt
              .sourceCode span.dv
              .mənbəCode span.bn
              .SourceCode span.fl
              .mənbəCode span.ch
              .sourceCode span.st
              .sourceCode span.co
              .sourceCode span.ot
              .mənbəCode span.al
              .sourceCode span.fu
              .mənbəCode span.re
              .sourceCode span.er

              Yaxşı HTML tərtib etmək və Doğrulaşdırıcılardan istifadə etmək

              Yaxşı HTML bəstələmək mövzusuna toxunduq, ancaq burada dərinliyə gedəcəyik. Həm də təsdiqləyiciləri və onlardan necə istifadə edəcəyimizi müzakirə edəcəyik.

              Hissə 1 - Yaxşı HTML tərtib edir

              Düzgün qrammatikanın bütün qaydalarını bilmək sizi yaxşı bir yazıçı etməyə imkan vermir və bir dilin hər bir funksiyasını və quruluşunu bilmək sizi yaxşı proqramçı halına gətirmir. Daha çox tələb olunan bir şey var - yaxşı üslub.

              HTML yazmaq eyni yoldur. Hər işarələmə elementinin boşluqlarını və kənarlarını bilə bilər və oxumaq və dizaynı çətin olan səliqəli sənədləri bir yerə yığa bilərsiniz. Ancaq bu belə olmamalıdır - yaxşı, yaxşı tərtib edilmiş HTML yazmağı öyrənə bilərsiniz.

              Niyə yaxşı HTML ilə narahat olun?

              HTML son istifadəçiləriniz və onlayn izləyiciləriniz tərəfindən görünməməsi üçün, soruşa bilərsiniz:

              • Nə fərq qoyur?
              • Niyə işarələmə barədə narahat olursunuz?

              Bu suala cavab vermək yaxşı HTML üslubuna ilk addımdır: HTML üçün kimin yazdığını düşünmək.

              HTML üçün bir neçə "tamaşaçı" var:

              • CSS yazmalı olan hazırkı dizayner / geliştirici
              • Gələcək inkişaf etdiricilər və veb saytınızı yenidən düzəltməyə ehtiyac duyan dizaynerlər
              • Google və digər axtarış motorları
              • Facebook və səhifə çıxarışlarını yerləşdirən digər sosial media saytları
              • RSS oxuyucuları
              • Görmə əlillər üçün ekran oxuyucuları
              • Daimi istifadəçiləriniz, nəticədə.

              Bütün bu fərqli auditoriyaların - yalnız bəzilərinin insan olduğu insanlar fərqli ehtiyaclara malikdirlər, hamısı yaxşı, yaxşı üslublu HTML ilə yaxşı təmin olunur.

              Yaxşı sənəd quruluşu

              HTML üslubunun ən vacib tərəfi ümumi sənədin düzgün qurulmasıdır.

              Ümumi quruluş belə görünməlidir:

              html>

              Sənədin Başlığı




              Saytın adı

              Sənədin adı

              Sənədin adı

              Qeyd edək ki, burada göstərilən hər bir elementə ehtiyacınız olmaya bilər. Məsələn: elementinizi içinizə qoymaq istəməyəcəksiniz, məqalənin başındakı meta məlumatları daxil etmirsiniz - sadə

              və ya

              etiket, məqalə məzmunu ilə eyni "səviyyədə" olmaq yaxşı olardı.

              Sənədinizin düzgün qurulması haqqında daha çox məlumat üçün bu məqalənin Struktur HTML bölməsinə baxın.

              Əsas elementlərinizi sifariş etmək

              Tərkibinə və məzmuna aidiyyəti erkən olmalıdır. SEO məsləhətçiniz Google və ya Facebookun səhifələrinizi necə göstərdiyini öyrənməyə çalışarkən, onları bir çox CSS bağlantısı və təsadüfi JavaScript kodu ilə sıralamağa çalışmayın..

              Navbarınız pəncərənizin yuxarısında yapışsa və saytın əsas adı altındadırsa, əsas sayt başlığınızı

              və ya

              etiketləyin və əvvəlcə içəriyə yerləşdirin. Başlıqdan sonra naviqasiya menyusunu qoyun.

              Element sonrakı ilk element olmalıdır. Sol tərəfli çubuğunuz olsa da, CSS-dən istifadə edərək onu sol tərəfə keçirin; əsas məzmundan əvvəl qoyma.

              Səhifənin içərisindəki son məzmun elementi olmalıdır. Bundan sonra görünən HTML elementləri olmamalıdır .

              JavaScript bağlandıqdan sonra mümkün qədər çox yerə qoyun. Yalnız bir səbəbə görə orada olmalı olduqda JavaScript-i daxil edin (ümumiyyətlə yoxdur).

              Struktur işarələyinizi oxumağı asanlaşdırır

              Bəzən sadəcə bir çox etiket daxil etməlisiniz və ya müxtəlif səviyyələrdə çoxsaylı yan çubuğunuz var. Yoxsa iç içə siyahılarınız çoxdur.

              Etdiyiniz ən faydalı işlərdən biri də budur kodunuzu daxil edin. Aşağıdakı iki nümunəyə baxaq:

              sinif ="mast-baş">

              Sənədin adı

              sinif ="nav-bar">
              sinif ="əsas nav">

              • Menyu maddəsi
              • Menyu maddəsi
              • Menyu maddəsi
                • Menyu maddəsi
                • Menyu maddəsi
                • Menyu maddəsi
              • Menyu maddəsi

              sinif ="mast-baş">

              Sənədin adı

              sinif ="nav-bar">
              sinif ="əsas nav">

              • Menyu maddəsi
              • Menyu maddəsi
              • Menyu maddəsi
                • Menyu maddəsi
                • Menyu maddəsi
                • Menyu maddəsi
              • Menyu maddəsi

              İkincisini oxumaq daha asandır, elə deyilmi? Bu sənədinizi anlamağa çalışan dizaynerlər və inkişaf etdiricilər üçün çox faydalıdır.

              Girişinizə uyğun olduğundan əmin olun - bir boşluq, iki boşluq, bir nişan. Seçdiyiniz şeyin o qədər də əhəmiyyəti yoxdur, amma vacib olanı ardıcıl saxlamaqdır.

              Ancaq yaradılan HTML haqqında?

              Bu gün internetdəki HTML-lərin əksəriyyəti bir məzmun idarəetmə sistemi və ya digəri tərəfindən yaradılır. Kodu hər zaman istədiyiniz kimi işlətmək olmur - xüsusən HTML yaradan kod müxtəlif mövzu və plugin faylları arasında yayılıbsa.

              Cavab, mənalı siniflər və ya şəxsiyyət sənədləri və son yazıları istifadə etməkdir. Bu, yaradılan məzmunun təkrar blokları üçün, məsələn, şərhlər və ya yan çubuğun elementləri üçün faydalı ola bilər.

              sinif ="mast-baş">

              Sənədin adı

              sinif ="nav-bar">
              sinif ="əsas nav">

              • Menyu maddəsi
              • Menyu maddəsi
              • Menyu maddəsi
                • Menyu maddəsi
                • Menyu maddəsi
                • Menyu maddəsi
              • Menyu maddəsi



              sinif ="şərhlər">
              sinif ="Şərh" id ="şərh-39874693029">


              sinif ="yan panel" id ="abunə forması">


              sinif ="yan panel" id ="arxivlər">

              Bir qayda olaraq - bir elementin açılış və bağlama etiketi eyni xəttdə deyilsə və element sinif və ya id tələb edirsə, bağlama etiketini şərh etmək yaxşı bir fikirdir.

              Mənalı Dərslər və şəxsiyyət vəsiqələri

              Əvvəla - sinif və şəxsiyyət xüsusiyyətlərinizi ardıcıl və oxunması asanlaşdırın:

              • yalnız kiçik hərflərdən istifadə etməklə
              • tire ilə ayıran söz.

              Sonrasında, sinif adlarınız və şəxsiyyətlərinizin semantik mənada olduğuna və dizayn və görüntüləmə aid olmadığından əmin olun.

              Yaxşı sinif və şəxsiyyət adları:

              • nav-menyu
              • blog-post
              • sidebar-widget
              • şərh-meta.

              Pis sinif və şəxsiyyət adları:

              • yaşıl qutu
              • sol tərəf çubuğu
              • solğun pankart.

              Bəzən cəbhə çərçivənizin və ya CSS-in təbiəti əlavə elementlərə ehtiyac duyacaqdır və sarmalama kimi layout xüsusi sinif adlarından istifadə edərək özünüzü tapa bilərsiniz..

              Əgər kömək edə bilmirsinizsə, bu yaxşıdır. Yalnız ümumi şeyləri saxladığınızdan əmin olun. CSS yaradan yenidən dizayndan daha pis bir şey yoxdur:

              .yaşıl qutu
              background-color: mavi;
              }

              Məzmun elementlərindən ağılla istifadə edin

              Məqalənizin əsas hissəsində və ya digər məzmunda sənədinizi düzgün təşkil etmək üçün bölmə məzmun etiketlərindən istifadə edin.

              Başlıqlar və bölmələr

              Bölmələr üçün başlıqlar çox vacibdir. Onları laqeyd qoyma. Bir nəhəng məzmun blokundan çox, bir neçə başlıq bölmə və alt hissələr varsa, son məzmununuzu oxumaq daha asandır.

              • Başlıq etiketlərindən istifadə edin (

                ,

                ,

                ,

                ) bölmə və alt bölmələrə.

              • Başlıqların iyerarxiyasına uyğun bir kontur təşkil etdiyinə əmin olun. Qoyma
                bir sonra

                olmadan

                müdaxilə edir. Məzmunun rasional və başa düşülən bir quruluşa malik olduğundan əmin olun.

              • İstifadə edirsinizsə bölmə başlıqlarını qeyd etmək üçün bir şey səhvdir.

              Bundan əlavə, id atributunu bölmə başlıqlarına qoymağınızdan əmin olun ki, sizin və başqalarının sənəd sənədlərini yaratması üçün.

              id ="başlıq-bölmə">Bölmə adı

              ...

              href ="# başlıq-bölmə">Bu həmin yerə bağlanır.

              Nəhayət, üfüqi qaydanı sui-istifadə etməyin (). Bölmələri və başlıqları düzgün istifadə edirsinizsə, demək olar ki, heç bir səbəb yoxdur.

              Links

              Çapa etiketi üçün tələb olunan bir atribut əlaqəli sənədin URL-dir.

              Bir başlıq etiketi də daxil etmək çox faydalıdır, çünki insanlar linki tıklamadan əvvəl hara getdiklərini bilirlər. Ayrıca, Axtarış motorları bağlantının nə olduğunu müəyyənləşdirməyə kömək edir. İdeally, başlıq etiketi əlaqəli sənədin adı olacaq.

              Bağlantılarla bağlı başqa bir məsələ çapa mətni - istifadəçini linki izləmək üçün tıkladığı (və ya vuran və ya seçən) faktiki mətndir..

              Mümkünsə Buraya tıklamamağa çalışın. Bəzən bu qaçılmazdır, ancaq mümkün olduqda lövbər mətnini mənalı etməyə çalışmalısınız. Bu, oxucularınız üçün və bağladığınız sənəd üçün faydalıdır (bu da sizin ola bilər).

              HTML haqqında href = ilə daha çox məlumat əldə edin"">tıklayın.

              Çox href = təmin edirik"">HTML haqqında məlumat.

              Şəkillər

              Təsvirin yalnız bir src elementinin olması lazımdır - görüntünün URL. Başlıq və alt mətn daxil olmaqla kömək edə bilər.

              • korlar üçün ekran oxuyanlar təsviri görə bilməyən istifadəçiyə təsviri oxuya bilər
              • axtarış motorları görüntüyü indeksləşdirə bilər və görüntünün nə ilə əlaqəli olduğu barədə bir fikir var.
              Təriflər, sitatlar, qısaltmalar

              Heç vaxt istifadə edilməyən bir neçə çox faydalı span səviyyəli işarə elementi var.

              Bunlar səhifənizdəki söz haqqında nazik məlumat verir. İstifadəçilər məzmununuzu daha yaxşı başa düşmələrinə kömək edə bilər və kompüterlərə (axtarış motorları, süni intellekt) yazdıqlarınızı daha yaxşı başa düşməyə kömək edə bilərlər.

              • - Tərif etiketi. Bu ilk dəfə istifadə etdiyiniz və texniki bir termin təyin edə bilərsiniz.
              • - İxtisarlar üçün istifadə olunur. İxtisarın genişləndirilmiş formasını başlıq etiketinə qoya bilərsiniz.
              • - Əksər insanlar kotirovkaları təyin etmək üçün yalnız tipoqrafik sitat işarələrindən istifadə edirlər, lakin işarələməni istifadə etmək daha aydın edir və sitatın mənbəyinə elementlə istinad etməyə imkan verir.

              Daha çox məlumat əldə edin və daha çox qayğı göstərin

              Yaxşı HTML yazmaq bir məsələdir:

              • bir ovuc əsas prinsipləri öyrənmək
              • onları izləmək üçün məzmununuz və saytınız haqqında kifayət qədər qayğı göstərir.

              Yalnız öyrənmə hissəsi ilə sizə kömək edə bilərik. Baxım qərarı verməlisiniz.

              Məsləhətlərimizin çoxunu bir cümlə ilə yekunlaşdırmaq olar:

              HTML'inizin ünsiyyət qurmaq istədiyinizi dəqiq bir şəkildə izah etdiyinə əmin olun.

              2-ci hissə: HTML təsdiqləyiciləri

              Müasir, standartlara əsaslanan veb brauzerlərin və HTML-nin meydana gəlməsi ilə doğrulama mövzusunda artan maraq artdı - veb saytın qaynaq kodunun səhvlərdən və müvafiq spesifikasiyalara uyğun olduğundan əmin olun..

              Əlbəttə ki, bu yaxşı bir şeydir - veb saytlar "qaydalara" əməl etdikdə ümumiyyətlə daha yaxşı bir yerdir. Ancaq doğrulama mövzusunda həddindən artıq çox diqqət əks nəticə verə bilər.

              Budur bilmək istədiyiniz şey.

              HTML Qiymətləndirmə nədir?

              Doğrulama sadəcə veb səhifənizin mənbə kodunun W3C tərəfindən müəyyənləşdirilmiş dilin spesifikasiyasına uyğun olub olmadığını yoxlamaq deməkdir. Bu yoxlama bir HTML Doğrulama adlı bir proqram vasitəsi ilə aparılır.

              Bu, oxu ilə oxşardır - bütün sözlərin düzgün yazıldığına və durğu və qrammatikanın adi qaydalarına əməl etdiyinə əmin olun..

              İşarələmə dili üçün dəqiqləşdirmə hər HTML elementinin necə istifadə ediləcəyi, potensial atributlarının nə ola biləcəyi və bir səhifədəki digər elementlərlə necə əlaqəli olduğunu izah edir..

              Bir HTML sənədinin etibarlı olduğunu söyləmək, sadəcə bu qaydaların hər birini izlədiyini göstərir.

              HTML doğrulama nədir deyil?

              HTML, veb saytınızın hər hansı bir yaxşı olduğunu və ya düşündüyünüz kimi göründüyünü və ya marketinq məqsədlərinizə çatmağınıza köməkçi olacağını söyləmir. Yalnız işarələməniz dəqiqləşdirməyə uyğun olub olmadığını söyləyir.

              Bu, redaktə və oxu ilə işləmə arasındakı fərqə bənzəyir - doğrulama oxuyan kimi.

              HTML doğrulaması yalnız HTML ilə əlaqəlidir - CSS, JavaScript, əsas PHP deyil. Düzgün işləyən formalar kimi şeylərlə heç bir əlaqəsi yoxdur (forma təsdiqlənməsi tamamilə fərqli bir şeydir).

              Doğrulama ilə niyə narahatdır?

              Doğrulama vasitəsi ilə HTMLinizi işlətmək, müxtəlif yollardan HTML-yə sürünən səhvləri tutmağınıza kömək edə bilər.

              Sadə tiplər

              Yəqin ki, doğrulama səhvlərinin ən çox yayılmış mənbəyi sadəcə sadə tipoqrafik səhvlərdir. Bir elementin etiket adı səhv yazılıbsa və ya solun əvəzinə sağ bucaq mötərizəsi vurulsa, doğrulama xətası alacaqsınız. Bunlar tez-tez tapmaq və düzəltmək üçün ən vacibdir, həm də ən asandır.

              Versiya uyğun deyil

              HTML'nin hər bir versiyasında bir az fərqli qaydalar dəsti və dildə olan şeylər var. Əgər HTML etibarlıdırsa, deməli o qaydaların hamısına əməl etmisiniz və yalnız rəsmi olaraq dilin bir hissəsi olan şeylər daxil edilmişdir.

              Məsələn, HTML etiketi HTML5-də yenidir - HTML 4.0 spesifikasiyasında mövcud deyildi. Bu o deməkdir ki, bu spesifikasiyaya qarşı doğrulamısınızsa və daxil etsəniz, etibarlı olmayacaqdır. Səhv alacaqsınız.

              Dəyişən bir şeyin başqa bir nümunəsi, null elementlərin yaxınlaşma yolu.

              Şəkil etiketi ( ) boş bir elementdir - məzmunu yoxdur, yalnız atributlardır (görüntü özü bir elementin məzmununa deyil, görüntü sənədinə işarə edən bir xüsusiyyətdir). Əvvəllər null elementlər bağlanmalı idi, buna görə də görərdiniz:

              src ="http://example.com/some_image" alt ="Bəzi şəkil" />

              İndi HTML5 spesifikasiyasında buna üstünlük verilmir və eyni görüntü belə görünəcək:

              src ="http://example.com/some_image" alt ="Bəzi şəkil" >

              Doğrulama bir sıra səbəblərə görə vacibdir:

              • Bu illər ərzində çox fərqli xüsusiyyətlər var
              • Bəzən eyni anda birdən çox spesifikasiya aktivdir
              • Koderlər müxtəlif iş üsullarına əsaslanan vərdişlər hazırlamışlar.
              Pis Server Tərəf Kodu

              Bu gün əksər veb saytlar HTML yaratmaq üçün bəzi əsas Məzmun İdarəetmə Sistemindən və ya server skriptlərindən istifadə edirlər. Bu əlavə səhvlər təqdim edə biləcək bir mürəkkəblik qatını əlavə edir.

              Məsələn, müəyyən bir şərt yerinə yetirilmirsə və ya şablon faylı yüklənmirsə, böyük bir elementin bağlanma etiketi çıxışa daxil ola bilməz.

              Server tərəfindəki dinamik skriptlərdə işləyərkən bütün HTML sənədini görmək çətin ola bilər - vahid səhifə üçün şablon tez-tez bir sıra müxtəlif sənədlərdə yayılır.

              Bad Kod daxil edilmişdir

              Məzmun İdarəetmə Sistemləri ilə yanaşı veb sayt sahiblərinin əksəriyyəti veb saytlarını yaratmağa kömək etmək üçün bir sıra üçüncü plaginlərdən istifadə edirlər. Bunlar həmişə olmadıqları qədər yüksək keyfiyyətli deyil və yazmalar, pis işarələr və pis yazılmış kod mənbəyi ola bilər.

              Sadəcə HTML dəqiqliyini bilməmək

              HTML spesifikasiyasında çox sayda detal var - bir çox başlanğıc və ara inkişaf etdiricinin bilməyəcəyi və ya başa düşməyəcəyi şeylər.

              Bir siyahı qoya bilməyəcəyinizi bilirdiniz (