Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
LABY_VCE_09.docx
Скачиваний:
0
Добавлен:
01.05.2025
Размер:
1.07 Mб
Скачать

Теоретичні відомості.

HTML - hypertext markup language - мова розмітки гіпертексту. Найбільш популярна зараз версія 4.0

Основними елементами HTML є теги (tags), за допомогою яких проводиться розмітка тексту. Вони служать для представлення спеціальних атрибутів та інструкцій по форматуванню, які в браузерах перетворюються на готові фрагменти веб-сторінки, готової для перегляду користувачем.

Кожен тег має такий формат:

<tag> Bмicт цього тera </tag> , де <tag> - це відкриваючий тег, a </tag> - закриваючий.

Існують також теги, які можна використовувати без закриваючих тегів.

Щоб краще зрозуміти, як працюють теги, наведемо таку аналогію: якщо ми описуємо форму якогось предмета, то можемо сказати, що він круглої форми, чи кубічної, чи пірамідальної. Точно так само ми можемо сказати, що якийсь елемент в документі знаходиться зліва, справа чи по центру. Саме це форматування і відбувається за допомогою тегів.

HTML- документ має 3 основні області.

Найвищий порядок у документі має тег <HTML>, для якого цей документ є підлеглим. Наступними по старшинству є області <HEAD> (заголовок) та <BODY> (тіло документа).

Метатеги починаються із ключового слова meta, їхні дії розрізняються за використаними атрибутами.

Атрибут name специфікує інформацію про сторінку (самоназва документа).

Атрибут http-equiv - задає інформацію заголовка.

Атрибут content служить для опису атрибутів name та http-equiv.

Зрозуміло, що сучасна веб-сторінка не може обходитись без графічних зображень, як у області оформлення, так і в області фактичної інформації. Для веб-дизайну використовується три основні графічні формати: .gif, .jpeg, .png. Для вставки зображень використовують тег <img scr>.

Шляхом до певного об'єкта будемо називати його точне місце розміщення. Існують такі типи шляхів: абсолютний, відносний, коренезалежний та документозалежний шляхи.

З'язок між двома об'єктами ми назвемо посиланням, застосувавши яке на першому об'єкті, ми можемо перейти до зв'язаного з ним, але не навпаки. Наприклад:

href="main.html" > головна сторінка </а>

Розберемо це посилання. Тег <а> - (anchor - якір) - містить в собі інформацію, куди користувач має перейти, натиснувши на це посилання. Атрибут href містить в собі точне місцезнаходження адреси посилання. Посилання повинне закінчуватись закриваючим тегом </а>.

Ото ж на веб-сторінці, в результаті виконання даного рядка буде видно повідомлення "головна сторінка", при клікові на якому браузер відкриє файл main.html.

Тег href> можна використовувати для посилання на текстові, графічні, відео та звукові файли, архіви, електронні поштові адреси та адреси сайтів, JavaScript-сценарії.

Для довідки дивись “ Короткий словник тегів HTML”, який розміщено нижче.

Завдання 1.

Створити "каркас" Web-сторінки і встановити такі початкові параметри:

• назва документа: сторінка ХХХХХХХХХХХ, де - прізвище виконавця.

• Включити до заголовку такі метатеги:

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251">

<meta пате=»моя сторінка» content=»Пepшa пробна сторінка ХХХХХХХХХХХ «>

<meta name=»keywords» соіиеп1=»комп'ютер, навчання, знання»>

<meta name=»description» сопІепІ=»Вчимось будувати web-сторінки»>

• Встановити колір фону сторінки білий, а колір тексту - чорний.

• Записати створену сторінку під іменем proba.htm на диск А:

Завдання 2.

Набрати до документу такий текст та відформатувати його за вказівками, поданими у ньому.

Цей текст вирівняний по лівому краю

текст+4

текст+3

текст+2

текст+1

текст+0

текст-1

текст-2

Цей текст вирівняний по центру

текст Н1

текст Н2

текст НЗ

текст Н4

текст Н5

текст Н6

Цей текст вирівняний по правому краю

Напівжирний текст

Похилий текст (курсив)

Підкреслений текст

Додаткове завдання:

Малий (тег small)

Нормальний текст

Великий (тег big)

Перекреслений

Перекреслений (теги Strike і S)

H2SO4 AX3+BX2+CX+D=0

Щоб отримати вираз Н2О, пишуть: H<SUB>2<SUB>O

(теги Sup і Sub)

Завдання 3.

Вставити до документа графічне зображення з іменем img.jpg. Встановити для нього вирівнювання по центру та розміри 100x100. Виявити недоліки зображення у браузері та записати висновки до зошита з практичних робіт.

Завдання 4.

Змінити розмір зображення на пропорційне, зменшивши його пропорційно в 2 рази.

Завдання 5.

Створити ще одну порожню Web-сторінку з іменем probal .htm та записати її на диск А:

Завдання 6.

Встановити для графічного об'єкта img.jpg, що знаходиться в документі proba.htm, гіперпосилання, яке відкриває документ probal.htm.

Завдання 7.

Створити нижче графічного зображення посилання на такий E-mail: read@write.com.ua з надписом "Моя пошта"

Запитання до захисту практичної роботи:

1. Що таке HTML?

2. Які теги, що входять до заголовку документа, ви знаєте?

3. Що таке метатеги?

4. Які теги визначають тіло HTML-документа?

5. Які теги використовуються для форматування тексту?

6. За допомогою яких тегів ми поміщаємо у документ графічне зображення?

7. Що таке гіперпосилання?

Виконання завдань, що описані в практичній роботі, можна спрощувати, виконуючи у текстовому редакторі Word, після чого імпортуватиу вигляді Web-сторіно або ускладнювати, редагуючи "голий" HTML-код у будь-якому текстовому редакторі, наприклад, у "Блокноті".

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