Кофехананың веб -сайтын табыңыз: 9 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-02-01 14:41

Бұл нұсқаулықта мен сізге сізге Google Maps, 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. background-image: url (КЕСІРМЕНІҢ АТАУЫ);
8. фон өлшемі: мұқаба;
9. }'

8 -қадам: оны жақсырақ ету Pt2

1. егер біз қазір сақтап, алдын ала қарасақ, онда веб -сайттардың фоны біздің кофе шыныаяқтармен қапталғанын көреміз
2. Өкінішке орай, біздің мақаланы оқу қиын
3. Сонымен, CSS -те 'body {}' астына келесі кодты қосыңыз: h1 {
4. background-color = rgb (255, 255, 255);
5. қаріп өлшемі = 40 пиксель;
6. }

9 -қадам: РЕВИЗИЯ

Міне бітті! Сіз аяқтадыңыз. Сіз HTML, CSS және ендірілген код негіздерін үйрендіңіз, жақсы. Сіз өзіңіздің талғамыңызға сәйкес келетін кодты өңдей аласыз және қалаған нәрсенің картасын көрсете аласыз. Содан кейін сіз өзіңіздің веб -сайтыңызды құруды жалғастыра аласыз және үнемі жетілдіре аласыз.