HTML səhifəsi necə yazılır (şəkillərlə) - Tips

Videonuz: HTML Dərsləri - 07 - Qeydiyyat Forması | Part 1

MəZmun

Addımlar
Hissə 1: HTML-i necə kəşf etdim
Məsləhət
Xəbərdarlıq
Nə lazımdır

HTML (HyperText Markup Language) veb səhifələr yaratmaq üçün əsas dildir. Asan və çevik bir kodlaşdırma dili olaraq yaradılmışdır. İnternetdəki demək olar ki, hər bir veb sayt bu kodun bir növü ilə hazırlanmışdır (ColdFusion, XML, XSLT). HTML-ni anlamaq asandır, lakin hərtərəfli funksionallığı ilə maraqlansanız, bu barədə uzun müddət öyrənməyə davam edə bilərsiniz. Veb saytınıza rəng və əyləncə əlavə etmək üçün əsas HTML səhifəsinə alışdıqdan sonra əsas CSS-i öyrənə bilərsiniz.

Addımlar

4-ün 1-ci hissəsi: Sənədin qurulması

Sadə bir mətn redaktoru açın. NotePad yaxşı bir seçimdir və pulsuz yükləyə bilərsiniz. Əksər mətn redaktorları ilə HTML yaza bilərsiniz, lakin avtomatik formatlaşdırma imkanlarına malik daha mürəkkəb proqram HTML səhifənizi təşkil etməyi çətinləşdirə bilər.
- TextEdit istifadə etməyin, çünki adətən faylı brauzerinizin HTML kimi tanımadığı formatda saxlayır.
- Onlayn bir HTML redaktorundan da istifadə edə bilərsiniz. Xüsusi HTML redaktə proqramları yeni başlayanlar üçün tövsiyə edilmir.
Bir faylı veb səhifəsi kimi saxlayın. Yuxarıdakı menyuda Fayl → Kimi Saxla seçin. Fayl formatını "Veb Səhifə", ".html" və ya ".htm" olaraq dəyişdirin. Sənədi asanlıqla tapa biləcəyiniz yerdə saxlayın.
- Bu üç seçim arasında heç bir fərq yoxdur.
Faylı brauzerdə açın. Faylın üzərinə iki dəfə vurun və avtomatik olaraq brauzerinizdə boş bir veb səhifə kimi açılacaqdır. Alternativ olaraq, Firefox və ya Internet Explorer kimi bir brauzer aça və sonra Sənədi seçmək üçün Fayl → Açıq Fayl istifadə edə bilərsiniz.
- Bu veb onlayn deyil. Yalnız kompüterinizdə görünə bilər.
Veb səhifəni yeniləyin və edilən dəyişikliklərə baxın. Boş sənədinizə aşağıdakıları daxil edin: Salam. Sənədi saxla. Brauzerinizdəki boş veb səhifəni yeniləyin və səhifənin yuxarı hissəsində qalın şəkildə "Salam" sözünün göründüyünü görməlisiniz. Bu təlim zamanı yeni HTML-nizi sınamaq istədiyiniz zaman .htm sənədini qeyd edin və sonra HTML-in necə tərtib edildiyini görmək üçün brauzerinizin pəncərəsini yeniləyin.
- "Sözlərini görürsənsə"və"'' Brauzerinizdə görünür, fayl HTML-də düzgün tərtib edilməyib. Fərqli bir mətn redaktoru və ya başqa bir brauzer sınayın.
Etiketləri öyrənin. HTML əmrləri brauzerdə veb səhifənizi necə tərtib edib göstərəcəyini izah edən "etiketlərdə" yazılır. Həmişə tək sitatların içərisində yazılırlar
və yuxarıdakı nümunədə istifadə etdiyiniz kimi veb səhifədə göstərilmir:
- "başlanğıc kartı" və ya "açılış kartı" dır. Bu etiketdən sonra yazılan hər şey "qalın" (veb səhifədə qalın) olaraq təyin olunacaq.
- simvolu / işarəsi ilə ayırd edə biləcəyiniz bir "son etiket" və ya "bağlama etiketi" dir. Qalın mətnin sonunu göstərir. Əksər etiketlərin (hamısı deyil) işləməsi üçün bir son etiketi lazımdır, ona görə də onu əlavə edin.
Sənədinizi yaradın. HTML sənədinizdəki hər şeyi silin. Tamamilə yazıldığı kimi (mətn nöqtələrini çıxarmaqla) aşağıdakı mətnlə başlayın. Bu HTML kodu brauzerə hansı növ HTML istifadə etdiyinizi və bütün HTML-lərinizin etiketlərin içərisinə yerləşdiriləcəyini bildirir. və .
Baş (baş) və bədən etiketlərini əlavə edin. HTML sənədləri iki hissəyə bölünür. "Üst" bölmə səhifənin adı kimi xüsusi məlumatlar üçündür. "Bədən" bölməsi səhifənin əsas məzmununu ehtiva edir. Bu bölmələrin hər ikisini sənədinizə əlavə edin və bitiş etiketlərini daxil etməyi unutmayın. Yeni əlavə olunmuş mətn qalın:
Səhifənizə bir başlıq verin. Baş hissədəki kartların əksəriyyəti yeni başlayanlarla öyrənmək əhəmiyyətsizdir. Başlıq etiketinin istifadəsi asandır və brauzer pəncərəsinin adı və ya brauzer nişanında nəyin göründüyünü təyin edəcəkdir. Başlığınızın başlanğıc və bitiş etiketlərini baş etiketlərinin içinə qoyun və bu etiketlər arasında istədiyiniz başlıqları yazın:
- İlk HTML səhifəm.
reklam

