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

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


 

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

50359. Разработка проекта развития порта 241.95 KB
  Проектный анализ предполагает осуществление технико-экономического анализа, анализа экономической динамики и финансово-хозяйственной деятельности. Это позволит нам выяснить степень деловой активности предприятия, его платежеспособность и ликвидность. А также эффективность деятельности предприятия, то есть рентабельность.
50362. Основные конфликтологические теории. (К. Маркс, Р. Дарендорф, Л. Козер) 15.7 KB
  Ральф Дарендорф в своей «теории конфликта» исходил из того, что в каждом обществе существуют осевые линии социальных конфликтов. Конфликт, по его мнению, рождается из того, что одна группа или один класс сопротивляются «давлению» или господству противоположной им социальной силы.
50363. Изучение теории погрешностей и кинематики материальной точки 2.22 MB
  Экспериментальные точки не должны сливаться друг с другом; Масштабы вдоль осей следует выбирать так чтобы основная часть графика имела наклон близкий к и лежала в средней части между осями; Если на графике необязательно иметь начало координат начало и конец разметки по осям должны соответствовать минимальным и максимальным значениям аргумента и функции; Десятичные множители удобнее отнести к единице измерения тогда деления на Ося будут помечены цифрами 123 и т. На график наносятся все полученные в измерениях точки выносные...