Приклад сторінки HTML та основні принципи створення

Приклад сторінки HTML та основні принципи створення

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

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


Загальний опис

Файл HTML - це одна сторінка сайту, хоча з цим можна посперечатися, але те, що один файл складає одну сторінку, для початку зрозуміло.

Файл HTML починається з заголовка DOCTYPE, в якому вказано, що тип цього файла - HTML. Всі елементи сторінки (теги) вказуються у кутових дужках. Кожна пара ("<" і ">") включає один тег HTML. Зазвичай теги HTML парні, тобто на кожен "tag" є "/tag ". Обидва полягають у кутові дужки. Є теги поодинокі, з них найпопулярніший "br/" - перехід на наступний рядок.

Найбільший тег у файлі - це сам HTML, до якого входять лише два теґи: HEAD и BODY. У першому робляться різні описи, вказуються посилання на інші потрібні сторінці файли, можуть бути присутні скрипти PHP і JavaScript. У другому записується контент сторінки. Також у вигляді тегів та скриптів.

Проста сторінка HTML

Приклад створення такої сторінки вказано нижче у статті. Розгляньмо його уважно.

Розділ HEAD

Основне призначення теґу HEAD - загальний опис сторінки та загальних скриптів, хоча останнє - досить відносне поняття. Зазвичай тут надають істотного значення тільки двом речам:

  • ключові слова та опис сторінки;
  • посилання на інші файли (* .css і * .js).

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


HTML-сторінка має заголовок (TITLE), який з 'являється, коли відвідувач підводить мишку до вкладки, де сторінка відкрита. Це важливий момент, оскільки робить сторінку істотно більш презентабельною, простіше сказати, підписаною читабельним текстом.

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

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

Якщо до скриптів слід підходити, коли знання про HTML зміцняться, то на каскадні таблиці стилів слід звернути увагу негайно. У файлах CSS наводяться, зокрема, правила вигляду тегів HTML.

Розділ BODY

Власне, приклад сторінки HTML - це і є розділ BODY. Саме тут міститься вся інформація, весь контент сторінки сайту. Вся інформація представляється у вигляді тегів і скриптів, наприклад вставки JavaScript-коду або шматочків PHP-програм.

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

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


JavaScript знаходиться на особливому положенні, його турбота - обслуговувати сторінку не тільки в момент завантаження (перевантаження), але і в моменти, коли сторінка знаходиться в браузері відвідувача, а той вивчає її.

На відміну від HTML, тема CSS простіша, там дуже доступні правила і їх кількість невелика, коли приклад створення HTML-сторінки не вимагає нічого, крім notepad. Все дуже доступно для моментального освоєння:

Тут показано, як просто описаний тег scLogo_vDoc, причому цей опис такий, що в нормальному стані тег відображає картинку vDoc-logo.png, а коли над ним знаходиться мишка - відображається vDoc-logo-h.png.

Структура описів HTML

Мова не передбачає будь-якої структури і поняття синтаксису тут досить відносне. Тут немає змінних, але є маса можливостей. Принципова основа гіпертексту в тому, що існує елемент (тег) який обов 'язково має ім' я.

Назва, у разі парного тега, складається з власне імені (tagName) і кутових дужок ("<" + tagName + ">"), якщо мова йде про початок тега, і "</" + tagName +" > ", якщо записується його кінець.


Приклад сторінки HTML з описом атрибутів знаходиться нижче в тексті.

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

Загальний зміст описів HTML

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

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

Крім простих елементів, HTML пропонує описувати таблиці та форми. Ці елементи дуже затребувані в "повсякденному сайтобудуванні".


Опис таблиці: теги TABLE, TR, TD

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

Принципова позиція HTML: робити все, що зазначено, але нічого з того, що не зрозуміло. У деяких випадках не так важливо кількість колонок у кожному рядку таблиці, але, якщо потрібно виконати об 'єднання комірок по вертикалі або по горизонталі, доведеться порахувати все дуже уважно.

Приклад сторінки HTML з описом простої таблиці буде показано у статті.

Тут показано таблицю розміром три рядки на три стовпчики, причому у першому рядку замість теґу TD було використано заголовок стовпчика. Особливої відмінності ці два теги не мають, але використовувати перший цілком можна, щоб відрізнити перший ряд таблиці, та й в CSS до ^ можна прикріпити власний стиль, що вигідно відрізняє його від інших TD.

Опис форми: теги FORM, INPUT

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


Приклад сторінки HTML з описом простої форми:

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

Використання HTML

Знати мову гіпертексту - неодмінна умова роботи з будь-якої спеціалізації в галузі інтернет-програмування, але якщо необхідно писати програми на PHP або JavaScript, то знати HTML + CSS потрібно досконало.

Мова PHP була позначена у попередньому прикладі. PHP працює на сервері, тому сторінка з цією формою відлетіла з сервера в браузер із заповненими полями. Зокрема, функція TestOnBlur, згадана в теґі INPUT (обробник події onblur), отримала всі параметри у вигляді текстових полів.

У браузері працює JavaScript, і, щоб правильно спрацювала кнопка відправки даних назад на сервер, тобто конструкція: onclick = jQuery ('# to') .val ('cart'), необхідно мати уявлення не тільки про те, що таке jQuery, але і що таке # to, val, cart. Якщо точно, необхідно знати основні теги HTML та загальні правила застосування до них стилів CSS.

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