Власне, поява html і ознаменувало появу інтернету в тому вигляді, в якому ми його знаємо зараз, привівши до початку бурхливого зростання мережі й кількості сайтів в ній. HTML - це скорочення від англ. "HyperText Markup Language", що в перекладі на російську означає "мова гіпертекстової розмітки". HTML - це стандартна мова, який і до цього дня використовується для створення веб-сторінок, що розміщуються в інтернеті.
Спочатку в основі HTML лежала одна проста ідея. Ця ідея полягала в тому, щоб внести в звичайні текстові документи, які люди читали на екрані монітора, просто прокручуючи або перегортаючи сторінки, як у книжці, можливість додавання посилань, переходячи за якими, людина могла відразу перескочити на іншу сторінку або в інше місце тексту , якщо дане посилання його зацікавила. Можливість додавання в своєму тексті посилань на інші сторінки, в поєднанні з що ще до того часу механізмом завдання адреси для будь-якої сторінки, викладеної в мережі (який відомий як URL) і призвела до того, що почала формуватися взаємопов'язана мережа сайтів, що втілилася в той інтернет, який ми маємо зараз.
Початковий HTML був дуже простим. Крім можливостей для вставляння посилань в ньому існували кошти лише для простого форматування тексту. Зайшовши на сайт lib.ru , найбільшої бібліотеки Рунета, дизайн якого майже не змінювався ще з середини 90-х, ви можете скласти приблизне уявлення про те, як виглядали перші сайти. Однак стандартні можливості HTML скоро перестали влаштовувати користувачів мережі, і зараз мова HTML, в поєднанні зі своїми розширеннями надає дуже великі можливості для красивого і функціонального оформлення сайтів.
Основним елементом мови HTML є теги. Тег - це, як правило, парна конструкція, призначена для завдання властивостей тексту або іншої інформації, розташованої усередині нього. Наприклад, якщо в html-документі ми напишемо:
"На території Німеччини був знайдений невідомий науці вид ракоскорпіонів - <em> Jaekelopterus rhenaniae </ em>",
то це буде зазначенням для програми-браузера, що відповідає за правильне відображення сторінки, вивести назва виду ракоскорпіонів "Jaekelopterus rhenaniae" курсивом, т. е. весь текст при відображенні в браузері буде виглядати так:
На території Німеччини був знайдений невідомий науці вид ракоскорпіонів - Jaekelopterus rhenaniae
Крім тега <em>, що відповідає за відображення похилого тексту, у мові HTML існує ще дуже велика кількість тегів, призначених для самих різних цілей. Використовуючи ці теги, ми можемо вручну, за допомогою простого текстового редактора, такого, як, наприклад, вбудований в Windows "Блокнот", створити веб-сторінку, придатну для розміщення в інтернеті і перегляду в браузері. Проте в даний час існують спеціальні програми - візуальні редактори веб-сторінок, за допомогою яких створювати окремі сторінки і цілі сайти значно швидше і зручніше. Найбільш відомою програмою із спектру візуальних редакторів веб-сторінок є Dreamweaver фірми Adobe (див. Також свіжий огляд візуальних html-редакторів ). Все ж, хоча за допомогою візуального редактора редагувати веб-сторінку значно простіше, для цього веб-майстра знання мови HTML є необхідним - навіть кращі візуальні реадктори не завжди правильно чи оптимально вставляють теги в html-код, і, в таких випадках, без ручного його виправлення не обійтися.
Важливим доповненням до мови HTML є стандарти CSS (каскадних таблиць стилів), які були розроблені в кінці 90-х. Що таке CSS? У стандартному мовою HTML можна за допомогою тегів задавати різне оформлення тексту, наприклад, колір, розмір, тип шрифту і т. Д. Якщо даних параметрів багато, і вони часто використовуються на сторінці, то нам щоразу для кожного фрагмента тексту доведеться знову і знову задавати ці параметри. Ще гірші справи, якщо у нас сайт складається з багатьох сторінок, і одні й ті ж варіанти оформлення тексту використовуються багато разів у різних місцях. Для того, щоб зробити оформлення сторінок більш зручним, було введено поняття стилю, під яким стали розуміти поєднання різних параметрів оформлення тексту (або інших елементів на веб-сторінці). Для кожного стилю набір параметрів задається одноразово, при цьому опис стилю може зберігатися в окремому файлі (з розширенням css), а скрізь, де даний стиль потрібно використовувати, ставиться лише один тег із зазначенням, що для оформлення блоку тексту або інших елементів веб-сторінки потрібно використовувати такий-то стиль. Наприклад, якщо ми хочемо використовувати великий жирний текст, виділений червоним кольором, замість того, щоб кожен раз писати в тексті веб-сторінки потрібний для цього набір html-тегів:
<Font color = "red" size = "+ 1"> <strong> Увага! </ Strong> </ font>
ми можемо зробити наступне - описати спеціальний стиль "redstyle":
.redstyle {
font-size: larger;
font-weight: bold;
color: red;
}
і потім в потрібному місці вказати всього один тег, в атрибутах якого пропишемо потрібний нам стиль, наприклад:
<Span class = "redstyle"> Увага! </ Span>
Результат буде один і той же:
Увага!
але, у другому випадку, нам буде простіше багаторазово застосовувати один і той же оформлення і, що важливо, якщо ми раптом захочемо змінити потім це вже зроблене оформлення, помінявши, наприклад, колір тексту, то для цього нам достатньо буде змінити опис стилю всього в одному місці, а не редагувати безліч тегів по всіх простору однієї (а, тим більше, кількох) сторінок. Ну і, нарешті, на додаток до зручності, кошти CSS надають розширені можливості для оформлення сторінок в порівнянні зі звичайними html-тегами.
Найчастіше, як уже писалося в попередній оглядовій статті з веб-дизайну, створення сайту починається не в візуальному редакторі веб-сторінок (ну або з ручного написання html-коду), а з створення дизайну для цього сайту. В цьому випадку створення html-сторінки і розміщення на ній блоків тексту та елементів графічного оформлення - малюнків, анімації і т. Д. (Подібний процес називається версткою) буде вже другим етапом. Верстка сайту, що має складний дизайн, може бути досить непростим і виснажливим процесом. Завдань забезпечити правильне гарне розташування на сторінці блоків тексту і графіки ускладнюється необхідністю враховувати можливість того, що ця сторінка буде проглядатися користувачі на різних моніторах з різним дозволом екрану і в різних браузерах, які мають свої особливості відображення вмісту веб-сторінок. В цілому до побудови (більш-менш складних) веб-сторінок існують два різних підходи - це верстка за допомогою таблиць, в осередку яких поміщається вміст, та верстка за допомогою тегів <div>, який дозволяє вказувати у своїх атрибутах довільне розташування і розмір блоку , в якому буде міститися його вміст. Кожен з цих підходів має свої плюси і мінуси, і між прихильниками того чи іншого методу неминуче виникають суперечки про те, який з них більш зручний і більш правильний. В цілому, верстка за допомогою таблиць є історично більш раннім методом побудови сайтів і більш зручна в тих випадках, коли потрібно забезпечити "резиновость" дизайну і зробити так, щоб розміри блоків на сторінці автоматично підбудовувалися під їх вміст і розміри екрану, верстка за допомогою тегів <div> набула поширення щодо пізніше і оптимально підходить тоді, коли сайт має фіксований дизайн.
Спочатку в основі HTML лежала одна проста ідея. Ця ідея полягала в тому, щоб внести в звичайні текстові документи, які люди читали на екрані монітора, просто прокручуючи або перегортаючи сторінки, як у книжці, можливість додавання посилань, переходячи за якими, людина могла відразу перескочити на іншу сторінку або в інше місце тексту , якщо дане посилання його зацікавила. Можливість додавання в своєму тексті посилань на інші сторінки, в поєднанні з що ще до того часу механізмом завдання адреси для будь-якої сторінки, викладеної в мережі (який відомий як URL) і призвела до того, що почала формуватися взаємопов'язана мережа сайтів, що втілилася в той інтернет, який ми маємо зараз.
Початковий HTML був дуже простим. Крім можливостей для вставляння посилань в ньому існували кошти лише для простого форматування тексту. Зайшовши на сайт lib.ru , найбільшої бібліотеки Рунета, дизайн якого майже не змінювався ще з середини 90-х, ви можете скласти приблизне уявлення про те, як виглядали перші сайти. Однак стандартні можливості HTML скоро перестали влаштовувати користувачів мережі, і зараз мова HTML, в поєднанні зі своїми розширеннями надає дуже великі можливості для красивого і функціонального оформлення сайтів.
Основним елементом мови HTML є теги. Тег - це, як правило, парна конструкція, призначена для завдання властивостей тексту або іншої інформації, розташованої усередині нього. Наприклад, якщо в html-документі ми напишемо:
"На території Німеччини був знайдений невідомий науці вид ракоскорпіонів - <em> Jaekelopterus rhenaniae </ em>",
то це буде зазначенням для програми-браузера, що відповідає за правильне відображення сторінки, вивести назва виду ракоскорпіонів "Jaekelopterus rhenaniae" курсивом, т. е. весь текст при відображенні в браузері буде виглядати так:
На території Німеччини був знайдений невідомий науці вид ракоскорпіонів - Jaekelopterus rhenaniae
Крім тега <em>, що відповідає за відображення похилого тексту, у мові HTML існує ще дуже велика кількість тегів, призначених для самих різних цілей. Використовуючи ці теги, ми можемо вручну, за допомогою простого текстового редактора, такого, як, наприклад, вбудований в Windows "Блокнот", створити веб-сторінку, придатну для розміщення в інтернеті і перегляду в браузері. Проте в даний час існують спеціальні програми - візуальні редактори веб-сторінок, за допомогою яких створювати окремі сторінки і цілі сайти значно швидше і зручніше. Найбільш відомою програмою із спектру візуальних редакторів веб-сторінок є Dreamweaver фірми Adobe (див. Також свіжий огляд візуальних html-редакторів ). Все ж, хоча за допомогою візуального редактора редагувати веб-сторінку значно простіше, для цього веб-майстра знання мови HTML є необхідним - навіть кращі візуальні реадктори не завжди правильно чи оптимально вставляють теги в html-код, і, в таких випадках, без ручного його виправлення не обійтися.
Важливим доповненням до мови HTML є стандарти CSS (каскадних таблиць стилів), які були розроблені в кінці 90-х. Що таке CSS? У стандартному мовою HTML можна за допомогою тегів задавати різне оформлення тексту, наприклад, колір, розмір, тип шрифту і т. Д. Якщо даних параметрів багато, і вони часто використовуються на сторінці, то нам щоразу для кожного фрагмента тексту доведеться знову і знову задавати ці параметри. Ще гірші справи, якщо у нас сайт складається з багатьох сторінок, і одні й ті ж варіанти оформлення тексту використовуються багато разів у різних місцях. Для того, щоб зробити оформлення сторінок більш зручним, було введено поняття стилю, під яким стали розуміти поєднання різних параметрів оформлення тексту (або інших елементів на веб-сторінці). Для кожного стилю набір параметрів задається одноразово, при цьому опис стилю може зберігатися в окремому файлі (з розширенням css), а скрізь, де даний стиль потрібно використовувати, ставиться лише один тег із зазначенням, що для оформлення блоку тексту або інших елементів веб-сторінки потрібно використовувати такий-то стиль. Наприклад, якщо ми хочемо використовувати великий жирний текст, виділений червоним кольором, замість того, щоб кожен раз писати в тексті веб-сторінки потрібний для цього набір html-тегів:
<Font color = "red" size = "+ 1"> <strong> Увага! </ Strong> </ font>
ми можемо зробити наступне - описати спеціальний стиль "redstyle":
.redstyle {
font-size: larger;
font-weight: bold;
color: red;
}
і потім в потрібному місці вказати всього один тег, в атрибутах якого пропишемо потрібний нам стиль, наприклад:
<Span class = "redstyle"> Увага! </ Span>
Результат буде один і той же:
Увага!
але, у другому випадку, нам буде простіше багаторазово застосовувати один і той же оформлення і, що важливо, якщо ми раптом захочемо змінити потім це вже зроблене оформлення, помінявши, наприклад, колір тексту, то для цього нам достатньо буде змінити опис стилю всього в одному місці, а не редагувати безліч тегів по всіх простору однієї (а, тим більше, кількох) сторінок. Ну і, нарешті, на додаток до зручності, кошти CSS надають розширені можливості для оформлення сторінок в порівнянні зі звичайними html-тегами.
Найчастіше, як уже писалося в попередній оглядовій статті з веб-дизайну, створення сайту починається не в візуальному редакторі веб-сторінок (ну або з ручного написання html-коду), а з створення дизайну для цього сайту. В цьому випадку створення html-сторінки і розміщення на ній блоків тексту та елементів графічного оформлення - малюнків, анімації і т. Д. (Подібний процес називається версткою) буде вже другим етапом. Верстка сайту, що має складний дизайн, може бути досить непростим і виснажливим процесом. Завдань забезпечити правильне гарне розташування на сторінці блоків тексту і графіки ускладнюється необхідністю враховувати можливість того, що ця сторінка буде проглядатися користувачі на різних моніторах з різним дозволом екрану і в різних браузерах, які мають свої особливості відображення вмісту веб-сторінок. В цілому до побудови (більш-менш складних) веб-сторінок існують два різних підходи - це верстка за допомогою таблиць, в осередку яких поміщається вміст, та верстка за допомогою тегів <div>, який дозволяє вказувати у своїх атрибутах довільне розташування і розмір блоку , в якому буде міститися його вміст. Кожен з цих підходів має свої плюси і мінуси, і між прихильниками того чи іншого методу неминуче виникають суперечки про те, який з них більш зручний і більш правильний. В цілому, верстка за допомогою таблиць є історично більш раннім методом побудови сайтів і більш зручна в тих випадках, коли потрібно забезпечити "резиновость" дизайну і зробити так, щоб розміри блоків на сторінці автоматично підбудовувалися під їх вміст і розміри екрану, верстка за допомогою тегів <div> набула поширення щодо пізніше і оптимально підходить тоді, коли сайт має фіксований дизайн.
No comments:
Post a Comment