- •Проектування власного web-сайту
- •Введення в html
- •Створення web-сторінки
- •Оголошення та ідентифікація документа
- •Вставка символів прогалин ( )
- •Вставляння спеціальних символів
- •Створення надстрічкових та підстрічкових індексів
- •Вибір шрифту
- •Зміна розміру шрифту
- •Вибір кольору шрифту
- •Використання моноширінних шрифтів
- •Створення маркованих списків
- •Створення багаторівневих списків
- •Створення списків визначень
- •Вирівнювання тексту відносно графіки
- •Пуста область навколо графічного зображення
- •Побудова горизонтальної лінійки
- •Побудова списків з графічними маркерами
- •Побудова гіперпосилання, що вказує на іншу Web-сторінку
- •Створення посилання на об’єкт цієї ж сторінки
- •Створення гіперпосилання, що вказує на зображення
- •Створення гіперпосилання, що вказує на файл
- •Посилання на адресу електронної пошти
- •Колір тексту гіперпосилань
- •Створення таблиці
- •Товари та ціни
- •Товари та ціни
- •Групування стовпчиків таблиці
- •Товари та ціни
- •Зміна розмірів комірки таблиці
- •Об’єднання комірок таблиці
- •Вирівнювання даних у комірці таблиці
- •Перенесення слів всередині комірок таблиці
- •Задавання параметра обтіканні таблиці текстом
- •Створення фреймів
- •Відтворення об’єкту гіперпосилання у вікні фрейму
- •Смуги прокрутки фреймів
- •Використання атрибуту noresize
- •Властивості меж фреймів
- •Задавання величини полів фрейму
Створення списків визначень
Список визначень, який містить найменування термінів та їх означення, добрий засіб для форматування тлумачних словників.
Для створення списків визначень використовують три спеціальні дескриптори – <DL>, <DT>, <DD>. Тег <DL> відмічає початок списку визначень, а дескриптори <DT> і<DD> служать для позначення початку тексту терміна та статті, що пояснює його, відповідно.
По замовчуванню Web-браузери форматують текст терміну у списку визначень, вирівнюючи його вліво. Стаття визначення відображається під стрічкою з найменуванням терміну і має відступ. Структура списку визначень не передбачає обов’язкового чергування дескрипторів <DT> і <DD>. Якщо необхідно „прив’язати” до одного визначення декілька термінів, потрібно задати необхідну кількість тегів <DT>. Якщо потрібно вказати декілька статей визначень для одного терміну, слід задати відповідну кількість тегів <DD>.
Наприклад,
<BODY>
<H2>Словник дескрипторів HTML </H2>
<DL>
<DT> ! DOCTYPE </DT>
<DD>Визначає номер використовуваної версії HTML</DD>
<DT>А</DT>
<DD>Створює гіперосилання</DD>
<DT>APPLET</DT>
<DD>Додає аплет Java у склад Web-сторінки</DD>
<DT>AREA</DT>
<DD>Визначає інформацію зони карти посилань<DD>
<DT>B</DT>
<DD>Встановлює ознаку напівжирного написання шрифту</DD>
<DT>BASE</DT>
<DD>Задає цільове вікно або фрейм для об’єктів гіперпосилань, що приймаються по замовчуванню</DD>
</DL>
</BODY>
відобразиться браузером:
Словник дескрипторів HTML
! DOCTYPE
Визначає номер використовуваної версії HTML
А
Створює гіперпосилання
APPLET
Додає аплет Java у склад Web-сторінки
AREA
Визначає інформацію зони карти посилань
В
Встановлює ознаку напівжирного написання шрифту
BASE
Задає цільове вікно або фрейм для об’єктів гіперпосилань, що приймаються по замовчуванню
ВСТАВЛЯННЯ ГРАФІЧНОГО ЗОБРАЖЕННЯ
Дескриптор <IMG> дозволяє вставити у текст Web-сторінки графічне зображення. Графічні елементи відображаються Web-браузером автоматично у загальному потоці даних – їм не відводяться окремі стрічки, якщо це не обумовлено спеціально. Включені у склад Web-сторінки графічні зображення значно збільшують час її пересилання з Web-сервера на комп’ютер користувача.
Зображення, які вставляються у текст Web-сторінки, повинні бути представлені у вигляді файлів формату GIF або JPEG.
Наприклад,
<IMG SRC=”Назва файлу.jpg”>
Деякі користувачі використовують Web-браузери, які працюють виключно у текстовому режимі, а інші відключають відповідні функції програми для збільшення швидкості роботи. Атрибут ALT використовується для задавання тексту, який за необхідності повинен відобразитись замість графічного зображення.
Наприклад,
<IMG SRC=”Назва файлу.jpg”
ALT =”Тут зображений такий малюнок”>
Щоб розмістити на Web-сторінці графічне зображення, потрібно вказати ім’я та місце зберігання відповідного файлу. Якщо графічний файл зберігається у тій самій папці, що і файл сторінки, достатньо вказати тільки його ім’я.
Якщо файл розміщений у вкладеній папці, потрібно задати назву цієї папки та ім’я файлу.
Наприклад,
<IMG SRC=”Малюнки/Назва файлу.gif”>
Для вирівнювання положення зображення по горизонталі використовується дескриптор <CENTER>. Якщо необхідно розмістити зображення на новій стрічці, використовують теги <P> або <BR>.
Наприклад,
<BR><CENTER><IMG SRC=”Назва файлу.jpg”> </CENTER>
У склад Web-сторінки часто включають банери – графічні зображення декоративного аьо рекламного характеру, які зазвичай розташовують зверху, над текстом. Як банери використовують зображення з розмірами, що приблизно дорівнюють 450 пікселів по горизонталі і 100 пікселів по вертикалі. Такий формат відповідає вимогам ефективного заповнення простору вікна браузера. Банери зазвичай зберігаються у вигляді файлів типу GIF.
Наприклад,
<IMG SRC=”banner.gif”>
Додавання фонової графіки
Атрибут BACKGROUND, що використовується в контексті дескриптора <BODY>, дозволяє задати Web-сторінці графічний фон. Зображення, яке використовується для формування фону сторінки, зазвичай невелике за розміром; браузер автоматично розміщує його копії таким чином, щоб повність заповнити поверхню сторінки.
Наприклад,
<BODY BACKGROUND =”chocolate.jpg”>
Обрамлення графічного зображення
Атрибут BORDER дозволяє заключити графічне зображення у кольорову рамку. Рамка надає зображенню чіткості та покращує зовнішній вигляд сторінки.
Використовуючи атрибут обрамлення, потрібно вказати товщину ліній рамки у пікселях.
Наприклад,
<CENTER> <IMG SRC=”Назва файлу.jpg” BORDER =”10”> </CENTER>
Атрибут BORDER може виконувати і не безпосереднє завдання, пов’язане з усуненням рамки, в яку браузер автоматично заключає зображення, що виконує роль графічного гіперпосилання. Щоб усунути таку рамку, достатньо вказати значення товщини, рівне 0.
Задавання параметра обтікання графіки текстом
Атрибут ALIGN дозволяє встановити правила співіснування на Web-сторінці фрагментів тексту та графічного зображення.
Якщо атрибут ALIGN вже був застосований для вирівнювання тексту відносно графіки у межах конкретної Web-сторінки, встановити параметр обтікання графіки текстом не вдасться.
Атрибут ALIGN, що використовується для ознаки обтікання графіки текстом, допускає задавання будь-якого з двох значень – left або right. Значення left змушує браузер розмістити зображення зліва від тексту, а right – справа від нього. Якщо необхідно, щоб форматуванню піддався тільки окремий фрагмент тексту, потрібно використати дескриптор <BR> з атрибутом CLEAR, який вказує на позицію в тексті, починаючи з якої дія механізму обтікання графіки текстом відміняється. Значення left, right і all атрибуту CLEAR дозволяють визначити, з якої сторони – лівої, правої або з обох – текст дальше буде вільним від графічних зображень.
Наприклад,
<IMG SRC=”Назва файлу.jpg” ALIGN=”left”>
<FONT SIZE =”4”><І>Малюнок буде розміщений зліва від тексту</І> </FONT>
<BR>
Ця сторінка присвячена останнім досягненням в галузі напівпровідникової нано- і мікроелектроніки.
відобразиться браузером:
|
Малюнок буде розміщений зліва від тексту Ця сторінка присвячена останнім |
досягненням в галузі напівпровідникової нано- і мікроелектроніки. |
Наприклад,
<IMG SRC=”Назва файлу.jpg” ALIGN=”left”>
<FONT SIZE =”4”><І>Малюнок буде розміщений зліва від тексту</І> </FONT>
<BR CLEAR=” left”>
Ця сторінка присвячена останнім досягненням в галузі напівпровідникової нано- і мікроелектроніки.
відобразиться браузером:
|
Малюнок буде розміщений зліва від тексту
|
Ця сторінка присвячена останнім досягненням в галузі напівпровідникової нано- і мікроелектроніки. |
Атрибут ALIGN дає можливість розмістити текст на Web-сторінці між двома графічними зображеннями. Дескриптори, що описують зображення, повинні розташовуватись над текстом, який піддається форматуванню.
Наприклад,
<IMG SRC=”Назва файлу1.jpg” ALIGN=”left”>
<IMG SRC=”Назва файлу2.jpg” ALIGN=”right”>
Текст буде розміщений між малюнками
відобразиться браузером:
|
Текст буде розміщений між малюнками |
|