Смачний index php registration form. PHP сценарії обробки HTML форм

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

Що таке HTML та CSS?

HTML (HyperText Markup Language, мова розмітки гіпертексту) задає структуру вмісту та його зміст, визначаючи такий контент як, наприклад, заголовки, абзаци чи зображення. CSS (Cascading Style Sheets) або каскадні таблиці стилів - це мова презентацій, створена для оформлення зовнішнього вигляду контенту, яка використовує, наприклад, шрифти або кольори.

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

При такому розумінні різниці між HTML і CSS давайте поринемо в HTML докладніше.

Основні терміни HTML

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

Елементи

Елементи вказують, як визначити структуру та вміст об'єктів на сторінці. Деякі з часто використовуваних елементів включають кілька рівнів заголовків (визначені як елементи з

до

) та абзаців (визначені як
); до списку можна включити елементи ,
, , і і багато інших.
Елементи ідентифікуються за допомогою кутових дужок<>, що оточують ім'я елемент. Таким чином, елемент виглядатиме так:
Теги
Додавання кутових дужок< и >довкола елемента створює те, що відомо як тег. Теги найчастіше зустрічаються в парах тегів, що відкривають і закривають.
Відкриваючий тег вказує на початок елемента. Він складається із символу<, затем идёт имя элемента и завершается символом >; наприклад,
.
Закриває тег відзначає кінець елемента. Він складається із символу< с последующей косой чертой и именем элемента и завершается символом >; наприклад,
.
Вміст, що знаходиться між тегами, що відкриває і закриває, є вмістом цього елемента. Посилання, наприклад, матиме тег, що відкриває та закриваючий тег. Що знаходиться між цими двома тегами буде вміст посилання.
Так, теги посилань виглядатимуть приблизно так:
...
Атрибути
Атрибути є властивостями, які застосовуються для надання додаткової інформації про елемент. Найбільш поширені атрибути включають атрибут id , який ідентифікує елемент; атрибут class, який класифікує елемент; атрибут src, який визначає джерело вбудованого вмісту; атрибут href , який вказує посилання на пов'язаний ресурс.
Атрибути визначаються у тезі, що відкриває, після імені елемента. Загалом, атрибути включають в себе ім'я та значення. Формат для цих атрибутів складається з імені атрибута зі знаком рівності за ним, а потім у лапках йде значення атрибута. Наприклад, елемент з атрибутом href буде виглядати так:
Shay Howe
Демонстрація основних термінів HTML
Цей код відображатиме текст "Shay Howe" на веб-сторінці і при натисканні на цей текст веде користувача на http://shayhowe.com. Елемент посилання оголошено за допомогою тега, що відкриває і закриває тегаохоплюючих текст, а також атрибуту та значення адреси посилання оголошеної через href="http://shayhowe.com" у тезі, що відкриває.
Рис. 1.01. Синтаксис HTML у вигляді схеми включає елемент, атрибут та тег
Тепер, коли ви знаєте, що таке елементи HTML, теги та атрибути, давайте поглянемо воєдино на нашу першу веб-сторінку. Якщо щось виглядає тут новим, не турбуйтеся – ми розшифруємо все по ходу.
Налаштування структури документа HTML
HTML-документи є прості текстові документи, збережені з розширенням.html, а не.txt. Щоб почати писати HTML, спочатку потрібен текстовий редактор, який вам зручний у використанні. На жаль, сюди не входить Microsoft Word чи Pages, оскільки це складні редактори. Двома найбільш популярними текстовими редакторами для написання HTML та CSS є Dreamweaver та Sublime Text. Безкоштовні альтернативи також Notepad++ для Windows та TextWrangler для Mac.
Усі HTML-документи містять обов'язкову структуру, яка включає такі декларації та елементи: , , і .
Оголошення типу документа абознаходиться на початку HTML-документа і повідомляє браузерам, яка версія HTML застосовується. Оскільки ми будемо використовувати останню версію HTML, наш тип документа буде просто. Після цього йде елемент що означає початок документа.
Усередині елемент визначає верхню частину документа, включаючи різні метадані (супровідна інформація про сторінку). Вміст усередині елемента не відображається на веб-сторінці. Натомість він може включати назву документа (який відображається у рядку заголовка вікна браузера), посилання на будь-які зовнішні файли або будь-які інші корисні метадані.
Весь видимий вміст веб-сторінки перебуватиме в елементі . Структура типового HTML-документа виглядає так:
Привіт світ!
Привіт світ!

