Майстерклас Вебмастерінга! Веб-дизайн - хіба це складно?
Як же все-таки правильно називати створення сайтів вебмастерінгом або веб-дизайном?
Вебмастерінгом можна назвати саме верстку-програмування веб-сторінок.
А от створення простих сторінок, але красивих і мають оригінальний дизайн, навіть потрібно
назвати веб-дизайном. Ви майстер або дизайнер сайтів?
Для того, щоб створити сайт можна скористатися будь-яким HTML редактором або програмою,
здатної перетворювати створені документи у формат веб-сторінок. Також можна знайти ресурс,
який розмістить ваші фотографії і тексти відповідно до вашого смаку і побажань.
Але для того, хто цим займається серйозно буде достатньо і двох програм - простого текстового
редактора (подібного редактору "Блокнот" ОС Windows) і браузера (інтернет-оглядача).
Мова верстки веб-сторінок HTML
HyperText Markup Language - Мова розмітки гіпертексту
Мова HTML, за допомогою якого описується вміст веб-сторінки, є обраним та
ускладненим підмножиною SGML (Standard Generalized Markup Language).
Стандарт розмітки SGML спочатку був розроблений для текстових документів - він описує те,
як документ повинен виглядати на екрані або надрукованих на принтері. Але на сьогоднішній день,
з розвитком інфраструктури комунікацій з'явилося багато нових, в основному, мультимедійних можливостей.
З усього різноманіття HTML хотілося б надати вашій увазі саме важливе і потрібне.
1.Команди і стандарти мови HTML
У різних інших мовах програмування програма пишеться за допомогою команд (операторів).
Вміст же веб-сторінки формується за допомогою тегів
$$ Tag - ярлик, етикетка, хвостик, вушко, заяложена фраза, мітка (англ.) $$,
які можуть мати різні додаткові атрибути. Більшість тегів парні, але деякі
вживаються без пари.
Атрибути (і присвоєні їм значення) вписуються в перший (що відкриває) тег через пробіл.
Другий тег є, відповідно, закриває - він точно такий-же, - але з похилою рискою.
Вміст між тегами відображається по-особливому, залежно від того, що означають ці теги.
Воно як би "промарковано".
Термін тег вже досить прижився в російській мові, тому далі вживатися буде він, натомість
якомусь аналогічному російськомовному слову. Теги можна писати, не дивлячись на регістр символів -
тобто як маленькими, так і великими літерами.
Схема html сторінки виглядає так:
lthtmlgt;
ltheadgt;
ltbodygt; Вміст вікна перегляду
Збережена в файл html (імя_файла.html) ця сторінка в Інтернет браузері буде виглядати
приблизно як і текстовий файл формату txt (імя_файла.txt) з текстом "Вміст вікна перегляду".
У деяких текстових редакторах зберігаючи текст веб-сторінки у формат html потрібно вибирати в графі
тип файлу "всі файли" - Інакше у вас може вийде файл формату txt - імя_файла.html.txt
Вміст тегів ltheadgt; це заголовок документа.
Містить інформаційно-програмну частину сторінки. Може включати в себе скрипти програм-сценаріев-
установки стилів яких правил для елементів сторінки- заглавіе- дані для аналізаторів і т.п.
Теги ltbodygt; включають в себе вміст вікна.
Все, що укладено між ними - це безпосередньо сам зміст сторінки.
Основні теги ltbodygt; також мають і свої атрибути, що задають в даному випадку
правила відображення для всієї сторінки.
Атрибути body:
bgcolor =" " - Колір фону сторінки- text =" " - Колір тексту -
link =" " - Колір, яким позначаються переходи на інші документи - ссилкі-
vlink =" " - Кольори відвіданих ссилок- alink =" " - Колір активізованих ссилок-
background =" " -фоновое зображення;
Теги lttitlegt; з текстовим вмістом між - знаходяться між
тегів ltheadgt; додадуть сторінці заголовок, який відображається у верхньому рядку
інтернет-оглядача (в заголовку вікна).
lthtmlgt;
ltheadgt;
lttitlegt;
Моя проба пера
ltbody bgcolor ="yellow" text ="red"gt;
Я дуже радий, що ви це читаєте!
1.1.Цвета
Значення кольорів представляються як рядкові літерали (слова) або десяткові
або шістнадцяткові триплети RGB типу (RGB - Red Green Blue - Червоний Зелений Синій).
Десятковий триплет встановлює насиченість кожного з цих кольорів за шкалою від 0 до 255
(Або за шкалою від 0% до 100%). Шістнадцятковий являє собою вираз з 6 знаків
(Шістнадцяткових - 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F).
Перші 2 знаки - червоний, друга - зелений, треті - синій.
КОЛІР Десятковий триплет Шестнадцатерічний літерних підстановка
Червоний rgb (255,0,0) FF0000 red
Чорний rgb (0,0,0) 000000black
Білий rgb (255,255,255) FFFFFFwhite
І далі наведено список англомовних літеральних значень кольорів:
aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond,
blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue,
cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkkhaki,
darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen,
darkslateblue, darkslategray, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray,
dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold,
goldenrod, gray, green, greenyellow, honeydew, hotpink, indianred, indigo, ivory, khaki,
lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan,
lightgoldenrodyellow, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen,
lightskyblue, lightslategray, lightsteelblue, lightyellow, lime, limegreen, linen, magenta,
maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue,
mediumspringgreen, mediumturqoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin,
novajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen,
paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red,
rosybrown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue,
slateblue, slategray, snow, springgreen, steelblue, tan, teal, thistle, tomato, turquoise, violet,
wheat, white, whitesmoke, yellow, yellowgreen.
Рада! Для того, щоб колір фону гармоніював з малюнками - ви можете в графічному редакторі
використовувати функцію для взяття кольору (і його коду) з певної точки картинки.
Більшість серйозних програм для роботи з графікою мають таку можливість.
1.2.Універсальний локатор ресурсаURL
Uniform / Universal Resourse Locator - універсальний розміщення ресурсу.
Якісь зовнішні об'єкти / ресурси в HTML описуються за допомогою URL.
Фактично це просто адресу сторінки або об'єкта в web або на комп'ютері.
Як правило URL веб-сторінок починається з http: // що означає, що для отримання документа
з сервера використовувався протокол передачі гіпертексту (Hypertext Transfer Protocol).
Далі йде сам адресу ресурсу.
Якщо в тексті HTML сторінки замість URL задати просто ім'я файлу, то він стане останньою ланкою
в ланцюзі поточного колійного адреси (тобто стане останнім після косою риси / слеш в тому URL,
за якою знаходиться сторінка).
Приклад URL: https://asommer.narod.ru/
Увага !!! Бажано дотримуватися строчно-заголовне написання букв при написанні URL, оскільки не
всі браузери мають можливість змінити заданий URL для того, щоб перейти на найбільш схожий
ресурс. Хоча доменні імена сайтів як правило можна писати не дивлячись на регістр символів.
https://WWW.JERRYD1.COM/
1.3.Размери в HTML
Зазвичай розміри в HTML за замовчуванням значаться в пікселях px (Піксель - мінімальна одиниця градації
зображення. В пікселях зазвичай устанівлівается дозвіл монітора по вертикалі і горизонталі).
Можна встановлювати розмір у% - відсотках, які позначать розмір рівний відсоткам від істинного
розміру об'єкта або вікна документа.
Розміри шрифтів встановлюються цілим числом, яке вказує відносну величину шрифту.
1.4.Комментаріі
lt-- Коментар в одну строчку --gt;
ltcommentgt; А якщо текст знаходиться між такими ось тегами - то це теж коментар.
2.Основні теги і їх атрибути
Є кілька основних тегів і атрибутів, тільки за допомогою яких вже можливо створити просту,
але цілком пристойну web-сторінку.
ltpgt; - (Атрибути: align, title ...)
Ці теги обрамляють текстове вміст сторінки. Текстової абзац. Бажано завжди застосовувати їх,
якщо ви хочете вставити у веб-сторінку текст. Хоча звичайно, можна і просто написати який-небудь
текст - він і в цьому випадку теж буде присутній на сторінці.
Якщо в HTML тексті зустрічаються підряд кілька прогалин, то вони відображаються як один.
Переходи на новий рядок вчиняються коли текст в ширину займе всю вільну видиму частину вікна.
Якщо ж на початку тексту поставити ltpregt; а в кінці - тоді все абзаци і прогалини
в ньому зберігаються і він відображається як уже відредагований (preform).
lthtmlgt;
ltheadgt;
lttitlegt; Приклад
ltbody bgcolor ="# AB49C3" text ="white"gt;
ltpgt; приблизний текст приблизний текст приблизний текст
ltpregt; ltpgt;
З нового рядка продовження
цієї пропозиції.
Як видно з прикладу - теги ltpgt; і знаходяться між тегами ltpregt; і.
Багато інших теги можуть точно також розміщуватися між якими-небудь тегами, тобто бути "вкладеними" в них.
Якщо якісь теги включають в себе інші, то вони часто задають своє правило і для них. Досить
показовим прикладом є теги:
ltcentergt; Вміст вирівнюється на середину по горизонталі.
Всі компоненти сторінки, що знаходяться по HTML тексту між цими тегами - відображаються по центру.
lth1gt; , lth2gt; , lth3gt; ,
lth4gt; , lth5gt; , lth6gt;
(Атрибути: align, title ...)
Укладений між ними текст відобразиться текстовим заголовком певної величини,
відповідно з цифрою після літери h.
ltbrgt; Здійснює перехід на новий рядок (абзац). Необов'язковий в даному випадку
закриває тег додасть додатковий відступ.
ltimg src =" " gt; (Alt, tltle, align, width, height, border ...)
Відобразить графічне зображення на сторінці. Значенням src =" " є URL зображення.
Атрибут alt =" " задасть текст, який буде відображений при неможливості відобразити об'єкт,
або будуть виведений при наведенні курсором - як підказка.
lta href =""gt; (атрибути: target, title, tabindex ...)
Робить вміст активізується переходом на інший URL - так званої гіперпосиланням.
При натисканні на який-небудь об'єкт з вмісту цих тегів, що відображається на web-сторінці -
в поточне вікно завантажується новий документ (наприклад веб-сторінка), URL якого заданий у якості
значення href =" "
За допомогою атрибута target =" " можна задати вікно, в яке буде йти завантаження. Значення
_blank - щоразу створює нове вікно над поточним, _parent - вміст всього вікна повністю,
top - завантажує посилання у вікно над поточним, _self - завантажує сторінку в поточний фрейм.
(Зверніть увагу на знак підкреслення перед значенням атрибута.
Його наявність або відсутність може призводити до різних результатів)
Якщо ж вікна задано якесь ім'я, - його можна вказати для того, щоб завантаження йшла саме в нього.
Атрибут tabindex =" " - Повинен мати своїм значенням число, яке вказує черговість надання посиланням
фокусу введення при табуляції (при натисканні кнопки Tab)
lthrgt; (Align, width, size, noshade, color ...)
Відображає горизонтальну лінію. Атрибут width =" " - Встановить ширину лінії (в px або%).
Атрибут size =" " - Товщину лінії в пікселях. Атрибут-параметр noshade доданий в тег - вкаже,
що лінія буде відображатися не як тінь основного фону.
2.1.Основние атрибути
Опис тих атрибутів, які підходять до більшості тегів:
align =" " горизонтально позиціонує елемент.
Значення: left - зліва - center - по центру -right - праворуч;
justify - розтягне текст, якщо йому не вистачає трохи простору
width =" " і height =" " задають ширину і висоту об'єкту в px або%.
title =" " текст підпису підказки при наведенні курсором.
border =" " розмір обрамляє кордону в px.
Деякі атрибути тегів також поширюють свої правила на інші, укладені між ними теги.
lthtmlgt;
ltheadgt; ltbodygt;
ltp align ="center"gt; ОСЬ ВАМ ВСІМ ВЕЛИКИЙ ПРИВІТ!
lthr width ="55%" size ="5" noshadegt;
У прикладі лінія відображається по центру, так як тег, що вводить її в сторінку, знаходиться
між тегами ltpgt; і, які мають атрибут align =" " з присвоєним йому значенням center.
У наступному прикладі і в деяких наступних використовується файл графічного зображення,
який повинен бути розміщений в тій же папці, що і web-сторінка. В даному випадку це файл myphoto
формату jpg .Але якщо ви бажаєте використовувати файл іншого формату і імені - просто змініть в
лістингу програми myphoto.jpg на ім'я вашого файлу, або підставте будь-якої
відомий вам URL зображення.
(JPEG - Joint Photographic Expert Group - об'єднана група експертів з)
Увага !!! Файл малюнка може бути збереженим у формат jpg або jpeg, також ім'я формату
може бути написаним або прописними, або великими літерами. В HTML тексті правильним буде
вказати точне розширення файлу.
lthtmlgt; ltheadgt;
lttitlegt; Приклад звичайної сторінки
ltbody bgcolor ="gainsboro" link ="# 0000F0" vlink ="# FE00D8"gt;
lta href ="https://www.lycos.com"gt;
lth2gt; Шукайте-свищі мене в Lycos
ltbrgt;
ltcentergt; ltpgt; Чи не сумуйте ...
ltimg src ="myphoto.jpg"gt;
ltpgt; Програма HTML краще програми КПРС !!!
ltp align ="right"gt; Наші комп'ютери найбільші !!!
lthr size ="7" width ="75%" noshadegt;
3.Некоторие теги спеціального оформлення тексту
ltigt; - Відображають текст курсивом
ltbgt; - Виділяють текст як напівжирний
ltugt; - Підкреслюють текст
ltsmallgt; - Зменшують розмір шрифту на одиницю
ltbiggt; - Збільшують
ltsubgt; - Виводять текст як текст нижнього індексу
ltsupgt; - Як текст верхнього індексу
ltfontgt; (Size, color, face ...)
Зададуть укладеним між ними текстом - розмір, колір і шрифт, яким він буде відображатися.
Може бути зазначено кілька значень шрифтів через кому. У такому випадку при неможливості
відобразити текст першого шрифтом - він буде відображатися подальшим. Значенням розміру шрифту
може бути число (від 1 ...), або значення (що складається з знака + або - і числа) - вказує
на скільки він відповідно збільшується або зменшується відносно вихідного.
ltfont size ="2" color ="# FE45C3" face ="Tahoma, Comic Sans, arial"gt;
У текст можна вставляти символи за допомогою підстановок, що виглядають як: сімвольное_обозначеніе.
Або можна вставити символ, використовуючи його десятковий код в наборі символів ISO LATIN - # Десятічний_код
За допомогою символьних підстановок в текст можна вставляти дужки lt; і gt;
( lt; і gt; або lt; і gt; ) - Які при звичайному написанні іноді неправильно
інтропретіруются браузером.
Якщо в тексті кілька прогалин слідують підряд, то вони відображаються браузером як
один пробіл. Тому для того, щоб зробити додатковий пропуск існує
підстановка () Ще, наприклад, можна додати в текст знак копірайт -
© або ©
Ці підстановки є частиною розширення мови SGML (ISO 8879), що називається
XML (Extensible Markup Language - безрозмірний мова розмітки). Стандарт розмітки веб-сторінок
включає його називається XHTML. Мова XHTML є своєрідним продовженням HTML.
Перші 32 знака та 127 з набору символів ISO Latin зарезервовано для керуючих кодів.
Коди від 65 і до 90 мають заголовні букви латинського алфавіту, а від 97 по 122 - рядкові.
Всього в наборі ISO Latin 256 кодів (від 0 до 255). Які символи представляють інші коди
ви завжди зможете дізнатися, підставивши їх у текст вашої сторінки.
4.Табліци
Дуже часто для відносного позиціонування всього вмісту сторінки використовують таблиці.
Приміром, у лівій колонці розташовується меню, а в правій - інформація, яку надає
дана сторінка.
lttablegt; (Атрибути: width, height, border, align, bgcolor ...) - ці теги
створюють таблицю. У них полягають рядка / ряди таблиці lttrgt ;, в яких містяться
стовпці / колонки осередків lttdgt; . Сусідні осередки взаємопов'язані між собою. Вони можуть бути
об'єднані між собою по горизонталі за допомогою атрибуту colspan =" " , Що задає число об'єднаних
осередків, - і по вертикалі за допомогою аналогічного атрибута rowspan =" " . Можливо також задавати відстань
між вмістом комірки і її кордоном, використовуючи атрибут cellpadding =" " , І між окремими осередками -
атрибутом cellspacing =" " .
Схематична таблиця з одним рядом в якому дві колонки:
lttablegt; lttrgt; lttdgt; lttdgt;
lthtmlgt;
ltheadgt; lttitlegt; Таблиця
ltbodygt;
lttable cellpadding ="15" border ="2" bordercolor ="# 000080"gt;
lttrgt; lttd align ="center"gt; lth2gt; привіт світ!
lttd bgcolor ="# CE8F00"gt; ltpgt; МИРУ СВІТ
lttrgt; lttd width ="250px"gt; ltpgt; Краще місць у світі немає,
ніж мій диван та Інтернет lttdgt;
lttrgt; lttd colspan ="2"gt; ltimg src ="myphoto.jpg"gt;
Як видно з цього прикладу атрибути lttablegt; підходять також і для lttrgt; і для lttdgt.
Атрибут valign =" " , Який може володіти значеннями top, middle, bottom вертикально позиціонує
вміст комірки (якщо він застосований до тегам lttdgt; ).
ltdivgt; - Ці теги об'єднають свій вміст. Створять єдину компоненту з декількох
елементів сторінки.
Приміром весь вміст ltdiv align ="right"gt; буде притиснуто до правої сторони
сторінки. До всіх тегами, які знаходяться між цими буде застосовано властивість позиціонування, задане
за допомогою атрибуту align ="right".
ltfieldsetgt; - створять рамку для свого вмісту.
ltlegendgt; - Текст, укладений між ними, задає рамці супутню підпис.
Теги повинні бути вкладеними в ltfieldsetgt;
5.Звук і відео
ltimg dynsrc =" "gt;
Можна вставляти в сторінку відеоролик. Як і файл графічного зображення відео файл впроваджується з
допомогою тега ltimggt; , Але URL задається за допомогою атрибута dynsrc =" " . Є також специфічні
атрибути. Атрибут loop =" " задає число повторів програвання. Для нескінченного повтору потрібно задати
значення "-1" .
Атрибут loopdelay =" " задасть затримку між повторами в мілісекундах.
Атрибут start =" " значенням mouseover вкаже, що файл почне програватися при наведенні на нього мишкою.
ltimg dynsrc ="mybirthday.avi" loop ="3"gt;
Також відеоролик можна вставити в сторінку тегами, якими впроваджуються якісь сторонні об'єкти
для перегляду за допомогою відповідних їм додатків. У цьому випадку Відеовставка буде і виглядати
як вбудований в сторінку об'єкт, а не як один з елементів сторінки.
ltembed src =" "gt;
Зрозумілий атрибут autostart =" " володіє значеннями true або false (автоматичний старт - дозволити
чи ні)
ltbgsound src =" " gt; (Loop, loopdealy, volume, balance ...) - додасть сторінці фоновий музичний
супровід значенням src =" " є URL програється аудіо файлу. Більш гучне звучання лівої
або правої колонки (баланс) задається за допомогою атрибута balance =" " , Значенням якого може бути
позитивне або негативне число. Гучність може встановлюватися різної за допомогою volume =" ".
Чим менший негативний число є значенням цього атрибуту - тим тихіше буде гучність. Якщо
значення 0, то гучність нормальна.
6.1.Фрейми
Можливе створення HTML сторінки складається з декількох ресурсів. Для цього можна розбити вікно
перегляду браузера на декілька віконець (на окремі області з окремими документами - на фрейми).
У такому випадку замість основних тегів ltbodygt; слід використовувати теги ltframesetgt;
. Атрибут відкриває тега cols =" " вкаже ширину фрейму (або фреймів) по горизонталі
(У% або px через кому), а аналогічний атрибут rows =" " - По вертикалі. Після чого фреймам по порядку
задається вміст за допомогою тегів ltframe src =" " gt; , Де значенням src є URL. Атрибут
framespacing =" " задасть значенням пікселів проміжок між фреймами (відступ).
ltframe src =" "gt; (Атрибути: name, scrolling, noresize, border, marginwidth, marginheight ...)
Тегіltnoframesgt; обрамляють альтернативне вміст вікна, яке буде
відображено, якщо браузер користувача не розпізнає фреймову структуру документа.
Передбачена необхідність вбудувати фрейм всередину якої-небудь сторінки як об'єкт. У цьому випадку
необхідний ресурс буде відображатися у вікні необхідного розміру - в потрібному місці сторінки. Робиться це
за допомогою тега ltiframe src =" " gt;
, задає URL відображуваного документа і закриває тега (Атрибути: name, scrolling, noresize, border, width, height,
align, marginwidth, marginheight ...)
6.2.Опісанія атрибутів
Атрибут name =" " - Задає ім'я фрейму для можливості на нього послатися.
Якщо потрібно, щоб завантаження посилання йшла в якийсь конкретний фрейм, то його ім'я згадується
в атрибуті target =" ".
Атрибут border =" " - Значенням yes або no (або 0 або 1) вкаже наявність або відсутність кордонів у фрейма.
Атрибут scrolling =" " управляє відображенням смуг прокрутки. Значеннями можуть бути: yes, no, auto.
Атрибут-параметр noresize позначить своєю наявністю неможливість змінювати розміри кордонів.
marginwidth =" " і marginheight =" " ширина і висота відступу вмісту фрейма від полів відповідно.
lthtmlgt;
ltheadgt; lttitlegt; Фрейми
ltframeset cols ="450, *"gt;
ltframe src ="https://www.yandex.ru" scrolling ="no"gt;
ltframe src ="https://www.rambler.ru" name ="fr2"gt;
ltnoframesgt; ltpgt;
Ваш оглядач Кадр не поддержівает.ltbrgt;
Дуже шкода, так як з фреймами ця сторінка більш інформативна.
lth2gt; lta href ="nofr.html"gt; Варіант сторінки без фреймів
7.Дінамічно рухоме вміст сторінки
ltmarqueegt; - надають їх вмісту ефект руху. Атрибути:
behavior =" " - Визначає тип руху. Значення можуть бути: scroll, slide, alternate.
direction =" " - Визначає напрямок руху. Значення: left, right, up, down.
scrollamount =" " - Задає швидкість руху числом від 1 до 10.
scrolldelay =" " - Задає інтервал між кроками.
loop =" " - Кількість повторів руху ( "-1" - Нескінченно)
8.Екстра можливості посилань на інший URL
lta href =" "gt; створюють посилання на інший URL. Можливо також активізувати встановлену
на комп'ютері користувача програму для написання листа із заданим адресою і темою.
Для цього в значення href =" " необхідно підставити конструкцію:
mailto: адреса e-mail? subject = тема листа
lta name =" імя_якоря "gt; - Зі свого вмісту створюють "якір" з присвоєним ім'ям -
тобто задають саме даного місця документа URL, що складається з поточного URL плюс відокремлюване знаком
# (Хаш або решітка) присвоєне якоря ім'я.
Таким чином отримуємо URL фрагмента документа - фрагментарний URL.
При активізації посилання на таку адресу браузер не просто завантажує сторінку, але і відображає у верхній
видимої частини вікна те місце сторінки, якому заданий якір. Якщо якір знаходиться на поточній сторінці,
то сторінка не перезавантажується, але у видимій частині вікно примусово відображається його вміст. Атрибут
name =" " задає якоря унікальне ім'я. Для того, щоб послатися на це посилання потрібно згадати це ім'я в
значенні href =" " з стоїть попереду знаком решітки.
lta href ="# Імя_якоря"gt;
Можливо використовувати різні частини (сегменти) об'єкта як розрізняються гіперпосилання на інші
документи. Карта розташування на документі різних посилань створюється за допомогою тегів:
ltmapgt; Між ними описуються області в яких знаходяться посилання.
ltarea href =" " gt; з атрибутами shape =" " і coords =" "
Атрибут shape визначає тип застосовуваної системи координат для виділення частини об'єкта. coords - це
відповідні координати.
shape ="rect" coords ="x1, y1, x2, y2" - Прямокутник
shape ="circle" coords ="x, y, d" - Коло
shape ="poly" coords ="x1, y1, x2, y2, x3, y3 ... - ... x1, y1" - Багатокутник
За допомогою атрибута name =" " , Впровадженого в відкриваючий тег ltmapgt; карті розташування посилань
задається ім'я. Карта застосовується до об'єкта за допомогою присвоєння йому атрибута usemap =" " , В якому
вказується ім'я застосовуваної карти (після знака #).
lthtmlgt;
ltheadgt;
lttitlegt; Екстра можливості посилань
ltbody bgcolor ="#CCDDCC" link ="# 0000F0" vlink ="# FE00D8"gt;
lta name ="hippo"gt; ltpgt; Два варіанти посилання
ltimg src ="myphoto.jpg" usemap ="# Kar1" width ="500" height ="600"gt;
ltmap name ="kar1"gt;
ltarea href ="https://www.yahoo.com" shape ="rect" coords ="1,1,150,150"gt;
ltarea href ="https://www.msn.com" shape ="rect" coords ="350,350,500,600"gt;
lth2 align ="center"gt;
lta href ="mailto: [email protected]? subject = FUN"gt;
Послати e-mail Біллу Гейтсу:-)
ltpgt; lta href ="#hippo"gt; Вгору на початок сторінки
Створить з верхнього лівого кута малюнка посилання на www.yahoo.com, а з нижнього правого -
на www.msn.com. При натисканні на текстовий рядок "Послати e-mail Біллу Гейтсу" запуститься поштова
програма в режим готовності для написання листа - з уже підставленим адресою [email protected]
в рядку куди, і темою листа FUN. У самому низу сторінки - фрагментарна посилання наверх.
Якщо задати посиланням ім'я за допомогою ідентифікатора id ="прідуманное_імя" , То об'єкти сторінки знаходяться
між тегами ltlabel for ="прідуманное_імя"gt; будуть ототожнюватися з цією посиланням,
і при натисканні на них - активізувати її.
9.1.Некоторие елементи введення даних і управління
Елементи управління також як і форми введення даних як правило використовуються будь-якими скриптовими
програмами, або вони передають інформацію зазначену в них програмами серверної сторони CGI-додатків
(Common Gateway Interface).
lttextareagt; - створюють текстову область.
(Атрибути: name, rows, cols, wrap, disabled, readonly, tabindex ...)
ltselectgt; (атрибути: name, size, multiple, disable, tabindex ...) - створюють
випадає список елементи якого створюються знаходяться між ними тегами
ltoptiongt; (Атрибути: selected, value) - вмістом яких є текст елемента
списку.
ltinput type ="text"gt; - Створює поле введення тексту.
ltinput type ="password"gt; - Створює поле введення пароля.
ltisindex prompt ="Текст запрошення"gt; - Створює поле введення даних з текстом опису.
(Вони володіють атрибутами: name, value, disabled, readonly, maxlength, tabindex, size ...)
ltinput type ="hiddengt; - Створює приховане поле зберігає інформацію.
ltinput type ="file"gt; - Створить віконце з кнопкою для можливості додавання файлу.
ltinput type ="checkbox"gt; - Створює віконце перемикача.
ltinput type ="radio"gt; - Створює один перемикач з групи. Атрибут name =" " , Що задає ім'я -
зарахує перемикачі з однаковим ім'ям до однієї групи.
(Вони володіють атрибутами: name, value, checked, disabled, size, readonly ...)
ltinput type ="button"gt; - Створить кнопку.
ltinput type ="submit"gt; - Створить кнопку відправки даних.
ltinput type ="reset"gt; - Створить кнопку очищення інформації.
ltinput type ="image" src =" "gt; - Створить кнопку з фоном із графічного зображення.
(Їх атрибути: name, value, disabled, size ...)
9.2.Опісаніе атрибутів
value =" " - Містить відображуваний текст або текст за умовчанням або приховане значення елемента.
name =" " - Власне ім'я елемента
checked або selected - активізують елемент при створенні.
disabled - вимкне елемент для використання.
readonly - позначить, що елемент тільки для читання (відображення).
multiple - покаже одразу кілька значень. Зробить список розкритим.
maxlength =" " - Задасть максимально можливе число символів при введенні.
rows =" " і cols =" " - Ширина і висота в кількості символів.
size =" " - Задасть розмір елементу.
wrap =" " - Значенням off вкаже на те, що всі відобразиться без переносів, в один рядок. Значення
physical відобразить текстовий вміст з переходами на новий рядок. Якщо використовується значення virtual -
то абзаци видно тільки зовні, а на сервер відправляється цілий рядок.
При наявності будь-якого елементу управління в тегах ltlabelgt; - Всі їх вміст при натисканні
буде активізувати цей елемент управління. Або, якщо елементу задано ідентифікує ім'я атрибутом
id =" " , То вміст тегів ltlabel for ="ідентифікує ім'я"gt; з цим ім'ям,
зазначеним в атрибуті for =" " буде активізувати його.
10.Мета дані
Є такі теги, функцією яких є зберігання даних. Необхідною інформацією для сторінки,
яка буде розміщена в web, є інформація, яка використовується пошуковими машинами. Ось два найважливіших
тега, що розміщуються в заголовку сторінки (між ltheadgt; і):
ltmeta name ="keywords" content =" " gt;
Між лапками в content =" " вписуються через кому слова, що характеризують зміст сторінки.
Приблизно 15-і слів достатньо. Пошукові машини будуть виводити результатом сторінку на запит про
пошуку будь-якого з цих слів.
ltmeta name ="description" content =" " gt;
Вмістом content =" " є короткий текст, що описує сторінку. Бажано містить не більше 200 знаків.
І ще один, який несе в собі, побажання автора сторінки з приводу індексування пошуковими машинами.
Програми-роботи пошукових машин, переглядаючи інформацію на вашій сторінці будуть мати їх до відома.
ltmeta name ="robots" content =" "gt;
Наступні значення content означають:
all - індексувати сторінку і її посилання
index - індексувати тільки сторінку
noindex - не індексувалась сторінку
follow - індексувати посилання
nofollow - не індексувалась посилання
А ось, до речі, і той тег, в якому можна залишити інформацію про автора.
ltmeta name ="author" content ="Ім'я автора"gt;
Подібних тегів багато. Хотілося б тільки згадати про тезі, що надає дані про мову на якому
написана сторінка.
ltmeta name ="content-language" content ="russian"gt;
Тут мовою змісту сторінки є російська.
Мета дані можуть не тільки нести в собі інформацію, але і змінювати вміст сторінки. Наступний тег
оновлює вміст сторінки перезавантажуючи її кожні 45 секунд.
ltmeta http-equiv ="refresh" content ="45"gt;
А також з його допомогою можна зробити редирект (перехід) з одного поточної сторінки на іншу через
певний проміжок часу.
ltmeta http-equiv ="refresh" content ="20- URL = URL на який відбувається перехід"gt;
Значенням URL є адреса, яка завантажиться в поточне вікно через 20 секунд.
Для того, щоб перетворити web-сторінку в повноцінний web-документ необхідно в самий початок html
тексту підставити конструкцію:
в якій згадується основна мова документа (у нашому випадку EN - англійська) і версія мови HTML
використовується для створення (у прикладі це 4.0) .W3C означає, що документ оформлений відповідно
зі стандартом всесвітнього консорціуму (World Wide Web Consortium).
Всі стандарти web і їх опису, а також версії HTML, ви можете знайти на сайті https://www.w3.org
