Направете уебсайт за кафене: 9 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-02-01 14:39

В тази инструкция ще ви покажа как да направите прост уебсайт, показващ кафенета близо до вас, като използвате Google Maps, HTML и CSS

Консумативи

Компютър

Текстов редактор (използвам Atom)

Wi -Fi връзка

Стъпка 1: Изберете текстов редактор

Използвам Atom, който може да бъде изтеглен от тук. След като бъде изтеглен, отворете го, създайте нов проект

Стъпка 2: Създайте своя нов проект

1. Отворете Atom
2. Намерете файл
3. Под файла щракнете върху нов
4. в долния ляв ъгъл (mac) ще има бутон за създаване на нова папка
5. дайте име на папката си „Уебсайт на картата“
6. Натиснете отворен долу вдясно

Стъпка 3: Създайте своя Index.html

1. Добавете нов файл във вашата папка (В atom щракнете с десния бутон върху папката и натиснете new)
2. Дайте име на този файл „Index.html“
3. Добавете тази основна HTML структура, Това се използва във всеки HTML проект:

Стъпка 4: Вземете вашата карта

1. Посетете Google maps тук: Google Maps
2. Търсете кафе
3. трябва да получите всички кафенета във вашия район
4. щракнете върху трите реда до кафето
5. намерете споделяне или вграждане на карта
6. изберете карта за вграждане
7. Изберете размера на картата (използвах Голяма) и финализирайте местоположението си
8. натиснете копиране на HTML

Стъпка 5: Добавете към уебсайта

1. Върнете се към HTML файла.
2. между двата маркера "" вмъкнете този код:

'

МАГАЗИНИ ЗА КАФЕ ВЪВ ВАС

„ВМЕСТЕН КОД КЪМ GOOGLE MAPS“

'

Стъпка 6: Визуализация

Това е първата част свършена!

запишете файла и го намерете на компютъра си, щракнете двукратно върху него и той ще се отвори във вашия браузър по подразбиране, за да бъде визуализиран.

Стъпка 7: Направете го да изглежда по -добре

1. Между двата маркера „“добавете „Кафенета близо до мен“
2. Добавете нов файл по същия начин, по който сте създали „Index.html“, но го наречете „Style.css“
3. обратно на вашия HTML файл, напишете този код над заглавието си,"
4. Отидете в google images и изтеглете сладък клипарт от чаша кафе
5. Добавете изображението към папката, съдържаща останалите ни файлове
6. в CSS файла напишете следния код: 'body {
7. background-image: url (ИМЕТО НА ИЗОБРАЖЕНИЕТО);
8. размер на фона: корица;
9. }'

Стъпка 8: Как да изглежда по -добре Pt2

1. ако запазим и визуализираме сега, можем да видим, че фонът на уебсайтовете вече е облицован с нашите чаши за кафе
2. За съжаление е трудно да прочетем заглавието ни
3. Така че в CSS, под 'body {}' добавете следния код: h1 {
4. background-color = rgb (255, 255, 255);
5. font-size = 40px;
6. }

Стъпка 9: РЕВИЗИЯ

Това е! Готови сте. Научихте основите на HTML, CSS и вградения код, Браво. Можете да редактирате кода, така че да отговаря на вашия вкус и да го накара да показва карта на всичко, което искате. Оттогава можете да продължите изграждането на уебсайта си и да се подобрявате завинаги.