Це веб-сторінка.

Демонстрація структури HTML-документа
Цей код показує документ, починаючи з оголошення типу документа,потім відразу йде елемент . Усередині йдуть елементи і . Елемент містить кодування сторінки через тег та назва документа через елемент . Елемент <body>включає в себе заголовок через елемент <h1>та абзац тексту через<р>. Оскільки і заголовок, і абзац вкладені в елемент <body>, вони видно на веб-сторінці.</p><p>Коли елемент знаходиться всередині іншого елемента, відомий також як вкладений, гарною ідеєю додати до нього відступ, щоб зберегти структуру документа добре організованою і читабельною. У попередньому коді обидва елементи <head>і <body>вкладені та зсунуті всередині елемента <html>. Структура відступів для елементів продовжується з новими доданими елементами всередині <head>і <body> .</p><h3>Самозакриваються елементи</h3><p>У попередньому прикладі елемент <meta>був єдиним тегом, який не включав тег, що закриває. Не хвилюйтеся, це було зроблено навмисно. Не всі елементи складаються з тегів, що відкривають і закривають. Деякі елементи просто одержують вміст або поведінку через атрибути в межах одного тега. <meta>є одним із таких елементів. Вміст елемента <meta>у прикладі надається за допомогою атрибута charset і значення. До інших типових самозакривається елементів відносяться:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Наведена структура, зроблена за допомогою оголошення типу документа<!DOCTYPE html>та елементів <html> , <head>і <body>, є досить поширеною. Ми хочемо зберегти цю структуру документа зручною, оскільки часто її застосовуватимемо при створенні нових HTML-документів.</p><h3>Валідація коду</h3><p>Незалежно від того, як акуратно ми пишемо наш код, помилки неминучі. На щастя, при написанні HTML та CSS ми маємо валідаторів для перевірки нашої роботи. W3C пропонує валідатори HTML та CSS, які сканують код на помилки. Перевірка нашого коду не тільки допомагає правильно відображати його у всіх браузерах, але й допомагає навчанню передового досвіду під час написання коду.</p><h2>На практиці</h2><p>Як веб-дизайнери і фронтенд-розробники ми можемо дозволити собі розкіш відвідувати ряд чудових конференцій, присвячених нашому ремеслу. Ми збираємося організувати власну конференцію Styles Conference та створити для неї сайт протягом наступних уроків. Ось так!</p><br><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Давайте перейдемо трохи, відійшовши від HTML і поглянемо на CSS. Пам'ятайте, HTML визначає вміст і структуру наших веб-сторінок, тоді як CSS визначає їхній візуальний стиль та зовнішній вигляд.</p><h2>Основні терміни CSS</h2><p>На додаток до термінів HTML є кілька основних термінів CSS, з якими вам потрібно буде ознайомитися. Ці терміни включають селектори, властивості та значення. Як і з термінологією HTML, чим більше ви працюєте з CSS, тим більше ці терміни стають вашою другою натурою.</p><h3>Селектори</h3><p>Під час додавання елементів на веб-сторінку вони можуть бути оформлені за допомогою CSS. Селектор визначає, на який саме елемент або елементи HTML націлюватися і застосувати до них стилі (такі як колір, розмір і положення). Селектори можуть включати комбінацію різних показників для вибору унікальних елементів, залежно від того, наскільки конкретними ми бажаємо бути. Наприклад, ми хочемо вибрати кожен абзац на сторінці або вибрати лише один конкретний абзац.</p><p>Селектори, як правило, пов'язані зі значенням атрибуту, на зразок значення id або class або ім'ям елемента, на зразок <h1>або<р> .</p><p>У CSS селектори поєднуються з фігурними дужками (), які охоплюють стилі, які застосовуються до вибраного елемента. Цей селектор націлений на всі елементи <span><p>P ( ... )</p><h3>Властивості</h3><p>Як тільки елемент вибраний, властивість визначає стилі, які будуть застосовані до нього. Імена властивостей йдуть після селектора, усередині фігурних дужок () і безпосередньо перед двокрапкою. Існує безліч властивостей, які ми можемо використовувати, такі як background, color, font-size, height і width та інші властивості, що часто додаються. У наступному коді ми визначаємо властивості color і font-size, які застосовуються до всіх елементів <span><p>P (color: ...; font-size: ...; )</p><h3>Значення</h3><p>Поки що ми лише вибрали елемент через селектор і визначили, який стиль через властивості ми хотіли б до нього застосувати. Тепер ми можемо поставити поведінку цієї властивості через значення. Значення можуть бути визначені як текст між двокрапкою та крапкою з комою. Нижче ми вибираємо всі елементи <p >І встановлюємо значення якості color як orange , а значення якості font-size як 16 пікселів.</p><p>P ( color: orange; font-size: 16px; )</p><p>Для перевірки, у CSS наш набір правил починається з селектора, потім одразу йдуть фігурні дужки. У цих фігурних дужках розміщуються оголошення, які з пар властивостей і значень. Кожне оголошення починається з якості, за яким слідує двокрапка, значення якості і, нарешті, точка з комою.</p><p>Поширеною практикою є зсув пари властивостей та значень усередині фігурних дужок. Як і з HTML, відступи допомагають тримати наш код організованим та зрозумілим.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Рис. 1.03. Структура синтаксису CSS включає селектор, властивості та значення</p><p>Знання кількох основних термінів та загального синтаксису CSS - це відмінний старт, але ми маємо ще кілька пунктів для вивчення, перш ніж ми стрибнемо в глибину. Ми повинні уважніше розглянути, як селектори працюють у CSS.</p><h2>Робота із селекторами</h2><p>Селектори, як згадувалося раніше, вказують, які елементи HTML будуть стилізовані. Важливо повністю розуміти, як використовувати селектори і як вони діють. Першим кроком має стати знайомство із різними типами селекторів. Ми почнемо з основних селекторів: селектори типу, класи та ідентифікатори.</p><h3>Селектори типу</h3><p>Селектори типу націлені на елементи їхнього типу. Наприклад, якщо ми хочемо орієнтуватися на всі елементи <div>ми повинні використовувати селектор div. Наступний код показує тип селектора для елементів <div>, а також відповідний HTML.</p><p>Div ( ... )</p><p> <div>...</div> <div>...</div> </p><h3>Класи</h3><p>Класи дозволяють вибрати елемент на основі значення атрибута class. Селектори класів трохи більш конкретні, ніж селектори типу, оскільки вони вибирають певну групу елементів, а чи не всі елементи одного типу.</p><p>Класи дозволяють застосовувати однакові стилі одразу до різних елементів, використовуючи те саме значення атрибуту class для кількох елементів.</p><p>У CSS класи позначаються з точкою попереду, за якою слідує значення атрибута класу. Нижче селектор класу вибирає всі елементи, що містять значення awesome атрибута class , включаючи елементи <div>і <span><p>Awesome ( ... )</p><p> <div class="awesome">...</div> </p><h3>Ідентифікатори</h3><p>Ідентифікатори ще точніше, ніж класи, оскільки вони орієнтовані лише на один унікальний елемент за раз. Подібно до того, як селектори класів використовують значення атрибута class , ідентифікатори використовують значення атрибута id як селектор.</p><p>Незалежно від типу відображуваного елемента, значення атрибута id може бути використане лише один раз на сторінці. Якщо id присутні, вони повинні бути зарезервовані для важливих елементів.</p><p>У CSS ідентифікатори позначаються із символом ґрат попереду, після чого йде значення атрибута id . Тут ідентифікатор вибере лише елемент, що містить атрибут id зі значенням shayhowe.</p><p>#shayhowe (...)</p><p> <div id="shayhowe">...</div> </p><h3>Додаткові селектори</h3><p>Селектори надзвичайно потужна штука та описані вище відносяться до найбільш поширених селекторів, які нам трапляються. Ці селектори лише початок. Існує багато передових селекторів і вони легко доступні. Коли освоїться з ними, не бійтеся подивитися і деякі прогресивніші.</p><p>Гаразд, починаємо збирати все разом. Ми додаємо елементи на сторінку всередині нашого HTML, потім можемо вибрати ці елементи та застосувати до них стилі за допомогою CSS. Тепер давайте з'єднаємо точки між HTML та CSS, щоб ці дві мови працювали разом.</p><h2>Підключення CSS</h2><p>Щоб змусити наш CSS говорити з нашим HTML, ми повинні вказати на CSS-файл з HTML. Хорошою практикою є включення всіх наших стилів в одному зовнішньому файлі, на який є вказівник усередині елемента <head>нашого HTML-документу. Використання одного зовнішнього CSS дозволяє нам застосовувати ті самі стилі по всьому сайту і швидко вносити до нього зміни.</p><h3>Інші варіанти додавання CSS</h3><p>Інші варіанти підключення CSS включають використання внутрішніх і вбудованих стилів. Ви можете зустріти ці варіанти в реальності, але вони, як правило, не схвалюються, оскільки роблять оновлення сайтів громіздким та неповоротким.</p><p>Для створення зовнішньої таблиці стилів ми знову хочемо використовувати вибраний текстовий редактор, щоб створити новий текстовий файл з розширенням.css. Наш CSS-файл повинен бути збережений у тій же папці або підпапці, де знаходиться і HTML-файл.</p><p>Всередині елемента <head>застосовується елемент <link>, який визначає відносини між HTML та CSS-файлами. Оскільки ми пов'язуємо з CSS, то використовуємо атрибут rel зі значенням stylesheet для вказівки їхніх відносин. Крім того, атрибут href застосовується для вказівки розташування або шляху до файлу CSS.</p><p>У наступному прикладі HTML-документа елемент <head>вказує на зовнішній стильовий файл.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Щоб CSS відображався правильно, значення шляху атрибуту href має прямо співпадати з тим, де збережений файл CSS. У попередньому прикладі файл main.css зберігається в тому ж місці, що й HTML-файл, відомий також як коренева папка.</p><p>Якщо CSS-файл розташовується в підпапці, то значення атрибуту href має відповідно співвідноситися з цим шляхом. Наприклад, якщо наш файл main.css був збережений у підпапці з ім'ям stylesheets, то значенням атрибуту href буде stylesheets/main.css . Тут використовується коса риса (або слеш), щоб вказати переміщення у підпапку.</p><p>Зараз наші сторінки починають оживати, повільно, але правильно. Ми поки що не вникали в CSS занадто глибоко, але ви, можливо, помітили, що деякі елементи мають стилі, які ми не оголошували в нашому CSS. Це браузер нав'язує свої власні стилі для цих елементів. На щастя, ми можемо переписати ці стилі досить легко, що ми зробимо далі за допомогою скидання CSS.</p><h2>Використання скидання CSS</h2><p>Кожен браузер має власні стилі за промовчанням для різних елементів. Те, як Google Chrome відображає заголовки, абзаци, списки тощо, може відрізнятися від того, як це робить Internet Explorer. Для забезпечення сумісності з різними браузерами стало широко використовуватися скидання CSS.</p><p>Скидання CSS бере всі основні елементи HTML із заданим стилем та забезпечує єдиний стиль для всіх браузерів. Ці скиди зазвичай включають видалення розмірів, відступів, полів або додаткові стилі знижують ці значення. Оскільки каскадування CSS працює зверху вниз (скоро про це дізнаєтесь) - наш скидання має бути в самому верху нашого стилю. Це гарантує, що ці стилі прочитаються першими і всі різні браузери працюватимуть із загальної точки відліку.</p><p>Є купа різних скидів CSS доступних для застосування, всі вони мають свої сильні сторони. Один з найпопулярніших від Еріка Мейєра, його скидання CSS адаптовано для включення нових елементів HTML5.</p><p>Якщо ви почуваєтеся трохи авантюристом, є також Normalize.css, створений Ніколасом Галлахером. Normalize.css фокусується не на використанні жорсткого скидання для всіх основних елементів, але натомість на встановленні загальних стилів для цих елементів. Це вимагає глибшого розуміння CSS, а також знання того, що ви хотіли б отримати від стилів.</p><h3>Кросбраузерність та тестування</h3><p>Як згадувалося раніше, різні браузери відображають елементи по-своєму. Важливо визнати значення кросбраузерності та тестування. Сайти не повинні виглядати виключно однаково у всіх браузерах, але мають бути близькими. Які браузери ви хочете підтримувати і якою мірою - це рішення ви повинні будете зробити на основі того, що краще для вашого сайту.</p><p>Існує кілька речей, на які слід звертати увагу під час написання CSS. Хорошою новиною є те, що це все під силу і потрібно трохи терпіння, щоб це освоїти.</p><h2>На практиці</h2><p>Повернемося назад, де ми востаннє зупинилися на нашому сайті конференції та подивимося, як ми можемо додати трохи CSS.</p><ol><li>Всередині нашої папки давайте створимо нову папку з ім'ям assets. У ній ми будемо зберігати всі ресурси для нашого веб-сайту, такі як стилі, зображення, відео тощо. Для наших стилів підемо далі і додамо ще одну папку stylesheets всередині папки assets.</li><li>Використовуючи текстовий редактор, створимо новий файл з ім'ям main.css і збережемо його в папці stylesheets, яку ми щойно створили.</li><p>Переглядаючи файл index.html у браузері ми можемо бачити, що елементи <h1>і <p>Вже містять стиль за промовчанням. Зокрема, вони мають унікальний розмір шрифту і простір навколо них. Використовуючи скидання Еріка Мейєра, ми можемо пом'якшити ці стилі, що дозволить кожному з них починати з однакової бази. Для цього загляньте на його сайт, скопіюйте код та вставте його у верхній частині нашого файлу main.css.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) / html, body, div, span, applet, об'єкт, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, мало, strike, strong, sub, sup, tt, var, b, u, i, центр, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) / HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- collapse: c ollapse; border-spacing: 0; )</p><li>Наш файл main.css починає приймати форму, тому підключимо його до файлу index.html. Відкрийте index.html у текстовому редакторі та додайте елемент <link>в <head>відразу після елемента <title> .</li><li>Оскільки ми вказуємо на стилі через елемент <link>додайте атрибут rel зі значенням stylesheet .</li><p>Ми також увімкнемо посилання на наш файл main.css використовуючи атрибут href. Пам'ятайте, наш файл main.css збережений у папці stylesheets, який знаходиться всередині папки assets. Таким чином, значення атрибуту href , який є шляхом нашого файлу main.css, має бути assets/stylesheets/main.css .</p><p> <head> <meta charset="utf-8"> <title>Styles Conference

