HTML öyrənmək

MəZmun

Addımlamaq
2-nin 1-ci hissəsi: HTML əsaslarını öyrənmək
2-ci hissə: Ətraflı HTML öyrənmək
Göstərişlər
Xəbərdarlıqlar
Ehtiyaclar

HTML-nin kısaltmasıdır Hyper Text Markup Language, kod və ya dil veb saytlar yaratmaq üçün istifadə olunur. Əvvəllər heç vaxt proqramlaşdırmadınızsa, mürəkkəb görünə bilər, ancaq bunu sınamaq üçün sadə bir söz işləmə proqramı və bir internet brauzeri lazımdır. Forumlardan, onlayn profillərdən və ya wikiHow məqalələrindən bəzi HTML-ləri tanıya bilərsiniz. HTML, İnternetdən istifadə edən hər kəs üçün faydalı bir qaynaqdır və HTML öyrənmək gözlədiyinizdən daha az vaxt ala bilər.

Addımlamaq

2-nin 1-ci hissəsi: HTML əsaslarını öyrənmək

HTML sənədini açın. Notepad və ya Windows üçün Word və Mac üçün Mətn Redaktoru daxil olmaqla bir çox söz işləmə proqramı HTML sənədləri yaratmaq üçün istifadə edilə bilər. Sənədinizi veb səhifə kimi saxlamaq üçün yeni bir sənəd açın və yuxarı menyudan Fayl → Saxla seçin və ya ".doc", ".rtf" və ya başqa bir şeydən ".html" və ya ".htm olaraq fayl uzantısını dəyişdirin. ".
- İndi sənədinizin Zəngin Mətn Formatından (RTF) "düz mətn" formatına dəyişdirildiyini və bəzi formatlaşdırma seçimlərinin və şəkillərin düzgün qeyd olunmadığını bildirən bir xəbərdarlıq görə bilərsiniz. Bu xəbərdarlığı görməməzlikdən gələ bilərsiniz; HTML sənədləri bu seçimlərdən istifadə etmir.
- .html və .htm faylları eynidir. Hər ikisi də işləyir.
Brauzerlə sənədinizə baxın. Boş sənədinizi qeyd edin, bağlayın və sonra yenidən açmaq üçün saxlandığı yerdə sənədin üzərinə iki dəfə vurun. Sənədiniz artıq brauzeriniz tərəfindən boş bir veb səhifə kimi açılmalıdır. Bu işə yaramırsa, faylın işarəsini brauzerinizin ünvan çubuğuna sürükləyin. Daha sonra, bu məqalədəki addımları izləyərək HTML sənədinizi düzəltsəniz, koddakı dəyişikliklərin necə göründüyünü yoxlamaq üçün brauzerə qayıtmağa davam edəcəksiniz.
- Qeyd: veb səhifəniz hələ onlayn deyil. Səhifə başqaları üçün əlçatan deyil və onu yoxlamaq üçün işləyən bir internet bağlantısına ehtiyac yoxdur. HTML sənədini bir veb sayt kimi "oxumaq" üçün sadəcə brauzerinizdən istifadə edirsiniz.
"Etiket" lərin nə olduğunu anlayın. Etiketlər son mətn səhifəsində normal mətn kimi görünmür. Etiketlər brauzerinizdə səhifəni və səhifədəki məzmunu necə göstərəcəyini izah edir. Başlanğıc etiketində təlimatlar var. Məsələn, brauzerə mətni qalın şəkildə göstərməsini söyləyə bilər. Təlimatların tətbiq olunduğu brauzerə izah etmək üçün son etiketi tələb olunur: bu nümunədə başlanğıc və bitiş etiketi arasındakı bütün mətn qalındır. Bitiş etiketleri də mötərizənin içinə yerləşdirilir, lakin ilk mötərizənin ardınca bir əyik.
- Mötərizədə başlanğıc etiketlərini yazın: bu başlanğıc günüdür>
- Mötərizədə son etiketlər yazın, ancaq ilk mötərizədən sonra bir əyik qoyun: /bu bağlama etiketi>)
- Məqalədə daha sonra funksional etiketlərin necə yazılacağını oxuyun. Bu addımda, etiketlərin hansı şəkildə yazılacağını xatırlamalısınız:> və />.
- Digər HTML kurslarında etiketlər "elementlər" adlanır və açma və bağlama etiketleri arasındakı mətnə "element məzmunu" da deyilir.
İlk html> etiketinizi yazın. Hər HTML sənəd a ilə başlayır html>etiketi və a ilə bitir / html>etiket. Bu brauzerə bu etiketlər arasındakı hər şeyin HTML-də yazıldığını bildirir. Bu yazıları sənədinizə əlavə edin:
- Yaz html> sənədinizin yuxarı hissəsində.
- Özünüzə bir az yer vermək üçün bir neçə dəfə daxil olun və ya qayıdın, sonra yazın / html>
- Səni xatırla hər şey bu iki yazı arasındakı bu məqalədə.
Sənədinizin başını> hissəsini düzəldin. Html> və / html> etiketləri arasında a yazırsınız baş>başlanğıc etiketi və a / baş>son etiket. Bu etiketlər arasında yenidən bir az yer ayırın. Bu etiketlər arasında yazılan hər hansı bir şey veb səhifənin özündə görünməyəcəkdir. Aşağıdakı addımları sınayın və məlumatın harada göründüyünü görə biləcəyinizi görün:
- Baş> və / baş> etiketlər arasında yazın: başlıq> və / başlıq>
- Etiketlər arasında title> və / title> yazırsınız: HTML-ni necə öyrənmək olar (şəkillərlə) - wikiHow.
- Sənədi saxla və bir brauzerdə açın (və ya sənəd saxlayaraq səhifəni brauzerdə yeniləyin). Səhifənin yuxarı hissəsində, ünvan zolağının üstündə yazdıqlarını görürsən?
Bədən> bölmə yaradın. Bu yeni başlayan sənəddə qalan hər şey gövdə> hissəsinə yerləşdirilir və veb səhifədə göstərilir. Sonra etiket / head>, lakin qarşısında yazdığınız etiket / html> bədən> və / bədən>. Bu yazıda daha çox müzakirə etdiyimiz hər şeyi bədən etiketləri arasında yerləşdiririk. İndi buna bənzər bir sənədiniz olmalıdır (güllə olmadan):
- html>
- baş>
- başlıq> HTML öyrənmək - wikiHow / title>
- / baş>
- bədən>
- / bədən>
- / html>
Fərqli üslublarda mətn əlavə edin. İndi brauzerdə həqiqətən görünəcək bir şey yazmağa başladığınız vaxt gəldi! Dəyişiklikləri saxladıqdan və brauzer daxilində səhifəni yenilədikdən sonra gövdə etiketlərində yazdığınız hər şey brauzerdə görünəcəkdir. Yaz yox əlamətləri olan bir şey və >çünki brauzeriniz bunu düz mətn əvəzinə HTML təlimatı kimi şərh edəcəkdir. Məsələn yaz Salam dünya! (İngilis dilində "Hello world!", Bu, müəyyən bir proqramlaşdırma dilində hər hansı bir proqramlaşdırma kursunda ilk nümunə olan qlobal standart mətndir) və ya başqa bir şey və mətndən əvvəl və sonra aşağıdakı etiketləri qoyun və nə baş verdiyini görün:
- em> salam dünya! / em> kursiv mətnə bənzəyir: Salam dünya!
- güclü> Salam dünya! / güclü> qalın mətnə bənzəyir: Salam dünya!
- s> Salam dünya! / s> cızılmış mətnə bənzəyir: ~~Salam dünya!~~
- sup> Salam dünya! / sup> üst sətir kimi görünür:
- alt> Salam dünya! / alt> başlıq kimi görünür: _{Salam dünya!}
- Kombinasiyaları sınayın: Necə görür em> strong> salam dünya! / strong> / em> rədd ol?
Mətninizi abzaslara bölün. Sənədinizə fərqli mətn sətirləri qoysanız, bütün sətirlərin bir-birinin ardınca yerləşdirildiyini görəcəksiniz. Yeni sətirləri və boş sətirləri özünüz proqramlaşdırmalısınız:
- p> Bu ayrıca bir hissədir. / p>
- Bu cümlə birinci sətirdə, bu cümlə növbəti sətirdədir.
  Bu, son etiketə ehtiyac duymayan ilk rastlaşdığımız etiketdir! Biz belə bir etiketi deyirik boş etiket.
