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

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


 

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

27953. Роль механизмов идентификации в процессе становления личности. Психология индивидуальных различий по Майерс-Бригс 53.89 KB
  Что касается другого типа взаимодействия конкуренции то здесь чаще всего анализ сконцентрирован на наиболее яркой ее форме а именно на конфликте. Эти элементы ведут себя различно в зависимости от типа конфликта. Межличностные отношения также даны во взии: они определяют как тип взя который возникает при данных конкретных условиях так и степень выраженности этого типа. Описание типологии MBTI ТЕОРЕТИЧЕСКАЯ ОСНОВА Основой тестирования служит классификация Карла Юнга разделившего в 1920 г различные группы людей по основным архетипам...
27954. Задатки, одаренность и талант. Психологические особенности одаренных 39.64 KB
  Психологические особенности одаренных Задатки генетические программы определяющие развитие функциональных систем в структуре мозга и человека в целом как индивида. Способности это такие индивидуальнопсихологические особенности человека которые содействуют успешному выполнению им той или иной деятельности и не сводятся к имеющимся у него знаниям умениям навыкам. Они тесно связаны с общей направленностью личности с мерой устойчивости склонностей человека некоторой деятельности. Способности это индивидуальнопсихологические...
27955. Гетерохронность развития человека в биологическом, психологическом и социальном планах 30.1 KB
  И в связи с этим изменяется содержание средств методов и форм организации занятий физическими упражнениями. Определение психологомпрактиком собственной позиции при взаимодействии с другими участниками взаимодействия – одна из важнейших задач и она должна непременно решаться в процессе организации собственной деятельности. Клиент бунтует против принятия непривычных для него форм поведения и организации действий преимущественно на бессознательном уровне а это требует особых способов и подходов. Аким образом Учитель занят передачей...
27956. Самооценка и уровень притязаний как структурные элементы личности 18.81 KB
  Самооценка и уровень притязаний как структурные элементы личности. САМООЦЕНКА ценность значимость которой индивид наделяет себя в целом и отдельные стороны своей личности деятельности поведения. Самооценка выполняет регуляторную и защитную функции влияя на поведение деятельность и развитие личности ее взаимоотношения с другими людьми.
27957. Бихевиоризм и его значение в изучении поведения. Самообучающаяся и саморазвивающаяся организация как альтернатива традиционной модели организации 26.75 KB
  Самообучающаяся и саморазвивающаяся организация как альтернатива традиционной модели организации. Тогда здесь справедливы все требования предъявляемые к психологу работающему в области развития организации: психолог проектирует ситуацию в школе с целью обеспечить оптимальное выполнение ею своих функций. Самообучающаяся и саморазвивающаяся организация как альтернатива традиционной модели организации. САМООБУЧАЮЩАЯСЯ ОРГАНИЗАЦИЯ термин используемый в организационной теории для обозначения: 1 одной из моделей организации...
27958. Целостный подход в психологии. Основные направления современных социально-психологических прикладных исследований 21.38 KB
  ЦЕЛОСТНЫЙ ПОДХОД в психологии — совокупность принципов изучения психики, сознания и поведения как целостных феноменов. Разрабатывался с начала XX в., главным образом в школах целостной психологии, как антитеза господствовавшему ранее в психологической науке элементаристскому подходу (признает первичность элементов (частей) над целым, источник развития объектов
27959. Наблюдение и эксперимент. Классификация видов наблюдения и эксперимента 30.91 KB
  Эмпирические и теоретические предпосылки возникновения социальной психологии. Так в дифференциальной психологии и психологии личности эмпирические зависимости большей частью имеют статус корреляций т. в психологии заключается в том что исследователь зачастую оказывается включенным в ситуацию общения с обследуемым лицом испытуемым и может невольно повлиять на его поведение. Эмпирические и теоретические предпосылки возникновения социальной психологии.
27960. Деятельность, действие, операции. Комплекс возможностей образовательной среды как интегративный критерий её качества 24.13 KB
  Леонтьев Основные положения теории деятельности 1.Действия человека предметны; они реализуют социальные производственные и культурные цели принцип предметности человеческой деятельности и принцип ее социальной обусловленности. Психологическая теория деятельности начала разрабатываться в 20х начале 30х гг. Но главное состояло в том что авторы теории деятельности взяли на вооружение философию диалектического материализма теорию К.
27961. Соотношение внешней и внутренней деятельности 20.64 KB
  Соотношение внешней и внутренней деятельности. Интериоризацией называют как известно переход в результате которого внешние по своей форме процессы с внешними же вещественными предметами преобразуются в процессы протекающие в умственном плане в плане сознания; при этом они подвергаются специфической трансформации обобщаются вербализуются сокращаются и главное становятся способными к дальнейшему развитию которое переходит границы возможностей...