матеріал

Інші методичні матеріали

Для кого: 9 Клас

Практичне заняття "Створення web-сторінок"

Опис документу:
Документ містить методику проведення практичного заняття з теми "Створення web-сторінок", короткі теоретичні відомості до уроку, приклади виконання. Розкриває теми створення, збереження web-сторінок, форматування тексту та абзаців в HTML

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

Перегляд
матеріалу
Отримати код

ПРАКТИЧНЕ ЗАНЯТТЯ (2 години)

Тема: Створення web-сторінок

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

Зміст: вивчення особливостей створення та перегляду веб-сторінок, вивчення основних тегів для сторінок гіпертекстової розмітки, створення HTML-сторінок.

Питання активізації знань

  1. Програми для створення та редагування HTML-сторінок

  2. Програми для перегляду HTML-сторінок

  3. Основні теги для роботи с текстом

  4. Основні теги для форматування абзаців

  5. Правила створення веб-сторінки, теги веб-сторінки

  6. Збереження та оновлення сторінок, перегляд створених сторінок в вікні браузера

Методичні вказівки щодо розв’язання практичних ситуацій

Hyper Text Markup Language (HTML) є стандартною мовою, призначеною для створення гіпертекстових документів в середовищі WEB. HTML- документи можуть бути видимими різними типами WEB-браузеров. Коли документ створений з використанням HTML, WEB-браузер може інтерпретувати HTML для виділення різних елементів документа і первинної їх обробки. Використання HTML дозволяє форматувати документи для їх уявлення з використанням шрифтів, ліній і інших графічних елементів на будь-якій системі, що їх переглядає. Основна перевага HTML полягає в тому, що ваш документ може бути проглянутий на WEB - браузерах різних типів і на різних платформах.

Всі теги HTML починаються з "<" (лівої кутової дужки) і закінчуються символом ">" (правої кутової дужки). Як правило, існує стартовий тег і завершуючий тег. Для прикладу приведемо теги заголовка, що визначають текст, що знаходиться усередині стартового і завершуючого тега і заголовок документа:

<TITLE> Заголовок документа </TITLE>

Завершуючий тег виглядає також, як стартовий, і відрізняється від нього прямим слешем перед текстом усередині кутових дужок. У даному прикладі тег <TITLE> говорить WEB-браузеру про використання формату заголовка, а тег </TITLE> - про завершення тексту заголовка.

Структура документа HTML

Коли WEB-броузер отримує документ, він визначає, як документ повинен бути інтерпретований. Найперший тег, який зустрічається в документі, повинен бути тегом <HTML>. Даний тег повідомляє WEB-броузеру, що ваш документ написаний з використанням HTML. Мінімальний HTML-документ виглядатиме так:

<HTML> ...тіло документа... </HTML>

Заголовна частина документа <HEAD>

Тег заголовної частини документа повинен бути використаний відразу після тега <HTML> і більш ніде в тілі документа. Даний тег вдає із себе загальний опис документа. Уникайте розміщувати який-небудь текст усередині тега <HEAD>. Стартовий тег <HEAD> поміщається безпосередньо перед тегом <TITLE> і іншими тегами, що описують документ, а завершуючий тег </HEAD> розміщується відразу після закінчення опису документа. Наприклад:

<HTML>
<HEAD>
<TITLE> Список співробітників </TITLE>
</HEAD>

Тіло документа <BODY>

Тіло документа повинне знаходитися між тегами <BODY> і </BODY>. Це та частина документа, яка відображається як текстова і графічна (смислова) інформація вашого документа.

Тег абзацу <P>

У відмінності від більшості текстових процесорів, в HTML-документе зазвичай ігноруються символи повернення каретки. Фізичний розрив абзацу може знаходитися в будь-якому місці початкового тексту документа (для зручності його читаності). Проте броузер розділяє абзаци тільки за наявності тега <P>. Якщо ви не розділите абзаци тегом <P>, ваш документ виглядатиме як один великий абзац.

Додаткові параметри тега <P>:

<P ALIGN=left|center|right>

дозволяють вирівнювати абзац по лівому краю, центру і правому краю відповідно.

Деякі теги форматування тексту

HTML дозволяє використовувати різні стилі шрифтів для виділення текстовій інформації у ваших документах. Ось короткий список стилів, підтримуваних більшістю броузеров:

  • bold (жирний)

  • italic (похилий)

  • mono spaced (type writer - з використанням фіксованих шрифтів)

  • underline (підкреслений)

  • strike (закреслений)

Ви можете комбінувати різні види стилів, наприклад жирний і похилий.

Таблиця 4.1 – Теги стилю тексту

Стиль

Елемент або тег

Результат

Bold

<B> Цей текст жирний </B>

Цей текст жирний

Italic

<I> Цей текст похилий </I>

Цей текст похилий

Mono spaced

<TT> Цей текст з непроп. шрифтом </TT>

Цей текст з непроп. шрифтом

Underline

<U> Цей текст підкреслений </U>

Цей текст підкреслений

STRIKE

<S> Цей текст закреслений </S>

