Як створити HTML документ ?.

Читайте также:

Поради при створенні Web-сторінки

1. Потрібно звернути увагу на простоту та логічність розміщення інформації на ваших сторінках. Один із способів зробити інформацію більш легкою для сприйняття — залишити на сторінці достатньо вільного місця. Сторінка, що містить багато інформації, лише злякає відвідувача.

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

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

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

5. Якщо Web-сторінка має великий об¢єм, то, можливо, вам треба вставити гіперпосилання, що дозволяють користувачу швидко переміщуватися між частинами одного документа. Іноді має сенс замість одного довгого документа підготувати одну сторінку, котра містить перелік тем, кожну з яких слід розкрити на окремій Web-сторінці і встановити гіперпосилання на відповідні сторінки.

6. Використання графіки може додатково привернути користувачів. Але необхідно пам¢ятати про час завантаження вашої сторінки, що визначається кількістю й об¢ємом графічної інформації.

Перед тим, як помістити на сервер свої Web-сторінки, необхідно їх протестувати. Створені документи повинні пройти “локальну перевірку” у межах вашого жорсткого диска. При перевірці використовуйте різні броузери. При тестуванні варто виконати такі дії:

1. Перевірити правопис. Виконати автоматизовану перевірку правопису тексту.

2. Перевірити навігацію. Впевнитися, що усі гіперпосилання працюють правильно.

3. Перевірити доступ до зовнішніх файлів. Повинен бути правильно вказаний шлях до графічних, звукових та відеофайлів. Для неграфічних броузерів потрібно задати підміняючі текстові повідомлення.

4. Перевірити час завантаження Web-сторінки.

5. Виконати перевірку ваших Web-сторінок сторонньою особою. При цьому іноді виявляються такі факти, яких ви раніше не помічали.

Завдання до лабораторних робіт

Створити Web-сторінки, які висвітлюють наступну інформацію за вказанною темою:

· Глобальна подія

· Видатна людина

· Рейтинг товарів

Вони повинні бути пов’язані між собою гіперпосиланнями, а також мають бути гіперпосилання на них із головної Web-сторінки. Для оформлення використати графіку і фото, різноманітні стилі й формати тексту. Структура сайта може бути такою (рис. 1):

Рис. 1. Структура сайта

Лабораторна робота 1

Тема: Документ HTML. Форматування тексту.

1. Постановка задачі: Створити Web-сторінку з іменем myself.html, яка б містила такі заголовки: “ Інформація про автора”, “ Контакт(телефон, адлеса) ”. У цих розділах напишіть 2-3 абзаци осмисленого тексту, який був би вирівняний по ширині вікна. Визначте колір фону, тексту, а також гарнітуру. Всередині тексту використайте виділення слів жирним курсивом та підкресленням. Використайте різні теги форматування тексту.

Додайте заголовок другого рівня “ Назва розробляємого сайту” та розмістіть під ним невеликий текст із збереженням усіх відступів, інтервалів і перенесень строчок.

Перший тег, який повинен знаходитися у будь-якому HTML-документі, — це <HTML>. Він вказує на те, що даний документ дійсно містить у собі HTML-текст. Все, що ви напишете у своєму документі, має знаходитися всередині даного тега:

<HTML>

…

Текст документа

…

</HTML>

Заголовок міститься всередині тега <HEAD>...</HEAD>:

<HTML>

<HEAD>

...

Заголовок тексту

...

</HEAD>

...

Текст документа

...

</HTML>

У розділі заголовка вказується заголовок документа, для цього використовується тег <TITLE>…</TITLE>. Наприклад:

<HTML>

<HEAD>

<TITLE> Це заголовок документа </TITLE>

</HEAD>

...

текст документа

...

</HTML>

Весь останній HTML-документ, включаючи весь текст, міститься всередині тега <BODY>…</BODY>. Тепер документ виглядатиме ось так:

<HTML>

<HEAD>

<TITLE> Це заголовок документа </TITLE>

</HEAD>

<BODY>

...

Текст документа

...

</BODY>

</HTML>

Загальні відомості про документ розміщуються у тегах <META>. Наприклад:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

Windows –1251 — кодування для російської мови в операційній системі Windows.
Koi8-r — кодування для російської мови в операційній системі Unix.

Завдання 1. Створення найпростіших файлів HTML.

1. Запустити програму Блокнот (Notepad).

2. Наберіть у вікні редактора простий текст файла HTML:

<HTML>

<HEAD>

<TITLE> Інформація про себе</TITLE>

</HEAD>

<BODY>

Розклад занять на вівторок

</BODY>

</HTML>

3. Для перегляду створеної Web-сторінки загрузіть броузер Microsoft Internet Explorer.

Завдання 2. Деякі спеціальні команди форматування.

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

1. Внесіть зміни у ваш попередній файл.

<HTML>

<HEAD>

<TITLE> Інформація про себе </TITLE>

</HEAD>

<BODY>

Глобальна

Подіяь

в світі

</BODY>

</HTML>

Завдання 3. Виділення фрагментів тексту.

1. Внесіть зміни у ваш попередній файл.

<HTML>

<HEAD>

<TITLE> Інформація про себе </TITLE>

</HEAD>

<BODY>

Глобальна </В>

Подія

в світі

</BODY>

</HTML>

Можна використовувати комбіновані виділення текстів, наприклад:

.............

<В> Глобальна </В> Подія

В світі

............

Але при цьому необхідно пам¢ятати таке правило запису комбінованих тегів:

<тег-1><тег-2>...</тег-2></тег-1> — правильний запис;

<тег-1><тег-2>...</тег-1></тег-2> — неправильний запис.

Завдання 4. Використання стилів заголовка.

Використовується шість тегів заголовків (від <H1> до <H6>). Кожному тегу відповідає конкретний стиль, заданий параметрами настроювання броузера.

<HTML>

<HEAD>

<TITLE> Інформація про себе </TITLE>

</HEAD>

<BODY>

<H1> Глобальна </Н1>

<H2> Подія ь В світі </H2>

</BODY>

</HTML>

Завдання 5. Установлення розміру поточного шрифту.

Тег шрифту дозволяє задати розмір поточного шрифту в окремих місцях тексту у діапазоні від 1 до 7.

<HTML>

<HEAD>

<TITLE> Інформація про себе </TITLE>

</HEAD>

<BODY>

Глобальна

Подія

</BODY>

</HTML>

Завдання 6. Встановлення гарнітури і кольору шрифту.

Тег дає можливість управляти розміром, гарнітурою і кольором тексту. Зміна гарнітури виконується простим доповненням до тега , атрибута FACE. Наприклад, для зображення тексту шрифтом Arial необхідно записати: .

Для зміни кольору шрифту у тег додають атрибут COLOR=¢¢X¢¢. Замість X потрібно підставити або назву кольору (у лапках), або його шістнадцятирічне значення (формат RGB). Приклади запису кольору у форматі RGB наводимо у таблиці 1.

Таблиця 1

Колір	RBG	Колір	RBG
Black чорний		Purple бордовий	FFOOFF
While білий	FFFFFF	Yellow жовтий	FFFFOO
Red червоний	FFOOOO	Brown коричневий
Green зелений	OOFFOO	Orange оранжевий	FF8000
Azure бірюзовий	OOFFFF	Violet фіолетовий	8000FF
Blue синій	OOOOFF	Gray сірий	АОАОАО

1. Внесіть зміни у ваш попередній файл.

<HTML>

<HEAD>

<TITLE> Інформація про себе </TITLE>

</HEAD>

<BODY>

<FONT COLOR="#FFOOOO" FACE="ARIAL"

SIZE="7">

Глобальна

Подія

</BODY>

</HTML>

2. Самостійно змінити розмір, колір, гарнітуру, стиль тексту.

Завдання 7. Вирівнювання тексту по горизонталі.

Вирівнювання тексту виконується за допомогою атрибута ALIGN у тезі .

Внесіть зміни у ваш файл.

<HTML>

<HEAD>

<TITLE> Інформація про себе </TITLE>

</HEAD>

<BODY>

Глобальна

Подія

</Р>

</BODY>

</HTML>

Завдання 8. Встановлення кольору фону і тексту.

При зображенні фону і тексту броузери використовують кольори, встановлені за замовчуванням, — вони задані параметрами налаштування броузера. Якщо ви хочете задати інші кольори, то це потрібно зробити на початку файла HTML у тезі <BODY>. Атрибут BGCOLOR визначає колір фону сторінки, TEXT — колір тексту для всієї сторінки, LINK та VLINK визначає колір відповідно невідвіданих і відвіданих гіперпосилань (останні два параметри розглянемо пізніше).

<HTML>

<HEAD>

<TITLE> Інформація про </TITLE>

</HEAD>

Глобальна

з Подія

</BODY>

</HTML>

Лабораторна робота 2

Тема: Графіка усередині HTML-документа.

Постановка задачі: Створити за допомогою редактора малюнок (вашу емблему і розмістіть на вашій сторінці myself.html.
Створити Web-сторінку про себе, (про своїх друзів) та встановіть на ній фонове зображення.
Під іменем foto.html Створити Web-сторінку, на котрій розмістіть фотографії з надписами. Використайте такі атрибути, як ALT, BORDER, HEIGHT, WIDTH.

Як правило, броузери підтримують малюнки у форматах GIF та JPG. Формат GIF використовується для збереження малюнків із чіткими деталями, невеликим набором кольорів (до 256) і можливістю анімації. Крім того, цей формат підтримує ефект прозорості, а також можливість черезстрочного завантаження зображення. Формат JPG використовується для збереження повнокольорової графіки і фото (він підтримує 16,7 мільйона кольорів). При підготовці ілюстрацій для вашої Web-сторінки усю попередню обробку малюнка потрібно проводити, наприклад, у форматі BMP, а у формат GIF та JPG конвертується лише кінцевий варіант.

Завдання 1.

Розміщення графіки на Web-сторінці.

Графічне зображення вставляється у документ HTML за допомогою тега:

Дата добавления: 2015-10-02; просмотров: 187 | Нарушение авторских прав

<== предыдущая страница	\|	следующая страница ==>
Запам'ятаєте, що основна перевага HTML полягає в тім, що ваш документ може бути переглянутий на WEB-броузерах різних типів і на різних платформах.	\|	Закривати тег не потрібно. При виконанні завдання будемо вважати, що графічний файл clock.jpg знаходиться у вашому робочому каталозі, де і Web-сторінка.

mybiblioteka.su - 2015-2024 год. (0.018 сек.)