Створення Web-документів, що містять теги форматування символів, гіперпосилання та графіку
Тема. Створення Web-документів, що містять теги форматування символів, гіперпосилання та графіку.
Мета. Навчитись створювати Web-документи, форматувати текст, що вміщений до них, створювати гіперпосилання та поміщати до них графіку.
Обладнання: комп'ютери , інструкція.
Теоретичні відомості.
HTML - hypertext markup language - мова розмітки гіпертексту. Найбільш популярна зараз версія 4.0
Основними елементами HTML є теги (tags), за допомогою яких проводиться розмітка тексту. Вони служать для представлення спеціальних атрибутів та інструкцій по форматуванню, які в браузерах перетворюються на готові фрагменти веб-сторінки, готової для перегляду користувачем.
Кожен тег має такий формат:
<tag>Bміст цього Teгa</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-сценарії.
Завдання 1.
- Створити "каркас" Web-сторінки і встановити такі початкові параметри:
- Назва документа: Сторінка ХХХХХХХХХХХ, де - прізвище виконавця.
- Включити до заголовку такі метатеги:
- <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta пате="моя сторінка" content="nepnia пробна сторінка ХХХХХХХХХХХ "> <meta name="keywords" content="комп'ютер, навчання, знання"> <meta name="description" сопіепІ="Вчимось будувати web-сторінки">
- Встановити колір фону сторінки білий, а колір тексту - чорний.
- Записати створену сторінку під іменем proba.htm на диск А:
Завдання 2.
Набрати до документу такий текст та відформатувати його за вказівками.
Цей текст вирівняний по лівому краю
текст+4
текст+3
текст+2
текст+1
текст+0
текст-1
текст-2
Цей текст вирівняний по центру
текст НІ
текст Н2
текст НЗ
текст Н4
текст Н5
текст Н6
Цей текст вирівняний по правому краю
Напівжирний текст
Похилий текст (курсив) Підкреслений текст
Додаткове завдання:
Малий (тег small)
Нормальний текст
Великий (тег big)
Перекреслений
Перекреслений (теги Strike і S)
H,SO4 AX3+BX2+CX+D=0
Щоб отримати вираз Н2О, пишуть: H<SUB>2<SUB>O
< теги Sup і Sub)
Завдання 3.
Вставити до документа графічне зображення з іменем img.jpg. Встановити для нього
вирівнювання по центру та-розміри 100x100. Виявити недоліки зображення у браузері та записати висновки до зошита з практичних робіт.
Завдання 4.
Змінити розмір зображення на пропорційне, зменшивши його пропорційно в 2 рази.
Домашнє завдання:
1. Підготуватись до практичної роботи. Тема "Створення Web-документів, що містять теги оформлення списків та таблиць".
1.1. Переписати до зошита з практичних робіт інструкцію до роботи.
1.2. Повторити основні теги HTML.
1.3. Повторити створення списків та таблиць у HTML.
1
про публікацію авторської розробки
Додати розробку