Мазмұны:

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

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

Бейне: Кофехананың веб -сайтын табыңыз: 9 қадам
Бейне: Сілтемелерді толтырудың 5 қадамы Blue Ai 2024, Желтоқсан
Anonim
Кофе дүкенін табатын сайт жасаңыз
Кофе дүкенін табатын сайт жасаңыз

Бұл нұсқаулықта мен сізге сізге Google Maps, HTML және CSS көмегімен кофе дүкендерін көрсететін қарапайым веб -сайт жасауды көрсетемін.

Жабдықтар

Компьютер

Мәтіндік редактор (мен Atom қолданамын)

Wi -Fi байланысы

1 -қадам: Мәтіндік редакторды таңдаңыз

Мәтіндік редакторды таңдаңыз
Мәтіндік редакторды таңдаңыз

Мен Atom қолданамын, оны мына жерден жүктеуге болады. Жүктелгеннен кейін ол жаңа жоба жасайды

2 -қадам: Жаңа жобаңызды жасаңыз

  1. Atom ашыңыз
  2. Файлды табыңыз
  3. Файлдың астында жаңасын басыңыз
  4. төменгі сол жақта (Mac) жаңа қалта жасау батырмасы болады
  5. қалтаңызға «Веб -сайт картасы» атауын беріңіз
  6. Төменгі оң жақта ашуды басыңыз

3 -қадам: Index.html жасаңыз

Index.html жасаңыз
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 және ендірілген код негіздерін үйрендіңіз, жақсы. Сіз өзіңіздің талғамыңызға сәйкес келетін кодты өңдей аласыз және қалаған нәрсенің картасын көрсете аласыз. Содан кейін сіз өзіңіздің веб -сайтыңызды құруды жалғастыра аласыз және үнемі жетілдіре аласыз.

Ұсынылған: