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

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


 

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

54184. ПРОГРАМА факультативного курсу з математики для учнів 10-11 класів універсального профілю ЗНЗ «Довузівська підготовка з математики» 170.5 KB
  Поглиблення реалізується на базі вивчення методів і прийомів розвязування математичних задач які потребують застосування високої логічної та операційної культури розвиваючих науковотеоретичне і алгоритмічне міркування учнів. МЕТА КУРСУ: розвиток математичних здібностей учнів; формування алгоритмічного мислення та високої логічної культури; вироблення навичок самостійної роботи при розв’язуванні задач; перенесення засвоєних знань на розв’язування складних та нестандартних задач; якісна підготовка до незалежного зовнішнього...
54185. Развитие логического мышления на уроках математики 139.5 KB
  Упражнение Добавь слово Первый ученик называет слово второй называет слово первого и добавляет своё слово третий называет слова первого и второго и добавляет своё слово и т. изначальное умение обеспечивающее сознательное отношение к письму мотивирующее обращение к правилу к словарю.
54186. Обобщение и систематизация знаний по теме «Квадратичная функция» 316 KB
  Способствовать формированию навыков применения алгоритмов построения графиков квадратичной функции решения неравенств второй степени графическим способом методом интервалов c помощью программы dvnced Grpher. Учитель сообщает что цель урока – систематизация знаний по теме Квадратичная функция формирование умений построения графиков квадратичной функции и решения неравенств второй степени графическим способом и методом интервалов. Домашнее задание 1Построить график квадратичной функции Y= x 2x – 3 Решение DY:x R EY:...
54187. Геометричні фігури (математична народна казка) 1.41 MB
  Козак Мамарига ведучий і різні геометричні фігури жителі казкового села: Точки Відрізок Пряма Промінь хазяйка казкового палацу Геометрія Кути гострий прямий і тупий Бісектриса Трикутник. Квадрат і трикутник. Трикутник показує своє зображення і продовжує. Я найпростіший з багатокутників.
54188. Решение неравенств второй степени с одной переменной.(9 класс) 5.3 MB
  Ввести понятие неравенства второй степени с одной переменной, дать определение. Познакомить с алгоритмом решения неравенств на основе свойств квадратичной функции. Сформировать умения решать неравенства данного вида.
54189. Развитие культуры в эпоху мезолита и неолита. Понятие неолитической революции 33 KB
  В эпоху мезолита изменились климатические условия на планете. Одни животные, на которых охотились, исчезли; им на смену пришли другие. Стало развиваться рыболовство
54190. Лекційно-практична система навчання математики з використанням групових форм роботи 774 KB
  Розв’язування задач на використання поняття та властивостей арифметичної прогресії Мета. Закріплення учнями поняття арифметичної прогресії та її властивостей. Біля дошки 3 учні виводять формулу nго члена арифметичної прогресії; властивість суми двох членів арифметичної прогресії рівновіддалених від її кінців; формулу суми n перших членів. Яку послідовність називають арифметичною прогресією Що називається різницею арифметичної прогресії Як знайти різницю арифметичної прогресії Якою є арифметична прогресія якщо d 0 d 0...
54191. Основные черты и признаки раннеземледельческих культур и их исторические судьбы 35.5 KB
  Для перехода к земледелию было необходимо культивирование высокопродуктивных злаков. Первый злак, который люди стали сжинать в диком виде – ячмень, затем были культивированы – пшеница, кукуруза, рис. Это привело к устойчивости в обеспечении племенных групп продуктами питания.
54192. Занятие по математике с одаренными детьми 154.5 KB
  Сколько всего на ней чисел 9 Сколько двузначных 5 Однозначных 3 Трехзначных 1 Сколько чисел четных 3 Нечетных 5 Сколько всего цифр записано 16 Сколько разных цифр 6 Назовите двузначное число где сумма десятков и единиц равна наибольшему однозначному числу 72 Назовите двузначное число где разность между десятками и единицами равна наименьшему однозначному числу 99 Дети вы хорошо поработали по числовой таблице. Сколько точек будет в круге Столько раз поднимем руки. Сколько...