Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Lab_HTML_1.doc
Скачиваний:
9
Добавлен:
19.08.2019
Размер:
380.93 Кб
Скачать

Лабораторна робота № 1

Створення та форматування WEB-сторінОК

Мета роботи – навчитися створювати прості web-сторінки та надавати їм певного вигляду, використовуючи основні команди мови HTML.

    1. Теоретичні відомост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>. Наприклад, так:

< 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>.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]