Наша веб-школа запускає цикл ознайомлювальних статей для новачків, які хотіли б посвітити свій вільний час розробки сайтів, але не знають з чого почати. А почнемо ми знайомства з HTML - мова гіпертекстової розмітки, на прикладі створення простої веб-сторінки.
Крок 1. Створення файлу.
Для початку створимо файл, в якому буде зберігатися вся необхідна нам інформація.
- Створюємо простий текстовий файл.
- Називаємо файл зрозумілим для вас ім'ям, щоб ви могли потім орієнтуватися у великому списку файлів. Назва файлу повинна відображати суть інформації, яка міститиметься в файлі. Наприклад: файл з ім'ям «Про компанії» - містить інформацію про компанію, файл з ім'ям «Каталог» - містить інформацію про каталог товарів або каталозі послуг компанії і т.д.
Не забуваємо, що імена файлів повинні містити тільки латинські букви, російські літери використовувати не рекомендується, щоб у вас не виникло проблем надалі, коли ви будете розміщувати свій сайт в Інтернеті. - Змінюємо розширення текстового файлу «txt», на розширення «html». Тим самим ми перетворили текстовий файл в файл, який зберігає інформацію в форматі гіпертекстової розмітки. Так само можна використовувати скорочений формат файлу «htm», який ввели в зв'язку з тим, що деякі операційні системи розуміли тільки 3 символу в розширенні файлу.
В результаті у нас вийшов файл для зберігання інформації в форматі HTML - «about.html».
Крок 2. Відкриваємо наш файл в програмі для редагування.
Для редагування всіляких скриптів, програмного коду, мов розмітки сторінок і т.п. підійде звичайний «Блокнот». Але в ньому буде незручно працювати з великим об'ємом текстової інформації, тому що весь наш код представлений у вигляді простої текстової інформації. Тому для зручності роботи програмістів і верстальників створили всілякі програми, які значно спрощують процес написання коду. Подібні програми мають різний набір функцій, наприклад таких, як підсвічування синтаксису мови, на якому ви пишете, різні підказки з написання коду, контроль закриваються тегів, дужок, вбудований FTP-клієнт, за допомогою якого можна змінювати файли прямо на сервері, де у вас розміщений сайт і т.д. і т.п. Кінцевий вибір програми завжди залишається за вами, вибирайте те, де вам найбільш зручно і комфортно писати ваш код. Я лише хочу звернути вашу увагу на безкоштовну і легку програму «Notepad», а так само на платний інструментарій від компанії Adobe - «Dreamweaver».
Крок 3. Створюємо шаблон гіпертекстової розмітки усередині файлу.
Вся інформація у файлі з гіпертекстової розміткою повинна міститися у відповідні комірки - теги. Існує велика безліч різний тегів, з якими ви познайомитеся в процесі розробки сайтів, а можливо і різний програми, в яких використовуються HTML-сторінки. Теги діляться на що відкриваються, закриваються і одинарні.
Наприклад: тег - відкривається, тег - закривається, тег - одиночний.
Відмінність полягає в тому, що відкриваються і закриваються теги працюють в парі, тобто вся інформація міститься між цими двома тегами, на приклад так - [Наша інформація]. А в одиночному тезі вся інформація міститься всередині самого тега -
Для створення шаблону нам необхідно розділити наш файл на осередки. Виділимо три основні осередки:
- Створимо загальну осередок html, в якій буде зберігатися вся інформація в форматі гіпертекстової розмітки.
- Створити всередині тега html осередок для передачі службової інформації про html-файлі - head.
- Створимо тіло html-сторінки - body, яке так само поміщаємо всередину тега html.
В результаті у нас повинен вийти наступний код:
Крок 4. Заголовок сторінки.
Для того щоб передати назву нашої сторінки вікна браузера або вкладки використовується спеціальний тег
В результаті у нас вийде наступний код:
Крок 5. Розміщуємо інформацію на сторінці.
Всю інформацію, яку ми хочемо показати відвідувачеві нашої веб-сторінки, ми повинні помістити в тег
.Для перенесення рядків використовується одинарний тег
. Так само ви можете використовувати тег для абзаців
Розмістимо наступний текст на нашій сторінки:
Здрастуй, шановний відвідувач!
Вітаю тебе на моїй першій веб-сторінки.
Тут я буду викладати свої результати, яких я досягну в процесі навчання розробки сайтів.
В результаті у нас вийде наступний html-код:
Здрастуй, шановний відвідувач!
Вітаю тебе на моїй першій веб-сторінки.
Тут я буду викладати свої результати, яких я досягну в процесі навчання розробки сайтів.
Крок 6. Зберігаємо і перевіряємо результат.
Після того як внесені ви закінчили редагувати ваш файл, зберігаємо всі зміни і переходимо до перевірки результату.
Перевіряти html-файли я рекомендую вам у всіх основний браузерах: Internet Exploer, Chrome, Opera, Mozila.
Якщо у вікні браузера ви бачите тільки наступний текст:
Здрастуй, шановний відвідувач!
Вітаю тебе на моїй першій веб-сторінки.
Тут я буду викладати свої результати, яких я досягну в процесі навчання розробки сайтів.
То я вас вітаю з успішним створенням вашим першим веб-сторінки.