Час для перевірки нашої роботи та перегляду, як уживаються разом наші HTML та CSS. Відкриття файлу index.html (або оновлення сторінки, якщо вона вже відкрита) у браузері має показати трохи інший результат, ніж раніше.
Рис. 1.04. Наш сайт Styles Conference зі скиданням CSS
Демонстрація та вихідний код
Нижче ви можете переглянути сайт Styles Conference у його нинішньому стані, а також завантажити вихідний код сайту на даний момент.
Резюме
Отже, все гаразд! Ми зробили кілька великих кроків у цьому уроці.
Подумати тільки тепер ви знаєте основи HTML і CSS. Оскільки ми продовжимо і ви витратите більше часу на написання HTML та CSS, вам стане набагато комфортніше працювати з цими двома мовами.
Нагадаємо, що ми розглянули таке:
Різниця між HTML та CSS.
Знайомство з елементами HTML, тегами та атрибутами.
Налаштування структури першої веб-сторінки.
Знайомство з селекторами CSS, властивостями та значеннями.
Робота із селекторами CSS.
Вказівник на CSS з HTML.
Важливість CSS скидання.

Тепер давайте ближче розглянемо HTML і познайомимося трохи із семантикою.
Ресурси та посилання
Common HTML terms via Scripting Master
CSS Terms & Definitions via Impressive Webs
CSS Tools: Reset CSS via Eric Meyer

