Анхны вэбсайт үүсгэх: 10 алхам

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

Энэхүү гарын авлагад та холбосон загварын хуудас, интерактив javascript файлтай үндсэн вэб хуудас үүсгэхийг сурах болно.

Алхам 1: Фолдер үүсгэх

Бидний үүсгэх файлуудыг хадгалахын тулд фолдер үүсгэнэ үү. Үүнийг хүссэнээрээ нэрлэхээс бүү эргэлзээрэй, хаана байгааг нь санаарай, учир нь бид дараа нь файлуудаа хадгалах болно.

Алхам 2: Анхны файлаа үүсгэх

Өөрийн дуртай текст засварлагчийг нээнэ үү. Миний хувьд Windows 10 -ийн суулгасан дэвтэрийг ашиглах болно.

Энэ бол танд зааж өгсөн миний анхны вэб хуудас юм

Үүнийг HTML таг гэж нэрлэдэг. Энэ нь Толгой 1 гэсэн үгийн товчлол юм. Энэ хаягийн дотор оруулсан текст хуудсан дээр гарчиг хэлбэрээр гарч ирнэ. Үүнийг ингэж нээж, хаадаг. Хоёр хаягийн хоорондох текст нь таны вэб хөтөч дээр харагдах болно. Энэ хэсэгт бид энэ алхамыг x -д дурдах шинж чанарыг өгч байна. Үүнийг хийсний дараа үргэлжлүүлээд 1 -р алхам дээр хийсэн фолдероо index.html болгон хадгална уу.

Алхам 3: Файлыг нээнэ үү

Бид үүсгэсэн фолдер доторх файл руу шилжиж дууссаны дараа файл дээр хулганы баруун товчийг дараад "нээх" сонголтыг сонгоод ашигладаг вэб хөтчийг сонгоно уу. Миний хувьд энэ бол google chrome юм. Одоо болтол таны шаргуу хөдөлмөрийг хараарай!

Алхам 4: Хуудсыг загварчлах

Үүнтэй адил манай вэбсайт нэлээд энгийн байна. Бид зарим зүйлийг амтлахын тулд каскад хэлбэрийн хэв маягийн хуудсыг нэмж оруулах гэж байна. Шинэ текст файл үүсгээд дараахийг бичнэ үү.

h1 {өнгө: цэнхэр; текстийг зэрэгцүүлэх: төв;}

Бид энд хөтөчдөө хэлж байгаа зүйл бол h1 хаягнаас (2 -р алхамаас олж мэдсэн) элементийг олж, цэнхэр өнгө өгч, хуудасны төвд тэгшлэх явдал юм. Энэ файлыг 1 -р алхам дээр үүсгэсэн фолдерт style.css хэлбэрээр хадгална уу.

Алхам 5: Style.css -ийг өөрийн Index.html -тэй холбоно уу

Энэ үед бид бие биенээ мэдэхгүй хоёр тусдаа файлтай байна. Бид index.html файлдаа style.css файлтай болохыг хэлээд зарим загварыг авах хэрэгтэй. Үүнийг хийхийн тулд бид index.html файлаа текст засварлагч дээрээ нээх бөгөөд h1 хаягийнхаа дээр линкийн шошго гэж нэрлэгдэх зүйлийг нэмж оруулах болно. Холбоосны шошго нь нэрээ дурдсан шиг хийдэг бөгөөд энэ нь ямар нэгэн зүйлтэй холбодог. Манай тохиолдолд загварын хуудас. Үргэлжлүүлээд бичээрэй. Холбоосны хаяг нь өөрөө хаагддаг таг тул төгсгөлийн тэмдэглэгээ шаардлагагүй болно. Rel гэдэг нь харьцаа гэсэн утгыг илэрхийлдэг бөгөөд href нь бидний дурдсан гадаад файл хаана байгааг харуулдаг. Одоо index.html файлыг хадгална уу.

Алхам 6: Шинээр загварчилсан хуудсаа үзээрэй

3 -р алхамыг дахин үзэж, вэб хуудсаа дахин ачаалж, өөрчлөлтүүд хэрхэн тусгагдаж байгааг хараарай.

Алхам 7: Товчлуур үүсгэх

Текст засварлагч дээрээ index.html файлыг дахин нээгээд дараах зүйлийг бичнэ үү.

Намайг дарна уу!

мөн файлыг хадгална уу. Энэ нь хуудсан дээр товчлуурын элементийг үүсгэдэг. Хадгалсны дараа 3 -р алхамд үзүүлсэн шиг файлыг дахин нээгээд товчлуур нь хуудасны зүүн доод талд байгаа эсэхийг шалгаарай.

Алхам 8: Javascript файлаа үүсгэнэ үү

Эцэст нь бид javascript файлаа үүсгэх гэж байна. Энэ нь манай сайтыг интерактив болгоно. Текст засварлагчийг нээгээд дараахь зүйлийг бичнэ үү.

document.querySelector ("#товч"). addEventListener ("дарах", функц () {

document.querySelector ("#heading"). innerText = "Гарчгийг яаралтай өөрчлөх"

})

Бидний хийж буй зүйл бол баримт бичгээс ID товчлуур бүхий элементийг олж өгөхийг хүсэх бөгөөд товчлуурыг дарах үйлдлийн хариуг ID -ийн гарчигтай "Текстийг өөрчлөх. ". Файлыг 1 -р алхам дээр бидний үүсгэсэн хавтсанд button.js хэлбэрээр хадгална уу.

Алхам 9: Javascript болон индекс файлуудаа холбоно уу

Style.css файлыг ашигласны адил бид javascript файлынхаа талаар index.html файлдаа хэлэх хэрэгтэй. Бидний өнөөг хүртэл хийсэн бүх зүйлийн доод талд дараахь зүйлийг бичнэ үү.

Скриптийн шошго нь манай хуудасны үйл ажиллагааг хангахын тулд скрипт хэл (манай тохиолдолд javascript) нэмэх боломжийг олгодог. Бид button.js нэртэй файлыг хайж, доторх бүх кодыг индекс файлдаа нэмэхийг хэлье. Үүнийг оруулсны дараа файлыг хадгалаад 3 -р алхамд үзүүлсэн шиг файлыг дахин нээнэ үү.

Алхам 10: Шинээр үүсгэсэн товчлуурыг туршиж үзээрэй

Одоо үргэлжлүүлээд товчлуур дээр дараад гарчиг хэрхэн өөрчлөгдөж байгааг үзээрэй!

Баяр хүргэе !! Та одоо анхны интерактив вэб хуудсаа үүсгэсэн байна! Та одоо мэдэж байгаа зүйлээ мэдэж байж үүнийг хэр зэрэг ахиулж чадна гэж бодож байна?