86855

Основи мови HTML

Лабораторная работа

Информатика, кибернетика и программирование

Документи HTML є звичайними текстовими файлами, що містять спеціальні теги (або керуючі елементи) розмітки. Теги розмітки вказують браузеру Web (програмі користувача для відображення web-сторінок, наприклад, Internet Explorer, Mozilla, Netscape або Opera), як треба вивести сторінку.

Украинкский

2015-04-11

103.5 KB

0 чел.

TML. Лабораторна робота №1: Основи мови HTML.

Лабораторна робота №1

Основи мови HTML.

Мета: Вивчити основи мови HTML. Створити домашню сторінку.

Програмне забезпечення: HTML 4.01. Стандартна програма блокнот Microsoft Windows.

Теоретичні відомості:

Суть і складові частини Web технології.

HTML (Hyper Text Markup Language) означає мову розмітки гіпертексту. Ця мова була розроблений Тімом Бернерсом-Лі в рамках створення проекту розподіленої гіпертекстової системи, яку він назвав World Wide Web (WWW) або Всесвітня павутина. HTML призначений для написання гіпертекстових документів, що публікуються в World Wide Web.

Документ на мові HTML може включати наступні компоненти:

  1.  стилізований і форматований текст;
  2.  команди включення графічних і звукових файлів;
  3.  гіперзв'язки з різними ресурсами Internet;
  4.  скрипти на мові JavaScript і VBScript.
  5.  різні об'єкти, наприклад Flash-анімацію.

Документи HTML є звичайними текстовими файлами, що містять спеціальні теги (або керуючі елементи) розмітки. Теги розмітки вказують браузеру Web (програмі користувача для відображення web-сторінок, наприклад, Internet Explorer, Mozilla, Netscape або Opera), як треба вивести сторінку. Файли HTML зазвичай мають розширення htm або html. Їх можна створювати за допомогою будь-якого текстового редактора.

Виділимо базові елементи технології Web: Internet це всесвітня мережа, що складає сукупність Web-сторінкок. Для передачі гіпертексту Web-сторінок в Internet використовується спеціально розроблений протокол HTTP (Hyper Text Transfer Protocol). Для розробки Web-сторінок використовується спеціальна мова розмітки гіпертексту HTML (Hyper Text Markup Language). Для перегляду Web-сторінок використовується спеціальна клієнтська програма Web-браузер. У вікні Web-браузера відображаються результати інтерпретації мови HTML з Web-сторінок, отриманих під час навігації за гіперпосиланнями.

Основи мови розмітки гіпертексту - HTML.

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

<ім'я_тега ім'я_атрибута = "значение">

Деякі теги, такі, як <P> (тег, що визначає абзац), не вимагають завершального тега, але його використання надає початкового тексту документа поліпшену читаність і структурованою.

Структура документа.

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

<HTML>

<HEAD>

<TITLE> Заголовок документа </TITLE>

</HEAD>

<BODY>

Тіло документа

</BODY>

</HTML>

Основні елементи заголовку.

  •  HEAD (елемент розмітки HEAD) - містить заголовок HTML-документу. Служить для розміщення інформації, що відноситься до всього документу в цілому.
  •  TITLE (заголовок документа) - служить для назви документу в World Wide Web.
  •  BASE (база URL) - служить для визначення базового URL для гіпертекстових посилань документа, заданих в неповній (часткової) формі.
  •  META (метаінформація) - містить керуючу інформацію, яку браузер використовує для правильного відображення і обробки змісту тіла документа.
  •  LINK (загальні посилання) - дозволило завантажувати зовнішні описувачі стилів.
  •  STYLE (описувачі стилей) - призначений для розміщення описувачів стилів.
  •  SCRIPT (скрипти) - служить для розміщення коду JavaScript, VBScript або JScript.

Атрибути META

HТТР-EQUIV - Визначає властивість для елемента.

NАМЕ - Забезпечує додатковий опис елемента. Якщо цей атрибут опущений, він вважається еквівалентним атрибуту HTTP-EQUIV.

URL - Визначає адресу документа для властивості.

Сontent - Визначає значення, що повертається для властивості.

<Meta Http-equiv="Content-Type" CONTENT="text/html; charset=windows-1251"> Документ написаний кирилицею в кодуванні Windows. Заміна в атрибут CONTENT параметра charset на koi8-r означала б документ російською мовою в UseNet-івської кодуванні. Заміна text / html; на text / plain; призведе до висновку неформатованого тексту.

<Meta Http-equiv="Refresh" Content="{чісло}; Url={URL файлу }"> Перенаправлення на іншу сторінку через певний час (в секундах), або перезавантаження поточної сторінки (наприклад, таке часто використовується в чатах) Наприклад : <Meta Http-equiv="Refresh" Content="20; Url=http://host.com/">

<Meta Http-equiv="Author" Content="{текст}"> Зазначення імені автора

<Meta Http-equiv="Description" Content="{ Опис документа }">

<Meta Http-equiv="Keywords" Content="{спісок ключових слів через кому або пробел}">

<Meta Http-equiv="Reply-to" Content="{Ваш E-Mail адрес}">

Теги тіла документа.

Теги тіла документа призначені для керування відображенням інформації у програмі інтерфейсу користувача. Вони описують гіпертекстову структуру бази даних за допомогою вбудованих в текст контекстних гіпертекстових посилань. Тіло документа складається з:

  •  ієрархічних контейнерів і заставок;
  •  заголовків (від Н1 до Н6);
  •  блоків (параграфи, списки, форми, таблиці, картинки і т.п.);
  •  горизонтальних відокремлень і адрес;
  •  тексту, розбитого на області дії стилів (підкреслення, виділення, курсив);
  •  математичних описів, графіки і гіпертекстових посилань.

Атрибути тегів. Теги можуть мати атрибути, які надають додаткову інформацію про елементи HTML. Загальний формат задання атрибутів має вигляд:

<Ім'я_тега ім'я_атрібута = "значення">

Вкладені атрибути елемента <BODY>:

BGCOLOR – задає колір фону документа за допомогою шістнадцяткових значень інтенсивності кольорів RGB, або за допомогою відповідної назви кольору.

<BODY BGCOLOR="#ff0000"> або <BODY BGCOLOR="RED">

Таблица 3.2. Цвета

Название

Код

Название

Код

aqua

#00FFFF

navy

#000080

black

#000000

olive

#808000

blue

#0000FF

purple

#800080

fuchsia

#FF00FF

red

#FF0000

gray

#808080

silver

#C0C0C0

green

#008000

teal

#008080

lime

#00FF00

white

#FFFFFF

maroon

#800000

yellow

#FFFF00

TEXT – задає, використовується за умовчанням, колір тексту, який не є гіперпосиланням. За замовчуванням такий текст буде чорним.

<BODY TEXT="колір">

Теги управління розміткою.

Шість рівнів заголовків <Hn>. Відповідні кожному рівню гарнітура і розмір шрифту залежать від браузера, стилю <H1> на-значущих найбільший і жирний шрифт, а стилю <H6> призначається найменший і самий непоказний шрифт.

Align= left/center/right – вирівнює текст відповідно по лівому краю/ по центру/ по правому краю.

<BR> - примусово задає розрив тексту з переходом на новий рядок.

<NOBR> - дає браузеру команду відображати весь текст в одному рядку.

Теги керування відображення символів.

  1.  Теги, що управляють формою відображення:

<ВIG> і <SMALL> - зміна розмірів шрифту.

<SUР> І <SUВ> - дає можливість задавати верхні і нижні індекси.

<FONT> - використовується з метою зміни виділення шрифтом слова або тексту. З ним застосовуються два атрибути face (вид шрифту), size (дозволяє задавати розмір тексту в даній області) і color(задає колір).

<EM> - використовується з метою виділення курсивним шрифтом слова або тексту.

<STRONG> - використовується з метою виділення напівжирним шрифтом слова або тексту.

<U> - використовується з метою виділення підкресленням слова або тексту.

<S> - перекреслений текст.

  1.  Теги, що характеризують тип інформації:

<CODE> - використовується з метою додаткового виділення фрагментів програмного коду.

<CITE> - використовується з метою позначення джерела інформації, з якого взята цитата.

<DFN> - використовується з метою позначення термінів і визначень за типом словників або глосаріїв.

Блоки цитат

<BLOCKQUOTE> - дозволяє виділити обьемний текст-цитату із загального тексту.

<BLOCKQUOTE> Текст </ BLOCKQUOTE>

Створення списків HTML