4-dən 2-ci hissə: Mətnin formatlanması

Bədəninizə mətn əlavə edin. Bu bölmə üçün yalnız bədən etiketləri ilə işləyəcəyik. Digər mətn sənədinizdə qalacaq, ancaq bu təlimatda təkrar etməyərək yerdən qənaət edəcəyik. Kartlar arasında nə istəsən yaz və və səhifənizdəki ilk məzmun kimi görünəcəkdir. Misal üçün:
- HTML səhifəsi yazmaq üçün wikiHow təlimatlarına əməl etdim.
Mətn üçün başlıqlar əlavə edin. Brauzerə aralarında mətni daha böyük bir şrift ölçüsündə göstərməyi tapşıran başlıq etiketləri ilə səhifənizi təşkil edin. Bu etiketlər veb saytınızın nə ilə əlaqəli olduğunu və necə təşkil olunduğunu müəyyənləşdirmək üçün axtarış motorları və digər vasitələrlə də istifadə olunur.

ən böyük başlıqdır və daha kiçik başlıqlar yarada bilərsiniz

. Onları səhifənizdə sınayın:
- Səhifəmə xoş gəlmisiniz.
- HTML səhifəsi yazmaq üçün wikiHow təlimatlarına əməl etdim.
- Bu gün hədəfim:
- Tamamlanan hədəflər:
- Başlıqlardan necə istifadə edəcəyinizi öyrənin.
- Tamamlanmamış qollar:
- Daha çox mətn formatlaşdırma etiketini öyrənin.
Daha çox mətn formatlaşdırma etiketini öyrənin. Artıq "güclü" etiketi görmüsünüz, ancaq mətninizi formatlaşdırmağın başqa bir çox yolu var. Bu yazıları və ya eyni mətn sətri üçün eyni anda birdən çox etiketi sınayın. Arxaya bitən etiketlər əlavə etməyi unutmayın!
- Brauzerdə qalın şəkildə göstərilən vacib mətn.
- Brauzerdə italiklə göstərilən mətn vurğulandı.
- Həmişəkindən biraz kiçik mesaj göndərin. Bu mətn bir başlıqda istifadə edildikdə avtomatik olaraq ölçüsünü dəyişdirəcəkdir.
- ~~Mətn artıq əhəmiyyət kəsb etmir, əsas tire ilə göstərilir.~~
- Mətn digər sənədlərdən daha gec daxil edilir, altından altı çəkilir.
Səhifənizdə mətn təşkil edin. "Enter" düyməsinə basmaqla mətnin başqa bir sətirdə görünməsi üçün kifayət etmədiyini fərq etdiniz. Bu etiketlər abzaslar və sətir sonları yaratmağınıza kömək edə bilər və ya mətninizi başqa yollarla düzəldə bilər:
- "Paraqraf" üçün qısaca bu etiket bu yazıların arasındakı bütün mətni bir abzasda saxlayacaq və yuxarıdakı və altındakı mətndən ayıracaq.
- Bu etiket xətt fasilələri yaradacaq. Başqa məzmuna müdaxilə etmədiyi üçün ona bir son etiketi əlavə etməyin. Bu etiketi abzaslarda deyil, şeirlərdə və ya ünvan sətirlərində istifadə edin.
- ```
Mətni çox dəqiq bir şəkildə göstərməyiniz lazımdırsa, bu etiket içindəki mətni sabit bir genişlik şriftinə uyğunlaşdırır (hər hərf eyni eni) və fasilələr yaratmağa imkan verir. Etiket əvəzinə müntəzəm redaktə etmək üçün boşluqlar və sətir araları.
```
- Bu etiket mənbədən sitat gətirilən mətn növünü təyin edir.
  Mənbəni daha sonra təsvir edə bilərsiniz vərəqə istinad edin.
