КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Завдання №4. Об’єднання сторінок
|
|
|
|
Завдання №3. Створіть наступний файл під ім'ям qroup.html
3.1. Введіть текст слідуючого змісту
<HTML>
<НЕАD>
<ТІТLЕ>Групи</ТІТLЕ>
</НЕАD>
<ВОDY>
<FОNТ SICЕ=4 СОLОR="ВLUE">Мої улюблені музичні групи <FОNТ><ВR><IMG SRC="Іmaqes/ foto.jрд"><ВR>
Воплі Відоплясова<ВR>
Аліса<ВR>
Кіно<ВR>
Акваріум<ВR><ВR>
<FОNТ SIZЕ=2>Створено Ігорем Шевченком
</FОNТ>
</ВODY>
</НТМL>
Перевірьте результати вашої роботи.
3.2. Назву однієї із груп виділимо напівжирним шрифтом (<В>Кіно </В> (Воld — жирний)) чи курсивом (<1>Акваріум </I> (Іtaliс — нахилений)). Крім того, будь-яку фразу можна відцентрувати:
<СЕNТЕR> Мої улюблені музичні групи</СЕNТЕR>
Внесемо зміни в файл:
<НТМL>
<НЕАD>
<ТІТLЕ>Групи</ТІТLЕ>
</НЕАD>
<ВОDY>
<СЕNТЕR><FОNТ SIZЕ=4 СОLОR="ВLUЕ">Мої улюблені музичні групи</FОNТ><BR></СЕNТЕR>
<ІМG SRС “Imаqеs/mиsіс. jрq"<ВR>
Воплі Відоплясова<ВR>
Аліса<ВR>
<В>Кіно</В><ВR>
<I>Акваріум</I<ВR><ВR>
<FОNТ SIZЕ=2>Створено Ігорем Шевченком
</FОNТ>
</ВODY>
</НТМL>.
Як бачимо, теги вкладаються один в один. Це дуже цінна їхня якість. Наприклад, рядок <СЕNТЕR> <FОNТ СОLОR="ВLUЕ"><В><І>...</І></В> </FОNТ></СЕNТЕR> дозволяє розташувати текст у центрі (<СЕNТЕR>), набравши його синім (ВLUЕ) напівжирним (<B>) нахиленим (<I>) шрифтом. Треба тільки вчасно закрити тег. Адже якщо, наприклад, залишити відкритим тег <В>, то весь текст до кінця документа буде напівжирним.
Ви можете самостійно замінити назви наведених груп на свої улюблені, а ім'я укладача — на своє. Зауважимо, що назву сторінки ми написали великими (4) синіми (ВLUE) буквами, а ім'я автора маленькими (2), вставивши перед ними два порожні рядки (<ВR>). Як файл mиsіс.jрq пропоную використовувати зображення якогось музичного інструмента, наприклад, гітари, хоча можна помістити на Web-сторінку і фотографію улюбленого виконавця.
|
|
|
Як же створити сайт, зв'язавши окремі сторінки разом? На практиці коли відвідувач відкриває головну сторінку, він може вибрати потрібне посилання й у такий спосіб перейти до наступного документа. Посилання — це місце в тексті чи на зображенні, клацнувши на якому кнопкою миші, ви опиняєтесь на іншій сторінці.
Для оформлення посилання існує пара тегів <А>...</А>. Усе, що вкладено між ними, є посиланням. Записується це так: <А НRЕF="qrоuр.html">Мої улюблені групи</А> чи <А НRЕF="qrоир.html"> <ІМG SRC="Іmаqеs/mиsіс.jрq"></А>.
Тут параметр НRЕF задає ім'я НТМL-файла, що містить сторінку, на яку відбудеться перехід. У першому випадку посиланням буде фраза "Мої улюблені групи", у другому — зображення musіс.jрq. Текст посилання на сторінці в броузері виділяється кольором, а зображення за замовчуванням обводиться рамкою. В останньому випадку можна забрати рамку, задавши значення параметра ВОRDЕR рівне 0 (ВОRDЕR=0).
Документ іпdех.html тепер буде мати такий вигляд:
<НТМL>
<НЕАD>
<ТІТLE>Музика</Т1ТLЕ>
</НЕАD>
<ВODY>
Музика без кордонів<ВR>
<ІМG SRС="Imaqes/foto.jрq"><ВR><A НRЕF= "qгоир.htnl">Мої улюблені групи</А><ВR><ВR>
Створено Ігорем Шевченком
</ВODY>
</НТМL>
Відзначимо, що посилання поділяються на внутрішні й зовнішні. Перші вказують на сторінки, фізично розташовані на тому ж комп'ютері, а другі —на ресурси інших серверів. Набравши, наприклад, таке: <А НRЕF="httр://www/.zhurmаl.ги/mиsіс/rаstа/bq.html”>Акваріум</A>, ми дамо користувачам, які зацікавилися, можливість перейти на персональну сторінку Бориса Гребенщикова.
Але тут є ще один нюанс. Потрапивши на сторінку qгоир.html, відвідувач повинен мати можливість повернутися назад. Для цього в ній зручно створити посилання:
|
|
|
<А НRF="іdех.html">Назад</А>
Результат:
<НТМL>
<НЕАD>
<ТІТLЕ>Групи</ТІТLЕ>
</НЕАD>
<ВОDY>
<СЕNТЕR><FОNТ SIZE=4 СОLОR="ВLUЕ">Мої улюблені музичні групи</FОNТ><ВR>
</СЕNТЕR><ІМG SRС="Іmаqеs/mиsіс.jрq"<ВR>
Воплі Відоплясова<ВР>
Аліса<ВР>
<В>Кіно</В><ВR>
<А НRЕF="http://www.zhигпа1.ги/musiс/гаsга/ bq.html"><I>Акваріум</І></А><ВR><ВR>
<FОNТ SIZЕ=2>Створено Ігорем Шевченком<ВР>
<А НRЕF="іdех.html">Назад</А></FОNТ>
</ВОDY>
</НТМL>
Зазначимо, що ці дві сторінки вже являють собою повнофункціональний Web-сайт, з якого відвідувач може довідатися, які музичні групи вам подобаються. 1 все це — лише мала частка того, чого можна досягти.
Завдання №5. Створення таблиць.
Тепер трохи докладніше розглянемо оформлення. Основним засобом дизайну— таблиця. Це основа основ Web-майстерності. Чому саме вона? При оформленні електронного документа виникає бажання розмістити кожен з його елементів на відповідному місці. Таблиця — єдиний спосіб наведення абсолютного порядку на сторінці. Як же її створити? У найпростішому випадку це має такий вигляд:
<ТАВLЕ>
<ТR>
<TD>
Текст
</ТАВLЕ>
Цей фрагмент НТМL -коду описує таблицю невизначених розмірів з одним рядком <ТR> і одним стовпцем <ТD>. Її межі не будуть видимі, але їх можна візуалізувати, надавши тегу <ТАВLЕ> відповідних параметрів:
<ТАВLЕR ВОRDЕR="1">.
Таблиця з одним рядком і двома колонками задається в такий спосіб:
<ТАВLЕ ВОRDЕR=="1">
<ТR>
<ТD>
Текст 1 (стовпчик перший)
<TD>
Текст 1 (стовпчик другий)
</ТАВLЕ>
Взагалі ж, відкриваючим тегам <ТD> і <ТR> відповідають необов'язкові закриваючі теги </ТD> і </ ТR>, але на практиці вони використовуються рідко.
НТМL-код більш складної сторінки буде мати приблизно такий вигляд:
<ТАВLЕ WIDТН="100%"ВОRDЕR="1"ВGСОLOR= "LIMЕ">
<ТR>
<ТD WIТН=30%>Перший рядок (стовпчик перший)
<ТD WITH=70%>Перший рядок (стовпчик другий)
<ТR ВGСОLОR="GRЕЕN">
<ТD>Другий рядок (стовпчик перший)
<ТD>ВGCОLOR="Yеllоw">Другий рядок (стовпчик другий)
|
|
|
<ТR>
<ТD>Третій рядок (стовпчик перший)
<ТD>Четвертий рядок (стовпчик другий)
</ТАВLЕ>
Вставте цей код в одну зі сторінок — іпdех, html чи qroup, html — природно, у межах дії пари тегів <ВОDY>...</ВОDY>.
Хотілося б звернути вашу увагу на те, що рядок <ТАВLЕ WIDTН="100%"ВОRDЕR="1" ВОСОLОR= "LIМЕ"> можна записати і так: <ТАВІЕ WIDТН=100% ВОRDЕR=1 ВGСОLОR=LIМЕ>, тобто лапки тут і в деяких інших випадках не є обов'язковими. Але не лінуйтеся їх ставити, це знадобиться вам надалі. Цей рядок означає приблизно наступне: таблиця (ТАВLЕ) займає весь лист (WIТН="100%"), а товщина розмежувальних ліній дорівнює 1 (ВОRDЕR="1"). Колір тіла комірок таблиці яскраво-зелений (LIМЕ).
Будь-який колір у НТМL задається або назвою (геd, blие, qгееn, qгеу, уеllоw, blасk...), або набором шістнадцяткових значень складових у колірній моделі RGВ (у форматі #RRGGВВ). Наприклад, #FFОООО=Rеd, #ООООFF=Вluе, #000000=Вlасk, #FFFFFF=Whitе. Зауважимо, що не всі кольори будуть відображатися правильно в усіх броузерах.
Тегу <ТАВLЕ> за допомогою параметра ВGСОLОR можна задати колір тiла для всіх комірок, у <ТR> — для рядка, а у <ТD> — для окремої комірки.
Тег <ТD WIDTН=30%> чи <ТD WIDТН=70%> задає розмір комірки у відсотках від ширини таблиці. Зустрівши це визначення на самому початку таблиці, броузер буде дотримуватися його і далі, таким чином, у наступних рядках цей параметр для окремих комірок можна не вказувати.
Якщо ви хочете розмістити заголовок таблиці в одній великій комірці — використовуйте параметр СОLSРАN для об'єднання двох сусідніх комірок по горизонталі, а RОWSРАN — по вертикалі.
Наприклад:
<ТАВLЕ ВОRDЕR"1"> <ТR><ТD СОLSРАN=2>... <ТR><ТD>... <ТD>...<ТR><ТD>... <ТD>.
</TABLЕ>
У першому рядку ми одержимо одну велику комірку, рівну за розміром двом у наступному рядку.
А от приклад застосування параметра ROWSPAN:
<ТАВLЕ ВОRDЕR="1">
<ТR><ТD RОWSРАN=3> Комірка на 3 рядка <ТD>...
<ТR> <ТО>...
<ТR> <ТО>...
</ТАВLЕ>
Не бійтеся експериментувати. Річ у тім, що броузер, використовуючи досить складний алгоритм відображення таблиць, може розрахувати розмір кожної комірки і спробує, наприклад, розширити стовпчик, якщо в ньому не міститься інформація.
|
|
|
Слід зазначити, що значення параметра WIDТН можна задавати не тільки у відсотках, а й у пікселях. Так, вираження WIТН="400" визначає ширину комірки в чотириста пікселів.
Для вирівнювання тексту й інших об'єктів усередині комірки використовують параметри АLIGN і VALING, наприклад: <ТD ALIGN="СЕNТЕR" VАLIGN= "ТОР">.
У цьому випадку вміст комірки буде відцентрований по горизонталі (ALIGN="СЕNТЕR") і зміщений до його верхньої межі (VАLIGN= "ТОР"). Параметр горизонтального вирівнювання може приймати значення СЕNТЕR, LEFT і RIGHT, а вертикального—ТОР, ВОТТОМ і СЕNТЕR. От і всі початкові відомості про таблиці.
Було б неправильно не згадати про основні засоби оформлення тексту великого обсягу.
Теги <Р>...</Р> позначають, відповідно, початок і кінець абзацу. Основний параметр, застосовуваний у першому з них, той самий — ALIGN. Він може приймати значення СЕNТЕR, RIGHТ, LEFТ і JUSTIFY. Останнє дозволяє вирівняти текст абзацу за шириною.
Зазначимо також, що рядок <Р ALIGN= "СЕNТЕR">...</Р> рівнозначний <СЕNТЕR>... </СЕNТЕR>.
Чи існують інструменти, що полегшують створення НТМL-файлів? Звичайно, існують. Такими функціями володіє навіть Word. Але більшість професіоналів охоче підпишеться під фразою: "Відсутність інструмента—кращий інструмент!" І це легко довести.
Спробуйте створити документ у Word і ввести в нього ту саму фразу "Музика — без кордонів", додавши тире для виразності. Тепер збережіть документ у форматі НТМL. Відкривши знову створений файл у Блокноті Windows, щоб переглянути вихідний текст НТМL, ми побачимо приблизно наступне:
<НТМL>
<НЕАD>
<МЕТА НТТР-EQUITV-"Сопtепt-Туре"
СОNТЕNТ="tехt/html;
сhагsеt=windows-12 51">
<КЕТА NАМЕ="Gепегаtог"
СОNТЕNТ="Місгоsoft Word 97 ">
<ТІТLЕ>іпdехw</ТІТLЕ>
<МЕТА NАМЕ="Versіоп"
СОNТЕNТ="8.0.3б12">
<МЕТА NАМЕ="Dаtе"СОNТЕNТ="3/4/97 ">
<МЕТА NАМЕ="Теmрlаtе"
СОNТЕNТ="С:\Ргоqгаm Fіlеs\Місгоsoft Оffiсе\ Office\НТМl.DОТ">
</HEAD>
<ВОDY ВGСОLОR="#ffffff">
<FОNТ FАСЕ="Тіmеs Nеw Rоmаn"
СОLOR="#000000"><P>Музика </FОNТхFОNТ СОLOR"#000000">- </РОМТ>
<FОМT FАСЕ="Тіmеs Nеw Rоmаn"
СОLОR-"#0 0 0 0 0 0">без кордонів</Р></ FОNТ>
</ВОDY>
</НТМL>
Порівняйте цей текст із нашим першим прикладом з п'яти рядків. Ви здивовані? Але ж реалізують вони ту саму ідею. Та код НТМL, автоматично створений Word, працює гірше, тому що прив'язаний до конкретного шрифта. Тепер зрозуміло, чому Web-майстри, що поважають себе, працюють у звичайних текстових редакторах.
На закінчення порекомендуємо вам кілька корисних джерел для самостійного вивчення НТМL:
— http://www.troitsk.ги/WWW/bооkгиs/wquide/— вступний курс World Wide Web;
— http://geocstses.соm/SіlісопVаІІеу/Lаkеs/ 4122/ — посібник зі створення персональної Web-сторінки;
— http://gепеsіs.гісог.ги/Dос/ — документація для розроблювачів Web-вузлів. Крім того, корисними будуть різноманітні книги з Web-дизайну і мови НТМL.
Таким чином, якщо ви виявите кмітливість і наполегливість, можливо, сам Борис Гребенщиков приїде потиснути вашу чесну руку. До речі, нехай вас не бентежить, що інформація, перш ніж з'явиться в Мережі, має бути розміщена на сервері, підключеному до неї цілодобово. Подібними серверами в нашій країні володіють переважно провайдери Інтернет чи великі фірми, але за кордоном їх кількість обчислюється вже навіть не десятками, а сотнями тисяч. Більше того, на багатьох із них ви можете розмістити свою сторінку зовсім безкоштовно. Але це тема окремої розмови.
Рубрика “Цікаво”
МОНСТРИ
Двадцятичотирьохлітнього програміста знайшли мертвим перед увімкненим екраном комп’ютера. Швидка допомога констатувала - кроовилив у мозок. Коли один із друзів загиблого глянув на монітор, то тільки зусиллям волі примусив себе відвести погляд: виникло відчуття, що його затягує всередину екрана, голову ніби стягнули міцні обручі,а у вухах виник монотонний шум. Хоча на моніторі,на перший погляд, нічого не було, крім синього віконця Norton Commander. Після ретельного тестування комп’ютера було з’ясовано, що його заражено вірусом, об’єм якого 666 байтів! Ця містична історія, як кажуть, сталася на початку 90-х років у Воронежі.Вона добре відома тим, хто професійно займається комп’ютерами. З приводу того, був це дійсно факт убивства за допомогою екрана монітора чи ні, думки розходяться. Але те, що практично відразу після появи персональних ЕОМ розпочалися експерименти з психофізичного впливу на операторів, відомо. Наведемо деякі випадки.
|
|
|
|
|
Дата добавления: 2015-05-26; Просмотров: 391; Нарушение авторских прав?; Мы поможем в написании вашей работы!