Студопедия

КАТЕГОРИИ:

АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

Відкрийте редактор NotePad.

Стр 1 из 2Следующая ⇒

Теоретичні відомості.

Для створення web-сторінок користуються гіпертекстовими редакторами, наприклад, HotMetalPRO, Hot Dog Professional, Netscape Editor, webedit, HTMLWriter, HTML Assistant, HTMLed, де використовується мова HTML – Hyper Text Markup Language (мова для розмічування гіпертекстових документів). Сучасні редактори, такі як FrontPage, Dream Viewer, MS Word тощо, дають змогу створювати web-сторінки методом конструювання, тобто без застосування кодів мови HTML. Вони генерують цей код автоматично.

Для підготовки html-файлу ми використовуватимемо текстовий редактор NotePad, що дає змогу готувати файли у текстовому форматі. Після написання html-файл потрібно зберегти на диску з деякою назвою з розширенням назви htm чи html.

Структуру html-файлу продемонструємо за допомогою тексту, де деяка особа розповідає про себе:

<HTML>                        <!--Це файл filel.htm-->

<HEAD>

<TITLE> Назва вікна web-сторінки </TITLE>

</HEAD>

<BODY параметри>

<!--Далі йде текст, наприклад, такий. -->

Мене звати Світлана. Мені 16 років.

Я хочу стати web-дизайнером.

Це моя перша web-сторінка. Тут я можу писати будь-який текст, наприклад, про себе і мої інтереси. Пізніше я навчуся вставляти фотографії, картинки, звук, відеозображення шляхом посилання на відповідні графічні, звукові чи відеофайли. Я збережу цей файл на диску і відкрию його у броузері. Моя сторінка ще не красива і не цікава. Але скоро я навчуся робити цікаві web-сторінки.

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

</BODY>

</HTML>

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

Рис. 1 Текст html-файлу у вікні броузера.

Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів парні, як, наприклад, тег означення html-файлу: <HTML> ... </HTML>. Такі теги називаються інакше контейнерами. Контейнер може містити текст та інші теги.

Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках. Тег, що закриває область дії, має косу риску. Не забувайте її писати, інакше тег працюватиме неправильно.

Тег може містити параметри, які користувач записує у першому блоці тега через пропуск чи з нового рядка, наприклад, <BODY TEXT="red">...</BODY>. Нечислові значення параметрів прийнято записувати у лапках.

У середині пари тегів <HEAD>...</HEAD> описують заголовок документа. Головна частина заголовка документа - заголовок Windows-вікна, який пишуть у середині пари тегів <TITLE>...</TITLE>.

Тег <!-- текст --> позначає коментар. Текст у середині цього тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текст-коментар </COMMENT>.

У середині пари тегів <BODY параметри>... </BODY> записують увесь текст сторінки. Цей текст відображатиметься у вікні броузера.

Щоб на екрані відобразити звичайним способом стандартний текст, жодного програмування не потрібно - достатньо набрати потрібний текст. Якщо ж дизайнер хоче подати текст спеціально, щоб він виглядав якнайкраще, до тексту застосовують теги форматування. У цьому, зокрема, і полягає суть програмування мовою HTML.

Розглянемо головні параметри тега BODY:

BACKGROUND="d:\myweb\picture1.jpg" Задає шлях до картинки для тла
BGCOLOR="red" Задає червоний колір тла, якщо не використовується тло-картинка
BGPROPERTIES="fixed" Фонове зображення не прокручується
TEXT="blue" Задає колір тексту (тут синій) на сторінці

Інші параметри, що стосуються способів відображення гіперпосилань (LINK, VLINK, ALINK), вивчатимемо пізніше.

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

Теги форматування символів тексту (вони парні):

<В> текст </В> Товстий шрифт тексту
<І> текст <I> Шрифт-курсив
<U> текст </U> Підкреслений шрифт
<SUB> текст </SUB> Нижній індекс. Наприклад, щоб отримати вираз Н2О, пишуть H<SUB>2</SUB>O
<SUP> текст </SUP> Верхній індекс, наприклад, 1а вулиця, а2
<BIG> текст </BIG> ВЄЛИКИЙ шрифт
<SMALL> текст </SMALL> малий шрифт
<EM> текст </ЕМ> Виокремлений курсивом текст (те саме, що тег І)
<B> <I> текст </І></В> Товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів
<font size=”число” color=”колір” family=”тип шрифта”>…</font> Задає розмір, колір та тип шрифта

Теги для розміщення тексту (деякі з них одинарні):

<р> Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. Наступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р>. Тег <Р> може мати параметр align=”вирівнювання”, який встановлює тип вирівнювання для абзацу.
<BR> Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка
<pre> текст </pre> Відображає текст у броузері так, як він виглядає у текстовому редакторі (з усіма абзацами, знаками пробілу)
<HR> У рядку буде проведена горизонтальна лінія. Тег <HR> може мати наступні параметри: size=”число”, align=”тег вирівнювання”, noshade, які встановлюють товщину, ширину, вирівнювання та прибирають тінь для горизонтальної лінії.

Тег <HR> може мати наступні параметри: size=”число”, align=”вирівнювання”, noshade, які встановлюють товщину, ширину, вирівнювання та прибирають тінь для горизонтальної лінії.

Заголовок - окремий тип абзацу. Є шість видів заголовків, які відрізняються розмірами символів:

Теги Результат на екрані
<Н1>Заголовок 1</Н1> Заголовок 1
<Н2>Заголовок 2</Н2> Заголовок 2
<НЗ>Заголовок 3</НЗ> Заголовок 3
<Н4>Заголовок 4</Н4> Заголовок 4
<Н5>Заголовок 5</Н5> Заголовок 5
<Н6>Заголовок 6</Н6> Заголовок 6

Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:

<CENTER> елемент </CENTER> Вирівнювання до центру
<LEFT> елемент </LEFT> Вирівнювання до лівого краю
<RIGHT> елемент </RIGHT> Вирівнювання до правого краю
<JUSTIFY>…</JUSTIFY> Вирівнювання по ширині

Зауваження. Теги заголовків не варто використовувати для створення звичайних абзаців з різними розмірами шрифту.


Хід роботи

Відкрийте редактор NotePad.




12Следующая ⇒






Последнее изменение этой страницы: 2018-04-12; просмотров: 232.

stydopedya.ru не претендует на авторское право материалов, которые вылажены, но предоставляет бесплатный доступ к ним. В случае нарушения авторского права или персональных данных напишите сюда...