- Bölmələrin adlarını aydınlaşdırmaq üçün başlıqlar yaradın:
  h1> başlıq / h1>: mümkün olan ən böyük başlıq
  h2> başlıq / h2> (2 səviyyəli başlıq)
  h3> başlıq / h3> (3 səviyyəli başlıq)
  h4> başlıq / h4> (4 səviyyəli başlıq)
  h5> başlıq / h5> (mümkün olan ən kiçik başlıq)
Siyahıların necə hazırlanacağını öyrənin. Bir veb səhifədə siyahılar yaratmağın bir neçə yolu var. Ən çox nəyi sevdiyinizi tapmaq üçün aşağıdakı üsulları sınayın. Bir cüt etiketin bütün siyahının ətrafına (sıralanmamış siyahılar üçün ul> və / ul> etiketlər kimi) yerləşdirildiyini və siyahıdakı hər bir maddənin ətrafında, məsələn, li> və / li> fərqli bir cüt etiketin yerləşdirildiyini unutmayın. .
- Maddə siyahıları yaratmaq üçün aşağıdakı kodu istifadə edin:
  ul> li> bir maddə / li> li> başqa bir maddə / li> li> başqa bir maddə / li> / ul>
- Və ya nömrələnmiş siyahılar yaratmaq üçün bu kod:
  ol> li> Maddə 1 / li> li> Maddə 2 / li> li> Maddə 3 / li> / ol>
