Новости
- Мова HTML. Структура HTML-програми. Фон сторінки. Мова HTML.
- Базисні теги мови HTML.
- Основні теги заголовка HTML-програми.
- Основні командні слова в тезі BODY.
- Фон сторінки.
Мова HTML. Структура HTML-програми. Фон сторінки. Мова HTML.
Для того, щоб публікувати інформацію для повсюдного поширення, необхідно мати мову, зрозуміла всім комп'ютерів. Видавничий мова, яка використовується на World Wide Web, називається HTML (від англійського Hyper Text Markup Language - мова розмітки гіпертексту).
HTML являє собою сукупність досить простих команд, які вставляються в вихідний текст документа і дозволяють управляти поданням цього документа на екрані дисплея. Таким чином, текст, створений за допомогою будь-якого текстового редактора, а потім збережений у форматі HTML, стає Web-сторінкою (HTML-документом) після додавання в нього команд мови HTML.
Базисні теги мови HTML.
Теги дозволяють управляти представленням інформації на екрані при відображенні HTML-документів спеціальними програмами - браузерами. (Наприклад, Microsoft Internet Explorer або Netscape Navigator)
Прийнявши інформацію, браузер компонує елементи документа відповідно до того, що задано командами HTML, і показує результат на екрані з урахуванням попередніх налаштувань, що стосуються розмірів вікна браузера, використовуваної колірної схеми, встановлених квітів і т.д.
Теги можуть бути двох видів: 1) одноелементний тег: <...>; його досить просто вставити в текст для того, щоб здійснити будь-яку дію; 2) парний тег: <...> ... </ ...>; він впливає на текст, з того місця, де вжито, до того місця, де вказана ознака закінчення його дії. Ознакою завершення команди служить той же самий тег, тільки починається з символу слеш "/": <...> - відкривається тег, </ ...> - закривається тег.
<HTML> ... </ HTML> - межі HTML-програми
Будь HTML-документ повинен починатися (і закінчуватися) тегом <HTML> ... </ HTML>. Цей тег вказує на те, що даний документ містить в собі HTML-текст.
Web-документ розбивається на дві логічні частини: заголовок і зміст.
<HEAD> ... </ HEAD> - заголовок HTML-програми
Тема також називають головною частиною програми, він містить довідкову інформацію про сторінку, яка не відображається браузером, а також назва документа.
<BODY> ... </ BODY> - зміст HTML-програми
Основний зміст сторінки поміщається в тег <BODY> ... </ BODY>. Його також називають тілом програми.
Зауваження: HTML не чутливий до регістру, тобто все одно якими буквами писати: великими або малими (наприклад BODY еквівалентно body або Body).
Основні теги заголовка HTML-програми.
У головній частині програми зазвичай пишеться
Тег TITLE - ім'я вікна, що містить Вашу сторінку (не більше 64 символів). Показується в заголовку вікна браузера.
1. Створіть на диску окрему директорію (папку) для своєї майбутньої сторінки. Ви можете назвати її своїм ім'ям (прізвищем). Наприклад, D: \ IVANOVA. 2. Запуск Блокнот ( як запустити Блокнот ). 3. Наберіть текст HTML, в який дозволите все теги, що ми розібрали. Між тегами <BODY> і </ BODY> напишіть кілька слів про себе. 4. У меню Файл (File) виконайте команду Зберегти як. У діалоговому вікні Збереження файлу знайдіть створену папку, вкажіть тип файлу Все файли і збережіть файл, назвавши його своїм ім'ям (прізвищем), і вказавши розширення HTM. Наприклад, D: \ IVANOVA \ Ivanova.HTM 5. Закрийте Блокнот. Вітаю! Ви вже створили реальний електронний документ. Можете подивитися, що у Вас вийшло. Для цього: 6. Завантажте браузер Microsoft Internet Explorer або Netscape Navigator. 7. У меню Файл (File) виконайте команду Відкрити. Використовуючи кнопку Огляд, знайдіть свій документ D: \ IVANOVA \ Ivanova.HTM і завантажте його. Зауважте, що якщо ви не забули вказати назву в тезі TITLE, то воно відбилося в верхньому рядку браузера.
Основні командні слова в тезі BODY.
Все, що ми будемо вивчати далі (крім фреймів) пишеться в тегу BODY.
Фон сторінки.
Значення кольору в атрибутах HTML-мови може здаватися кількома способами: назвою, наприклад "red"; кодом RGB, наприклад "#FFFFFF"; в десятковому вигляді, наприклад "255, 0, 0"; у відсотках, наприклад "30%, 40%, 30%"; Код RGB - це три шістнадцятирічних числа в діапазоні 00 - FF. 1-е, 2-е і 3-е число, відповідно, являють собою кількість червоного, зеленого і синього тонів в кольорі. Наприклад, # 000000 - це чорний колір (відсутність кольору), # FF0000 - яскраво-червоний, # 00FF00 - яскраво-зелений, # 0000FF - яскраво-синій, а #FFFFFF - білий (всі кольори присутні повністю).
Таблиця 16-і стандартних квітів Назва Код RGB Ім'я Колір Назва Код RGB Ім'я Колір чорний # 000000 black срібний # C0C0C0 silver темно-бордовий # 800000 maroon червоний # FF0000 red зелений # 008000 green вапно # 00FF00 lime оливковий # 808000 olive жовтий # FFFF00 yellow темно-синій # 000080 navy синій # 0000FF blue фіолетовий # 800080 purple фуксія # FF00FF fuchsia чирок # 008080 teal аква # 00FFFF aqva сірий # 808080 gray білий #FFFFFF white
Колір фону задає слово BGCOLOR.
приклад:
1. При необхідності виконайте пункти 6, 7 вправи 1. 2. В меню Вид відкрийте команду Джерело (або В виде HTML). На екрані з'явиться Блокнот з Вашої HTML-програмою. 3. Внесіть зміни в програму: за допомогою команди BGCOLOR задайте колір фону Вашої сторінки. a) Ви можете це зробити зеленим; b) тепер залийте кольором purple; c) виберіть свій колір. 4. У меню Файл виберіть команду Зберегти і закрийте Блокнот. 5. У меню Вид вкажіть команду Оновити. Можна також використовувати клавішу F5.
фонова картинка
Фоном також можна зробити картинку. Командне слово BACKGROUND підключає цю картинку в якості фону вказує на те, де лежить фонова картинка. (Фонової картинкою може служити будь-який файл з розширенням GIF або JPG.)
приклад:
1. Збережіть картинку, яку ви хочете використовувати в якості фону, в створеній папці. Наприклад, D: \ IVANOVA \ fon.jpg ( Де можна взяти картинку )
2. У тегу BODY пропишіть атрибут BACKGROUND = "fon.jpg"
3. Допишите текст.
Зауважте, що фон рухається разом з фоном (перегляньте приклад, клацнувши на ньому кнопкою миші):
Якщо Ви хочете, щоб фонова картинка не прокручувалась разом з текстом, то вставте команду BGPROPERTIES = FIXED.
приклад:
<HTML> <HEAD> <TITLE> Сторінка Міккі </ TITLE> </ HEAD> <BODY BACKGROUND = "Приложение1 \ 15.jpg" BGPROPERTIES = FIXED> Перш за все, дозвольте представитися. Я - веселий мишеня на ім'я Міккі. Живу я в величезною казковій країні Діснейленді. Разом зі мною живуть мої друзі: брати Біллі, Віллі, Діллі з їх дядьком Дональдом, кумедний ведмедик Вінні, славний оленятко Бембі, пустотливий щеня Плуто і багато-багато інших. Так ось, до чого це я. Справа в тому, що в минулому році виповнилося 100 років людині, без якого сьогодні важко уявити нашу (а значить, і вашу) життя. Ця людина - наш творець Уолт Еліас Дісней. Без зайвої скромності можу сказати, що я, Міккі Маус - мабуть, найвідоміший персонаж Діснея. І я на своїй домашній сторінці вирішив поділитися з вами тим, що знаю про життя свого "батька". Читайте далі ... </ BODY> </ HTML>
- Як називаються програми перегляду файлів в Інтернет? Які програми перегляду файлів в Інтернет Ви знаєте?
- Як реалізується створення Web-документа з використанням HTML?
- Які теги повинні бути присутніми в HTML-файлі обов'язково? Яка логічна структура Web-документа?
На цьому уроці Ви повинні були:
- створити Web-сторінку, вказавши її заголовок;
- задати фон сторінки (за допомогою кольору або картинки);
- написати текст своєї першої сторінки.
Як реалізується створення Web-документа з використанням HTML?
Які теги повинні бути присутніми в HTML-файлі обов'язково?
Яка логічна структура Web-документа?