Завдання
Розробити текстовий одномовний варіант персональної сторінки та виконати її розміщення на сервері.
Вимоги до оформлення результатів роботи в електронному вигляді
Звіти по всіх наступних лабораторних роботах виконуються у вигляді HTML-сторінок, які повинні бути через відповідні посилання підключені до головних сторінок.
Лабораторна робота № 2
Шаблони і посилання:
Розробка мультимовного варіанту
персональних сторінок
Мета роботи: вивчити і практично оволодіти сучасними технологіями розробки гіпертекстових документів на основі використання HTML з використанням шаблонів та посилань, оформити та розташувати на сервері мультимовний текстовий варіант персональної Web-сторінки.
Шаблони
При переході від спрощеного варіанта персональної сторінки (текстового) до більш складних мультимовних версій з'являється необхідність створення шаблонів. Перехід між сторінками здійснюється за допомогою посилань.
Шаблони - це зразки сайтів чи сторінок, які можна заповнювати в міру необхідності. Вони містять у собі структуру, що може служити гарною стартовою площадкою для розробки розширеного варіанта сайту чи сторінки.
Зручність використання шаблонів полягає в тім, що для створення сторінки мовою, відмінному від шаблона, необхідно лише замінити текст і деякі посилання, що мають відношення до переходу між мовними версіями.
Таким чином, сайт буде складатися з однакових за структурою сторінок, але зміст окремої сторінки буде відповідати обраній мові.
Посилання
<a href ="URL" tіtle="спливаюча підказка">
<іmg src="photo.gіf" ALT="будь-який текст, поки не завантажиться
зображення">
a - anchor,
href - hypertext reference,
URL - Unіversal Resource Locator.
Загальні рекомендації з розміщення посилань у документах:
1. Максимально уникати графічних посилань, а всі графічні посилання обов'язково супроводжувати альтернативним текстом.
2. Оформлення текстових посилань максимально повинне відповідати стандартам „де факто”.
3. У текстові посилання включати не більш 4 слів. Велика кількість підкресленого тексту є додатковим навантаженням для користувача.
Організація посилань усередині документів:
<a name = "M1">Розділ 1</a>
<a href = "#M1">Розділ 1</a>
Класифікація посилань
Три категорії посилань (по ознаці розташування):
1. усередині документа (#);
2. локалізовані в межах каталогу (вказується ім'я файлу з ім'ям підкаталогу, наприклад: dіs/dіssert.htm);
3. у виді повної вказівки ресурсів (URL).
Три категорії посилань по призначенню:
1. С - структурні посилання (зв'язують окремо узяті сторінки в сайт);
2. А - асоціативні (розміщаються довільно по тексту);
3. К - коментарі до тексту.
Три фактори, що впливають на швидкість завантаження сторінок:
1. Завантаженість і пропускна здатність сервера.
2. Інфраструктура мережі і її поточний стан.
3. Швидкість підключення користувача.
|
Посилання |
<A HREF="URL"></A> |
|
|
Посилання на закладку |
<A HREF="URL#***"></A> |
(в іншому документі) |
|
<A HREF="#***"></A> |
(у тім же документі) | |
|
На інше вікно |
<A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"></A> |
|
|
Визначити закладку |
<A NAME="***"></A> |
|
Також інколи (не на головній сторінці) можна використовувати фрейми. Даний спосіб не виключає створення шаблонів, однак допомагає створити єдине меню для усього сайта.
|
Документ із фреймами |
<FRAMESET></FRAMESET> |
(замість <BODY>) |
|
Висота рядків |
<FRAMESET ROWS=,,,></FRAMESET> |
(крапки чи %) |
|
Висота рядків |
<FRAMESET ROWS=*></FRAMESET> |
(* = відносний розмір) |
|
Ширина стовпчиків |
<FRAMESET COLS=,,,></FRAMESET> |
(крапки чи %) |
|
Ширина стовпчиків |
<FRAMESET COLS=*></FRAMESET> |
(* = відносний розмір) |
|
Ширина окантовки |
<FRAMESET BORDER=?> |
|
|
Окантовка |
<FRAMESET FRAMEBORDER="yes|no"> |
|
|
Колір окантовки |
<FRAMESET BORDERCOLOR="#$$$$$$"> |
|
|
Визначити фрейм |
<FRAME> |
(зміст окремого фрейму) |
|
Документ |
<FRAME SRC="URL"> |
|
|
Ім'я фрейму |
<FRAME NAME="***"|_blank|_self| _parent|_top> |
|
|
Ширина границі |
<FRAME MARGINWIDTH=?> |
(права і ліва границі) |
|
Висота границі |
<FRAME MARGINHEIGHT=?> |
(верхня і нижня границі) |
|
Скролінг? |
<FRAME SCROLLING="YES|NO|AUTO"> |
|
|
Постійний розмір |
<FRAME NORESIZE> |
|
|
Окантовка |
<FRAME FRAMEBORDER="yes|no"> |
|
|
Колір окантовки |
<FRAME BORDERCOLOR="#$$$$$$"> |
|
|
Зміст без фреймів |
<NOFRAMES></NOFRAMES> |
(для переглядачів не підтримуючіx фрейми) |