Створення зображення та використання його на web-сторінці 


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



ЗНАЕТЕ ЛИ ВЫ?

Створення зображення та використання його на web-сторінці



1. Відкрийте програму Paint (Пуск→Программы→Стандартные→ Paint). Задайте розміри нового малюнка, наприклад 50х50 точок (Рисунок→Атрибуты).

2. Оберіть червоний колір переднього плану та зелений колір фону. Залийте малюнок фоновим кольором.

3. Інструментом, наприклад, Кисть, і нанесіть довільний червоний малюнок на зелений фон.

4. Збережіть малюнок під ім’ям pic1.gif (у форматі GIF).

У деяких версіях Windows програма Paint дозволяє створювати малюнки GIF з прозорим фоном. У такому випадку діалогове вікно Атрибуты (Рисунок→Атрибуты) містить прапорець Использовать прозрачный цвет фона.

5. Створіть новий документ first.htm у програмі Блокнот.

6. Видаліть все (якщо щось там з’явилось…), що розташовано між тегами <BODY> та </BODY>. Текст, який буде вводитися у наступних пунктах цієї вправи, необхідно помістити після тега <BODY>.

7. Уведіть довільний текст (4-5 рядків) та встановіть текстовий курсор на його початок.

8. Уведіть тег <IMG SRC=pic1.gif ALIGN=BOTTOM>.

9. Збережіть документ під ім’ям picture.htm.

10. За допомогою програми Internet Explorer відкрийте файл picture.htm та перегляньте документ, який щойно отримали. Зверніть увагу на зображення.

11. Поверніться до програми Блокнот та змініть значення атрибута: ALIGN=TOP. Збережіть фал під тим же ім’ям.

12. Поверніться до програми Internet Explorer та натисніть ЛКМ по кнопці Обновить на панелі інструментів. Зверніть увагу, як змінився вигляд сторінки при зміні атрибутів.

13. Поверніться до програми Блокнот та змініть значення атрибута: ALIGN=LEFT. Збережіть фал під тим же ім’ям.

14. Поверніться до програми Internet Explorer та натисніть ЛКМ по кнопці Обновить на панелі інструментів. Зверніть увагу, як змінився вигляд сторінки при зміні атрибутів.

15. Поверніться до програми Блокнот та додайте у тег <IMG> атрибути: HSPACE=40 VSPACE=20. Збережіть фал під тим же ім’ям.

16. Поверніться до програми Internet Explorer та натисніть ЛКМ по кнопці Обновить на панелі інструментів. Зверніть увагу, як змінився вигляд сторінки при зміні атрибутів.

В цій вправі ми навчилися вставляти зображення у документ та з’ясували, як впливають атрибути тега <IMG> на спосіб відображення зображення.

 

Засоби форматування тексту

 

1. Відкрийте документ file2.htm у програмі Блокнот.

2. Видаліть весь текст, який розташований між тегами <BODY> та </BODY>. Текст, який буде вводитися у наступних пунктах цієї вправи, необхідно помістити після тега <BODY>, а його конкретний зміст може бути довільним.

3. Уведіть тег <BASEFONT SIZE=5 COLOR=BROWN>. він задає виведення тексту за замовчуванням збільшеним шрифтом коричневого кольору.

4. Уведіть довільний абзац тексту, який буде виводитися шрифтом за замовчуванням. Почніть абзац з тега <P>.

5. Уведіть теги: <P><FONT SIZE-2 FACE=ARIAL COLOR=GREEN>.

6. Уведіть черговий абзац тексту, закінчивши його тегом </FONT>.

7. У наступному абзаці використайте за власним смаком парні теги: <В> (напівжирний шрифт), <І> (курсив), <U> (підкреслювання), <S> (викреслювання), <SUВ> (нижній індекс), <SUР> (верхній індекс).

8. У наступному абзаці скористайтеся за власним смаком парними тегами: <EM> (виділення), <STRONG> (потужне виділення), <CODE> (текст програми), <KBD> (клавіатурне введення), <SAMP> (приклад введення), <VAR> (комп’ютерна змінна).

9. Збережіть отриманий документ під іменем format.htm.

10. Запустіть програму Internet Explorer та відкрийте файл format.htm.

11. Дослідіть, як елементи, що використовують в HTML, впливають на спосі відображення тексту.

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

13. Поверніться до програми Internet Explorer та натисніть на кнопці Обновить на панелі інструментів. Перегляньте зміни вигляду сторінки.

Ми познайомилися з деякими елементами мови HTML, які можуть використовуватися для форматування тексту документа. Ми з’ясували, як ці елементи впливають на відображення документа, та узнали, що такі елементи можна вкладувати одне в одне.

 

 

