Посилання та прив’язки
Посилання є частиною Web-сайту (створеного зазвичай за допомогою HTML, але не завжди), які вказують на інші ресурси – інші документи HTML, текстові файли, файли PDF, і т.д. Існують посилання, по яким браузер має переходити автоматично, створені за допомогою елементів link. Та існують також посилання, які користувач не зобов’язаний активувати. Вони називаються анкерами, і їх можна додавати в документ за допомогою елемента a.
Будь-який рядковий елемент у документі можна перетворити на анкерне посилання, додаючи навколо нього елемент a. Наприклад, в наступному документі HTML, текст Yahoo Developer Network перетворений на посилання (linkexample.html).01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Link Example </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
A link to the YDN
<a href="http://developer.yahoo.com">Yahoo Developer Network</a>
</body>
</html>
Анкер має декілька атрибутів, які можна використовувати: href – ресурс, на який вказує анкер (зовнішній файл або ID анкера). id – ID анкера, якщо анкер є метою, а не посиланням. title – додаткова інформація про зовнішній ресурс.
Давайте розглянемо спочатку найбільш важливі атрибути, а потім поговоримо про те, що можна зробити, щоб полегшити відвідувачам сприйняття посилань.
Зовнішні й внутрішні посилання.
Один з найбільших страхів керівників компаній, коли мова йде про Web-сайти компанії, полягає в тому, що люди покидають сайт передчасно. Це часто є причиною відсутності посилань на сторонні сайти (якщо тільки власники цих сайтів не платять гроші за право отримання направленого ним Web-трафіку). Поки давайте поговоримо про те, що роблять люди, щоб уникнути відходу відвідувачів зі свого сайту, і як ці заходи впливають на успіх сайту.
<a href="http://htmlbook.at.ua/">Це посилання на htmlbook.at.ua</a>
Прив'язка CSS до HTML-коду. Існує кілька способів прив'язки CSS в документі HTML. Найбільш кращим є спосіб прикріплення каскадних списків стилів окремим файлом з розширенням. Css. Так само властивості можна прописувати всередині документа у вигляді класів і застосовувати класи стилів до елементів сторінки, або прописувати css-властивості для елементів сторінки всередині тегів за допомогою властивості style = ""
Далі розглянемо кожен з цих способів. Винести опис стилів і класів CSS в файл
В html таблиця стилів css прив'язується в
теге <head> у вигляді:
<head> <link href="" type="text/css" rel="stylesheet"> </head>
href = ""-шлях до таблиці стилів css, указ-ся URL або просто ім'я CSS док-та, якщо він нах-ся в тому-ж каталозі, що і html док-т. type = "text / css"-тип завжди text / css rel = "stylesheet"-даний атрибут вкаже, що цей файл явл-ся таблицею стилів для html.
Запишемо в блокноті код: <head> <link href="stil.css" type="text/css" rel="stylesheet"> </head> <body> <a href="http:// брелок./">голвна сторінка</a> <a class="moj"href="http:// брелок /skript.html">готові скріпти і інструкції</a> </body> і збережемо його з ім'ям index.html
Створимо в блокноті новий документ, запишемо код: a: link {color: green; / * змінюємо колір всіх невідвіданих посилань на сторінці/}
a.moj {color: red / * створюємо новий клас для посилань * /}
Ми прикріпили файл списку стилів stil.css до документа index.html, вміст index.html буде виглядати як посилання нижче головна сторінка .
Форми
Форма - це елемент, який допомагає організувати контакт користувача з авторами сайту. Вони дозволяють отримувати інформацію про відвідувачів. Будь-яка інформація, введена в форму, може бути відправлена творцеві сайту.
Форми нагадують анкети: в них можна створювати поля, в які користувач сам вводить будь-яку інформацію, і поля-списки, де йому слід вибрати яку-небудь відповідь із запропонованих автором варіантів. Можливості форм по угрупуванню і поданням інформації дозволяють розмістити її найкращим чином.
Головне при створенні форм - стежити за тим, щоб поля були зручні для відповідей відвідувачів на ваші запитання.
Технічна функція форм полягає в тому, що вони передають дані від користувача до віддаленого серверу. Це дозволяє створювати системи реєстрації користувачів, форуми та гостьові книги. Для отримання і обробки даних форм використовуються мови веб-програмування (PHP, Perl). Зараз розглянемо, як оформляються форми на мові HTML.
Тег <FORM>
Основою будь-якої форми є тег <FORM>, який вимагає закриває тега. В одну форму можна включати поля, об'єднані логічно, оскільки одночасно на сервер можна відправляти дані тільки з однієї форми.
Головним атрибутом цього тега є атрибут ACTION, який вказує обробник даних для форми. Оброблювач - це файл, в якому описується, що потрібно робити з даними форми. Сам оброблювач може бути написаний будь-якою мовою, наприклад PHP.
Лістинг. Атрибут ACTION тега <FORM>
<html>
<head>
<title> Конструювання форм </ title>
</ head>
<body>
<form action="test.php">
</ form>
</ body>
</ html>
У лістингу файл обробки знаходиться за адресою test.php, саме йому і будуть передаватися всі дані, введені у форму.
Якщо значення атрибута ACTION не задається, то сторінка перезавантажиться, а всі елементи форми приймуть значення, задані за замовчуванням. Отже, така форма виявиться абсолютно марною. Значенням цього атрибуту є URL-шлях до файлу-обробникові на сервері.
Якщо написати програму-оброблювач форми неможливо, то можна зробити так, щоб заповнена відвідувачем форма приходила на вашу пошту. Для цього в якості значення атрибута ACTION слід вказати електронну адресу, на який повинна приходити форма. При цьому адреса повинна починатися з ключового слова mailto:. Для коректної обробки даних в цьому випадку необхідно вказати значення атрибута enctype = "text / plain".
При відправці форми відкриється поштовий клієнт, встановлений на комп'ютері користувача, і з'явиться пропозиція відправити дані форми в листі.
Лістинг. Надсилання даних форми по електронній пошті
<html>
<head>
<title> Конструювання форм </ title>
</head>
<body>
<form action="mailto:test@test.ru" enctype="text/plain">
</ form>
</ Body>
</html>
У лістингу наводиться код, який може використовуватися при відправці даних по електронній пошті.
У лист буде вкладений текстовий файл. У цьому файлі назвам полів форми будуть присвоєні значення, які ввів відвідувач. Це означає, що ви отримаєте текст наступного вигляду:
назва_поля = значення_ введене_ відвідувачем.
Ще одним обов'язковим атрибутом є атрибут METHOD. Цей атрибут задає спосіб передачі форми. При виборі методу відправки форми треба орієнтуватися на дані, які слід відправити разом з нею. При цьому в більшій мірі потрібно орієнтуватися на обсяг даних.
Існує два основні методи відправки форми: GET і POST. Розглянемо область застосування кожного з цих методів.
GET. Це найбільш поширений метод, який використовується для отримання даних з сервера. При використанні методу GET дані на сервер передаються через адресний рядок браузера. Цей метод також викликається, коли ви вводите адресу сайту в адресному рядку або клацаєте кнопкою миші на посиланні. При формуванні запиту до сервера всі змінні та їх значення формують послідовність виду www.mytestserver.ru/form.php?var1=1&var2=2, тобто імена та значення змінних приєднуються до адресу сервера після знака? і розділяються знаком &.
POST. Цей метод застосовується для відправки даних на сервер. Відправляються за цим методом дані не видно в заголовку URL, так як вони містяться в тілі повідомлення. Саме тому метод POST підходить для відправки інформації великих об'ємів і файлів.
Листинг. Атрибут METHOD тега <FORM>
<html>
<head>
<title>Конструирование форм</title>
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="post">
</form>
</body>
</html>
дана форма готова для передачи файлів та інформації великих розмірів.
Самостійно опрацювати питання. Створення таблиці.