Yangi boshlanuvchilar uchun o'z veb -saytingizni yaratish: 5 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:25

Siz kompyuter dasturchisi bo'lishni orzu qilganmisiz yoki veb -saytdan foydalanganmisiz, buni hammamiz bilamiz, axborot texnologiyalari biznesning tayanchiga aylandi. Dastlab dasturlash biroz qo'rqinchli bo'lib tuyulsa -da, mening maqsadim sizga veb -dizaynning asosiy asoslarini o'rgatishdir, shunda ushbu darsdan so'ng siz o'zingizning shaxsiy veb -sahifangizni yaratishingiz mumkin. Yo'qolgan holda, keling!

Ta'minotlar

• Macintosh yoki Windows kompyuteri (Linux distributivlaridan ham foydalanish mumkin bo'lsa -da, hozircha ularni o'tkazib yubormoqdaman, chunki bu yangi boshlanuvchilar uchun kirish).
• Siz tanlagan matn muharriri (Windowsda Notepad, Mac -da TextEdit) yoki sizning IDE -ni tanlash. O'z tajribamda, men Visual Studio kodini o'zim uchun eng yaxshi deb topdim, shuning uchun men uni bu erda tekshirishni maslahat beraman: https://code.visualstudio.com/ uning barcha OS platformalarida ishlashini aytmaslik kerak.

1 -qadam: teglar va biroz tarix

Matn muharriri yoki IDE ni tanlashga qaror qilganingizdan so'ng, asoslardan boshlaylik.

Ishoning yoki ishonmang, HTML yoki HyperText Markup Language deyarli 30 yildan beri mavjud va har yili tilda tobora takomillashib bormoqda. Endi siz so'rashingiz mumkin, brauzer ekranda nimani qo'yish kerakligini qanday izohlaydi? Bu bir necha qismda amalga oshiriladi:

Hujjatlarni HTML formatlash oson. Sizda bosh va tana deb nomlangan ikkita bo'lim bor. Veb -sayt boshida foydalanuvchi ko'rmaydigan kod mavjud. Bu uslublar jadvallarini bog'lash va sayt to'g'ri ko'rsatilishi uchun zarur bo'lgan boshqa bitlarni e'lon qilish uchun ishlatiladi. Boshning orqasidan, tanasi, xuddi aytilganidek, veb -sayt tanasi. Bu erda siz o'z ovozingizni gapirishingiz va tinglovchilarga ajoyib HTML ko'nikmalaringizni ko'rsata olasiz! Endi tanaga matn kiritish va uni xohlaganingizcha ko'rsatish oson emas, lekin biz teglar deb ataydigan narsalardan foydalanish deyarli oson.

Bu erda ba'zi asosiy HTML teglar:

• sarlavha - bu sahifaning sarlavhasi nima ekanligini brauzerga aytib berish uchun ishlatiladi. Bu, shuningdek, veb -sahifaning yorlig'iga qaraganingizda ko'rinadi.
• h1, h2, h3, h4 - har xil sarlavha o'lchamlari uchun ishlatiladi, h1 eng katta va h4 eng kichik. Bu haqda keyingi bo'limda batafsilroq to'xtalaman.
• p - paragraf, matn paragraflarini yozish uchun ishlatiladi. Qog'ozdagi paragraflar kabi.
• br - tanaffus, bu matnga mos ravishda tanaffus qo'shadi.
• a - bosish mumkin bo'lgan havola kabi boshqa sahifalarga havolalar yaratish uchun ishlatiladi.
• img - tasvirni veb -sahifaga bog'lash uchun ishlatiladi.
• ul, ol, li - tartiblanmagan ro'yxatlar, tartiblangan ro'yxatlar va ro'yxat elementlari.
• - oxirgi foydalanuvchiga ko'rinmaydigan kodga sharhlar kiritish uchun ishlatiladi.

Va bu erda ba'zi CSS teglari (ingl.):

• rang - ma'lum bir elementga yoki veb -sahifada ma'lum rangni belgilash uchun ishlatiladi.
• font-size-sahifadagi shrift hajmini o'zgartirish uchun ishlatiladi.
• background-color-ma'lum bir element yoki butun sahifaning fon rangini o'zgartirish uchun ishlatiladi.

