Інформатика

Безкоштовно

Ніхто не записаний

Урок 26. Технології опрацювання мультимедійних даних. Мова гіпертекстової розмітки.

Прочитайте!

Усі 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 пікселів, що займає половину ширини вікна з вирівнюванням по правому краю.

Працюємо за комп’ютером!

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

Теми сайтів:

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

Робота над сайтом з використанням мови розмітки HTML

Запустіть програму Блокнот, або Notepad ++ та використовуючи основні теги створіть власний сайт.

ЗРАЗОК (коментарі виділено червоним кольором, їх писати не потрібно, синім кольором виділено текст сайту, у вас він має відповідати темі вашого сайту).

<HTML>

Встановлюємо заголовок сайту

<HEAD>

<TITLE> Улюблені гори</TITLE> </HEAD>

Задаємо колір тексту та фону, а також виділяємо заголовок тексту

<BODY BGCOLOR= “aqua” TEXT=”navy” >  <H1><B> Улюблені гори</B>   </H1>

Записуємо текст, що буде розміщено на сайти (згодом його будемо доповнювати), перший рядок тексту оформлено, як заголовок другого рівня (Н2), текст відображається в жирному накреслені.

<H2><B> Гора Говерла. Висота — 2061 м </B></H2>

Говерла – найвища точка українських Карпат. Гора розташовується на межі Івано-Франківської та Закарпатської областей. Одні із найпопулярніших поселень для старту подорожі до вершини – Ворохта, Яремче та Верховина. Населені пункти розташовані за рейтингом популярності серед туристів.

Розпочинаємо новий абзац, а також проводимо горизонтальну лінію

<P> <HR>

<H2><B> Гора Бребенескул. Висота — 2032 м </B></H2>

Бребенескул височіє між ще двома вершинами Менчул і Ребра. Поблизу гори розташовується найвисокогірніше озеро Карпат із однойменною назвою. Вершина практично не виступає із Чорногорського хребта, яким прокладений трекінговий маршрут, а тому проходячи тут – її можна й не помітити. Маршрут можна розпочати із села Шибене і також відвідати озеро Марічейка, чи із села Дземброня та відвідати Дзембронські водоспади й Вухатий камінь.

</HTML>

Зберігаємо першу сторінку сайту. Для цього вибираємо пункт меню Зберегти як, вводимо назву сайту та вибираємо розширення HTML. Тепер нашу першу сторінку можна переглянути у вікні браузера. Якщо потрібно відредагувати створену сторінку, відкриваємо її знову за допомогою програми Блокнот, або Notepad ++. Всі внесені зміни зберігаємо.

Завантажити конспект та завдання

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

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