Синтаксис HTML. Основні правила мови HTML Навіщо потрібна валідна верстка
Потік кодових точок Unicode, що включає введення в етап мнемонізації, будуть спочатку видно ПАгенту як потік байтів (який зазвичай приходить по мережі або з локальної файлової системи). Байти кодують реальні символи відповідно до конкретної кодуванням символуПА використовується для декодування байтів у символи.
Для документів XML цей алгоритм ПАгенти повинні використовувати для визначення кодування символів, заданої XML-специфікацією. Цей розділ не застосовується до документів XML.
8.2.2.1 Парсинг із відомим кодуванням символів
Коли HTML-парсер працює з байтовим потоком введення, що має певне відоме кодування, тоді кодування символів - це кодування, а - certain.
8.2.2.2 Визначення кодування символів
У деяких випадках може бути недоцільно однозначно визначати кодування до аналізу документа. З цієї причини дана специфікація надає двох кроковий механізм із опційним попереднім скануванням. У реалізаціях дозволяється, як описано нижче, застосовувати спрощений алгоритм парсингу до будь-яких доступних байтів до початку парсингу документа. Потім реальний парсер стартує, з використанням попереднього кодування, взятого з цього попереднього парсингу та інших out-of-band метаданих. Якщо документ завантажується, ПА виявляє оголошення кодування символів, яке конфліктує з цією інформацією, тоді парсер може знову викликаний для виконання парсингу документа з реальним кодуванням.
ПАгенти повинні використовувати наступний алгоритм, званий алгоритм сніфінгу кодування, для визначення кодування символів для використання при декодуванні документа в першому кроці. Цей алгоритм приймає як введення будь-які out-of-band метадані, доступні ПАгенту (наприклад, Content-Type метадані документа), і всі доступні до цих пір байти, і повертає кодування символів і , яка tentativeабо certain.
Якщо користувач явно вказує ПАгенту перевизначити кодування символів документа особливим кодуванням, опційно повернути це кодування з certain
Зазвичай ПАгенти запам'ятовують такий запит користувача між сесіями та іноді застосовують це також до документів в iframe ах.
ПА може більше доступних байтів ресурсу або цьому кроці, або більш пізньому кроці цього алгоритму. Наприклад, ПА може очікувати 500ms або 1024 байт, дивлячись, що буде першим. Загалом попередній парсинг ресурсу визначення кодування підвищує продуктивність, оскільки це зменшує необхідність відкидати структури даних, що використовуються при парсингу після пошуку інформації кодування. Проте, якщо ПА занадто затягує з отриманням даних визначення кодування, витрати часу очікування можуть перевищити будь-який виграш від препарсингу.
Вимоги відповідності для декларації кодування символів обмежують її появу лише у перших 1024 байт . ПАгентам, отже, рекомендується використовувати алгоритм попереднього сканування (далі) як викликаний цими кроками перших 1024 байтах, але з зупинятися цьому.
Для кожного ряду наступної таблиці, починаючи з першого і вниз, якщо є доступних байтів більше, ніж у першому стовпці і перші байти файлу збігаються з байтами першого стовпця, тоді повернути кодування з комірки другого стовпця того ж ряду, з – certain, і перервати виконання цих кроків:
| 16-річні байти | Кодування |
|---|---|
| FE FF | Big-endian UTF-16 |
| FF FE | Little-endian UTF-16 |
| EF BB BF | UTF-8 |
Цей крок шукає Unicode Byte Order Marks (BOMs).
Те, що цей крок йде перед наступним, що дотримується HTTP-хедер Content-Type, є умисним порушення специфікації HTTP, що пояснюється бажанням бути максимально сумісним зі старим вмістом.
Якщо транспортний шар специфікує кодування символів, і воно підтримується, поверне це кодування з – certainта перервати виконання цих кроків.
UTF-8 кодування має бітовий патерн, що точно визначається. Документи, що містять байти більше 0x7F, що збігаються з UTF-8 патерном, ймовірно, є UTF-8, а документи з байтовими послідовностями, що не збігаються з ним - дуже ймовірно, що ні. ПАгентам, отже, рекомендується шукати це загальне кодування.
Інакше – повернути реалізовану або користувачем кодування символів за замовчуванням, з – tentative.
У керованих оточеннях або в оточеннях, де кодування документів може бути наказане (наприклад, для ПАгенти, призначених конкретно для використання в нових мережах), рекомендується вичерпне кодування UTF-8.
В інших оточеннях кодування за умовчанням зазвичай залежить від локалі користувача (апроксимації мов і, таким чином, часто – кодувань сторінок, які користувач, мабуть, відвідує). Наступна таблиця рекомендує замовчування на базі локалі користувача, для сумісності зі старим вмістом. Локалі ідентифікуються за BCP 47 тегами мови.
| Локальна мова | Рекомендоване кодування за замовчуванням | |
|---|---|---|
| ar | Arabic | windows-1256 |
| ba | Bashkir | windows-1251 |
| ru | Belarusian | windows-1251 |
| bg | Bulgarian | windows-1251 |
| cs | Czech | windows-1250 |
| el | Greek | ISO-8859-7 |
| et | Estonian | windows-1257 |
| fa | Persian | windows-1256 |
| he | Hebrew | windows-1255 |
| hr | Croatian | windows-1250 |
| hu | Hungarian | ISO-8859-2 |
| ja | Japanese | Shift_JIS |
| kk | Kazakh | windows-1251 |
| ko | Korean | euc-kr |
| ku | Kurdish | windows-1254 |
| ky | Kyrgyz | windows-1251 |
| lt | Lithuanian | windows-1257 |
| lv | Latvian | windows-1257 |
| mk | Macedonian | windows-1251 |
| pl | Polish | ISO-8859-2 |
| ru | Ukrainian | windows-1251 |
| sah | Yakut | windows-1251 |
| sk | Slovak | windows-1250 |
| sl | Slovenian | ISO-8859-2 |
| sr | Serbian | windows-1251 |
| tg | Tajik | windows-1251 |
| th | Thai | windows-874 |
| tr | Turkish | windows-1254 |
| tt | Tatar | windows-1251 |
| uk | Ukrainian | windows-1251 |
| vi | Vietnamese | windows-1258 |
| zh-CN | Chinese (People's Republic of China) | GB18030 |
| zh-TW | Chinese (Taiwan) | Big5 |
| Усі інші локалі | windows-1252 | |
Вміст цієї таблиці виведено зі стандартних умов Windows, Chrome і Firefox.
Будь-який інший байт
Нічого не робити із цим байтом.
Підтримка кодувань на базі EBCDIC не рекомендується. Це кодування рідко використовується для публічного веб-вмісту. Підтримувати UTF-32 також не рекомендується. Це кодування рідко використовується і часто реалізується некоректно.
Ця специфікація не намагається підтримувати кодування на базі EBCDIC та UTF-32 у своїх алгоритмах; підтримка та використання цих кодувань, отже, може дати непередбачувану поведінку у реалізаціях цієї специфікації.
8.2.2.4 Визначення кодування під час парсингу
Коли парсер вимагає від ПА змінити кодування, ПА повинен виконати такі кроки. Це може статися, якщо , розглянутий вище, зазнає невдачі при пошуку кодування символів, або якщо він знайде кодування символів, яке не було фактичним кодуванням файлу.
8.2.2.5 Препроцесинг вхідного потоку
Потік введення складається із символів, проштовхнутих у нього як декодований або різних API, які безпосередньо маніпулюють потоком введення.
Один провідний символ U+FEFF BYTE ORDER MARK повинен бути ігнорований, якщо вони є в .
Вимога вирізати символ U+FEFF BYTE ORDER MARK, незалежно від того, чи цей символ використовувався для визначення порядку байтів, є умисним порушенням Unicode, яке пояснюється бажанням підвищити стійкість ПАгентів у плані власних транскодерів.
Будь-які появи будь-яких символів з діапазонів від U+0001 до U+0008, від U+000E до U+001F, від U+007F до U+009F, від U+FDD0 до U+FDEF та символів U+000B, U+FFFE , U+FFFF, U+1FFFE, U+1FFFF, U+2FFFE, U+2FFFF, U+3FFFE, U+3FFFF, U+4FFFE, U+4FFFF, U+5FFFE, U+5FFFF, U+6FFFE, U +6FFFF, U+7FFFE, U+7FFFF, U+8FFFE, U+8FFFF, U+9FFFE, U+9FFFF, U+AFFFE, U+AFFFF, U+BFFFE, U+BFFFF, U+CFFFE, U+CFFFF , U+DFFFE, U+DFFFF, U+EFFFE, U+EFFFF, U+FFFFE, U+FFFFF, U+10FFFE та U+10FFFF є . Всі вони – символи керування або перманентно невизначені/undefined Unicode-символи(несимволи/noncharacters).
Символи "CR" (U+000D) та "LF" (U+000A) розглядаються особливо. Усі символи CR мають бути конвертовані в символи LF, а будь-які символи LF, які йдуть після символу CR, повинні ігноруватися. Таким чином, нові рядки/newlines HTML DOM представлені символами LF і ніколи – символами CR у введенні до етапу .
Наступний символ введення – це перший символ у , який ще не використаний/consumed або явно ігнорується вимогами цього розділу. Початково це перший символ у потоці введення. Поточний символ введення є останнім символом, який був .
Точка вставки/точка вставки – це позиція (безпосередньо перед символом або безпосередньо перед кінцем потоку введення), де вміст, вставлений за допомогою document.write() , реально вставляється. Точка вставки є відносною позиції символу відразу після неї, це не абсолютне зміщення в потоці введення. Спочатку точка вставки не визначена/undefined.
Символ "EOF" у наступних таблицях це концептуальний символ, що представляє кінець . Якщо парсер є парсером, створеним скриптом , тоді кінець досягається, коли використовується явний символ "EOF" (вставлений методом document.close()). Інакше символ "EOF" – це реальний символ в потоці, а позначення відсутності будь-яких наступних символів.
Обробка символів U+0000 NULL залежить від того, де символи знаходяться. У цілому нині вони ігноруються, крім випадків, коли це реально підставити по удар. Така обробка, за потребою, поширюється на стадії мнемонізації та побудови дерева.
DOM як частина мови
У мові HTML5 вперше було введено поняття DOM (хоча він існував і раніше, проте він не був частиною мови)Тепер HTML-документ розглядається як набір об'єктів, а не тегів. Тому як такого синтаксису HTML5не існує. Однак при написанні коду ви можете дотримуватись правил розмітки тегів, які були встановлені в HTML 4.01 або XHTML 1.0
Синтаксис HTML 4.01
У HTMLдо п'ятої версії, існувало кілька правил написання коду:
- Вільний режим loose, що використовується в HTML 4.01
"http://www.w3.org/TR/html4/loose.dtd"> - Суворий режим strict, що використовується в HTML 4.01
"http://www.w3.org/TR/html4/strict.dtd"> - Ще був синтаксис пов'язаний із фреймами. Фрейми HTML5 вважаються застарілими, але багато розробників все одно використовують їх, оскільки фрейми дуже зручні при розробці деяких веб-додатків.
Синтаксис XHTML 1.0
У XHTML, існувало два правила написання коду:
- Перехідний режим transitional, що використовується в XHTML 1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - Суворий режим strict, що використовується в XHTML 1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Сучасний синтаксис HTML5
При використанні HTML5, написавши на початку HTML-документа, доктайп, ви можете використовувати будь-який з перелічених вище синтаксисів мови (Правил написання коду)або навіть поєднувати HTML 4.01 та XHTML 1.0 один з одним.
Наприклад, не обрамляти лапками значення атрибутів атрибут=значення (вільний режим HTML 4.01 - loose), але в той же час ставити сліш у одиночних тегах
(Суворий режим ХHTML 1.0 - strict).
XHTML (strict), найкращий
Досвідчені HTML-верстальники зазвичай використовують при написанні коду на HTML5, строгий синтаксис XHTML strict , оскільки він тримає верстальника в тонусі, не дозволяє йому розслаблятися і тим самим оберігає його від можливих помилоку коді. Також використання суворого синтаксису стане в нагоді щодо програмування, бо там суворість синтаксису, вкрай важлива.
Синтаксис мови HTML
Мал. 1.6. Відображення простої HTML-сторінки у веб-браузері
Основні правила HTML
Назви HTML-тегів не є чутливими до регістру, а в XHTML маленькі і великі буквивважаються різними, і імена тегів повинні записуватись маленькими літерами.
Елементи можуть включати текст та поделементи (як, наприклад, елемент htmlмістить поделементи head і body у наведеному вище прикладі). Елементи мають бути правильно вкладені один в одного.
Поделементи, включені в елемент, повинні закінчуватися до закриває елемента. Наприклад, наступний запис є помилковим: <а>
Правильно цей фрагмент повинен мати такий вигляд:
Це напівжирний та похилий текст
У XHTML, якщо елемент не включає текст і поделементи (порожній елемент), все одно повинен мати теги, що відкривається і закривається. Наприклад, елемент br не має змісту і викликає розрив рядка (продовження тексту починається з нового рядка). Однак відповідно до правил він повинен записуватися наступним чином:
або скорочено
. Так само повинен записуватися і елемент
- Виведення горизонтальної лінії.
Відкривальні елементи елементів можуть мати атрибути,які уточнюють поведінку елемента та задають додаткові значення. Практично кожен тег має велику кількість необов'язкових параметрів. Далі розглядатимуться лише основні атрибути тегів.
Багато атрибутів HTML є спільними для всіх елементів, але деякі є специфічними для даного елементачи елементів. Усі вони мають форму:
имя_атрибута="значення"
Наприклад:
Основи Hypertext Markup Language
У даному прикладіелемент div (розділ HTML-сторінки, що дозволяє розділяти документи на логічні блоки) має атрибут id, для якого встановлено mySection. Елемент divмістить елемент h1 (заголовок першого, чи найважливішого, рівня), який, своєю чергою, містить певний текст. Значення атрибутів повинні бути поміщені в одиночні або подвійні лапки.
Імена тегів та атрибутів та їх можливі значення визначаються специфікацією мови HTML, і власні теги чи атрибути створювати не можна.
У всіх елементах можна задавати атрибути id та class, значення яких використовуються для ідентифікації конкретних елементів (id) або групи елементів (class). Ці атрибути активно використовуються у скриптах документа та описах. CSS стилівдокумента.
Є дві основні категорії елементів у HTML: блоковіі рядкові
- Блокові елементизазвичай інформують структуру документа. Такі елементи починаються з нового рядка, відриваючись від того, що було перед цим. Прикладами блокових елементів є параграфи, пункти списку, заголовки та таблиці, контейнери div.
- Рядкові елементимістяться всередині структурних елементів блокового рівня та охоплюють лише частини тексту документа, а не цілі області. Рядковий елемент не призводить до появи в документі нового рядка, тому що вони є елементами, що з'являються у параграфі тексту. Прикладами рядкових елементів є посилання, виділені слова або фрази, контейнери span.
Олександр Кічатов
Як працюють PHP скрипти
Напевно, ти знайомий з принципом роботи радіокерованих машинок. Натискаєш вперед - машинка їде, натискаєш ліворуч - машинка змінює напрямок коліс.
PHP працює так само. Ти пишеш команди одну за одною, а PHP послідовно їх виконує.
Що таке PHP скрипт
PHP-скрипт - це звичайний текстовий файл з розширенням .php . Такий самий, як html і css.
Але є одна важлива відмінність:
Скрипти запускаються лише через http-запити у браузері. Це означає, що для запуску скрипта script.php необхідно в адресному рядку браузера написати site.ru/script.php
Якщо скрипт не працює – перевір поточну URL-адресу. Якщо там буде щось на зразок file:///D:/openserver/domains/site.ru/script.php- це означає, що ти намагаєшся не перейти на сторінку сайту, а відкрити сам PHP файл у браузері. Це не правильно.
Веб-сервери найчастіше налаштовані так, що при заході на головну сторінку(наприклад site.ru) автоматично запускається файл index.php або index.html, що лежить у корені сайту.
Створи у кореневій папці сайту файл з назвою index.php та відкрий його у своєму текстовому редакторі. За наявності файлу index.html його потрібно видалити.
Якщо в тебе поки що немає текстового редактора- рекомендую легкий і безкоштовний Notepad++, він набагато зручніший за вбудований в Windows блокнот.
Обов'язково стеж за кодуванням скриптів. Кодування має бути або UTF-8 без BOM(якщо така доступна у твоєму редакторі), або просто UTF-8.
Виведення чисел та рядків у PHP
Команди PHP пишуться між тегами, наприклад:
Команда echo відповідає за виведення інформації на екран. Після оператора вказується значення, яке потрібно вивести.
Щоб вивести текст, його потрібно вказати в одинарних чи подвійних лапках:
Команди в PHP поділяються крапкою з комою. Для зручності читання кожну команду прийнято писати з нового рядка:
Результат у браузері:
Це код PHP.
Виведення HTML коду в PHP
HTML-код можна перемішувати з командами PHP:
Також HTML код можна підставити в PHPшний рядок:
Наполеон"; ?>
Результат у браузері:
Слон Наполеон
Ми можемо як завгодно поєднувати PHP код і HTML теги:
Рядок2" ?>
Функції у PHP
Функція - це команда, яка виконує будь-які дії, наприклад розрахунки, керування файлами тощо.
Визначити функцію просто – у неї після назви йдуть круглі дужки:
Функція phpinfo() виводить на екран інформацію з поточними параметрами PHP.
Деякі функції очікують, що їм передадуть якесь значення. Наприклад, функція округлення ceil() очікує число, яке вона заокруглить:
Функція ceil() отримує передане нами значення 91.5 обробляє його (округлює до 92) і повертає результат. А команда echo отримує повернене функцією значення та виводить його на екран. Результатом роботи цього скрипту буде 92 .
Необхідність тега, що закриває, в PHP
Якщо після PHP команд немає HTML або будь-якого іншого виведення на екран, то ми можемо не використовувати тег, що закриває?> :
Скорочений синтаксис тега, що відкриває, в PHP
Замість
Крім цього, ми можемо замінити тег
Використання тега
Це не стосується тегу
Будь-яку мову має синтаксис, тобто. набір правил побудови фраз, що дозволяє визначити осмислені речення у цій мові. З вивчення цих правил ми розпочнемо вивчення мови HTML. Для початку відкриємо наш Dremweaver і створимо якийсь нескладний HTML-документ у звичному нам візуальному режимі. Подивимося, який HTML-код відповідає нашому документу.
Як Ви пам'ятаєте, перемикання в режим перегляду HTML-коду здійснюється за допомогою кнопки Code View. У Dremweaver є ще один режим, дуже зручний, особливо коли у Вас великий монітор. Це "проміжний" режим який показує одночасно і код, і відповідний йому документ. Так набагато простіше розібратися, де у нас що: ми відзначаємо якийсь фрагмент в візуальному режимі і тут же бачимо цей фрагмент у режимі HTML-коду.Отже, ви можете помітити, що HTML містить наш початковий тексту чистому вигляді і, крім того, безліч якихось незрозумілих слів, укладених у кутові дужки. Ці незрозумілі конструкції є основні будівельні блоки нашої мови. Називаються вони тэгами. Тег складається з назви тега, укладеного у кутові дужки. Назви тегів можуть бути написані як малими, так і великими літерами - це не важливо.
Якщо ви придивитеся уважніше, то помітите, що багато тег мають свою "другу половину", доповнену косою межею. І такі "пари" оточують фрагменти нашого "змістовного" тексту. Наприклад, заголовок оточений тегами
і
, абзац оточений тегами . Така конструкція називається елементом. Елемент – це і є одиниця розмітки. Елемент складається з тега, що відкриває, даних (тобто змістовної інформації) і закриває тега. Таким чином, призначення тегів полягає у позначенні меж елементів.Спробуємо змінити розмітку тексту: наприклад, заголовок замість елемента
Замість назви ми отримали звичайний абзац тексту. Вітаю! Ви зробили перший крок до ручного редагування HTML-коду. При розмітці тексту на елементи дуже важливо, щоб тегу, що відкриває, відповідав такий же закриває. Якби ми змінили відкриваючий тег на
А закриваючий залишили- це було б грубою помилкою. Dreamweaver здатний "відловлювати" такі помилки та повідомляти нам про це. Бувають елементи, для яких вказувати тег, що закриває, не обов'язково. Таким елементом, наприклад, є елемент P. Кінець першого абзацу може бути позначений початком другого.
Бувають елементи, які взагалі не можуть мати тега, що закриває, складається тільки з відкриває. Це трапляється, коли елемент призначений для розмітки тексту, а несе самостійне смислове навантаження. Наприклад зображення, елемент . Елементи можуть бути вкладені один в одного. Наприклад, елемент
вкладено в елемент
Це означає, що зображення знаходиться всередині абзацу. Ми можемо вкласти цей абзац та інші елементи.
Наприклад, давайте якийсь фрагмент тексту заключимо в елемент . Цей фрагмент виділився курсивом. Елементи не повинні не повинні при цьому перетинатися: якщо елемент відкрився всередині елемента То закритися він повинен також усередині Якщо ж ми закриємо елемент "зовні" його батьківського елемента, це буде груба помилка, про що Dreamweaver нам так само повідомить. Ось, він повідомляє, що у нас є теги, що перетинаються. Деякі теги крім імені можуть включати атрибути, що містять додаткову інформаціюпро цей конкретний елемент. Атрибут складається з імені атрибута та значення, розділених знаком рівності. Наприклад, тег Ми можемо змінити значення цього атрибуту, а ширина зображення зміниться. Особливими атрибутами є id та class. Ці атрибути можна застосовувати майже до будь-якого елемента. Id дозволяє дати елементу деяке унікальне ім'я і, таким чином, виділити його з ряду аналогічних елементів. Це ім'я потім може використовуватися: По-перше, для нестандартного оформлення конкретного елемента (наприклад, у нас є 2 абзаци - однакові елементи, що виглядають, відповідно, однаково; надавши їм імена за допомогою атрибуту id, ми можемо контролювати оформлення кожного з них окремо ). По-друге, id може використовуватися як мету гіперпосилання, т. е. ми можемо посилатися непросто сторінку, але в конкретне її місце. По-третє, для програмістських потреб (для певних маніпуляцій із конкретним елементом). Class, на відміну від id, не має бути унікальним. Він задає належність одного чи кількох елементів до певного класу. Класи використовуються переважно для оформлювальних потреб. Наприклад, ми можемо позначити кілька абзаців, що належать до одного класу. Зараз у нас цей і цей абзаци належать до одного класу, і ми можемо тепер одним махом змінити їхнє оформлення. Крім тегів у HTML використовуються так звані "підстановки" (entities). Вони потрібні у двох випадках: для вставки в документ символів, що відсутні на клавіатурі (наприклад, "правильних" лапок) і для вставки символів, що мають у HTML службове значення. Наприклад, якщо нам потрібна кутова дужка і ми напишемо її в коді як є, то, природно, це буде сприйнято як тег браузером. У цьому випадку замість кутових дужок потрібно вказати спеціальні підстановки, які будуть сприйняті браузером як кутові дужки. Підстановки мають такий вигляд: &код; Код може бути або мнемонічним, спеціальні слова, або числовим, коли ми просто вказуємо номер символу. Числовий код передує "решіткою". Існує величезна кількість мнемонічних кодів, для різних символів, але за допомогою числового коду ми можемо вказати абсолютно будь-який символ, наявний в даному шрифті, навіть такий, для якого не існує мнемонічного коду. Отже, елементи, теги, атрибути та підстановки - це основні "цеглинки", з яких будується HTML-документ. Але в будь-якому будівництві ми повинні дотримуватись деяких базових правил: спочатку закласти фундамент, звести стіни, накрити будову дахом тощо. У будівництві HTML-документа також є свої закони, які знаходять свій відбиток у структурі документа. З розміткою тексту ми більш-менш розібралися. Ви переконалися, що в основі документа лежить текст, розбитий на елементи за допомогою тегів. Однак ви можете бачити ще ряд елементів, які незрозуміло до чого відносяться. Розташовуються вони строго певним чином. Починається документ із такого рядка:. Це так звана декларація версії HTML. Справа в тому, що, як Ви пам'ятаєте, за недовгу, але насичену історію свого розвитку, HTML вийшов у кількох версіях. Щоб браузер міг правильно показати даний документ, він повинен знати, на якому з HTML він написаний. В даному випадку в цьому рядку вказано, що ми маємо справу з версією HTML 4.01. Після декларації розпочинається сам документ. Він поміщений в елемент . Ми бачимо тег, що відкриває, і в кінці документа знаходиться закриваючий. Всередині елемента розташовуються один за одним два обов'язковий елемент: містить атрибут width, який відповідає за ширину зображення.