Agar men o'zimni yo'qotib qo'ygandek his qilsang, lekin xavotir olmasang, qisqa vaqt ichida o'zingni qo'lga olasan! Bundan tashqari, www.w3schools.com har qanday dasturlash savollaringiz uchun ajoyib manba. Ular, albatta, menga vaqtni ham tejashdi.

Aslida brauzer faylni qanday o'qishi oson. U satrma -bosqich ketadi va funktsiyani funktsiyaga ko'ra qayta ishlaydi. Belgilar kabi yorliqni e'lon qilish uchun ishlatiladi

kabi tegni yopish uchun ishlatiladi

. Bu juda muhim, aks holda brauzer to'xtab qolmaydi. O'rtasida

va

teglar - bu erda siz xohlagan narsani kiritasiz!

2 -qadam: muharrirni sozlash

Endi biz HTML veb -saytining asosiy elementlari haqida bir oz to'xtalib o'tdik, keling, sho'ng'ib, o'zimiz uchun sinab ko'ramiz. Keyingi qadamda men veb -saytni dasturlash uchun Visual Studio kodidan foydalanaman, lekin agar Notepad yoki TextEdit -dan foydalanish sizga qulayroq bo'lsa, kodning tartibi bir xil bo'ladi.

Notepad ichida:

• Notepad yordamida dastur bo'sh fayl bilan ishga tushadi, bu ishni boshlashni juda osonlashtiradi. Bu, shuningdek, VS kodidan foydalanish bilan solishtirganda bir necha qadam o'tishga imkon beradi. Faylni to'g'ri formatda saqlashdan boshlaylik.
• Fayl> Saqlash -ni bosing
• Faylingiz nomini kiriting, keyin.html yozing va Saqlash turi ostida barcha fayllarni tanlang. Saqlash -ni bosing.

VS kodi ichida:

• IDE -ning barcha xususiyatlaridan foydalanishning eng yaxshi usuli - bu faylni yaratish va IDE -ga qaysi turdagi fayl ekanligini aytib berishdan boshlash. Buni quyidagicha bajarish mumkin:
• Fayl> Yangi fayl -ni bosing
• Bo'sh fayl ochiladi
• Keyinchalik, faylni bo'sh bo'lsa ham, saqlashdan boshlamoqchisiz, chunki bu IDE -ga yakuniy mahsulot qanday fayl turini tushunishga imkon beradi. Saqlash paytida.html kengaytmasini fayl nomining oxiriga qo'shishni unutmang. Saqlash -ni bosing.

3 -qadam: rejalar

Fayl nomini.html faylini muvaffaqiyatli saqlaganingizdan so'ng, veb -sahifamiz uchun asos yaratishdan boshlaylik. HTML -sahifaning qolgan qismini yaratishni boshlashdan oldin, faylning qaysi asosiy qismlarini e'lon qilishimiz kerakligini yuqoridan eslang. Maslahat: sayt uchun ramka ishga tushganda! DOCTYPE HTML yorlig'i brauzerga o'qilayotgan fayl html fayli ekanligini bildiradi. Agar siz bitta faylda har xil turdagi kodlarga ega bo'lsangiz va tarjimonlar o'rtasida almashishni xohlasangiz, bu foydali bo'lishi mumkin. Ko'rsatmalarning ko'lami uchun biz bu haqda ko'p gapirmaymiz, lekin agar siz ushbu ko'rsatmalarni o'qib bo'lgandan keyin HTMLni ishlab chiqish haqida ko'proq bilishni xohlasangiz, uni tortib oling. Men eng yaxshi amaliyot uchun! DOCTYPE HTML tegini faylning yuqori qismiga joylashtiraman. Bilan ochishni va yopishni unutmang.

Bu erda dasturni boshlashdan oldin faylni saqlash juda qulay bo'ladi, endi IDE HTML fayli bilan ishlayotganini bilsa, u intellisense yordamida ifodani tugatadi va tasodifan tegni yopishni unutmaslik uchun takliflar beradi.. E'tibor bering, Notepad -dan foydalanayotganlar uchun intelisense IDE -da bo'lgani kabi mavjud emas. Biz bosh va tana teglarini quyidagicha kiritishdan boshlaymiz: (ikkinchi rasmga qarang).

