- •Лабораторна робота № 5. Частина 1.
- •Основні теги мови html.
- •Теги для розміщення тексту (вони одинарні):
- •Теги форматування символів тексту (вони парні):
- •Заголовки і теги вирівнювання.
- •Приклад 2.
- •Завдання.
- •Хід роботи
- •Відкрийте редактор Блокнот (Notepad).
- •Частина 2.
- •Приклад 1.
- •2. Створення списків.
- •3. Створення таблиць.
- •Приклад 2.
- •4. Вирівнювання елементів.
- •Завдання
- •Хід роботи
Лабораторна робота № 5. Частина 1.
ТЕМА. Ознайомлення з мовою HTML.
МЕТА: Ознайомитися з основними можливостями мови гіпертекстової розмітки документів HTML. Вивчити основні теги мови гіпертекстової розмітки сторінок HTML.
ПРИКЛАД 1. Для підготовки html-файлу можна використати текстовий редактор Notepad, Блокнот чи будь-який інший, що дає змогу готувати файли у текстовому форматі. Після написання html-файл потрібно зберегти на диску з деякою назвою з розширенням htm чи html. Продемонструємо структуру html-файлу:
<HTML><!-- Це файл filel.htm -->
<HEAD>
<TITLE>Назва вікна web-сторінки</TITLE>
</HEAD>
<BODY параметри>
<!-- Далі йде текст, наприклад, такий -->
Мене звати Світлана Я хочу стати фармацевтом. Це моя перша web-сторінка. Тут я можу писати будь-який текст, наприклад, про себе і мої інтереси. Пізніше я навчуся вставляти фотографії, картинки, звук, відео-зображення шляхом посилання на відповідні графічні, звукові чи відео-файли. Я збережу цей файл на диску і відкрию його у браузері. Моя сторінка ще не красива і не цікава. Але скоро я навчуся робити цікаві web-сторінки. Я розташую файл на сервері, і мою сторінку зможуть побачити в різних кінцях світу.
</BODY>
</HTML>
Відкривши такий файл у браузері, побачимо web-сторінку, де відомості про цю особу будуть розміщені дещо інакше, ніж у файлі: увесь текст розміщений в одному абзаці вирівняний до лівого краю, немає абзацного відступу.
Службові слова, наведені великими літерами, вивчатимемо далі. Їх можна писати також малими літерами.
Основні теги мови html.
<HTML> ... </HTML> - тег означення html-файлу.
<HEAD>...</HEAD> - всередині даної пари тегів описують заголовок документа.
<TITLE>...</TITLE> - містить у собі головну частину заголовка документа – заголовок Windows-вікна.
<BODY параметри >...</BODY> містить увесь текст сторінки.
Головні параметри тега BODY:
BACKGROUND = "…." |
Задає шлях до картинки для тла |
BGCOLOR = "…." |
Задає колір тла, якщо не використовується тло-картинка |
BGPROPERTIES = "fixed" |
Фонове зображення не прокручується |
TEXT = "black" |
Задає колір тексту (тут чорний) на сторінці |
Теги для розміщення тексту (вони одинарні):
<Р> |
Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. Наступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <Р> може використовувати як парний: <Р> текст абзацу </Р> |
<BR> |
Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка |
<HR> |
У рядку буде проведена горизонтальна лінія |
Теги форматування символів тексту (вони парні):
<В> текст </В> |
Напівжирний шрифт тексту |
<І> текст </І> |
Шрифт-курсив |
<U> текст </U> |
Підкреслений шрифт |
<SUB> текст </SUB> |
Нижній індекс. Наприклад, щоб отримати вираз Н2О, пишуть H<SUB>2</SUB>0 |
<SUP> текст </SUP> |
Верхній індекс, наприклад, 1а вулиця: 1<SUP> a </SUP> вулиця |
<BIG> текст </BIG> |
Великий шрифт |
<SMALL> текст </SMALL> |
Малий шрифт |
<EM> текст </ЕМ> |
Відокремлений курсивом текст (те саме, що тег І) |
<B> <I> текст </I></B> |
Напівжирний курсив. |