Глобальна мережа інтернет 111

Матеріал з Фізмат Вікіпедії
Перейти до: навігація, пошук


ГЛОБАЛЬНА МЕРЕЖА INTERNET

Урок 1 - 2

Тема:

Поняття про мову розмітки гіпертексту – мову HTML.

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

Обладнання:графопроектор, таблиці.

1.Організація класу до занять.

2.Мотивація вивчення теми.

Для зручності читання інформації на Web-сторінці подаю не у вигляді суцільного тексту, а поділяю на різні структурні елементи – окремі рядки, абзаци, списки, таблиці, малюнки, гіперпосилання та ін. Щоб Web-сторінка виглядала однаково при перегляді користувачами в різних частинах Землі за допомогою різних броузерів, її готую у спеціальний спосіб. Завдання уроку.

Поняття про мову гіпертекстової розмітки;

Структурні теги;

Оформлення тексту у Web-документі;

Теги форматування символів;

Теги управління зовнішнім виглядом HTML-документа;

Включення графіки до Web-сторінки;

Визначення гіперпосилань;

Теги оформлення списків даних, робота з таблицями;

Засоби створення –документів.

3.Вивчення нового матеріалу.

1.Призначення мови й основні поняття. Різні структурні елементи Web-сторінки позначають відповідними операторами, які називаються тегами. При одержанні Web-сторінки із сервера броузер аналізує її. Він знаходить у ній теги, що вказують, якого типу елемент треба відобразити, і виводить фрагмент Web-сторінки на екран. Сукупність тегів і правил їх використання називається мовою HTML – мова розмітки гіпертексту. Файл даних, фрагменти якого розмічені тегами мови HTML, називається HTML-документом. Ім’я такого файла звичайно має розширення .htm чи .html. HTML-документ, поміщений на Web-сервер є Web-сторінкою, яка переглядається за допомогою Web-броузера. Тому, навчившись створювати HTML-документи, ми зможемо робити власні Web-сторінки. HTML-документ складається з фрагментів тексту у вигляді ASCII-коду й тегів. Теги записуються символами ASII, які беруться в кутові дужки (знаки “<” менше та “>” більше). Таким чином, HTML-документ є звичайним ASII-файлом, і створювати його можна за допомогою найпростішого текстового редактора. Наприклад, при використанні редактора Блокнот треба ввести вміст HTML-документа, а при збереженні вибрати команду Файл-Сохранить. У вікні Сохранение, що відкрилося, встановити значення Все файлы в полі Тип файла, а в імені обов’язково вказати розширення .htm.

Завдяки цьому файл буде відображатися у вигляді значка броузера, який встановлено на даному комп’ютері. Подвійне клацання на значку відкриває HTML-документ у броузері для перегляду. Наприклад, до поля імені файла можна ввести його назву Перша.htm, як показано на малюнку.

2.Теги. Структура HTML-документа. Вище було сказано, що тег – це вказівка броузеру, як відображати фрагмент документа. Тег завжди починається символом “<” і закінчується символом “>”. Між цими символами вказується ім’я тега. В імені малі й великі літери не розрізняються. Теги бувають двох видів – одинарні й парні. Одинарний тег ставиться перед фрагментом тексту, яким він керує. Наприклад, запис
Зошит означає, що слово „Зошит” відображається з нового рядка. Парні теги складаються з двох частин – початкової та завершальної. Початкова частина вказує точку документа, з якої починається дія команди, а завершальна – точку її закінчення. Завершальна частина відрізняється від початкової наявністю символу „ / „ (похила риска) перед ім’ям команди. Наприклад, запис Синій олівець означає, що текст „Синій олівець” відображається напівжирним шрифтом.

Розроблення Web-сторінки складається з двох етапів:

Створення макета;

Вставка тегів мови HTML.

При створенні макета визначається зміст Web-сторінки та її зовнішній вигляд. Вставка тегів забезпечує потрібний зовнішній вигляд при перегляді Web-сторінки за допомогою броузера.

Ознакою того, що текстовий файл є HTML-документом, служить парний тег <HTML> </HTML>. Він починає і завершає весь документ, тобто HTML-документ має вигляд: <HTML> текст документа </HTML> HTML-документ складається з двох частин – заголовка й тіла. Заголовок позначається парним тегом <HEAD> … </HEAD>, а тіло – парним тегом <BODY> … </BODY>. Текст, що вводиться в заголовку вікна броузера, розміщається в парному тезі <TITLE> … </TITLE>. Структура HTML-документа має вигляд <HTML>

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

</HTML>

У будь-якому місці HTML-документа можна помістити коментар. Це текст, який служить для пояснень розробника Web-сторінки та не відображається на екрані під час перегляду Web-сторінки у броузері. Текст коментаря поміщається в парний тег <!- … ->. Найпростіший HTML-документ, відкритий у редакторі Блокнот, подано на малюнку, а зовнішній вигляд відповідної Web-сторінки в броузері Internet Explorer

3. Форматування абзаців і символів. Щоб текст сторінки не відображався суцільним текстом, використовують такі одинарні теги:

- початок абзацу (текст після тега починається з нового абзацу);
- початок нового рядка (текст після тега починається з нового рядка);


- горизонтальна лінія (у рядку, де розміщено тег, відображається горизонтальна лінія).

При використанні тега <p> спочатку вставляється порожній рядок. Далі текст виводиться з початку нового рядка. Якщо вжито тег
, то порожній рядок не вставляється. Перед деякими фрагментами тексту можуть розміщатися заголовки. Вони виділяються більшим шрифтом. HTML має теги для задання величини заголовків (шість рівнів). Найкрупнішим шрифтом виділяються заголовки першого рівня, а найдрібнішим – шостого. Текст заголовка визначається парним тегом <Hn> … </Hn>, де n – номер рівня. Наприклад, фрагмент HTML-документа

