Нүцгэн ясны вэб хуудас: 10 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:04

Өнөөдөр бид эхнээс нь маш энгийн, нүцгэн ястай вэб хуудас бүтээх гэж байна. Бид HTML элементүүдийн талаар, таны вэб хуудсыг загварчлах (өнгө, фонт, зэрэгцүүлэлт гэх мэт), эцэст нь вэб хуудсандаа хэрхэн зураг оруулах талаар ярилцах болно!

Энэхүү зааварчилгааны төгсгөлд та вэб хуудсыг эхнээс нь үүсгэх үндсэн ур чадвар эзэмших бөгөөд кодлох нь санагдаж байгаа шиг хэцүү биш болохыг олж мэдэх болно.

Алхам 1: Notepad ашиглах

Бид цонхны Notepad програмыг ашиглан анхны вэб хуудсаа бүтээх гэж байна. Хэдийгээр ямар ч текст засварлагч үүнийг хийх боломжтой боловч notepad нь Windows машин дээр урьдчилан суулгагдсан байдаг тул энэ нь маш сайн эхлэх цэг юм.

Тэмдэглэлийн дэвтэр нээхийн тулд дэлгэцийн зүүн доод буланд байгаа хайлтын мөрөнд очоод "Notepad" гэж бичнэ үү. Дараа нь хайлтын үр дүнд гарч ирэх "Notepad" програмыг сонгоно уу. Шинэ цонх нээгдэх ёстой.

Алхам 2: Үндсэн HTML баримтын модыг нэмэх

Таны вэб хөтөч (Chrome, Firefox, Edge, Internet Explorer, Safari …) таны вэб хуудсыг боловсруулж, харуулахын тулд бүх вэб хуудас нь араг ясны стандарт бүтэцтэй байх ёстой.

Үүнийг html баримтын мод гэж нэрлэдэг. Notepad дээр дэлгэцийн зураг дээр харуулсан шиг html "element" эсвэл "tags" гэж бичээрэй. Та мөн хуулж, буулгахад чөлөөтэй болно.

Алхам 3:.html хуудас болгон хадгалах

Бид Notepad дээр html -ийн үндсэн бүтэцтэй болсон тул ямар ч ажлыг алдахгүйн тулд зааварчилгааны дагуу явж байхдаа өөрчлөлтүүдээ харахын тулд үүнийг хадгалцгаая.

1. 'Файл'> 'Хадгалах …' -г сонгоно уу (Дэлгэцийн зураг 1)
2. Файлын төрлийг 'Бүх файлууд' болгон өөрчилнө үү (Дэлгэцийн зураг 2)
3. Файлдаа өөрийн хүссэн нэрээ өгөөрэй. Баримт бичгийг компьютер дээрээ хаана хадгалж байгаагаа дараа нь нээх боломжтойг анхаарна уу. ТАЙЛБАР: Энэ файлыг хадгалах хамгийн чухал хэсэг бол файлын нэрийн төгсгөлд ".html" хавсаргах явдал юм. Энэ нь таны компьютерийг вэб хуудас гэж таних боломжийг олгоно. Тиймээс хэрэв та өөрийн файлыг "my_webpage" гэж нэрлэхийг хүсвэл түүний төгсгөлд.html -ийг нэмж оруулаарай. "my_webpage.html"

Алхам 4: Вэб хуудсандаа гарчиг нэмэх

Тиймээс манай вэб хуудсыг тайлбарлах, харуулахад вэб хөтчүүдэд шаардлагатай үндсэн html бүтэцтэй боловч бидэнд ямар ч контент байхгүй байна. Үүнийг өөрчилье!

Бидний хийх ёстой хамгийн эхний зүйл бол вэб хуудсандаа Гарчиг өгөх явдал юм. Ихэнх вэб хуудсуудын ихэнх нь гарчигтай байдаг. Энэ бол таны вэб хөтөчийн таб дээр харагддаг зүйл юм (дэлгэцийн агшинг үзнэ үү). Би вэб хуудсандаа "Тэйлорын вэбсайт" гэсэн нэрийг өгөх гэж байна. Үүнийг хийхийн тулд бид 'title' элемент нэмэх хэрэгтэй.

