Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Структурв HTML-документа. Управління текстом на web-сторінці

↑

⇐ ПредыдущаяСтр 6 из 8Следующая ⇒

Довідкові відомості

Стандартна структура HTML-документу:

<HTML> <HEAD> <TITLE> Заголовок сторінки </TITLE> </HEAD> <BODY> Вміст сторінки</BODY>

</HTML>

Головний файл web-стрінки за звичай має ім’я index.html. Інші допоміжні файли знаходяться в одній папці з цим файлом, або вкладених у неї папках.

Таблиця 1.1 - Теги HTML для керування шрифтом

Дія	Написання тега
Установити розмір шрифту (пріоритет) заголовку	<h1> Текст заголовку самий крупний </h1> <h2> Текст заголовку крупний </h2> ………………………………. <h6> Текст заголовку самий дрібний </h6>
Установити тип шрифту (шрифтів)	`<font face=”Arial”>` `Текст` `</font>` `<font face=”Arial, Times New Roman,` `Verdana”>` `Текст` `</font>`
Установити розмір шрифту тексту відносно базового значення 3	`<font` `size="+3">` `текст` `</font>` `<font` `size="+2">` `текст` `</font>` `<font` `size="+1">` `текст` `</font>` `<font` `size="+0"> текст </font>` `<font` `size="-1"> текст </font>` `<font` `size="-2">` `текст` `</font>`
Збільшення розміру шрифту відносно поточного	`<Big>` `Текст` `</Big>`
Зменшення розміру шрифту відносно поточного	`<Small>` `Текст` `</Small>`
Визначити нарис шрифту - півжирний - курсив - підкреслений	<b> Текст </b> <i> Текст </i> <u> Текст </u>
Надрядковий індекс	<Sup> Символи </Sup>
Підрядковий індекс	<Sub> Символи </Sub>

Таблиця 1.2 - Теги HTML для керування абзацами тексту:

Дія	Написання тега
Створити абзац	<p> Текст абзацу </p>
Вирівняти текст по лівому краю сторінки, - по центру - по правому краю - по ширине	<p align = “left”> Текст </p> <p align = “center”> Текст </p> <p align = “right”> Текст </p> <p align = “justify”> Текст </p>
Розмістити по центру сторінки	<center> Текст (об‘єкти) </center>
Примусово перевести курсор на новий рядок	<br>
Примусовий пробіл	&nbsp
Спеціальний символ a	α
Розмістити абзаци у списку	<ul> <li>Перший абзац</li> <li>Другий абзац</li> <li>Третій абзац</li> ………………………… </ul>

Завдання

1. Відкрити HTML-редактор та створити у ньому новий документ.

2. Увести заголовок web-сторінки.

3. Установити тип шрифту Arial та ввести номер лабораторноъ роботи ы назву теми як заголовки першого та третього рывныв выдповыдно.

4. Набрати чотири абзаци тексту. Перший абзац вирівняти по лівому краю сторінки, другий – виділити жирним шрифтом та вирівняти по правому краю сторінки, третій – виділити курсивом та розмістити по центру сторінки, четвертий – підкреслити та вирівняти за шириною сторінки.

5. Набрати декілька прописних та рядкових літер гречеського алвавіту, інших спеціальних символів.

6. Створити верхній та нижній індекси у тексті за зразком.

7. Створити довільний маркерований список.

8. Протестувати збережений HTML-документ за допомогою наявного на комп’ютері браузера.

Зразок виконаної роботи

Лабораторна робота №8

Тема:"Управління текстом на web-сторінці"

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

Форматування абзацу включає в себе завдання абзацного відступу (“червоного рядка”), інтервалу перед і після абзацу, інтервалу між рядками в абзаці, вирівнювання тексту в абзаці.

У текстовому редакторі Microsoft Word всі ці параметри можна задати в розділі меню Формат / Абзац або в пункті “Абзац” контекстного меню, що викликається натисканням правої клавіші миші.

Форматування шрифту включає в себе не тільки вибір виду та розміру шрифту. Додатково до цього ви можете задати опції вигляду шрифту (жирний, курсив і т.п.), а також спеціальні ефекти (закреслення тексту, ефект “тіні”, підняття або опускання тексту по відношенню до стандартного рівня). В основному меню Word це розділ “Формат / Шрифт”, в контекстному меню миші – пункт “Шрифт”.

Літери гречеського алфавіту^

α Ω θ

Верхній та нижній індекси:

x² x_i

Маркерований список:

Олівець
Лінійка
Циркуль

4. Контрольні питання

1. Навести стандартну структуру HTML-документу.

2. Чи може бути один тег вкладений в інший? Які існують правила вкадання тегів?

3. Як змінити тип шрифту на web-сторінці та у фрагменті тексту?

4. Для чого служать на web-сторінці заголовки та як у них змінити розмір шрифту?

5. Як змінити розмір шрифту у фрагменті тексту?

6. Як установити жирний шрифт, курсив та шрифт з підкресленням на web-сторінці?

7. Як вирівняти фрагмент тексту за лівим, правим краєм сторінки або по центру, розмістити текст за шириною сторінки?

