Як створити просту веб сторінку за допомогою HTML
Незважаючи на те, що ви можете створити веб-сторінку і без знання HTML, вам все одно доведеться вивчити цю мову розмітки для того, щоб вирішувати всі проблеми, які неминуче виникнуть. Існує безліч відмінних веб-сайтів, які допоможуть вам у вивченні HTML, дана ж стаття допоможе вам ознайомитися з основами сайтобудування. Ознайомившись з основами, ви незабаром зможете створювати веб-сторінки з чистого аркуша!
Кроки
Використання HTML
1
Ознайомтеся з поняттям HTML. HTML - це мова розмітки документів для створення веб-сторінок. Щоб дізнатися, як він виглядає, відкрийте свій браузер, клацніть правою кнопкою миші і виберіть опцію "Подивитися вихідний код". У вікні, ви побачите рядки коду, це і є HTML. Цей код саме те, що бачить ваш браузер і трансформує в веб-сторінку.- В Google Chrome, натисніть на F12.
- У Mozilla Firefox, натисніть на Ctrl + U, щоб подивитися вихідний код сторінки.
- У Safari, виберіть View - View Source (або Option + Command + U).
- В Internet Explorer, опція меню View - це "source".
2
Зробіть вашу першу веб-сторінку якомога простішою. В іншому випадку ви ризикуєте заплутатися в Синтакс і скриптових мовах.- Важливо пам`ятати, що ви будете вносити всю інформацію між відкриває і закриває HTML тегами. Відкриває тег виглядає так: . Закриває же тег виглядає так: . У процесі створення "___" замінюється відповідним кодом.
3
Натисніть "Пуск", потім "Програми", а потім "Стандартні". Запустіть додаток "Блокнот". Вам буде набагато простіше використовувати Notepad ++ (скачайте безкоштовно з інтернету) - як тільки виберіть мову HMTL, ваш код буде відображатися в різних кольорах, спрощуючи вашу роботу і пошук майбутніх помилок.
4
Повідомте браузеру про використовувану мову. Введіть . Це перший тег, який необхідно надрукувати, так як саме він повідомляє комп`ютера про те, що ви починаєте створення веб-сторінки. Закривати даний тег також слід в самому кінці, зробити це ви зможете, ввівши . Це сигналізує закінчення веб-сторінки.
5
Додайте заголовок сторінки, як показано нижче.
6
Дайте своїй сторінці назву. Назва веб-сторінки дуже важливо, тому що воно дасть відвідувачам уявлення про її зміст. Також, при додаванні сайту в закладки, саме назва сторінки відображається в їхньому списку. Тег для додавання назви в HTML . Не забудьте закрити його після назви, ввівши . Назва буде показано в заголовку вкладки, однак воно не є назвою всього веб-сайту.
7
Пропрацюйте основний зміст сторінки. Введіть для того, щоб позначити початок "тіла" документа. Для того, щоб позначити його кінець введіть закриває тег . Основна інформація для створення вашої веб-сторінки буде знаходитися між цими двома тегами.- Для того, щоб змінити колір фону вашої веб сторінки ви можете використовувати злити. Для цього замість простого тега введіть . Це змінить колір фону з білого на сріблястий. Ви можете спробувати ввести інші кольори або використовувати HEX-код. Слова після лапок є атрибутами. Атрибути повинні бути укладені в лапки.
8
Введіть якийсь текст між тегами .- Для того, щоб перенести частину тексту на наступний рядок (як після натискання клавіші Enter), введіть
. - Хочете створити біжучий рядок на екрані? Просто введіть
- Для того, щоб перенести частину тексту на наступний рядок (як після натискання клавіші Enter), введіть
9
Додайте зображення. Якщо ви хочете розмістити на вашій веб-сторінці картинку з інтернету, вам буде потрібно ввести наступний HTML код. Закриває тег однак вводити його необов`язково, замість цього можна ввести символ / в кінці відкриваючого тега.
Переконайтеся, що всі теги закриті належним чином. Код вашої веб-сторінки буде виглядати приблизно так:
Моя Перша Веб-СторінкаЯ люблю wikiHow, тому що |
1
Збережіть результати вашої роботи. У меню Файл натисніть "Зберегти як", потім введіть ім`я файлу, додавши розширення .html (наприклад, моястраніца.html) і виберіть тип файлу @ Всі файли @. Обидва умови необхідно виконати, щоб все запрацювало. Знайдіть документ там, де ви його зберегли, і відкрийте за допомогою подвійного клацання, після цього створена вами веб-сторінка повинна відкритися у вікні вашого браузера.
Поради
- Виправляйте знайдені помилки.
- Неправильне розташування відкривають і закривають тегів виглядає наступним чином:
зміст - Використовуйте шаблон для тестування змін на ваших власних веб-сайтах перед тим, як робити реальні зміни.
- Дана стаття розповідає про те, як створювати веб-сторінки. Для того, щоб розмістити свій сайт в інтернеті зверніться за допомогою до інших статей на wikiHow.
- Відкриваючи кожен тег, пам`ятайте, що вам його необхідно закрити. Винятки становлять декілька спеціальних тегів таких, як
і
. Якщо ж у вас виникли сумніви щодо цього, то краще перестрахуватися і закрити тег. - Хороший додаток для роботи з HTML - Espresso: спрощує написання коду, надаючи різні ярлики і можливість прищеплю вашої сторінки без зміни тегів з .html на .txt!
- Закривають теги повинні знаходиться в правильному місці. Слідкуйте за тим, щоб останній відкритий тег був закритий першим. Виглядає це так:
зміст - Якщо вам необхідно виправити вихідний код, змініть розширення вашого файлу з .html на .txt. Також ви можете просто зберегти дві копії файлу, одну з розширенням .html та іншу с - .txt.
- Багато людей непогано заробляють розробкою веб-сайтів. Відточуйте свої навички, і ви зможете робити те ж саме.
- Для створення більш просунутих сайтів ви можете використовувати спеціальні редактори такі, як Microsoft Expression Web.
- В інтернеті ви можете знайти величезну кількість навчальних матеріалів по темі. Спробуйте поікать в Google підручники з HTML.
- Для розробки веб сторінок можна використовувати Adobe Dreamweaver. Це програма вкаже вам на допущені вами помилки і запропонує способи їх виправлення.
- Якщо ваша веб-сторінка не відображається належним чином, скопіюйте приклад коду зі статті і збережіть, слідуючи даними вказівками. Використовуйте цей код для вивчення.
- Навчившись цій майстерності ви зможете здивувати ваших друзів, створивши веб-сайт протягом декількох хвилин. Коли ви відвідаєте одного з ваших друзів, запропонуйте допомогти з веб-сайтом, швидше за все, вони будуть дуже здивовані.
Попередження
- Атрибут bgcolor є застарілим. Правильним способом зміни кольору фону елементів є використання CSS.
- Тег не є офіційному HTML тегом відповідно до стандартів W3C (Консорціумом Всесвітньої павутини) і може не підтримуватися деякими браузерами. Спочатку тег був призначений тільки для Internet Explorer>, проте сьогодні він підтримується і іншими браузерами.
- Не забудьте додати розширення .html або .htm при збереженні файлу, а також в графі "тип файлу" виберіть "всі файли". Якщо цього не зробити, ваш файл не запуститься.
- Розміщуйте картинки і зображення з вашого сайту на спеціальних хостингах таких, як Photobucket, Flickr or Imageshack. Так ви зможете уникнути марної трати ресурсів вашого хостинг-провайдера.
Що вам знадобиться
- Текстовий редактор, такий як Блокнот (для Windows) або Textedit (на Mac).
- Веб-браузер [b]Mozilla Firefox або [b]Safari.
- Комп`ютер з інтернет підключенням
- Файловий менеджер, такий як Windows Explorer (необов`язково)
- Веб-сайт для хостингу зображень, такий як Photobucket або Flickr.