Görünməz başlıq mətni əlavə edin. Şərh yazıları veb səhifədə göstərilmir. Məzmuna təsir göstərmədən özünüzü HTML sənədində qeyd etməyə imkan verirlər. Bitiş etiketi əlavə etməyin.
- Bitiş etiketleri olmadan tək gedən kartlara "boş etiketlər" deyilir.
Onları birləşdirin. Bu yazıları xatırlamağın ən yaxşı yolu veb saytınızda istifadə etməkdir. İndiyə qədər öyrəndiyiniz addımlardakı kartları istifadə edən bir nümunə. Brauzerdə necə görünəcəklərini proqnozlaşdırmağa çalışın, sonra sənədinizə köçürün və öyrənin.
- İlk HTML səhifəm.
- Veb saytıma xoş gəlmisiniz.
- Bu səhifədən zövq aldığınızı ümid edirəm!
  Mən bunu yalnız sənin üçün hazırladım.
- Hissə 1: HTML-i necə kəşf etdim
- HTML-i onsuz da öyrənmişəm ~~bir~~ ikisaat, buna görə indi bir mütəxəssisəm.
reklam

4-dən 3-cü hissə: Links və şəkillər əlavə etmək

Atributlar haqqında məlumat əldə edin. Etiketlər özündə atributlar adlanan əlavə məlumatlara sahib ola bilər. Bu atributlar etiketlər daxilində, formada əlavə sözlərlə təmsil olunur mülk adı = "xüsusi dəyər". Məsələn, hər hansı bir HTML etiketi başlıq xüsusiyyətinə sahib ola bilər:
- Giriş abzası burada.
  Veb səhifədəki abzasın üzərinə sürüşdüyünüzdə görünəcək "Giriş" bəndinə başlıq qoyun.
Digər veb saytlara bağlantılar. Kartların istifadəsi hər hansı digər veb səhifəyə köprü yaratmaq. Href atributundan istifadə ilə əlaqə yaratmaq üçün veb səhifənin URL-sini daxil edin. Oxuduğunuz veb səhifəyə keçid verən bir nümunə:
- Veb saytınıza daxil olan ziyarətçilər linki izləmək üçün bu mətni tıklaya bilərlər.
Etikete bir id atributu əlavə edin. Hər hansı bir HTML etiketinin istifadə edə biləcəyi başqa bir xüsusiyyət "id" elementidir. Hər hansı bir karta yazın id = "vidu" və ya boşluq olmayan hər hansı bir ad istifadə edin. Görünən bir effekt vermir, ancaq növbəti mərhələdə istifadə edəcəyik.
- Məsələn, sənədinizə aşağıdakıları əlavə edin:
  Bu abzas, id atributunun necə işlədiyini təsvir etmək üçün bir nümunə kimi istifadə olunur.
