КАТЕГОРИИ:
Архитектура-(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)
URL - Uniform Resource Locator
Абзаци
Приклад документа в HTML
Будь-який гіпертекст схожий на книгу і може бути розбитий на окремі структурні елементи:
· Власне документ
· Розділи, параграфи, пункти, підпункти
· Абзаци
Для кожного з цих елементів в HTML існують певні стилі, що описують в якому вигляді користувач побачить текст на екрані. Хай ми створили файл minihtml.html:
<BODY>
<TITLE>Пример HTML-текста</TITLE>
<H1>Глава 1</H1>
<H2>Параграф 1.</H2>
Ласкаво просимо в HTML!
Тут ми розповімо, як треба і як не треба писати гіпертексти.<P>
<H2>Параграф 2.</H2><P>
</BODY>
Тут ви можете побачити, як виглядає цей текст.
Отже, Ви вже зрозуміли, що:
· Заголовок документа починається з <TITLE> і закінчується </TITLE>.
· Заголовок першого рівня (Розділи) виділяється символами <H1> і </H1>)
· Заголовки подальших рівнів (параграфи, пункти, підпункти тощо.) - символами <Hx> і </Hx>), де x - числа 2, 3...
· Абзац - символами <P> (У версіях HTML, що діють зараз, символу </P> не існує! АЛЕ! Він може з’явиться в подальших версіях!)
NOTE: HTML не розрізняє, якими буквами набрані символи форматування: <title> рівносильно < TITLE> або < TiTlE>.
Не всі стилі підтримані всіма WWW-browsers. Якщо browser не підтримує стиль, то він його ігнорує. (Тому не страшно якщо Ви вже зараз почнете користуватися при форматуванні абзаців символом </P>. Нижче ми детальніше зупинимося на цьому питанні.)
Основні елементи
Основний текст відділяється від супровідного символами:
<BODY> </BODY>
7.2. Заголовки документів
Кожен HTML-документ повинен мати заголовок, він показується окремо і використовується, перш за все, для ідентифікації документа (наприклад, при пошуку). Заголовок повинен описувати мету документа і містити не більше 5-6 слів.
Практично у всіх browsers заголовок документа видно у верхній частині екрану (вікна).
Для виділення заголовка служать символи:
<HEAD><TITLE>Заголовок</TITLE></HEAD>
7.3. Заголовки розділів документів
HTML має шість рівнів заголовків, що мають номери з 1 по 6 (заголовок першого рівня є заголовком вищого рівня). В порівнянні з нормальним текстом, заголовки виділяються шрифтом - розміром і товщиною букв. Перший заголовок в кожному документі повинен бути виділений <H1>. Синтаксис заголовків: <Hy> Текст заголовка</Hy > де у - число від 1 до 6, що визначає рівень заголовка.
На відміну від документів у більшості текстових процесорів, переривання рядків і слів в HTML-файлах не істотні. Обрив слова або рядка може відбуватися в будь-якому пункті у вашому початковому файлі, при перегляді це переривання буде проігноровано. Нагадаємо, що в нашому прикладі, перший параграф був представлений як
<H2>Параграф 1.</H2>
Ласкаво просимо в HTML!
Тут ми розповімо, як треба і як не треба писати гіпертексти. <P>
У початковому файлі дві пропозиції знаходяться на двох різних строках. Web browser ігнорує це переривання рядка і починає новий абзац тільки, після знаку < P>. Проте, щоб зберегти легкість для читання в початкових HTML-файлах, ми рекомендуємо заголовки розміщувати на окремих рядках, а абзаци відокремлювати порожніми рядками (на додаток до < P>).
Також відмітимо, що хоча у версіях HTML, що діють, немає ознаки форматування < /P>, ми Вам рекомендуємо його вживати, оскільки він може бути введений в подальших версіях. До помилки це не приведе, оскільки всі незнайомі символи browser просто ігнорує. Інакше, Вам надалі, можливо, доведеться переробляти Ваші HTML-документи. У версії HTML+ пропонується, по аналогії з описом заголовків, використовувати що як відкриває, так і закриває знаки абзацу:
<P>Це абзац в HTML+.</P>
Перевага цієї зміни в тому, що Ви будете здатні форматувати абзац. Наприклад, розташовувати його в центрі рядка, виділивши його символами:
<P ALIGN=CENTER>
7.5. З’єднання з іншими документами
Головна перевага HTML полягає в його здатності зв’язуватися з іншими документами. Browser виділяє (зазвичай кольором і/або підкресленням) ключові слова, що є гіпертекстовими посиланнями (гіперпосиланнями). Описується посилання на інший документ таким чином:
<A HREF="імя файла"> Текст, який служитиме як звернення до іншого документу</A>.
Приведемо приклад такого гіпертекстового посилання:
<A HREF="minihtml.html">Приклад HTML-тексту</A>
Тут ключові слова `Приклад HTML-тексту’ є гіперпосиланням на файл minihtml.html, який лежить в тій же директорії, що і поточний документ. Ви можете посилатися на документ, лежачий в будь-якій директорії, описавши до нього повний шлях. Так, наприклад, посилання на файл NJStats.html, лежачий в піддиректорії AtlanticStates можна описати як:
<A HREF="AtlanticStates/NJStats.html">New Jersey</A>Це так звані відносні посилання. Ви також можете використовувати абсолютне ім’я файлу (повний шлях). У загальному випадку, використання посилання по абсолютному імені файлу переважніше.
Отже - URL це абревіатура від Uniform Resource Locator. У нього входить, окрім назви файлу і директорії: мережева адреса машини і метод доступу до файлу. За допомогою URL можна запускати видалені програми, і передавати їм значення. На цьому принципі побудовані шлюзи в інші інтернетівські сервіси: finger, archie.
Тут подані декілька найбільш часто використовувані типи URL. Допустимий файл з ім’ям "online15.zip" лежить на ftp сервері ftp.simtel.ru у директорії /pub/doc/services/ тоді URL цього файлу виглядатиме так: file://ftp.simtel.ru/pub/doc/services/online15.zip URL директорії в якій лежить файл: file://ftp.simtel.ru/pub/doc/services/ а URL кореневої директорії ftp сервера ftp.simtel.ru виглядає от так: file://ftp.simtel.ru/
Gopher URL’s не так різноманітні, як файлові. Це пов’язано з обмеженістю цього сервісу. Для того що б описати, наприклад, gopher сервер вузла gopher.kiae.su необхідний URL:
gopher://gopher.kiae.su/
Деякі gopher-сервери можуть знаходитися на нестандартному номері порту (за умовчанням зазвичай використовується 70 порт) тоді він повинен указуватися:
gopher://gopher.banzai.edu:1234/, де 1234 - номер порту.
Якщо ви уважно подивитесь на висхідники якого небудь гіпертекстового документа, і звернете увагу на те як вказані посилання на інші URL те заметіть, що зустрічаються два види:
1. <A Href="http://www.simtel.ru/news/snews.http">News</A> 2. <A Href="aaa.html">AAA</A>Перший - це повний URL, а другою - частковий. Частковий URL указує на документ який знаходиться на тому ж сервері і в тій же директорії, що і документ в якому зустрічається це посилання.
СПИСОК ЕЛЕМЕНТІВ HTML
(Мета-теги)
| БАЗИСНІ ЕЛЕМЕНТИ | |||
| 1. | Тип документа | <HTML></HTML> | (початок і кінець файлу) |
| 2. | Ім’я документа | <TITLE></TITLE> | (повинно бути в заголовку) |
| 3. | Заголовок | <HEAD></HEAD> | (опис документа, наприклад його ім’я) |
| 4. | Тіло | <BODY></BODY> | (вміст сторінки) |
| ВИЗНАЧЕННЯ СТРУКТУРИ | |||
| 5. | Заголовок | <H?> </H?> | (стандарт визначає 6 рівнів) |
| 6. | із вирівнюванням | <H?ALIGN=LEFT|CENTER|RIGHT></H?> | |
| 7. | Секція | <DIV></DIV> | |
| 8. | із вирівнюванням | <DIV ALIGN=LEFT|RIGHT|CENTER></DIV> | |
| 9. | Цитата | <BLOCKQUOTE></BLOCKQUOTE> | (звичайно виділяється відступом) |
| 10. | Виділення | <EM></EM> | (звичайно зображається курсивом) |
| 11. | Додаткове виділення | <STRONG></STRONG> | (звичайно зображається жирним шрифтом) |
| 12. | Відсилання, цитата | <CITE></CITE> | (звичайно курсив) |
| 13. | Код | <CODE></CODE> | (для лістингів коду) |
| 14. | Приклад висновку | <SAMP></SAMP> | |
| 15. | Введення з клавіатури | <KBD></KBD> | |
| 16. | Змінна | <VAR></VAR> | |
| 17. | Визначення | <DFN></DFN> | (часто не підтримується) |
| 18. | Адреса автора | <ADDRESS></ADDRESS> | |
| 19. | Великий шрифт | <BIG></BIG> | |
| 20. | Маленький шрифт | <SMALL></SMALL> |
| СПИСКИ | |||
| Неврегульований | <UL><LI></UL> | (<LI> перед кожним елементом) | |
| Компактний | <UL COMPACT></UL> | ||
| Тип мітки | <UL TYPE=DISC|CIRCLE|SQUARE> | (для всього списку) | |
| <LI TYPE=DISC|CIRCLE|SQUARE> | (цей і подальші) | ||
| Нумерований | <OL><LI></OL> | (<LI> перед кожним елементом) | |
| Компактний | <OL COMPACT></OL> | ||
| Тип нумерації | <OL TYPE=A|a|I|i|1> | (для всього списку) | |
| <LI TYPE=A|a|I|i|1> | (цей і подальші) | ||
| Перший номер | <OL START=?> | (для всього списку) | |
| <LI VALUE=?> | (цей і подальші) | ||
| Список визначень | <DL><DT><DD></DL> | (<DT>=термін, <DD>=визначення) | |
| Компактний | <DL COMPACT></DL> | ||
| Меню | <MENU><LI></MENU> | (<LI> перед кожним елементом) | |
| Компактне | <MENU COMPACT></MENU> | ||
| Каталог | <DIR><LI></DIR> | (<LI> перед кожним елементом) | |
| Компактний | <DIR COMPACT></DIR> |
| ТАБЛИЦІ | |||
| 1. | Визначити таблицю | <TABLE></TABLE> | |
| 2. | Окантовка таблиці | <table border=?></TABLE> | |
| 3. | Окантовка таблиці | <TABLE CELLSPACING=?> | |
| 4. | Відстань між осередками | <TABLE CELLPADDING=?> | |
| 5. | Доповнення осередків | <TABLE WIDTH=?> | (у точках) |
| 6. | Ширина у відсотках | <TABLE WIDTH="%"> | (відсотки від ширини сторінки) |
| 7. | Рядок таблиці | <TR></TR> | |
| 8. | Вирівнювання | <TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM> | |
| 9. | Комірка таблиці | <TD></TD> | (повинна бути усередині рядка) |
| 10. | Вирівнювання | <TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM> | |
| 11. | Без зміни рядка | <TD NOWRAP> | |
| 12. | Розтягання по колонці | <TD COLSPAN=?> | |
| 13. | Розтягання по рядку | <TD ROWSPAN=?> | |
| 14. | Бажана ширина | <TD WIDTH=?> | (у точках) |
| 15. | Ширина в процентах | <TD WIDTH="%"> | (відсотки від ширини сторінки) |
| 16. | Колір комірки | <TD BGCOLOR="#$$$$$$"> | |
| 17. | Заголовок таблиці | <TH></TH> | (як дані, але жирний шрифт і центрівка) |
| 18. | Вирівнювання | <TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM> | |
| 19. | Без зміни рядка | <TH NOWRAP> | |
| 20. | Розтягання по колонці | <TH COLSPAN=?> | |
| 21. | Розтягання по рядку | <TH ROWSPAN=?> | |
| 22. | Бажана ширина | <TH WIDTH=?> | (у точках) |
| 23. | Ширина в відсотках | <TH WIDTH="%"> | (відсотки від ширини таблиці) |
| 24. | Колір комірки | <TH BGCOLOR="#$$$$$$"> | |
| 25. | Заголовок таблиці | <CAPTION></CAPTION> | |
| 26. | Вирівнювання | <CAPTION ALIGN=TOP|BOTTOM> | (зверху/знизу таблиці) |
Самостійна робота №09 – Основи WEB-дизайну
Комп’ютерна графіка. Мультимедіа. Анімація. Типи графіки, яка використовується у бізнесі. Графічні послуги локальних мереж. Мови та специфікації для створенння Web-сторінок. Типи редакторів, що використовуються для при створенні та модифікації Web-сторінок. Ситнасксис тегів та атрибутів у мові розмітки гіпертексту HTML. Особливості використання мови ХHTML у Web-сторінках. Основні види посилань та символи визначені в мовах HTML й ХHTML [2, с. 584-591].
Питання для самоконтролю
1. Абзаци розмітки HTML.
2. Гіпертекст. Гіпертекстова технологія, броузери розмітки HTML.
3. Гіпертекстові редактори.
4. Графічні редактори розмітки HTML.
5. Заголовки розділів документів розмітки HTML.
6. Мова HTML - Hyper Text Markup Language.
7. Мова гіпертекстової розмітки HTML.
8. Основні елементи мови HTML, теги.
9. Основні поняття WEB-дизайну.
10. Створення WEB-документів на мові гіпертекстової розмітки HTML.
11. Структурні елементи WEB-документа.
12. Текстові блоки розмітки HTML.
13. Технології та інструменти ВЕБ-дизайну
14. Що таке URL (Uniform Resource Locator)?
15. HTML документи: запис, створення, редагування та зберігання.
16. WEB-вузол (WEB-сайт).
17. Web-документ.
|
Дата добавления: 2014-01-15; Просмотров: 500; Нарушение авторских прав?; Мы поможем в написании вашей работы!