Урок 1. Перше знайомство

Урок 2. Красиві документиУрок 3. Красиві програмиУрок 4. ГіпертекстУрок 5. ГрафікаУрок 6. Конструктор документівУрок 7. Як ми жили без таблиць?

Мета посібника – використовуючи засоби HTML, і JavaScript навчитися будувати корисні комп’ютерні програми, які можна було б використовувати на локальному комп’ютері у себе вдома, в школі або на базі отриманих знань побудувати власну діалогову сторінку в Інтернеті.

Наш курс – практичний, тому відразу приступаємо до справи.

Вправа 1. Найпростіша HTML-сторінка

Зараз ви читаєте текст, який показує браузер, виконуючи програму, написану на мові HTML. Деякі слова в цьому тексті виділені кольором і підкреслені. Курсор миші, потрапляючи на такі виділення, перетворюється із звичайного курсору на вказівний палець: це посилання! Досить клацнути на посилання мишкою, як поточний текст на екрані заміниться тим, на яке посилання запрограмована.

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

Ось текст HTML-програми, яка показує цю сторінку:

Текст HTML-програми Коментарій 
<HTML>

  <HEAD>
    <META content="charset=windows-1251">
    <TITLE>Вправа 1</TITLE>
  </HEAD>

  <BODY>
    <H1>Перший HTML-документ</H1>
    <HR>
    <P>
      Корова не похожа на лошадь.
      А лошадь не похожа на корову.
      Именно это сходство
      мы и берем за основу.
    </P>
  </BODY>
</HTML>

початок HTML-документа

  початок заголовку
    інформація про документ
    назва документа
  кінець заголовка

  початок тіла
    заголовок
    горизонтальна лінія
    початок абзацу

      абзац


    кінець абзацу
  кінець тіла
кінець HTML-документа

Команди мови (теги) беруться в кутові дужки. Як правило, теги парні. Перший тег відкриває опис команди, визначає її початок, другий, що відрізняється від першого наявністю косою риски ” / ” перед ключовим словом (ім’ям тега) – закриває його.

Тег <HTML> повинен відкривати програму, а тег </HTML> – закривати її.

Між цими двома основними тегами розташовується заголовок програми та її тіло:

HTML-програма 
<HTML>
   заголовок програми
   тіло програми
</HTML>

Заголовок програми

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

Команда:

    <META content="charset=windows-1251">

задає браузеру інформацію про кодування, в якій написаний текст HTML-документа. В даному випадку задана стандартне кодування Windows.

Між парою тегів <TITLE> і </TITLE> розташовується ім’я HTML-документа. Це ім’я браузер використовує в заголовку вікна Windows, в якому показує документ. Клацніть мишкою на наступне посилання і знайдіть текст ” Вправа 1 ” в заголовку вікна браузера.

Подивитися документ “Вправа 1”

У вікні браузера Microsoft Internet Explorer ви повинні побачити:

Microsoft Internet Explorer

Тіло програми

Між тегами <BODY> і </BODY> розташовуються команди, слідуючи яким браузер виводить інформацію у вікно документа.

Наша проста програма використовує наступні команди:

  • <H1> – </H1>
  • <HR>
  • <P> – </P>

Заголовки

Заголовки являються важливою частиною документа. Вони поділяють інформацію на окремі логічні частини і тому істотно поліпшують її сприйняття.

Заголовки бувають різні за значенням, або як кажуть, по рівню. Підручник, наприклад, має назву – це заголовок першого рівня. Текст в підручнику розбитий на глави; назва глав – це заголовки другого рівня. Глави містять параграфи з заголовками третього рівня. Параграфи – пункти, позначені заголовками четвертого рівня.

В HTML-документі підтримуються заголовки шести рівнів за допомогою конструкції

<Hn>Текст заголовку</Hn>

Тут в якості n необхідно використовувати одну з цифр від 1 до 6, що позначає рівень заголовку.

Заголовки виділяються браузером при показі HTML-документа розміром шрифту і жирністю:

Це заголовок 1 рівня

Це заголовок 2 рівня

Це заголовок 3 рівня

Це заголовок 4 рівня

Це заголовок 5 рівня
Це заголовок 6 рівня

Використовувати заголовки необхідно дуже акуратно у відповідності з його логічним рівнем в структурі документа.

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

В ліс за грибами

1

1. Збори

2

2. Дорога до лісу

2

3. У лісі

