Блоґ одного кібера

Історія хвороби контуженого інформаційним вибухом

Структура сторінки

leave a comment »

попередній розділ
Зміст
Наступний розділ

До роботи!

Найкращий спосіб навчитись щось робити – зробити це. Не вийде – вчитись далі. А вийде – значить ви вже навчились. 🙂

Для того щоб вивчити HTML, окрім читання цієї статті нам потрібно:

  1. Комп’ютер
  2. Браузер
  3. Текстовий редактор

Раз ви читаєте цей текст, дві попередні речі в вас точно є. Текстовий редактор також є на кожному комп’ютері. Важливо зауважити: нам потрібна програма для редагування текстових файлів, а не документів. Зазвичай стандартного “Блокнота” Windows достатньо, але є текстові редактори, які краще пристосовані до написання HTML сторінок. В даний момент користуюсь Notepad++ -редактором, в якому добре писати не тільки HTML,а і CSS, PHP, C++, і ще кілька десятків інших мов. В ньому є така хороша річ, як підсвітка синтаксису, яка дозволяє виявляти помилки прямо під час їх створення :).

Про браузер також варто сказати дещо. Всі радять тримати в себе на комп’ютері набір браузерів: IE, Firefox, Opera, Chrome, і переглядати свої сторінки у всіх зразу. Але я не знаю ні одної людини яка так робить. Тому не думаю що щось серйозне станеться якщо обійдемось одним-двома. Ну ІЕ думаю є в кожного користувача пропрієтарних продуктів, і може ще якийсь інший улюблений браузер.

Щоб створити веб-сторінку, потрібно створити в файловій системі текстовий файл з розширенням html, або htm. Яке з них вибрати – філософське питання. htm – скорочення від html, що є доволі смішним фактом, оскільки html це теж скорочення. Але були часи, коли розширення файлу могло містити максимум 3 символи, і сторінки гіпертексту мали розширення htm. Тепер можна використовувати обидва розширення. Я користуюся коротшим, бо воно коротше :). Оце і все.

Вміст веб-сторінки

Веб-сторінки складаються з гіпертексту. Гіпертекст відрізняється від звичайного тексту тим, що містить гіперпосилання. Вони зазвичай позначені підкресленням і синім кольором, і дозволяють зробити гіперстрибок в інший всесвіт гіпертекст, чи будь-яке інше місце, вказане за допомогою URL. Гіпертекст складається з тегів.

URL (Universal Resource Locator) – адреса ресурсу, яку ми бачимо в адресному рядку браузера.

Тег – все що знаходиться між кутніми дужками. Наприклад <html>.Теги не відображаються браузером, вони лише задають структуру тексту. Теги бувають трьох видів: відкриваючі, закриваючі і одинарні. Вікриваючі і закриваючі теги завжди ходять парами. Закриваючий відрізняєтся від відкриваючого тим, що після знаку менше< стоїть знак слеш (чи ділення) “/”. Пара закриваючого і відкриваючого тега виглядає так: <html> </html>. Одинарні теги – річ суперечлива, і я їх розгляну пізніше

Важливо знати, що починаючи з версії 4.01 всі теги мають бути написані маленькими буквами.

Елемент гіпертексту – це все що знаходиться між відкриваючим і закриваючим тегом. Елементи бувають вкладені.

Наведу приклад коду веб-сторінки

<html>
	<head>
		<!-- Заголовочна інформація, наприклад: -->
		<title>Назва сторінки (відображається в рядку заголовку браузера)</title>
	</head>
	<body>
		Вміст сторінки.
	</body>
</html>

Всі теги які зустрічаються вище є обов’язковими. Вони присутні в кожній сторінці в інтернеті. Звісно, якщо ви якийсь із них забудете, браузер якось розбереться, але всі серйозні люди такі речі не забувають. Тег html каже браузеру що в ньому міститься код HTML. Тег head, каже що в ньому міститься заголовочна інформація сторінки. Ця інформація на самій сторінці не відображається. Тег title, як вже було сказано містить заголовок, який відобразиться в рядку заголовку. body містить тіло, або вміст сторінки.

