Поточний час:
Сьогодні 21 листопада, вівторокк 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 2 дня

Ваш ip адрес:54.198.210.67

Доброї ночі!
Ви обновили сторінку в 4 : 19
Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

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

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

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

Документ HTML складається з трьох частин:

⇒рядок  який містить інформацію про версію документа

⇒розділ HEAD  декларативна частина, заголовок документа включає в себе все що знаходиться між тегами <head> і </head> 

⇒розділ BODY частина, яка представляє собою вміст документа, його фактичне наповнення, точніше цілу сторінку, включає в себе все що знаходиться між тегами <body> і </body>.

Давайте  передивимся  HTML–сторінку

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8“>
<title>Документ без назви</title>
</head>
<body>

</body>
</html>

Білий простір сюда входить пробіли, абзаци, табуляції, і коментарі —  можуть появлятися до і після кожного розділу.

Грамотне використання білого простору допоможе правильно розтавити акценти на web–сторінці, білий простір  дуже важливий для чіткості і збалансованого дизайну сайту.

 

Цей код що вгорі, повністю можна використовувати для написання любої HTML–сторінки, в випадку якщо не будуть правильно відображатись букви, замість них абра–кадабра, тоді просто поміняйте значення  charset=utf-8, на значення Windows–1251.

Роздивимось детальніше кожен з розділів. Вони  я вважаю будуть не лишніми, тим більше іх тільки три, незважаючи на те що багато пропонують використовувати тільки одну підверсію документа Transitional

Елемент DOCTYPE HTML

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

Цю роль відіграє визначення (DTD– DOCUMENT TYPE DECLARATION) яке використовується для того щоб визначити синтаксис конструкцій розмітки.

Рекомендують любий HTML–документ починати з цього рядка DOCTYPE версія HTML, який містить визначення типу документа DTD.

В HTML 4.01 представлені три вида DTD, таким чином програмісту необхідно включити один із наступних типів документу в web–проектах які створюються. Різниця між типами DTD заключається в підтримуванні елементів.


DTD—(Strict)  строгий  HTML 4.01 включає в себе все що не  відноситься до устарівших і не бажаних елементів і атрибутів, а також ті які не появляються в документах, які використовують фрейми.

Обявлення типу документа строгий

Обявлення типу документа <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/Strict.dtd”>


DTD—(Transitional) перехідний HTML 4.01 той який більшість рекомендують, включає в себе всі елементи, які містить попередній DTD— строгий, плюс устарівші і небажані атрибути і елементи. 

Обявлення типу документа перехідний

Обявлення типу документа <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>


DTD— (Frameset) для кадрів HTML 4.01 включає в себе всі елементи перехідного або(другого за списком в нашій публікації) DTD, але ще плюс містить кадри(frame).

Обявлення типу документа для кадрів

Обявлення типу документа <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frame.dtd”>


В кожній декларації зазначено, що наступний за нею документ являється  HTML–документом, створеним згідно стандарту  HTML 4.01, розробленим W3C. В кінці рядка декларації присутні дві останні букви “EN”, вони означають мову DTD для  HTML вона завжди англійська.

А в другому рядку міститься адреса (URI) “http://www.w3.org/TR/html4/loose.dtd” > звідки браузер може загрузити дані  DTD

URI–які вказують на DTD для HTML 4.01 підтримує W3C 

“http://www.w3.org/TR/html4/Strict.dtd”>— строге по замовчуванню

  “http://www.w3.org/TR/html/Frameset.dtd”>— для кадрів

   “http://www.w3.org/TR/html40/loose.dtd”>— перехідне

 “http://www.w3.org/TR/html40/HTMLlat.ent”>— комбінації –Latin1

 “http://www.w3.org/TR/html40/HTMLsymbol.ent”>— комбінації символів

 “http://www.w3.org/TR/html40/HTML special.ent”>— спеціальні комбінації

Всі ці декларації, не являються обовязковою частиною HTML–документа, так як деякі браузери її ігнорують, а деякі програмісти просто  викидають значення URI.

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

Елемент HTML

Стуктура HTML–документа, і її основні елементи позначаються просто без декларацій, без декларації також можна створювати HTML–сторінки

<html>
<head>
<title>Заголовок документа</title>
</head>
<body> Все що містить документ

</body>
</html>

Відкриваючий тег — <> Закриваючий тег —</> 

 

Елемент HEAD

