Створення Web-сторінок за допомогою засобів MS Office

Скачати 409.5 Kb.

Назва	Створення Web-сторінок за допомогою засобів MS Office
Дата	02.04.2013
Розмір	409.5 Kb.
Тип	Документи

bibl.com.ua > Інформатика > Документи

1.2. Атрибути тегів

Відкриваючі теги часто можуть містити атрибути, які впливають на ефект, що створює тег.

Атрибути — це компоненти тегу, що містять вказівки про те, як броузер має сприйняти й обробити тег. Атрибут записується після імені тегу перед дужкою > і складається, як правило, із пари "ім’я атрибута — значення".

Деякі атрибути вимагають вказати значення атрибуту. Це значення відділяється від ключового слова знаком рівності (=). Значення атрибуту має міститись в лапках (“”), але в багатьох випадках ці лапки можуть ігноруватись без будь-якої шкоди.

Закриваючі теги ніколи не містять атрибути.

Приклад

Приклади тегів HTML з атрибутами:

,

1.3. Коментарі

В мовах програмування загальноприйняте використання коментарів.

Коментар — текстова стрічка, яка не є частиною програми і служить для пояснення..

Коментарі в мові HTML починаються із спеціального тегу відсутність закриваючої кутової дужки. Будь-який текст, який розміщується після цього тегу, розглядається як коментар і не відображається при відображенні сторінки у броузері. Закінчується коментар символом -->. Коментар може містити будь-які символи, крім символа “більше” (>), і, таким чином не може містити теги.

1.4. Елементи HTML

Кожний документ складається з окремих об'єктів: абзаців, заголовків, малюнків тощо. Ці об'єкти, переведені у формат HTML, зображаються у вигляді елементів HTML.

Елементи HTML — це пари тегів і символьні дані (текст або код), вміщені між ними.

Елемент називається звичайно за іменем тегу (без кутових дужок).

Усі елементи, передбачені в HTML, можна умовно поділити на кілька категорій:

             структурні — елементи, обов'язкові для документа, що відповідає стандарту HTML (наприклад, HTML, HEAD, BODY і TITLE);

             блокові — елементи, призначені для форматування цілих текстових блоків (наприклад, DIV, НІ, Н2 , НЗ , Н4, Н5, Нб, Р, PRE); часто блокові елементи відокремлюються переведенням рядка від іншої частини документа;

             текстові — елементи, що задають розмітку шрифту (І, В, U, BIG, SMALL і ін.), розмітку тексту (STRONG, CODE, VAR, СІТЕ і ін.);

             спеціальні — елементи порожнього рядка (BR,HR), якірний елемент А, впроваджені елементи (IMG, OBJECT, map і ін.), елементи таблиці (TABLE) тощо.

У будь-якому документі HTML обов'язково присутні вкладені елементи, тобто такі, що включені до складу інших елементів.

1.5. Структура документу HTML

Документ повинен починатись з тегу <HTML>і закінчуватись тегом </</b>HTML>. Дана пара повідомляє WEB-броузеру, що ваш документ написаний з використанням мови HTML.

HTML-документ умовно можна розбити на три частини:

                   Службова інформація для броузера, що вміщена у рядок з тегом DOCTYPE>.

                   Заголовна частина документа, до якої вміщена назва документа, а також службова інформація для серверів, описи невеликих програм-сценаріїв. Ця частина документа міститься між тегами <HEAD> і </</b>HEAD>. Безпосередній заголовок документа, обмежений тегами і , розміщається усередині -тегів Більшість WEB-броузеров відображають вміст тега

                   Тіло документа, що обмежене тегами <BODY> ... </</b>BODY> (іноді замість тегів можуть використовуватися теги фреймової структури , які тут не розглядаються).

Приклад найпростішого веб-документу:

Привіт! Це моя перша сторінка.

Створення Web-сторінок за допомогою засобів MS Office

Модуль 2. Створення WEB-сторінок використовуючи мову розмітки гіпертексту HTML

Після вивчення цього модуля Ви будете знати:

        призначення та структуру тегів HTML;

        структуру найпростішого документу HTML;

        основні теги оформлення тексту;

        основні теги для створення списків;

        основні теги для роботи з графікою та звуком;

        основні теги для роботи з таблицями;

        основні теги для роботи з гіперпосиланнями;

        основні теги для роботи з фреймами.

