Кофе дүкөнүн табуучу вебсайт жасаңыз: 9 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-02-01 14:41

Бул Нускамада мен сизге Google Карталарын, HTML жана CSSти колдонуп, жаныңыздагы кофе дүкөндөрүн көрсөтүүчү жөнөкөй вебсайтты кантип жасоону көрсөтөм.

Жабдуулар

Компьютер

Текст редактору (мен Atom колдоном)

Wifi байланышы

1 -кадам: Текст редакторун тандаңыз

Мен Атомду колдоном, аны бул жерден көчүрүп алса болот. Жүктөлүп алынгандан кийин, ал жаңы долбоорду түзөт

2 -кадам: Жаңы долбооруңузду түзүңүз

1. Ачык Атом
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. background-image: url (СҮРӨТТҮН АТЫ);
8. background-size: cover;
9. }'

8 -кадам: Аны жакшыраак кылуу Pt2

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

9 -кадам: РЕВИЗИОН

Дал ушул! Сен бүттүң. Сиз HTML, CSS жана камтылган коддун негиздерин үйрөндүңүз, молодец. Сиз кодду өзүңүздүн табитиңизге ылайыкташтырып, каалаган нерсеңиздин картасын көрсөтө аласыз. Андан кийин сиз веб -сайтыңызды куруу саякатын уланта аласыз жана түбөлүккө жакшыра аласыз.