1. Відкрийте редактор коду. Створіть
новий файл, збережіть його під
назвою “index.html” у теці “site”.
2. Уведіть базову
структуру HTMLсторінки наступного вигляду
<!DOCTYPE
html>
<html
lang="uk">
<head>
<title> </title>
<meta charset="utf-8">
</head>
<body>
</body>
Примітка: перший рядок – це інструкція для браузера, з якою
версією мови розмітки він буде працювати (ми орієнтуємось на HTML5), другий рядок – визначає мову сайту (uk- українська) і
нарешті 5 рядок – визначає кодування HTML-сторінки, його необхідно вказувати, для правильного
відображенням тексту браузером . Наразі найбільш поширене кодування – UTF-8.
3. Уведіть назву сайту між відкриваючим та закриваючим
тегом <title>, наприклад “My site” . встановіть вказівник миші після відкриваючого тегу <body>
4. Почніть
заповнення контенту з тегу <header>
Уведіть наступний
код:
<header >
<h1>Main
Header – Name of site</h1>
<h2>
Sub header – Topic of site </h2>
</header>
5. Створіть меню за
допомогою маркованого списку <ul> наступного
вигляду:
<nav >
<ul>
<li><a
href="index.html">Home</a></li>
<li><a
href="info.html">About</a></li>
<li><a
href="gallery.html">Gallery</a></li>
<li><a
href="form.html">Contacts</a></li>
</ul>
</nav>
6. Відкрийте генератор беззмістовного
тексту Lorem ipsum. Сгенеруйте два-три абзаци. Додайте їх у створений файл, виокреміть кожен
абзац відкриваючим та закриваючим тегами <p>.
7. Додайте
футер з наступним кодом
<footer>
<p>Copyright
2019</p>
</footer>
8. Збережіть файл.
9. Збережіть
створений файл під іменем “info.html” у теці “site”. Додайте
у новостворений файл додатково п’ять-сім абзаців,
згенерованих генератором беззмістовного тексту.
10. Збережіть файл index.html під іменем
“form.html” у теці “site”. Залиште тільки
один абзац згенерованого
тексту.
11. Закрийте редактор коду.
Увійдіть у теку “site”. Коли ви натиснете на index.html, у вас відкриється сторінка
браузером, обраним на вашому комп’ютері за замовченням.
12. Перейдіть за допомогою команд меню на сторінки About, Contacts, Home.
Завдання для самостійного опрацювання:
Створіть веб-сторінки сайту «7 чудес
України», виходячи зі виществоренной структури. Для наповнення контенту використовуйте тексти
з Інтернету.
Немає коментарів:
Дописати коментар