Елементи web-сторінок

Частина 1. Мова HTML

1. Що містить Web-сторінка?

Як влаштований HTML-файл

Ось найпростіший HTML-документ:

приклад 1

Це найпростіший приклад HTML-документа.

Цей * .htm-файл може бути відкритий і в Notepad, і в Netscape. Зберігши зміни в Notepad, просто натисніть кнопку Reload (перезавантажити) в Netscape, щоб побачити ці зміни реалізованими в HTML-документі.

Додаткові відступи введені для зручності читання, однак в HTML це зовсім не обов'язково. Браузери ігнорують символи кінця рядка і множинні прогалини в HTML-файлах. Як видно з прикладу, вся інформація про форматування документа знаходиться в його фрагментах, укладених між знаками "<" и ">". Такий фрагмент (наприклад, ) Називається міткою або тегом (по-англійськи tag). Більшість тегів парні (як відкривають та закривають дужки), тобто на кожну відкриває мітку виду є закриває мітка вигляду з тим же ім'ям, але з додаванням "/". Таку пару тегів іноді називають контейнером, в якому знаходиться певний вміст.

Великі і маленькі букви не розрізняються, наприклад
,
і
рівноправні і однаково викликають примусове переведення рядка в тексті. Часто дію тегів інтуїтивно зрозуміло для знаючих англійську:

- Bold (жирний), - Italic (курсив),

- Paragraph (параграф).

Багато теги, крім імені, можуть містити атрибути - елементи, що дають додаткову інформацію про те, як браузер повинен обробити поточну мітку. У нашому простому документі, однак, немає жодного атрибута.

В даний час починається поступовий перехід до більш суворого мови розмітки гіпертексту - XHTML, який вже підтримується розробниками деяких браузерів. Ця мова істотно розширює можливості мови HTML 4, але більш вимогливий до синтаксису. Для подальшої сумісності з XHTML бажано 1) імена тегів і атрибутів записувати в нижньому регістрі і 2) значення атрибутів повинні завжди полягати в лапки.

обов'язкові теги

тег повинен відкривати HTML-документ, а тег повинен завершувати його.

пара тегів . вказує на початок і кінець заголовка документа. Крім найменування документа (див. Мітки нижче), в цей розділ може включатися службова інформація.</p> <p>Все, що знаходиться між тегами <title> і , тлумачиться браузером як назва документа, показується в заголовку вікна і друкується в лівому верхньому кутку кожної сторінки при виведенні на принтер. Рекомендується назва не довше 64 символів.

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

Теги виду , де i - цифра від 1 до 6 (-

.
) Описують заголовки шести різних рівнів. Тема першого рівня - самий великий, шостого рівня - найдрібніший.

Все, що укладено між

і

, сприймається як один абзац. Мітки і

можуть містити атрибут align (від англійського «вирівнювати»), наприклад:

Вирівнювання заголовка по центру

або

зразок абзацу з вирівнюванням по правому краю

Ось ще один приклад HTML-документа:

вітання!

Це трохи більше складний приклад HTML-документа

Тепер ми знаємо, що абзац можна вирівнювати не тільки вліво,

але і по центру

або по правому краю.

- вставити картинку.

Останні два тега крім свого імені містять атрибути. Наприклад, щоб вставити в документ картинку у тега , необхідний атрибут src = "імя_файла.gif". Часто атрибути необов'язкові і служать для уточнення зовнішнього вигляду елемента.

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

2. Оформлення тексту усередині абзацу

непарні теги

Існують теги, які не підкоряються двом основним правилам HTML: вони непарні, а деякі (послідовний) вводяться тільки маленькими буквами.

Одного разу в студену зимову пору

Сиджу за гратами в темниці сирій.

Дивлюся - піднімається повільно в гору

Вигодуваний в неволі орел молодий.

І простуючи важливо, в спокої чинному,

Мій сумний товариш, махаючи крилом,

У великих чоботях, в кожушку овчинному,

Криваву їжу клює під вікном.

- горизонтальна лінія. Може включати атрибут size, що визначає товщину лінії і / або width - ширину лінії (в пікселях або відсотках). наприклад:





послідовний. символи "<" и ">"Сприймаються браузерами як початок і кінець HTML-міток. Щоб показати ці символи на екрані вводять послідовний (іскейп-послідовності). Браузер показує на екрані символ "<", когда встречает в тексте последовательность < (less than – меньше, чем). Знак ">"Кодується послідовністю gt; (Greater than - більше, ніж). Символ "" (амперсант) кодується послідовністю - Подвійні лапки ( ") -" Все букви повинні бути в нижньому регістрі (тобто маленькі), крапка з комою - обов'язковий елемент послідовний.

форматування шрифту

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

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

Тег font - задає розмір і колір шрифту тексту (застосовувати не рекомендується). атрибути:

Size - встановлює розмір шрифту. За замовчуванням використовується розмір 3. Значення: а) фіксований розмір від 1 до 7, б) відносна зміна "+1" і "3" на один розмір більше і на три розміри менше. Можна задавати розміри в пунктах - pt, пікселях - px.

