Лабораторна робота № 1
Створення та форматування WEB-сторінОК
Мета роботи – навчитися створювати прості web-сторінки та надавати їм певного вигляду, використовуючи основні команди мови HTML.
Теоретичні відомостi
Вступ у мову HTML. Мова HTML призначена для опису web-сторінок i не є мовою програмування. Вона служить для розмітки текстових документів, тобто для їх форматування.
Керуючим елементом мови HTML є тег, який визначає, як буде виглядати відповідний фрагмент на екрані браузера.
Тег - це команда HTML для формування вигляду фрагменту web-сторінки, яка завжди записується в кутових дужках. Наприклад, <I> - почати виводити текст курсивом, <B> - почати виводити текст напівжирним.
Закриваючий тег, який припиняє дію відповідної команди, починається з “/”. Наприклад, </I> (або </B>) - припинити виведення тексту курсивом (або напівжирним). Ці теги можна використовувати комбіновано. Наприклад,
<В> напівжирний <I> напівжирний + курсив </I> напівжирний </В>
Теги типу <I> i <В> ще називають елементами (контейнерами), бо між ними знаходиться фрагмент тексту. Не всі теги є контейнерами. Наприклад, тег <ВR> - примусовий перехід на новий рядок.
HTML-тег може мати параметри, які називаються атрибутами. Атрибут повідомляє браузеру додаткову інформацію про особливості застосування відповідного тега.
Структура HTML-документа. Bci HTML-документи будуються за визначеними правилами:
текст документа починається тегом <HTML> i закінчується тегом </HTML>;
всередині елемента <HTML> знаходяться ще два елемента <HEAD> (заголовок web-сторінки) і <BODY> (її вміст);
всередині елемента <HEAD> знаходяться інші елементи, серед яких елемент <TITLE> - рядок символів заголовка вікна браузера.
Все, що розташовано між тегами <HEAD> і </HEAD>, - це службова інформація; все, що міститься між тегами <BODY> і </BODY>, - це безпосередній вміст документа. Наприклад, закінчений HTML-файл може мати такий вигляд:
<HTML>
<HEAD>
<TITLE> Mій перший крок </TITLE>
</HEAD>
<BODY>
Привіт, це моя перша сторінка.
</BODY>
</HTML>
Треба набрати цей текст у будь-якому редакторі (наприклад, "Блокнот"), зберегти його з довільним іменем, але обов'язково з розширенням .html або .htm (наприклад, priklad_l.html). Якщо тепер відкрити програму Internet Explorer i виконати команду "Файл" -> "Открыть" -> кнопка "Обзор..." -> prikladl.html (або двічі клацнути на піктограмі створеного HTML-файла), на екрані браузера цей файл буде мати вигляд, наведений на рис. 1 (зверніть увагу на розташування текстів "Мій перший крок" i "Привіт, це моя перша сторінка").
Рис. 1. Результат виконання файлу priklad_l.html
За відсутності тегів форматування весь текст виводиться у вікно браузера суцільним потоком, переноси рядків, пропуски і табуляції розглядаються як пробільні символи. При відображенні HTML-файла браузером зайві пропуски ігноруються. Так кілька пробільних символів, що йдуть підряд, замінюються на один, а кілька порожніх рядків на екрані браузера – теж будуть замінені на один. Коли текст досягає правої границі вікна, він автоматично переходить на новий рядок.
HTML-документи можуть містити коментарі, які не впливають на відображення документа, а тільки пояснюють його вміст при перегляді HTML-тексту. Коментарі починаються з символів "<!--" і завершуються символами "-->".
Встановлення кольору тексту і фону web-сторінки. Колір тексту може бути заданий назвою (наприклад, green) або шістнадцятковим числом, що визначає колір в моделі RGB (наприклад, # FFDD99), де перші дві цифри (двозначне шістнадцяткове число, яке змінюється від 00 до FF) відповідають інтенсивності червоної (red) компоненти кольору, другі - зеленої (green), треті - синьою (blue).
У записі шістнадцяткового значення кольору можна використовувати як великі, так і маленькі латинські літери, наприклад, запис #00FF00 рівнозначна запису #00ff00.
Нижче представлена таблиця 16 стандартних кольорів разом з їх шістнадцятковими кодами.
Код |
Колір |
Код |
Колір |
#000000 |
чорний (black) |
#000080 |
темно-синій (navy) |
#0000FF |
блакитний (blue) |
#800080 |
пурпуровий (purple) |
#FF00FF |
бузковий (fuchsia) |
#FF0000 |
червоний (red) |
#808080 |
сірий (gray) |
#C0C0C0 |
срібний (silver) |
#008000 |
зелений (green) |
#008080 |
темно-зелений (teal) |
#00FF00 |
яскраво-зелений (lime) |
#FFFFFF |
білий (white) |
#800000 |
каштановий (maroon) |
#FFFF00 |
жовтий (yellow) |
#808000 |
оливковий (olive) |
#00FFFF |
аква (aqua) |
< BODY text="#336699">
Колір окремих фрагментів тексту задається тегом <FONT></FONT>. Даний тег - багатофункціональний. За його допомогою можна задавати не тільки колір тексту в конкретній частині документа, але й розмір i вид шрифту.
Колір фону web-сторінки теж встановлюється за допомогою тега <BODY>. Наприклад, чорний фон встановиться командою:
< BODY bgcolor="#000000">
Наприклад, текст файлу priklad_2.html:
<HTML>
<HEAD>
<TITLE> Mій перший крок </TITLE>
</HEAD>
<BODY text="#336699" bgcolor="#FFFFFF">
Привіт, це моя перша сторінка.
<FONT со1ог="#ССОООО"> Ласкаво просимо! </ FONT>
</BODY>
</HTML>
Зверніть увагу: в тезі <BODY> одночасно встановлюється колір тексту документа i колір фону. Це означає, що весь текст сторінки буде сірим, окрім тексту, для якого спеціально встановлено інший колір. Якщо колір тексту в <BODY> не задавати, то за умовчанням він буде чорним.
Параграф (абзац). Параграфи створюються тегом <Р>. Наступне після тега <Р> речення починається з нового, вирівняного по лівому краю, абзацу без відступу. Між абзацами автоматично вставляється порожній рядок.
Для примусового виведення тексту параграфа з нового рядка без пропуску рядка використовується тег <BR>.
В межах параграфа за допомогою відповідних значень атрибуту align текст можна вирівнювати:
по центру - <р align="center">текст</p>
по лівому краю - <р align="left">текст</p>
по правому краю - <р align="right">текст</p>
по ширині - <р align="justify">текст</p>
Якщо не встановлювати параграф, текст за умовчанням вирівнюється по лівому краю.
Наприклад, текст файлу priklad_3.html:
<HTML>
<HEAD>
<TITLE> Mій перший крок </TITLE>
</HEAD>
<BODY text="#336699" bgcolor="#FFFFFF">
Привіт, це моя перша сторінка. <BR>
<FONT со1ог="#ССОООО"> Ласкаво просимо! </ FONT>
<Р align="justify"> Я вивчаю мову HTML, щоб створити власну домашню Web-сторінку для спілкування з друзями i знайомими. </Р>
</BODY>
</HTML>
Створення заголовка. Заголовки призначені для виділення невеликої частини тексту (рядок, фраза). Для цього використовують теги заголовків шести рівнів: Н1-Н6. Наприклад,
<Н2> 3 Новим роком! </Н2>.
Щоб виділити великий фрагмент тексту або тільки одне слово, треба скористатися відомими тегом <FONT> </ FONT> за зразком:
<FONT size="+4"> TEKCT </FONT>
<FONT size="+3"> ТЕКСТ </FONT>
<FONT size="+2"> ТЕКСТ </FONT>
<FONT size="+l"> ТЕКСТ </FONT>
<FONT size="+0"> ТЕКСТ </FONT>
<FONT size="-l"> текст </FONT>
<FONT size="-2"> текст </FONT>
Параметр size задає розмір шрифту, але, на відміну від заголовків, текст не виділяється жирним шрифтом i немає примусового перенесення. Розміри символів шрифту можуть бути від 1 до 7 (розмір 3 вважається стандартним, він орієнтовно відповідає 10 пунктам).
Форматування шрифта. Форматування тексту задається за допомогою тегів:
<В> Жирний текст </В>
<І> Текст курсивом </I>
<U> Підкреслений текст </U >
<SUB> текст Нижній індекс </SUB>
<SUP> текст Верхній індекс </SUP>
<BIG> ВЕЛИКИЙ ШРИФТ </BIG>
<SMALL> Малий шрифт </SMALL>
Для фрагмента тексту можна застосовувати кілька тeгів. Наприклад:
<B> <I> Жирний курсив </I> </B>
Назва шрифту задається за допомогою параметра face:
<FONT face="ARIAL"> шрифт Arial </ FONT>
Наприклад, текст файлу priklad_4.html:
<HTML>
<HEAD>
<TITLE> Mій перший крок </TITLE>
</HEAD>
<BODY text="#336699" bgcolor="#FFFFFF">
<Н2>Привіт, це моя перша сторінка.</Н2>
<BR>
<FONT со1ог="#ССОООО"><H1>Ласкаво просимо!</H1></FONT>
<Р align="justify">
<FONT size="+2"> Шановний колего! </FONT> Я вивчаю мову <FONT size="+l"> HTML, </ FONT> щоб створити власну <I> домашню Web-сторінку </I> для спілкування з друзями i знайомими. Щоб вони могли <B> <I> подивитися мою фотокартку </I> </B>, прочитати про мене, написати кілька рядків в мою <U> книгу для гостей. </U>
</BODY>
</HTML>
Якщо за допомогою браузера переглянути цей HTML-файл, двічі клацнувши на його піктограмі, то на екрані він буде мати вигляд, наведений на рис. 2 (зверніть увагу на розміри i написання шрифтів текстів "Привіт, це моя перша сторінка", "Ласкаво просимо!" i "Шановний колего!...", а також інші фрагменти тексту).
Рис. 2. Результат виконання файлу priklad4.html
Рисування горизонтальної лінії. Одним із методім поділу документа на частини є проведення горизонтальних ліній. Вони візуально підкреслюють завершеність тієї чи іншої області сторінки.
Для побудови таких ліній в HTML використовується тег <HR>. Він дозволяє провести рельєфну горизонтальну лінію, яка за своїм виглядом залежить від використовуваних параметрів, а також браузера. Так за допомогою параметрів можна задати довжину лінії (параметр width), її товщину (параметр size), колір (параметр color), спосіб вирівнювання на екрані (параметр align), а також відмінити трьохвимірний ефект відображення лінії, прийнятий за умовчанням (параметр noshade). Наприклад,
<HR width ="50" size ="5" color ="blue">
Тег <HR> відноситься до блокових елементів, тому лінія завжди починається з нового рядка, а після неї всі елементи відображаються на наступному рядку.
Попередньо відформатований текст. Будь-який фрагмент тексту, розміщений між тегами <PRE> і </ PRE>, розбивається на рядки і абзаци у точній відповідності до того, як його вводили.
Цей тег можна використовувати, наприклад, для друку віршів, у яких взаємне розташування рядків задав сам автор, або для зображення "картинки", що складається з символів. Іншим важливим застосуванням тега <PRE> є вивід на екран текстів комп'ютерних програм (на мовах Java, C++ та ін), в яких традиційно використовують відступи, додаткові пропуски і порожні рядки для виділення структури вихідного коду.
Текст всередині контейнера <PRE> підпорядковується діям тегів <P> і <BR> і підтримує теги заголовків.
Наприклад, розглянемо фрагмент HTML-документа, що містить попередньо відформатований текст:
<PRE>
Тут можна ставити <B>скільки</B> завгодно
<EM>пробілів</EM>,
і переносити рядки,
там, де
захочеться. <P>Html <S>не</S> зможе <H1>нам</H1> завадити.
<PRE>
У вікні браузера кількість пропусків і розриви рядків будуть збережені (див. рис. 3), до них додадуться розриви рядків, викликані використанням тегів <P>, <BR> і <H1>.