Мова HTML
Для створення Web-сторінок використовується спеціальна мова - HTML
(скорочення від англ. Hyper Text Markup Language мова розмічування
гіпертексту). HTML-документ - це звичайний текстовий файл з
розширенням..htm або .html. Web-cтopінка зберігається як HTML-документ.
Відображаються такі файли на екрані зовсім інакше, ніж вони виглядають у
html-файлі. Для відображення html-файлів використовують броузери. Головна
мета HTML - описати зовнішній вигляд документа. Для цього в текст
документа вставляються спеціальні коди - дескриптори, або, як їх ще
називають, теги (від англ. tag - етикетка, бирка). Вони визначають способи
форматування і дозволяють зв'язати слова і фрази документа з іншими
документами в Internet. Для створення Web-сторінок Web-дизайнери
використовують гіпертекстові Web-редактори, наприклад, NotMetal PRO, Hot
Dog Professional, Netscape Editor тощо, де використовується мова HTML .
Сучасні редактори Frontpage і MS Word дають змогу створювати Web-сторінки
методом конструювання без застосування кодів мови HTML, оскільки коди вони
генерують автоматично. Створити Web-сторінку можна в будь-якому текстовому
редакторі. Для створення Web-сторінки відкрийте будь-який текстовий
редактор (наприклад, Блокнот) , введіть текст програми та збережіть його
виконавши команду Файл/Сохранить как . В діалоговому вікні введіть назву
файла Web-сторінки та обов'язково вкажіть розширення htm або html.
Найчастіше головну сторінку сайта прийнято називати index.html. В списку
Тип файла виберіть елемент Текстовий документ. Після вказаних параметрів
натисніть на кнопку Сохранить.
1.Як створюються Web-сторінки
Приступаючи до створення Web-сторінок, ясно уявіть собі їхнє
призначення. Вирішіть, якій темі буде присвячений майбутній сайт, і
визначіть тип інформації, яку слід на ньому представити. Самий очевидний
приклад - побудова особистого сайта, що містить відомості про родину,
область професійних інтересів і коло захоплень. Web-сторінки ділового
характеру дозволять відвідувачам ознайомитися з особливостями вашого
бізнесу, прес-релізами, каталогами й оголошеннями. Якщо ви послідуєте
приведеним нижче рекомендаціям, ваші Web-сторінки придбають привабливий
зовнішній вигляд і принесуть безсумнівну користь майбутнім читачам.
Поради по створенню:
1) Збір інформації
Підготуйте всі дані, що збираєтеся представити на сторінках майбутнього
сайта - тексти, картинки, діаграми і компактні відомості. Переконайтеся,
що вся зібрана інформація має пряме відношення до обраної теми і становить
інтерес для аудиторії. У процесі збору даних не забувайте про те, що перед
опублікуванням будь-якої запозиченої інформації ви повинні заручитися
дозволом її авторів.
2) Організація даних
Поділіть зібрані дані на групи. Кожна група повинна представлятися
окремою Web-сторінкою, присвяченої конкретному предмету чи визначеній
темі. Непогано, якщо Web-сторінка буде містити обсяг інформації, достатній
для заповнення одного екрана. Майте на увазі, що розміщення надлишкового
числа інформаційних елементів на одній сторінці приведе до істотного росту
розміру файлу цієї сторінки і, як наслідок, до невиправданого збільшення
часу пересилання файлу на комп'ютер користувача.
3) Введення інформації
За допомогою програми текстового редактора чи процесора введіть текст,
що повинний відображатися на ваших Web-сторінках. Кожну сторінку варто
зберегти у виді окремого файлу-документа. Помітьте текст дескрипторами
HTML, щоб перетворити його у формат Web-сторінок. За допомогою
дескрипторів HTML можна доповнити Web-сторінки графічними зображеннями,
таблицями, аудіо- і відеозаписами.
4) Додавання гіперпосилань
Додавання гіперпосилань - надзвичайно важливий етап проектування
Web-сторінок. Гіперпосилання у вікні броузера виглядають як фрагмент
тексту чи графічне зображення, що дозволяють користувачу переміститися до
необхідної сторінки Web одним клацанням кнопки миші.
5) Опублікування Web-сторінок
По завершенні роботи над Web-сторінками ви повинні звернутися до однієї
з компаній- провайдерів (Web Presence Provider - WPP), що надають послуги
по опублікуванню Web-сторінок. WPP забезпечить збереження ваших
Web-сторінок на власному сервері і доступ до них ззовні. Після
опублікування сторінок ви повинні ще раз переконатися в тому, що всі
гіперпосилання діють так, як вами задумано, і інформація у вікні броузера
виглядає належним чином.
2. Структура Web-документа.
Типовий простий Wеb- документ складається з текстових блоків,
двох-трьох малюнків невеликих розмірів, горизонтальних ліній та
гіперпосилань. Більшість складні Web-документи містять фрейми (вкладені
Web-сторінки), елементи керування (кнопки, перемикачі, поля діалогу),
динамічні ефекти та графічні об'єкти ActiveX . Є три типи текстових
блоків: короткі (по два-три речення)текстові абзаци, списки, таблиці.
Згідно з прийнятим стандартом абзаци на Web-сторінці розмежовуються
порожнім рядком і не мають відступів у першому рядку. Абзац може бути
вирівняний до одного з країв або до центру екрана. Особлива зручність
перегляду інформації зумовлена тим, що в нормальному режимі на
Web-сторінці немає горизонтальної смуги прокручування (а вертикальна є).
Броузер автоматично масштабує горизонтальне зображення різних елементів
сторінки, враховуючи характеристики монітора ,комп'ютера , клієнта і
розміри Windows-вікна, в якому демонструється документ. Інформація на
сторінці традиційно подається на сірому чи білому фоні, але її можна
розмістити і на кольоровому фоні чи на фоні картинки з деякого графічного
файлу.
3. Структура програми мовою HTML.
Програма мовою HTML (html-файл) має таку загальну структуру:
<HTML>
<HEAD>
<TITLE> Назва вікна
Web-сторінки </TITLE>
</HEAD>
<BODY
параметри>
Зміст сторінки: текст, графіка,
посилання…….
</BODY>
</HTML>
Зручно один раз підготувати файл, який потім будете використовувати
як шаблон-основу для створення інших Web-сторінок. Команди мови HTML
називаються тегами . Теги бувають одинарними і парними. Більшість тегів є
парними, як наприклад, тег означення HTML-файлу: <HTML> ...
</HTML>. Парні теги позначають початок і кінець області дії
відповідної команди. Теги записують у кутових дужках < >.
Тег, що закриває область дії, має косу риску. Не забувайте її писати,
інакше тег працюватиме неправильно. Тег може містити параметри, які
користувач записує у першому тезі через пропуск, наприклад, <BODY
TEXT="red">. Між тегами <TITLE>...</TITLE>
пишуть заголовок Windows-вiкна, а між <BODY
параметри>...</ВОDY> - основний текст, до якого застосовують
теги форматування. В текст програми можна добавляти коментарі , які
записуються між роздільниками <!- -текст- -> Наприклад:
<HTML>
<HEAD>
<TITLE>Сторінка ВПУ-11
</TITLE>
</HEAD>
<BODY>ВПУ-11 знаходиться у місті
Вінниця
</BODY>
</HTML>
Після перегляду файлу у броузері отримаємо наступну Web-сторінку:
Розглянемо основні параметри тега BODY:
BACKGROUND = "шлях до графічного файлу"- задає картинку для фону;
BGCOLOR = "white" - задає білий колір фону, якщо не використовується
фон-картинка; TEXT = "black" - задає колір тексту (тут чорний) на
сторінці. Основні кольори мають такі назви:
black - чорний
navy - темно-синій
silver - сірий
blue -
синій
maroon - малиновий
purple- бузковий
red -
червоний
fushsia - рожевий
|
green - зелений
teal - бірюзовий
lime - яскраво-зелений
aqua - блакитний
olive - темно-зелений
gray -
темно-сірий
yellow - жовтий
white -
білий
|
Зауваження. Немає єдиного стандарту
мови HTML. Деякі теги чи їхні параметри не діють у всіх броузерах. Деякі
теги і параметри для різних броузерів називаються по-різному. Якщо в
написанні тега, назви параметра чи в його значенні допущено синтаксичну
помилку, то тег чи параметр не діятимуть. Наприклад, якщо в попередньому
прикладі дописати наступний параметр <BODY BGCOLOR="GREEN">,
то отримаємо наступну Web-сторінку.
Завдання 1.
Створіть свою особисту Web-сторінку. Викличіть Notepad чи деякий
Web-редактор. Введіть текст про себе та збережіть під іменем 1.htm
Контрольні питання:
1. Що таке тег?
2. Які бувають теги?
3. Як записуються
теги?
4. Для чого призначений тег?
4. Теги для форматування тексту.
Для кращого зображення тексту його можна відформатувати. Форматування
тексту включає: форматування шрифту, абзаців.
При форматування шрифту
можна змінити його розмір, стиль написання, накреслення.
При складанні
тіла сторінки звичайно починають із заголовків та підзаголовків. Є шість
видів заголовків, які відрізняються розмірами символів:
| Теги |
Результат на екрані |
| <Н1>Заголовок 1</Н1> |
Заголовок 1 |
| <Н2>Заголовок 2</Н2> |
Заголовок 2 |
| <НЗ>>Заголовок 3</НЗ> |
Заголовок 3 |
| <Н4>Заголовок 4</Н4> |
Заголовок 4 |
| <Н5>Заголовок 5</Н5> |
Заголовок 5
| |
| <Н6>Заголовок 6</Н6> |
Заголовок 6
| |
Заголовок за замовчуванням вирівнюється до лівого краю вікна.
Щоб
задати назву конкретного шрифту, його розмір і колір використовуються
парний тег FONT з параметрами FACE, SIZE та COLOR, наприклад, текст
Якщо на
комп'ютері клієнта встановлено шрифт Decor, то він буде застосований до
даного тексту, інакше броузер шрифт Arbat чи Kudriashov, інакше - деякий
свій стандартний шрифт, наприклад, Times New Roman. Розміри символів
шрифту можуть бути від 1 до 7. Розмір 3 вважається стандартним, він
орієнтовано відповідає 10 пікселям. Розмір 7 є найбільшим. Число 2 як
значення параметра SIZE означає другий розмір шрифту, число +2 означає, що
розмір шрифту має бути на дві одиниці більший, ніж стандартний, тобто
п'ятий, число -2 означатиме перший розмір шрифту - на дві одиниці менший,
ніж стандартний.
Існують наступні теги форматування шрифту:
| текст |
товстий шрифт тексту, що є між тегами |
| текст |
шрифт-курсив |
| текст |
підкреслений шрифт |
| текст |
нижній індекс |
| текст |
верхній індекс |
| текст |
великий шрифт
| |
| текст |
малий шрифт |
| текст |
виокремлений курсивом текст
| |
| текст |
товстий курсив
| |
Наприклад:
<HTML>
<HEAD>
<TITLE> Сторінка ВПУ-11
</TITLE>
</HEAD>
<BODY
bgcolor="white">
<FONT FACE = "Decor, Arbat, Kudriashov" SIZE =+2
COLOR="red">
<H1>ВПУ-11</H1></FONT>
<
I>знаходиться у місті
>/I>
<B><BIG>Вінниця</BIG></B>
</BODY>
</HTML>
Після перегляду файлу у броузері отримаємо наступну Web-сторінку
Завдання 2.
Відформатуйте свою особисту Web-сторінку. Задайте колір
фону жовтий, колір тексту -синій, імена понаписуйте великим жирним
шрифтом.
Контрольні питання:
1. Що включає в себе форматування
тексту?
2. Які бувають теги для заголовків?
3. Як змінити колір
тексту?
4. Для чого призначений тег <SMALL>?
5. Які параметри
тега <FONT>?
5. Теги форматування абзацу.
Web-броузер практично не приймає до уваги символи переходу на новий
рядок, які ви внесли в текст на етапі форматування сторінки за допомогою
текстового редактора.
Для форматування абзацу застосовують наступні
теги:
<P> - початок нового абзацу; його прийнято записувати в
кінці попереднього. Наступне речення починатиметься з нового, вирівняного
до лівого краю абзацу без відступу у першому рядку.
<BR> -
наступний за цим тегом текст буде наведено у новому рядку без пропуску
порожнього рядка.
<HR>- буде проведена горизонтальна лінія.
За замовчуванням більшість броузерів формує абзаци, вирівнюючи їх
зліва. Атрибут ALIGN дозволяє примусово змінювати ознаки вирівнювання.
Абзаци можуть бути вирівняні зліва, справа або по центру. Якщо
вирівнювання заголовка чи іншого елемента на сторінці потрібно задати
явно, то використовують теги вирівнювання:
<CENTER>
елемент</CENTER>- вирівнювання до центру
<LEFT> елемент
</LEFT> - вирівнювання до лівого краю
<RIGHT> елемент
<
<HTML>
<HEAD>
<TITLE> Сторінка
ВПУ-11 </TITLE>
</HEAD>
<BODY
bgcolor="white">
<P ALIGN="center">ВПУ-11</P>
<P
ALIGN="left">Вище </P>
<P
ALIGN="right">професійне</P>
<P ALIGN="center">училище
№11</P>
</BODY>
</HTML>
Після перегляду файлу у
броузері отримаємо наступну Web-сторінку
Завдання 3.
Відформатуйте свою особисту Web-сторінку. Розбийте
текст на абзаци. Задайте вирівнювання тексту по центру та по лівому
краю.
Контрольні питання:
1. Як розбити текст на абзаци?
2. Які
бувають теги для вирівнювання?
3. Для чого призначений тег
<LEFT>?
6. Створення списків.
Є такі типи списків: маркований,
нумерований. Список може мати заголовок, який охоплюють тегами
<LH>...</LH>, наприклад, <LH>Це заголовок
списку</LН>.
Маркований список утворюють за допомогою парного
тега <UL> ...</UL> і тегів <LI>, наприклад,
так:
<LH> Мої улюблені предмети:
</LH>
<UL>
<LI>1нформатика
<LI>математика
< <LI>історія
</UL>
Нумерований список створюють за допомогою парного тега <OL>...
</OL> з необов'язковим параметром TYPE і тегів <LI>,
наприклад, так: <LH> Професії ВПУ№11 </LH>
<OL
TYPE=="1">
<LI>Секретар
керівника</LI>
<LI>Оператор ЕОМ
</LI>
<L>Телемайстер </LI>
</OL>
Хоча тег вважається не обов'язковим , рекомендується його
використовувати , адже деякі броузери сприймають не всі теги. Значення "і"
чи "І" параметра TYPE задає нумерацію римськими малими (і, іі, ііі,
iv,...) чи великими (І, II, Ш, IV, ...) цифрами, а значення "а" чи "А" -
латинськими малими (a, b, c, d, ...) чи великими (А, В, C,...)
буквами.
Завдання 4.
Створіть новий файл із список вашого хобі.
Дайте ім'я 2. html
Контрольні питання:
1. Які є види списків?
2.
Які теги для заголовка списку?
3. Для чого призначений тег
<LI>?
4. Як задати нумерований список?
7. Вставлення графічних і відео-файлів.
Графічні зображення (фотографії, картинки, піктограми тощо)
зберігаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та
іншими і подаються на екран клієнта за допомогою команди, що задається
одинарним тегом <IMG> з параметрами:
<IMG SRС="адреса
графічного файлу" ALТ="альтернативний текст" ALIGN="left" WIDTH="?"
HEIGHT="?">
Наприклад:
<HTML>
<HEAD>
<TITLE> Малюнок
</TITLE>
</HEAD>
<BODY>
<IMG SRC="CAR02.JPG"
ALT="МАШИНА">
</BODY>
</HTML>
На головну 
Нова газета з’явилась на шпальтах училищного сайту.