Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Уманский государственный педагогический университет им. П. Тычины

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Тестування / tema3

.doc

Скачиваний:

Добавлен:

07.02.2015

Размер:

1.48 Mб

Скачать

☆

Тема 3. Використання мови HTML для додавання об’єктів на веб-сторінку

План

Вставка спеціальних символів.
Вставка гіперпосилання до веб-сторінки.
Вставка графічного зображення.
Робота із списками.
Вставка таблиць до веб-сторінки.

1. Вставка спеціальних символів.

Нероздільний пропуск —

Приклад:

Те, що містить html-документ виглядає так:

poзмір шрифту

Те, що показує браузер виглядає так:

Коди деяких спеціальних символів

КОДИ	СИМВОЛИ
© ®	© ®
¼ ½ ¾	¼, ½, ¾
π	π
≤ ≥	<=, =>
&	&

2. Вставка гіперпосилання до веб-сторінки

Внутрішні гіперпосилання — це посилання на об'єкти в межах одного документа
Зовнішні гіперпосилання — це посилання на сторінки, розміщені на іншому веб-сервері.
Відносні або локальні посилання — це посилання на веб-сторінки, розміщені на тому ж сервері. Адреси цих посилань задаються відносно адреси веб-сторінки, на якій вони поміщені.

Зовнішні гіперпосилання записуються за такою формою:

<А HREF="URL">Teкст посилання </А>

Де URL – це адреса доступу (шлях) до сторінки.

Наприклад:

<А HREF="http://udpu.org.ua/index.htm"> Головна сторінка УДПУ</A>

Відносні (локальні посилання)

Наприклад:

<А HREF="computers.htm">Koмп'ютери виробництва ІВМ</А>

Якщо файл знаходиться в іншому підкаталозі, то необхідно вказати шлях до нього, наприклад:

<А HREF="ibm/computers.htm">Koмп'ютери виробництва ІВМ</А>

Приклад локальних посилань у html-документі

<НТМL>

<HEAD>

<TITLE> Основні розділи веб-сайта УДПУ імені Павла Тичини</ТІТLЕ>

</HEAD>

<BODY>

<А HREF=“REKT0RAT/rektorat.htm">Ректорат</A>

<А HREF=“FAKULT/fakultet.htm ">Факультети</А>

<A HREF="http://www. udpu.org.ua /ASPIRANT/index.htm">Acnipaнтypa</A>

<A HREF="http://www. udpu.org.ua /ABITUR/abiturient.htm">Абітурєнту</A>

</BODY>

</HTML>

Внутрішні гіперпосилання записуються за такою формою:

<А HREF="#Назва мітки">Текст посилання</А>

Де #Назва мітки – мітка, що вказує на об’єкт, до якого «веде» посилання.

Мітка також використовує контейнер <А></А> і задається так:

<А NAME ="назва мітки">текст</А>

Назва мітки — це довільний текст, який не з’являється на веб-сторінці й однозначно визначає місце переходу. Якщо на сторінці є кілька міток, то всі вони повинні мати різні назви.

Символ «#» при описі посилання вказує, що за ним записана назва мітки, а не назва файлу.

Приклад використання внутрішніх гіперпосилань html-документі

<HTML><HEAD><ТІТLЕ>Колекція програм мовою Visual Basic</TITLE></НЕАD>

<BODY>

До вашої уваги пропонуються програми мовою Visual Basic:

<BR>

<А HREF="#графік">Побудова графіків функцій</А><ВR>

<А HREF=''#масив">Сортування масиву</А><ВR>

<А HREF="#рівняння">Розв'язування квадратних рівнянь</А>

<BR>

<Р>

<А NAME="графік"> Побудова графіків функцій - приклад програми</А>

<BR>

(текст програми)

<А NАМЕ="масив"> Впорядкування масиву - приклад програми</А>

<BR>

(текст програми)

<А NАМЕ="рівняння"> Розв'язування квадратних рівнянь – приклад програми</А>

<BR>

(текст програми)

</BODY>

</HTML>

Приклад використання посилання на мультимедійний файл:

<Р>Натисніть<А HREF="my_music.wav">TyT</A>, щоб почути мою улюблену композицію