Müəyyən bir id ilə bir elementə keçid. İndi köprü etiketindən istifadə edə bilərik, , eyni səhifədəki başqa bir yerə keçid üçün. URL əvəzinə # simvolunu istifadə edəcəyik, sonra əlaqələndirmək istədiyimiz id dəyərini izləyirik. Misal üçün, Bu mətn "vidu" id ilə mətnə keçid verəcəkdir.
- Bütün HTML dəyərləri hərflərə həssasdır. "#VIDU" və "#vidu" hər ikisi eyni yerə keçid edəcəkdir.
- Səhifəniz bütün səhifəni bir anda göstərə biləcək qədər qısadırsa, brauzerinizdəki linki vurduğunuzda, ehtimal ki, heç bir şeyin baş verdiyini görməyəcəksiniz. Pəncərəni sürüşmə zolağı görünənə qədər dəyişdirin və yenidən cəhd edin.
Şəkillər əlavə edin. Kart boş bir etiketdir, yəni sona ehtiyac yoxdur. Brauzerin şəkli göstərmək üçün lazım olan bütün məlumatlar atributlardan istifadə edilərək əlavə olunur. Arxasında hər bir atribut üçün bir açıqlama olan wikiHow logosunu göstərmək üçün bir nümunə:
- Xüsusiyyətlər src = "" brauzerə fotonun harada olduğunu bildirir. (Başqasının saytından bir fotoşəkil yerləşdirməyin uyğunsuz hesab olunduğunu unutmayın və səhifə artıq aktiv olmadıqda fotoşəkil yox olacaq.)
- Xüsusiyyətlər stil = "" Çox şey edə bilər, amma ən əsası bir görüntünün genişliyini və hündürlüyünü piksel olaraq təyin etmək üçün istifadə olunur. (Bunun əvəzinə width = "" və height = "" ayrı atributlarını da istifadə edə bilərsiniz, ancaq CSS istifadə edirsinizsə bu qəribə ölçülərin dəyişməsinə səbəb ola bilər.)
- Xüsusiyyətlər alt = "" şəklin yüklənə bilmədiyini istifadəçinin görəcəyi şəklin qısa təsviridir. Bu, veb saytında gözü görməyənlər üçün ekran oxuyucuları üçün istifadə olunduğundan, bu bir tələb kimi qəbul edilir.
reklam

4-dən 4-cü hissə: Veb saytınıza əlavə etmə və əldə etmə haqqında daha çox məlumat əldə edin

