Кофе шоп байршуулах вэбсайт хийх: 9 алхам

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

Энэхүү зааварт би Google газрын зураг, HTML, CSS ашиглан ойролцоох кофе шопуудыг харуулсан энгийн вэбсайт хийхийг танд үзүүлэх болно.

Хангамж

Компьютер

Текст засварлагч (би Atom ашигладаг)

Wi -Fi холболт

Алхам 1: Текст засварлагчийг сонгоно уу

Би эндээс татаж авах боломжтой Atom ашигладаг. Татаж авсны дараа шинэ төсөл хийх болно

Алхам 2: Шинэ төслөө үүсгэнэ үү

1. Atom -ийг нээнэ үү
2. Файл хайх
3. Файлын доор шинээр дарна уу
4. зүүн доод хэсэгт (mac) шинэ хавтас хийх товчлуур байх болно
5. фолдероо '' Газрын зургийн вэбсайт '' гэж нэрлэнэ үү
6. Баруун доод буланд байгаа нээлттэй товчийг дарна уу

Алхам 3: Index.html -ээ үүсгээрэй

1. Фолдертоо шинэ файл нэмнэ үү (Атом дотор хавтасны баруун товчийг дараад шинээр дарна уу)
2. Энэ файлыг 'Index.html' гэж нэрлэнэ үү
3. Энэхүү HTML үндсэн бүтцийг нэмээрэй, үүнийг HTML төсөл бүрт ашигладаг:

Алхам 4: Газрын зургаа аваарай

1. Google газрын зургуудыг эндээс үзнэ үү: Google газрын зураг
2. Кофе хайх
3. Та ерөнхий газартаа бүх кофе шоп худалдаж авах хэрэгтэй
4. кофены хажууд байгаа гурван мөрийг дарна уу
5. хуваалцах эсвэл газрын зургийг оруулах
6. оруулах газрын зургийг сонгох
7. Газрын зургийн хэмжээг сонгоно уу (Би том хэмжээтэй байсан), байршлаа тодорхойлно уу
8. HTML хуулбарыг дарна уу

Алхам 5: Вэбсайтад нэмэх

1. HTML файл руу буцна уу.
2. хоёр "" хаягийн хооронд энэ кодыг оруулна уу:

'

ХАМГИЙН ОРДОНД КОФЕ ХУДАЛДАЖ БАЙНА

'GOOGLE ЗУРАГДСАН НЭГДСЭН КОД'

'

Алхам 6: Урьдчилан үзэх

Энэ нэг хэсгийг хийлээ!

Файлыг хадгалаад компьютер дээрээ олоорой, үүнийг давхар товшвол таны анхдагч хөтөч дээр нээгдэх болно.

Алхам 7: Илүү сайн харагдуулна уу

1. Хоёр "" шошгоны хооронд "Миний ойролцоох кофе шопууд" нэмнэ үү.
2. Шинэ файлыг 'Index.html' үүсгэсэнтэй адилаар нэмээрэй, гэхдээ үүнийг 'Style.css' гэж нэрлээрэй.
3. HTML файл дээрээ буцаж очоод энэ кодыг гарчгийнхаа дээр бичээрэй."
4. Google зураг руу ороод аяга кофены хөөрхөн клипийг татаж аваарай
5. Бидний үлдсэн файлуудыг агуулсан фолдерт дүрсийг нэмнэ үү
6. CSS файлд дараах кодыг бичнэ үү: 'body {
7. дэвсгэр зураг: url (ДҮРСИЙН НЭР);
8. дэвсгэр хэмжээ: бүрхэвч;
9. }'

Алхам 8: Илүү сайн харагдуулна Pt2

1. Хэрэв бид одоо хадгалж, урьдчилан харах юм бол вэбсайтын арын дэвсгэрийг манай кофены аяганд наасан байгааг харж болно
2. Харамсалтай нь бидний гарчгийг уншихад хэцүү байна
3. Тиймээс CSS дээр 'body {}' доор дараах кодыг нэмнэ үү: h1 {
4. дэвсгэр өнгө = rgb (255, 255, 255);
5. фонтын хэмжээ = 40 пиксел;
6. }

Алхам 9: ХЯНАЛТ

Тийм шүү! Чи дууссан. Та HTML, CSS болон суулгагдсан кодын үндсийг сурсан байна, Сайн байна. Та кодыг өөрийн амтанд нийцүүлэн өөрчилж, хүссэн зүйлийнхээ газрын зургийг үзүүлэх боломжтой. Үүнээс хойш та вэбсайтаа бүтээх аялалаа үргэлжлүүлж, үүрд сайжруулах боломжтой.