86855

Основи мови HTML

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

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

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

Украинкский

2015-04-11

103.5 KB

2 чел.

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

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


 

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

27235. Определите возможности использования дебатов на уроке истории 24.5 KB
  определите возможности использования дебатов на уроке истории ДЕБАТЫ чётко структурированный и специально организованный публичный обмен мыслями между двумя сторонами по актуальным темам. Классификация дебатов на уроках истории: а проблемные дебаты предусматривают знакомство участников с историографическими концепциями затрагивают ключевые дискуссионные проблемы например Роль варягов в образовании Древнерусского государства Влияние ордынского ига на историческое развитие Руси; б экспрессдебаты по минипроблемам дебаты в...
27237. Дайте порівняльну характеристику основних ринкових структур (моделей ринку) 18.7 KB
  Під яку з цих ринкових класифікацій підлягає: комунальне господарство міста метрополітен кабельне TV районна лікарня комерційний банк кавярня перукарня Характерні риси основних типів ринку Чиста конкуренція Монополія Монополістична конкуренція Олігополія Кількість фірм Дуже багато Одна Багато Декілька Тип продукту Однорідний Унікальний немає замінювачів Диференційо ваний Однорідний або стандартизов Контроль за ціною Відсутній Значний Деякий Обмежений взаємозалежи Умови входу і виходу Дуже легкі Заблоковано Досить легкі Істотні...
27238. Охарактеризуйте досконалу (чисту) конкуренцію. В чому полягає специфіка ціноутворення в умовах досконалої конкуренції 14.55 KB
  У другому випадку мінімізує збитки якщо виробляє продукцію. У третьому фірма мінімізує збитки якщо закриває підприємство. Фірма мінімізує свої збитки коли виробляє обсяг продукції за якого загальні витрати перевищують загальний виторг на мінімальну величину. Якщо загальний виторг не перевищує загальних змінних витрат за будьякого обсягу виробництва фірма мінімізує збитки призупинивши виробництво продукту.
27239. Поясніть формування загального (TR), середнього (AR) та граничного (MR) доходу і відобразіть їх графічно 118.37 KB
  Звичайний дохід фірми формується за рахунок грошових надходжень від основної діяльності.Капітальний дохід це дохід фірми від перепродажу виробничих фондів землі майна та фінансових активів.Дивідендний дохід це дохід від акцій інших фірм яким володіє фірма. Основним видом доходу фірми є звичайний дохід.
27240. Обґрунтуйте теоретично, алгебраїчно та графічно правило граничного випуску і правило закриття. Охарактеризуйте механізм їх дії на ринку досконалої конкуренції 39.34 KB
  конкурентної фірми для монополії існують також умова беззбитковості коли і умова закриття коли . Тому правило граничного випускуMR = MC яке ми визначили для конкурентної фірми є універсальною не обхідною умовою максимізації прибутку для всіх типів ринкових структур. Як і для конкурентної фірми для монополії існує закриття .Зясувавши таким чином як зростає доход конкурентної фірми по мірі продажу додаткової одиниці товару можна перейти до розгляду того якими є умови визначення конкурентною фірмою обсягу пропозиції її продукції що...
27241. Виведіть рівновагу конкурентної фірми в короткому періоді при загальному та граничному підходах. За яких умов конкурентна фірма максимізує прибуток 33.33 KB
  Максимізація прибуткуконкурентною фірмою Мета фірми максимізація прибутку. Максимізація прибутку це максимізація різниці між валовим доходом і валовими витратами: ТК ТС. Передбачається що фірма враховує зміни величини витрат у процесі випуску продукції і вибирає той його обсяг який дасть максимум прибутку що і буде відповідати максимальній різниці ТR ТС. Основні підходидо визначеннямаксимізаціі прибутку Сукупнийаналіз використовує зіставлення сукупних величин.
27242. Проаналізуйте наступні варіанти вибору конкурентною фірмою оптимального випуску та оптимальної ціни: а) максимізації прибутку; б) мінімізації збитків; в) випадок незбитковості 32.41 KB
  Якщо ціна не менше від середніх змінних витрат Р =АVС то фірма повинна виробляти оптимальний рівень випуску. графік Максимізації прибутку конкурентною фірмою Максимізація прибутку досягається коли відрізок між TR і ТС найбільший відрізок АВ TR TC обсяг випуску Q. Точки С і D точки критичного обсягу випуску продукції коли ТС = TR.
27243. Виведіть рівновагу на ринку досконалої конкуренції в довгому періоді. Яка умова цієї рівноваги? Як співвідносяться досконала конкуренція та ефективність 31.98 KB
  Вільний вхід і вихід з галузі; 5. Якщо умови діяльності несприятливі для фірми то вона може піти з ринку галузіДосконала конкуренція припускає рівний доступ всіх фірм до ресурсів у тому числі і до технологічної інформації. Тому в довгостроковому періоді кожна фірма може вибрати і реалізувати найефектніший варіант виробництва внаслідок чого криві загальних витрат всіх фірм однієї галузі буде ідентичний і можна говорити що в довгостроковому періоді галузь складається з однакових або типових фірм. Довгострокова крива галузі в цьому...