Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Тема: створення веб-сайтів за допомогою базових HTML тегів.

⇐ ПредыдущаяСтр 6 из 6

Мета: навчитися створювати власні веб-сторінки використовуючи гіпертекстову мову.

1. Підготовка до заняття:

1.1. Вивчити теоретичний матеріал (теоретична частина цих рекомендацій, Інтернет).

1.2. Підготувати звіт по роботі.

2. Теоретична частина

2.3. Базові HTML-теги

Дескриптори (теги) в HTML - це спеціальні елементи розмітки, що визначають, як даний документ HTML має інтерпретуватися програмою перегляду інформації в Internet - броузером. Розглянемо основні дескриптори HTML. Дескриптори HTML бувають одно- і двохкомандні. Однокомандні дескриптори зазвичай використовуються для зміни виду виведеної на екран інформації. Вони задаються в наступному вигляді:

<команда [атрибут = значення [атрибут = значення]...]> текст
Де:

· команда - команда HTML;
атрибут = значення - завдання конкретних значень параметрів (атрибутів) команди (є не обов'язковими);
текст - текст, який виводиться на екран тільки для читання у вигляді, визначеному командою і її атрибутами.

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

<команда [атрибут = значення [атрибут = значення]...]>

[Текст] [дескриптор] [[текст] [дескриптор]...]

</команда>

де / - використовується у випадку, коли тег є закриваючим в блоці тегів;

Якщо тег складається з двох команд, то першою повинна бути визначена команда без косої риси, яка сигналізує про початок виконання тега, а другий – команда з попередньою косою рисою (/), яка інформує про закінчення дії тега.

HTML-документ містить наступні основні теги:

<HTML>... </HTML> - задає початок і кінець HTML-документа;

<HEAD>... </HEAD> - заголовна частина документа, тут знаходяться тег заголовка (дивись нижче) і службові теги (мета-теги, призначені для управління сторінкою);

<TITLE>... </TITLE> - задає заголовок сторінки (виводиться в рядку заголовка броузера).

<BODY>... </BODY> - тіло документа, тут міститься та інформація, яка буде оброблятися браузером і виводитися на екрані. Всередині стартового тега елемента BODY можна розташувати ряд атрибутів, що забезпечують установки для всієї сторінки цілком;

<!... > - Коментар.

Обов'язкова структура HTML-документа повинна будуватися за шаблоном:
<HTML>

<Head>

<Title> Текст заголовка </Title>

</Head>

<Body>

...
Текст документа

...

</Body>

</HTML>

Мова НTML нечутлива до регістру (не розрізняються великі та малі літери в тегах).

2.2. Форматування тексту

У браузері текст документа виводиться з переформатуванням його відповідно до поточних розміром (шириною) основного вікна. Перенесення слів визначаються автоматично.

Розглянемо основні теги для форматування.

<P> </P> - елемент абзацу (paragraph). Елемент Р позначає кінець попереднього і початок наступного абзацу. Кінцевий тег зручно використовувати в тих випадках, коли за змістом необхідно позначити кінець абзацу. Разом з елементом Р можна використовувати атрибут align.

<BR> - елемент, що забезпечує примусовий перехід на новий рядок. Він однокомандний. У місці його розміщення рядок закінчується, а залишив-шийся текст друкується з нового рядка.

<NOBR> </Nobr> - цей елемент за своєю дією є прямою протилежністю попередньому. Текст, укладений між його тегами, буде виведений в один рядок. Довгий рядок не вміститься на екрані, і для його перегляду доведеться використовувати горизонтальну смугу прокручування.

<PRE> </Pre> - позначення тексту, відформатованого заздалегідь (preformatted). Мається на увазі, що текст буде виведений в тому вигляді, в якому він був підготовлений користувачем. Наприклад, враховуються символи кінця рядка, що з'явилося при наборі тексту в редакторі. В усих інших випадках браузер ігнорує ці символи. Цей елемент зручно використовувати для демонстрації лістингів програм або для виведення текстових документів, переформатування яких може призвести до спотворення їх змісту.

<BLOCKQUOTE> </Blockquote> - позначення цитати. Цей елемент вимагає наявність кінцевого тега. Текст не зазнає жодних змін, але абзац розташовується з відступом. До лапок цей елемент теж не має ніякого відношення: якщо в цитаті використовуються лапки, то вони повинні бути проставлені явним чином. В даний час використовують і інше написання цього елемента: BQ.

<CENTER> </Center> - центрування тексту, а точніше, будь-якого вмісту. Не є загальновживаним.

<DIV> </Div> - вирівнювання вмісту по лівому краю, по центру або по правому краю. Для цього стартовий тег повинен містити відповідний атрибут:

· align=''left''

· align=''center''

· align=''right''

<PLAINTEXT> </Plaintext> - цей елемент призначений для створення тексту з конструкціями HTML, які повинні сприйматися саме як текст. Всі теги, укладені в PLAINTEXT, сприймаються броузером тільки як довільні символи. Елемент зручно використовувати для обговорення питань, пов'язаних з використанням HTML.

<CODE> </Code>, <SAMP> </samp> і <VAR> </var> - призначені для виведення фрагментів програм. CODE використовується для форматування тексту програми. SAMP передбачається задіяти при ілюстрації прикладів виведення даних на екран. VAR був створений для виділення змінних. Як правило, всі ці елементи забезпечують виведення інформації з використанням моноширинного шрифту.

<KBD> </Kbd> - цей елемент призначений для вказівки тексту, який користувач повинен ввести з клавіатури. Можна розраховувати, що текст, виділений за допомогою цього елемента, буде виділено моноширинним шрифтом в напівжирному накресленні.

Приклад 1.

<HTML>

<HEAD>

<TITLE> Приклад 1 </TITLE>

</HEAD>
<BODY>

У даному тексті <BR> позначено два абзаци.

Це перший з них. <P>

Другий абзац складається з одного рядка. <P>

</BODY>
</HTML>

Результат пpи перегляді в бpаузеpі:

У даному тексті

позначено два абзаци. Це перший з них.

Другий абзац складається з одного рядка.

Тег <HR> відображає горизонтальну лінію, що йде через весь екран.

Приклад 2.

<BODY>

Текст1. <P> <HR>

Текст2. <P> <HR>

</BODY>

Результат:
Текст1.

Текст2.

2.3. Шрифти.

В Html-документі можна задавати шість рівнів шрифтів заголовків. Загальний синтаксис директиви визначення заголовка такий:

<Hx> Заголовок </ Hx>,

де x - це номеp pівня від 1 до 6. <H1> - самий великий заголовок, <H6> - найменший.

Приклад 3:

<H1> Тема pівня 1 </H1>

<H6> Тема pівня 6 </H6>

Результат:

Тема pівня 1

Тема pівня 6

<BASEFONT> - цей тег визначає базовий (основний розмір шрифту). Усередині елемента необхідно вказати атрибут: size=Базовий розмір шрифту

Величина атрибута може лежати в межах від 1 до 7. За замовчуванням використовується величина 3. Установка, виконувана цим елементом, має значення для елемента FONT, який дозволяє задавати відносний розмір шрифту.

<FONT> </FONT> - визначення типу, розміру та кольору шрифту. Всі ці характеристики визначаються за допомогою відповідних атрибутів. Наприклад, абсолютний розмір шрифту задається за допомогою атрибуту size (розмір):

size=Абсолютний розмір шрифту

Розмір шрифту може задаватися відносно базового:

size=+ число

size=-число

При такому визначенні величини для size необхідно враховувати величину базового розміру. Обидві вони в сумі повинні відповідати одному з абсолютних розмірів. Так для базового розміру, рівного 3, відносний розмір може перебувати в межах від -2 до +4. Якщо величина виходить за допустиму межу, то використовується або шрифт розміру 7, або шрифт розміру 1.

Для тега FONT можна використовувати атрибут кольору:

color=''Колір''

Атрибут face (вид) дозволяє задавати тип шрифта:

face=''Назва шрифту''

Якщо в системі не встановлений шрифт точно з такою ж назвою, то браузер використовує свій стандартний. Він має два призначених за замовчуванням шрифти: один пропорційний, інший моноширинний.

Інші теги форматування тексту:

<B> </B> - виділення тексту напівжирним шрифтом.

<BIG> </Big> - збільшений розмір шрифту.

<SMALL> </Small> - зменшений розмір шрифту.

<I> </I> - виділення тексту курсивом.

Теги <EM> </Em> і <DFN> </dfn> - означають виразність фрагмента тексту і визначення чого-небудь. Обидва елементи аналогічні за своєю дією елементу I, тобто, в більшості випадків дозволяють виділити текст курсивом. Вони можуть стати в нагоді тільки для того, щоб одноманітно виділити однакові за призначенням (або змістом) фрагменти тексту, що знаходяться в різних частинах документа або навіть на різних сторінках. Розробник в цьому випадку не може точно знати, який саме шрифт буде використаний: це визначається кожним броузером по-своєму. Але він може бути точно впевнений, що всі фрагменти тексту будуть відформатовані однакові.

<TT> </Tt> - позначає текст телетайпу. Його особливість полягає у використанні моноширинного шрифту.

<U> </U> - підкреслене накреслення тексту.

<STRONG> </Strong> - відповідає за виділення тексту. Зазвичай його застосування рівносильне використання елемента для виділення напівжирним.

<SUB> </Sub> - створює ефект нижнього індексу.

<SUP> </Sup> - створює ефект верхнього індексу.

2.4 Списки

Список відрізняється від звичайного тексту перш за все тим, що користувачеві не треба думати про нумерацію його пунктів: це завдання бере на себе програма. Якщо список додається новими пунктами або коротшає, нумерації коригується автоматично. У випадку ненумерованих списків програма ставить перед кожним пунктом маркери: кружечки, прямокутники, ромби або інші зображення. У результаті список приймає легкий для читання, "фірмовий вигляд". Теги для створення списків можна умовно розділити на дві групи: одні визначають загальний вид списку (і дозволяють використовувати атрибути), а інші ставлять його внутрішню структуру. Існує кілька різновидів списків:

1) Ненумерованний список (unordered list):

