Завдання до роботи

2. Подивіться отриману Web-сторінку.

Можливе використання комбінованих виділень тексту.

Розклад занять на вівторок

Але при цьому необхідно пам'ятати наступне правило використання комбінованих тегів:

<Тег_1><Тег_2>. - правильний запис.

<Тег_1><Тег_2>. - помилковий запис.

Зверніть увагу на «вкладеність» тегів, вона нагадує «вкладеність» дужок.

Завдання № 5. Завдання розмірів символів Web-сторінки

Існує два способи управління розміром шрифту, що відображається браузером:

використання стилів заголовка,

завдання розміру шрифту основного документа або розміру поточного шрифту.

Використовується шість тегів заголовків: від

до

(Тег подвійний, тобто вимагає закриття). Кожному тегу відповідає конкретний стиль, заданий параметрами налаштування браузера.

1. Внесіть зміни в файл RASP.HTML

Сторінка 4 з 16 Практичні роботи з HTML

Навчальний файл HTML

занять на вівторок

Завдання до роботи

Малюнок 12 - Результат виконання завдання 5

Завдання № 6. Установка розміру поточного шрифту

тег шрифту дозволяє задавати розмір поточного шрифту в окремих місцях тексту в діапазоні від 1 до 7.

1. Внесіть зміни в текст RASP.HTML

Навчальний файл HTML

занять на вівторок

2. Самостійно змініть розмір тексту «занять на вівторок», використовуючи тег .

3. Змініть оформлення тексту HTML-документа, використовуючи тег виділення фрагментів і тег перекладу рядка і абзацу.

Завдання № 7. Установка гарнітури і кольору шрифту

тег надає можливості управління гарнітурою, кольором і розміром тексту.

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

Сторінка 5 з 16 Практичні роботи з HTML

Для зміни кольору шрифту можна використовувати в тезі атрибут COLOR = "X". Замість "X" треба підставити англійська назва кольору в лапках ( ""), або його шістнадцяткове значення. При завданні кольору шістнадцятковим числом необхідно представити цей колір розкладеним на три складові: червону (R - Red), зелѐную (G - Green), синю (B - blue), кожна з яких має значення від 00 до FF. У цьому випадку ми маємо справу з так званим форматом RGB.

Приклади запису тексту в форматі RGB наведені в Таблиці 2:

Запис тексту в форматі RGB

Завдання до роботи

1. Внесіть зміни в файл RASP.HTML

Навчальний файл HTML

Розклад занять на вівторок

2. Самостійно змініть розмір, колір, гарнітуру стиль тексту документа.

Завдання № 8. Вирівнювання тексту по горизонталі

1. Внесіть зміни в файл RASP.HTML

Навчальний файл HTML

занять на вівторок

Сторінка 6 з 16 Практичні роботи з HTML

Завдання до роботи

Малюнок 12 - Результат виконання завдання 8

Завдання № 9. Завдання кольору фону і тексту

1. Внесіть зміни в файл RASP.HTML

Навчальний файл HTML

занять на вівторок

Завдання № 10. Розміщення графіки на Web-сторінці

тег дозволяє вставити зображення на Web-сторінку. Воно з'явиться в тому місці документа, де знаходиться цей тег. тег є поодиноким.

Необхідно пам'ятати, що графічні файли повинні знаходитися в тій же папці, що і файл HTML, що описує сторінку. Графіка в Web, як правило, поширюється в трьох форматах: GIF, JPG, PNG. Сторінка 7 з 16 Практичні роботи з HTML

Для виконання наступного завдання помістіть файл з ім'ям CLOCK.JPG (або іншим ім'ям) в робочу папку.

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

1. Внесіть зміни в файл RASP.HTML

Навчальний файл HTML

занять на вівторок

На екрані ви побачите ті, що показано на малюнку 13.

Завдання до роботи

Малюнок 13 - Результат виконання завдання 13

тег має чимало атрибутів, описаних в таблиці 3. Ці атрибути можна задавати додатково і розташовуватися вони можуть в будь-якому місці тега після коду IMG.

Завдання до роботи

Завдання № 11. Використання атрибутів зображення

1. Самостійно внесіть зміни в текст файлу RASP.HTML: випробуйте використання таких атрибутів графіки, як ALT, BORDER, ALIGN, HEIGHT, WIDTH, VSPACE, HSPACE.

Завжди звертайте увагу на розмір графічного файлу (в байтах), так як це впливає на час завантаження Web-сторінки.

Завдання № 12. Установка фонового зображення на Web-сторінці

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

Графіка, використовувана в якості фонової, задається в тезі .

1. Внесіть зміни в файл RASP.HTML, попередньо підготувавши і зберігши в робочій папці графічний файл заставки (FON.PNG).

