Контрольні питання:
Яку програму можна використовувати для створення html- сторінок?
Для чого призначена палітра Inspector в програмі HTMLPad 2010?
Що таке тег?
Які існують теги рівня документа?
Якими тегами можна виділити текст жирним, курсивом, підкресленням?
Що таке web-документ?
Для чого призначена мова HTML?
Опишіть обов’язкову структуру HTML-документа?
Що таке теги HTML? Як вони оформляються? Атрибути тегів.
Опишіть призначення й основні елементи розділу HEAD.
Які параметри може мати тег BODY?
Який тег позначає початок нового абзацу?
У чому відмінність тегів <br> і <p>?
Як додати в документ горизонтальну лінію?
Що таке спеціальні символи і як їх можна додати в документ?
Практична робота 3 Тема: Зображення. Списки. Гіпертекстові посилання
Мета: 1. Навчитися додавати зображення в документ і управляти атрибутами тегу. 2. Навчитися створювати нумеровані, маркіровані списки і списки визначень. 3. Навчитися створювати внутрішні та зовнішні посилання.
Питання для повторення:
Гіпертекстові посилання.
Створення гіперпосилань.
Включення зображень в HTML. Вставка зображень.
Створення списків, як елементів HTML-документу.
Завдання:
Створити HTML-сторінку з наведеними структурними елементами.
Хід роботи:
Створити в своїй папці файл lab3.html.
Використовуючи дані з архіву до лабораторної роботи, вставити в документ зображення з врахуванням: ширини, висоти, вирівнювання, спливаючих підказок і т.д., як показано на рис. 3.1.
Рис. 3.1. Приклад виконання лабораторної роботи
Рис. 3.1. Приклад виконання лабораторної роботи (продовження)
Створити список визначень згідно рис. 3.1. Використати для цього теги <dl>, <dt> і <dl>.
Створити маркірований список, використовуючи тег <ul>. Змінити зовнішній вигляд маркера на квадрат.
Створити нумерований список. Здійснити нумерацію римськими цифрами і змінити початок нумерації з числа XV.
Створити список з багаторівневою нумерацією.
Позначити початок кожного розділу лабораторної роботи як іменований якір: <a name=”image”>, <a name=”spysok”>.
На початку сторінки додати список посилань на всі розділи лабораторної роботи (див. рис. 3.2). Пам’ятайте, що при посиланні на іменований якір слід використовувати знак # перед ім’ям якоря.
Рис. 3.2. Приклад списку посилань на два розділи лабораторної роботи
Додати знизу документа посилання на свою сторінку в соціальній мережі, яка відкриватиметься в новому вікні.
Друге зображення в документі зробити посиланням на пошукову систему Google.
Відкрити створений на попередній лабораторній роботі файл index.html, в якому розробити список, що містить посилання на завдання перших трьох лабораторних робіт (див. рис. 3.3).
Рис. 3.3. Приклад списку, що містить посилання на завдання перших трьох лабораторних робіт
Створити новий файл my.html і записати в ньому: нумерований список з відомих Вам мов програмування, маркірований список з відомих Вам колірних палітр.
Додати посилання на файл my.html у файл index.html.
Показати виконану роботу викладачеві.