<UL>

<LI> Пункт 1 списку

<LI> Пункт 2 списку

<LI> Пункт 3 списку

</UL>

Елемент UL є своєрідним обрамленням списку і дозволяє відокремлювати один список від іншого.

Елемент LI позначає кожен з пунктів.

2) Нумерований список:

<LI> Пункт 1

<LI> Пункт 2

<LI> Пункт 3

<LI> Пункт 4

</OL>

Спосіб нумерації задається за допомогою атрибуту type.

Атрибут Послідовність нумерації

type ='' 1'' - 1, 2, 3, 4,...

type ='' i'' - i, ii, iii, iv,...

type ='' I'' - I, II, III, IV,...

type ='' a'' - a, b, c, d,...

type ='' A'' - A, B, C, D,...

Наведемо приклад упорядкованого (нумерованого) списку:

Пункт 1

Пункт 2

Пункт 3

Пункт 4

3) Списки з визначеннями (definition lists):

<DL>

<DT> Пункт 1

<DD> Визначення пункту 1

<DD> Інше визначення пункту 1

<DT> Пункт 2

<DD> Визначення пункту 2

<DT> <Пункт 3

<DD> Визначення пункту 3

</DL>

Кожен пункт списку може бути доповнений одним або кількома блоками тексту за допомогою тегів DD. Кожен блок автоматично розміщується з нового рядка. Термін "визначення" носить умовний характер. Абзаци, розміщені в списку, можуть бути визначеннями, доповненнями, роз'ясненнями пунктів. По суті, пункт являє собою заголовок, а визначення - довільний текст під заголовком.