Face - визначає список розділених комами назв шрифтів. Color - колір тексту. приклади: ЗЕЛЕНИЙ

Шрифти типу Arial, Helvetica, sans-serif називають пропорційними рубаними; Georgia, Times New Roman, serif - пропорційні із зарубками (серіфние); Courier, mono - моноширинних шрифти (літери однакової ширини) із зарубками.

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

3. Розмітка документа

Як ми вже бачили структурувати документ можна за допомогою заголовків і абзаців. Крім того, абзаци можна організовувати в списки.

Ненумеровані списки:
    .

Текст, розташований між тегами

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

    Наприклад, щоб створити ось такий список:

    необхідний ось такий HTML-текст:

  • Іван;
  • Данила;
  • біла кобила

    Зверніть увагу: у тега

  • немає парного закриває тега.

    Нумеровані списки:
      .

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

  • Іван;
  • Данила;
  • біла кобила

    вийде ось такий список:

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

    Форматований текст: 
    .

    Браузери зазвичай ігнорують численні прогалини і символи кінця рядка. Однак, текст, укладений між тегами 

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

    Побудова гіпертекстових зв'язків

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

    1. на віддалений HTML файл або на будь-який файл, який не є HTML-документом,
    2. на деяку точку (тег) в поточному HTML-документі.

    Приклад посилання на інший HTML-документ, що дозволяє перейти до іншого файлу.

    Після імені файлу 5.htm, між символами> і <. указывается текст (5 класс), на котором производится щелчок для перехода на этот файл.

    На засланні перед ім'ям тега (pn) ставиться символ #. Між символами> і <располагается текст (Понедельник), на котором производится щелчок для перехода по ссылке.

    тег: Понеділок

    4. Розміщення інформації. таблиці

    Як влаштована таблиця?

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

    У пристрої таблиці найлегше розібратися на прикладі.

    приклад 10

    У таблиці може бути заголовок
    перша колонка друга колонка

    Таблиця починається з тега

    і закінчується тегом
    . Таблиця може мати заголовок (. ), Хоча він не є обов'язковим. Кожен рядок таблиці починається з тега і закінчується тегом . Вміст осередків укладають між тегами .

    атрибути тега
    • align - встановлює розташування таблиці по відношенню до полів документа. Можна вибрати зі значень align = "left" - вирівнювання вліво, center - по центру, right - вправо.
    • width - ширина таблиці. Її можна задати в пікселях (наприклад, width = 400) або у відсотках від ширини сторінки (наприклад, width = 80%).
    • border - встановлює ширину зовнішньої рамки таблиці і осередків в пікселях (наприклад, border = 1). Якщо атрибут не встановлений, таблиця показується без рамки.
    • cellspacing - відстань між суміжними елементами таблиці в пікселях і cellpadding - відстань між рамкою комірки і текстом в пікселях (наприклад, cellpadding = 10).

    атрибути тега

    • align - горизонтальне вирівнювання тексту в осередках рядка.
    • valign - вертикальне вирівнювання тексту в осередках рядка. Можна вибрати зі значень valign = top - вирівнювання по верхньому краю, middle - по центру, bottom - по нижньому краю.

    атрибути тега

    • align і valign - горизонтальне і вертикальне вирівнювання тексту в комірці.
    • width і height - ширина і висота осередку в пікселях (наприклад, height = 40).
    • nowrap - вміст комірки має бути показано в один рядок.
    • colspan - встановлює «розмах» осередки по горизонталі. rowspan - розмах осередки по вертикалі. Наприклад, colspan = 3 означає, що осередок простягається на три колонки, а rowspan = 2 - осередок займає два рядки.

    Якщо комірка таблиці порожня, навколо неї не малюється рамка. Якщо рамка потрібна, в клітинку можна ввести символ нерозривного пробілу -   (Non-breaking space). Осередок буде порожній, але з рамкою навколо неї. Осередок таблиці може містити в собі іншу таблицю.

    Частина 2. Каскадні таблиці стилів (CSS)

    1. Базові поняття CSS

    Як ми вже знаємо, HTML - це набір об'єктів-контейнерів, таких як

    .

    , , .
    та інших. Для кожного такого об'єкта визначені правила його відображення на web-сторінці, інакше кажучи - стиль. Стандартним тегам HTML відповідає набір вбудованих стилів, використовуваних за замовчуванням. Кожен стиль задає безліч властивостей об'єкта.

    Технологія CSS (Cascading StyleSheets - каскадні таблиці стилів) дозволяє перевизначити деякі з цих властивостей.

    Наприклад, для визначення кольору елементів 'h1' як синій, достатньо записати:

    Наведене «правило CSS» складається з двох частин:

    селектора ( 'h1') і визначення ( 'color: blue').

    Визначення теж складається з двох частин: властивості ( 'color') і значення ( 'blue').

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

    Підключення стилів до HTML-файлу

    Таблиця стилів повинна бути підключена до тексту HTML. наприклад:

    Схожі статті