Корова не похожа на лошадь. А лошадь не похожа на корову. Именно это сходство мы и берем за основу.
початок HTML-документа початок заголовку інформація про документ назва документа кінець заголовка початок тіла заголовок горизонтальна лінія початок абзацу абзац кінець абзацу кінець тіла кінець HTML-документа Команди мови (теги) беруться в кутові дужки. Як правило, теги парні. Перший тег відкриває опис команди, визначає її початок, другий, що відрізняється від першого наявністю косою риски " / " перед ключовим словом (ім'ям тега) - закриває його. Тег повинен відкривати програму, а тег - закривати її. Між цими двома основними тегами розташовується заголовок програми та її тіло: HTML-програма заголовок програми тіло програми Заголовок програми У цьому блоці описуються загальні правила інтерпретації HTML-документа в цілому і міститься допоміжна інформація про документ. Команда: задає браузеру інформацію про кодування , в якій написаний текст HTML-документа. В даному випадку задана стандартне кодування Windows. Між парою тегів-
Заголовки Заголовки являються важливою частиною документа. Вони поділяють інформацію на окремі логічні частини і тому істотно поліпшують її сприйняття. Заголовки бувають різні за значенням, або як кажуть, по рівню. Підручник, наприклад, має назву - це заголовок першого рівня. Текст в підручнику розбитий на глави; назва глав - це заголовки другого рівня. Глави містять параграфи з заголовками третього рівня. Параграфи - пункти, позначені заголовками четвертого рівня. В HTML-документі підтримуються заголовки шести рівнів за допомогою конструкціїі
, між якими поміщується текст. Фактично робота тегузводиться до виведення перед текстовим фрагментом порожнього рядка. А ось парний тег
просто ігнорується браузером, тому його можна і не писати. Подивіться на "Вправу 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 рядках:Корова не похожа на лошадь. А лошадь не похожа на корову. Именно это сходство мы и берем за основу.
Браузер виводить вірш як єдиний абзац. Хотілось би показати вірш по-людські. Давайте спробуємо зробити кожний рядок окремим абзацом:Корова не похожа на лошадь.
А лошадь не похожа на корову.
Именно это сходство
мы и берем за основу. Результат можна подивитися тут . Вийшло! Однак, порожні рядки виглядають не дуже красиво. Добре, не буду більше випробовувати ваше терпіння! HTML має засіб для завдання примусового переходу на новий рядок всередині абзацу. Примусовий розрив рядку Команда
змушує браузер продовжити виведення абзацу з нового рядку. Тег
використовується одиночно, без парного тега. Подивіться, як тепер виглядає наш вірш . Красиво! Це тому, що виведення вірша записано так:
Корова не похожа на лошадь.
А лошадь не похожа на корову.
Именно это сходство
мы и берем за основу.
Залишилось написати тільки заголовок вірша і ім`я автора. Ось тепер вірш виглядає, як в книзі: Остаточний вигляд документа "Вправа 2" А ось текст HTML-програми, яка показує цю сторінку: Текст HTML-програми Коментар
Корова не похожа на лошадь.
А лошадь не похожа на корову.
Именно это сходство
мы и берем за основу.
початок HTML-документу початок заголовка інформація про документ назва документа кінець заголовка початок тіла заголовок 1 рівня горизонтальна лінія заголовок 2 рівня заголовок 3 рівня початок абзацу абзац з примусовими розривами рядків кінець тіла кінець HTML-документа Натисніть кнопку "Скидання", потім оберіть вірні відповіді на запитання. Що таке HTML-програма? Документ, який показує браузер Інтернетівська WEB-сторінка Текст на мові HTML Список тегів Хто виконує HTML-програму? Людина Браузер Компілятор Windows Записуючі на HTML абзац, Петро Розумников між двома сусідніми словами поставив п`ять пробілів. Скільки пробілів побачить він в браузері? П`ять Один Жодного Два Записуючі на HTML своє ім`я, Іван Гавриков написав так:
Іван Гавриков
Як покаже цей текст браузер? В два рядки В один рядок з двома пробілами В один рядок з одним пробілом Не покаже зовсім Яка з трьох програм задає виведення тексту в два рядки: Програма 1 Іван
Гавриков
Іван
Гавриков
Іван
Гавриков Перша Друга Третя Всі Щоб побачити результат роботи, натисніть кнопку "Перевірка". Проведіть експериментальну роботу з документом "Вправа 2" . Міняючи розміри вікна, подивіться, як браузер показує текст з примусовим розривом рядків. Що відбувається, коли вікно зменшується настільки, що в ньому не може поміститися цілком навіть одне слово? Якщо на вашому комп`ютері встановлено декілька різних програм-браузерів, проведіть досліди завдання 1 у кожному з них. Можливо результати будуть дещо відрізнятися, також як і зовнішній вигляд вихідного документа. Як ви вважаєте, чому? Самостійно створіть власний HTML-документ. Нехай це буде невелика розповідь про себе і своїх захопленнях. Програму можна написати в зовнішньому текстовому редакторі. А можна написати іі прямо тут в нижчеприведеному віконці. У ньому вже є заготовка.