- Və ya sözdə bir tərif siyahısı yaratmaq üçün bu kod:
  dl> dt> Qəhvə / dt> dd> - İsti içki / dd> dt> Süd / dt> dd> - Soyuq içki / dd> / dl>
Yeni xətlər, üfüqi xətlər və şəkillərlə səhifənizi daha cəlbedici edin. İndi səhifənizə başqa şeylər əlavə etməyə başlamağın vaxtı gəldi. Aşağıdakı yazıları sınayın (şəkil onlayn olaraq yerləşdirilməlidir, belə ki şəklə bir keçid istifadə edə bilərsiniz):
- Sətir daxil edin: br> və ya hr>
- Şəkillər əlavə edin: img src = "görünüşünüzün_url_of">
Səhifədəki digər yerlərə keçidlər daxil edin. Bu kodu digər səhifələrə və veb saytlara keçid üçün də istifadə edə bilərsiniz, lakin hələ veb saytınız olmadığından, səhifədəki keçid edə biləcəyiniz xüsusi yerlər olan "lövbərlərə" diqqət yetirəcəyik:
- Əvvəlcə keçid vermək istədiyiniz səhifədəki a> etiketi ilə bir çapa yaradın. Çapanıza yadda saxlanması asan bir aydın ad verin:
  
  a name = "Tips"> Çapa yerləşdirdiyiniz mətn budur. / a>
- Çapa və ya başqa bir veb səhifəyə keçid vermək üçün href> etiketindən istifadə edin:
  
  a href = "veb səhifənin URL'si və ya bu səhifədəki çapa adı"> Bağlantı şəklində göstərilən mətni və ya şəkli buraya yazın. / a>
- Başqa bir səhifədəki bir lövbərə keçid üçün url-dən sonra # işarəsini əlavə edin və sonra lövbərinizin adını əlavə edin. Məsələn http://www.wikihow.com/HTML-leren#Tips sizi bu səhifədəki "Tips" bölməsinə aparacaq.

2-ci hissə: Ətraflı HTML öyrənmək

Atributlar haqqında məlumat əldə edin. Atributlar etiketin içərisinə yerləşdirilir və başlanğıc və bitiş etiketi arasında "element məzmunu" nda əlavə düzəlişlər etmək üçün istifadə olunur. Heç vaxt tək qalmazlar. Bunlar aşağıdakı şəkildə yazılmışdır: ad = "dəyər". ad atributun adını təmsil edir (məsələn, "rəng") və dəyər bu xüsusi vəziyyəti təsvir edir (məsələn, "qırmızı").
- Bu məqalənin əvvəlki hissəsinə diqqətlə baxmısınızsa, atributlarla artıq qarşılaşmısınız. İmg> etiketi atributdan istifadə edir src, bir çapa atributu istifadə edir ad və əlaqələr atributdan istifadə edir href. Hamısının ölçülü olduğunu deyə bilərsiniz ___='___’ izləmək.
HTML masaları ilə təcrübə edin. Cədvəl və ya qrafiq hazırlamaq üçün bir neçə etikete ehtiyacınız var:
- Bütün masanın ətrafında masa etiketlərindən (ingilis dilində "masa") başlayın:cədvəl> / cədvəl>
- Hər sətrin məzmunu ətrafında etiketlər yerləşdirin: tr>
- Sütun başlıqlarını birinci sətirdə yerləşdirin: ci>
- Hüceyrələri ardıcıl sətirlərə yerləşdirin: td>
- Bütün bunların bir araya gəlməsinə bir nümunədir:
  
  cədvəl> tr> ci> Sütun 1: Ay / ci> ci> Sütun 2: Sığorta edilmiş pul / th> / tr> tr> td> yanvar / td> td> 100 € / td> / tr> / cədvəl>