2

3.1. Зустріч на галявині

3

3.2. Мурашник

3

3.3. Грибна галявина

3

4. Повернення додому

2

Горизонтальна лінія

Лінія – найпростіший графічний елемент, який вміє будувати браузер. Горизонтальна лінія задається тегом <HR>, і цей тег не має парного закриваючого. Браузер виконуючі цю команду, виведе на екран ось таку лінію:

Горизонтальні лінії зручно використовувати для додаткового виділення (чи поділу) елементів документа на екрані. Подивіться ще раз, як лінія виділяє заголовок в нашому прикладі “Вправа 1” .

Абзац

Людині на відміну від комп`ютера важко сприймати однорідну інформацію, тому в книгах букви не покривають суцільно всю сторінку, хоча це добре заощадило б папір. Сторінка для людини містить багато пустот, а текст ділиться на порції – абзаци. Абзаци відокремлюються один від одного “червоними” та (або) порожніми рядками. Червоний рядок – це перший рядок абзацу з текстом, зміщеним вправо. Звичайно, розділяти текст на абзаци намагаються не як-небудь, а так, щоб кожний фрагмент містив закінчену думку.

Ось зараз розпочато новий абзац, тому що закінчено вступ, і піде розмова про те, як програмуються абзаци на HTML. Як вони виглядають, ви вже бачите в цьому тексті: як правило браузер використовує не червоний, а порожній рядок для відділення одного абзацу від іншого або абзацу від інших елементів документа. А задається абзац тегами <P>і </P> , між якими поміщується текст. Фактично робота тегу <P> зводиться до виведення перед текстовим фрагментом порожнього рядка. А ось парний тег </P>просто ігнорується браузером, тому його можна і не писати.

Подивіться на “Вправу 1” і в тексті, який ви зараз читаєте, як виводяться абзаци на екран:

  • Абзац вирівнюється по лівому краю.
  • Між словами завжди поміщується рівно по одному пробілу незалежно від того, скільки пробілів ви розмістите в HTML-програмі.
  • Продовження абзацу на новий рядок відбувається тоді, коли наступне слово не поміщується в екранному рядку, а не тоді, коли ви перейшли на новий рядок в HTML-програмі.

Як працює браузер

Браузер виконуючи програму (HTML-текст) формує на екрані документ, який бачить користувач.

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

Коли малюють на Бейсику або Сі, є можливість вивести елемент в будь-яке місце екрана за своїм розсудом. HTML-програми такою властивістю не володіють. Браузер не вміє працювати з екранними координатами.

Програмуючи на HTML, не можна орієнтуватися на певні розміри вікна, в якому браузер будує документ. Браузер, виконуючи програму, використовує реальні розміри вікна, які надані йому конкретним користувачем конкретного комп`ютера. Значить, одна і та ж HTML-програма може відобразити на екрані дещо по-різному на різних комп`ютерах і навіть на одному комп`ютері при різних його налаштуваннях або розмірах вікна, які легко міняються користувачем.

Вікно нашої “Вправи 1” може, виглядати так:

Або так:

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

Відкрити документ “Вправа 1”

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

Текст заголовка при маленькому вікні змушений зайняти 2 рядки.

Абзац виводиться так, щоб поміститися у вікні. При цьому браузер не звертає уваги на те, як розміщується абзац по рядках в HTML-тексті.

Всі ці примхи браузера змушують новачка на питання “Як працює браузер” відповісти коротко: “Погано!”.
Проте зазначені мінуси – це лише плата за універсальність HTML-програм. І треба сказати, плата не така висока.

Описані обмеження обертаються позитивною стороною HTML, роблячи його незалежним від комп`ютерної платформи (DOS, Windows, Unix, MacOs…) і параметрів відеовиводу конкретного комп`ютера (CGA, EGA, VGA, SVGA,…), зокрема, від кількості екранних точок. Це означає, що ваш HTML-документ здатні побачити всі люди, на комп`ютерах яких встановлена програма-браузер. І стає неважливим який тип комп`ютера і якою операційною системою користується конкретний користувач. Саме ця властивість HTML-програм відіграє таку важливу роль у глобальній комп`ютерній мережі Інтернет, де представлені всі існуючі типи комп`ютерів і операційних систем.

Вправа 2. Покращена HTML-сторінка

В програмі вірш написаний, як і необхідно в 4 рядках:

<P>
Корова не похожа на лошадь.
А лошадь не похожа на корову.
Именно это сходство
мы и берем за основу.
</P>

Браузер виводить вірш як єдиний абзац. Хотілось би показати вірш по-людські. Давайте спробуємо зробити кожний рядок окремим абзацом:

<P>
Корова не похожа на лошадь.
<P>
А лошадь не похожа на корову.
<P>
Именно это сходство
<P>
мы и берем за основу.

Результат можна подивитися тут.

Вийшло! Однак, порожні рядки виглядають не дуже красиво.

Добре, не буду більше випробовувати ваше терпіння! HTML має засіб для завдання примусового переходу на новий рядок всередині абзацу.

Примусовий розрив рядку

Команда <BR>змушує браузер продовжити виведення абзацу з нового рядку. Тег <BR> використовується одиночно, без парного тега.

Подивіться, як тепер виглядає наш вірш.

Красиво! Це тому, що виведення вірша записано так:

<P>
Корова не похожа на лошадь.<BR>
А лошадь не похожа на корову.<BR>
Именно это сходство<BR>
мы и берем за основу.<BR>

Залишилось написати тільки заголовок вірша і ім`я автора. Ось тепер вірш виглядає, як в книзі:

Остаточний вигляд документа “Вправа 2”

А ось текст HTML-програми, яка показує цю сторінку:

Текст
HTML-програми		 Коментар 
<HTML>

  <head>
    <META content="charset=windows-1251">
    <TITLE>Вправа 2</TITLE>
  </HEAD>

  <BODY>
    <H1>Покращений HTML-документ</H1>
    <HR>
    <H2>Сходство</H2>
    <H3>Пит Хейн
        (перевод Н.А.Прохоровой)</H3>
    <P>
      Корова не похожа на лошадь.<BR>
      А лошадь не похожа на корову.<BR>
      Именно это сходство<BR>
      мы и берем за основу.<BR>
  </BODY>
</HTML>

початок HTML-документу

  початок заголовка
    інформація про документ
    назва документа
  кінець заголовка

  початок тіла
    заголовок 1 рівня
    горизонтальна лінія
    заголовок 2 рівня
    заголовок 3 рівня

    початок абзацу

    абзац з примусовими
    розривами рядків

  кінець тіла
кінець HTML-документа

Натисніть кнопку “Скидання”, потім оберіть вірні відповіді на запитання.

  1. Що таке HTML-програма?
  2. Хто виконує HTML-програму?
  3. Записуючі на HTML абзац, Петро Розумников між двома сусідніми словами поставив п`ять пробілів. Скільки пробілів побачить він в браузері?
  4. Записуючі на HTML своє ім`я, Іван Гавриков написав так:

    <P>
Іван
Гавриков
</P>

    Як покаже цей текст браузер?

  5. Яка з трьох програм задає виведення тексту в два рядки:

    Програма 1
<P>
Іван<BR>
Гавриков<BR>
</P>

    Програма 2
<P>
Іван<BR>
Гавриков
</P>

    Програма 3
<P>
Іван<BR>Гавриков

Щоб побачити результат роботи, натисніть кнопку "Перевірка".


  1. Проведіть експериментальну роботу з документом "Вправа 2".
    Міняючи розміри вікна, подивіться, як браузер показує текст з примусовим розривом рядків.
    Що відбувається, коли вікно зменшується настільки, що в ньому не може поміститися цілком навіть одне слово?
  2. Якщо на вашому комп`ютері встановлено декілька різних програм-браузерів, проведіть досліди завдання 1 у кожному з них. Можливо результати будуть дещо відрізнятися, також як і зовнішній вигляд вихідного документа. Як ви вважаєте, чому?
  3. Самостійно створіть власний HTML-документ. Нехай це буде невелика розповідь про себе і своїх захопленнях. Програму можна написати в зовнішньому текстовому редакторі. А можна написати її прямо тут в нижчеприведеному вікні. У ньому вже є заготовка.


Інструкція
Кнопка "Поновити заготовку" – стирає у вікні текст користувача.
Кнопка "Показати документ" – викликає на екран нове вікно браузера і показує в ньому результат роботи написаної вами HTML-програми.
Зауваження
Закінчивши перегляд документа в новому браузері, закрийте його для повернення на цю сторінку. Тепер знову можна працювати у вікні текстового редактора.

ЗмістЗмістНа урок 2Урок 2

➤