Ласкаво просимо!

відображається як заголовок першого рівня.

Абзаци й заголовки можна вирівнювати по центру, лівому чи правому краю. Для цього в імені команди в початковій частині тега вказується параметр ALIGN (вирівняти) й після знака «=» (дорівнює) одне з наступних значень: CENTER – по центру; LEFT – по лівому краю; RIGHT – по правому краю. Наприклад, фрагмент HTML-документа <p ALIGN=RIGHT> Заходьте ще! Відображається як текст „Заходьте ще!”, який притиснуто до правого краю.

Якщо в тексті HTML-документа існують додаткові пробіли між словами, то при виводі в броузері вони можуть вилучатися. Щоб зберегти пробіли при відображенні, треба вказати парний тег
. Він позначає попередньо відформотований текст, тобто текст, що відображається шрифтом фіксованої ширини із збереженням усіх пробілів. Часто цей тег використовується для виведення тексту у вигляді таблиці.

У наведеному вище прикладі використані теги, що керують шрифтом виведення окремих символів. Для форматування символів у мові HTML існують теги:

Теги форматування символів Тег Призначення Напівжирний Курсив Підкреслений


4.Списки і таблиці. Якщо у Web-документі треба перераховувати дані, то їх виводять у вигляді списку. Найчастіше використовуються списки таких типів:

Ненумеровані (маркіровані) – відображаються у вигляді послідовності позначених елементів, позначаються тегом
; Нумеровані – відображаються у вигляді списку, елементи якого мають послідовні номери, позначаються тегом
; Словник визначень – відображається у вигляді термінів і їх визначень, позначається тегом
. Перед кожним елементом ненумерованого й нумерованого списків вказується одинарний тег
  • . У списку типу словника визначень перед кожним терміном вказується одинарний тег
    , а перед його визначенням – тег
    . HTML-документ із нумерованим списком Захоплення та словником визначень, у якому пояснюється кожний вид захоплень. Початок і закінчення ненумерованого списку позначено парним тегом
    , а перед кожним елементом списку одинарний тег
  • (наприклад,
  • інформатика). Словник визначень обмежено парним тегом
    . У ньому кожний термін починається одинарним тегом
    , а його пояснення – тегом
    . Наприклад, у словнику визначень використовується термін Інформатика та його визначення:

    Інформатика
    Мені подобається створювати додатки в Access

    У мові HTML дані можна подавати у вигляді таблиці. Для цього використовується тег …
    . У ньому „шапка” таблиці й дані задаються у вигляді послідовних рядків. Кожний рядок обмежується парним тегом <tr> … </tr>, назва кожного стовпчика таблиці в „шапці” задається парним тегом <th> … </th>, а значення в кожній комірці ділянки даних таблиці – парним тегом <td> … </td>.

    5.Вставка малюнків і гіперпосилання. Щоб зробити Web-сторінку цікавішою, часто використовують малюнки. Для того щоб помістити малюнок, треба попередньо зберегти його у файлі. Потім у HTML-документі використати тег <img src = ‘ім’я файла”> Наприклад, якщо треба помістити фотографію Шаповала, що зберігається у файлі Фото Шаповал.jpg, треба вставити в HTML-документ тег <img src = “Фото Шаповал.jpg”>

    При перегляді Web-сторінки іноді треба перейти з однієї її частини в іншу чи навіть на іншу Web-сторінку. Для організації таких переходів використовують гіперпосилання. На Web-сторінці вони відображаються іншим кольором у вигляді підкресленого тексту. При наведенні покажчика миші на неї покажчик відображається у вигляді кисті руки, а при клацанні – відбувається перехід на зазначене місце. Для організації переходу усередині HTML-документа використовуються два теги. Перший позначає точку документа, на яку треба перейти. Він має вигляд <A NAME = “Назва_точки”> </A> Другий тег визначає команду переходу на задану точку. Він має вигляд <A HREF =”#Назва_ точки”> Текст </A> Текст між початковою та кінцевою частинами тега відображається в броузері у вигляді гіперпосилання. Назва точки переходу вибирається розробником Web-документа довільно.

    У HTML-документі існує пара таких тегів: <A NAME=”Розпорядок дня”> </A> (перед відповідним фрагментом) і <A HREF=”#Розпорядок дня”> Розпорядок дня </A>. Перехід на іншу Web-сторінку здійснюється за допомогою тега, який має вигляд < HREF=”URL-адреса”> Текст </A>. Зокрема, як URL-адресу можна вказати ім’я файла.

    Наприклад, на малюнку вище зазначені теги <A HREF=”Оцінки.htm”> Мої оцінки </A> і <A HREF=”Захоплення.htm”> Захоплення </A>, за допомогою яких можна перейти до перегляду раніше створених Web-сторінок. Якщо після перегляду кожної з цих сторінок треба повернутись на початкову сторінку Шаповал.htm, то в кожному з HTML-документів Оцінки.htm і Захоплення.htm бажано розмістити тег

    <A HREF=”Шаповал.htm”> Перехід на початкову сторінку </A>. Його можна вставити перед кінцевою частиною тега </BODY>. Вивчивши матеріал, ви зможете створити свої перші Web-сторінки. Якщо ви захочете їх розмістити на Web-сервері, то попередньо зверніться до свого провайдера, щоб узнати ім’я файла початкової сторінки. Дуже часто HTML-документ треба назвати index.html, default.html чи home.html. Завдання додому: Вивчити стор.64 – 76. Підготуватись до практичної роботи „Створення HTML-документа, що містить теги форматування абзаців і символів.”