8. Для чого служить параграф тексту і яким тегом він утворюється?

9. Як створити у тексті на web-сторінці верхній та нижній індекси?

10. Як вивести на web-сторінці символи гречеського алфавіту?

11. Як оформити на web-сторінці абзаци тексту у вигляді списка?

Лабораторна робота №9

Управління кольором та графічними зображеннями на web-сторінці

Довідкові відомості

Колір фону, шрифту або інших об’єктів задається на web-сторінці у кодовому вигляді як сполучення латинських літер та арабських цифр. На початку коду ставиться знак #.

Колір фону web-сторінки задається усередині тегу body:

< body bgcolor ="#000000"> .

Колір шрифту основного розділу сторінки задається тегом

< body text ="#336699">.

Колір шрифту у фрагменті тексту задається

 Текст  .

Для вставки графічного зображення на web-сторінку використо-вується тег

< img src ="Шлях до файлу./ім’я файлу.розширення">

Якщо файл знаходиться у одній папці з файлолм web-сторінки, з якого він викликається, шлях до файлу не прописується:

< img src ="ім’я файлу.розширення">.

На web-сторінці використовуються файли наступних типів: JPEG, GIF, PNG. GIF-зображення використовують для графіки та малюнків, а JPEG - для фотографій.Формат PNG за багатьма параметрами пере-важає JPEG и GIF: мільйони кольорів та ефективне стискування.

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

Графічне зображення може бути використане в якості фону сторінки:

< body background ="ім’я файлу.розширення">.

Розміщення графічного зображення за шириною сторінки здійснюється наступним чином:

<img src="1.png" align="left">

<img src="2.png" align="right">

<img src="3.png" align="center">

<img src="4.png" align="justify">

Текст, що знаходиться збоку від зображення, може бути вирівняний відносно зображення за висотою

`унизу`	`<img src="pr1.png" align="bottom">`
`посередині`	`<img src="pr1.png" align="middle">`
`унизу`	`<img src="pr1.png" align="top">`

Відстань від зображення до текста у пікселях по вертикалі

< img src ="1. png " vspace ="10">

Відстань від зображення до текста у пікселях по горизонталі

< img src =" 1 . png " hspace ="30">

Розміри графічного зображення на сторінці у пікселях

ширина < img src ="1. png " width ="100">

висота <img src="1.png" height="200">

Рамка заданої у пікселях ширини полів навколо зображення задається

<img src="pr1.png" border="5">

Коротке пояснення до зображення виводиться на сторінці атрибутом alt

< img src =" pr 1. png " alt =" М оя фотограф і я">

Для преривання обтікання зображення текстом використовується тегі

 

 

 

All - завершити обтікання об'єкта текстом. Left - завершити обтікання текстом об'єкта, вирівняного по лівому краю. Right - завершити обтікання текстом об'єкта, вирівняний-ного по правому краю.

До одного тега одночасно можуть бути включені декілька атрибутів

<img src="pr1.png" align="left" hspace="30" vspace="5" alt=" М оя фотограф і я ”>

Для відокремлення частини тексту може використовуватися горизонтальна лінія, яка створюється за допомогою тега <hr>

<hr size=3 width=250 align=center noshade>,

де size - товщина лінії в пікселях;

width - довжина лінії в пікселях або процентах вдносно ширини вікна броузера;

noshade – вказує на відсутність об’ємності лінії, якщо необхідно

Завдання

1. Створити нову веб-сторінку. Підібрати для сторінки декілька готових графічних зображень та зберегти їх у одну папку з файлом index.html.

2. Установити на сторінці фонове графічне зображення.

3. Установити угорі по центру сторінки графічне зображення у якості заголовку.

4. Установити на сторінці три зображення по діагоналі. Визначити розміри зображень. Додати пояснювальний текст до зображень, розмістивши його для першого зображення праворуч угорі, для другого – ліворуч по центру, для третього – ліворуч унизу (дивись приклад нижче).

5. Вставити на сторінку горизонтальну розділову лінію шириною 5 пікселів, нижче від якої по центру вставити зображення, обрамлене текстом. Відстань від зображення до тексту прийняти 20 пікселів.

Зразок виконаної роботи

4. Контрольні питання

1. Як установити колір фону веб-сторінки?

2. Як задати колір шрифту на сторінці та колір шрифту у фрагменті тексту?

3. Записати тег для вставки на сторінку зображення 1.png.

4. Навести способи вирівнювання зображення за шириною сторінки.

5. Як задати розміри графічного зображення на веб-сторінці?

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

7. Як установити рамку заданого кольору та заданої ширини навколо зображення?

8. Як задати відступи тексту від зображення?

9. Яким тегом створюється спливаючий надпис при наведенні на зображення миші?

10. Як створити на веб-сторінці розділову лінію та як установити її параметри?

Лабораторна робота №10

⇐ Предыдущая 1 2 3 4 567 8 Следующая ⇒

Познавательные статьи:

Техника прыжка в длину с разбега

Тактические действия в защите

История Олимпийских игр

История развития права интеллектуальной собственности

Последнее изменение этой страницы: 2016-04-18; просмотров: 441; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.128.172.168 (0.007 с.)