2.5 Таблиці в HTML-документі

Загальний синтаксис побудови таблиць такий:

<CAPTION> Назва таблиці </CAPTION>

текст_табліци

</TABLE>

Обов'язковий параметр BORDER задає ширину рамки таблиці в пікселах. Необов'язковий параметр WIDTH задає розмір таблиці у відсотках щодо розміру вікна браузера.

Структура таблиці будується з тегів завдання рядка - TR і комірки - TD:

<TR>

<TD> Комірка 1 </TD>

<TD> Комірка 2 </TD>

<TD> Комірка 3 </TD>

</TR>

Тут визначено рядок з трьома комірками.

Приклад таблиці:

<HTML>

<HEAD>

<TITLE> Приклад таблиці </TITLE>

</HEAD>

<BODY>

<CAPTION> Таблиця </CAPTION>

<TR>

<TD> Комірка 1</TD>

<TD> Комірка 2 </TD>

<TD> Комірка 3 </TD>

<TD> Комірка 4 </TD>

</TR>

<TR>

<TD> Комірка 5 </TD>

<TD> Комірка 6 </TD>

<TD> Комірка 7 </TD>

<TD> Комірка 8 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Результат:

Таблиця
Комірка 1	Комірка 2	Комірка 3	Комірка 4
Комірка 5	Комірка 6	Комірка 7	Комірка 8