Основна маса контенту, представленого в інтернеті, – це веб-сторінки. Це історично найперший тип документів, призначених для розміщення у віртуальному мережевому просторі, але досі зберіг актуальність і практично не має конкуруючих форматів. Яка структура веб-сторінок? За допомогою яких засобів веб-розробки вони створюються?
Що таке Web-сторінка?
"Перелічіть основні елементи Web-сторінки" - каже нам екзаменатор на уроці інформатики. Що ми зможемо сказати йому у відповідь? Насамперед оповідаємо про те, що являє собою веб-сторінка в принципі.
Відповідно до загальноприйнятого в середовищі IT-фахівців визначення, це документ, який призначений для відкриття в спеціалізованій програмі - браузері, і який містить дані для відображення на екрані комп'ютера за допомогою відповідного типу програмного забезпечення різного корисного контенту - текстів, посилань, графіки, відео, музики та т. д. Web-сторінка - це текстовий документ. Відповідні дані для браузера являють собою літери, цифри та спеціальні символи, які використовуються як елементи мови розмітки – HTML. Саме за допомогою нього автор веб-сторінки «пояснює» браузеру, яким чином відображати на екрані той чи інший контент.
Місце та роль веб-сторінок у структурі сайтів
Чи можна сказати, що веб-сторінка є основним компонентом веб-сайту? Частково це правильно. Однак, як ми зазначили вище, веб-сторінка — це лише текстовий документ. На сайті ж, як правило, також розміщуються картинки, відео та інші мультимедійні елементи. Веб-сторінка вмістити їх у себе не може, проте у своїй структурі вона може містити посилання на них. Таким чином, веб-сторінку можна назвати основним компонентом сайту в аспекті чільної ролі у відображенні віртуального контенту перед користувачами.
У поодиноких випадках, звичайно, документ, що розглядається, буде єдиним компонентом сайту — якщо на ньому з якихось причин не передбачено відображення графіки, відео та інших мультимедійних елементів. Зокрема, найперші сайти - коли мови розмітки Web-сторінок тільки з'явилися, - не включали відповідного контенту. Перед очима користувача був лише текст та посилання.
Принцип застосування гіпертексту
Отже, Web-сторінкою називається документ, складений мовою HTML, з допомогою якого здійснюється розмітка гіпертексту. Але що за явище? Що таке гіпертекст? Не заглиблюючись в теорію, відзначимо, що це текст, який тим чи іншим чином дозволяє отримати швидкий доступ до іншого — за допомогою посилань. У звичайній книзі це неможливо – там «простий текст». Для отримання доступу до потрібної сторінки читач повинен зробити кілька перегортань, до цього ознайомившись зі змістом або виносками. У режимі «гіпертексту» основну частину роботи здійснює комп'ютер за рахунок відомостей, що відображаються в HTML-елементах сторінки.
Якщо викладач інформатики каже нам: "Перерахуйте основні елементи Web-сторінки", ми цілком коректним чином можемо почати розповідь про компоненти відповідного документа, які створюються з допомогою мови розмітки HTML. Тому спочатку розглянемо деякі теоретичні моменти, що стосуються HTML.
Структура мови HTML: теги
Як браузер зчитує потрібні дані про веб-сторінку з документа, складеного на мові HTML? Дуже просто.
Основні елементи цієї мови - це теги. Вони в більшості випадків парні - є відкриває, а є закриває. Перші позначаються лише за допомогою кутових дужок. Другі – аналогічно, але перед другою дужкою ставиться слеш – символ /. Браузер вміє їх розпізнавати, і тому без проблем відображає вміст веб-сторінок відповідно до алгоритмів, які створюють розробник документа.
Відкриваючий тег пишеться зазвичай великими літерами, що закриває маленькими. Це — стандарт, усталений серед IT-фахівців. Браузер, безумовно, розпізнає HTML-команду будь-якими літерами, але веб-розробникам рекомендується все ж таки дотримуватися зазначеної схеми написання тегів. Це полегшить, наприклад, доопрацювання веб-сторінки іншими фахівцями.
Атрибути
Інші найважливіші елементи HTML-мови – атрибути. З їх допомогою творець веб-сторінки може задавати властивості контенту - наприклад, висоту шрифту, його колір, положення щодо сторінки. Те саме стосується картинок, відео та інших мультимедійних компонентів. Атрибути пишуться в межах тега, що відкриває.
Вміст
Між тегом, що відкриває та закриває, розміщується наступний ключовий компонент веб-сторінки — вміст. Це, власне, той самий контент, який має відображатись перед користувачем на екрані. Це може бути текст, посилання, зображення, відео або інший мультимедійний елемент.
Елементи веб-сторінок
"Так перерахуйте основні елементи Web-сторінки, нарешті!" – повторює викладач. "Із задоволенням," - відповідаємо ми йому. Що ж входить у структуру типу документів, що розглядається? Умовимося, що розглядатимемо цей аспект саме в контексті HTML-елементів веб-сторінки. Тобто їх відображення у браузері – те, що користувач бачить на екрані – нас буде цікавити меншою мірою. Справа в тому, що відповідні HTML-алгоритми, на основі яких програма відображає контент однаково, можуть бути різними. І це особливість мови HTML: потрібне зображення на Web-сторінці можна вивести різними способами. При цьому вони можуть бути як рівнозначними з точки зору трудовитрат творця веб-сторінки методами, так і припускати різний обсяг зусиль і часу на їх здійснення.
Елементи веб-сторінок: заголовок
Стандартні елементи Web-сторінки, як би це не дивно звучало, представлені в дуже невеликій кількості. По суті їх лише два — заголовок і основна частина документа. Водночас кожен із них може мати досить складну структуру.
Яка специфіка заголовка? Розташовується він у верхній частині веб-сторінки. HTML-код, який формує заголовок, як правило, передбачає «шифрування» тільки тексту, але при необхідності у відповідному елементі можна також розміщувати невеликі графічні вставки. І це, власне, все, що можна сказати про заголовок. Здавалося б, його роль структурі відповідного документа незначна. Але це не так. Заголовки веб-сторінок дуже значні з погляду індексації сайтів у пошукових системах - Яндексі, Google. Цей елемент повинен бути повністю релевантним змісту веб-сторінки, а також тематичній специфіці сайту.
Як заголовок веб-сторінки фіксується за допомогою мови HTML? Дуже просто. Спочатку пишеться тег, що відкриває, який завжди виглядає як HEAD з кутовими дужками, потім - зміст заголовка, після - закриває тег. Пишуться вони, зрозуміло, у верхній частині веб-документа.
Заголовок веб-документа може включати додаткові елементи. Іноді формат веб-сторінки може вимагати відображення тексту у конкретному кодуванні. Як забезпечити відповідність веб-документу цьому критерію? Дуже просто. У структурі заголовка документа мають бути розміщені HTML-алгоритми, що наказують браузеру використовувати конкретне кодування мови - наприклад, кириличну. Відповідні команди розміщуються в рамках тега META, який, як і інші, буває відкриваючим та закриваючим.
Основна частина веб-сторінки
Основна частина веб-документа відкривається тегом BODY, а закривається за допомогою відповідного елемента, що включає слеш. При цьому між тегами, що відкривають і закривають, може бути величезна кількість додаткових команд мови розмітки гіпертексту. Це пов'язано з тим, що в основній частині веб-сторінки розміщено її корисний вміст - тексти, посилання, графіка, відео, різні форми для заповнення.
Кожен із відповідних видів контенту має власні теги. У структурі основної частини веб-документа можуть бути HTML-команди, за допомогою яких здійснюється також форматування тексту - наприклад, надання шрифту певного кольору, розміру та інших властивостей.
Розглянемо те, якою є специфіка деяких часто використовуваних HTML-тегів. Власне, вони й формують основні елементи веб-сторінки.
Базові HTML-теги
Отже, з метою докладного дослідження того, що є елементами Web-сторінки, вивчимо докладніше сутність базових HTML-тегів. Деякі з них ми вже привели вище — зокрема, за допомогою яких браузер зчитує заголовки веб-сторінок і визначає, де розташовується основна частина документа.
Досить поширений тег P. Він, як і інші аналогічні елементи мови гіпертекстової розмітки, може бути відкриваючим і закриваючим. Цей тег дозволяє форматувати окремо взятий абзац документа. Можна, наприклад, задавати певний тип шрифту або його колір. Однак це здійснюється за допомогою додаткового тега – FONT. При цьому він розміщуватиметься всередині того, який позначає межі абзацу — це дозволить не розповсюджувати HTML-команду, що відображає тип кращого шрифту, на інші елементи веб-сторінки.
За допомогою тега TABLE створюються таблиці. За допомогою відповідних атрибутів можна визначати необхідну кількість стовпців і рядків, задавати їх ширину, специфіку кордонів, розмір і колір шрифту тексту в таблиці.
Відповідає за обробку браузером картинок. У ньому також можна розміщувати різні атрибути, що регулюють розмір картинки, її положення на сторінці.
Посилання на інші веб-документи або файли вказуються за допомогою тега A. Як правило, всередині нього розміщуються атрибути, які позначають той факт, що в структурі веб-сторінки гіперпосилання. При цьому вказується документ, файл чи сайт, на який вона веде.
Поширений такий тег як FRAMESET. З його допомогою можна розділити простір веб-сторінки на кілька областей — кадрів. У кожному їх можна на окремі веб-документи. Тобто кадри дозволяють коректно розташувати на одному екрані одночасно дві і більше сторінки.
Розповідь про ключові елементи веб-сторінок та подальшу розповідь про засоби їх форматування за допомогою мови HTML - приблизно таким буде алгоритм нашої відповіді на запитання, яке нам поставив екзаменатор. Якщо він звернувся до нас, сказавши «перерахуйте основні елементи Web-сторінки», то ми, використовуючи відповідну методологію, матимемо всі шанси розкрити тему. Тобто під терміном «елементи» ми можемо розуміти ключові компоненти структури веб-документа або типи вмісту — текст, картинки, таблиці, фрейми, посилання, які веб-майстер формує за допомогою такого інструмента, як HTML.
Специфіка інструментів веб-розробки
Крім сказаного ми можемо пояснити, що тегів і атрибутів, передбачених стандартами HTML - величезна кількість. Крім HTML, веб-розробниками можуть використовуватися додаткові засоби форматування гіпертекстових документів. Наприклад, за допомогою JavaScript можна створювати динамічні Web-сторінки - тобто ті, в яких контент постійно оновлюється (як за рахунок дій самого користувача, так і відповідно до алгоритмів, що заздалегідь прописані в скриптах).
Корисно буде додати, що веб-розробник може задіяти у своїй роботі повноцінні мови програмування, такі як Perl, PHP, Java, Python, за допомогою яких можливості роботи з гіпертекстовими документами стають ще ширшими. Необхідність у цьому може бути пов'язана з тим, що галузі застосування веб-технологій сьогодні — різні. Завдання, які стоять перед сучасними розробниками можуть бути досить складними. Наприклад, іноді потрібно здійснити переклад Web-сторінок, написаних російською мовою, англійською. У цьому випадку інструментарій розробника буде найрізноманітнішим.