Тема: Стуктура WEB-сторінки. Теги для виведення тексту.

З М І С Т

Введення у WEB-дизайн
Мова HTML
Практичне заняття 1
Практичне заняття 2
Практичне заняття 3
Практичне заняття 4
Практичне заняття 5
Практичне заняття 6

Введення у WEB-дизайн.

Перед тим, як розпочати вивчення основ WEB-дизайну, необхідно визначитись з деякими поняттями. Перш за все з’ясуємо поняття – «дизайн». Більшість людей, коли чують це слово, вважають, що воно належить до образотворчого мистецтва, це щось таке «художнє». В крайньому випадку слово «дизайн» сприймають, як елемент художнього оформлення. В дійсності слово «дизайн» англомовного походження і означає конструювання. Отже коли ми говоримо про WEB-дизайн, це означає конструювання WEB-форм (можна сказати WEB-сторінок). WEB-сторінки являють собою WEB-форму, призначену для публікації в INTERNET. Але цим використання WEB-форм не обмежується. Існує достатньо багато використань цієї технології. Наприклад WEB-форму часто використовують в якості форм-інтерфейсів для керування якоюсь програмою, також часто можна бачити WEB-довідники та підручники, для яких існує спеціальний WEB-формат (*.chm), існують також бази даних, що будуються на основі цієї технлології. Цей перелік можна продовжити, але поки що обмежимось цими прикладами.

З появою WEB-технологій було створено достатньо багато різноманітних програмних засобів, що дозволяють створювати «конструкції» будь-якої складності. З’явилися спеціальні мови для створення WEB-форм.

Найбільш поширеними є мови HTML, CSS, PHP. Що собою являють ці мови ми розглянемо пізніше. Зараз суттєвим є те, що створювати WEB-форми можна і без знань цих мов, використовуючи спеціальні програми, для роботи з якими не обов’язково знати мову. Але слід зазначити, що знання мов значно розширює можливості дизайнера і дозволяє йому більш ретельно виконувати роботу. Крім того слід зазначити, що всі програми генерують достатньо велику кількість зайвого коду, тому розміри проектів створених такими програмами значно перевищує розміри проектів написаних мовою. Наслідок тут дуже простий – більший розмір довше завантажується, а це не бажано.

При створенні WEB-форми, яким би не було її призначення, розробник повинен враховувати деякі загальні вимоги. Ці вимоги можна розділити на групи за певними спільними ознаками, а саме:

- Структура оформлення форми – передбачає правила розміщення матеріалів на формі згідно з нормами, що існують, або у відповідності з специфікою використання форми

- Підбір шрифтів текстової частини – передбачає використання конкретних типів шрифтів, які добре сприймаються, а також відповідний розмір шрифтів.

- Підбір кольорової гами – передбачає знання сумісності кольорів у різних кольорових схемах

- Інформативність – передбачає дотримання певних правил, що забезпечують інформативність та зрозумілість розміщених матеріалів

Можна виділити ще декілька груп правил, але вони є або не такими важливими, або можуть входити до складу перелічених, тому ми на цьому і зупинимось. Найважливіші вимоги і правила ми будемо розглядати в ході вивчення курсу.

 

Мова HTML.

HTML це скорочення від HyperText Mark-up Language – «мова гіпертекстової розмітки».

Для того, щоб було зрозуміліше зазначимо, що в перших мовах програмування використовувався метод виконання програм «по рядках» - linear. Програма виконувала один рядок і переходила до наступного, всі рядки, таким чином виконувались по порядку і для того, щоб перейти до виконання п’ятого рядка необхідно було виконати попередні чотири. Поняття «гіпертекстової розмітки» передбачає не «по-рядкове» виконання, а довільну розмітку з будь-яким порядком виконання. Таким чином «гіпертекст» є протилежністю до «по-рядках».

Слід ще зазначити, що існує різновид мови HTML і називається він XHTML (eXtensible HyperText Mark-up Language). Цей варіант є більш структурованим варіантом HTML і останнім часом використовується саме він. Не слід звертати на це увагу – просто потрібно взяти це до відому.

Основою виконання розмітки в мові HTML є так звані ТЕГи. Всі теги мають однаковий формат. Вони починаються знаком “<” і закінчуються знаком “>”. В більшості випадків буває два тега – відкриваючий і закриваючий. Відкриваючий тег містить певну команду між значками < >, а закриваючий перед такою самою командою містить символ слеш “/”, наприклад:

<html> - відкриваючий тег

</html> - закриваючий тег

Все, що розміщено між відкриваючим та закриваючим тегом є вмістом цього тега. З цього правила є декілька виключень. Наприклад існує тег, який є одразу і відкриваючим і закриваючим <br />, він виконує перехід на наступний рядок і є по суті міткою.

Вся мова HTML є по суті набором тегів і більше нічого. Отже – для того щоб вивчити цю мову необхідно вивчити всі теги (або при наймі основну їх частину).

Для того, щоб вивчити HTML найкраще просто писати на цій мові практично. Для цього нам потрібно дуже мало, а саме: програма типу «Блокнот» для написання текстів програм і будь-який Internet-браузер (Explorer, Opera, Mozila). Підключення до Internet для створення сторінок не потрібне.

 

Практичне заняття 1.

Тема: Стуктура WEB-сторінки. Теги для виведення тексту.

Програмні засоби: Для набору програми використовуємо програму «Блокнот», для перегляду створених сторінок використовуємо браузер Explorer або Opera.

 

Теоретичні відомості.

WEB-сторінка складається з обов’язкових тегів і має таку структуру:

<html> // відкриваючий тег сторінки //

<head> // відкриваючий тег заголовка //

</head> // закриваючий тег заголовка //

<body> // відкриваючий тег тіла сторінки //

...

</body> // закриваючий тег тіла сторінки //

</html> // закриваючий тег сторінки //

 

Ці теги повинні обов’язково використовуватись для будь-якої сторінки. Між тегами <body> та </body> розміщується весь матеріал сторінки.

 

Завдання 1:

1) Наберіть в редакторі «Блокнот» шаблон пустої сторінки:

<html>

<head>

</head>

<body>

</body>

</html>

2) Збережіть файл з текстом шаблону під іменем shablon1.htm. Зверніть увагу на зміну розширення з txt на htm. Місцем збереження може бути окрема папка з іменем webpage на диску С: (C:\webpage).

3) Відкрийте папку в якій ви зберегли файл і запустіть його на виконання.

Ви повинні побачити пусту WEB-сторінку.

 

Теоретичні відомості

Введемо тепер в наш шаблон нові теги.

<tutle> Назва моєї сторінки </title>

Цей тег виводить заголовок на панелі заголовка сторінки, яку ви створюєте. Текст між тегами може бути будь-який. Цей тег поміщається між тегами <head> </head>. Тобто:

<html>

<head>

<title> Моя сторінка </title>

</head>

<body>

…

</body>

<html>

В тілі сторінки використовуються текстові теги:

<p> text </p>	Параграф (звичайний текст)
<h1> text </h1>	Заголовок (найбільший шрифт)
<h2> text </h2>	Підзаголовок (менше за h1)
<h3> text </h3>	Підзаголовок (менше за h2)
<h4> text </h4>	Підзаголовок (менше за h3)
<h5> text </h5>	Підзаголовок (менше за h4)
<h6> text </h6>	Підзаголовок (менше за h5)
<b> text </b>	Bold – жирний шрифт
<i> text </i>	Italic – курсивний шрифт
<small> text </small>	Зменшений шрифт
<br />	Перейти на новий рядок

Завдання 2:

1) Наберіть в редакторі «Блокнот» текст сторінки з використанням всіх перелічених типів шрифтів:

<html>

<head>

<title> назва моєї сторінки </title>

</head>

<body>

<p> Моя перша сторінка </p>

<h1> Це заголовок </h1>

<h2> Це підзаголовок </h2>

<h3> Це підзаголовок </h3>

<h4> Це підзаголовок </h4>

<h5> Це підзаголовок </h5>

<h6> Це підзаголовок </h6>

<b> жирний шрифт </b>

<i> курсив </i>

<small> зменшений шрифт </small>

</body>

</html>

2) Збережіть файл з текстом сторінки під іменем page1.htm в папці C:\webpage

3) Запустіть файл page1.htm і подивіться на результат виведення. Порівняйте відображення різних шрифтів.

 

 

Завдання 3 (самостійне):

Напишіть WEB-сторінку з наступним текстом, використовуючи для оформлення тексту відповідні теги.

КОНСТИТУЦІЯ УКРАЇНИ

Розділ I ЗАГАЛЬНІ ЗАСАДИ