Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Теги і структура HTML-документаСодержание книги Поиск на нашем сайте
Документ розбивається на елементи: заголовки, абзаци, малюнки, таблиці та ін. Для кожного елементу задається команда мови|язика| HTML, названа тегом| (або дескриптором). У цій команді міститься|утримується| інформація про те, як повинен виглядати даний елемент на Web-сторінці, які зв'язки він може мати з|із| іншими елементами або документами та ін. Тег (у перекладі|переведенні,переказі| tag – покажчик, мітка) – це фрагмент коду, який описує певний елемент документа HTML і замикається в кутові дужки < >. HTML-документ умовно можна розбити на три частини|частки|: 1. Службова інформація для броузера|, яка розміщується|ув'язнена| в рядку з|із| тегом| <!DOCTYPE>. 2. Заголовна частина|частка| документа, в якій міститься|утримується| назва документа, може розташовуватися службова інформація для серверів, опису невеликих програм-сценаріїв. Ця частина|частка| документа розташована між тегами| <HEAD> і </HEAD>. 3. Тіло документа, що розміщується|ув'язнена| між тегами| <BODY>... </BODY> (іноді|інколи| замість тегів| <BODY> можуть використовуватися теги| фреймової структури <FRAMESET>).
Кожен документ складається з окремих об'єктів: абзаців, заголовків, малюнків та ін. Ці об'єкти при перекладі|переведенні,переказі| у формат HTML мають вигляд елементів HTML. Елементи HTML – це пара тегів| і символьні дані (текст або код), розташованих між ними. Атрибути – це компоненти тега|, що містять вказівки про те, як броузер| повинен сприйняти та обробити тег|. Атрибут записується|занотовується| після|потім| імені тега| перед закриваючою|зачиняючою| дужкою > і складається|перебуває,складається|, як правило, з|із| пари "ім'я атрибуту=значення". Значення атрибута записується|занотовується| після|потім| імені атрибута через знак рівності =. Всі значення атрибутів за умовчанням повинні розташовуватись в подвійних (") або одинарних (') лапках. Імена атрибутів можуть набиратися як рядковими, так і прописними буквами|літерами|, – броузер| інтерпретуватиме їх однаковим чином. У тезі| може бути декілька атрибутів, в цьому випадку вони відокремлюються один від одного пробілами|прогалинами|.
Тема: Мова HTML. Сумісне застосування програм Блокнот та IE для створення сайту. Структура HTML-файлів. Обов’язкові теги, атрибути. Заголовок документа. Мета: Ознайомити студентів з основними тегами та структурою HTM ‑ файлів, складати web- сторінки з використанням тегів.
ПРАКТИЧНА ЧАСТИНА 1. Запустіть стандартну програму Блокнот. 2. У меню «Файл» виберіть команду Сохранить как... 3. У нижній частині|частці| діалогового вікна збереження|зберігання| файлу, що з'явилося|появилося|, знайдіть поле Тип файла і виберіть в ньому Все файлы. 4. У полі Имя файла введіть|запровадьте| його ім'я Пример1№гр.html 5. Виберіть місце на диску для цього файлу (у папціі|папці| Мои документы) і клацніть|лусніть| кнопку Сохранить. 6. В Блокноті у файлі Пример1№гр.html написати наступний|слідуючий| HTML-код: < HTML > < HEAD > < TITLE >Простий приклад|зразок|</ TITLE > </ HEAD > < BODY > Це приклад HTML–документа студента групи ОА1010 Іваненко Олексія </ BODY > </ HTML > 7.Файл зберегти і закрити|зачинити||зберіганням|. У цьому документі початок|розпочало,зачало| і кінець HTML-документа позначаються|значаться| парою тега|: < HTML >...</ HTML >, заголовна частина|частка| обмежена рамками тега| < HEAD >, тіло документа поміщене|ув'язнене| усередині контейнера| <BODY >. Текст «Простий приклад|зразок|», поміщений в тезі <TITLE > |, інтерпретується броузером| як назва Web-сторінки і відображається|відображується| в рядку заголовка вікна броузера|. 8. Запустити програму-броузер| Internet Explorer і відкрити|відчинити| створений файл Пример1№гр.html 9. У програмі «Блокнот» створіть новий файл і збережіть його з|із| ім'ям Пример2№гр.html Створення|створіння| абзаців і рядків Скопіюйте з|із| файлу Пример1.html обов'язкові теги| у файл Пример2.html і напишіть наступний|слідуючий| HTMLкод: < HTML > < HEAD > < TITLE >Баллада</ TITLE > </ HEAD > < BODY > < P >Баллада о двух сестрах</ P > К двум сестрам в терем над водою< BR > Приехал рыцарь|рицар| молодой.< BR >< BR > Роберт Бернс </ BODY ></ HTML > Для створення|створіння| абзаца на мові|язиці| HTML передбачене використання тегу| < Р >, між двома частинами якого розміщується текст абзацу. Для перехіду до нового|переведення,переказу| рядка (розрив рядка) застосовується тег| <ВR>. 10. Запустіть програму-броузер| Internet Explorer і відкрийте|відчиніть| файл Пример2.html. Розташуйте на екрані одночасно два вікна: браузера та редактора|, щоб бачити HTML-код файлу і його відображення у вікні броузера|. Тема: Задання кольору HTML-сторінки. Форматування абзаців. Заголовки на сторінці. Теги <HR><SUB><SUP>. Мета: Навчити студентів створювати кольорову HTML-сторінку з формато ваним текстом та заголовками. ТЕОРЕТИЧНІ ВІДОМОСТІ Колірна гама Колірна гама HTML-документа визначається наступними атрибутами тега <BODY>: bgcolor — Визначає кольори фона документа. text — Визначає кольори тексту документа. Кольори кодуються послідовністю із трьох пар символів. Кожна пара являє собою шестнадцатиричне значення насиченості одного із трьох основних кольорів (червоного, зеленого й синього) у діапазоні від нуля (00) до 255 (FF). Розберемо кілька прикладів: bgcolor=#FFFFFF Колір тла. Насиченість червоного, зеленого і синього однаково максимальна – FF (це шестнадцатиричне подання числа 255). Результат – білий колір. text=#000000
Колір тексту. Насиченість червоного, зеленого і синього однаково мінімальна – 00 (нуль). Результат – чорний колір тексту. Крім того, тег <BODY> може включати атрибут background="[ім'я файлу]" що задає зображення, яке служить фоном для тексту й інших зображень. Фон повинен бути представлений у форматі GIF (файл із розширенням *. gif) або JPEG (файл із розширенням *. jpg або *. jpeg). Броузери заповнюють множинними копіями зображення-фона весь простір вікна, у якому відкритий документ. Форматування тексту Теги <Hn> та <P> можуть містити додатковий атрибут ALIGN (від англійського "вирівнювати"), наприклад: <H1 ALIGN=”CENTER”>Вирівнювання заголовка по центру</H1> або <P ALIGN=”RIGHT”>Абзац з вирівнюванням по правому краю</P>
Абзаци на HTML-сторінці відокремлюються один від одного пустим рядком, крім того, абзац не має відступу першого рядка. HTML допускає два підходи до шрифтового виділення фрагментів тексту. З одного боку, можна прямо вказати, що шрифт на деякій ділянці тексту повинен бути жирним або похилим, тобто змінити фізичний стиль тексту. З іншого боку, можна позначити деякий фрагмент тексту який має деякий відмінний від нормального логічний стиль, залишивши інтерпретацію цього стилю броузеру. Під фізичним стилем прийнято розуміти пряму вказівку броузеру на модифікацію поточного шрифту. Наприклад, усе, що перебуває між мітками <B> і </B>, буде написано жирним шрифтом. Текст між мітками < I > і </I > буде написаний похилим шрифтом. Розмір шрифту тексту можна змінювати, використовуючи тег <FONT> з атрибутом SIZE та атрибутом COLOR наприклад, <FONT SIZE="+4" color=”red”>Здрастуйте!</FONT>. У цьому прикладі слово «Здрастуйте» буде виведено на екран шрифтом червоного кольору, збільшеним на 4 позиції в порівнянні зі стандартним (стандартним вважається значення 3, яке приблизно відповідає розміру 12 MS Word), значення атрибута SIZE може змінюватись від 1 до 7. ПРАКТИЧНА ЧАСТИНА 1.Завантажити в програми Блокнот і Internet Explorer. Відкрийте свій HTML-файл. 2.Введіть наступний HTML-код: < HTML > < HEAD > < TITLE >Моя перша сторінка</ TITLE > </ HEAD > < BODY BGCOLOR ="darkblue"> < FONT SIZE ="2" COLOR ="lightblue"> < I >< B >< CENTER > Ласкаво просимо! Це моя перша сторінка! </ B ></ I ></ CENTER ></ FONT > </ BODY > </ HTML > 3.Завантажити збережений файл у броузері. Самостійно: підберіть колірну гаму для своєї сторінки. Уведіть кілька абзаців тексту, що включає списки. Відформатуйте: абзаци – вирівняйте по лівому й правому краю й по центру; шрифт відобразити різними стилями – напівжирним, курсивом, підкресленим. 4. Тег <HR> призначений для проведення горизонтальної лінії. У даному тезі можливо вказати її розміри за довжиною та шириною, крім того лінії можливо вирівнювати згідно розмірів екрану. 5.Тег <SUB> призначений для створення нижнього індексу. Приклад: Створити формулу вигляду H2O H< SUB >2</ SUB >O 6.Тег <SUP> призначений для створення верхнього індексу. Коментарі позначають|значать| фрагмент невиконуваного коду і розташовуються між групами символів <!-- і -->. Наприклад, на екрані не відображатимуться|відображуватимуться| наступні|слідуючі| елементи: <!-- Коментар, що займає один рядок --> Заголовки Взагалі існує 6 рівней заголовків. Заголовки створюються за допомогою парних тегів < Hn >…..</ Hn >, де n – номер рівня заголовка. Чим менший номер заголовка тим менший він за розміром. Заголовок є окремим типом абзаца. Завдання. Створити усі шість рівнів заголовків, з текстом Заголовок1 . . . Заголовок6 Користуючись різними засобами вирівнювання, кожні 2 види заголовків вирівняти по центру, по правому краю, по лівому краю вікна
|
||||
Последнее изменение этой страницы: 2016-08-06; просмотров: 455; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.133.124.161 (0.008 с.) |