Цей текст закреслений

Комбінування стилів дозволяє вам відображати в одному рядку декілька елементів різними стилями, наприклад:

<b>Життя</b> - <i>це <b>пісня!</b></i>

Життя - це пісня!

Додаткові стилі:

  • big (великий)

  • small (маленький)

  • sub (підрядковий переклад)

  • sup (надстрочник)

Таблиця 4.2 – Теги додаткових стилів тексту

Стиль

Елемент або тег

Результат

Big

Цей текст <BIG> великий </BIG>

Цей текст великий

Small

Цей текст <SMALL> маленький </SMALL>

Цей текст маленький

Sub

Цей текст <SUB> підрядковий переклад </SUB>

Цей текст підрядковий переклад

Sup

Цей текст <SUP> надстрочник </SUP>

Цей текст надстрочник

Приклад використання цих тегов:

C<SUB><SMALL>2</SMALL></SUB>H<SUB><SMALL>5</SMALL></SUB>OH
C2H5OH

Тег <FONT> дозволяє довільно визначати розмір шрифту, колір шрифту і вид (family) шрифту. Змінити розмір шрифту можна завданням атрибуту SIZE таким чином

<FONT SIZE="n"> або <FONT SIZE="+n">, <FONT SIZE="-n">

Шрифт може мати розмір від 1 до 7. Ви можете прямо вказати розмір шрифту цифрою, або вказати зсув щодо базового значення (за умовчанням - 3) в позитивну або негативну сторону. Базове значення можна змінити за допомогою тега:

<BASEFONT SIZE="n">

Колір шрифту ви можете змінити за допомогою тега

<FONT COLOR="color"> або <FONT COLOR="#??????">

Кольори можна задавати назвами або завданням кількості червоного, зеленого і синього. У другому випадку перед значенням кольору ставиться #, а потім по два байти кожного кольору (RGB), виражені в шістнадцятковій системі. Основні кольори представлені в таблиці кольорів.

Вид шрифту можна визначати за допомогою тега <FONT FACE="family">, де "family" - назва шрифту. Якщо ви не указуєте назву шрифту або якщо вказаний вами шрифт не встановлений в системі - браузер відобразить текст шрифтом встановленим за умовчанням. Найбільш стандартними шрифтами є: ARIAL, TIMES, COURIER.

Приклад використання тега:

<FONT FACE="COURIER" SIZE="+1" COLOR="green">Трохи зеленого тексту</FONT>
Трохи зеленого тексту

Завдання:

1. Створити документ HTML. Для цього спочатку створити директорію, у якій ви будете його зберігати. Потім в цій директорії створити простій текстовий файл з розширенням .html. Наприклад, index.html. Це можна зробити за допомогою будь-якого текстового редактора, що дозволяє створювати і редагувати текстові файли. Таким редактором, що поставляється разом з Windows, є текстовий редактор NotePad (Блокнот). Можна використовувати будь-який інший редактор текстів або спеціалізований редактор.

Зверніть увагу, що багато текстових редакторів зберігають файли застосовуючи для них за умовчанням розширення .txt. Щоб уникнути цього потрібно в діалоговому вікні збереження файлу вказати повне ім'я файлу разом з розширенням .html, а у випадному списку Тип файлу вибрати Всі файли *.txt. Результат вашої роботи можна подивитися за допомогою веб-сервера-броузера Internet Explorer. Для цього можна просто двічі кликнути лівою кнопкою миші по іконі файлу. Файли з розширенням .html за умовчанням відкриваються за допомогою цієї програми.

2. В створений документ HTML внести наступний код:

<html>
<head>
<title>Мій перший крок</title>
</head>
<body>
<div align="center">
<
b>Добрий день! Це моя перша сторінка! </b>
<br>
Ласкаво прошу! :) </div>
<p align="justify">
Я зовсім нещодавно почав знайомство зі створенням інтернет-сторінок, тому для початку я роблю просту сторінку! Ось вона яка!:)
</p>

<FONT FACE="COURIER" SIZE="+2" COLOR="red">Заходьте до мене на сторінку!</FONT>
</body>
</html>

  1. Збережіть зміни в текстовому файлі. Виконайте команду Файл - Зберігти.

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

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

Начальнику

Петрову С.О.

Іванова О.М.

рапорт

Я, Іванов О.М., що мешкаю за адресою:

Донецьк

вул. Космонавтів

дім 7 кв. 126

прошу дозволити мені проживати на приватній квартирі за адресою:

Слов’янськ

вул. Батюка

дім 2, кв. 167

З правилами проживання та поведінки ознайомлений.

09.09.2018 підпис

Рисунок 4.1 – Завдання для самостійного створення сторінки

6. В зошиті для практичних робіт записати тему, мету заняття, основні теги мови розмітки гіпертексту, код сторінок для другого та четвертого завдання. Написати висновок по роботі.

Зверніть увагу, свідоцтва знаходяться в Вашому особистому кабінеті в розділі «Досягнення»

матеріал

Інші методичні матеріали

Для кого: 9 Клас