Тема 63(8)
Семантичний конспект уроку (виписати в зошит текст синього кольору):
HTML (Hypertext Markup Language) - мова розмітки гіпертекстових документів використовується для створення веб-сторінок і веб-додатків.
Наприкінці 1991 року Тім Бернерс-Лі опублікував перший загальнодоступний опис мови розмітки HTML, відомий як документ «HTML-теги». В ньому були описані 20 елементів відносно простої схеми розмітки HTML.
HTML5 — найпоширеніша нині версія мови HTML, яка в 2004 році прийшла на заміну стандартній HTML.
Вона дає можливість полегшити користувачеві навігацію сайтом завдяки розмітці областей веб-сторінки за допомогою певних тегів, які описують основні елементи, що є спільними для всіх веб-сторінок.
Для створення HTML-розмітки документа використовують будь-який текстовий редактор.
Для перегляду HTML- документа використовується браузер.
Тіло сторінки умовно поділяється блоки з відповідними назвами (як на картинці).
Теги – службові символи (команди HTML), що вказують браузеру, як слід відображати Web-сторінку. Теги починаються і закінчуються кутовими дужками.
Теги можуть бути парними і непарними.
Елементи (теги) мають таку структуру:
Атрибути - додаткові елементи тегів, які змінюють вигляд об'єктів, до яких застосовуються. Атрибут записується після імені тега перед закриваючою дужкою і складається із пари: ім'я атрибуту = „значення”
Структурні теги
(таблицю записати у зошит)
Атрибути тегу <BODY>:
BGCOLOR Задає колір фону
TEXT Задає колір тексту
BACKGROUND Визначає зображення, яке використовується як фонове
Для визначення кольору фону документа тег <BODY> записується таким чином (атрибуту BGCOLOR можуть бути задані як RGB-коди, так і безпосередньо назви кольорів англійською мовою):
<BODY BGCOLOR=#FF0000> або <BODY BGCOLOR=RED> - фон документа буде червоного кольору.
<BODY TEXT=#FF0000> або <BODY TEXT=RED> - колір тексту в документі буде червоним.
Атрибути можуть бути записані одночасно:
<BODY BGCOLOR=RED TEXT=WHITE> - колір фону червоний, колір тексту - білий.
Для використання зображення як фону необхідно вказати шлях до файлу на диску, по якому знаходиться зображення. Наприклад, зображення знаходиться у файлі 008.gif у папці IMG на диску С:. В цьому випадку тег <BODY> з атрибутом встановлення фонового зображення буде записаний таким чином:
<BODY BACKGROUND=”C:/IMG/008.GIF”>.
У випадку, якщо файл зображення знаходиться у тій же папці, що і HTML-документ, шлях до файла можна не вказувати, просто вказати його ім’я.
ПРИКЛАД Файлу у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE>
</HEAD>
<BODY BACKGROUND=”008.gif”>
</BODY >
</HTML>
Теги оформлення текстових абзаців
(таблицю записати у зошит)
Робочий Аркуш уроку №63
Сайт завантаження та встановлення на ПК поточної версій програми Notepade++ - https://notepad-plus-plus.org/downloads/v8.6.5/
Завдання 1
Завдання 2.
Створіть папку Web_Design для збереження завдань курсу.
У папці Web_Design створіть папку Урок_2.1, в якій буде зберігатися веб-сторінка
Запустіть Notepade++ (це простий редактор коду).
У вікні редактора наберіть стандартний код HTML-розмітки.
Оберіть кодування відповідно до прописаного в charset (в даному випадку utf-8).
Збережіть файл у папці Урок_2.1, обов'язково задавши розширення html. Наприклад, index.html. (Якщо не вказати розширення, то це буде звичайний текстовий файл, браузер не відображатиме його).
Після збереження файла автоматично змінюється вигляд коду у вікні Notepade++. Теги, атрибути, текст виділяються різними кольорами, а парні теги підсвічуються при клацанні мишкою на будь-якому з них. Видно структуру.
В голові документа прописується теги, які не відображаються браузером, в тілі - ті, які браузер відображає.
5. Закрийте Notepade++.
6. Відкрийте папку Урок_2.1. Піктограма файла, збереженого у цій папці, вказує, який браузер встановлений за замовчуванням. У нас - GoogleCrome.
Двічі клацнувши мишкою файл index.html, ми відкриємо його в браузері як веб-сторінку
Щоб продовжити редагувати файл, необхідно клацнути його правою кнопкою мишки та обрати команду Edite with Notepad++.
Завдання 2.
Розташуйте вікно програми Notepad++ і браузера поряд, щоб зручно було бачити, яким чином зміна коду впливає на вигляд веб-сторінки. Вносячи зміни у блокноті, оновлюємо веб-сторінку.
Змініть заголовок web-сторінки на "Філософія життя".
Скопіюйте текст з файлу Тема2-1-1.txt і вставте його в тіло документа index.html.
ВІдформатуйте текст згідно зразка, скористайтеся тегами <p>,<br>, <hr>.
На зразку немає закриваючого тега </p>. Як ви думаєте, чому?