<OL> - використовується з метою завдання нумерованих списків, має атрибути type = 1, або A, або a, або I, або i для завдання виду нумерації і start для вказівки, з якого індексу починається нумерація списку. Елемент <OL> включає в себе додатковий елемент <LI>, який задає елементи списку.

<OL type=1 start=1>

<LI> елемент списку

<LI> елемент списку

</ OL>

<UL> - використовується з метою задання ненумерованих списків, має атрибут type = circle, square, або disc для задання виду маркера. Елемент <UL> включає в себе додатковий елемент <LI>, який задає елементи списку.

<UL type=circle>

<LI> елемент списку

<LI> елемент списку

</ UL>

<DL> використовується з метою завдання словників, глосаріїв та інших переліків. Елемент <DL> включає в себе додаткові елементи <DT> і <DD>, які позначають відповідно термін і визначення.

<DL>

<DT> термін

<DD> визначення

</ DL>

Оформлення тексту 

Преформатований вивід <PRE> Весь текст, укладений у теги <PRE> і </ PRE> буде візуалізовано браузером точно так, як він візуалізовано у вихідному коді документа, крім того текст виводиться моноширінним шрифтом, що значно спрощує завдання форматування тексту в колонки. Елемент підтримується не всіма браузерами, він може мати атрибут width, який задає ширину відведеного простору під текст в символах. Елемент змінив собою застарілі елементи <XMP>, <LISTING> і <PLAINTEXT>.

<PRE width=чісло символів> ... текст .. . </ PRE>

<P> - задає один із способів розбиття тексту на абзаци. Він може мати вкладений атрибут align, який вказує відступ left, center, right, justify. Кожен наступний абзац ігнорує, заданий для попереднього абзацу значення align.

<P align=отступ> Текст абзацу </ P>

<div> - є блоковим елементом і призначений для виділення фрагмента документа з метою зміни виду вмісту. Як правило, вигляд блоку управляється за допомогою стилів. Щоб не описувати кожен раз стиль всередині тега, можна виділити стиль в зовнішню таблицю стилів, а для тега додати параметр class або id з ім'ям селектора. Як і при використанні інших блокових елементів, вміст тега <DIV> завжди починається з нового рядка. Після нього також додається перенесення рядка.

Коментарі в мові HTML

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

<! --Це коментар -->

Завдання:

  1.  Завантажити редактор Notepad.
  2.  Створити домашню сторінку, що містить інформацію про студента. Обов'язковий зміст: інформація про те, чий сайт, електронна поштова адреса, посилання на робочу сторінку або сайт вузу студента, мій вуз - про навчальний заклад, моя група, моя майбутня професія, мої захоплення або хобі, будь-яка інша інформація.
  3.  В оформленні сторінки слід використовувати максимальну кількість перерахованих вище тегів HTML.
  4.  Зберегти створену веб-сторінку у папку html з ім'ям файлу storinka1.html.

Запитання для самоконтролю:

  1.  Що таке HTML?
  2.  Як ви розумієте, що таке тег?
  3.  За допомогою яких відомих вам програм можна створювати Web-документи в коді HTML?
  4.  За допомогою яких відомих вам програм можна переглядати Web-документи в коді HTML?
  5.  Як форматується текст в HTML?
  6.  Які види списків ви знаєте? Якими засобами створюються списки у Web-документи?

PAGE  5

Федорчук А.Л. (ЖДУ, кафедра прикладної математики та інформатики)


 

А также другие работы, которые могут Вас заинтересовать

22977. Мікропроцесор КР1810ВМ86 (8086) 6.05 MB
  Але у порівнянні з МП80 він має такі істотні відміни: при збереженні тієї ж nМОН технології була досягнута вища ступінь інтеграції і на кристалі 55 х 55 мм розташовано біля 30 тисяч транзисторів; зменшено інерційність логічних елементів і тактову частоту підвищено до 5 8 МГц; завдяки цьому продуктивність мікропроцесора збільшилась на порядок; розширено розрядність шини даних до 16 розрядів; розширено розрядність шини адреси до 20 розрядів таким чином забезпечено можливість адресувати пам’ять до 1 Мбайт; розширено у кілька разів...