Після вивчення цього модуля Ви будете вміти:

        створювати структуру найпростішого документу HTML;

        застосовувати основні теги оформлення тексту;

        створювати різні види списків;

        використовувати у Web-сторінках графіку та звук;

        створювати та форматувати таблиці;

        створювати внутрішні та зовнішні гіперпосилання;

        працювати з фреймами.

Попередня підготовка. Для успішного засвоєння модуля потрібно знати матеріал, викладений у модулі №1 цього посібника та володіти основами роботи з персональним комп’ютером.

Необхідне обладнання. Для ефективного вивчення матеріалу потрібний персональний комп’ютер з операційною системою Windows, встановленою стандартною програмою Блокнот та встановленою програмою-броузером(наприклад Internet Explorer).

Рекомендації до роботи та мотивація до застосування знань. Всі описані у посібнику приклади потрібно виконати на персональному комп’ютері. Для поглиблення вмінь та навичок потрібно виконати лабораторно-практичні роботи та завдання до самостійної роботи.

Вивчення матеріалу модуля підготує Вас до сприйняття матеріалу модулів №2, №3 цього посібника, дасть можливість самостійно розвивати свої вміння в створенні Web-сторінок та Web-сайтів шляхом самоосвіти.

§1. Тeги HTML та їх використання. Структура документу HTML

1.1. Поняття тегу

Коди мови HTML, з допомогою яких виконується розмітка вихідного тексту, називаються тегами.

Тег (у перекладі tag — покажчик, мітка) — це набір символів, що описує певні елементи документа HTML і вміщений у кутові дужки <>.

HTML-теги можуть бути умовно розділені на дві категорії:

 теги, що визначають, як буде відображатися WEB-броузером тіло документа вцілому;

 теги, що описують загальні властивості документа, такі як заголовок або автор документа.

Всі теги починаються з символу "менше" (<) і закінчуються символом "більше" (>). Після відкриваючої кутової дужки розміщене ключове слово, що визначає тег.

Кожен тег в мові HTML має спеціальне призначення. Регістр літер в назвах тегів не має значення.

Як правило один тег діє тільки на частину документа, наприклад на абзац. В таких випадках використовують парні теги: відкриваючий і закриваючий. Відкриваючий тег створює ефект, а закриваючий — припиняє його дію. Закриваючий тег прочинається із символа (/).

Деякі теги дають разовий ефект в місці свого розміщення. В цьому випадку необхідності у закриваючому тезі немає, і він не використовується.

Якщо помилково в тезі вказано ключове слово, яке відсутнє в мові HTML, то тег ігнорується повністю.

При відображенні в броузері самі теги не відображаються, але впливають на спосіб відображення документа.

Приклади тегів HTML:

, ,

Приклади парних тегів HTML:

,

Приклади одинарних тегів:

,

Відображення даного документу у броузері Internet Explorer:

§2. Оформлення тексту

2.1. Задання заголовків

Заголовки поділяють HTML-документ на логічно закінчені блоки. Завдяки заголовкам відвідувач Web-сторінки може отримати уявлення про її вміст. Для задання заголовків використовуються парні теги <�Н1> (заголовок 1-го, найвищого рівня), <�Н2> (заголовок 2-го рівня) тощо. Усього передбачено 6 рівнів заголовків. Заголовки вище шостого рівня не є стандартом і можуть не підтримуватися броузером.

Програма броузера відображає заголовки більшим (напівжирним) шрифтом. Чим вище рівень заголовка, тим більший розмір шрифту. Заголовки відокремлюються порожніми рядками від іншого тексту.

Приклад

Заголовок першого рівня

Заголовки іншого рівня можуть бути представлені в загальному випадку так:

Заголовок x-го рівня , де x — цифра від 1 до 6, що визначає рівень заголовка.

2.2. Форматування абзаців і рядків

Тег абзацу

Броузер розділяє абзаци тільки при наявності тега
. Якщо ви не розділите абзаци тегом
, ваш документ буде виглядати як один великий абзац. Використання кінцевого тегу </Р> в елементі абзацу не є обов'язковим.

Додаткові атрибути тега
:
дозволяють вирівнювати абзац по лівому краю, центру й правому краю відповідно.

Розрив рядка — тег