Атрибути дескриптора TABLE:

· align - вирівнювання по горизонталі (left, center, right),

· bgcolor - колір фону (наприклад # 000000 - чорний),

· background - фонова графіка (малюнок у форматі GIF або JPEG),

· border - товщина рамки таблиці,

· bordercolor - колір рамки таблиці (IE),

· bordercolordark - темний колір рамки (IE),

· bordercolorlight - світлий колір рамки (IE),

· cellspacing - відстань між осередками таблиці,

· cellpadding - відстань між вмістом комірки і рамкою,

· width - ширина таблиці,

· height - висота таблиці.

Табличні рядки формуються дескриптором <TR>

Атрибути дескриптора TR:

· align - вирівнювання по горизонталі (left, center, right),

· bgcolor - колір фону,

· bordercolor - колір рамки рядки,

· bordercolordark - темний колір рамки рядка (IE),

· bordercolorlight - світлий колір рамки рядка (IE),

· valign - вирівнювання по вертикалі (top, center, bottom, baseline).

Комірки даних формуються дескриптором <TD>.

Атрибути дескриптора TD:

· align - вирівнювання по горизонталі (left, center, right),

· background -фонова графіка,

· bgcolor - колір фону,

· bordercolor - колір рамки рядки,

· bordercolordark - темний колір рамки рядка (IE),

· bordercolorlight - світлий колір рамки рядка (IE),

· colspan - охоплюваних осередком стовпці,

· rowspan - охоплюваних осередком рядки,

· nowrap - вимкнення розриву рядків,

· valign - вирівнювання по вертикалі (top, center, bottom, baseline),

· width - ширина комірки,

· height - висота комірки.

Тег заголовка таблиці <TH>. Його атрибути такі-ж, як і у тега <TD>.

2.6. Гіперпосилання

Гіпертекстові посилання (гіпеpзв’язки) - це покажчик на визначене місце в поточному або іншому документі.

Для вбудовування гіперзв'язки використовується наступний загальний синтаксис:
<A HREF="адрес_ресурса "> Маршрутизатор </A>

де адpес_pесуpса - URL-адpес, з яким встановлюється гіпеpзв’язок;

Маршрутизатор - це текст або інший об'єкт, при натисканні на який мишею виконується перехід за адресою, вказаною в адресі ресурса посилання.

Рекомендується укласти значення атрибута адрес_ресурса в лапки (або одинарні, або подвійні). Рядок в лапках не повинен містити такі ж лапки всередині себе.

Можна також опустити лапки для значень атрибутів, які складаються тільки з наступних символів: символів англійського алфавіту, цифр, проміжків часу, дефісів.

Існує тpи основних типу гіперзв’язків:

· посилання на дpугое місце всередині одного документа:
<BODY>
<A HREF ="#метка "> маpшpутизатоp

</A>

Текст документа

</A>

.. <! - В це місце буде здійснено перехід

</BODY>

· посилання на інший Internet-документ (файл):

<A> HREF = "http://www.hitachi.com>

монітори

</A>

При натисканні мишею в тексті HTML-документа на виділений текст "монітори" відбувається автоматичний перехід в мережі Internet на сторінку фірми Hitachi, зазначену в адресі ресурсу.

· посилання на певне місце іншого документа (файла):
<A> HREF = "http://www.hitachi.com/index.html # мітка>

Монітори

</A>

При цьому в документі index.html повинна бути позначка
<A NAME="метка"> </A>

Тег <BASE>.

Цей тег призначений для установки базової адреси (URL) для посилань. Це дозволяє опускати їх початкову частину.
Для використання елемента необхідна наступна конструкція:

Фрагмент путь1 не є обов'язковим.

Якщо треба задати базову адресу для локального диску (наприклад, C:), повинна бути використана така конструкція:

Тоді при вказівці відносної посилання можна задати не тільки ім'я файлу, а й імена папок, в яких він знаходитися. Іншими словами, шлях до файлів може бути розбитий на дві частини: абсолютну і відносну. Це корисно в тому випадку, коли для файлів зазначених у документі, є спільний початковий фрагмент шляху.

У виразі абсолютної посилання можна також опустити вказівку на схему доступу (file:/ /). В цьому випадку будуть враховуватися тільки ліва частина абсолютної посилання до першого лівого символу "\", то є ім'я локального диска.

2.7. Вставка графічних і мультимедійних об'єктів.

Графічні файли можуть бути безпосередньо вбудовані в HTML-документ. Для вбудовування посилань на гpафіческіе файли використовується наступний синтаксис:

<IMG SRC="імя.файла" ALT="текстовий опис"

ALIGN="місцезнаходження">,

де IMG - тег посилання на графічний файл, шлях пошуку якого визначається значенням атрибута SRС.

Необов’язковий атрибут ALT вміщує текстовий опис графічного обpазу, який за замовчуванням відображається під картинкою.

Необов'язковий атрибут ALIGN призначений для завдання розташування виведеного текстового опису образу і може приймати значення: BOTTOM, TOP, MIDDLE. Можна задавати малюнок всередині тега, що задає гіперпосилання, в якості маршрутизатора.

Наприклад:

Загальний синтаксис тега підключення аудіо- та відеофайлів має такий вигляд:

<A HREF="ім’я_файла"> виділений текст </A>

Коли користувач клацне кнопкою миші на виділеному тексті, бpаузеp прийме вказаний файл зі звуковим фрагментом або відео і запустить зовнішню пpогpаму для його перегляду (залежно від використовуваного формату).

Порядок виконання роботи.

Для створення HTML-документів використовується один зі звичайних текстових процесорів (наприклад Блокнот) або редактор тегів (наприклад, Homesite).

1) Перед початком виконання роботи необхідно скласти HTML-опис створюваного WWW-документа відповідно до індивідуального завдання.