Сторінка 9 з 16 Практичні роботи з HTML

Навчальний файл HTML

занять на вівторок

Завдання до роботи

На екрані ви побачите те, що зображено на малюнку 6.

Завдання до роботи

Малюнок 14 - Результат виконання завдання 12

Малюнок, який використовувався в якості фонового, має вигляд

Завдання до роботи

Малюнок 15 - Фонові дані малюнка

2. Експериментуйте з фоновим малюнком Web-сторінки і виберіть оптимальний з вашої точки зору.

Завдання № 13. Створення таблиці

Таблиця є частиною HTML-документа. Вона являє собою прямокутну сітку, що складається з вертикальних стовпців і горизонтальних рядків. Перетин рядка і стовпця називається осередком таблиці. Осередок може містити в собі текст, графіку або іншу таблицю.

Таблиця складається з трьох основних частин:

Таблиця в Web-документі заповнюється по рядках (зліва направо по рядку, потім перехід на новий рядок). Кожна клітинка таблиці має бути заповнена (хоча б прогалиною, які використовуються для створення порожніх клітинок).

1. Запустіть програму Блокнот і наберіть текст наступної Web-сторінки. Застосовуйте прийоми копіювання при створенні таблиці, працюючи в програмі Блокнот.

Розклад занять 5 класів

2. Збережіть файл в особистій робочій папці під ім'ям 5.HTML

На екрані ви побачите те, що показано на малюнку 8.

Завдання до роботи

Малюнок 16 - Результат виконання завдання 13

Завдання № 14. Побудова гіпертекстових зв'язків

Найважливішим засобом мови HTML є можливість включення в документ посилань на інші документи.

на віддалений HTML-файл,

на деяку точку в поточному HTML-документі,

на будь-який файл, який не є HTML-документом.

Як посилання можна використовувати будь-який текст або графіку.

Посилання в межах одного документа

Перед ім'ям мітки (ПН), що вказує, куди треба перейти за посиланням, ставиться символ #. Між символами ">" і "<” располагается текст (“Понедельник”), на котором должен быть произведен щелчок для перехода по ссылке.

1. Доповніть файл 5.HTML описом таблиці, яка містить назви днів тижня, помістивши його в початок Web-сторінки. Сторінка 12 з 16 Практичні роботи з HTML

5. Збережіть файл 5.HTML в особистому робочій папці.

На екрані ви побачите те, що зображено на малюнку 9.

Завдання до роботи

Малюнок 17 - Результат виконання завдання 14

Завдання № 15. Створення посилання на інший HTML-документ

Посилання дозволяють клацанням на виділеному слові або фразі перейти до іншого файлу.

5 клас

Після імені файлу (5.HTML) між символами «>» і «<» располагается текст («5 класс»), на котором должен быть произведен щелчок для перехода к этому файлу.

1. Внесіть зміни в файл RASP.HTML

Навчальний файл HTML

занять на вівторок

Завдання до роботи

Сторінка 14 з 16 Практичні роботи з HTML

2. Збережіть файл RASP.HTML

На екрані ви побачите те, що зображено на малюнку 10.

Завдання до роботи

Малюнок 18 - Результат виконання завдання 16

Завдання № 16. Створення посилання на інший HTML-документ

Завдання до роботи

На екрані ви побачите те, що показано на малюнку 11.

Як посилання виступає малюнок - стрілка

Завдання до роботи

Малюнок 19 - Результат виконання завдання 16

Завдання № 17. Самостійне підсумкове завдання

Розробіть Web-сторінки, що розповідають про вашому класі. На головний сторінці розмістіть розповідь про клас, класного керівника. Розповіді про учнів розмістіть на окремих Web-сторінках. Вкажіть посилання на сторінки учнів з головним Web-сторінки. Не забудьте розмістити посилання повернення на головний сторінку.

Як підготувати хорошу Web-сторінку

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

2. Постарайтеся представити інформацію у вигляді списків або таблиць так, щоб можна було досить легко знайти важливу інформацію.

3. Не розміщуйте одне зображення відразу за іншим. Спробуйте розподілити їх по документу, залишивши досить вільного простору.

4. Інформація повинна розміщуватися частинами, легкими для сприйняття. Зверніть увагу на довжину абзаців. Якщо абзац занадто довгий, розбийте його на кілька невеликих абзаців.

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

6. Використання графіки може додатково залучити користувачів. Але необхідно пам'ятати про час завантаження вашої сторінки, яке визначається кількістю і об'ємом графічної інформації. Красива картинка не справить ніякого враження, їли для того, щоб її побачити, доведеться довго чекати, поки вона завантажиться.

Схожі статті

Copyright © 2024

урок 5 "А" 5 "Б" 1 Російська мова
5 клас 6 клас
8 клас
9 клас10 клас
11 клас