Үй тапшырмасы | HTML

Иш мейкиндигин даярдоо

Тапшырмаларды аткара баштаардан мурун, иш жайыңызды туура орнотуңуз. Ушул кадамдарды аткарыңыз:

1

Сайттарыңыз үчүн папка түзүңүз

Проводникти (Windows) же Finderди (Mac) ачыңыз → Жумуш тактасына өтүңүз → чычканы менен чыкылдатыңыз → Түзүү → Папка → аны "Менин сайттарым" деп атаңыз

2

Sublime Text орнотуңуз

расмий сайтынан акысыз жүктөп алыңыз → 2 мүнөттө орнотуңуз

3

Папканы Sublime Textте ачыңыз

Sublime Textти иштетиңиз → File → Open Folder → "Менин сайттарым" папкасын тандаңыз

4

eda.html файлын түзүңүз

Sublime Textтин каптал панелинде папканы чычканы менен чыкылдатыңыз → New File → файлды "eda.html" деп атаңыз

Менин_сайттарым/
├── hello.html
├── eda.html
├── music.html
└── about.html

Тезирээк иштөө үчүн кеңештер:

<html> деп жазыңыз жана Tab басыңыз → Sublime Text бүт структураны автоматтык түрдө түзөт
Көп сактаңыз: Ctrl+S (Windows) же Cmd+S (Mac)
Натыйжаны браузерде текшериңиз: файлды эки жолу чыкылдатып ачыңыз

1

Тапшырма 1: Дүйнөгө саламдашуу

Мақсаты: HTMLдин негизги структурасын өздөштүрүү
Эмне түзөсүз: Саламдашуу менен эң жөнөкөй баракча

1

hello.html файлын түзүңүз

"Менин сайттарым" папкасында hello.html аттуу жаңы файл түзүңүз

2

HTML структурасын жазыңыз

Документтин негизги структурасын кошуңуз

3

Наама жана контент кошуңуз

Саламдашуу текстин жана өзүңүз жөнүндө маалыматты киргизиңиз

hello.html үчүн коддун мисалы:

<!DOCTYPE html>

<html lang="ky">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Менин саламдашуум</title>

</head>

<body>

  <h1>Салам, дүйнө!</h1>

  <h1>Салам, мен [атыңыз]!</h1>

  <p>Бул менин биринчи HTML баракчам. Мен веб-иштеп чыгууну үйрөнүп жатам!</p>

  <p>Бүгүн мен HTMLдин негиздерин билдим жана биринчи баракчамды түздүм.</p>

</body>

</html>

Кандай көрүнүшү керек:

"Салам, дүйнө!" деген чоң наамасы жана бир нече абзац тексти бар баракча.

2

Тапшырма 2: Менин сүйүктүү тамамым

Мақсаты: Сүрөттөр жана шилтемелер кошууну үйрөнүү
Эмне түзөсүз: Сүйүктүү тамам жөнүндө баракча

1

eda.html файлын түзүңүз

Же мурун түзүлгөн файлды колдонуңуз

2

Сүрөт кошуңуз

Google'до тамамдын сүрөтүн табыңыз → чычканы менен → Сүрөттүн дарегин көчүрүү

3

Баяндама жазыңыз

Эмне үчүн сизге бул тамам жакты?

eda.html үчүн коддун мисалы:

<!DOCTYPE html>

<html>

<head>

  <title>Маргарита пиццасы</title>

</head>

<body>

  <h1>Маргарита пиццасы</h1>

  <img src="https://example.com/pizza.jpg" alt="Маргарита пиццасы" width="400">

  <p>Бул менин сүйүктүү тамамым, анткени ал жөнөкөй жана даамдуу.</p>

  <p>Помидордун, моцарелланын жана базиликтин айкалышы - кемчиликсиз!</p>

  <a href="https://www.russianfood.com/recipes/recipe.php?rid=124567">Маргарита пиццасынын рецепти</a>

</body>

</html>

3

Тапшырма 3: Топ-5 сүйүктүү ырларым

Мақсаты: Тизимдерди өздөштүрүү
Эмне түзөсүз: Музыкалык топуңуз менен баракча

music.html үчүн коддун мисалы:

<!DOCTYPE html>

<html>

<head>

  <title>Менин сүйүктүү ырларым</title>

</head>

<body>

  <h1>Менин сүйүктүү ырларым</h1>

  <ol>

    <li>Queen - Bohemian Rhapsody</li>

    <li>The Beatles - Yesterday</li>

    <li>Michael Jackson - Billie Jean</li>

    <li>Madonna - Like a Prayer</li>

    <li>Led Zeppelin - Stairway to Heaven</li>

  </ol>

  <p>Бул ырлар мени ар күнү рухтандырат!</p>

</body>

</html>

4

Тапшырма 4: Мен жөнүндө

Мақсаты: Бардык үйрөнгөндөрдү бириктирүү
Эмне түзөсүз: Жеке визитка баракчасы

about.html үчүн коддун мисалы:

<!DOCTYPE html>

<html>

<head>

  <title>Мен жөнүндө</title>

</head>

<body>

  <h1>Александр Петров</h1>

  <img src="myphoto.jpg" alt="Менин сүрөтүм" width="300">

  <p>Салам! Мен жаңы баштаган веб-иштеп чыгуучумун.</p>

  <p>Азыр HTML, CSS жана JavaScript үйрөнүп жатам.</p>

  <h2>Менин кызыкчылыктарым:</h2>

  <ul>

    <li>Программалоо</li>

    <li>Фотография тартуу</li>

    <li>Саякаттоо</li>

    <li>Китеп окуу</li>

  </ul>

  <a href="https://github.com/myname">Менин GitHub'ым</a>

</body>

</html>

Аткаруу жыйынтыктары

Куттуктайбыз! Сиз бардык тапшырмаларды аткардыңыз. Азыр сизде бар:

4 даяр HTML баракчасы
HTML менен иштөөнүн практикалык даамдары
Өз долбоорлоруңуз менен папка
Sublime Text менен иштөө тажрыйбасы

Башкы бетке кайтуу