2) Після закінчення набору документа в редакторі тексту, необхідно записати його у файл на диску. Завантажити програму - браузер. Після закінчення завантаження викликати створений раніше файл з WWW - документом.

3) Налагодити текст документа в браузері.

4) Підготувати детальний звіт по роботі.

4. Варіанти індивідуальних завдань.

Студенти обирають одну із зазначених тем:
1. Розробити сайт юридичної фірми.
2. Розробити сайт-візитку юриста-консультанта.
3. Розробити особистий сайт.

5. Зміст звіту.

1. Мета роботи. Варіант завдання.
2. Карта розроблюваного сайту. Вихідні тексти WWW-документів.
3. Роздруківка форми відображення WWW - документа в браузері.
4. Висновки по роботі.

6. Контрольні питання.

1. Які особливості синтаксису мови гіпертекстових посилань (HTML).

2. Які групи директив HTML ви знаєте?

3. У чому суть гіпертекстової форми подання WWW – документів

4. Як використовувати графічний образ в якості маршрутизатора гіперпосилання?

5. Опишіть етапи створення Web-документа.

6. Що таке браузер?

7. Як на основі HTML відображаються заголовки, шрифти, списки, заздалегідь відформатований текст, гіперпосилання?

8. Які є способи створення і редагування Web-документів?

⇐ Предыдущая 1 2 3 4 56

Читайте также:

Формы дистанционного обучения

Передача мяча двумя руками снизу

Значение правильной осанки для жизнедеятельности человека

Основные ошибки при выполнении передач мяча на месте

Последнее изменение этой страницы: 2016-07-11; просмотров: 250; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.221.239.148 (0.116 с.)