фніорматика 9 клас 13.04.2020

Тема: Розмітка гіпертексту засобами HTML

1. Перегляньте презентацію https://ppt-online.org/220964

2. Опорний конспект для учня

Тема: Мова розмітки  гіпертексту HTML.

Ціль уроку: ознайомитись з мовою HTML та її основними елементами для форматування тексту у веб сторінках.

Формування абзаців і рядків

При створенні Web-сторінок потрібно прагнути до лаконічних текстів, які чітко розділені на абзаци. Для створення абзацу у мові HTML передбачено вико­ристання тегів <Р> і </Р>, між якими вміщений текст абзацу. Втім, кінцевий тег </Р> в елементі абзацу не є обов'язковим.

Для розриву рядка застосовується тег <BR>. Цей тег є порожнім елементом, що змушує браузер перевести текст на новий рядок. Теги <ВR> зручні при оформленні поштових адрес, наборі віршів тощо.

Для структуризації тексту в HTML-документах використовуються розділи, що задаються тегами <DIV> та </DIV>. Характерною ознакою елементів DIV є наявність порожнього рядка перед ними.

Горизонтальні лінії у документі

Горизонтальна лінія – це графічний елемент HTML-документа, довжину, товщину та колір. Для створення ліній призначено елемент HR. Зовнішній вигляд ліній можна змінити за допомогою атрибутів тегу HR:

P  align – тип вирівнювання лінії на сторінці. Цей атрибут може набува-ти значень: left, right, center (встановлюється за замовчуванням);

P  width – ширина лінії у пікселах або відсотках від ширини вікна;

P  size – товщина лінії в діапазоні від 1 до 175 пікселів;

P  color – колір лінії (<HR color="green">);

P  noshade – суцільна лінія без тіні (<HR noshade>).

Приклад – блакитна лінія товщиною 10 пікселів, шириною 80% від роз-міру вікна задається тегом: <HR color="cyan" size=10 width=80%>

Задання заголовків

Заголовки поділяють HTML-документ на логічно закінчені блоки. Завдяки заголовкам відвідувач Web-сторінки може отримати уявлення про її вміст. Для задания заголовків використовуються парні теги <Н_i>…</Н_i>.

Усього передбачено 6 рівнів заголовків:

<Н1> … </Н1> – заголовок 1-го, найви­щого рівня,

………………..

<Н6> … </Н6> –заголовок 6-го рівня – найменшого розміру.

Вирівнювання абзаців

Абзаци, що задаються тегом <Р>, розділи <DIV> і заголовки <Н_i>, за умовчанням вирів­нюються по лівому краю сторінки. Змінити тип вирівнювання можна за допомогою атрибута align:

P  align="center" – вирівнювання по центру,

P  align="right" – по правому краю сторінки,

P  align="left" – по лівому краю сторінки;

P  align="justify" – рівномірно розташувати по ширині вікна.

3. Робота з комп'ютером

https://www.youtube.com/watch?v=_7_r_gJLmWc&feature=youtu.be