HTML-nizi təsdiq edin. HTML doğrulaması kodunuzdakı səhvləri yoxlayır. Saytınız düzgün göstərilmirsə, doğrulama problemi yaradan səhv tapmaqda kömək edə bilər. Kodun ekranda yaxşı göründüyünü təyin edərək HTML haqqında daha çox məlumat verə bilər, lakin HTML standartındakı yeni yeniləmələr səbəbindən artıq tövsiyə edilmir. Etibarsız HTML istifadə edərək saytınızı yararsız hala gətirmir, əksinə problemlərə səbəb ola bilər və ya fərqli brauzerlərdə qeyri-sabit görünə bilər.
- W3C-dən pulsuz bir onlayn doğrulama xidmətini sınayın və ya başqa bir HTML 5 doğrulama vasitəsi axtarın.
Daha çox etiket və atributları öyrənin. Bir çox başqa HTML etiketi və atributları və onları öyrənmək üçün bir çox yer var:
- Daha çox dərslik və tam siyahı siyahıları üçün w3schools və HTML Dog-u sınayın.
- Görünüşünü bəyəndiyiniz bir veb səhifəni tapın, sonra HTML kodunu özünüz əldə etmək üçün brauzerinizin "Səhifə mənbəyinə bax" funksiyasından istifadə edin. Sənədinizə kopyalayın və necə işlədiyini öyrənin.
- Digər məqalələri oxuyun və HTML-də cədvəllər necə yaradacağınızı, axtarış motorları vasitəsilə tapmaq şansınızı artırmaq üçün meta etiketlərdən istifadə edin və ya bölmədən istifadə edin. səhifədə bir sahə qoyun) və CSS vasitəsilə üsluba kömək etmək üçün aralıq (mətn elementinin tərzini təyin etmək üçün istifadə olunur).
Veb saytınızı onlayn əldə edin. Veb saytınızı yerləşdirmək üçün bir xidmət seçin və sonra şəxsi veb domeninizə istədiyiniz qədər HTML səhifəsi yükləyə bilərsiniz. Bunu etmək üçün FTP yükləmə proqramından istifadə etməlisiniz, lakin bir çox veb icarə xidməti bu xidməti də təklif edir.
- Birbaşa saytınızda olan səhifələrə və ya şəkillərə keçid edərkən tam ünvanı istifadə etməlisiniz. Məsələn, domen adınız www.chuyengiahtmlsieudang.comsa, o zaman mətn bu etiketlərdədir "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html" ilə əlaqə quracaq
CSS ilə üslub əlavə edin. HTML səhifəniz bir az monoton görünürsə, rənglər, fərqli şriftlər əlavə etmək və elementlərin yerləşdirildiyi yerə daha yaxşı nəzarət etmək üçün CSS əsaslarını öyrənməyə çalışın. Bir CSS "stil cədvəlini" bir HTML səhifəsinə bağlamaq, verilmiş bir etiket daxilində bütün mətnlərin tərzini avtomatik olaraq düzəldərək dərhal dəyişikliklər etməyə imkan verəcəkdir. Əsas formatlaşdırma qatı ilə bir az burada oynaya bilər və ya HTML Dog's CSS Tutorial-da daha ətraflı təlimlərə dalmaq olar.
Veb saytınıza JavaScript əlavə edin. JavaScript, HTML səhifələrinizə çox funksionallıq əlavə etmək üçün istifadə olunan bir proqramlaşdırma dilidir. JavaScript əmrləri başlanğıc və bitiş etiketleri arasında yerləşdirilir , və interaktiv düymələr əlavə etmək, riyaziyyat problemləri hesablamaq və daha çox şey üçün istifadə edilə bilər. Daha çoxunu w3c nümunələrində öyrənin. reklam

Məsləhət

Bu təlimatda istifadə edilən sənəd növü bəyannaməsi (istifadə olunan Sənəd Tipi Bəyannaməsi) asan bir format olan "boş HTML 4.0.1 keçid" (HTML 4.0.1 sıx keçid deyil). təcrübəsizlərin istifadəsi üçün. İstifadə edin () brauzerin tövsiyə olunan (az istifadə olunsa da) standart üslub olan ciddi bir HTML 5 formatında tərtib etməsinə alternativ.

Xəbərdarlıq

HTML-nin məqsədi məzmunu qlobal formatda saxlamaqdır. Arxa plan rəngi və elementlərin dəqiq yerləşdirilməsi kimi veb saytınızın təqdimatına nəzarət yoxdur. Hələ də bunu etməyə imkan verən etiketlər mövcud olsa da, daha çox nəzarət olunan və tutarlı bir veb sayt yaratmaq üçün CSS-dən istifadə etmək yaxşıdır.

Nə lazımdır

NotePad və ya TextEdit kimi sadə bir mətn redaktoru
Internet Explorer və ya Mozilla Firefox kimi bir veb brauzer
(Könüllü) Adobe Dreamweaver, Aptana Studio və ya Microsoft Expression Web kimi bir HTML redaktoru