Окрім тегів і тексту, гіпертекстові сторінки можуть містити коментарі. Коментарі виглядають так: <!-- Коментар -->. Вони дозволяють писати на сторінці текст, який не відображається браузером. Це потрібно, для вставки повідомлень типу <!-- Тут не забути дописати абзац про коментарі -->.

Ще існує поняття спеціальних символів. Наприклад ви напишете таку сторінку:

<html>
	<head>
		<title>З чого починається сторінка</title>
	</head>
	<body>
		Кожна сторінка HTML починається з тегу <html>.
	</body>
</html>

Така сторінка відобразиться браузером неправильно, через те, що браузер не виводить теги. А html – тег. Така сама проблема і з символами порівняння. Тому, щоб відображати деякі нестандартні символи, існує поняття спеціальних символів. Спеціальні символи в HTML описуються так: &код;. Наприклад:

Назва Код Вигляд
Менше &lt; <
Більше &gt; >
Амперсанд &amp; &

Тут я вказав тільки най-найпотрібніші. Якщо вам потрібно більше вам треба пошукати. Можна пошукати десь тут. Тобто те що ми хотіли описати в попередньому прикладі мало виглядати так:

<html>
	<head>
		<title>З чого починається сторінка</title>
	</head>
	<body>
		Кожна сторінка HTML починається з тегу &lt;html&gt;.
	</body>
</html>

Теги форматування.

Тепер перейдем до форматування тексту. Форматування задає не так зовнішній вигляд, як структуру сторінки. Найважливішими тегами форматування є абзаци (англ. paragraf) і заголовки (англ. header). Заголовки бувають шести рівнів. Заголовки першого рівня найголовніші і найбільші, а заголовки шостого рівня навіть менші ніж текст абзаців. Нижче приклад використання заголовків:

<html>
	<head>
		<title>Володар перстенів</title>
	</head>
	<body>
<h2>Пролог</h2>
<h3>Про гобітів</h3>
У цій книзі йтиметься здебільшого про гобітів, і з її сторінок читач довідається чимало про їхню ...і т. д.
<h1>БРАТСТВО ПЕРСНЯ</h1>
<h2>КНИГА ПЕРША</h2>
<h3>I Довгоочікувана гостина</h3>
<h3>  ...і т. д.</h3>
<h3>XII Втеча до броду</h3>
<h2>КНИГА ДРУГА</h2>
<h3>  ...і т. д.</h3>
</body>
</html>

Я тут пишу і пишу приклади. Не забувайте пробувати щось самі!

Тепер ще один маленький приклад, який стосується форматування:

<html>
	<head>
		<title>Вдаряй мечем</title>
	</head>
	<body>
			Вдаряй мечем,
			Вдаряй, вдаряй,

			Великий Комтуре Закона,

			Щоб з нього честь
			Була для нас,

			А для Вкраїни оборона!
	</body>
</html>

На жаль, браузери відкидають всі символи переносу рядка, табуляції, і навіть зайві пропуски. Тому цей віршик відобразиться в один, або кілька рядків (залежно від ширини вікна). Але є вихід.

Можна кожен рядок вірша помістити в окремий абзац. Щоправда зазвичай між абзацами великі білі поля. Тому можна використати одинарний тег <br /&rt;. Цей тег означає перехід на новий рядок, тобто обрив (BReak) старого.

Тут варто вставити зауваження. Всі теги ходять парами відкриваючий – закриваючий. Між ними містяться елементи гіпертексту. Але, в тег обриву рядка не містить нічого. Тому він пари і не має. Але, найновіші стандарти вимагають, щоб всі теги закривалися. Щоправда врахувавши наявність тегів подібних до br, придумали скорочену форму запису. Він ніби відкривається, а потім зразу закривається. Це здається досить дивним. Звісно можна писати і в старому форматі: <br&rt;. Але краще мати код, який відповідає найновішим стандартам.

І ще один спосіб – взяти увесь вірш в теги <pre></pre>.Увесь текст поміщений між цими тегами відображається точно так само як його видно в редакторі. Правда цей тег також змінює шрифт тексту на якийсь моноширинний. Але зате ми можемо робити з текстом цікаві речі:

<html>
	<head>
		<title>Long Tail</title>
	</head>
	<body>

It is a long tail, certainly,' said Alice, looking down with wonder at the Mouse's tail' `but why do you call it sad?' And she kept on puzzling about it while the Mouse was speaking, so that her idea of the tale was something like this:--
<pre>
                    `Fury said to a
                   mouse, That he
                 met in the
               house,
            "Let us
              both go to
                law:  I will
                  prosecute
                    YOU.  --Come,
                       I'll take no
                        denial; We
                     must have a
                 trial:  For
              really this
           morning I've
          nothing
         to do."
           Said the
             mouse to the
               cur, "Such
                 a trial,
                   dear Sir,
                         With
                     no jury
                  or judge,
                would be
              wasting
             our
              breath."
               "I'll be
                 judge, I'll
                   be jury,"
                         Said
                    cunning
                      old Fury:
                     "I'll
                      try the
                         whole
                          cause,
                             and
                        condemn
                       you
                      to
                       death."</pre>
</body>
</html>

Ще трохи про теги зміни шрифту. Шрифт може мати три додаткові атрибути жирність (bold), курсивність (italic) і підкреслення (underlined). Вони змінюються за допомогою тегів: <b> <i> і <u> відповідно.

Правда замість тегу <b> рекомендують використовувати тег <strong>. Окрім того існує ще така властивість як викресленість. Колись вона задавалася тегом <s>, що означало strikeout. Але знову ж таки в сучасному світі слова не викреслюють, їх видаляють, тому в порядку модернізації використовують тег <del>

Школа w3 навпроти тегів <u>,<s> і <strike> пише “deprecated”. Що в перекладі означає: “сильно заперечувати, виступати проти, протестувати”. Хто протестує не сказано, але скоріше за все Консорціум трьох дубльве. Замість тегів викреслення рекомендують використовувати тег видалення. А замість тегу підкреслювання – стилі.

Крім тегу видалення ввели тег вставки. Тег вставки вказує текст який вставили після видалення. Виглядає така річ приблизно так:

2 + 2 = <del>5</del> <ins>4</ins>

При чому текст в тезі <ins> буде підкреслений. (А хлопці з w3schools казали використовувати стилі. Хм.)

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

Тег Опис
b Задає жирний текст
big Задає великий текст
em Задає наголошений текст. (empharized)
i Задає курсивний текст
small Задає маленький текст
strong Задає сильний текст. Виглядає майже так само, як і жирний
sub Задає текст в нижньому індексі
sup Задає текст в верхньому індексі
ins Задає текст, який вставляється після видалення. Зазвичай підкреслений.
del Задає текст, який видалений (виглядає викресленим)
code Задає текст, який представляє комп’ютерний код.
kbd Задає текст, який введений з клавіатури.
tt Задає текст, який виглядає так, ніби введений з телетайпа. (Моноширинний шрифт)
samp Задає текст, який є прикладом. (sample). Майже як приклади в цьому тексті.
var Задає текст, який представляє змінну. Напевне для всяких наукових статтей
pre Задає текст, який зберігає всі символи форматування, такі як табуляції, пробіли, і переноси рядків.
abbr Задає текст абревіатури. В атрибуті title можна записати розшифрування.
acronym Задає текст акроніму. Акронім і абревіатура – це одне і те саме.
address Задає текст адреси. Відображається курсивом
bdo Дуже веселий тег. Для тих хто пише давньоєврейською. В в атрибуті dir можна задати напрямки тексту. “rtl” – з права на ліво, “ltr” – нормально
blockquote Задає текст великої цитати.
q Задає текст маленької цитати.
cite Задає текст якоїсь класичної цитати. Щось на зразок “Хто ясно мислить, той ясно формулює”
dfn Задає термін для якого буде дане визначення. (definition)

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

Наступний розділ
Зміст
попередній розділ

Advertisements

Written by bunyk

Січень 28, 2009 at 18:15

Оприлюднено в Кодерство, Павутина, Розмітка

Tagged with

Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s

%d блогерам подобається це: