Зміст.
Передмова 5
Введення в мову HTML 7
Структура HTML-документа 9
Лабораторна робота №1
Створення сайту.
Текстове оформлення сторінок 11
Вставка зображень в html-сторінки 14
Вирівнювання зображень 14
Лабораторна работа№2
Текстове оформлення сторінок
Лабораторна робота №3
Вставка зображень в html-сторінки
Лабораторна робота №4
Створення списків
Нумеровані списки
Маркіровані списки
Лабораторна робота № 5
Створення таблиць
Параметри таблиці
Лабораторна робота №6
Створення фреймів
Лабораторна робота №7
Каскадні таблиці стилів
CSS Текст 33 Властивості тексту
Межі й рамки
Типи рамок
Вступ.
У наш час Інтернет охоплює майже всі сфери життя: культура, мистецтво, бізнес. На першому етапі необхідно навчитися створювати прості HTML-сторінки. XML же – це надбудова над HTML. Тому без вивчення HTML не обійтися. Отже, HTML – HyperText MarkUp Language – язик розмітки гіпертексту. Гіпертекст – розширений текст, який може містити в собі текст, ілюстрації, різні упроваджені об'єкти і посилання на інші ресурси або на інші Web-сторінки.
При передачі інформації через Інтернет використовуються якраз HTML-сторінки – файли *.htm і *.html, оскільки вони містять в собі Гіпертекст, мають розмір менше ніж текстові або інші файли і для їх перегляду потрібен тільки браузер.
HTML-документ є звичайним текстовим документом з управляючими конструкціями язика HTML – тегами, які і проводять дії «форматування» над текстовими блоками і здійснюють вставку різних об'єктів в документ.
Створювати HTML-сторінки можна шляхом самостійного написання тегів в текстовому редакторі або використовуючи Web-редакторів з автоматизацією введення потрібних тегів – наприклад, WebEdit, Arachnophilia або ж використовуючи програми, які створюють теги самі у відповідь на дію користувача на сторінці – за принципом What You See Is What You Get - наприклад, MS Word, MS Frontpage. Але вони задають абсолютне форматування і часто дописують багато зайвого коду до сторінки. До того ж для створення більш унікальних сторінок ними не обійдешся, для цього краще писати теги HTML самому і використовувати каскадні таблиці стилів.
Ми пропонуємо використовувати для створення Web-сторінок блокнот, який входить в стандартний набір будь-якої з операційних систем Windows і не вимагає попереднього вивчення.
Наш практикум містить в собі всі основні розділи, необхідні для створення Web-сторінок. В кожному розділі є приклади використовування тегів, показаний результат дії цих тегів, а також представлені лабораторні роботи. Практикум можна використовувати для самостійного вивчення технології створення статичних Web-сторінок студентам будь-яких спеціальностей або тим, хто хоче самостійно вивчити основи язика HTML
Структура html-сторінки
Більшість елементів язика HTML за своєю суттю є дужками. Відкриваюча дужка відзначає початок частини сторінки, що володіє деякими властивостями, закриваюча відзначає кінець цієї частини. Вся HTML-сторінка полягає в пару дужок Усередині подібної конструкції можна поміщати і теги: вони не сприйматимуться браузером.
<html></html>
<head></head>
Область заголовка Web-сторінки. Іншими словами, її перша частина. Так само як і HTML, HEAD служить тільки для формування загальної структури документа. Цей елемент може мати атрибути lang і dir і допускається вкладення елементів TITLE, ISINDEX, BASE, META, LINK, NEXTID.
<title></title>
<style></style>
Опис стилю деяких елементів Web-сторінки. У вище приведеному прикладі призначені шрифти для елементів Н2 і CODE. Природно, що для кожного елемента існує стильове оформлення за умовчанням, тому вживання STYLE не обов'язкове.
<META>
Цей елемент містить службову інформацію, яка не відображається при погляданні Web-сторінки. Усередині нього немає тексту в звичайному розумінні, тому немає і кінцевого тега. Кожний елемент META містить два основні атрибути, перший з яких визначає тип даних, а другий - зміст. Далі приведено декілька прикладів meta-даних.
Дата, що позначає «термін придатності» документу:
name=’’Expires’’ content=’’Дата’’
Адреса електронної пошти:
name=’’Reply-to’’ content=’’Имя@Адрес’’
Вказівка додатку, в якому був створений Web-документ:
name=’’Generator’’ content=’’назва HTML- редактора’’
Атрибут name використовується додатком-клієнтом для отримання додаткової інформації про Web-сторінки і їх впорядкування. Цей атрибут часто замінюють атрибутом http-equiv. Він використовується сервером для створення додаткових полів при виконанні запиту.
Окрім цього, елемент МЕТА може містити URL. Шаблон відповідного атрибута такий:
URL=’’http://адрес’’
<body></body>
Цей елемент містить в собі Гіпертекст, який визначає власне Web-сторінку. Ця та частина документа, яку розробляє автор сторінки і яка відображається браузером. Відповідно, кінцевий тег цього елемента треба шукати в кінці HTML-файлу. Усередині BODY можна використовувати всі елементи, призначені для дизайну Web-сторінки. Усередині стартового тега елемента BODY можна розташувати ряд атрибутів, що забезпечують установки для всієї сторінки цілком. Розглянемо їх по порядку.
Один з найкорисніших для дизайну - атрибут, що визначає фон сторінки. Його появу можна уподібнити маленькій революції в WWW, оскільки однакові сірі Web-сторінки завдяки ньому розцвіли яскравими кольоровими узорами:
Background = "Путь до файлу фону"
Більш просте оформлення фону зводитися до завдання його кольору:
bgcolor=’’#RRGGBB’’
Колір фону задається трьома двохрозрядними шістнадцятирічними числами, які визначають інтенсивність червоного, зеленого і синього кольорів відповідно.
Обидва вище перелічені атрибути не є альтернативними і часто використовуються спільно.
Оскільки фон сторінки може змінюватися, необхідно мати нагоду підбирати відповідний колір тексту. Для цього є наступний атрибут:
text=’’#RRGGBB’’
Для завдання кольору гіперпосилань 1використовується атрибут:
link=’’RRGGBB’’
Також можна задати колір для використаних гіперпосилань:
vlink=’’RRGGBB’’
Гіпертекст, розташований усередині елемента BODY, може мати довільну структуру. Її визначають в першу чергу призначення Web-сторінки і фантазія розробника.
<a></a>