22978. Переривання 5.91 MB
  Організація переривань Все починається з того що ЗП виставляє сигнал високого рівня логічну одиницю на вхід INT мікропроцесора. Ці дані будуть оброблятися мікропроцесором за підпрограмою обробки переривань яка повинна бути заздалегідь закладена у пам’ять мікропроцесора . Замість цього в лічильник команд заноситься адреса команди з якої починається підпрограма обробки переривань. Лише після цього стає можливим введення даних з ЗП і старт підпрограми обробки переривань цих даних.
22979. Прямий доступ до пам’яті (ПДП) 3.8 MB
  Контролер ПДП Забезпечити роботу в режимі захоплення шин можна за допомогою логічних схем та тригерів саме так це зроблено наприклад у €œМікролабі€ але зручніше скористатися спеціальною ВІС контролером прямого доступу до пам’яті КПДП. Працює КПДП в двох сильно відмінних один від одного режимах: в режимі програмування коли мікропроцесор €œзакладає€ в нього необхідні інструкції і в режимі обміну даними між зовнішнім пристроєм і ОЗП. Схематичне зображення ІМС КПДП типу КР580ВТ57 подано на рис. В режимі програмування вони...
22980. Клавіатура і індикація 5.36 MB
  ОЗП індикації являє собою область операційної пам’яті в якій стільки комірок скільки знаків може бути розміщено на екрані. Побудова знаків Знаки на екрані дисплею будуються за мозаїчним принципом. Знакоформувач Знакоформувач являє собою ПЗП в якому закладена інформація про структуру утворюваних ним знаків. Таким чином ці три ІМС можуть створювати 96 різних знаків символів.
22981. Робота зі співпроцесором 3.19 MB
  Обгрунтування необхідності співпроцесора Хоча мікропроцесор К1810ВМ86 оперує з 16розрядними числами відносна точність його обчислень не дуже висока. Такий допоміжний процесор має назву співпроцесора. Включення співпроцесора Для спільної роботи зі співпроцесором мікропроцесор МП86 слід включити у максимальний режим = 0.
22982. Тенденції у розвитку мікропроцесорної техніки 1011.5 KB
  Другий шлях полягає навпаки у роздрібненні секціонуванні мікропроцесора на окремі функціональні блоки і модулі кожний з яких виконує свої операції: операційний блок блок мікрокомандного керування блок пам’яті мікрокоманд та інше. Його система команд майже цілком співпадає з системою команд МП80 і відрізняється від неї лише декількома додатковими командами про які мова йтиме далі. У апаратному відношенні МП85 містить всі ті ж блоки що і МП80 але має крім того: блок керування перериваннями котрий розширює можливість звернення до...
22983. Система команд та методи адресації в мікропроцесорі КР1810ВМ86 1.05 MB
  Серед цього списку можна виявити що деякі команди не змінили ані форми ані змісту наприклад HLT NOP STC IN OUT JMPCALL тощо. Деякі команди зберегли свій зміст але мають дещо іншу мнемоніку: для МП80 INR DCR ANA ORA XRA JZ JNZ JC JNC для МП86 INC DEC AND OR XOR JE JNE JB JNB З’явилися принципово нові команди пoв’язані з новими можливостями МП86: MUL множення; DIV ділення; NEG утворення доповняльного коду; NOTінверсія; TEST операція І без фіксації результату тільки заради...
22984. Мультипроцесорні системи 4.79 MB
  Дійсно звернення до пам’яті або до зовнішніх пристроїв та захоплення системної шини дозволяється одночасно лише одному з процесорів тоді як останні повинні в цей час переробляти раніш одержані дані або знаходитись в режимі очікування. Такий часовий розподіл загальних ресурсів системи має назву арбітражу системної шини і виконується групою пристроїв спеціальних ІМС так званих арбітрів шини. Арбітр шини дозволяє захоплення системної шини лише одному з процесорів що виставили запит тому котрий посідає найвищого пріоритету і...
22985. Мікропроцесори 80386 і 80486 4.79 MB
  Це дозволяє йому здійснювати обмін з пам’яттю зі швидкістю до 32 Мбайт сек і виконувати до 5 мільйонів операцій у секунду MIPS. Отже під час виконання одної команди відбувається декодування другої а третя видобувається з пам’яті. Усі можливості МП386 мультипрограмність віртуальна пам’ять захист пріоритети зповна відкриваються лише в захищеному режимі. У порівнянні з МП286 у МП386 існують істотні відміни в організації віртуальної пам’яті.