ТОР 5 статей:
Методические подходы к анализу финансового состояния предприятия
Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века
Характеристика шлифовальных кругов и ее маркировка
Служебные части речи. Предлог. Союз. Частицы
КАТЕГОРИИ:
- Археология
- Архитектура
- Астрономия
- Аудит
- Биология
- Ботаника
- Бухгалтерский учёт
- Войное дело
- Генетика
- География
- Геология
- Дизайн
- Искусство
- История
- Кино
- Кулинария
- Культура
- Литература
- Математика
- Медицина
- Металлургия
- Мифология
- Музыка
- Психология
- Религия
- Спорт
- Строительство
- Техника
- Транспорт
- Туризм
- Усадьба
- Физика
- Фотография
- Химия
- Экология
- Электричество
- Электроника
- Энергетика
Практична робота 2 Тема: Основи HTML
Мета: 1. Освоїти основні принципи роботи з програмою “HTMLPad 2010”.
2. Навчитися застосовувати теги HTML для структуризації сторінки та форматування тексту.
Питання для повторення:
1. Структура HTML-документу.
2. Теги HTML-документу. Атрибути тегів.
3. Елементи HTML-документу. Класифікація елементів.
Завдання:
Створити HTML-сторінку з наведеними структурними елементами.
Хід роботи:
1. Створити свою папку, в імені якої буде присутнє Ваше прізвище і номер групи. У папці створити файл index.html, який буде Вашою головною web-сторінкою.
2. Відкрити файл index.html за допомогою програми HTMLPad 2010.
3. Записати в нього наступний код:
| <html> <head> <title>Заголовок web-сторінки</title> </head> <body> Вивчаємо web-технології:) </body> </html> |
4. Зберегти файл. Перевірити в браузері результат.
5. Звернути увагу на структуру вікна в програмі HTMLPad 2010. У правій частині вікна знаходиться Inspector атрибутів тегів (якщо вікна Inspector немає на екрані, то відобразити його можна командою View → Inspector). Це вікно містить додаткові атрибути тегів (ім’я тегу завжди розміщується у кутових дужках).
6. Встановити курсор усередині тегу <body> і переглянути, які атрибути є в цього тегу. Змінити атрибути text (білий) і bgcolor (синій). Зберегти зміни. Переглянути результат на вкладці Preview і в браузері. Таким чином, додаючи теги і змінюючи їх атрибути можна створити документ будь-якої складності.
7. Всі файли і зображення, які з’являтимуться на Вашій web-сторінці, повинні розташовуватися усередині однієї папки. Тому, вибрати будь-яке фонове зображення, скопіювати його у Вашу папку і змінити фон сторінки (атрибут background у тезі <body>). Зберегти і переглянути результати роботи в браузері.
8. Використовуючи інформацію, представлену на рис. 1.1, відформатувати вміст сторінки таким чином, що б вона була схожа на рис. 2.1 (детальний опис починається з пункту 9). При форматуванні використати теги, наведені в довідково-інформаційній частині.
Рис. 2.1. Зразок для виконання лабораторної роботи
9. Створити новий документ з ім’ям lab2.html і зберегти його у своїй папці.
10. Між відкриваючим і закриваючим тегами <body> додати текст, який зображений на рис. 2.1. Зберегти його та переглянути результат у браузері.
11. Змінити фон сторінки і колір тексту згідно рисунку.
12. Розбити текст на абзаци, використовуючи тег <p>.
Зауваження: Тег<р>використовується для розбиття тексту на параграфи та містить атрибут вирівнювання "аlign" із значеннями "left", "right", "center" та "justify".
13. Звернути увагу на те, щоб не було червоних (не закритих) тегів.
14. Встановити абзацам вирівнювання. Для цього встановити курсор у середину тегу абзацу (у тег <p>). Перейти на панель Inspector і в атрибуті aling вибрати потрібне значення. Якщо значення вирівнювання по ширині не вибирається зі списку, то встановити його вручну: align=“justify”.
15. Встановити словам жирне, підкреслене та курсивне зображення.
16. У другому абзаці використати верхній індекс.
17. Використовуючи спеціалізовані теги, виділити цитату і програмний код. Використати додатковий тег <pre> для збереження числа пропусків між словами в програмному коді.
18. Використовуючи тег <font>, виділити назви пошукових систем.
19. Змінити колір Яндексу на жовтий.
20. Додати в документ три лінії, першу завдовжки в 400 пікселів та заввишки в 5 пікселів. А другу і третю – шириною 50%.
21. Використовуючи теги <h1>...<h6>, виділити заголовки.
22. Використовуючи коди спеціальних символів, відобразити на сторінці знак менше. Підписати виконане завдання згідно рис. 2.1.
23. Показати виконану роботу викладачеві.
Контрольні питання:
1. Яку програму можна використовувати для створення html- сторінок?
2. Для чого призначена палітра Inspector в програмі HTMLPad 2010?
3. Що таке тег?
4. Які існують теги рівня документа?
5. Якими тегами можна виділити текст жирним, курсивом, підкресленням?
6. Що таке web-документ?
7. Для чого призначена мова HTML?
8. Опишіть обов’язкову структуру HTML-документа?
9. Що таке теги HTML? Як вони оформляються? Атрибути тегів.
10. Опишіть призначення й основні елементи розділу HEAD.
11. Які параметри може мати тег BODY?
12. Який тег позначає початок нового абзацу?
13. У чому відмінність тегів <br> і <p>?
14. Як додати в документ горизонтальну лінію?
15. Що таке спеціальні символи і як їх можна додати в документ?
Не нашли, что искали? Воспользуйтесь поиском: