Методика вивчення мови HTML та основ WEB-дизайну

1 2 3

Вінницький обласний інститут післядипломної освіти педагогічних працівників

Кабінет інформатики та обчислювальної техніки

Білик О.О.

Пойда С.А.

Петрович С.Д.

Методична розробка

Методика вивчення мови HTML та основ WEB-дизайну

Вінниця – 2003

Білик О.О., Пойда С.А., Петрович С.Д.

Методика вивчення мови HTML та основ WEB-дизайну. Методична розробка.

Затверджено радою кабінету інформатики та ОТ Вінницького обласного інституту ПОПП (протокол № 2 від 14.04.2003 р.).

Рецензенти: к.т.н., доцент Вінницького державного технічного університету

Романюк О.Н.

Учитель фізико-математичної гімназії № 17 м.Вінниці Пасіхов Ю.Я.

Практично з появою перших комп'ютерів виникла проблема передачі інформації між ними. І способи були знайдені - це різні носії і кабельний спосіб. Були написані програми, що дозволяють передавати й одержувати дані і, практично відразу, виникла друга проблема - проблема сумісності, тобто як змусити два і більш комп'ютери, з'єднаних кабелем, працювати в локальній мережі. У 1999 році світова громадськість відзначила 30-річчя Intrnet. Офіційним днем народження мережі Intrnet вважається 2 січня 1969 року, коли Управління перспективних досліджень Міністерства оборони США ARPA (Advanced Research Project Agency) почало роботу над проектом зв'язку оборонних комп'ютерів.

І тільки набагато пізніше - у 1989 році випускник Оксфордського університету, бакалавр в області фізики - співробітник Європейського центру ядерних досліджень (CERN) Тім Бернес-Лі розробив і приступив до створення інформаційної служби World Wide Web. Він написав додаток клієнт/сервер (браузер). В основу всієї системи лягло поняття гіпертексту - тобто безліч окремих текстів, що мають посилання один на одного. Для роботи з цими текстами був створений спеціальний протокол HTTP - Hyper Text Transfer Protocol були позначені основні елементи мови розмітки HTML. Ця технологія дала величезний поштовх у розвитку мережі і мережа стала дійсно інтернаціональною.

Версії HTML

Із сорока з невеликим тегів HTML версії 1.2 (датованої червнем 1993 р.) лише три, до того ж і не рекомендованих до використання, тега насмілювалися натякати на фізичні параметри представлення документа. Уся розмітка була чисто логічною, і лише в описовій частині стандарту, що супроводжує формальне визначення тегів, можна було прочитати щось подібне: "у графічних броузерах дія цього тега може передаватися курсивним накресленням".

А першим (і довгий час єдиним) графічним броузером у ті далекі часи була програма Mosaic, розроблена, як і сам WWW, у науковій установі -- Національному центрі суперкомп'ютерних додатків США (National Center for Supercomputer Applications-NCSA). Так що немає нічого дивного в тому, що в цей "золотий вік" ніяких протиріч між офіційними стандартами і їхньою реалізацією в броузерах ще не існувало. HTML неквапливо розвивався, залишаючись у рамках парадигми структурної розмітки, і в квітні 1994 р. почалася підготовка специфікації наступної версії мови -- 2.0. Цим займався утворений у тому ж році Консорциум W3 (W3 Consortium, скорочено W3C), що успадкував від CERN верховну владу й авторитет у світі WWW.

В даний момент консорціум, що має статус "міжнародної некомерційної організації", поєднує понад 150 організацій-членів, у тому числі фірми Netscape, Microsoft і безліч інших. Однак у 1994--1995 р. його членами були майже винятково університети і наукові установи. Настільки "академічний" склад W3C позначався як на самих документах, що публікувались консорціумом, так і на процедурі (і особливо на термінах) їхнього прийняття. Досить сказати, що остаточний варіант HTML 2.0, єдиним серйозним удосконаленням, у якому був механізм бланків (форм) для відсилання інформації з комп'ютера користувача на сервер, був остаточно затверджений лише у вересні 1995 р., коли в W3C уже на повний хід йшло обговорення HTML 3 (чи, як його називали спочатку, "HTML+").

Мабуть, проект HTML 3 -- найяскравіша і неоднозначна сторінка в історії мови. Робота над ним почалася в березні 1995 р., і первісний варіант стандарту містив у собі багато цікавих нововведень -- теги для створення таблиць, розмітки математичних формул, вставки малюнків, приміток і ін. Але найголовніше -- HTML 3.0 був спробою розв’язати вже досить очевидне на той час протиріччя між ідеологією структурної розмітки і потребами користувачів, зацікавлених у першу чергу в гнучких і багатих можливостях візуального представлення.

Мова HTML розвинулася зі стандартного узагальненої мови опису документів SGML і є її похідною. Існують різні думки про те - вважати HTML мовою програмування чи ні. З погляду програмістів вона має досить простий синтаксис і є досить легкою у вивченні, але з іншого боку - для простого користувача іноді розуміння мови HTML може представлятися складною.

World Wide Web стрімко розвивається, програмне забезпечення для мережі застаріває й обновляється у виді всіляких доповнень, а з ними розвивається і сама мова HTML. Мова HTML знаходить застосування все частіше в областях, де раніш не застосовувалась, вона перестає бути тільки винятково мовою опису Web-сторінок. Microsoft вже в операційну систему Windows'98 впровадила інтеграцію з World Wide Web, що сильно змінює взаємодію користувача з операційною системою. Користувач, що працює в локальних мережах,тепер має можливість одержувати доступ до мережевої інформації, використовуючи браузер, а не диспетчер файлів, оскільки WEB-браузер може відображати не тільки документи, що підтримують HTML, а наприклад - вміст папок чи таблиці Excel.

Шляхи подальшого розвитку.

Вже в 1999 році у світі обсяг продажу персональних настільних комп'ютерів знизився приблизно на 40%, а продаж кишенькових портативних пристроїв стрімко пішов вгору. На цей сектор ринку природно звернула свої погляди і Microsoft. Виникає саме по собі питання - на що особливо необхідно звернути увагу при вивченні мови сьогодні, щоб бути у всеозброєнні вже в недалекому майбутньому.

У 1997 році Консорціум W3C опублікував специфікацію мови HTML 4.0, у якій зазначено які з елементів застаріли і не рекомендуються до подальшого застосування (APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU, S, STRIKE і U), але введено нові перспективні елементи й атрибути (ABBR, ACRONYM, BDO, BUTTON, COLGROUP, DEL, FIELDSET, FRAME, FRAMESET, IFRAME, INS, LABEL, LEGEND, NOFRAMES, NOSCRIPT, OBJECT, OPTGROUP, PARAM, SPAN, TBODY, TFOOT, THEAD і Q), що пропонується використовувати надалі.

При цьому Консорціум W3C позначив тенденцію розвитку мови HTML усе більш в бік логічного форматування тексту. Була дана можливість ідентифікації практично будь-якого елемента чи групи елементів по імені, були описані основні атрибути для подій. Однозначно було вказано на платформо-незалежність мови HTML, іншими словами було підкреслено, що HTML не є мовою візуального створення текстів, а є мовою логічної розмітки.

Майже всі атрибути, що визначають представлення документа HTML (колір, вирівнювання, шрифти, графіка і т.д.) є небажаними, замість них рекомендується використовувати таблиці стилів і класи. Атрибути id і class дозволяють авторам призначати елементам інформацію про ім'я і клас для таблиць стилів, посилань, скриптів, оголошення об'єктів, загальної обробки документа і т.д., а так само очікується, що задачу представлення таблиць у найближчому майбутньому візьмуть на себе таблиці стилів.

HTML 4.0 підтримує більш великий набір дескрипторів пристроїв, так що автори можуть писати таблиці стилів у залежності від пристроїв. Багато елементів тепер мають атрибути для подій, що можуть поєднуватися зі скриптами і при настанні події виконується скрипт (наприклад, при завантаженні документа, при натискані миші і т.д.), це лягло в основу підвищення інтерактивності документів, дало можливість користувачам динамічно змінювати вид і зміст документів.

З'явилася можливість говорити про надбудову до мови HTML (Dynamic HTML ), що дозволяє створювати інтерактивні Web-сторінки без допомоги модулів, що підключаються, не збільшуючи трафік. Застосування нових рішень спрямовано саме на зниження кількості звертань до сервера тобто на зниження трафіка, що так необхідно в умовах росту популярності різних переносних пристроїв, які дають можливість доступу в мережу.

Отже, для початку потрібно створити на диску окрему директорію (папку) для майбутньої сторінки.

D:\перші кроки\

Тепер відкриємо блокнот (notepad) і скопіюємо туди наступний текст:

Приклад 1

<html>
<head>
<title>Мій перший крок </title>
</head>
<body>
Привіт, це моя перша сторінка.
<br>
Ласкаво просимо!

</body>
</html>

А тепер збережемо цей документ, надавши йому ім’я *.html

D:\перші кроки\index.html

Тепер відкриємо, допустимо, Internet Explorer (не закривайте блокнот, він нам ще знадобиться).

Файл - Відкрити - кнопка Огляд - Наш документ (index.html).

Якщо ми щось змінили в нашому *.html документі (у блокноті), щоб подивитися як це виглядає в Internet Explorer, треба не забувати натискати в IE (Internet Explorer) кнопку ОБНОВИТИ (теж саме стосується інших броузерів). Якщо змін не видно, це значить, що ви десь щось неправильно написали, чи забули зберегти документ).
Html не є мовою програмування, вона призначена для розмітки текстових документів (тобто для форматування тексту). Те, як буде виглядати ваш текст, визначають мітки (tags чи тэг).

Приклад тэга: <br> (перенос тексту на інший рядок, щось схоже на Enter.
Тобто усе, що знаходиться між < і > - це тэг. Текст, що не знаходиться між такими дужками < > видно при перегляді в броузері.

Як ми бачимо на нашому прикладі, тегів багато і вони різні. Існують обов'язкові тэги. Більшість тегів парні. Але є і непарні теги.

<html>

Цей тег повинний відкривати документ. Якщо є відкриваючий тег, то повинний бути і закриваючий:

</html>

<head> </head> - голова документа
<body> </body> - тіло документа

Всі теги, розташовані між <head> </head>, це щось назразок службової інформації Наприклад

<title> Мій перший крок. </title>

задає назву вікна html документа.
Теги, розташовані між <body> </body> - безпосередній зміст документа.

Тепер ми спробуємо навчитися розфарбовувати. Для початку нам потрібна буде палітра кольорів. Ось вона:
Існує 16 мільйонів відтінків цих кольорів. Вони задаються спеціальними шіснадцятковими кодами, як це прийнято у графічних редакторах, наприклад, один із відтінків сірого кольору має код #ff7800

Black- чорний Navy- темно-синій Silver- сірий Blue- синій Maroon- малиновий Purpule- бузковий Red- червоний Fushsia- рожевий

Green- зелений Teal- бірюзовий Lime- яскраво-зелений Aqua- блакитний Olive- темно-зелений Gray- темно-сірий Yellow- жовтий White- білий

Але повернемося до нашої сторінки. Давайте зафарбуємо слова Ласкаво Просимо в червоний колір.

<font color="red"> Ласкаво просимо! </font>

Тепер спробуйте замість”red” попідставляти інші значення кольорів.

Приклад 2

<html>
<head>
<title>Мій перший крок </title>
</head>
<body>
Здрастуйте, це моя перша сторінка.
<br>
<font color="red"> Ласкаво просимо! </font>
</body>
</html>

Тег <font></font> - багатофункціональний. Ним може задаватися не тільки колір тексту в конкретній частині документа, але і розмір шрифту, і вид шрифту (Arial), але про це трохи пізніше.

Як же ще задавати колір в документі? - згадаємо про тег <body>:

Це значить, що весь текст сторінки буде синім, крім тексту, для якого ми спеціально прописали <font></font> (якщо колір у <body> не задавати, то за замовчуванням він буде чорним).

Приклад 3

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="blue">
Здрастуйте, це моя перша сторінка.
<br>
<font color="red"> Ласкаво просимо!</font>
</body>
</html>

З кольорами для тексту ми розібралися, тепер подумаємо про тло.

Колір тла встановлюється у вже нам знайомому тегі <body>:

Для наочності тут прописаний чорний колір, ви ж свій документ можете розфарбувати будь-яким іншим (якщо колір у <body> не вказувати, то за замовчуванням він буде білим, хоча іноді колір за замовчуванням може бути іншим, тому краще прописуйте колір тла в body).

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="blue" bgcolor="black">
Здрастуйте, це моя перша сторінка.
<br>
<font color="red"> Ласкаво просимо!</font>:)
</body>
</html>

Зверніть увагу: ми одночасно можемо прописати в тегі <body> і колір тексту в документі, і колір тла (це про усякий випадок, якщо ви ще не зрозуміли:).

У цій главі ми поговоримо про параграфи. Параграфи вводяться тегом:

<p></p>

За допомогою параграфів ми можемо центрувати текст:

<p align="center">текст</p>

За допомогою параграфів ми можемо вирівняти текст по лівому краю:

<p align="left">текст</p>

Чи по правому краю документа:

<p align="right">текст</p>

Тепер уведемо параграфи в наш документ і подивимося наочно, що вийде (у наш приклад я підставив параграф з параметром центрування тексту (center), спробуйте підставити в параграф інші параметри зі значеннями Left чи Right).

Приклад1

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<p align="center">
Привіт, це моя перша сторінка.
<br>
<font color="#CC0000"> Ласкаво просимо!</font>:) </p>
</body>
</html>

Пам’ятайте, що текст у документі, якщо не задавати параграфи, завжди вирівнюється за замовчуванням по лівому краю. Також запам'ятаєте, що до параграфа вже не потрібний тег <br> для переносу рядка, тому що перенос задається за замовчуванням. Але що робити, якщо вам цей перенос ніяк не потрібний? Є тег альтернативний <p align="center">:

<center>текст</center>

Приклад2

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
Здрастуйте, це моя перша сторінка.
<br>
<font color="#CC0000"> Ласкаво просимо!</font>:) </center>
</body>
</html>

Усе було б добре, і можна було б піти далі, якби в тезі <p> не існувало б ще і четвертого, але небезпечного значення (атрибута):

<p align="justify">текст</p>

Він вирівнює текст по обох краях документа. Чому ж це небезпечний атрибут? Справа у тому, що він не працює у старих версіях броузерів, тому в них, хто використовує старі броузери, він може не діяти (не відображатися).

Приклад3

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
Здрастуйте, це моя перша сторінка.
<br>
<font color="#CC0000"> Ласкаво просимо!</font>:) </center>
<p align="justify">
Я зовсім недавно почав(а) знайомитися з віртуальним життям, але мені за давньою традицією теж захотілося створити свою домашню сторінку для моїх нових віртуальних друзів і знайомих, щоб вони могли подивитися мої фотографії, почитати про мене, написати кілька рядків у мою гостьову книгу. А може і просто випадковий відвідувач раптом захоче познайомиться зі мною, і в мене з’явиться ще один віртуальний друг.
</p>
</body>
</html>

Далі ми навчимося виділяти текст за допомогою заголовків і довідаємося про ще одну функцію тега <font></font>.

Отже, ми вже трохи вміємо форматувати текст, але подивіться на наш документ. Мені здається, що фраза "Привіт, це моя перша сторінка" так і проситься, щоб її виділили. Для цього можна використовувати заголовки:

<H1> текст </H1>

<H2> текст </H2>

<H3> текст </H3>

<H4> текст </H4>

<H5> текст </H5>

<H6> текст </H6>

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

У приклад я ввів заголовок третього рівня <H3></H3>. Подивіться, що вийшло.

Приклад4

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3> Привіт, це моя перша сторінка </H3>
<br>
<font color="#CC0000"> Ласкаво просимо!</font>:) </center>
<p align="justify">
Я зовсім недавно почав(а) знайомитися з віртуальним життям, але мені за давньою традицією теж захотілося створити свою домашню сторінку для моїх нових віртуальних друзів і знайомих, щоб вони могли подивитися мої фотографії, почитати про мене, написати кілька рядків у мою гостьову книгу. А може і просто випадковий відвідувач раптом захоче познайомитися зі мною, і в мене з'явиться ще один віртуальний друг
</p>
</body>
</html>

Заголовки призначені для виділення невеликої частини тексту (рядка, фрази), АЛЕ, якщо ви захочете виділити великий фрагмент тексту, або тільки одне слово, без переносу рядка, то як бути? З заголовками таке не пройде, тому згадаємо про тег <font></font>:
<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст </font>
<font size="-2"> текст </font>

Отже, параметр size задає розмір шрифту, але, на відміну від заголовків, текст не виділяється жирним шрифтом (про курсив, жирний шрифт і так далі поговоримо пізніше) і немає примусового переносу.

Приклад5

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здрастуйте, це моя перша сторінка</H3>
<br>
<font color="#CC0000"> Ласкаво просимо!</font>:) </center>
<p align="justify">
Я зовсім недавно почав(а) знайомитися з віртуальним життям, але мені за давньою традицією теж захотілося створити свою домашню сторінку для моїх нових віртуальних друзів і знайомих, щоб вони могли подивитися мої фотографії, почитати про мене, написати пару рядків у мою гостьову книгу. А може і просто випадковий відвідувач раптом захоче познайомитися зі мною, і в мене з'явиться <font size="+1"> ще один віртуальний друг </font>
</p>
</body>
</html>

У нашому прикладі я виділив слова “ще один віртуальний друг”.

Розміри символів шрифту можуть бути від 1 до 7. Розмір 3 вважається стандартним, він орієнтовно відповідає 10 пунктам. Розмір 7 – найбільший. Число 2 як значення параметра size означає другий розмір шрифту, число +2 означає, що розмір шрифту має бути на дві одиниці більший, аніж стандартний, тобто п’ятий, число –2 означатиме перший розмір шрифту – на дві одиниці менший ніж стандартний.

Тепер настав час поговорити про те як робиться курсив, підкреслений текст, напівжирний текст і фіксований текст:

<b> Напівжирний текст </b>
<i> Похилий текст (курсив) </i>
<u> Підкреслений текст </u>

Тут все просто, можете їх самі понатикати, де хочеться для проби, а в прикладі я знову помучу віртуального друга:

Приклад1

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Привіт, це моя перша сторінка</H3>
<br>
<font color="#CC0000"> Ласкаво просимо!</font>:) </center>
<p align="justify">
Я зовсім недавно почав(а) знайомитися з віртуальним життям, але мені за давньою традицією теж захотілося створити свою домашню сторінку для моїх нових віртуальних друзів і знайомих, щоб вони могли подивитися мої фотографії, почитати про мене, написати пару рядків у мою гостьову книгу. А може і просто випадковий відвідувач раптом захоче познайомитися зі мною, і в мене з'явиться <b> ще один віртуальний друг </b>
</p>
</body>
</html>

Тепер кілька слів про фіксований шрифт. Що це таке за шрифт? Це шрифт із символами однакової ширини, тому то і зветься фіксованим. А тег для нього наступний:

<tt> fixed - фіксований шрифт </tt>

В наш приклад я його вводити не буду (самі, якщо хочете), тому що приклад наш і так фіксованим шрифтом виділений.

<pre> текст (купа пробілів) текст </pre>

Текст між <pre> і </pre> теж фіксований, але отут є одна велика особливість, він не тільки фіксований, але ще і виводиться з точністю до пробілу так, як ви його набрали в блокноті, цей дивний тэг може бути корисний, допустимо, для форматування віршів.
Запам'ятаєте, до одного фрагмента тексту може застосовуватися відразу кілька тегів:

<tt><b><i> текст </i></b></tt>

У нашому прикладі текст фіксований, напівжирний і курсивний, так що не бійтеся використовувати різні комбінації тегів, експериментуйте, але з розумом.

Хочу також згадати про один цікавий атрибут тэга <font>:

<font face="ARIAL"> текст (шрифт Arial)</font>

За допомогою атрибута face у нашому прикладі я задав шрифт Arial. У такий спосіб ви можете задати і який-небудь екзотичний шрифт для своєї сторінки, але це трохи ризиковано, тому що у вашого відвідувача може не виявитися такого шрифту, тому все-таки краще задавайте стандартні (Arial, Times Roman, Courier і інші).

Які ж ще теги визначають стиль шрифту, використовуються для його форматування? Це - Big, Small, Strike (чи S), Sub і Sup.

1) Big представляється великим шрифтом, а Small малим шрифтом щодо основного тексту:

<small> Малий </small>
Нормальний текст
<big> Великий </big>

2) Тэги Strike і S представляють текст перекресленим шрифтом:

<strike> ~~Перекреслений~~ </strike>
<s> ~~Перекреслений~~ </s>

Яка різниця між S і Strike? Та ніякої. Просто один з них з'явився в більш ранній специфікації, а інший в більш пізній, але обоє вони мають право на життя.

3) Тэги Sup і Sub - визначають верхній і нижній індекси. Sup - верхній, Sub - нижній. Де вони можуть використовуватись? Ну, наприклад при написанні якої-небудь формули - H₂O

Щоб отримати вираз H₂O, пишуть: Н<SUB>2<SUB>O

Сторінка (сайт) не повинна представляти із себе супер навантаженого графікою “шедевру”, що важить сотні кілобайт, тому що це жорстоко, жодна жива душу не витримає подібного катування (завантажувати довго).

Вставляють картинки в документ так:

Замість my.jpg ми можемо підставити ім'я будь-якої картинки (me.gif, main.png). Саме головне зрозуміти, що все розташоване між лапк - посилання (шлях до картинки). Наш приклад говорить про те, що картинка лежить у тому же каталозі (директорії, папці), у якій лежить і наш документ. Якщо картинка лежить у піддиректорії то посилання на нее буде виглядати так:

Якщо картинка лежить на рівень вище, а документ знаходиться в піддиректорії, то посилання на нее буде таке:

Якщо картинка знаходиться на іншому сайті, то шлях прописується повністю:

Для зручності скопіюйте картинку в ту ж директорію, що і документ, тоді плутанини буде менше.
Приклад1

Було б краще, якби текст акуратно розташовувався збоку від картинки. Далі, проте, як це зробити.

Для вдалого розташування картинки на сторінці існує параметр align:

Це означає, що картинка буде притиснута до лівого краю екрана, а текст буде обтікати її праворуч. Щоб зробити навпаки (картинка праворуч, текст ліворуч) треба прописати right:

Але цей не все: текст може розташовуватися внизу картинки (це за замовчуванням) - (1), посередине - (2), і вгорі - (3):

(1) - <img src="pr1.png" align="bottom">
(2) - <img src="pr1.png" align="middle">
(3) - <img src="pr1.png" align="top">

Крім параметра align існує ще кілька параметрів:

(1) - <img src="pr1.png" Vspace="10">
(2) - <img src="pr1.png" Hspace="30">
(3) - <img src="pr1.png" alt="моя фотографія">
(4) - <img src="pr1.png" width="100">
(5) - <img src="pr1.png" height="200">
(6) - <img src="pr1.png" border="5">

Тепер пояснення по пунктах.

(1) - параметр vspace - задає відстань між текстом і малюнком (по вертикалі). Відстань задається в пікселях (pixel - мінімальна одиниця зображення, крапка. Наприклад розширення екрана 800х600 - 800 на 600 крапок). У нашому прикладі відстань дорівнює 10 пікселям.

(2) - параметр hspace - теж задає відстань між текстом і малюнком, але по горизонталі. Відстань задається в пікселях. У нашому прикладі вона дорівнює 30 пікселям (крапкам).

(3) - параметр alt - короткий опис картинки. Якщо навести курсором миші на малюнок, і так потримати його (курсор) кілька секунд з’явиться опис картинки. У нашому випадку це буде фраза - "моя фотографія". Якщо параметр alt не задавати, опису не буде.

(4) - параметр width - ширина самої картинки (у пікселях). Якщо ширину не задавати спеціально, то за замовчуванням вона буде дорівнювати реальній ширині картинки.

(5) - параметр height - висота самої картинки (теж у пікселях). Так само як у випадку з width висоту (height) картинки можна і не задавати.

(6)-параметр border - рамка навколо самої картинки (у пікселях). Можна не задавати.

Усі параметри можуть вживатися одночасно один з одним, щоб уникнути плутанини продемонструю наочно на нашій сторінці. Введемо наступні параметри для нашої картинки:

Наша картинка буде притиснута до лівого краю екрана, текст буде обтікати її праворуч, відстань до тексту по горизонталі - 30 пікселів, по вертикалі – 5, і якщо ви наведете на картинку курсор, то з’явиться напис - "моя фотографія".

Приклад2

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Привіт, це моя перша сторінка</H3>
<br>
<font color="#CC0000"> Ласкаво просимо!</font>:) </center>
<p align="justify">
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотографія"> Я зовсім недавно почав(а) знайомитися з віртуальним життям, але мені за давньою традицією теж захотілося створити свою домашню сторінку для моїх нових віртуальних друзів і знайомих, щоб вони могли подивитися мої фотографії, почитати про мене, написати кілька рядків у мою гостьову книгу. <br><br> А може і просто випадковий відвідувач раптом захоче познайомитися зі мною, і в мене з'явиться <b> ще один віртуальний друг?:) </b><br><br> На фотографії зображений(а) я. Якість картинки не дуже гарна, на жаль, тому вона не чітка і розглянути риси мого обличчя дуже проблематично. Але в цілому помітно, що я цілком нічого<br><br> Якщо ти так теж думаєш, то давай як-небудь зустрінемося, побалакаємо, чайку поп'ємо в. Хто знає, може бути ми й у реальному житті станемо друзями
</p>
</body>
</html>

Раджу вам перш, ніж піти далі, попідставляти і інші параметри в наш приклад, задавати різне значення в пікселях і так далі - це вам допоможе краще засвоїти матеріал, усе-таки тема велика і вже не така проста.
От ми довідалися про те, як розташувати текст щодо картинки (+ ще кілька потрібних параметрів), але ми не говорили як розташувати саму картинку в центрі екрана (праворуч, ліворуч). Тут усе дуже просто, картинки як і текст можна розташувати за допомогою параграфів (<p></p>), це наочно представлено в нашому прикладі.
Картинку можна зробити тлом документа. Це прописується у відкриваючому тегі боді:

Параметр Background і вказує на те, де знаходиться фонова картинка, у нашому прикладі він вказує на те, що наша фонова картинка лежить у тій же директорії (папці), що і документ.
Але навіщо залишати параметр bgcolor, якщо є background? А раптом фонова картинка не завантажиться (уявіть, таке може статися), тоді самі зрозумієте навіщо.

Тепер настав час поговорити про посилання. Наша сторінка може складатися з декількох документів. Один з них головний (index.html чи main.html) - він відкривається першим і повинний обов'язково лежати на вашому сайті в інтернеті.
Інші документи ви можете називати як завгодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Вони усіх можуть лежати в одній директорії (папці), а можуть у різних.

Посиланням на ці інші документи (частини нашої страники) може бути текст (фраза,слово), а може бути і картинка.

Для початку створимо новий документ (у нашому прикладі prf.html) у тій же директорії (папці), де знаходиться наш головний документ index.html. Зміст документа видумайте самі, у вас для цього вже достатнє знання. Нехай prf.html - документ із вашими фотографіями. Тоді ми можемо фразу "подивитися мої фотографії" зробити посиланням на prf.html:

<a href="prf.html">подивитися мої фотографії</a>
Тэг <a></a> робить посиланням укладену в нього чи картинку фразу (текст). Принципи прописування шляху тут такі ж як у випадку з картинками:

(1) - <a href="prf.html">мої фотографії</a>
(2) - <a href="photos/prf.html">мої фотографії</a>
(3) - <a href="http://www.homepage.ru/prf.html">мої фотографії</a>

У випадку (1) документ лежить у тій же директорії (папці), що і документ, у якому ми посилаємося на prf.html, у випадку (2) документ лежить у піддиректорії /photos, у випадку (3) ми посилаємося на сайт http://www.homepage.ru, де лежить потрібний нам документ.

Але є один фактор, що нам потрібно врахувати: колір посилання потрібно прописувати, а інакше за замовчуванням він буде просто потворним, тому згадаємо про відкриваючий тег боді:

Розберемося що до чого: link - колір посилання, alink - колір активного посилання (натиснутої), vlink - колір уже посещенной посилання. У нашому прикладі кольори однакові, але вони можуть бути різними, Отже пропишемо кольори для посилання і саме посилання в нашому документі:

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Привіт, це моя перша сторінка</H3>
<br>
<font color="#CC0000"> Ласкаво просимо!</font>:) </center>
<p align="justify">
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотографія"> Я зовсім недавно почав(а) знайомитися з віртуальним життям, але мені за давньою традицією теж захотілося створити свою домашню сторінку для моїх нових віртуальних друзів і знайомих, щоб вони могли <a href="prf.html"> подивитися мої фотографії </a>, почитати про мене, написати кілька рядків у мою гостьову книгу. <br><br> А може і просто випадковий відвідувач раптом захоче познайомитися зі мною, і в мене з'явиться <b> ще один віртуальний друг. </b><br><br> На фотографії зображений(а) я. Якість картинки не дуже гарна, на жаль, тому вона не чітка і розглянути риси мого обличчя проблематично. Але в цілому помітно, що я цілком нічого. <br><br> Якщо ти так теж думаєш, то давай як-небудь зустрінемося, побалакаємо, чайку поп'ємо. Хто знає, може бути ми й у реальному житті станемо друзями.
</p>
</body>
</html>

Посилання на вашу поштову скриньку прописується так:

<a href="mailto:pochta@mail.ru"> pochta@mail.ru - пишіть листа </a>

Посиланням може бути і картинка. Принцип посилання той же, що й у випадку з текстом, тільки між тегами вставляється не текст, а картинка:

Це ми введемо в наш приклад, зробивши посиланням на документ із фотографіями (prf.html) картинку pr1.png:

Приклад2

<html>
<head>
<title>Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Привіт, це моя перша сторінка</H3>
<br>
<font color="#CC0000"> Ласкаво просимо!</font> </center>
<p align="justify">
<a href="prf.html"> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотографія"> </a> Я зовсім недавно почав(а) знайомитися з віртуальним життям, але мені за давньою традицією теж захотілося створити свою домашню сторінку для моїх нових віртуальних друзів і знайомих, щоб вони могли <a href="prf.html">подивитися мої фотографії</a>, почитати про мене, написати кілька рядків у мою гостьову книгу. <br><br> А може і просто випадковий відвідувач раптом захоче познайомитися зі мною, і в мене з'явиться <b> ще один віртуальний друг. </b><br><br> На фотографії зображений(а) я. Якість картинки не дуже гарне, на жаль, тому вона не чітка і розглянути риси мого обличчя небагато проблематично. Але в цілому помітно, що я цілком нічого:) <br><br> Якщо ти так теж думаєш, те давай як-небудь зустрінемося, побалакаємо, чайку поп'ємо. Хто знає, може бути ми й у реальному житті станемо друзями
</p>
</body>
</html> (прим.)

Тепер подивимося в Explorer, що в нас вийшло. Картинка primtocodephoto.gif стала посиланням. Якщо ви помітили (а якщо не помітили, то зверніть увагу): навколо картинки з'явилася рамочка. Цю рамочку можна залишити, якщо вам вона подобається, а можна забрати, якщо ви задасте картинці параметр border="0"

Посилання може бути не тільки на документ із розширенням *.html, але і на багато інші (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe і т.д:) Як це робиться? Все по тому ж принципі:

<a href="http://www.melody.ru/music.mp3"> скачати пісню </a>

Якщо адреса зазначена таким способом:

<a href="http://www.melody.ru/"> музичний сайт </a>

То це означає, що в указаном каталозі є файл index.html, що завантажиться за замовчуванням.

Але поговоримо особливо про картинки, багато хто з вас, напевно, зіштовхувалися з таким явищем: коли тиснеш на маленьку картинку, то завантажується велика в тому ж чи в новому вікні. Як це робиться? Робимо посиланням картинку (допустимо small.jpg) і посилаємося на іншу картинку (допустимо big.jpg):

У цьому випадку велика картинка відкриється в тому ж вікні. Але як же зробити так, щоб картинка (чи будь-який інший файл-документ) відкрилася в новому вікні? Справа в тому, що в тегі <a></a> є параметр target:

Отже, target="_blank" - вказує на те, що документ (картинка в нашому випадку), на який відбувається посилання, відкриється в новому вікні броузера (Explorer`а).

Тепер розберемося, якими ж тегами позначаються списки:

<li>Текст один</li>
<li>Текст інший</li>
<li>Текст сякой</li>
<li>Текст такий</li>

Саме тэгом <li></li> вони і задаються. Виникає питання: чи можна крім зафарбованого кружечка використати ще що-небудь подібне?

За замовчуванням - (1) Порожній кружок - (2) Квадрат - (3)

У тэга <li> є параметр type:

У випадку (1) - <li type="disk">,
у випадку (2) - <li type="circle">,
у випадку (3) - <li type="square">.

Це один з варіантів. Якщо ви користалися текстовими редакторами (допустимо Вордом), то знаєте, що таке Табуляція (це коли ви жмете на кнопочку Tab і весь текст зміщується в право). Схожа фунция є й у хтмл:

<ul>Ваш текст</ul>

Щоб відступ (табуляція) був більше треба вкладати тэг <ul> у самого себе:

<ul><ul>Два відступи</ul></ul>
<ul><ul><ul>Три відступи</ul></ul></ul>

Зрушення один

· Зрушення інший

· Зрушення сякой

Хочу звернути вашу увагу, що це прописано без параметра type, але за допомогою тэга <ul>:

<ul><li>Зрушення один</li></ul>
<ul><ul><li>Зрушення інший</li></ul></ul>
<ul><ul><ul><li>Зрушення сякой</li></ul></ul></ul>

Лінія задається тэгом <Hr> і не вимагає закриваючого тега:

У лінії є багато різних параметрів:

(1) <Hr align="right"> (center чи left)
(2) <Hr width="30%"> (ширина лінії у відсотках/пікселях)
(3) <Hr size="6"> (товщина лінії)
(4) <Hr NoShade> (скасування об'ємності)
(5) <Hr color="cc0000"> (колір лінії, тільки в IE)

Виглядає все це так - Перший (1):

Другий (2):

Третій (3):

Четвертий (4):

П'ятий (5):

Природно, що ці параметри можуть вживатися одночасно.
Не зловживайте параметром Color, тому що він діє тільки в Інтернет Експлорер (якщо вам так хочеться все-таки кольорову лінію, то зробіть, допустимо червону картинку 1x1 пиксель і вставте її у свій документ. Тут вам знадобляться параметри картинок height і width. Нехай height=1, а width=500 - от вам і лінія:).

Marquee - рядок, що біжить, (текст).

Тег Marquee підтримується тільки Internet Explorer, але багатьох людей, початківців це не зупиняє, і вони з задоволенням його використовують.

</marquee>

Всі атрибути вам вже знайомі: bgcolor - колір тла рядка, що біжить, height - висота рядка, width - ширина рядка.

Також для рядка, що біжить, можна задати й інші знайомі вам атрибути - hspace, vspace і align.

</marquee>

Параметр loop задає скільки разів прокрутиться рядок, у нашому прикладі loop="2" - 2 рази,

Direction - задає напрямок руху рядка, що біжить - direction="left" (right, up, down) - рух вліво (вправо, нагору, униз).

Behavior - відбивання рядка - behavior="scroll" (slide, alternate). Scroll - звичайне прокручування (можна не прописувати, воно так і є за замовчуванням). Slide - прокручування з зупинкою, рядок пробігає до краю і зупиняються. Якщо одночасно з behavor="slide" ужити параметр loop, то рядок прокрутится встановлена кількість разів і зупиниться в краю. Alternate - рядок буде рухатися від краю до краю.

Scrollamount - швидкість руху рядка, scrollamount="1". Може приймати значення від 1 до 10. 1 - самий повільний рух, 10 - найшвидше.

Таблиця задається тегом:

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

<tr></tr> - рядок таблиці
<td></td> - стовпець (комірка) таблиці

Отже, перед вами таблиця з двох рядків і трьох стовпців (комірок). Для наочності я виділив комірки таблиці різним кольором. Границі таблиці не задані, тому ви їх не бачите.
<table>
<tr></tr>
<tr></tr>
</table>

Спочатку задаємо рядки. У нашому прикладі їх два. Тепер у кожнім рядку задамо по три стовпця (комірки):

Отже, тепер нам треба заповнити каркас, що вийшов

: <table
> <tr
> <td >1x 1</td
> <td >1x 2</td
> <td >1x 3</td
> </tr
> <tr
> <td >2x 1</td
> <td >2x 2</td
> <td >2x 3</td>
</tr>
</table>

Сподіваюся зрозуміло, що перша цифра в написах - це номер ряду, а друга номер стовпця (1х2 - перший ряд, другий стовпець і т.д). Це знову ж вам для наочності. Якщо подивитися те, що вже в нас з вами вийшло, то це буде виглядати так:

1x1	1x2	1x3
2x1	2x2	2x3

На жаль, тла (блакитненького чи жовтенького, як у прикладі) ще не видно. Тло задається параметром bgcolor="колір_тла". Тло можна задати для таблиці в цілому, для ряду, для стовпця (у межі одного ряду). У нашому випадку ми задаємо тло для кожного стовпця.

От, що в нас вийшло:

Спробуйте задати тло для таблиці і для ряду (це для засвоєння матеріалу).

Вертикальне вирівнювання задається наступним атрибутом - valign="middle" (top, bottom) - вміст конкретної комірки буде знаходиться в середині комірки (зверху чи внизу)

Рамка вводиться параметром border. Задамо рамку рівну 3 пікселям:

Нашій рамці ми можемо задати колір. Нехай він буде чорний у нашому прикладі:

Фрейми дозволяють нам відкрити у вікні броузера - не один, а відразу кілька документів (допустимо, документ menu.html, що містить меню, logo.html - документ, що містить логотип, шапку сторінки, і content.html - документ із безпосереднім змістом нашого сайта).

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

Створимо документ index.html:

<html>
<head>
<title>Ходіння по фреймах</title>
</head>
</html>

На перший погляд - цілком стандартний початок, тільки немає тэга body! І це не помилка, фрейм-документ не містить тэга body, такого обов'язкового в інших випадках.

Що ж, не будемо сумувати про тег body, і знайдемо йому цілком гідного замінника:

<html>
<head>
<title>Ходіння по фреймах</title>
<frameset></frameset>
</head>
</html>

Створимо такий варіант:

<html>
<head>
<title>Ходіння по фреймах</title>
<frameset rows="100,*,150" >
<frame src="logo.html">
<frame src="content.html">
<frame src="menu.html">
</frameset>
</head>
</html>

Тепер варто пояснити...

Почнемо з параметра rows - у нашому прикладі це виглядає так: rows="100,*,150" - а якщо перевести, то ми одержимо наступне - "... наш документ поділятися на кілька рядів (рядків). Висота першого ряду - 100 пикселов, третього - 150, а другий займає весь простір, що залишився,", - думаю, тут повинне бути всі ясно.

Тэг frame повідомляє броузеру які ж документи в нас будуть у кожнім ряді (рядку). У нашому випадку: перший ряд - logo.html (документ із логотипом), другий ряд - займе документ із безпосереднім змістом (content.html), а третій - меню. Якщо ви хочете, щоб меню було в другому ряді, то вам належить поміняти його місцями з content.html

<html>
<head>
<title>Ходіння по фреймах</title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html>

Подивіться що в нас вийшло. Поміняти ми їх місцями - поміняли, а от тепер треба задати нові значення параметру rows, щоб меню в нас знову займало тільки 150 пикселов по висоті, а зміст - все решта:

Приклад1

<html>
<head>
<title>Ходіння по фреймах</title>
<frameset rows="100, 150,* ">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html>

Тепер розберемо варіант, зображений на малюнку:

Тут ми поділимо вікно на стовпчики. Другий стовпчик буде містити в собі документ content.html (зміст), а перший стовпчик ми розіб'ємо на два ряди, і помістимо в них документи logo.html і menu.html.

Приклад2

<html>
<head>
<title>Ходіння по фреймах</title>
<frameset cols="100,*">

</frameset>
</head>
</html>

Для початку позбудемося смуги прокручування (скрулінга) у фреймі з logo.html.

<html>
<head>
<title>Ходіння по фреймах</title>
<frameset cols="100,*">

</frameset>
</head>
</html>

Scrolling - параметр тэга <frame>. Він може приймати кілька значень: no - це значить зовсім не буде смуги прокручування, ні при яких обставинах; yes - це значить смуга прокручування буде завжди; auto - смуга прокручування з'явитися тільки тоді, коли вона потрібна.

Тепер давайте позбудемося рамок між фреймами. Для цього ми використовуємо параметр border, з яким ми раніше уже зустрічалися. Отже, border="0".

<html>
<head>
<title>Ходіння по фреймах</title>
<frameset cols="100,*" border="0" >

</frameset>
</head>
</html>

Marginheight визначає ширину (у пікселях) верхнього і нижнього полів фрейма, а marginwidth визначає ширину лівих і правих полів фрэйма. У нашому прикладі ми позбулися від полів у фреймі, що містить logo.html, задавши значення marginheight і marginwidth рівне нулю.

Отже, звернемося до нашого прикладу. Натисніть на посилання. Документ, на який йде посилання, відкриється в тому ж фреймі. А нам потрібно зробити так, щоб він відкрився у фреймі з основним змістом, а меню залишилося в недоторканому вигляді. Як це зробити?

Для початку, познайомтеся з новим параметром тега <frame> - name.

Приклад

<html>
<head>
<title>Ходіння по фреймах</title>
<frameset cols="100,*" border="0">

</frameset>
</head>
</html>

Параметр name задає ім'я для фрейму (у нашому випадку для того, який містить документ content.html).

Ім'я фрейму може бути надалі використане для посилання на нього з інших документів (фреймів), за допомогою параметра тега <a> target (target="ім'я_фрейму").

Як це виглядає? Звернемося до документа menu.html.

<html>
<head>
<title>Документ із Меню</title>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html">Головна</a>
<a href="tumki.html">Тумки</a>
<a href="bumki.html">Бумки</a>
<a href="tururumki.html">Турурумки</a>
<a href="tra-la-la.html">Траляля</a>
</center>
</body>
</head>
</html>

От такий він, у нашому випадку. Тепер для кожного посилання вкажемо параметр target="window-1", де window-1 - це ім'я фрейму, у якому в нас розташовується документ з основним змістом (content.html).

<html>
<head>
<title>Документ із Меню</title>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html" target="window-1" >Головна</a>
<a href="tumki.html" target="window-1" >Тумки</a>
<a href="bumki.html" target="window-1" >Бумки</a>
<a href="tururumki.html" target="window-1" >Турурумки</a>
<a href="tra-la-la.html" target="window-1" >Траляля</a>
</center>
</body>
</head>
</html>

Тепер, усі посилання відкриваються в потрібному нам фреймі, а меню нікуди не зникає.

Бувають ситуації, коли нам потрібно, щоб документ, що відкривається, відкрився на повне вікно, для цього треба параметру target задати значення _top:

<a href="project.html" target="_top" >Мій проект про рибок</a>
Сторінка з проектом про рибок відкриється в повне вікно, закривши (знищивши) інші кадри (фрейми).

Практична робота

Мета. Створити сайт із фреймами.

Хід роботи

Створіть сайт про себе з двома вертикальними фреймами. Подібно до наведених нище зразків створіть такі файли: index.html, leftframe.html, rightframe.html, filel.html, file2.html, file3.html, file4.html тощо, наповнивши їх своїм змістом. Останні чотири файли мають містити інформацію про вас особисто, вашу сім'ю чи родину, друзів, місце навчання чи праці, ваші захоплення та хобі тощо.

1.Добийтеся вдалого розташування інформації у фреймах, відформатуйте тексти, задайте необхідні параметри в тегах <BODY>.

2. Задайте жовтий фон у лівому фреймі і зелений — у правому.

3. Заберіть межу між фреймами.

4. Задайте смуги прокручування лише для правого фрейму.

5. Придумайте стартову сторінку-заставку з використанням графічних елементів, наприклад, помістіть тут свою фотографію тощо.

6. Поділіть правий фрейм на два фрейми.

7. У вузькому верхньому фреймі розташуйте особисту емблему з деякого графічного файлу тощо.

8. У нижньому фреймі організуйте перегляд сторінок.

9. Удоскональте сайт, щоб він виглядав якнайліпше.

10. Закінчіть роботу.

Приклад 1 . Розглянемо типовий вигляд основного файла:

<HTML>