Baş hissəsində istifadə olunan digər etiketləri öyrənin. Hər sənədin əvvəlinə yerləşdirdiyiniz başlıq etiketini artıq öyrənmisiniz. Başlıq> etiketi ilə yanaşı baş hissəsində digər etiketlər də ola bilər:
- Meta etiketlər yaratmaq üçün istifadə olunur metadata bir veb səhifə haqqında. Bu məlumatlar veb saytları kateqoriyalara ayırmaq üçün axtarış motorları tərəfindən istifadə olunur. Səhifənizi axtarış motorlarına göstərmək üçün bir və ya daha çox meta etiketi yerləşdirə bilərsiniz (son etiketlər lazım deyil), hər bir etiket tam olaraq bir ad atributu və məzmun atributundan ibarət olmalıdır, məsələn: meta name = "description" content = "here təsviri ">; və ya meta name = "açar sözlər" content = "həmişə açar sözlər siyahısını buraya vergüllə ayırın">
- link> etiketlər digər faylları səhifəyə bağlamaq üçün istifadə olunur. Tipik olaraq CSS stil vərəqlərini HTML səhifələri ilə əlaqələndirmək üçün istifadə olunan bu səhifələr fərqli bir növ kodla hazırlanır və bir səhifənin ümumi üslubunu təyin etmək üçün istifadə olunur.
- script> etiketlər javascript sənədlərini HTML səhifəsi ilə əlaqələndirmək üçün istifadə olunur. Javascript, istifadəçi səhifədə bir şey etdikdə səhifəni dəyişdirməyə imkan verir.
Mövcud səhifələrdən HTML ilə oynayın. Veb səhifələrin mənbə koduna baxmaq HTML məlumatlarınızı genişləndirmək üçün əla bir yoldur. Səhifəni sağ vurun və "Mənbəyə bax", "Səhifənin mənbəyini göstər" və ya oxşarlarını seçin. Bilmədiyiniz müəyyən bir etiketin nə etdiyini öyrənin və ya cavabını onlayn axtarın.
- Başqalarının veb saytlarını düzəldə bilməzsiniz, ancaq HTML kodunu öz sənədinizə kopyalaya və müxtəlif düzəlişlərin nə olduğunu görmək üçün onunla oynaya bilərsiniz. Qeyd: bir çox veb sayt CSS stil cədvəllərindən istifadə etdiyi üçün bir çox rəng və ya başqa üslub görə bilməyəcəksiniz.
Daha dərin məqalələr oxuyaraq HTML haqqında məlumat əldə edin. İnternetdə W3Schools və ya Codecademy kimi daha çox HTML etiketlərinə yiyələnmək üçün bir çox qaynaq var. Bir çox HTML kitabı da mövcuddur, lakin HTML standartı zaman zaman dəyişdiyindən son bir nəşrdən istifadə etdiyinizə əmin olun. HTML-ni yaxşı bir səviyyədə mənimsədikdən sonra veb səhifənizin dizaynı və tərzi üzərində daha çox nəzarət üçün CSS-ə müraciət edə bilərsiniz. Bundan sonra növbəti addım ümumiyyətlə javascript olur.

Göstərişlər

İnternette sadə bir veb səhifə tapmaq və sonra kodla qarışıqlığa başlamaq faydalı ola bilər. İstədiyiniz hər hansı bir mətni köçürməyə, şrifti dəyişdirməyə, şəkilləri dəyişdirməyə çalışın!
Kodu yazmaq üçün bir dəftərdən istifadə edə bilərsiniz ki, bir anlıq xatırlamasanız geri düşəcək bir şeyiniz olsun. Bu səhifəni də çap edə və istinad üçün saxlaya bilərsiniz.
XML və RSS bu günlərdə veb saytlarda getdikcə daha çox istifadə olunur. Kod, xüsusən də mənbə kodunda göründüyü zaman insan gözü üçün əlçatmaz görünə bilər, lakin funksionallıq faydalı ola bilər.
HTML daxilində istifadə olunan etiketlər hərflərə həssas deyildir, lakin borc olaraq kiçik hərflərdən istifadə etməkdir (bu məqalədə etdiyimiz kimi). Etiketlər üçün kiçik hərflər, həmçinin XHTML ilə uyğunluq üçün tövsiyə olunur.

Xəbərdarlıqlar

Bəzi etiketlər artıq istifadə edilmir və eyni şeyi edən, lakin daha çox seçim təklif edən digər etiketlər ilə əvəz edilmişdir.
Səhifənizin HTML standartına uyğun olduğundan əmin olmaq istəyirsinizsə, kodunuzu mövcud standartla yoxlamaq üçün W3 veb saytına daxil olun. Bir çox etiket köhnəldi və yerinə müasir brauzerlərdə daha yaxşı işləyən etiketlər qoyuldu.

Ehtiyaclar

Notepad (Windows) və ya Text Editor (Mac) kimi bir söz işləmə proqramı.
bir vərəq və ya dəftər (isteğe bağlı)
Windows üçün Notepad ++ və ya Mac üçün TextWrangler kimi HTML yazmaq üçün xüsusi hazırlanmış bir proqram (isteğe bağlı)