- •Проектування власного web-сайту
- •Введення в html
- •Створення web-сторінки
- •Оголошення та ідентифікація документа
- •Вставка символів прогалин ( )
- •Вставляння спеціальних символів
- •Створення надстрічкових та підстрічкових індексів
- •Вибір шрифту
- •Зміна розміру шрифту
- •Вибір кольору шрифту
- •Використання моноширінних шрифтів
- •Створення маркованих списків
- •Створення багаторівневих списків
- •Створення списків визначень
- •Вирівнювання тексту відносно графіки
- •Пуста область навколо графічного зображення
- •Побудова горизонтальної лінійки
- •Побудова списків з графічними маркерами
- •Побудова гіперпосилання, що вказує на іншу Web-сторінку
- •Створення посилання на об’єкт цієї ж сторінки
- •Створення гіперпосилання, що вказує на зображення
- •Створення гіперпосилання, що вказує на файл
- •Посилання на адресу електронної пошти
- •Колір тексту гіперпосилань
- •Створення таблиці
- •Товари та ціни
- •Товари та ціни
- •Групування стовпчиків таблиці
- •Товари та ціни
- •Зміна розмірів комірки таблиці
- •Об’єднання комірок таблиці
- •Вирівнювання даних у комірці таблиці
- •Перенесення слів всередині комірок таблиці
- •Задавання параметра обтіканні таблиці текстом
- •Створення фреймів
- •Відтворення об’єкту гіперпосилання у вікні фрейму
- •Смуги прокрутки фреймів
- •Використання атрибуту noresize
- •Властивості меж фреймів
- •Задавання величини полів фрейму
Введення в html
HTML (HyperText Markup Language – мова гіпертекстової розмітки) – це мова програмування, що використовується для створення Web-сторінок. Web-сторінки – це, як правило, документи у форматі HTML, які містять текст і спеціальні інструкції – дескриптори (теги) HTML. Документи HTML зберігаються у вигляді файлів з розширенням імені .html або .htm. Web-браузер інтерпретує дескриптори HTML-документа і відображає його як Web-сторінку.
Дескриптори HTML повідомляють Web-браузеру інформацію про структуру та особливості форматування Web-сторінки. Кожен дескриптор містить певну інструкцію і міститься в кутових дужках < i >. Значна частина дескрипторів складаються з відкриваючої та закриваючої частин і впливають на текст, що міститься всередині. При наборі дескрипторів допускається вводити букви різних регістрів. Багато дескрипторів мають додаткові атрибути, які дозволяють вказувати значення необов’язкових параметрів. Наприклад, дескриптор <FONT> допускає задання атрибуту COLOR, за допомогою якого можна змінити колір тексту.
Створення web-сторінки
Розробники для створення Web-сторінок користуються текстовими редакторами (Блокнот для Windows) або процесорами Microsoft Word, Corel WordPerfect, Microsoft WordPad).
Приступаючи до створення Web-сторінки, насамперед введіть необхідний текст. Не форматуйте його засобами редактора або процесора, тому що для цього потрібно буде скористатись дескрипторами HTML, які містять інструкції з задавання необхідних параметрів форматування та структурування сторінки. Збережіть Web-сторінку з розширенням .html або .htm. Файл головної сторінки Web-сайту заведено називати index.html.
Розглянемо основні дескриптори HTML, які повинні бути присутні у тексті будь-якої Web-сторінки.
Оголошення та ідентифікація документа
Насамперед необхідно внести фрагмент коду, за допомогою якого буде оголошений тип документа та ідентифікована версія мови. Це здійснюється за допомогою стандартної узагальненої мови розмітки, і відоме як оголошення DOCTYPE. Наприклад, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, є вбудований у документ процесора HomeSite.
Для ознайомлення з HTML-кодом Web-сторінки можна переглянути вже створені Web-сторінки.
Для того, щоб переглянути код HTML, потрібно завантажити програму Web-браузера, вибрати і відкрити Web-сторінку, HTML-код якої цікавить, відкрити меню „Вид”, вибрати елемент „У вигляді HTML”.
< html >
Після оголошення DOCTYPE створення документа починається з кореневого елемента. Кожна сторінка починається з дескриптора < html >. Цей дескриптор описує документ як Web-сторінку, виконану у форматі HTML. Елемент html повинен мати відкриваючий та закриваючий теги – <html > і </html > . Цей елемент також є вбудований у документ процесора HomeSite.
< head >
Елемент < head > містить всі елементи, які необхідні для відображення та виконання документа, але які не відображаються у вікні браузера. Щоб створити розділ < head >, необхідно додати теги < head > безпосередньо за відкриваючим тегом < html >. У елемента head немає обов’язкових атрибутів, а є тільки відкриваючий та закриваючий теги. Всередині розділу head можна розміщати декілька дескрипторів: title, meta, script, style, link.
< title >
Дескриптор title є єдиним обов’язковим елементом розділу head. У стрічці заголовка браузера відображається будь-який текст, що міститься у цьому елементі, разом з назвою браузера, яка додається в кінці тексту. Наприклад, <title>npe.com - Кафедра НПЕ, ІТРЕ, „Львівська політехніка</title>.
<meta>
Цей елемент використовується для оголошення кодування документа. Кодування документа означає установлення набору символів для сторінок. Зазвичай застосовують набір символів ISO 8859-1. Зараз існує кодування UTF-8 (Unicode), яке являє собою універсальніший формат і використовує стандарт, відмінний від ISO. Якщо документ створюється не латиницею, то бажано використовувати набори символів ISO, а не набори Unicode.
Наприклад, використання елемента < meta > для оголошення кодування Unicode та ISO (в кириллиці):
< meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”/>;
< meta http-equiv=”Content-Type” content=”text/html; charset= ISO 8859-5”/>.
Елемент meta можна використовувати для визначення ключових слів, опису сайту, а також указівки автора, наприклад:
<meta name="keywords" content="Вуз, електроніка, інтегральні мікросхеми " />
<meta name="Сайт кафедри напівпровідникової електроніки />
<meta name="Author" content="Кеньо Г.В.." />
Елемент script дозволяє вставляти скрипти безпосередньо в документ, а також за його допомогою вказується посилання на необхідний для використання скрипт. Використовується за необхідності.
Елемент style дозволяє розміщувати інформацію про стиль прямо на сторінці. Стиль, інформація про який розміщена таким чином, називається вбудованим. Використовується за необхідності
Елемент link найчастіше використовується для виконання зв’язування з зовнішньою таблицею стилів або для, наприклад, зв’язування зі значком сайту.
<body>
Дескриптор <body> – це те місце, де відбуваються всі дії. Це той елемент, де буде розміщений вміст і відбудеться розмітка сторінки за допомогою мови HTML для структурування вмісту відповідним чином. Елемент <body> розміщений в елементі < html >, безпосередньо за елементом < head > і має відкриваючий та закриваючий теги.
Коментарі HTML (<!-- -->)
Коментарі дозволяють тимчасово приховати вміст або розмітку, зробити зрозумілішим документ. Для цього використовується дескриптор <!-- -->. Все, що необхідно приховати або подати у вигляді керування, розміщується між відкриваючою та закриваючою частиною коментарію.
Наприклад:
<!—
<p> Це не відобразиться браузером</p>
-->
<p> Це відобразиться браузером</p>
Створення абзацу (<p> </p>)
Web-браузер не відображає ті символи переводу стрічки або створення абзацу, які вводяться у текст на етапі формування сторінки за допомогою текстового редактора. Щоби вказати початок нового абзацу, потрібно задати дескриптор <p> який має відкриваючий та закриваючий теги.
Після відкривання сторінки у вікні Web-браузера всі абзаци її тексту, помічені дескриптором <p>, розділяються пустими стрічками.
По замовчуванню більшість Web-браузерів форматує абзаци, вирівнюючи їх уліво. Атрибут align=”?” дозволяє примусово змінити ознаку вирівнювання. Абзаци можуть бути вирівняні вліво, вправо, по центру та по ширині. Для цього замість ? потрібно вставити left, right, center або justify відповідно.
Наприклад:
<p align=” right” > Цей абзац буде вирівняний вправо </p>
Перехід до нової стрічки (<BR> )
Дескриптор <BR> повідомляє Web-браузеру про те, що слід припинити розміщення тексту та інших елементів сторінки у межах поточної стрічки і перейти до нової стрічки. Тег <BR> є корисний для розділення коротких фрагментів тексту (поштових адрес, віршів). Дескриптор <BR> не має закриваючого тегу. Дескриптор <BR> застосовують для примусового розміщення вбудованих елементів (графічні зображення, положення яких не повинне вибиратись браузером автоматично) у визначеному місці сторінки. Дескриптор <BR> буває зручним у тих випадках, коли необхідно збільшити пусті ділянки між окремими елементами сторінки.
Наприклад,