Тэйлорын вэбсайт

Энэ үед та шошго бүр "нээх", "хаах" гэсэн хаягтай болохыг анзаарах болно. Гэх мэт

ба.

Энэ нь гарчиг хаанаас эхэлж, хаана дуусахыг олж мэдэх явдал юм. Бараг бүх html хаягууд үүнийг дагаж мөрддөг боловч зарим үл хамаарах зүйлүүд байдаг.

Алхам 5: Вэб хуудсандаа контент нэмэх

За, манай вэб хуудасны Гарчиг байгаа боловч бидэнд одоогоор ямар ч бодит агуулга байхгүй байна. Ухаан нэмье!

Бид вэб хуудсандаа 'title' элемент ашиглан гарчиг нэмсэн. Гарчиг элемент болох 'h1' элементийг ашиглан вэб хуудсандаа анхаарал татахуйц том толгой өгье.

Тэйлорын вэбсайт

Миний вэб хуудсанд тавтай морил

Алхам 6: Бидний өөрчлөлтийг одоо хүртэл харах

Бидэнд гарчиг бий, бидэнд зарим агуулга байгаа, энэ нь хэр хол явж байгааг вэб хуудсаараа шалгацгаая.

1. Файлаа тэмдэглэлийн дэвтэрт хадгална уу
2. Файлаа хадгалсан газар руу очоод давхар товшино уу. Энэ нь таны анхдагч вэб хөтөч дээр автоматаар нээгдэх ёстой. Сайхан харагдаж байна!

Алхам 7: Догол мөрийн шошго нэмэх

Бидэнд гарчиг, гарчиг байгаа, одоо дахиад хэдэн текст бүхий догол мөр нэмж оруулъя. Параграфын элементийн нэр нь 'p' юм. Үүнийг хэрхэн ашиглахыг доороос харж болно.

Тэйлорын вэбсайт

Миний вэб хуудсанд тавтай морил

Өнөөдөр бид энэ маш энгийн вэб хуудсыг хэрхэн бүтээх талаар сурах болно!

Тэмдэглэл: Та хүссэн үедээ тэмдэглэлийн дэвтэр хадгалж, файлыг нээх замаар өөрчлөлтөө харах боломжтой.

Алхам 8: Бага зэрэг өнгө өг

Манай вэб хуудас яг одоо эргэлдэж байгаа боловч энэ нь маш энгийн юм. Параграфын шошгондоо өнгө оруулъя!

Бид 'p' таг дээр 'style' шинж чанарыг нэмж оруулснаар өөр өөр элементүүдийг өнгөөр будаж болно.

Тэйлорын вэбсайт

Миний вэб хуудсанд тавтай морил

Өнөөдөр бид энэ маш энгийн вэб хуудсыг хэрхэн бүтээх талаар сурах болно!

Алхам 9: Зураг нэмэх

Зураггүй вэбсайт гэж юу вэ? Вэбсайтдаа зураг оруулъя!

Эхний алхам бол танд таалагдсан зургийг олох явдал юм. Алтан ретривер хайхын тулд би Google зургийг ашигласан. Зургийг дээш татаж, url нь.jpg,.png,.gif,-j.webp

Та зургаа сонгосны дараа бид үүнийг 'img' шошго ашиглан html хуудсанд оруулах хэрэгтэй. Миний зураг бол:

Үүнийг 'src' шинж чанартай 'img' таг ашиглан хуудсандаа нэмээрэй.

Тэйлорын вэбсайт

Миний вэб хуудсанд тавтай морил

Өнөөдөр бид энэ маш энгийн вэб хуудсыг хэрхэн бүтээх талаар сурах болно!

Алхам 10: Эцсийн бүтээгдэхүүнийг үзэх

Notepad файлыг хадгалаад эцсийн бүтээгдэхүүнийг нээнэ үү. Та вэб хуудсаа харах ёстой!