- Головна
- Уроки HTML
- Урок "html-верстка" (початковий рівень)
Урок "html-верстка" (початковий рівень)
Верстка html - створення html-файлу (макета) на основі малюнка-проекту сайту. Як зверстати найпростішу сторінку на html, можна дізнатись у статті...
Сайт створюється у кілька етапів.
Спочатку дизайнер у графічній програмі малює картинку - як він бачить майбутній сайт. При цьому він враховує побажання замовника сайту.
Дизайнер
1) підбирає кольори, фони, шрифти, малюнки,
2) вказує, де на сторінці мають розміщуватись меню, кнопки, текст, таблиці, малюнки і як вони мають виглядати.
Після цього верстальник дивиться на проект дизайнера і перетворює його у html-сторінку.
Верстальник при цьому використовує html, css та ін.
Наступний етап: front-end-розробник (фронт-енд-розробник) включає у сторінку програмні коди на java-script, які потрібні, щоб працювали кнопки, була анімація та ін.
Завершальний етап: back-end-розробник пише програмний код для обробки даних на сервері.
Усі учасники веб-розробки на усіх етапах співпрацюють між собою, щоб створити сайт, який повністю задовольнить замовника та його клієнтів.
Отже, верстальник перетворює малюнок (дизайн) на html-код. Він досліджує малюнок і пише код, який відобразить в броузері те, що задумав дизайнер.
Наприклад, верстальник бачить, що фон сторінки жовто-зелений. Він використовує атрибут bground для тега <body> із значенням "GreenYellow":
<body bground="GreenYellow">
Або пише відповідний вбудований стиль:
<body style="background-color: #ADFF2F;">
Або пише відповідний код у таблиці стилів css:
body{ background-color: #ADFF2F; }
Наприклад, далі верстальник бачить текст, написаний червоними літерами великого розміру, розміщений по центру. Він пише такий, наприклад, код:
<font color="red"><h2 align="center">Заголовок другого рівня - З Новим 2018 роком!</h2></font>
Наприклад, далі верстальник бачить: під червоним заголовком має бути розташований малюнок. Отже, він пише код для вставки цього малюнка. Якщо файл малюнка називається logo.png і розміщений у папці image, то код матиме такий вигляд:
<img src=″image/logo.png">
Крім того, верстальник має підібрати:
1) ширину або висоту цього зображення (атрибути width або height),
2) вказати (якщо потрібно) вирівнювання і обтікання,
3) вказати рамку - товщину і колір, якщо дизайнер цю рамку намалював.
Наприклад:
<img =″image/logo.png" width="800px" align="middle" border="2">
Ось так, крок за кроком, верстальник перетворює малюнок сайту на код сайту.
УВАГА! При верстці головне - повністю повторити малюнок дизайнера за допомогою html-коду!
Завдання 1.
1. Створити html-файл під назвою index.html
2. Написати основні теги для веб-сторінки.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3. У папці, де був збережений файл index.html, створити папку image і зберегти у цю папку файл-малюнок http://it-shkola.in.ua/images/it-scouts/sunday/images/1-2.png
4. Створити (зверстати) веб-сторінку на основі малюнка:
Результат - див. файл.
Завдання 2.
1.Створити файл index.html і написати код за малюнком
(можна скопіювати готовий код із Завдання 1 і змінити його відповідно до малюнка. У заголовку використано шрифт Comic Sans MS. Малюнок - у папку image малюнок http://it-shkola.in.ua/images/it-scouts/sunday/images/1-2.png )
2. Створити html-файл під назвою present.html
3. Скопіювати у файл present.html вміст файлу index.html із завдання 1 (або написати заново).
4. У папці, де збережені файли index.html та present.html, створити папку image і зберегти у цю папку файли-малюнки: http://it-shkola.in.ua/images/it-scouts/sunday/images/51.png , http://it-shkola.in.ua/images/it-scouts/sunday/images/50.png , http://it-shkola.in.ua/images/it-scouts/sunday/images/54.png , http://it-shkola.in.ua/images/it-scouts/sunday/images/53.png . Всього - 4 файли-малюнки.
5. Змінити код у файлі present.html на основі малюнка:
6. Перевірити роботу меню у верхній частині сторінки: "Привітання" - перехід на файл index.html , "Подарунки" - перехід на файл present.html
Результат - див. файл.
Завдання 3.
1. Створити файл index.html і написати код за малюнком (можна скопіювати готовий код із Завдання 1 і змінити його відповідно до малюнка. Використано шрифт Comic Sans MS , малюнок http://it-shkola.in.ua/images/it-scouts/sunday/images/1-2.png )
2. Створити файл present.html і написати код за малюнком
(можна скопіювати готовий код із Завдання 2 і змінити його відповідно до малюнка. Використано шрифт Comic Sans MS. Малюнки http://it-shkola.in.ua/images/it-scouts/sunday/images/51.png , http://it-shkola.in.ua/images/it-scouts/sunday/images/50.png , http://it-shkola.in.ua/images/it-scouts/sunday/images/54.png , http://it-shkola.in.ua/images/it-scouts/sunday/images/53.png )
3. Створити файл calendar.html і скопіювати у нього вміст файлу index.html
4. Змінити код у файлі calendar.html на основі малюнка (зберегти у папку image малюнки http://it-shkola.in.ua/images/it-scouts/sunday/images/start.png , http://it-shkola.in.ua/images/it-scouts/sunday/images/6.png , http://it-shkola.in.ua/images/it-scouts/sunday/images/xmas.png , http://it-shkola.in.ua/images/it-scouts/sunday/images/finish.png ):
6. Перевірити роботу меню у верхній частині сторінки: "Привітання" - перехід на файл index.html , "Подарунки" - перехід на файл present.html , "Святковий календар" - перехід на файл calendar.html
Результат - див. файл.
