Придумано безліч мов, але мову HTMLналежить до числа особливих і самих восстребованних. З ним пов'язано безліч інших ключових починань в програмуванні. Багато що стає доступним, коли в свідомості розробника присутня знання мови розмітки - HyperText Markup Language (HTML).
По суті, в HTML немає нічого складного, і черезкілька хвилин будь-, найдальший від програмування та інтернету людина, виконає створення HTML-сторінки в блокноті. Приклад, який заслуговує на увагу, простота, дійсно, доступна кожному.
Файл HTML - це одна сторінка сайту, хоча з цим можна посперечатися, але те, що один файл становить одну сторінку, для початку зрозуміло.
Файл HTML починається з заголовка DOCTYPE, вякому зазначено, що тип даного файлу - HTML. Всі елементи сторінки (теги) вказуються в кутових дужках. Кожна пара ( «<» і «>») включає в себе один тег HTML. Зазвичай теги HTML парні, тобто на кожен «tag» є «/ tag». Обидва полягають в кутові дужки. Є теги поодинокі, з них найпопулярніший «br /» - перехід на наступний рядок.
Найбільший тег у файлі - це сам HTML, вякий входять всього два тега: HEAD і BODY. У першому робляться різні описи, вказуються посилання на інші потрібні сторінці файли, можуть бути присутніми скрипти PHP і JavaScript. У другому записується контент сторінки. Також у вигляді тегів і скриптів.
Приклад створення такої сторінки вказано нижче в статті. Розглянемо його уважно.
Основне призначення тега HEAD - загальний опис сторінки і загальних скриптів, хоча останнє - досить відносне поняття. Зазвичай тут надають істотне значення тільки двох речей:
Для відображення контенту сторінки вміст даного розділу має лише непряме значення, оскільки вказує: десь в інших файлах є правила CSS для тегів і скрипти інших мов.
HTML-сторінка має заголовок (TITLE), якийвідображається, коли відвідувач підводить мишку до вкладки, де сторінка відкрита. Це важливий момент, оскільки робить сторінку істотно більш презентабельною, простіше сказати, підписаної читабельним текстом.
META-теги мають важливе значення в інтернет-програмуванні взагалі, але коли потрібно створення HTML-сторінки в блокноті, приклад небажано захаращувати зайвими конструкціями.
На посилання LINK і SCRIPT слід звернути особливуувага. Перша вказує на місце, де знаходиться файл стилів CSS, друга - на місцезнаходження файлу JavaScript-коду. Таких посилань може бути безліч.
Якщо до скриптів слід підходити, коли знанняпро HTML зміцняться, то на каскадні таблиці стилів слід звернути увагу негайно. У файлах CSS наводяться, зокрема, правила оформлення тегів HTML.
Власне, приклад сторінки HTML - це і єрозділ BODY. Саме тут міститься вся інформація, весь контент сторінки сайту. Вся інформація може надаватися у вигляді тегів і скриптів, наприклад вставки JavaScript-коду або шматочків PHP-програм.
Важливо розуміти, що приклад веб-сторінки HTML вбраузері і той же приклад в текстовому редакторі, зокрема notepad, це далеко не одне і теж. У першому випадку ми маємо готовий HTML-текст, в якому всі скрипти виконані. Наприклад, PHP відпрацював свою частину і сформував замість свого коду в потрібних місцях потрібні теги. JavaScript теж виконав свою місію, хоча про нього ще належить окрема розмова.
HTML - це теги, а не скрипти. В кінцевому рахунку в браузері відображається тільки контент сторінки, тільки її теги. Ніякого PHP-коду там немає.
JavaScript знаходиться на особливому положенні, його турбота - обслуговувати сторінку не тільки в момент завантаження (перевантаження), але і в моменти, коли сторінка знаходиться в браузері відвідувача, а той вивчає її.
Простий приклад коду HTML-сторінки (тільки розділ BODY) вказано нижче.
А в браузері відвідувача він виглядає так, як показано далі.
У коді не було вказано, як повинні виглядатиелементи, які вивів браузер. Все видиме оформлення знаходиться в правилах CSS. В даному випадку в файлі Mcss / scPhpWordRW.css, на який було посилання (див. Найперший приклад сторінки HTML).
На відміну від HTML, тема CSS простіша, тамвельми доступні правила і їх кількість невелика, коли приклад створення HTML-сторінки не вимагає нічого, крім notepad. Все дуже доступно для моментального освоєння:
Тут показано, як просто описаний тегscLogo_vDoc, причому це опис таке, що в нормальному стані тег відображає картинку vDoc-logo.png, а коли над ним знаходиться мишка - відображається vDoc-logo-h.png.
Язик не передбачає како-якої структури іпоняття синтаксису тут досить відносне. Тут немає змінних, але є маса можливостей. Принципова основа гіпертексту в тому, що існує елемент (тег) який обов'язково має ім'я.
Ім'я, в разі парного тега, складається з власне імені (tagName) і кутових дужок ( «<» + tagName + «>»), якщо мова йде про початок тега, і «</» + tagName + «>», якщо записується його кінець.
Приклад сторінки HTML з описом атрибутів розташований нижче в тексті.
Тег може мати атрибути, тоді вони будуть розміщенічерез пробіл після імені тега до закриває кутової дужки «>». Атрибути, якщо вони є у тега, записуються тільки в його початку. Змістом тега вважається те, що знаходиться між початком тега і його кінцем.
HTML дозволяє описувати блокові і рядковіелементи. Перші займають певну область у вікні браузера, можуть позиціонуватися абсолютно, тобто в потрібному місці області відображення HTML-сторінки, і мати конкретний розмір.
Рядкові елементи в загальному випадку відображаютьсяодним потоком, тобто так, як було вказано в файлі сторінки, так і виводяться на екран. На відображення загального потоку можна впливати, коли відбувається завантаження сторінки. На розміщення, видимість та інші властивості блокових елементів можна впливати в будь-який час за допомогою JavaScript-коду.
Крім простих елементів, HTML пропонує описувати таблиці і форми. Ці елементи дуже затребувані в «повсякденному сайтобудування».
За допомогою тега TABLE можна створити таблицю,вказати кілька рядів TR і в кожному ряду якусь кількість осередків TD. На відміну від звичної табличній організації, внаслідок особливостей HTML-розмітки, таблична організація обмежується із зазначеною декларацією, тому якщо розробник бажає мати прямокутну таблицю, в якій кількість колонок по всіх рядах однаково, то він повинен за цим стежити самостійно.
Принципова позиція HTML: робити все, що зазначено, але нічого з того, що ні зрозуміле. У деяких випадках не настільки важлива кількість колонок в кожному рядку таблиці, але, якщо потрібно виконати об'єднання осередків по вертикалі або по горизонталі, доведеться порахувати всі дуже уважно.
Приклад сторінки HTML з описом простий таблиці наочно показаний в статті.
Тут показана таблиця розміром три ряди на триколонки, причому в першому ряду замість тега TD був використаний тег TH - заголовок колонки. Особливої відзнаки ці два тега не мають, але використовувати перший цілком можна, щоб відрізнити перший ряд таблиці, та й в CSS до TH можна прикріпити власний стиль, що вигідно відрізняє його від інших TD.
Форми - це найбільш затребувана частина HTML-тегів. За допомогою форм можна передавати інформацію. Власне, сама сторінка - це висновок інформації, а ось форма - її введення.
Приклад сторінки HTML з описом простої форми:
Варіантів використання форм набагато більше, алеосновні можливості такі. Можна вказати поля введення, призначити їм потрібно оформлення і обробники для аналізу вводяться користувачем даних. Можна вказати приховані поля і передавати зі сторінки фонову інформацію. Можна позначити кнопки передачі інформації, натискання на які ініціює процес передачі відомостей.
Знати мову гіпертексту - неодмінна умовароботи з будь-якої спеціалізації в області інтернет-програмування, але якщо необхідно писати програми на PHP або JavaScript, то знати HTML + CSS потрібно досконало.
Мова PHP був позначений в попередньому прикладі. PHP працює на сервері, тому сторінка з цією формою полетіла з сервера в браузер із заповненими полями. Зокрема, функція TestOnBlur, згадана в тезі INPUT (обробник події onblur), отримала всі параметри у вигляді текстових полів.
У браузері працює JavaScript, і, щобправильно спрацювала кнопка відправки даних назад на сервер, тобто конструкція: onclick = jQuery ( "# to"). val ( "cart"), необхідно мати уявлення не тільки про те, що таке jQuery, але і що таке #to, val , cart. Якщо точніше, необхідно знати основні теги HTML і загальні правила застосування до них стилів CSS.
Цього цілком достатньо, щоб швидко підняти свою кваліфікацію по будь-якої спеціалізації в області інтернет-програмування.
