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



Скачати 148,29 Kb.
Дата конвертації26.10.2018
Розмір148,29 Kb.
ТипУрок
Урок 1 - 2

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

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

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

ПЛАН УРОКУ



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

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

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

Завдання уроку.


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

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

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

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

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

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

Сукупність тегів і правил їх використання називається мовою HTML – мова розмітки гіпертексту.

Файл даних, фрагменти якого розмічені тегами мови HTML, називається HTML-документом.

Ім’я такого файла звичайно має розширення .htm чи .html. HTML-документ, поміщений на Web-сервер є Web-сторінкою, яка переглядається за допомогою Web-браузера. Тому, навчившись створювати HTML-документи, ми зможемо робити власні Web-сторінки.

HTML-документ складається з фрагментів тексту у вигляді ASCII-коду й тегів. Теги записуються символами ASII, які беруться в кутові дужки (знаки “<” менше та “>” більше). Таким чином, HTML-документ є звичайним ASII-файлом, і створювати його можна за допомогою найпростішого текстового редактора.



Наприклад, при використанні редактора Блокнот треба ввести вміст HTML-документа, а при збереженні вибрати команду ФайлСохранить. У вікні Сохранение, що відкрилося, встановити значення Все файлы в полі Тип файла, а в імені обов’язково вказати розширення .html.

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

b. Теги. Структура HTML - документа. Вище було сказано, що тег – це вказівка браузеру, як відображати фрагмент документа. Тег завжди починається символом “<” і закінчується символом “>”. Між цими символами вказується ім’я тега. В імені малі й великі літери не розрізняються.

Теги бувають двох видів – одинарні й парні.

Одинарний тег ставиться перед фрагментом тексту, яким він керує. Наприклад, запис <br> Зошит

означає, що слово „Зошит” відображається з нового рядка.

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

Найпростіша сторінка має такий вигляд. Текст можна набирати в блокноті так як показано на малюнку.




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


Зверніть увагу, що текст який знаходиться між тегами (<title> Заголовок документа) надає назву вікну. Текст, таблиці, зображення, відео тощо потрібно прописувати між тегами .

У будь-якому місці HTML - документа можна помістити коментар. Це текст, який служить для пояснень розробника Web - сторінки та не відображається на екрані під час перегляду Web - сторінки у браузері. Текст коментарю поміщається в парний тег .
с. Форматування абзаців і символів. Щоб текст сторінки не відображався суцільним текстом, використовують такі одинарні теги:

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


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


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

При використанні тега

спочатку вставляється порожній рядок. Далі текст виводиться з початку нового рядка. Якщо вжито тег
, то порожній рядок не вставляється.

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

Текст заголовка визначається парним тегом



, де n – номер рівня.

Наприклад, фрагмент HTML-документа



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

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

Абзаци й заголовки можна вирівнювати по центру, лівому чи правому краю. Для цього в імені команди в початковій частині тега вказується параметр ALIGN (вирівняти) й після знака «=» (дорівнює) одне з наступних значень:

CENTER – по центру;

LEFT – по лівому краю;

RIGHT – по правому краю.

Наприклад, фрагмент HTML-документа



Заходьте ще! Відображається як текст „Заходьте ще!”, який притиснуто до правого краю.

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

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

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

Тег

Призначення

текст

Напівжирний

текст

Курсив

текст

Підкреслений

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


  • Ненумеровані (маркіровані) – відображаються у вигляді послідовності позначених елементів, позначаються тегом
    ;

  • Нумеровані – відображаються у вигляді списку, елементи якого мають послідовні номери, позначаються тегом
    ;

  • Словник визначень – відображається у вигляді термінів і їх визначень, позначається тегом
    .

Перед кожним елементом ненумерованого й нумерованого списків вказується одинарний тег
  • . У списку типу словника визначень перед кожним терміном вказується одинарний тег
    , а перед його визначенням – тег
    .

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

    , а перед кожним елементом списку одинарний тег
  • (наприклад,
  • інформатика).



    Словник визначень обмежено парним тегом
    . У ньому кожний термін починається одинарним тегом
    , а його пояснення – тегом
    . Наприклад, у словнику визначень використовується термін Інформатика та його визначення:

    Інформатика

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

    4. Домашнє завдання. Вивчити конспект.



  • Каталог: bitstream -> 123456789 -> 658
    123456789 -> 1. Коротко про симетрію…
    123456789 -> Звіт про науково-дослідну роботу регіональні особливості стану кишкової мікрофлори у дітей із соматичними захворюваннями Оцінка стану кишкової мікрофлори у дітей раннього віку, хворих на пневмонію на фоні залізодефіцитної анемії
    123456789 -> Звіт про науково-дослідну роботу регіональні особливості стану кишкової мікрофлори у дітей із соматичними захворюваннями зміни мікробіоценозу кишечника у дітей, хворих на гострий обструктивний бронхіт бронхіальну астму (проміжний)
    123456789 -> Використання науково-технічних бд у наукових дослідженнях Васильєв О. В., к т. н
    123456789 -> Розвиток банківського споживчого кредитування
    123456789 -> Реферат дипломна робота містить 128 сторінок, 17 таблиць, 21 рисунок, список використаних джерел з 108 найменувань, 6 додатків
    123456789 -> Урок з хімії у 9-му класі на тему: "Жири. Склад жирів, їх утворення. Жири в природі. Біологічна роль жирів"
    658 -> Практична робота №1 «Браузер Internet Explorer, створення найпростішої сторінки за допомогою програми блокнот.»


    Поділіться з Вашими друзьями:


  • База даних захищена авторським правом ©uchika.in.ua 2019
    звернутися до адміністрації

        Головна сторінка