Елемент HEAD містить детальну інформацію про документ, таку інформацію як заголовок, і ключові слова сайту, які використовуються для реклами в якості технологій СЕО. Браузери не показують інформацію, яка міститься в розділі (HEAD), але враховують її в процесі пошуку в просуванні.

Ми завжди можемо получити доступ до цієї інформації за допомогою функції передивитись  HTML–код.

Елемент HEAD містить наступну інформацію

⇒титул документа TITLE

⇒каталог метаінформації META

⇒ базовий URI зовнішніх посилань BASE

⇒посилання на другі документи LINK

⇒зовнішні таблиці стилів STYLE

⇒сценарії клієнта SCRIPT 

Елемент TITLE

Елемент TITLE являє собою обовязковим елементом заголовку web–сторінки, і показує коротку інформацію по цілому документу, а також використовується для його індентифікації. Цей елемент слід розуміти як заголовок документу. В ньому можна розмістити один заголовок.

Програмісти обовязково повинні використовувати елемент TITLE для індентифікації документа.

Користувачі часто звертаються до документів, не передивляючись їх місткість, автори повинні надавати більш інформативні заголовки.

Наприклад заголовок “Базова структура” не несе повну інформацію. А заголовок “Базова структура документа HTML” несе пону інформацію про місткість документа.

  

Також слід зазначити про заголовки, що крім того що елемент TITLE визначає заголовок до web–сторінки, також в мові HTML присутня можливість привязати заголовок до елементів документа, шляхом включення в тег елемента атрибута title<елемент title=”значення”>.

Атрибут TITLE 

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

Наприклад

<a href= “http://google.ua/12.HTML” TITLE= “GOOGLE” >про пошукову систему.</a>

Атрибут TITLE  відіграє додаткову роль коли використовується з елементом LINK, для визначення зовнішньої таблиці стилів CSS.

Елемент BODY

Елемент BODY застосовується для збереження вмісту web–сторінки, який буде відображений в вікні браузера.

Вміст може бути показаний в різних формах. Наприклад, текст, зображення, колір, звук.

В звязку з тим що на даний час таблицям стилів CSS більше надають перевагу , із за цього атрибути  BODY які представляють тег <body> були обявлені застарілими, проте всерівно підтримуються сучасними браузерами.

Висновок

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

1. Сторінка HTML— складається з чотирьох або з трьох частин, це декларація  DOCTYPE (інформацію про неї можна вносити або не вносити за вашим бажання або яка мета вашої сторінки), вона всерівно буде відображатись в браузеі.

 

Елемент DOCTYPE версія HTML містить три типи DTD—  ми про них писали в публікації це DTD—(Strict)  строгий, DTD—(Transitional) перехідний,  DTD— (Frameset) для кадрів.

2. В сторінку HTML крім декларація  DOCTYPE входять наступні елементи— елемент HTML тег пишится на початку і в кінці сторінки, закриває сторінку, елемент HEAD містить детальну інформацію про документ, елемент BODY застосовується для збереження вмісту web–сторінки.

3. В елемент HEAD між відкриваючим тегом і закриваючим тегом <head>між ними </head> можна поміщати наступну інформацію (TITLE, META, BASE, LINK, STYLE, SCRIPT)— більш детально про ці елементи в наступних публікаціях, вірніше про всі крім TITLE, цей ми розібрали в сьогоднішній статті.

Ну і все слідкуйте за публікаціями кому цікаво, в наступній  мова піде про мета дані. До зустрічі з повагою Руслнан.
Сьогодні у нас: 21-11-2017

3 Responses to Базова структура документа HTML

  • quez says:

    Скрипти варто поміщати в кінець сторінки, як це зробили автори цієї сторінки, в чому ви можете переконатись, натиснувши ctrl+u.

    [Відповісти]

    Ruslan Reply:

    Можливо але мова йшла не про те куда іх варто поміщати, а про те яку інформацію містить елемент HEAD.
    а знизу шорткод
    Дякую за коментар, розвеселили. 🙄 “Скрипти варто поміщати в кінець сторінки” 😆 – молоток, шариш 😀

    [Відповісти]

    Ruslan Reply:

    Зразу не зрозумів, що ви мали на увазі, знизу сторінки я сам його розмістив,
    а міг і в сайдбар, можна і в HEAD як говориться “хазяин барин” все залежить яку функцію виконує скрипт,
    рекламний візьмем в підвалі-ж не будете розміщувати. Тому куда варто розміщувати питання спірне.

    [Відповісти]

Leave a Reply

Your email address will not be published. Required fields are marked *