Hujjatlarni sozlash tugallangach, biz musobaqalarga chiqishimiz va dam olishimiz mumkin!

4 -qadam: kod; Kod; Kod;

Biz yangi yaratilgan faylga sarlavha kiritishdan boshlashimiz mumkin. O'zingiz xohlagan narsani kiriting. Shuni esda tutingki, bu brauzer yorlig'ida paydo bo'ladi. Saytimiz uchun sarlavha kiritishdan ham boshlaylik. Buni qanday qilganimizni avvaldan eslang. Men h1/2/3/4 ni eshitdimmi? Bu to'g'ri!

Davom etishdan oldin, men o'z o'zgarishlarimni brauzerda qanday aks etayotganini real vaqtda ko'rishimiz uchun faylni brauzer oynasida ochishni foydali deb bilaman. Siz buni faylni saqlash uchun Fayl> Saqlash -ni bosish orqali qilishingiz mumkin, HTML -fayl saqlanadigan papkaga o'ting, men uchun bu ish stoli va faylni ochish uchun siz tanlagan brauzerdan foydalaning va bunga qaraysizmi?, bu sizning veb -sahifangiz! Eslatma: Men shaxsiy kompyuterimda Safari -ni o'zim tanlagan brauzer sifatida ishlataman, ammo veb -ishlab chiqishda Firefox - bu oltin standart standart brauzer, chunki u deyarli har bir veb -skript tili bilan ishlaydi.

Ko'rib turganingizdek, sarlavha yorliqda ko'rsatiladi, shuningdek h1 sarlavhasini ko'radi. Faylning ikkala brauzeri ham IDE yonida ochilishini afzal ko'raman, chunki siz IDE -ni o'zgartirganingizda va saqlaganingizda, o'zgarishlar darhol brauzerda bo'ladi.

HTML bilan qilishingiz mumkin bo'lgan turli xil narsalar bilan teglar qo'shib o'ynashga harakat qiling. Quyida ko'rib turganingizdek, Instructables.com saytiga bir nechta paragraflar, tanaffuslar, tashqi giperhavola, rasm qo'shdim (ular tashqi manbadan yoki. HTML fayli saqlanadigan katalog ichida bo'lishi mumkin), tartibga solinmagan ro'yxat, tartiblangan ro'yxat va oxirgi izohning misoli.

Agar siz rang va tartibga solish variantlarini qo'shishni xohlasangiz, faylning boshiga uslublar yorlig'ini kiritishingiz mumkin. Bu HTML -dan CSS -ga o'tadigan nuqta, lekin ingl. Men bir nechta qatorlarni kiritaman, shunda siz bu qanday ishlashini ko'rasiz. Asosan, CSS qanday ishlaydi, bu sizga HTML elementlarini kodni kiritish uchun qavslar yordamida {} funktsiyalar ichidagi HTML elementlarini boshqarishga imkon beradi.

5 -qadam: Yakuniy fikrlar

Va u erda sizda; Siz birinchi veb -sahifangizni muvaffaqiyatli yaratdingiz! Bu yangi boshlanuvchilar uchun qo'llanma bo'lgani uchun, men HTML bilan birinchi tajribangizni yoqimli o'tkazmoqchiman. O'z tajribamda o'rganishning eng yaxshi usuli - bu sho'ng'in qilish va qo'lda narsalarni sinab ko'rish, o'z kodingiz bilan nima qila olishingizni, shuningdek, kodingizni qanday buzish mumkinligini ko'rish. Bu yaxlitlikni oshiradi va kod qanday va nima uchun u qanday ishlashini yaxshiroq tushunishga yordam beradi. Esda tutingki, www. W3Schools.com - bu savollar uchun ajoyib manba va ular sizning kodingizni sinab ko'rish uchun brauzerda virtual qum qutisini ham taklif qilishadi. Umid qilamanki, siz biror narsani o'rgandingiz va baxtli kodlashni!