Файл my_music.wav повинен знаходитись на тому самому сервері, у тому самому каталозі, що і HTML-файл, з якого він викликається.

Посилання на адресу електронної пошти

<А HREF="mailto: kito@meta.ua">kito@meta.ua</A>

Якщо клацнути на ньому лівою кнопкою миші, веб-оглядач відкриє поштову програму в режимі створення листа, і в полі «Адреса» помістить адресу kito@meta.ua.

Атрибути елементу гіперпосилання A

Атрибут target:

За замовчуванням, при переході за посиланням документ відкривається в поточному вікні або фреймі. При необхідності, ця умова може бути змінена атрибутом target тега <a>. Цей атрибут може приймати такі значення:

_blank - завантажує сторінку в нове вікно браузера;

_self - завантажує сторінку в поточне вікно;

_parent - завантажує сторінку у батьківський фрейм;

_top - скасовує всі фрейми і завантажує сторінку в повному вікні браузера.

Атрибут title:

Описує вміст елемента у вигляді спливаючої підказки, яка з'являється при наведенні курсору на елемент. Вид такої підказки залежить від браузера, налаштувань операційної системи і не може бути змінений за допомогою HTML-коду або стилів.

Приклад застосування атрибутів target та title:

Вміст html-документу:

<а href="http://udpu.org.ua" target="_blank" titlе="Головна сторінка УДПУ"> УДПУ </а>

Те, що показує браузер:

3. Вставка графічного зображення.

Швидкість появи зображень залежить від їх реального розміру. Графіка, яка повільно завантажується «відлякує» відвідувачів. У веб-сторінках зазвичай використовують формат файлів - JPEG або GIF. Розмір таких зображень не повинен перевищувати 40-50 Кбайт.

Вставка графіки на веб-сторінку здійснюється за такою формою:

<IMG SRC=«URL 3o6paження»>

Де URL 3o6paження – це шлях до файлу з графічним зображенням.

Вирівнювання зображення

Дескриптор IMG з атрибутом align дає змогу здійснювати вирівнювання зображень.

Приклад вирівнювання зображень html-документі

<HTML>

<HEAD>

<TITLE> Використання атрибута align в дескрипторі IMG</TITLE>

</НЕАD>

<BODY>

<P><IMG SRC="intel.jpg" ALIGN=TOP>Цей текст вирівнюється по верхньому краю зображення </Р>

<P><IMG SRC="intel.jpg" ALIGN=MIDDLE>Цей текст вирівнюється по середній частині зображення</Р>

<P><IMG SRC="intel.jpg" ALIGN=BOTTOM>Цей текст вирівнюється по нижньому краю зображення</Р>

</BODY></HTML>

Плаваючі зображення

Плаваючі зображення — це зображення, що не прив'язуються до одного рядка тексту, а ніби «плавають» вздовж одного з полів і обрамлюються текстом.

Для створення плаваючих зображень використовується дескриптор <IMG> з атрибутом ALIGN (LEFT або RIGHT).

<IMG src="amd.jpg" align=left>

Приклад плаваючого зображення:

Розміри графічного зображення

У дескрипторі <IMG> можна використовувати атрибути:

Зображення - посилання

Зображення-гіперпосилання — це зображення на веб-сторінці, клацнувши на якому, можна відкрити нову веб-сторінку або службу Internet.

Зображення-гіперпосилання створюються за таким кодом:

<А HREF="URL"><IMG SRC=”URL-файла зображення"></А>

Тобто, елемент для вставки зображення IMG є вкладеним в елемент для вставки гіперпосилання A.

Зображення-мініатюри

Використовуються зазвичай у фотогалереях

Обробка зображень може здійснюватись за допомогою будь-якого графічного редактора.

Microsoft Office Picture Manager

Корекція розмірів
Обтинання зображення
Інші види опрацювань

Photoshop

Корекція
Обтинання зображень
Прозорість
Створення логотипів, шапок, тощо

Заголовки різних рівнів

<h1> Заголовок 1 рівня</h1>

<h2> Заголовок 2 рівня </h2>

<h3> Заголовок 3 рівня </h3>

<h4> Заголовок 4 рівня </h4>