Засоби створення списків

 

1. Відкрийте документ file2.htm у програмі Блокнот.

2. Видаліть весь текст, що розташований між тегами <BODY> та </BODY>. Текст, який буде вводитися у наступних пунктах цієї вправи, необхідно помістити після тега <BODY>, а його конкретний зміст може бути довільним.

3. Вставте у документ елементи списку, але перед кожним з них вставляйте тег <LI>.

4. Закінчить список за допомогою тега <ОL>.

5. Збережіть отриманий документ під іменем list.htm.

6. За допомогою програми Internet Explorer відкрийте файл list.htm.

7. З’ясуйте, як впорядкований список відображується у програмі Internet Explorer. Зверніть увагу на спосіб нумерування, заданий за допомогою атрибута TYPE=.

8. Поверніться у програму Блокнот та встановіть текстовий курсор після закінчення уведеного списка.

9. Вставте у документ тег <UL NIPE=SQUARE>, який починає невпорядкований (маркований) список.

10. Встановіть у документ елементи списка, починаючи кожний з них тегом <LI>.

11. Закінчіть список за допомогою тега </UL>. Збережіть документ під тим же ім’ям.

12. Поверніться до програми Internet Explorer та натисніть ЛКМ на кнопці Обновить на панелі інструментів. Перегляньте, як змінився вигляд сторінки, звернувши увагу на спосіб маркування, заданий за допомогою атрибута TYPE=.

13. Поверніться до програми Блокнот та встановіть текстовий курсор після закінчення введення текста.

14. Встановіть у документ тег <DL>, який починає список визначень.

15. Вставте у список слова, що підлягають визначенню, починаючи їх із тега <DD>.

16. Закінчіть список за допомогою тега </DL>. Збережіть документ під тим самим ім’ям.

17. Поверніться у програму Internet Explorer та натисніть ЛКМ на кнопці Обновить на панелі інструментів. Перегляньте, як виглядає при відображенні web-сторінки список визначень.

Ми навчилися створювати списки засобами мови HTML та визначати спосіб їх нумерації (маркування). Ми встановили, як виглядають списки під час їхнього відображення у браузері Internet Explorer. Ми також навчилися створювати список визначень.

 

 

Створення таблиць

 

1. Якщо ця вправа виконується не одразу ж після попередньої, то відкрийте документ first.htm у програмі Блокнот.

2. Видаліть весь текст, який розташований між тегами <BODY> та </BODY>. Текст, який буде вводитися у наступних пунктах цієї вправи, необхідно помістити після тега <BODY>. У даній вправі використовуватиметься список телефонів.

3. Уведіть тег <TABLE BORDER=10 WIDTH=100%>.

4. Уведіть рядок: <CAPTION ALIGN=TOP> Список телефонов</CAPTION>.

5. Перший рядок таблиці має містити заголовки стовпців. Визначте її наступним чином:

<TR BGCOLOR=YELLOW ALIGN=CENTER>

<TH>Фамилия<TH>Номер телефона

6. Визначте наступні рядки таблиці: перед кожним вставляйте тег <TR> та розміщуйте вміст кожної комірки після тега <TD>.

7. Останній рядок таблиці задайте наступним чином:

<TR><TD > ALIGN= CENTER COLSPAN=2>На первом этаже здания имеется бесплатный телефон-автомат.

8. Закінчіть таблицю тегом </TABLE>.

9. Збережіть документ під іменем table.htm.

10. Дайте команду Файл→Открыть. Натисніть по кнопці Обзор та відкрийте файл table.htm.

11. Дослідіть, як створена таблиця відображується у програмі Internet Explorer, звертаючи особливу увагу на вплив заданих атрибутів.

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

 

Ми познайомилися із засобами створення таблиць в HTML для представлення даних. Ми навчилися створювати таблиці та змінювати їх вигляд за допомогою атрибутів тегів HTML.

 

 

6.6. Елемент (тег) Body

 

У середині пари тегів <BODY параметри> … </BODY> записують увесь текст сторінки. цей текст відображатиметься у вікні браузера.

Розглянемо головні параметри тега BODY:

BACKGROUND = ”d:\myweb\picture1.jpg” Задає шлях до картинки для тла
BGCOLOR = “white” Задає білий колір тла, якщо не використовується тло-картинка.
BGPROPERTIES = “fixed” Фонове зображення не прокручується
TEXT = “black” Задає колір тексту (тут чорний) на сторінці

 

 



Поделиться:


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

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