- •Лекція 1
- •Основи Інтернету
- •Створення та підтримка веб-ресурсів в автоматизованому режимі.
- •Лекція 2
- •Основні веб-технології.
- •Головне про веб-дизайн.
- •Лекція 3
- •Базові конструкції мови html
- •Структура html-документа
- •Лекція 4 Теги форматування тексту Створення гіперпосилань та списків в Html-документі
- •2. Теги логічного форматування тексту
- •4. Текстові гіперпосилання
- •5. Списки
- •Лекція 6
- •1. Використання таблиць у html-документах
- •2. Форматування таблиць.
- •3. Форматування тексту та оформлення рамок таблиці
- •4. Використання таблиць для розміщення об'єктів на веб-сторінці
- •1. Фрейми, їхні теги та атрибути
- •2. Використання посилань у фреймах
- •3 Вкладені набори фреймів
- •Лекція 6
- •1. Поняття форми
- •Створення форм
- •2. Елементи форми в html
- •Поле для пароля
- •Кнопка submit
- •Кнопка reset
- •Прапорці (checkbox)
- •Перемикачі (radiobutton)
- •Кнопка із зображенням
- •Приклад комбінованої форми
- •Лекція 7
- •1. Фрейми, їхні теги та атрибути
- •2. Використання посилань у фреймах
- •3 Вкладені набори фреймів
- •Лекція 8
- •1. Поняття форми
- •Створення форм
- •2. Елементи форми в html
- •Поле для пароля
- •Кнопка submit
- •Кнопка reset
- •Прапорці (checkbox)
- •Перемикачі (radiobutton)
- •Кнопка із зображенням
- •Приклад комбінованої форми
- •Лекція 10
- •1. Технологія створення веб-вузла.
- •Інтерфейс та режими роботи програми
- •Режими перегляду веб-документа
- •Відкривання та створення сайтів і веб-сторінок
- •5.Створення веб-сторінки за допомогою шаблона
- •Контрольні запитання
- •Лекція 11
- •1. Створення форми.
- •Ефекти динамічної html у FrontPage
- •MySql - субд для Інтернету
- •Інтеграція сценаріїв з базами даних
- •2. Використання php
- •3. Вбудовування php в html
- •5. Доступ до змінних форми
- •Лекція 15
- •1. Поняття об'єктної моделі
- •2. Властивості, методи та події
- •3. Сценарії
Лекція 3
Тема: Основи мови HTML
Мета: визначити базові конструкції мови, структуру HTML –документа, вивчити основні теги для сторення HTML –документа.
План
-
Базові конструкції мови HTML
-
Структура HTML документа.
Ви вже переконалися, що за допомогою автоматизованих засобів, які надають у розпорядження користувача служби безкоштовного хостинга, створювати та адмініструвати веб-сайти надзвичайно просто. Крім того, це не потребує особливих знань із веб-дизайну. Однак у такому випадку ваші можливості обмежені, і ви не зможете створити сайт за своїми уподобаннями. Щоб мати змогу це зробити, потрібно опанувати спеціальну мову, призначену для розробки веб-сторінок. Тоді перед вами відкриються захоплюючі можливості щодо створення свого власного віртуального світу!
На даній лекції ви ознайомитеся із принципами створення веб-сторінок за допомогою мови HTML, навчитеся визначати структуру сторінок, розміщувати і форматувати текст, працювати з таблицями та фреймами, пов'язувати створені файли за допомогою гіперпосилань. Виконавши дві запропоновані практичні роботи, ви власноруч створите веб-сторінки — можливо, перші у вашому житті.
Для швидшого знайомства з HTML-кодом| можна проглядати вподобану вам сторінку в режимі "В виде HTML|". Для цього в браузері| треба вибрати пункт меню "Вид" - "В виде HTML|". Після цього відкриється нове вікно з початковим текстом HTML-кода|. Проглядаючи готовий код HTML|, ви дізнаєтеся, як теги мови застосовуються досвідченішими програмістами. Крім того, це один із способів подолання різних проблем, що виникають час від часу. Для швидкого створення простого сайту досить скористатися звичайним Блокнотом, не забуваючи зберігати результат, а для перегляду необхідно зберегти початковий текст з розширенням .html, а потім проглянути збережений файл браузером|, наприклад Internet| Explorer|, використовуючи команду "Відновити".
-
Базові конструкції мови html
Основною перевагою та особливістю веб-сторінок є те, що інформація, розміщена на них, має вигляд гіпертексту.
Гіпертекст — це текст, у який вбудовані спеціальні коди, що задають форматування тексту, наявність у ньому ілюстрацій, мультимедійних вставок та гіперпосилань.
Ці коди визначені у мові програмування HTML (Hyper Text Markup Language — мова гіпертекстової розмітки). Тобто веб-сторінка фактично є документом у форматі HTML.
Процес вставляння в текст кодів HTML називають розміткою.
Браузери підтримують мову HTML і під час завантаження веб-сторінки читають наявні у ній коди та виконують задані за їх допомогою операції (форматують текст, вставляють у нього зображення тощо). Таким чином, вигляд сторінки у вікні браузера залежить від того, які коди містяться у її документі.
-
Поняття тегу
Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами.
Під час відображення документа в браузері самих тегів не видно, але вони впливають на зовнішній вигляд документа. Усі теги починаються із символу < і закінчуються символом > — їх називають кутовими дужками.
Після відкритої кутової дужки розміщують ключове слово, яке вказує на призначення тегу. Регістр у назвах тегів не має значення, хоча загальновживаними є великі літери.
Приклади тегів HTML: <TITLE>, <BODY>, <TABLE>, </A>, <IMG>, </CENTER>.
Зазвичай тег впливає на певний фрагмент документа, наприклад на абзац. У таких випадках використовують пару тегів (відкриваючий і замикаючий). Перший із них задає ефект, а другий — припиняє його дію. Замикаючий тег починається із символу / (слеш).
Приклади парних тегів:
<HTML></HTML>,
<В></В>,
<HEAD></HEAD>,
<НЗ></Н3>,
<ADDRESS></ADDRESS>,
<LI></LI>.
Деякі теги задають разовий ефект у місці своєї появи, тоді замикаючий тег не потрібен.
Приклади одинарних тегів:
<BR>, <HR>, <МЕТА>, <BASEFONT>, <FRAME>, <INPUT>.
Якщо між кутовими дужками помилково вказане ключове слово, яке відсутнє в мові HTML, то весь тег буде проігноровано.
Відкриваючі теги можуть містити атрибути, які впливають на ефект, створюваний тегом. Атрибути — це додаткові ключові слова, відокремлені від основного ключового слова тегу та один від одного символами пробілу.
Для деяких атрибутів слід задавати значення, яке відділяють від імені атрибута символом =. Значення атрибута беруть у лапки, але в багатьох випадках їх можна і не ставити. Замикаючі теги атрибутів не містять.
Приклади тегів з атрибутами:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" BACKGROUND="rain.gif">
<OPTION SELECTED>
<FRAME SCR="file.html" NORESIZE>
Для того щоб через деякий час ви або інша людина, яка переглядатиме код HTML, могла краще його зрозуміти, у текст вставляють примітки — коментарі. Вони починаються зі спеціального тегу <! —. Будь-який записаний після нього текст браузер розглядає як коментар і не відображає під час відтворення документа. Закінчують коментар тегом —>. Коментар може містити будь-які символи, крім >, а отже, не може включати в себе теги.