Створення найпростішої веб-сторінки
В даному розділі ми на конкретному прикладі проілюструємо, як написати найпростішу веб-сторінку на мові програмування HTML.
Початковий етап створення найпростішої веб-сторінки
Те, що ми зараз зробили, можна назвати попередньої розміткою найпростішої веб-сторінки. Поки що наша сторінка не містить ніяких відомостей, і якщо зберегти її в такому вигляді, то при наступному відкритті її у вікні веб-браузера це вікно буде порожнім.
А текст, який ми ввели, являє собою три пари тегів HTML-документа. Відзначимо, що більшість тегів мови HTML використовуються в парі: перший тег називається відкриває, а другий - що закриває. Всі закривають теги мають на початку похилу риску (наприклад, на рис. 2.3 закривають тегами є. І).
Теги та призначені для ідентифікації HTML-документа. Хто відкриває тег цієї пари завжди слід на самому початку програмного коду, а закриває тег - в самому його кінці. Інакше кажучи, тегом починається програмний код сторінки, а тегом він завершується.
УВАГА Пара тегів і є обов'язковим атрибутом будь-якого HTML-документа.
За допомогою пари тегів здійснюється ідентифікація назви веб-сторінки. Інакше кажучи, весь текст, введений між цими тегами, буде згодом відображатися в заголовку вікна веб-браузера.
Збережемо введені дані у файлі з розширенням (припустимо, що наш файл буде називатися). Для цього виконаємо команду головного меню (ця команда викликається також натисканням комбінації клавіш), після чого у вікні вкажемо шлях для збереження і ім'я файлу.
Тепер доповнимо код нашого HTML-документа, додавши в нього між відповідними тегами заголовок веб-сторінки і основний текст. Назвемо нашу сторінку. а в якості основного тексту введемо (рис. 2.4).
Додавання в код сторінки заголовка і основного тексту
Тепер збережемо виконані зміни за допомогою команди головного меню або натисканням комбінації клавіш. Після цього відкриємо нашу сторінку у вікні веб-браузера. Якщо все зроблено правильно, то вона повинна виглядати так, як показано на рис. 2.5.
Тестова сторінка у вікні веб-браузера
Як видно на малюнку, заголовок сторінки, який відображається у верхній частині вікна веб-браузера, і основний її текст повністю відповідають програмного коду. На цьому можете себе привітати: ви тільки що створили найпростішу веб-сторінку.
Тепер доопрацюємо нашу веб-сторінку, щоб надати їй більш ергономічний вид. Спочатку, використовуючи теги і. озаглавим міститься на сторінці текст. Для цього доповнимо програмний код так, як показано на рис. 2.6.
Додавання в програмний код заголовки тексту
Зверніть увагу - теги і і знаходиться між ними текст розташовані всередині тегів і. а також перед основним текстом.
Тепер зробимо так, щоб слово відображалася курсивом, а слово - напівжирним шрифтом. Для цього призначені пари тегів відповідно і. В результаті внесення необхідних доповнень вихідний код нашої веб-сторінки повинен виглядати так, як показано на рис. 2.7.
Додавання курсивного і напівжирного
Тепер змінимо колір фону сторінки. Для цього застосуємо атрибут тега. Відзначимо, що цей атрибут не є обов'язковим: якщо він не використовується - колір фону за замовчуванням буде білим (у чому ми вже могли переконатися). Зробимо колір фону нашої сторінки жовтим, доповнивши її програмний код так, як показано на рис. 2.8.
Зміна кольору фону веб-сторінки
При бажанні ми можемо змінити і колір шрифту, зробивши його, наприклад, блакитним. Для цього знову трохи доопрацюємо наш програмний код, використовуючи для цього атрибут тега. Цей атрибут також не є обов'язковим: якщо він не використовується, то колір шрифта буде чорним (в цьому ми теж вже могли переконатися).
Щоб колір шрифту став блакитним, код нашої веб-сторінки повинен виглядати так, як показано на рис. 2.9.
Зміна кольору шрифту веб-сторінки
Тепер збережемо всі виконані зміни і відкриємо нашу веб-сторінку у вікні веб-браузера. Результат виконаних дій показаний на рис. 2.10.
Веб-сторінка після виконаних доробок
Як видно на малюнку, відповідно до змін програмного коду слово написано курсивом, слово - напівжирним шрифтом, а над основним текстом з'явився заголовок. Крім цього, змінився фон колір фону сторінки і колір шрифту, яким відображається текст.
Сторінка, яка повинна відкриватися по посиланню
Файл цієї сторінки в нашому прикладі буде називатися. Тут ми не наводимо її вихідний код, оскільки наявних знань вже цілком достатньо для того, щоб створити її без підказок. Саме ця сторінка повинна буде відкриватися після того, як ми додамо гіперпосилання на сторінку, з якої тільки що експериментували (див. Рис. 2.10).
Помістимо обидва наші файлу (і) в один каталог. Щоб створити гіперпосилання на сторінку. змінимо код сторінки так, як показано на рис. 2.12.
Попутно ми познайомимося з ще одним тегом HTML-мови -. Характерною особливістю даного тега є те, що він застосовується не парно, а індивідуально. Інакше кажучи, тут немає відкриває і закриває тега, він один. Цей тег призначений для вставки розриву рядка (від англійського слова «break»). Після того тега текст буде продовжений з нового рядка.
У розглянутому прикладі ми додали в програмний код сторінки новий рядок, тому після слова вставлений тег.
Що стосується посилання, то вона сформована в новому рядку тексту. Ось її код:
Далі слід слово тексту, яке, власне, і буде посиланням (в нашому випадку це слово), а після нього йде закриває тег.
В результаті виконаних змін наша веб-сторінка буде виглядати так, як показано на рис. 2.13.
Як видно на малюнку, на нашій сторінці з'явилася нова фраза. яка починається з нового рядка. Причому останнє слово цієї фрази є гіперпосилання. Зверніть увагу - за замовчуванням гіперпосилання в тексті виділяються підкресленням. Якщо все зроблено правильно, то після клацання мишею на цим посиланням відкриється сторінка (див. Рис. 2.11).
Зробимо з нашої сторінки гіперпосилання на популярний портал www.mail.ru. Для цього підкоригуємо програмний код так, як це показано на рис. 2.14.
Зовні вид веб-сторінки не зміниться - вона буде виглядати точно так само, як і на рис. 2.13. Але якщо тепер клацнути мишею на засланні. то в результаті відкриється головна сторінка порталу www.mail.ru.
Таким чином, в даному розділі ми на конкретному прикладі розглянули основні дії по створенню найпростішої веб-сторінки. Однак щоб більш детально вивчити можливості мови HTML, необхідно познайомитися з його основними тегами. Деякі з них ми вже знаємо, але в реальності їх набагато більше. Про це і піде мова в наступному розділі.