Загальні поняття про Web-сторінки
Web-сторінка – це створений за допомогою мови HTML текстовий файл, який описує вміст Web-сторінки, а відобразити її можна у вікні Web-броузера.
Для створення i редагування HTML-файла можна скористатися будь-яким текстовим редактором. Якщо HTML-файл відкрити за допомогою засобів перегляду, наприклад, Internet Explorer, він відображає текст, графіку i гіперпосилання на інші файли і Web-сторінки.
Гіперпосилання – це фрагменти тексту або зображення на Web-сторінці, які пов’язані з певною адресою файлу, що дозволяють клацанням на них відкривати ці файли. Такими файлами можуть бути інші Web-сторінки.
Гіперпосилання, пов’язане з фрагментом тексту, виглядає, як підкреслений текст. Курсор миші на гіперпосиланні набуває форми руки. При клацанні на гіперпосиланні відкривається документ, адреса якого визначається в гіперпосиланні. Якщо є доступ до Internet, гіперпосилання на Web-вузли відкриють через Internet Explorer доступ до відповідного Web-вузла. Гіперпосилання дають можливість користувачу переходи на Web-сторінках від одного матеріалу до іншого.
Користувачі WWW можуть не тільки переглядати чужі Web-сторінки, але и створювати свої.
Web-сторінка зберігається в текстовому файл зрозширенням HTML або НТМ.
Щоб створювати Web-сторінки, нема необхідності вивчати мову HTML. Можна конвертувати у Web-сторінки документи, створенні за допомогою текстового процесора Word, або за допомогою засобу Prints Page Express, що є в складі Windows’98.
Проте конвертовані документи містять, як правило, багато зайвих чи нераціонально використаних елементів, що значно сповільнює роботу з ними, особливо в умовах несучасних каналів зв’язку.
Вступ в мову HTML
Мова HTML (мова гіпертекстової розмітки) призначена для опису Web-сторінок i не є мовою програмування. Вона призначена для розмітки текстових документів, тобто для їх форматування. Всі Web-сторінки, які є в Internet, створені за допомогою мови HTML.
Керуючим елементом мови HTML є тег, який визначає, як буде виглядати відповідний фрагмент на екрані броузера.
Тег – це команда HTML формування вигляду фрагменту Web-сторінки, яка завжди записується в кутові дужки.
Як правило, теги – парні. Перший тег відкриває опис команди і визначає її початок, другий тег відрізняється від першого наявність похилої риски “/” перед іменем тега і закриває його, тобто припиняє дію команди.
Часто теги, окрім іменя, містять атрибути.
Атрибути – це компоненти тегу, що містять вказівки про те, як броузер має сприймати й обробляти тег. Атрибут записується після імені тегу і складається, як правило, з імені і значення, записані через знак «=».
Наприклад: <BODY bgcolor = ”yellow”> – жовтий фон документу.
Часто при створенні веб-документу треба пояснити фрагмент коду. В цьому випадку використовується коментар.
Коменрар означає фрагмент коду, який не обробляється браузером і розташований між символами <! – текст-коментар – >.
Струкрура HTML-документу
Bci HTML-документа будуються за визначеними правилами:
♦ текст документа починаеться тегом <HTML> i заюнчуеться тегом </HTML>;
♦ всередині контейнера <HTML> знаходяться ще два контейнери <HEAD> (заголовок Web-сторінки) і <BODY> (її вміст);
♦ всередині; контейнера <HEAD> знаходяться інші контейнери, серед них <TITLE> (рядок символів заголовка вікна броузера).
Наприклад, закінчений HTML-файл може мати такий вигляд:
При відображенні HTML-файла броузером зайві пропуски ігноруються. Якщо розділити два слова трьома пропусками, то на екрані між словами залишиться один пропуск, а кілька порожніх рядків на екрані броузера будуть замінені на один. Коли текст досягає правої границі вікна, він автоматично переходить на новий рядок.
Все, що розташовано між тегами <head> </head>, – це службова інформація.
Все, що розташовано між тегами <body> </body>, – це безпосередній вміст документа. Атрибут тегу що змінює колір шрифта – text, а значення кольору можна визначити з таблиці. Наприклад: <body text=”#336699″>.
| #000000 | Чорний |
| #0000FF | Блакитний |
| #FF00FF | Бузковий |
| #808080 | Сірий |
| #008000 | Зелений |
| #00FF00 | Яскраво-зелений |
| #800000 | Каштановий |
| #000080 | Темно-синій |
| #800080 | Пурпуровий |
| #FF0000 | Червоний |
| #C0C0C0 | Срібний |
| #008080 | Темно-зелений |
| #FFFFFF | Білий |
| #FFFF00 | Жовтий |
Колір фону визначає атрибут bgcolor, значення якого визначається тією ж таблицею. Наприклад
<body text=”#336699″ bgcolor=”#FFFFFF”>.
Оформлення тексту
Абзаци: Розбити текст документу на абзаци можна кількома способами. Простого натискання Enter, як в текстовому документі недостатньо. Броузер не реагує на нього.
Один з способів поділити текст на абзаци – використання тегів <P> і <BR>.
<P>Подібність</P>
Корова не схожа на коня <BR>
А кінь не схожий на корову.<BR>
Якраз оцю подібність<BR>
Ми й беремо за основу.<BR>
Другий спосіб поділити текст на окремі абзаци – використання заголовків. Заголовки є важливою частиною документу, вони розділяють інформацію на окремі логічні частини, що можуть бути окремими абзацами. В HTML документі існують заголовки 6-ти рівнів за допомогою конструкції <Hn>Текст заголовка</Hn>, де n-номер рівня. Рівень заголовка визначає розмір шрифта при відображенні документу. Спробуємо тіло програми розділити на кілька заголовків:
< BODY text=”#336699″ bgcolor=”#FFFFFF”>
<H1>Привіт, це моя перша сторінка. </H1>
<H2>Я вивчаю мову HTML, щоб створити власну домашню Web-сторінку для спілкування з друзями i знайомими. Щоб вони могли подивитися мою фотокартку, прочитати про мене, написати кілька рядків в мою книгу для гостей. </H2>
</ BODY >
Вирівнювання абзаців: абзаци, що задаються тегом <р></р> за замовченням вирівнюються по лівому краю. Визначити інший вид вирівнювання можна за допомогою атрибуту align:
по центру <р align=”center”>текст</p>
по лівому краю <р align=”left”>текст</p>
по правому краю <р align=”right”>текст</p>
по ширині <р align=”justify”>текст</p>
Формат шрифта: Для визначення формату шрифта певного фрагменту тексту використовується тег <font> ТЕКСТ </font>.
Тег може мати такі атрибути: face – гарнітура шрифту, size – розмір, color – колір.
Наприклад <font face=”ARIAL”> шрифт Arial </font>
Написання тексту задається за допомогою тегів:
<b> Жирний текст </b>
<i> Текст курсивом </i>
<u> Підкреслений текст </ u >
Для фрагмента тексту можна застосовувати кілька meгів. Наприклад: <b> <i> Жирний курсив </i> </b>
Графіка, вставка малюнків
Щоб вставити малюнок, треба скористатися тегом <img src=”my.jpg”>, де my.jpg -ім’я файла, що містить малюнок. Замість my.jpg можна вставити ім’я будь-якого іншого малюнка (з розширенням jpg, gif, png, bmp). Якщо малюнок знаходиться в іншій папці, то його краще переписати в папку, де знаходиться HTML-документ.
Для “співіснування” малюнка (наприклад, pr1.png) i тексту документа використовують теги:
<img src=”prl.png” align=”left”> -малюнок з лівого краю, текст обтікає його справа;
<img src=”prl.png” align=”right”> -малюнок з правого краю, текст його обтікає зліва:
Kpiм параметрів align, існують ще кілька параметрів:
<img src=”prl.png” Vspace=”10″> -відстань між текстом i мапюнком по вертикалі (тут 10 пікселів):
<img src=”prl.png” Hspace=”30″> -відстань між текстом i малюнком по горизонталі (30 пікселів):
<img src=”prl.png” alt=”моя фотокартка”> -опис малюнка (якщо встановити курсор миші на малюнок, через секунду з’явиться вказаний текст – тут “моя фотокартка”):
<img src= “pri.png” width=”100″> -ширина малюнка (тут 100 пікселів):
<img src=”prl.png” height=”200″> -висота малюнка (тут 200 пікселів):
<img src=”prl.png” border=”5″> -рамка навколо малюнка (тут товщина лінії 5 пікселів):
Bci параметри можуть застосовуватися одночасно один з одним, щоб запобігти плутанини в їx застосуванні. Наприклад, так:
<img src=”prl.png” aling=”left” Hspace=30 Vspace=5 alt=”моя фотокартка”>
Малюнок буде притиснутий до лівого краю екрана, текст буде його обтікати справа, ввдстань до тексту по горизонталі – 30 пікселів, по вертикалі – 5 пікселів, при встановленні курсору миші на малюнку з’явиться напис “моя фотокартка”.
Посилання
Щоб певний текст документу зробити посиланням на інший файл, використаємо тег <а href=”ім’я файлу”> текст </а>. Наприклад:
Моя спеціальність – <а href=”ERGEO.htm”> ЕРГЕО </а>
Текст при цьому буде відображатись на сайті іншим кольором з підкресленням. Якщо в імені файлу не вказується шлях до нього, то він повинен міститись в тій же папці, що і сам сайт.