- •План лекції:
- •Загальні поняття про Web-сторінки
- •Вступ в мову html
- •Струкрура html-документу Bci html-документа будуються за визначеними правилами:
- •Наприклад, закінчений html-файл може мати такий вигляд:
- •Оформлення тексту
- •Тег може мати такі атрибути: face – гарнітура шрифту, size – розмір, color – колір.
- •Написання тексту задається за допомогою тегів:
- •Графіка, вставка малюнків
- •Для "співіснування" малюнка (наприклад, pr1.Png) I тексту документа використовують теги:
- •Посилання
Інформатика Лекція 17
Тема: Основи веб-дизайну.
План лекції:
Новий матеріал:
Загальні поняття про Web-сторінки;
Вступ в мову HTML;
Струкрура HTML-документу;
Встановлення кольору тексту, фону;
Параграф;
Графіка, вставка малюнків;
Посилання;
Питання для самоконтролю
Якою мовою створюється Web-сторінка i яким чином відображується?
Що таке "гіперпосилання"? Який воно має вигляд i як ним користуватися?
Що таке "тег"? Для чого теги використовуються?
Яку структуру має HTML-документ?
Як відобразити на екрані HTML-документ?
Як мовою HTML встановити колір тексту?
Яким тегом одночасно встановити колір тексту i фону?
Як вирівняти текст по центру, по ширині, по лівому або правому краю?
Якими засобами мови HTML виділити фрагменти тексту?
Якими засобами мови HTML задати написання тексту або (i) вид шрифту?
Як у Web-сторінку вставити малюнок?
Як встановити обтікання мапюнка текстом?
Як встановити відстань між текстом i малюнком?
Як встановити горизонтальні i вертикальні розміри малюнка?
Як створити посилання на інший документ?
Загальні поняття про Web-сторінки
Web-сторінка - це створений за допомогою мови HTML текстовий файл, який описує вміст Web-сторінки, а відобразити її можна у вікні Web-броузера.
Для створення i редагування HTML-файла можна скористатися будь-яким текстовим редактором. Якщо HTML-файл відкрити за допомогою засобів перегляду, наприклад, Internet Explorer, він відображає текст, графіку i гіперпосилання на інші файли і Web-сторінки.
Гіперпосилання - це фрагменти тексту або зображення на Web-сторінці, які пов’язані з певною адресою файлу, що дозволяють клацанням на них відкривати ці файли. Такими файлами можуть бути інші Web-сторінки.
Гіперпосилання, пов’язане з фрагментом тексту, виглядає, як підкреслений текст. Курсор миші на гіперпосиланні набуває форми руки. При клацанні на гіперпосиланні відкривається документ, адреса якого визначається в гіперпосиланні. Якщо є доступ до Internet, гіперпосилання на Web-вузли відкриють через Internet Explorer доступ до відповідного Web-вузла. Гіперпосилання дають можливість користувачу переходи на Web-сторінках від одного матеріалу до іншого.
Користувачі WWW можуть не тільки переглядати чужі Web-сторінки, але и створювати свої.
Web-сторінка зберігається в текстовому файл з розширенням HTML або НТМ.
Щоб створювати Web-сторінки, нема необхідності вивчати мову HTML. Можна конвертувати у Web-сторінки документи, створенні за допомогою текстового процесора Word, або за допомогою засобу Prints Page Express, що є в складі Windows'98.
Проте конвертовані документи містять, як правило, багато зайвих чи нераціонально використаних елементів, що значно сповільнює роботу з ними, особливо в умовах несучасних каналів зв'язку.
Вступ в мову html
Мова HTML (мова гіпертекстової розмітки) призначена для опису Web-сторінок i не є мовою програмування. Вона призначена для розмітки текстових документів, тобто для їх форматування. Всі Web-сторінки, які є в Internet, створені за допомогою мови HTML.
Керуючим елементом мови HTML є тег, який визначає, як буде виглядати відповідний фрагмент на екрані броузера.
Тег - це команда HTML формування вигляду фрагменту Web-сторінки, яка завжди записується в кутові дужки.
Як правило, теги – парні. Перший тег відкриває опис команди і визначає її початок, другий тег відрізняється від першого наявність похилої риски "/" перед іменем тега і закриває його, тобто припиняє дію команди.
Часто теги, окрім іменя, містять атрибути.
Атрибути – це компоненти тегу, що містять вказівки про те, як броузер має сприймати й обробляти тег. Атрибут записується після імені тегу і складається, як правило, з імені і значення, записані через знак «=».
Наприклад: <BODY bgcolor = ”yellow”> - жовтий фон документу.
Часто при створенні веб-документу треба пояснити фрагмент коду. В цьому випадку використовується коментар.
Коменрар означає фрагмент коду, який не обробляється браузером і розташований між символами <! – текст-коментар - >.