Інформатика

Безкоштовно

Зараховано 2 учнів

Уроки 55-56. Поняття про мову розмітки HTML. Структура веб-сторінки. Оформлення тексту. Текстові елементи веб-сторінки, теги та їх атрибути.

Тема уроку: “Поняття про мову розмітки HTML. Структура веб-сторінки. Оформлення тексту. Текстові елементи веб-сторінки, теги та їх атрибути”

Пригадаємо…

  • З яких етапів складається процес створення сайта?
  • Чи є процес «розкрутки» сайта обов’язковим?
  • Що таке хостинг сайту?

Прочитайте!

Усі HTML-редактори можна поділити на дві категорії: текстові й графічні.

Текстові передбачають набір коду вручну, хоча й зі значною автоматизацією цього процесу. Їхні інструменти дають змогу автоматизовано вставляти до документа потрібні теги його розмітки.

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

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

Теги – службові символи, що являють собою команди HTML, які вказує браузеру, як слід відображати Web-сторінку. Теги починаються зі знака <, за яким потрібно писати ключове слово, і закінчується знаком >.

  • <html></html>  – тег HTML вказує початок і кінець HTML документа.
  • <head></head> – тег HEAD (заголовок HTML-документа) містить інформацію, що сточується документа в цілому.
  • Тег TITLE установлює заголовок HTML-документа, виведений у рядку заголовка вікна браузера. Приклад: <title>перша сторінка</title>.

Елемент тегу body

  • <body text=“red”> … <body /> Атрибут TEXT установлює кольори для всього тексту HTML-документа. Колір може бути зазначений за допомогою назви або шістнадцяткового коду.
  • Атрибут BGCOLOR установлює кольори тіла HTML-документа.

Приклад: <body BGCOLOR= “yellow”  text=“navy”> Мій сайт <body />

Теги заголовків

<h1></h1> Тег H1 визначає заголовок першого рівня (самі великі букви в заголовку). Усього є шість рівнів заголовків. <h6></h6>

<b></b> – тег b установлює відображення тексту в жирному накресленні.
<i></i> – тег і установлює відображення тексту курсивом.

<P> – тег означає початок нового абзацу. Його можна записувати в кінці попереднього абзацу.

<HR> – у рядку буде проведено горизонтальну лінію

Документ HTML із усіма структурними тегами має вигляд:

<HTML>

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

<BODY>

<H1>Заголовок підрозділу рівня 1</H1>

<H2>Заголовок підрозділу рівня 2</H2>

<P>текст документу, абзац 1</P>

<P>текст документу, абзац 2

</BODY>

</HTML>

Як обмежник абзаців можна використовувати горизонтальну лінійку. Цей елемент задається непарним тегом <HR>. Довжина й товщина задаються атрибутами тегу <HR>. Наприклад: <HR ALIGN=”RIGHT” SIZE=”10″ WIDTH=”50%”>.

Цей тег створює горизонтальну лінійку завширшки у 10 пікселів, що займає половину ширини вікна з вирівнюванням по правому краю.

Виконання практичного завдання

Протягом кількох уроків ми з вами працюватимемо над створенням власного сайту. На сьогоднішньому уроці ви повинні визначитись із темою (можна вибрати одну із запропонованих учителем, або власну тему), а також використовуючи покрокові інструкції розпочати роботу над сайтом.

  • Моє рідне місто.
  • Моя школа.
  • Моє захоплення.
  • Улюблені місця відпочинку.
  • Історія мого міста.
  • Ким я бачу себе у майбутньому.

Завантажити інструкційну картку із завданням Завантажити

Якщо у вас немає можливості працювати за ПК, замість практичних завдань можна дати письмову відповідь на запитання:

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

  1. Що таке теги, для чого вони використовуються?
  2. Які теги заголовків ви знаєте?
  3. Які теги використовуються для проведення горизонтальної лінії, для абзацу та для відображення тексту в жирному накресленні?
  4. Запишіть фрагмент сайту, який би вивів текст синього кольору на блакитному фоні.

 

0.00 на основі 0 рейтингів

5 зірок
0%
4 зірок
0%
3 зірок
0%
2 зірок
0%
1 зірок
0%