Напевно, кожен безробітний користувач інтернету стикався з ситуацією, коли при заході на красивий сайт ви думали про те, що було б якщо такий сайт створили б ви, адже маючи хороший сайт будуть і гроші і може бути навіть слава. У вас з'являлося бажання і прагнення цього, ви відразу набираєте в пошуковій системі «Як створити сайт?». Майже скрізь вам скажуть, щоб створити добрий сайт, потрібно вивчити HTML. Якщо ви новачок у цій справі, то ви напевно захочете дізнатися, що ж це таке.
Я коротко поясню вам що таке HTML своїми, більш зрозумілими словами, ніж у Вікіпедії.
HTML – це основна мова веб-програмування, основа всіх основ сайтобудування. Майже всі сайти написані цією мовою. Розмір тексту на сайті, розмір та розташування картинки, фон сайту і т.п. все це написано цією мовою. Мова HTML - це те, з чим народилися сайти, тобто це рідна мова багатьох веб-сторінок. Наприклад, якщо ви китаєць, то розмовляєте китайською мовою, якщо ви українець, то розмовляєте українською мовою, але якщо ви сайт, то ви розмовляєте мовою HTML. Кожен хороший веб-програміст знає HTML майже напам'ять і добре товаришує з ним.
Ця мова зрозуміла, легка у вивченні, але як і всі мови у цьому світі, щоб їм добре володіти, він вимагає практики. Тобто навіть якщо ви вивчите його повністю, відразу зробити хороший сайт не вийде, потрібен час, терпіння і практика. Зазвичай, новачкам на початку шляху веб-програміста просто не вистачає терпіння все вивчити та покроково практикуватися у цій справі. Тих, хто витримав випробування, все вивчив, отримав досвід у своїй практиці при вивченні мови і не здався – чекає гарна нагорода.
Є кілька мов веб-програмування. Для створення простенького сайту вам вистачить і однієї мови, основної, а саме HTML. Для будови ж складного і великого сайту, вам знадобляться допоміжні мови, про них ви дізнаєтеся вже за або після вивчення мови HTML. Якщо ви все ж таки вирішили почати шлях веб-програміста, то можете почати вивчення HTML прямо зараз. Пам'ятайте найголовніше - якщо взялися, то не здавайтеся і не кидайте цю справу, тому що це і губить більшість програмістів.
Ці чотири літери HTML розшифровуються кількома словами, а саме Hyper Text Mark-up Language, що російською мовою звучить як мова гіпертекстової розмітки.
Навіщо потрібний HTMLНавіщо потрібна ця мова? Навіщо його вчити? Чому не якийсь інший? Або навіщо взагалі його вчити, якщо є купа інших програм для простого створення сайту?
Як я й казав, HTML це основна мова веб-програмування. Він не єдина мова, яка використовується для створення сайтів, але це як головний інструмент, який керує іншими мовами, тому його потрібно вивчати обов'язково. Навіть якщо ви використовуєте програму для створення сайту або готові шаблони, HTML значно спростить вам життя. Тим більше, якщо ви хочете створити в майбутньому хороший, великий і професійний сайт, програми та шаблони вам не допоможуть, все починатиметься з нуля і в цьому вам допоможуть ваші знання цієї мови.
Як використовувати HTMLВикористовувати цю мову дуже легко і доступно всім. Його можна використовувати навіть у звичайному блокноті (.txt). Для зручнішого використання є спеціальні програми, наприклад Notepad++. Докладніше про використання цієї мови буде описано в уроках HTML.
Як вивчити HTMLЩоб вивчити мову HTML, необхідно запастися не мінімальним терпінням, щоб освоїться у цій мові. Вчиться він легко, але головне напрацювати досвід, практикуватися, чим більше у вас практики, тим краще веб-програміст.
На кожному сайті різний зовнішній вигляд та функціонал, але з чим це пов'язано і якою мовою прописується сторінка? Для всього цього використовуються каскадні таблиці стилів та мова HTML. Ви можете самі поглянути на код цієї мови, якщо проінспектуєте об'єкти у браузері. Саме про те, що таке мову HTML ми поговоримо в цій статті.
Наша стаття орієнтована переважно на новачків, тому сподіваємося на розуміння постійних читачів блогу!
Пост буде розбитий на такі пункти:
Що таке HTML сторінкаМова розмітки під назвою HTML використовують для оформлення всіх елементів сторінки, у тому числі таблиць, зображень та тексту. Ви можете ознайомитися з кодом і спробувати його вникнути, якщо використовуєте будь-який сучасний браузер, просто натисніть правою кнопкою мишки на сторінці і в меню натисніть на рядок «вихідний код сторінки» або «HTML код». Після цього ви побачите щось на кшталт редактора, в якому багато незрозумілих написів та символів, саме це код мови HTML.
Кожен документ WWW має форматований та красиво оформлений текст, а також гіперпосилання та зображення, які підбирає власник сайту. Для того, щоб проводити роботу з даними елементами, програмісти створили мову під назвою HTML (Hyper Text Markup Language), що в перекладі означає мову розмітки гіпертексту. Кожен браузер по-своєму працює та відображає мову HTML, тому у різних браузерах він відображається по-різному, особливо у старих версіях Internet Explorer.
Усі документи HTML схожі – це стандартний текстовий файл, який має теги розмітки цієї мови разом із текстами, які читатимуть відвідувачі сайту. За допомогою тегів створюється сторінка і саме їх зчитує браузер, коли завантажує її. Завдяки визначенню тегів та їх оформленню можна розмістити статтю чи інший матеріал у певному місці сторінки, додати графічні файли та фотографії, а також гіперпосилання на інші сторінки сайту. Спочатку HTML файл не є web-документом, він ним стає лише після зчитування браузером.
Очевидно, у стандартного HTML коду є свої недоліки і мінуси. Доведеться сильно постаратися, щоб розмістити абзаци з текстом на сторінці, адже для проведення розмітки та решти потрібно прописувати ті чи інші властивості для всього тексту, причому для кожного окремого абзацу. Якщо на вашому сайті 50 сторінок і на кожній по 10-20 абзаців – доведеться дуже довго оформляти текст, причому щоразу вставляти ті самі теги. Це не тільки стомлює власника сайту, а й негативно позначається на вазі сторінок сайту. Саме тому надалі створили каскадні таблиці стилів, їх коротко називають CSS, що означає Cascading Style Sheets, завдяки ним можна швидко оформити текст. Можна призначити один тег і задати йому певні характеристики, наприклад колір тексту, розмір, шрифт і так далі, а потім застосувати до абзаців. При цьому файл із таблицею стилів зберігається окремо, його можна завантажити на один сайт або відразу на кілька. Далі прописуються основні елементи сторінки на HTML, і вставляється текст, а потім підключається CSS і весь текст набуває потрібного вам оформлення. Також завдяки цьому знижується вага сторінок, що дуже важливо. 
Використання CSS є доцільним, якщо на сайті дуже багато сторінок, які будуть мати однакове оформлення. Ви можете задати певне форматування тексту для всіх абзаців, якщо пропишете кілька рядків у документі з кодом CSS. Під час створення сайту верстальники створюють основний макет HTML, орієнтуючись на макет, створений у Photoshop. Але після цього сайт виглядає незакінченим, потрібно створити привабливий зовнішній вигляд, і досягається це каскадними таблицями стилів. Навчитися цьому нескладно, якщо у вас багато вільного часу, оскільки загальний вигляд у всіх сайтів приблизно однаковий, ви можете мати один макет з кількома блоками і «підганяти» під нього інші сайти. Як правило, каскадні таблиці стилів значно складніші за CSS, ще складніше верстати сайт на блоках, а не на таблицях. До того ж, на початкових етапах ви можете зіткнутися з такою проблемою, як різне відображення сайту в браузерах. Саме для того, щоб не гаяти час і заробляти на сайтах, створено CMS – готові макети сайтів, які можуть бути безкоштовними або платними та мати певну систему управління.
Що таке HTML5. Відмінності та перевагиНовий стандарт HTML5 допомагає власникам сайтів та знімає з них обов'язок використання формату Adobe Flash та інших програм. Завдяки цьому стандарту можна змінити відображення тексту на сторінках та спростити введення інформації під час заповнення електронних формулярів. Якщо розділити всі нововведення цієї мови, можна виділити такі пункты:
Якщо залишилися питання – пишіть їх у коментарях, ми із задоволенням на них відповімо!
Основи html для початківців, що зараз повинен знати кожен вебмастер-початківець або блогер. Якщо ви хочете навчитися створювати елементарні сайти, розуміти сам код, знати, що за чим стоїть і має йти, без знань основ мови цього зробити просто неможливо. На своєму блозі у мене буде цілий ланцюжок статей, які я присвячую цій темі від А до Я, опишу кожен тег, який є у документі, що він позначає і як його правильно використовувати.
Основи хтмлЯкщо не знати найпростішого, далі вам шлях закритий. Я вважаю, що кожна людина, яка вирішила займатися розробкою та створенням сайтів, має знати та розуміти основи, з чого складається сам сайт, як він працює і що відбувається у самому коді.
Мов програмування звичайно багато, всі вони по-своєму складні, але є такі, які потрібно знати обов'язково. Якщо ви хочете красиво оформити листа для відправки поштою, у вас є своя група Вконтакте, група в інших соціальних мережах, той же канал youtube, вам необхідно длубатися в коді на будь-якому з движків сайту, базові поняття ви просто повинні знати.
Навів лише кілька прикладів, насправді зараз ці знання дедалі частіше застосовуються в інтернеті. Я більше практик, ніж теоретик, тому в моїх статтях у даній рубриці я показуватиму вам свої приклади, як і що я робив, step by step. Викладатиму як приклади сторінок, так і цілі сайти.
Html документ це найпростіший текстовий документ, мова тегів, з якою ви стикаєтеся щодня на просторах інтернету. Теги описують структуру документа. Оформлюються теги кутовими< >дужками, усередині яких пишеться назва тега. Браузер переглядає структуру документа, вибудовує її та відображає вже за своїми інструкціями на вашому моніторі, якщо ви звичайно все зробили правильно.
Весь цей процес починається перед тим, як ви вже бачите готове зображення. Браузери обробляють документ послідовно, від початку і остаточно. Включаючи повністю все, що має бути на сторінці. Таблиці, картинки, скрипти і так далі, крім це включаючи стилі CSS.
Основи для початківцівЩо таке html - якщо подивитися, що пише Вікіпедія - (HyperText Markup Language)мова гіпертекстової розмітки документів. Більшість сторінок в Інтернеті містять розмітку сторінки цією мовою. Ця мова інтерпретується браузерами, отриманий в результаті форматований текст відображається на моніторі комп'ютера або мобільного пристрою.
Ця мова за своєю суттю дуже легка і доступна в навчанні. Вивчити та зрозуміти його основи може кожна охоча людина. Для використання такої мови потрібно знати та застосовувати дескриптори, які ще називаються тегами. Саме за допомогою тегів створюється документ.
З чого має складатися структура документа, які теги мають бути присутніми. Давайте розберемо все на одному маленькому прикладі. Я написав деякий текст у MS Office і показав його на цьому скріншоті.
Щоб відобразити цей текст у браузері так само, як він був написаний у документі, для цього потрібно до нього додати розмітку сторінку, яка включає деякі теги. Спочатку подивіться на них, далі я опишу кожен, хто за що відповідає.
Ласкаво просимо на мій блог, зараз ви проходите урок з Основ HTML. Якщо вам сподобалася ця стаття, можете підписатися на цей блог, щоб отримувати нові статті на свою електронну скриньку.
Блог Євгена Несмелова! сайт Основи html та css для початківцівЗ яких тегів складається будь-який HTML документ, що в нього входить і де все це потрібно прописати.
< html > < body > < h2 >< / h2 > < p >Ласкаво просимо на мій блог, зараз виходьте урок по Основ HTML. Якщо вам сподобалася дана стаття, можете підписатися на даний блог, щоб отримати нові статті і свою електронну скриньку.< / p > < h2 >Блог Євгенія Несмелова! Несмелов . jw.org uk Основиhtml іcss для початківців< / h2 > < / body > < / html > |
Будь-який код складається із символів, які поміщаються у кутові дужки. Усе це називається елементами. Всі елементи, як правило, складаються з двох тегів, що відкриває і закриває. Раджу вам спочатку уважно стежити за тегами, якщо ви пропустите один з них і не закриєте його, вам потрібно буде переглядати більші частини коду, щоб знайти помилку.
Були випадки, коли на це йшов не один день, людина звертається і просить їй допомогти, вона не може знайти у себе помилку на сайті, тому завжди дивіться дуже уважно, що і де ви пишете. Давайте тепер на даному прикладі подивимося на кожен елемент із коду, що в ньому написано, що це означає і що виходить у результаті.
Більшість тегів парні, які включають тег, що відкривається і закривається. Крім таких тегів, існують ще одиночні теги. Теги можуть бути разом з іншими, таким чином вкладаються один в одного. Наприклад, відобразити текст відразу жирним і курсивом.
Текст
< strong > < i >Текст< / strong > < / i > |
Нагадаю ще раз, потрібно дотримуватись правил, які присутні в документі. Саме так браузер розуміє, що знаходиться на сторінці, її послідовність, зміст і так далі.
Тег - це компонент, який говорить веб браузеру виконати те чи інше завдання. Наприклад, присутність абзацу, таблиці, форми або зображення.
Атрибут змінює тег. Наприклад можна абзац вирівняти по центру або правому краю, задати так само розташування зображення на сторінці і так далі.
ЗАВЖДИ закривайте теги, якщо ви його відкрили, обов'язково потрібно його закрити. Інакше буде помилка і ваш документ неправильно відображатиметься на сторінці. Також існують винятки, про них не слід забувати.
Чітко треба розуміти, що існує заголовок документа та його тіло. Заголовок це все, що полягає у тезі . Тіло документа (), в тілі документа міститься весь вміст сторінки. Якщо виникає потреба залишити ділянку коду для себе, тим самим укласти ці теги в коментарі, для цього використовується тег . Все, що знаходиться всередині такого тега, служить у ролі коментаря та не сприймається браузерами.
Почнемо з найпершого. На початку документа я відкрив тег і наприкінці його закрив. Цей код присутній абсолютно в кожному документі, він говорить браузеру, що все, що поміщене між цими тегами, є HTML кодом. Є коренем самого документа, все, що надалі присутнє за цим тегом, вже не входить у документ і сприймається браузерами. На самому початку документа тег відкривається і наприкінці він обов'язково має бути закритим.
Увесь розділ цього тега містить у собі всю технічну інформацію документа. Як і попередній тег, head також повинен бути відкритий і в кінці закритий. У таку інформацію належить заголовок сторінки, її опис, ключові слова для пошукових систем та кодування. Про кодування трохи нижче.
Зміст
< head >Зміст< / head > |
Цей тег включається в head, він повинен бути написаний всередині head тега. Цей тег title є обов'язковим і має бути присутнім у кожному html документі. На додаток до цього він відображається як заголовок вікна браузера. Довжина такого заголовка має перевищувати 60 символів. У тексті такого заголовка повинна бути максимально повна інформація, яка характеризує зміст сторінки.
Якщо ви написали в заголовку "Привіт Світ", саме ця інформація повинна відображатися на сторінці та жодній іншій. Не варто обманювати людей та пошукові машини, вони цього не люблять, тим самим ви робите гірше собі. Інформація, що міститься в цьому тегу, повинна відповідати змісту вашої сторінки.
Після обов'язкового тега title, йде необов'язковий, але так само чимало важливий тег meta. Цей тег є одинарним. За допомогою даного тега задається опис для сторінки (description) та її ключові слова (keywords).
Крім цього, в тезі meta можуть бути дані про автора сторінки та інші властивості метаданих. Можна заборонити індексацію сторінки загалом для пошукових машин. Поставити автоматичне оновлення сторінки через 20 секунд або через 5 секунд із наступним переходом на іншу сторінку.
< meta name = "robots" content = "index, follow" > < meta http - equiv = "refresh" content = "20" > < meta http - equiv = "refresh" content = "5; url=http://сайт/" > |
Таких елементів meta може бути кілька, оскільки вони можуть нести абсолютно різну інформацію. Решта користувачів, коли відкривають сторінку в браузері, не бачать усі ваші описи, все це залишається прихованим від очей.
Тег style також можна використовувати для завдання стилів на сторінці. Якщо ви використовуєте багато різних стилів css, то бажано задавати їх в окремому файлі. Якщо потрібно вказати кілька із них, все це можна задати прямо в html документі.
.base (width: 100px; background-color: #000; height: 150px; color: #fff; )
< style type = "text/css" > Base ( width: 100px; background - color: #000; height: 150px; color: #fff; |
Або додати стилі безпосередньо до одного тегу, для цього всередині тега потрібно додати елемент style. Цей тег потрібно використовувати всередині контейнера, який задає стилі для сторінки. Можна використовувати кілька таких тегів, це не буде помилкою.
Трохи схожий на попередній тег, за допомогою тега link можна задати стилі для документа, які знаходяться в іншому файлі. Іншими словами, можна підключити до існуючого документа повну таблицю стилів CSS, яка складається з безлічі властивостей. Тим самим ви зменшуєте розмір документа, який у результаті швидше завантажуватиметься і відкриватиметься на комп'ютері або мобільному пристрої при слабкій швидкості інтернету.
Підключати можна більше одного файлу, тут обмежень немає. Закривати такий тег не потрібно. Якщо все зробити правильно, до вашого документа підвантажуватимуться конкретні стилі з окремого файлу. Цей тег можна додати до основ html і не забувати про його існування. У результаті виходить така картинка:
< link href = "css/style-lg.css" rel = "stylesheet" > < link href = "css/style-md.css" rel = "stylesheet" > < link href = "css/style-sm.css" rel = "stylesheet" > |
За допомогою тега script до документа можна підключити різні сценарії (скрипти). Присутність тега, що закриває, обов'язкова. Сам скрипт може розташовуватися на початку документа, усередині та наприкінці.
|
Говорить браузеру, що все поміщене між цими тегами має відобразитися у вікні вашого браузера. Ось основні теги, які можуть бути абсолютно в кожному документі. Тег body служить як основне тіло сторінки, який включає в себе весь її вміст. Цей тег бажано відкривати і наприкінці документа не забути закривати.
Заголовки сторінки h1 h2 h3Поїхали далі, ми бачимо тег, який так само відкривається та закривається. Цей тег позначає основний заголовок тексту, у більшості випадків під заголовком H1 йде назва сторінки. Насправді даних заголовком лише шість. . Їх так само використовують у SEO, але це вже трохи інша тема. Я обов'язково виділю для цього одну статтю і дам докладний опис для них, підписуйтесь на оновлення блогу, щоб нічого не пропустити.
Наявність таких заголовків у статті відіграє важливу роль при просуванні сторінки. Крім цього, їх використання дає вам чітку структуру сторінки, її заголовок, підзаголовки, виділення, підпункти тощо. Завжди користуйтеся ними та застосовуйте на практиці. Багато CMS, наприклад таких як WordPress, при написанні тексту, можна помітити «заголовок 1», «заголовок 2», «заголовок 3» тощо. Саме вони й відповідають за h1, h2 та h3.
Якщо ви пишете основний текст з нового абзацу, ви пишіть тег
На початку і закриваєте його наприкінці
. Позначення абзацу в html дорівнює створення нового абзацу в документі MS Word. Більше нічого нового у документ я не додавав. Але, це ще далеко не все, що має бути присутнім у html документі. Подивимося ще один приклад, опис буде трохи пізніше.HTML документ
Цей текст буде напівжирним, а цей – ще й курсивним
< ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title >HTML документ< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html > |
У кожному документі є елемент head і Title. Перший з них, що йде одразу після першого тега. У даному тегу йде вся інформація про сторінку, в ньому також міститься елемент . Title - інформація про заголовку сторінці, тобто назва сторінки, її ім'я. Саме в тайтл ви вказуєте правильну назву сторінки, за якою користувач шукатиме вас через пошукову систему, дуже важливий момент. Обидва елементи повинні бути відкриті і закриті. Закривається кожен елемент знаком "/". У результаті виходить така картинка.
Заголовок& \Зміст сторінки
| < / html > |
Як бачите, нічого складного нема. Перед вами найголовніші теги, які мають бути присутніми в кожному html документі. Не забувайте закривати кожен із них, інакше браузер не зможе сприйняти повноцінну картину коду. Це потрібно знати та пам'ятати завжди. Далі ви вже починаєте вставляти текст, картинки, відео тощо. Але це буде в інших статтях.
Редактор Notepad++
Для роботи з кодом використовуйте програму Notepad++. Вона безкоштовна, знайти її в інтернеті не важко. Дуже зручна для сприйняття будь-якого коду, так само зручно показується тег, що відкривається і закривається. Підтримуємо синтаксис понад 40 мов програмування. Саме те, що потрібно для вивчення основ HTML.
Блокнот перевищує у всіх сенсах звичайний блокнот. Для максимальної зручності, простоти та навчання цей редактор спочатку необхідно встановити на комп'ютер. Найголовніша перевага та зручність, редактор Notepad++ показує підказки при написанні коду, що робить вашу роботу швидше та якісніше в рази.
Елемент DOCTYPEУ кожному документі так само має бути зазначений такий елемент doctype. Для чого він потрібен і що має бути. Зазвичай народ сильно не захоплюється цими рядками, копіюють собі документи і працюють спокійно. Дані елементи говорять браузеру, яка версія HTML використовується в документі, який опис сторінки, яке використовується кодування, які ключові слова включені, хто автор і як називається сторінка.
Ставляться вони зазвичай на самому початку. Існує кілька варіантів і всі вони відрізняються один від одного, я напишу один приклад, який найчастіше використовується. Заготовку можна використовувати як готовий шаблон. Далі буде зрозумілий опис кожного рядка, проблем із цим бути не повинно.
Коротко зрозумілою мовою про основи html: Даний рядок говорить браузеру про те, що даний документ є XHTML версія 1.0, використовується англійська мова і вся ця каша розташована за даною адресою. Далі в тезі meta вказуємо кодування, яке використовується. Найчастіше використовується віндовс 1251.
Description — торкається тема з SEO, один із трьох головних тегів, який має бути присутнім абсолютно в кожному документі, цей тег вказує опис сторінки. Що написано на цій сторінці, короткий опис, не більше двох речень. Тег keywords, так само торкається тема SEO, даний тег є обов'язковим. У ньому пишуться ключові слова, за якими користувачі інтернету шукатимуть вас через пошукові системи.
У тегу title йде назва самого документа, його заголовок, який ми бачимо у браузері. Напевно, найважливіший тег у всьому документі, який найбільше впливає на просування сторінки. У статті додавання та оформлення йде опис даного тега більш детально.
Що потрібно запам'ятати з цього уроку для основи html:
Усі головні сторінки завжди мають називатися словом index. Так прийнято і так всі звикли, все одно яке буде розширення у файлу, це може бути і html і php. Називається він завжди лише так.
Перегляньте відео про основи html від компанії Webformyself.
Мова гіпертекстової розмітки, базові елементи та структура. Все це та багато іншого я постараюся описати на своєму блозі. Насамперед для новачків буде написана корисна інформація, наданий приклад коду та можливість скачати сам приклад разом із готовою сторінкою.
За появу HTML сучасний світ має дякувати одній вченій Європейській раді з ядерних досліджень (Conseil Européen pour la Recherche Nucléaire, CERN). Звати цього вченого Тімоті Джон Бернерс-Лі. Перша версія HTML створювалася з метою форматування наукових документів. Саме структурне форматування без елементів опису колірних схем, параметрів шрифту тощо. Таким чином, спочатку HTML дозволяв виділяти в тексті заголовки, абзаци, списки та подібні до них структурні елементи. Результат обробки або “відтворення” HTML не повинен був залежати від технічних особливостей апаратних засобів його візуалізації, оскільки не містив параметрів цієї візуалізації. Згодом така особливість мови розмітки гіпертексту була частково втрачена.
Отже, поява перших версій HTML відносять до 1986 року, а 1991 року HTML було суттєво доопрацьовано і став використовуватися саме передачі гіпертексту просторами всесвітньої павутини. Говорять, що всесвітньо відома абревіатура HTML, що розшифровується як Hyper Text Markup Language (мова розмітки гіпертексту) з'явилася якраз на початку 90-х років минулого століття. А тепер невеликий екскурс у родовід мов розмітки. Перша версія мови розмітки гіпертексту HTML була створена на основі стандарту узагальненої мови розмітки SGML (Standard Generalized Markup Language), який певною мірою можна вважати прообразом мови розмітки даних, що розширюється (eXtensible Markup Language). Стандарт XML у наш час набув величезної популярності завдяки великій кількості своїх розширень, що використовуються в комп'ютерних технологіях. Щоб зовсім заплутати читача, відразу додам, що згодом на основі XML була розроблена мова розмітки гіпертексту XHTML (Extensible Hypertext Markup Language), що повторює за своєю суттю HTML. В результаті ми маємо абревіатури SGML, HTML, XML і XHTML, і необхідно зрозуміти хто з них хто. Насправді все просто: SGML – це не що інше, як набір правил, на основі яких можна будувати будь-які мови розмітки. HTML і є однією з цих мов - додаток SGML. Іншими словами, SGML визначає те, як мають виглядати елементи розмітки, а HTML - які саме мають бути елементи і як вони повинні інтерпретуватися браузерами. XHTML, своєю чергою, є додатком XML, а сам XML ні що інше, як спрощений варіант SGML. , незважаючи на те, що дуже зовні схожі, мають суттєві приховані відмінності, які, здебільшого, полягають у принципі їх обробки.
Тепер повернемось до історії розвитку HTML. Отже, до 1994 року HTML як і використовувався лише структурної розмітки даних, хоча у його складі вже з'явилися теги виділення тексту жирним чи курсивом. У тому ж 1994 року створюється організація W3C (World Wide Web Consortium) – Консорціум всесвітньої павутини, яку очолює, що цілком логічно, той самий Тім Бернерс-Лі, і 1995 року виходить рекомендація HTML 2.0. Творці HTML вже тоді розуміли, що з часом їх дітище з мови статичної розмітки тексту еволюціонує в основний інструмент створення динамічних інтернет ресурсів. Головним доповненням HTML 2.0 стала поява у складі мови форм з наборами елементів управління, які повинні були використовуватися для введення користувачем параметрів HTTP запитів.
Після виходу другої версії відразу розпочалася робота над наступним поколінням HTML. У 1997 році виходить рекомендація HTML 3.2, яка доповнила мову розмітки таблицями, кадрами, зображеннями та іншими важливими тегами. Але найголовнішим досягненням 3-ї версії є те, що її автори знову повернулися до проблеми візуалізації розмітки в браузері, згадали про те, що HTML повинен розмічати лише структуру документа і не повинен містити в собі параметри графічних стилів відображення елементів у браузері. Результатом їх робіт над HTML 3.2 стала поява самостійної мови CSS (Cascading Style Sheets) - каскадних таблиць стилів, код якого можна тепер підключати до коду розмітки HTML і тим самим налаштовувати зовнішній вигляд сторінки.
До виходу 4-ї версії HTML в 1997 році співробітники W3C позбавили своє дітище тих непотрібних елементів, які з появою CSS стали застарілими і компрометували ідею відділення розмітки структури від параметризації представлення. Але через такі дрібниці ніхто не став би городити нову версію. Основне досягнення рекомендацій HTML 4.0 – поява об'єктної моделі сторінки (Document Object Model, DOM), елементами якої тепер можна було маніпулювати за допомогою скриптових мов програмування, що виконуються браузерами. Найпопулярнішою мовою програмування є JavaScript. HTML плюс DOM плюс JavaScript дорівнює Dynamic HTML або просто DHTML, який ознаменував прорив у веб-дизайні. Тепер елементи завантаженої веб-сторінки могли змінювати свій зовнішній вигляд у відповідь на дії користувача, а також додавати нові та видаляти наявні елементи. У 24.12.1999 виходить остання редакція 4-ї версії мови розмітки гіпертексту - HTML 4.01.
Версія HTML5 досі ще не отримала статусу офіційних рекомендацій W3C, але вже зараз зрозуміло, що автори HTML продовжують працювати у напрямку розробки вимог до підтримки об'єктної моделі документа та інтерпретації JavaScript. Хоча HTML5 і отримає ряд нових тегів, але більшість рекомендацій все ж таки стосується поведінки браузера в контексті роботи DHTML: з'явиться вбудована підтримка функцій перетягування елементів (drag-and-drop), можливість малювати на віртуальному полотні (canvas), керувати переглядом історії, обмінюватися повідомленнями між сторінками, зберігати контекст виконання та багато іншого. Є надія, що з виходом нових рекомендацій HTML проблеми відсутності кросбраузерності, коли один і той же JavaScript код виконується під керуванням різних браузерів по-різному, поступово зникатимуть. Адже тенденція визначати вимоги до роботи з об'єктною моделлю та JavaScript буде зберігатися, а розробники браузерів будуть зобов'язані (якщо хочуть, щоб їх програмними продуктами користувалися) дотримуватись цих вимог.
Вихід HTML5 заплановано на 2014 рік. Можливо, на той час W3C розробить окремі рекомендації щодо програмування на JavaScript, а HTML з часом знову стане виключно мовою розмітки структури документа. Незважаючи на те, що сьогодні ще тільки 2012 рік, багато хто вже зараз підтримується найбільш популярними браузерами. Багато чого, що доводилося веб-дизайнерам раніше робити самостійно (той же drag-and-drop), з виходом HTML5 підтримуватиметься на рівні браузера, і такий перебіг подій не може не радувати. Залишається сподіватися, що тенденція збережеться.
Інтернет являє собою всесвітню мережу, що об'єднує комп'ютерні мережі по всьому світу на базі єдиних стандартних угод (протоколів) про способи обміну інформацією єдиною системою адресації.
На сьогодні мережа Інтернет набула безпрецедентного поширення. За оцінками експертів, Інтернет об'єднує понад 100 мільйонів комп'ютерів. Послугами Інтернет користується понад 300 мільйонів людей у 170 країнах світу.
З функціональної точки зору Інтернет є:
ü недорогий швидкодіючий засіб спілкування між абонентами по всьому світу;
ü не має аналогів сховище інформації з будь-яких областей знань;
ü нове перспективне середовище для діяльності.
Вплив Інтернет поширюється як на технологічну область комп'ютерних комунікацій, вона має також соціальну спрямованість і пронизує все суспільство у міру того, як все більшого поширення набувають оперативні засоби отримання знань, електронної комерції.
Найпоширенішим і найпопулярнішим сьогодні є такий сервіс Інтернет, як WWW (World Wide Web – всесвітня павутина). Інформація в WWW представлена у вигляді так званих гіпертекстових (або, ширше, гіпермедійних) документів, які можуть містити відформатований текст, графіку, аудіо- та відеофрагменти. Основною особливістю гіпертекстових документів є наявність активних зон, чутливих до клацання миші. Активними можуть бути фрагменти тексту , цілі зображення та їх частини; клацання по активній зоні викликає завантаження пов'язаного з цією зоною (цільового) документа.
Щоб навчитися розміщувати матеріали в Інтернеті, перш за все необхідно познайомитися з мовою розмітки гіпертексту HTML (H yperT ext M arkup L anguage)
Основи мови HTMLМова розмітки гіпертекстових документів HTML є сукупністю команд, званих тегами (від англійської tag).Теги, що зустрічаються в тексті документа HTML, інтерпретуються браузером при відображенні документа.
Перегляд HTML-документів здійснюється за допомогою програм- браузерів(від англійської browser), які відображають документ відповідно до HTML-розмітки та забезпечують навігацію за гіперпосиланнями. Найбільш поширеними є браузери Microsoft Internet Explorer фірми Microsoft Corporation та Netscape Navigator фірми Netscape Communications Corporation.
Оскільки HTML-документ є текстовим файлом, його можна підготувати в найпростішому текстовому редакторі, наприклад, в блокноті ( Notepad), але це дуже трудомістко. Найчастіше використовують спеціалізовані редактори, призначені саме для підготовки HTML-документів, які дозволяють вставляти теги за допомогою кнопок панелей інструментів або команд меню, а також задавати атрибути тегів у діалогових вікнах, наприклад, Macromedia Dreamweaver, Microsoft FrontPage, HomeSite та ін.
HTML-документ може бути отриманий перетворенням на HTML-формат, наприклад, з формату документів пакета Microsoft Office. Слід зазначити, що з такому перетворення вихідний текст HTML-документа виходить вкрай надлишковим і потребує корекції. Значно ефективніше користуватися спеціальними HTML - редакторами.
Синтаксис HTML-тегівHTML-тег записується в кутових дужках (символи) і складається з імені, за яким може йти список атрибутів (для більшості тегів необов'язковий). Імена та атрибути являють собою англійські слова та абревіатури.
Теги умовно можна розділити на дві групи:
Парні теги (названі також контейнерами) мають два компоненти: відкриває (початковий) і закриває (кінцевий); закриває компонент має таку ж назву, але за запису перед назвою ставиться коса риса(символ / ). Між компонентами, що відкривають і закривають, може розташовуватися текст документа та інші теги. Фрагмент документа, розташований між елементом тега-контейнера, що відкриває і закриває, форматується браузером відповідно до змісту тега. bold). Парні теги можуть бути вкладені одна в одну, але не повинні перетинатися.
Непарні теги (названі також автономними) не мають кінцевого компонента. При їх інтерпретації в документ, що відображається, вставляється той чи інший об'єкт. Наприклад, тег , що у тексті HTML-документа, викликає вставку графічного зображення з файла pict.gif .
Атрибути у списку відокремлюються один від одного одним або декількома пробілами, або символами табуляції, або символами перекладу рядка; послідовність запису атрибутів несуттєва. Переважна більшість атрибутів використовуються у вигляді пари назва атрибута = значення атрибута. У випадку, коли значення атрибута є більш ніж одним словом або одним числом, його слід укласти в одинарні або подвійні лапки. У компонентах тегів, що закривають, атрибути не вказуються.
Ось приклад тега з атрибутами:
|
Назва тега Назва атрибута |
|
Значення атрибуту |
|
Назва атрибуту |
|
Значення атрибуту |
Вітання !
Зустрівши такий тег у HTML-документі, браузер інтерпретує його, виводячи текст символами, збільшеними щодо базового розміру (SIZE=+2) і червоного кольору (COLOR=RED); це форматування тексту застосовується до тих пір, поки не зустрінеться тег, що закриває.
Регістр символів у записі тегів та атрибутів не має значення.
Структура HTML-документаHTML-документ полягає в теги і. Між цими тегами розташовуються дві секції: секція заголовка (між тегами і) і секція тіла документа (між тегами і). .Секція тіла документа містить основний текст, призначений для відображення браузером, теги форматування, розміщення малюнків, таблиць, гіперпосилань і т.д.
HTML-код найпростішого документа, придатного для розміщення в Інтернеті, виглядає так:
< TITLE >Наша перша сторінкаTITLE >
Найпростіший HTML-документ
Цей код може бути набраний у текстовому редакторі Блокнот і збережений як файл із розширенням. htm або. html − у цьому випадку документ відкриється у браузері, встановленому на вашому комп'ютері за промовчанням. Браузер відобразить цей документ, вивівши у своєму вікні рядок "Найпростіший HTML-документ", розташований у секції тіла документа. Фраза "Наша перша сторінка" відображатиметься у рядку заголовка браузера.
Розділ HEADСекція заголовка зазвичай містить теги, непомітні для користувача, але здатні активно впливати не зовнішній вигляд документа.
|
Тег |
Призначення |
|
Визначає ім'я всього документа. Ім'я, як правило, відображається у заголовку вікна браузера. Цей елемент є обов'язковим для будь-якого HTML-документа і може бути вказаний не більше одного разу. |
|
|
Вказує базову адресу поточного документа (URL), яка стане відправною точкою для розрахунку відносних адрес усередині документа. Елемент немає кінцевого тега. Обов'язково присутність хоча б одного з аргументів: HREF – визначає базову адресу (URL) поточного документа. TARGET - визначає ім'я кадру, яке використовуватиметься в гіперпосиланнях за умовчанням. Це може стати вам у нагоді, якщо ви хочете відкривати всі посилання документа в іншому кадрі. |
|
|
< STYLE TYPE= "text /css " > |
Використовується для вставки в документ каскадних таблиць стилів (CSS – Cascade Style Sheet). TYPE − обов'язковий атрибут, значенням якого зазвичай є "text /css ". |
|
< МЕТА …> |
Елемент МЕТА використовується для технічного опису документа. За допомогою цього елемента в заголовок документа впроваджується додаткова корисна інформація, невидима для користувача, але інколи просто незамінна для правильної індексації вашої сторінки роботами пошукових серверів. Елемент немає кінцевого тега. NAME – визначає ім'я мета-запису. Існує безліч зумовлених імен, деякі з яких ви можете побачити у наведеному нижче прикладі. CONTENT - надає значення мета-запису, визначеного у параметрі NAME. |
Цей розділ включає основний зміст веб-сторінки - текст документа, зображення, таблиці і т.п. Елемент BODY повинен зустрічатися в документі не більше одного разу і може містити такі атрибути:
|
Синтаксис атрибуту |
Призначення |
|
MARGINHEIGHT= число |
Визначає ширину (у пікселях) верхнього та нижнього полів документа. Працює лише у браузерах Netscape |
|
TOPMARGIN= число |
Визначає ширину (у пікселях) верхнього та нижнього полів документа. Працює лише у браузерах Internet Explorer |
|
MARGINWIDTH= число |
Визначає ширину (у пікселях) лівого та правого полів документа. Працює лише у браузерах Netscape |
|
LEFTMARGIN= число |
Визначає ширину (у пікселях) лівого та правого полів документа. Працює лише у браузерах Internet Explorer |
|
BACKGROUND= URL |
Визначає зображення для заливки фону (фонового малюнка). Значення задається абсолютної або відносної адреси зображення (див. Розміщення малюнків) |
|
BGCOLOR= колір |
Визначає колір тла документа. MicrosoftInternetExplorerпідтримує 16 стандартних імен кольорів (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white) Іншим способом є використання коду кольору у вигляді шестирозрядного шістнадцяткового числа, що задає інтенсивність червоної (перші дві цифри), зеленої (наступні дві цифри) і синій (останні дві цифри) складової. Інтенсивність кожної складової у шістнадцятковій формі змінюється від 00 до FF. При заданні кольору значення атрибута деякого тега перед шістнадцятковим числом ставиться символ #. Наприклад, запис COLOR = "#0000 FF " означає синій колір Незважаючи на принципову можливість задати мільйони кольорів, треба враховувати, що браузери відображають лише 256 кольорів, причому у кожного браузера своя палітра кольорів. У цій палітрі браузер підбере колір, найбільш близький до заданого |
|
TEXT= колір |
Визначає колір тексту у документі |
|
LINK= колір |
Визначає колір гіперпосилань у документі |
|
ALINK= колір |
Визначає колір підсвічування гіперпосилань в момент натискання |
|
VLINK |
Визначає колір гіперпосилань на вже переглянуті документи |
Всі теги форматування символів мають як відкриваючий, так і компонент, що закриває, і діють на укладені між ними текст.
Основним є тег ... FONT>, який обов'язково використовується з одним або декількома атрибутами, що змінюють розмір, колір і гарнітуру шрифту:
|
Синтаксис атрибуту |
Призначення |
|
SIZE = значення |
Розмір задається або у формі абсолютного значення (число від 1 до 7) або щодо розміру основного шрифту (у формі +nабо -n). |
|
COLOR = колір |
Колір |
|
FACE = список шрифтів |
Гарнітури для відображення тексту; назви перераховуються в порядку переваги через кому, наприклад, FACE = "Verdana, Helvetica, Arial, Sans - Serif" Можна вказати і одну з гарнітур, але слід враховувати, що цей шрифт може бути не встановлений на комп'ютері користувача, і "екзотичні" шрифти не відображатимуться браузером |
Крім того, використовуються теги, що дозволяють змінити зображення символів:
. .. (від англійської bold) − напівжирний шрифт;
.. . (Від англійської italic) - курсив;
... (від англійської TeleType) – моноширинний шрифт;
... (від англійської u nderline) – підкреслений;
... S > (від англійської s trikethrough) − перекреслений;
... (від англійської s ub script) − нижній індекс;
... (від англійської sup erscript) - Верхній індекс.
Текст між тегами
та (від англійської pre formatted), відображається так, як він був відформатований заздалегідь, з усіма пробілами та переносами рядків.
Форматування абзацівТекст виводиться у вікно браузера слово за словом, при досягненні правої межі вікна чергове слово автоматично переноситься на новий рядок. Навіть якщо в коді сторінки було введено декілька пробілів або текст записувався з нового рядка, під час перегляду в браузері ці дії не відображаються. Тому, щоб вивести в тексті ряд послідовних прогалин або кілька порожніх рядків, доводиться застосовувати різні теги.
Тег
(від англійської b reak) розриває текстовий потік і вставляє новий рядок без утворення нового абзацу. Декілька послідовних тегів
інтерпретуються як кілька порожніх рядків. Міжрядковий інтервал одинарний. Закриває компонент тег не має, як і атрибутів.
Тег(від англійської p aragraph)починає абзац;новий абзац відокремлюється від попереднього подвійним міжрядковим інтервалом.Абзац порожнім бути не може, тобто кілька послідовних тегів
інтерпретуються як один (на відміну від тега
).Закриває компонент
необов'язковий, тому що попередній абзац закінчується там, де починається новий. ширину. По центру буде вирівняно і текст, укладений у теги
...Якщо закриває компонент
опустити, то заданий тип вирівнювання зберігається до наступного тега, що задає вирівнювання, або до кінця документа.
HTML дозволяє створювати форматувати абзаци як нумеровані чи марковані списки. Фрагмент тексту, що є список, полягає в теги:
впорядкований (нумерований) список (від англійської o rdered l ist)
невпорядкований (маркований) список (від англійської u nordered l ist)
Кожен елемент упорядкованого або неупорядкованого списку полягає в теги... (від англійської l ist i tem). При виведенні тексту кожен елемент списку розташовуватиметься з нового рядка, позначеного номером або маркером. Крім того, у списку може бути заголовок, який задається тегом (від англійської l ist h eader). Теги, що закривають, і не обов'язкові.
|
Нумерований список |
Маркований список |
|
|
Елемент коду |
< O L> Заголовок Перший елемент Другий елемент Третій елемент |
< U L> Заголовок Перший елемент Другий елемент Третій елемент U L> |
|
Відображення у браузері |
Заголовок 1. Перший елемент 2. Другий елемент 3. Третій елемент |
Заголовок · Перший елемент · Другий елемент · Третій елемент |
Багаторівневий список може бути організований за допомогою комбінації нумерованих та маркованих списків.
Теги має необов'язкові атрибути:
|
Синтаксис атрибуту |
Призначення |
|
|
TYPE = формат |
формат нумерації може мати значення: |
|
|
арабські цифри (за замовчуванням) |
||
|
прописні літери |
||
|
малі літери |
||
|
великі римські цифри |
||
|
маленькі римські цифри |
||
|
START = значення |
перший номер у списку (за замовчуванням 1) |
|
Теги має необов'язковий атрибут
|
Синтаксис атрибуту |
Призначення |
|
|
TYPE = формат |
формат маркера може мати значення: |
|
|
Disc |
диск (за замовчуванням) |
|
|
Circle |
коло |
|
|
Square |
Квадрат |
|
Абзаци можна оформити і у вигляді заголовків рівня (від n = 1 до n = 6), для цього використовують теги виду ... n>. Заголовок першого рівня виводиться найбільшим шрифтом.
Теги
, ... ,
можуть мати атрибут вирівнювання ALIGN зі значеннями LEFT, RIGHT і CENTER.
Розміщення малюнківЗображення, які демонструються браузером під час перегляду веб-сторінки, зберігаються у окремих файлах формату gif , jpg (jpeg ) чи png , а коді сторінки робиться посилання потрібний файл. Для цього використовується непарний тег , що має один обов'язковий і ряд необов'язкових атрибутів.
|
Обов'язковий атрибут: |
|
|
SRC = url |
Адреса графічного файлу (відносний чи абсолютний) |
|
ALT = текст |
Альтернативний текст, який виводиться в режимі браузера без завантаження зображень (обов'язково полягає в лапки) |
|
BORDER = значення |
Товщина рамки, що обрамляє, в пікселях, 0 означає відсутність рамки (за замовчуванням) |
|
BORDERCOLOR = колір |
Задає колір рамки, що обрамляє |
|
HEIGHT = значення |
Висота зображення в пікселях (за замовчуванням оригінальна) або у відсотках від висоти вікна браузера |
|
WIDTH = значення |
Ширина зображення в пікселях (за замовчуванням оригінальна) або у відсотках від ширини вікна браузера |
|
HSPACE = значення |
Вільний простір ліворуч і праворуч від зображення в пікселях |
|
VSPACE = значення |
Вільний простір зверху та знизу від зображення у пікселях |
|
ALIGN = значення |
Вирівнювання зображення по горизонталі. Якщо задані значення LEFT або RIGHT, зображення відповідним чином буде вирівняно по горизонталі, завдання цих значень забезпечує обтікання зображення текстом |
Розглянемо докладніше абсолютний та відносний способи адресації файлу.
Адресація в абсолютній формівикористовується під час посилань на ресурси, що знаходяться на інших серверах. Універсальна адреса, що визначає місцезнаходження інформаційного ресурсу, має назву URL (Uniform Resource Locator - уніфікована адреса ресурсу). URL складається з двох частин, розділених двокрапкою. Перша частина вказує на тип мережного протоколу, який залежить від типу ресурсу. Наприклад, якщо ресурс розміщується на WWW-сервері, це протокол http.Друга частина включає ім'я комп'ютера (сервера) в доменній системі імен і (якщо потрібно) дорожнє ім'я файлу. При записі дорожнього імені назви каталогів поділяються прямою косою рисою (символ / ), в іменах файлів та каталогів розрізняються великі і малі літери, прогалини не допускаються. Ось приклади URL:
http://www. vshu. kirov .ru/site/images/picture 1. jpg
http://195.21.123.13:8110
ftp://everything.com/soft/prog.zip
mailto:This email address is being protected from spambots. Ви повинні JavaScript enabled to view it.
Остання URL-адреса, що вказує на протокол mailtoта адреса електронної пошти, яка не посилається на жодний інформаційний ресурс; це єдиний тип URL, при запису якого не ставляться після двокрапки дві косі риси.
Адресація малюнків в абсолютній формі під час створення веб-сайту практично не використовується.
Адресація у відносній формівикористовується при посиланнях на ресурси, що знаходяться на тому самому сервері. При записі шляху до файлу назви каталогів поділяються прямою косою рисою (символ / ), перехід за каталогами файлової системи на один рівень вгору позначається двома точками (символи ..). Щоб було зрозуміліше, уявімо комп'ютер, наприклад, з такою структурою каталогів, що містять HTML-файли:
SHAPE* MERGEFORMAT
|
MySite |
|
Pa ges |
|
Ima ges |
|
Page1.htm Page2.htm Pict1.jpg Pict2.jpg |
|
Index.htm Picture.jpg |
У цьому випадку можливі, наприклад, такі варіанти запису тега IMG:
ü < IMG SRC = Picture . jpg >(зображення Picture . jpg розташовується на сторінці Index . htm )
ü < IMG SRC = Images / Pict 1. jpg >(зображення Pict 1. jpg розташовується на сторінці Index. htm)
ü < IMG SRC =../ Picture . jpg >(зображення Picture . jpg розташовується на сторінці Page 1. htm )
ü < IMG SRC =../ Images / Pict 1. jpg >(зображення Pict 1. jpg розташовується на сторінці Page 1. htm )
Незважаючи на те, що формально обов'язковим є лише атрибут SRC, на практиці необхідно вказувати і альтернативний текст (атрибут ALT), оскільки багато хто працює з браузером в режимі без завантаження зображень.
Висоту та ширину області, в якій демонструється малюнок, задають за допомогою атрибутів width та height у пікселях або у відсотках до розміру екрану. У тому випадку, коли задається один із цих атрибутів, малюнок масштабується таким чином, щоб його висота або ширина відповідали заданій. Другий розмір встановлюється автоматично у відповідній пропорції. Застосування лише одного з атрибутів змінює обидва розміри малюнка.
Якщо задати явно обидва атрибути, то малюнок масштабуватиметься по двох осях відповідно до заданих розмірів. Атрибути height і width змінюють не час завантаження зображення, лише його вигляд (розмір) на екрані.
Гіперпосиланням називають об'єкт (текст, зображення, фрагмент зображення), при натисканні мишею по якому відбувається перехід до нового документа або фрагмента документа. Саме гіперпосилання дозволяють організувати переходи між будь-якими розміщеними в Інтернеті документами.
Текстові гіперпосиланняЗв'язок між HTML-документами та фрагментами документів організується за допомогою тега ...(від англійської a nchor - якір).
Тегу використовується як створення посилання інший документ, так посилання на фрагмент документа.
|
Обов'язковий атрибут: |
|
|
HREF = url |
Адреса цільового документа (може бути представлений в абсолютній та відносній формі) |
|
Основні необов'язкові атрибути: |
|
|
NAME=" ім'я" |
Помічає між< A >та A > фрагмент документа як можливий об'єкт посилання. Як значення потрібно латиницею написати будь-яке слово-покажчик, унікальне для цього документа. Наприклад, тег Розділ1 створює так звану мітку (закладку) для переходу до розділу 1. У цьому випадку можна посилатися на позначену область простою вказівкою її імені після імені документа (перед іменем мітки ставиться #). Так,<
A
HREF
="
Index
.
html
#
part
1">До розділу 1 A > відправить вас до розділу "part 1" файлу Index . html , а |
|
TARGET = " ім'я" |
Ім'я кадру (фрейму) чи вікна виведення цільового документа. Цей атрибут використовується лише спільно з HREF. Як значення необхідно задати або ім'я одного з існуючих кадрів, або одне з наступних зарезервованих імен: _self - вказує, що визначений у параметрі HREF документ повинен відображатись у поточному кадрі; _blank - вказує, що документ має відображатися у новому вікні |
|
TITLE= " текст!}" |
Виводить підказку при наведенні покажчика миші на гіперпосилання |
Текст і зображення, розміщені між тегами, стають активною зоною документа, чутливою до клацання миші, що викликає завантаження цільового документа. Текст гіперпосилання виділяється підкресленням та кольорами, вказаними як значення атрибутів LINK, A LINK, V LINK тега (або кольором за замовчуванням).
Гіперпосилання-картинкиЩоб зробити гіперпосиланням ціле зображення, також застосовується тег ...., тільки замість тексту (або разом із текстом) між< A >та A > розташовується тег< IMG …>зі всіма відповідними атрибутами.
Наприклад, .
Карта гіперпосиланьТег дозволяє зробити активною зоною текстовий фрагмент або зображення повністю; щоб різні фрагменти одного зображення посилалися на різні цільові документи, доведеться використовувати тег, що реалізує зображення-карту.
У тега-контейнера єдиним обов'язковим атрибутом є NAME , значенням якого буде ім'я (наприклад, NAME=" mymap " , яке має бути використане при описі атрибуту USEMAP тега IMG, що описує зображення, покликане служити карткою (при цьому до імені картки приписується зліва # − USEMAP = "# mymap ")
Всередині контейнера кожної чутливої до переміщення миші зоні зображення повинен відповідати тег з атрибутами:
|
Синтаксис атрибуту |
Призначення |
|
COORDS = перелік |
Список через кому координат активної зони (залежить від типу заданої форми зони) |
|
HREF = url |
|
|
SHAPE = форма |
Визначає форму активної зони. Можливі значення цього атрибуту: circle(коло - задається координатами центру і радіусом в пікселях); rect(прямокутник - задається координатами лівого верхнього та правого нижнього кута); poly(багатокутник - задається координатами своїх вершин) Координати у всіх випадках відраховуються від верхнього лівого кута зображення в пікселях, вісь Х спрямована вправо, вісь Y вниз. |
|
NOREF |
іноді буває потрібно вказати, що дана зона (задана атрибутом SHAPE та координатами COORDS) не є активною, реакції на клацання миші немає |
Таблиці в HTML-документах використовуються не так для того, щоб розташовувати дані в обрамлених осередках, скільки з метою розташування фрагментів тексту та зображень один щодо одного.
Таблиці в HTML будуються рядково. Усі табличні дані полягають у теги
; опис кожного ряду осередків (рядків) полягає в теги...; вміст кожного осередку полягає в теги ... (звичайні осередки) або ... H > (заголовки).
Таким чином, для опису, наприклад, таблиці з двох рядків, кожен з яких містить по два осередки, доведеться створити наступну конструкцію:
Осередки таблиці можуть містити текст, зображення, вкладені таблиці тощо. Не слід залишати осередки таблиці незаповненими; якщо якась комірка має виглядати порожньою, помістіть у неї нерозривну прогалину.
За замовчуванням текст, що міститься в осередку таблиці, автоматично розміщується браузером; текст виводиться слово за словом; при досягненні правого кордону осередку чергове слово переноситься на новий рядок.
Осередки таблиці можуть охоплювати кілька рядків або стовпців; при описі таких осередків використовуються атрибути ROWSPAN (комірка, тег якої містить даний атрибут, "розтягується" на вказану кількість рядків) та COLSPAN (комірка "розтягується" на кілька стовпців). Наведемо приклад організації таблиці з об'єднаними осередками:
< TR >
< TD ROWSPAN=2>1-1 TD >
Теги, що описують таблиці, мають низку необов'язкових атрибутів.
Атрибути тега задають параметри таблиці в цілому:
|
Синтаксис атрибуту |
Призначення |
|||
|
ALIGN = значення |
Вирівнювання щодо текстового потоку; можливі значення left, right та center |
|||
|
BACKGROUND = url |
Фонове зображення для всієї таблиці |
|||
|
BGCOLOR = колір |
Фоновий колір |
|||
|
BORDERCOLOR = колір |
Колір кордону |
|||
|
BORDERCOLORDARK = колір |
Забарвлює в заданий колір правий і нижній край основної рамки і лівий і верхній край кожної комірки |
|||
|
BORDERCOLORLIGHT = колір |
Забарвлює в заданий колір лівий і верхній край основної рамки і відповідно правий і нижній край кожного осередку |
|||
|
CELLPADDING = значення |
Відстань від меж осередку до її вмісту в пікселях |
|||
|
CELLSPACING = значення |
Відстань між осередками в пікселях |
|||
|
HSPACE = значення |
Вільний простір ліворуч і праворуч від таблиці в пікселях |
|||
|
VSPACE = значення |
Вільний простір зверху та знизу від таблиці у пікселях |
|||
|
WIDTH = значення |
Ширина таблиці (задається у пікселях або у відсотках від поточної ширини вікна браузера) |
|||
Атрибути тега визначають параметри даного ряду (при виникненні протиріч атрибути, задані в тезі, скасовуються). Вирівнювання вмісту осередків; можливі значення left, right і center
BACKGROUND = url
Фонове зображення для осередків цього ряду таблиці
BGCOLOR = колір
Фоновий колір для осередків цього ряду
BORDER = значення
Товщина рамки, що обрамляє комірки даного ряду; BORDER = 0 позначає невидиму рамку
VALIGN = значення
Вертикальне вирівнювання вмісту осередків; можливі значення top, center та bottom
Атрибути тега задають параметри даної комірки (при виникненні протиріч атрибути, задані в тегах і скасовуються).
|
Синтаксис атрибуту |
Призначення |
|
ALIGN = значення |
Вирівнювання вмісту комірки; можливі значенняleft, right і center |
|
BACKGROUND = ur l |
Фонове зображення для комірки таблиці |
|
BGCOLOR = колір |
Фоновий колір для комірки |
|
BORDER = значення |
Товщина рамки, що обрамляє комірку |
|
VALIGN = значення |
Вертикальне вирівнювання вмісту комірки; можливі значення top, center та bottom |
|
WIDTH = значення |
Ширина осередку в пікселях або у відсотках від ширини таблиці |
|
ROWSPAN= значення |
Вказує кількість рядків, що охоплюються осередком |
|
COLSPAN = значення |
Вказує кількість стовпців, що охоплюються осередком |
При роботі з таблицями врахуйте, що вказане значення атрибуту WIDTH у багатьох випадках лише "приймається до уваги" браузером. Задані пропорції точно витримуються рідко, браузер намагається відобразити таблицю якнайкраще (у його розумінні).
Біжучий рядокВикористання рядка, що біжить на веб-сторінці, робить його більш динамічним, дозволяє створити ефект руху об'єкта. Створюється рядок, що біжить, за допомогою тега< MARQUEE >… MARQUEE >.
між< MARQUEE >та MARQUEE > можуть розташовуватися текстові фрагменти та малюнки. Текст може бути форматований за допомогою відповідних тегів, а малюнок вставляється з використанням .
|
Синтаксис атрибуту |
Призначення |
|
BGCOLOR = колір |
Фоновий колір. Якщо фон заданий, браузер малює на екрані кольорову смугу, вздовж якої рухається текст або картинка. |
|
HEIGHT = значення |
Висота смуги фону. Значення вказується у пікселях або відсотках від висоти вікна браузера. Наприклад, якщо вказати атрибут HEIGHT=25%, то смуга рядка, що біжить, займатиме чверть висоти вікна |
|
WIDTH = значення |
Ширина смуги рядка, що біжить, вказується в пікселях або у відсотках від ширини вікна браузера |
|
DIRECTION= значення |
Напрямок руху рядка: left – ліворуч (за замовчуванням), right – праворуч, up – вгору, down – вниз |
|
BEHAVIOR = значення |
Атрибут управляє поведінкою рядка, що біжить: scroll (за замовчуванням) – дійшовши до краю вікна, рядок йде з поля зору, а потім з'являється з протилежного боку; slide − рядок з'являється через край вікна, досягає протилежного і зупиняється; alternate − рядок рухається вправо або вліво, «відбиваючись» від країв вікна та змінюючи напрямок руху |
|
HSPACE = зсув у пікселях |
Зсув смуги рядка, що біжить по горизонталі вправо |
|
VSPACE = ви co тa у пікселях |
Створення порожнього простору вище та нижче смуги |
|
LOOP = значення |
Кількість переходів рядка по екрану |
|
SCROOLAMOUNT = значення |
Число пікселів, які проходять рядок за кожний крок. Стандартний режим відповідає приблизно 10 пкс/крок. Цей атрибут дозволяє регулювати швидкість руху рядка |
|
SCROLLDELAY = значення |
Визначає часовий інтервал (у мілісекундах) між кроками, за допомогою цього атрибуту можна змусити рядок рухатися ривками |
|
TRUESPEED |
Під час встановлення цього прапора (атрибута без значення) буде використано задане значення SCROLLDELAY. Якщо прапор не встановлено значення SCROLLDELAY |