<h5> Заголовок 5 рівня </h5>

<h6> Заголовок 6 рівня </h6>

Списки

Атрибут Type нумерованого списку

Атрибут Type маркірованого списку

Атрибут Start нумерованого списку

Вбудований список

<ol>

<li>Елемент списку 1</li>

<li> Елемент списку 2

<ul>

<li> Елемент вбудованого списку 1 </li>

<li> Елемент вбудованого списку 2 </li>

<li> Елемент вбудованого списку 3 </li>

<li> Елемент вбудованого списку 4 </li>

</ul>

</li>

<li> Елемент списку 3 </li>

</ol>

У браузері:

4. Вставка таблиць до веб-сторінки.

Для вставки таблиць у веб-сторінку використовується пара дескрипторів <TABLE></TABLE>. Дескриптор має атрибути.

Атрибут BORDER дескриптора TABLE використовується для створення рамки таблиці. Якщо цей дескриптор не вказати, таблиця не буде мати рамок.

<TABLE BORDER=n>

де n — товщина рамки у пікселях

Приклад рамки в 1 піксель:

Приклад рамки в 2 пікселя:

Приклад рамки в 6 пікселя:

Приклад створення найпростішої таблиці

<TR><TD>Koмп' ютери<TD>Принтери</TR>

<TR><TD>Клавіатури<TD>Миші</ТR>

</TABLE>

Елемент TABLE також може мати атрибути встановлення ширини та висоти таблиці. Для встановлення ширини використовується атрибут WIDTH:

Для встановлення висоти використовується атрибут HEIGHT.

Іноді виникає необхідність об’єднати рядки або стовпці таблиці. Для об'єднання стовпців таблиці використовується атрибут COLSPAN.

Приклад:

<TABLE>

<TR><TD colspan=2>Ця комірка об’єднує два стовпчики</TD></TR>

<TR><TD>Перший стовбець</TD>

<TD>Другий стовбець</TD></TR>

</TABLE>

Результат у браузері:

Для об'єднання рядків таблиці використовується атрибут ROWSPAN

Приклад:

<TR><TD rowspan=2>Ця комірка об’єднує два рядки</TD>

<TD>Перший стовбець</TD>

<TR><TD>Другий стовбець</TD>

</TABLE>

Результат у браузері:

Який буде HTML-код?

HTML-код буде таким:

<TR><TD rowspan=4> Запити на зміну </TD><TD> Додавання </TD>

<TR><TD> Видалення </TD>

<TR><TD> Оновлення </TD>

<TR><TD> Створення таблиці </TD>

</TABLE>

Який буде HTML-код?

HTML-код буде таким:

</TABLE>

Вирівнювання в таблицях

Для дескрипторів <TR> та <TD> можна використовувати атрибути:

Приклад вирівнювання - TOP

Ця комірка об’єднує два рядки</TD>

<TD>Перший стовбець</TD>

<TR><TD>Другий стовбець</TD>

</TABLE>

Приклад вирівнювання – MIDDLE

Ця комірка об’єднує два рядки</TD>

<TD>Перший стовбець</TD>

<TR><TD>Другий стовбець</TD>

</TABLE>

Приклад вирівнювання – BOTTOM

Ця комірка об’єднує два рядки</TD>

<TD>Перший стовбець</TD>

<TR><TD>Другий стовбець</TD>

</TABLE>

Проаналізувати HTML-код

<html>

<head><title>Урок на тему: "Історія розвитку обчилювальної техніки"</title></head>

<a href="first.htm">Перші обчислювальні машини</a>

<a href="fours.htm">Перші обчислювальні машини XIX століття</a>

<a href="second.htm">Перші електронно-обчислювальні машини</a>

<a href="third.htm">Покоління комп'ютерів</a>

<h2 align=center>Історія розвитку обчислювальної техніки</h2>

</font>

</table>

</body></html>

Відображення у браузері

Соседние файлы в папке Тестування

#
07.02.201550.18 Кб122tema1.docx
#
07.02.2015342.81 Кб93tema2.docx
#
07.02.20151.48 Mб59tema3.doc
#
07.02.2015700.24 Кб83tema4.docx