Урок "html-верстка" (початковий рівень)

Post on 29 грудня 2017
by Super User

Верстка 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

Результат - див. файл.

 

Свіже