Категории

  • Голосование
  • Право голоса
  • Киев
  • Украина
  • Здоровье
  • Популярное
  • Новости
  • Новости

      Artmisto
      Наша команда-партнер Artmisto. С "Buddy.Bet" азартные игроки найдут идеальное место для развлечений и возможность выиграть крупные суммы.

    Структура HTML документа: html, head, body, title

    1. Від автора
    2. Загальна правильна структура HTML документа
    3. Структура HTML документа
    4. Тип поточного документа DTD
    5. Поняття тега в HTML
    6. Теги заголовків і підзаголовків h1-h6
    7. Приклад розвиненою структури HTML документа
    8. Структура HTML 5
    9. HTML розмітка на сайті WordPress
    10. Як подивитися HTML код сторінки сайту WordPress
    11. висновок

    Від автора

    Наша команда-партнер Artmisto

    Доброго дня! У цьому уроці ви НЕ знайдете для себе нічого корисного, якщо ВЖЕ знайомі з формуванням структури HTML документа. Для тих, хто НЕ знаком, я покажу правильну (валідну) структуру HTML веб-документа, в тому числі для сайту WordPress.

    Загальна правильна структура HTML документа

    В першу чергу, без довгих передмов - загальна структура будь-якого HTML документа повинна бути такою:

    Структура HTML документа

    <! DOCTYPE html> / * Вказує тип поточного документа DTD * / <html> / * Показує початок документа * / <head> / * Показує початок заголовка (шапки) * / <title> Test </ title> / * Показує заголовок * / </ head> / * Показує початок заголовка * / <body> / * Показує початок основної частини документа (тіло) * / <p> </ p> / * Змістовна частина документа * / </ body> / * Показує кінець основної частини документа * / </ html> / * Показує кінець документа * /

    Якщо прибрати пояснення, які я показував після кожного тега, то проста структура HTML документа виглядає так

    <! DOCTYPE html> <html> <head> <title> Test </ title> </ head> <body> <p> </ p> </ body> </ html>

    Тип поточного документа DTD

    Тип поточного документа (Document Type Definition, DTD) необхідний, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, адже мова HTML існує в декількох версіях.

    Крім цього є інші мови розмітки відмінні від HTML, наприклад XHTML.

    Примітка: XHTML це EXtensible HyperText Markup Language, що переводимо, як розширена мова розмітки гіпертексту.

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

    Поняття тега в HTML

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

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

    • Тег [head] означає заголовок html документа. У тегах head зберігається інформація для браузерів і пошукових систем. У тому числі у вигляді мета-тегів;
    • Тег [body] означає основний зміст html документа. Саме текст, зображення, скрипти Java Script і т.д .;
    • Тег [p] це блоковий елемент, завжди починається з нового рядка. Він означає абзац основного змісту html документа.

    Важливо! Всі теги html розмітки повинні бути парними. Тобто, відкриває тег <тег>, повинен бути закритий закриває тегом, з косою рисою </ тег>.

    Теги заголовків і підзаголовків h1-h6

    Для поліпшення структурування тексту документа, а також поліпшення SEO веб-сторінок, існують додаткові теги основного змісту. Вони називаються теги заголовків і підзаголовків від h1 до h6, всього 6 штук.

    Вони так само як теги [p] -обзаца, який, дозволяє виділити смислові ділянки тексту, дозволяють поділити текст на смислові долі, давши кожній ділянці свій заголовок.

    Теги h1 - h6 мають підпорядковану залежність, нижній рівень цієї підпорядкованості абзац.

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

    Приклад розвиненою структури HTML документа

    Наведу академічний приклад більш розвиненою структури HTML документа:

    <! DOCTYPE html> <html> <head> <title> Test </ title> </ head> <body> <h1> Основний заголовок </ h1> <h2> </ h2> <h3> </ h3> < p> </ p> <p> </ p> <h1> Основний заголовок </ h1> <h2> Перший підзаголовок </ h2> <h3> Перший другорядний підзаголовок </ h3> <p> Абзац </ p> < p> Абзац </ p> <h1> Основний заголовок </ h1> <h2> Другий підзаголовок </ h2> <h3> Перший другорядний підзаголовок </ h3> <p> Абзац </ p> <p> Абзац </ p > <h4> </ h4> <p> </ p> </ body> </ html>

    Структура HTML 5

    У версії HTML 5 має бути така структура документа:

    <! DOCTYPE html> Це декларація яка показує, що цей документ в HTML5;

    <Html> це кореневий елемент HTML сторінки;

    <Head> Елемент, з мета-тегами про документ;

    <Title> Цей елемент визначає заголовок для документа;

    <Body> Цей елемент містить видиме вміст сторінки;

    <H1> Елемент визначає великий заголовок

    <P> Елемент визначає абзац.

    Працюють в html5 теги h2-h6

    Всі теги подвійні. Початковий тег називається відкриває тегом, а кінцевий тег - закриває тегом.

    HTML розмітка на сайті WordPress

    Незважаючи на те, що скрипт WordPress написаний на php, всі файли сайту, а вірніше все файли робочого шаблону сайту, мають html розмітку. Дивимося приклад, на файлі header.phpшаблона Twenty Seventeen:

    <? Php?> <! DOCTYPE html> <html <? Php language_attributes (); ?&gt; Class = "no-js no-svg"> <head> <meta charset = "<? Php bloginfo ( 'charset');?>"> <Meta name = "viewport" content = "width = device-width , initial-scale = 1 "> <link rel =" profile "href =" http://gmpg.org/xfn/11 "> <? php wp_head (); ?&gt; </ Head> <body <? Php body_class (); ? &gt;> <div id = "page" class = "site"> <a class="skip-link screen-reader-text" href="#content"> <? Php _e ( 'Skip to content', 'twentyseventeen '); ?> </a> <header id = "masthead" class = "site-header" role = "banner"> <? Php get_template_part ( 'template-parts / header / header', 'image'); ?> <? Php if (has_nav_menu ( 'top')):?> <Div class = "navigation-top"> <div class = "wrap"> <? Php get_template_part ( 'template-parts / navigation / navigation', 'top'); ?> </ Div> <! - .wrap -> </ div> <! - .navigation-top -> <? Php endif; ?> </ Header> <! - #masthead -> <? Php if ((is_single () || (is_page () &&! Twentyseventeen_is_frontpage ())) && has_post_thumbnail (get_queried_object_id ())): echo '<div class = "single-featured-image-header"> '; echo get_the_post_thumbnail (get_queried_object_id (), 'twentyseventeen-featured-image'); echo '</ div> <! - .single-featured-image-header ->'; endif; ?> <Div class = "site-content-contain"> <div id = "content" class = "site-content">

    Ви можете бачити, що якщо всі функції WordPress розміщені в класичній HTML розмітці. Є тип документа: <! DOCTYPE html>

    Парні теги [head], [header]

    Хто відкриває тег [body].

    Закриває тег можна знайти в файлі footer.php.

    Як подивитися HTML код сторінки сайту WordPress

    Те, що ви пишете в редакторі сайту, створюючи статті або сторінки, це лише частина HTML сторінки сайту. Це навіть не все тіло (body) сторінки.

    Щоб подивитися HTML код сторінки сайту WordPress, а це потрібно дуже часто, потрібно:

    Відкрити сторінку у браузері;

    Перейти в англійський шрифт клавіатури;

    Натиснути наступні кнопки:

    • Chrome: Ctrl + U
    • Opera: Ctrl + U
    • Mozilla: Ctrl + U

    Може бути, ви поки не знаєте, навіщо це потрібно. Повірте, це буде потрібно не раз, для аналізу свого сайту і можливо сайтів конкурентів.

    висновок

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

    У статті використані інструменти навчання HTML: Tryit Editor v3.5

    © www.wordpress-abc.ru


    Статті пов'язані з теми:

    Php?
    DOCTYPE html> <html <?
    Php language_attributes (); ?
    Gt; Class = "no-js no-svg"> <head> <meta charset = "<?
    Php bloginfo ( 'charset');?
    Org/xfn/11 "> <?
    Php wp_head (); ?
    Gt; </ Head> <body <?
    Php body_class (); ?
    Gt;> <div id = "page" class = "site"> <a class="skip-link screen-reader-text" href="#content"> <?

    Номера

    Номерной фонд гостиницы насчитывает 173 номера различных категорий.

    Забронировать отель можно прямо сейчас: Бронирование онлайн