Тег
сповіщає броузер про розрив рядка. Найкращий приклад використання даного тега — форматування адреси або будь-яка інша послідовність рядків, де броузер повинен відображати їх один під одним.

Приклад

ВПУ№4 м. Вінниці

вул. Червоноармійська, 5

Додатковий атрибут дозволяє розширити можливості тега
.

<BR CLEAR=left|right|all >. Даний атрибут дозволяє виконати не просто перенесення рядка, а розмістити наступний рядок, починаючи із точно лівої (left), правої (right) або обох (all) границь вікна броузера.

Нерозривний рядок —

Якщо ви не хочете, щоб броузер автоматично переносив рядок, то можете позначити його тегами і . У цьому випадку броузер не буде переносити рядок навіть якщо він виходить за межі екрана; замість цього броузер дозволить горизонтально прокручувати вікно.

Якщо ж ви бажаєте все-таки дозволити розбивку даного рядка на два, але в строго запланованому місці, то вставте тег у це місце.

Цитата — тег

Даний тег призначений для позначення в документі цитати з іншого джерела. Текст, позначений тегами
і
відступає від лівого краю документа на 8 пробілів.

Горизонтальна лінія — тег

Важливим засобом створення роздільників в тексті є горизонтальні лінії, які візуально відділяють різні частини документа одну від одної. Горизонтальна лінія створюється одинарним тегом
.

Формат тега:

Параметри тега:

SIZE — товщина лінії в пікселах.

WIDTH — ширина лінії в пікселах або відсотках від ширини вікна броузера.

ALIGN — розташування на екрані (ліворуч | по центру | праворуч).

NOSHADE — за замовчуванням лінія представлена в 3D вигляді з тінню. NOSHADE дозволяє побудувати лінію просто однотонною темною смужкою.

Таблиця 1. Список базових тегів HTML

Відкриваючий тег

Закриваючий тег

Призначення тегу

Позначення HTML-документа

Заголовна частина документа

Заголовок документа

Схожі:

Основи роботи в Microsoft Office FrontPage 2003 В даний час створення власного або корпоративного віртуального представництва в Internet не є складною задачею навіть для початківців...	Модуль Основи WEB-дизайну Приватні особи використовують персональні Web-сторінки для організації кола спілкування за якою-небудь тематикою або для презентації...
Тема. Публікація статичної та динамічної інформації з БД в локальних... Рінок різних типів засобами СУБД MS Access. Закріплення вмінь і навичок використання запитів для аналізу інформації БД. Усвідомлення...	Тема: Проектування Web-сторінок в програмі Microsoft FrontPage Приступаючи до створення веб-сайту, необхідно визначитися з його тематикою, кількістю підрозділів сайту та сторінок в кожному з них...
Завадський І. О. та ін. Інформатика: 9 кл.: Підруч для загальноосвіт... Тема. Використання та настроювання браузера. Вибір системи кодування під час перегляду web-сторінок. Збереження web-сторінок та їх...	Тема : Створення особистої Веб-сторінки та розміщення її в мережі Інтернет Мета: Створити за допомогою засобів програми Microsoft FrontPage особисту сторінку та розмістити її за допомогою засобів віддаленого...
ФОРМАТУВАННЯ WEB – СТОРІНОК ЗА ДОПОМОГОЮ ПРОГРАМИ FRONTPAGE Щоб ввести текст потрібно натиснути: шрифт за замовчуванням Times New Roman, 12 (14) пунктів, точніше – розмір 3 (4), «обычный»....	Тема: Створення Web сторінок в програмі Microsoft FrontPage Мета: Вдосконалити існуючий Веб-вузол. Доповнити його найпростішими гіперпосиланнями. Доповнити веб-сторінки
Тема: Настроювання параметрів сторінок. Створення колонтитулів Ознайомити учнів із принципами настроювання параметрів сторінок, способами оформлення сторінок тексту, створення колонтитулів, основними...	Урок 6 Тема: Автоматичне створення змісту документа. Настроювання... Навчальна мета: Познайомити учнів з основами роботи із текстовим редактором, поняттями автоматичного створення змісту документа,...

Додайте кнопку на своєму сайті:
Портал навчання

Відкриваючий тег	Закриваючий тег	Призначення тегу
		Позначення HTML-документа
		Заголовна частина документа
		Заголовок документа