Як написати просту html-сторінку
Створення веб-сайтів не таке складное справа, як здається. Дізнайтеся, як закодувати просту сторінку з допомогою HTML - моваа розмітки для Web.
Спроектувати і створити простий веб-сайт дуже просто. Навіть новачки можуть вивчати веб-дизайн, не докладаючи занадто багато зусиль і часу.
HTML - це основна мова розмітки веб-сторінок. Давайте вивчимо його основи, і спробуємо створити просту сторінку.
Введення в HTML
Гіпертекст - це текст, який працює як посилання.
HTML визначає структуру веб-сторінки, і забезпечує її належне відображення в браузері. Документ HTML може бути дуже простим або складним, в залежності від поставлених завдань.
Веб-браузери отримують HTML-документи з веб-сервера, і відображають їх як веб-сторінки. Кожен браузер розуміє HTML, і відтворює зображення, текст, відео, так, як це написано в коді.
HTML є основною мовою розмітки для Web. Однак він використовується для створення статичних веб-сторінок, без інтерактивності та анімації. HTML5, остання версія HTML, трохи краще в цьому сенсі, особливо що стосується відео або аудіо.
HTML5
HTML сьогодні - це HTML5, новітня версія, яка додає більше функцій, ніж попередні, і тепер може визначати спосіб відображення відео, зображень і тексту на екрані браузера.
HTML5 - один з потужних інструментів для розробки веб-сторінок. З HTML5 потокова передача мультимедіа можлива без використання сторонніх плагінів, таких як Flash. HTML5 також підтримує зберігання даних на стороні клієнта. Це можна використовувати для підтримки веб-додатків, коли клієнт знаходиться в режимі офлайн.
Веб і HTML
Мережа складається з взаємозв`язаних веб-сторінок і додатків, а також зображень, відео, анімації та інтерактивного контенту. Мови розмітки складають основу Web. Ці мови використовуються відтоді, коли сайти були дуже простими, і будуть залишатися частиною мережі, її розвитку та майбутнього.
HTML залишається фундаментальним навиком для всіх веб-розробників і дизайнерів.
Відповідно до огляду W3Techs, HTML - це мова, яка використовується на 74,3% всіх сайтів.
Серед підкатегорій, HTML5 використовується на 82,9% всіх сайтів, які використовують HTML.
Як створити просту HTML-сторінку
Розробка HTML проста, і тому можна легко навчитися кодувати просту HTML-сторінку. Але для початку потрібно вивчити основи мови.
Документ HTML - це в основному текстовий документ. Існує безліч доступних редакторів тексту, які можна використовувати для написання HTML. Два найпопулярніших: Dreamweaver і Sublime Text. Безкоштовні редактори - Notepad ++ для Windows та Text Wrangler для Mac. Насправді зробити веб-сторінку можна і в Microsoft Word, але робити це не варто, оскільки він додає додатковий і непотрібний код в документи HTML.
Для прикладу ми будемо використовувати Notepad ++ в якості редактора. Ви можете вибрати будь-який редактор за вашим вибором.
Створення нового документа HTML таке ж, як і для будь-якого іншого типу документа. Виберіть "Файл" - "Новий", щоб відкрити новий документ в Notepad ++. Внесіть зміни в документ і натисніть «Зберегти».
HTML-документ - це файл з розширенням .htm або .html. Деякі редактори також можуть надати опцію «Зберегти як HTML». Називати файл краще латинськими буквами, з маленької літери, а прогалини замінювати тире або точками.
Якщо ви написали код в «Блокноті» і зберегли його як текстовий документ, то перевести його в html-сторінку якомога за допомогою програми Total Commander. Вибираємо команду «Перейменувати» і міняємо розширення файлу з .txt на .html.
HTML як мова складається з елементів, тегів і атрибутів, які визначають зміст сайту. Елементи HTML дозволяють нам додавати таблиці, зображення, відео, аудіо та т. Д. На веб-сторінку.
Елементи визначають структуру і вміст веб-сторінки. Позначаються кутовими дужками навколо імені елемента. Вміст, яка не перебуває між "lt;>", буде відображатися на веб-сайті. Елемент виглядає приблизно так:
Елемент з кутовими дужками навколо нього утворює тег (
наприклад:
Відео: [HTML] Покрокове створення простого сайту html в блокноті. Структура HTML сторінки. head, title, body
Хто відкриває тег:
Закриває тег:
Вміст між відкриває і закриває тегами є вмістом елемента.
Теги можуть використовуватися двома способами:
Парні теги містять відкриває і закриває теги. Ось як вони виглядають:
Тут якийсь текст
Існує відкриває тег (
Поодинокі теги використовуються для визначення самозакривних елементів, і вставки елементів, таких як зображення. Вам не потрібно визначати початок і кінець цих елементів.
Ці елементи пишуться так:
Відео: Створення простого сайту в HTML [NOTEPAD ++]
Закриття / (коса риска) також не є обов`язковим. Це те ж саме, що і при записі
Атрибути - це елементи, які розширюють теги додатковою інформацією. Атрибут поміщається в відкриває тег, і включає ім`я і значення.
Тег з атрибутом буде виглядати так:
Тег «HTML» вище має атрибут «lang» зі значенням «en-US».
структура документа HTML
Кожен HTML-документ має базову структуру, визначену за допомогою наступних елементів:
DOCTYPE або DTD: Декларація типу документа вказує версію використовуваного HTML. Цей тег поміщається на початку документа.
HTML: Пара тегів HTML визначає початок і кінець документа HTML.
розділ HEADER lt;head>: цей поділ визначає загальну інформацію для сторінки, і зазвичай короткий. Вміст цього елемента не відображається на сторінці. Тема містить тег TITLE, який визначає назву документа, що відображається в рядку заголовка браузера. HEADER також може містити метадані, або посилання на зовнішні файли.
розділ BODY: Цей розділ містить основну частину сторінки. Його вміст відображається в браузері. Велика частина коду HTML-сторінки знаходиться всередині елемента body.
Кодування: цей тег вказує кодування, яка використовується в документі HTML. Кодування вказує, як файл зберігається, і як будуть відображатися спеціальні символи. Загальноприйнятим значенням для цього тега є cp1251 який дозволяє відображати практично всі символи мови.
Відео: Створення html сайту в блокноті
проста сторінка HTML
Тепер, коли ми зрозуміли основні елементи HTML, спробуємо створити базову HTML-сторінку. Давайте почнемо з створення чистого текстового документа в текстовому редакторі.
Крок 1: Перший рядок додається HTML-коду вказує елемент DOCTYPE як «html». Це означає, що використовується останній HTML.
Крок 2: Далі ми додаємо теги початку і кінця для документа html. Ми також визначаємо мову як англійська (en).
Крок 3: Потім ми додаємо тег заголовка з тегом Title і відомостей про набір символів.
Hello World
Крок 4: Після цього пишеться тег BODY.
Hello World
Крок 5: Тепер порожній HTML-документ готовий. Давайте почнемо додавати текст для відображення. Ми додаємо тег заголовка
Проста сторінка HTML
Основна HTML-сторінка готова, і ми можемо зберегти її в папці за нашим вибором.
Перегляд сторінки HTML
Щоб переглянути HTML-сторінку, нам потрібно відкрити її в браузері. Перейдіть в папку, де був збережений документ HTML, і двічі клацніть по ньому.
Він відкриється в браузері, і ми бачимо дуже просту сторінку. Ви можете перевірити, що він показує:
Тема як «Hello World»
Тема першого рівня як «Hello World»
Абзац з текстом «Проста сторінка HTML»
Тепер, коли ми створили просту HTML-сторінку, давайте подивимося, як ми можемо додати додаткові функції. HTML надає набагато більше функцій, ніж те, що ми додали в основну HTML-сторінку. Ви можете додати кольору фону, шрифти, вказати кольори шрифтів, зображення, посилання, списки і т. Д., Щоб створити гарну HTML-сторінку. Давайте розглянемо деякі з цих додаткових функцій.
У HTML передбачені спеціальні елементи для спеціального форматування тексту.
Рівні заголовків можна задавати за допомогою тегів
Теги
використовуються для вказівки початку нового абзацу. Браузер зазвичай додає один порожній рядок між двома абзацами.
Елементи форматування використовуються для відображення спеціальних типів тексту. Текст може бути відформатований такими тегами:
Жирний -
курсив -
підкреслений -
шрифт -
Повний список цих тегів доступний за посиланням.
Ви можете створити гіперпосилання на іншу веб-сторінку за допомогою тега . Додайте URL-адресу веб-сторінки, використовуючи атрибут href, як показано нижче.
Це текст посилання
тег є поодиноким тегом, без тега закриття. Ви можете вказати атрибути зображення.
Атрибут src вказує місце розташування зображення.
Атрибут style має багато параметрів, включаючи ширину і висоту зображення в пікселях.
Атрибут alt дає короткий опис зображення. Використовується, якщо з якої-небудь причини зображення не завантажується.
тег lt;header> Є новим для HTML5 і вказує самий верхній елемент веб-сторінки. Заголовки зазвичай містять логотип компанії, контактну інформацію, посилання навігації і т. Д. В одному документі може бути кілька елементів lt;>.
Розширені поняття в HTML
HTML - проста технологія для вивчення, тому багато дизайнерів просто працюють, маючи елементарні поняття. Якщо ви хочете в повній мірі використовувати HTML, вам потрібно буде ознайомитися з передовими концепціями. Це допоможе вам створити привабливий веб-сайт з меншими зусиллями.
Ми згадаємо кілька концепцій, які допоможуть вам в подальшому. Ви можете продовжити вивчати більше і використовувати розширений HTML і його можливості.
Відео: Уроки HTML 1. Створення html сторінки
Перевірка HTML-коду
Перевірка HTML використовується для перевірки помилок в коді HTML. Якщо ваша веб-сторінка не завантажується, ви можете використовувати перевірку, щоб знайти причину проблеми.
Валідація також дає рекомендації по коду, який не відповідає останньому стандарту HTML. Недійсний HTML зробить сайт непридатним для використання. Це може викликати проблеми із завантаженням або неузгодженість виведення з різноманітними браузерами. Багато сервісів перевірки безкоштовні, наприклад, validator.w3.org
Додавання додаткових тегів
HTML-тегів і атрибутів набагато більше, ніж ми тут обговорювали. Два хороших ресурсу для навчання - w3schools і HTML Dog, у яких є більше підручників і повний список тегів.
Ви також можете використовувати «Перегляд вихідної сторінки» в браузері, щоб вивчити код добре продуманих веб-сайтів і побачити нові методи.
Завантаження веб-сайту
За допомогою послуги веб-хостингу ви можете додати кілька HTML-сторінок на свій веб-домен. Вам може знадобитися програмне забезпечення FTP-загрузки для передачі ваших HTML-файлів на веб-сервер. Є багато послуг веб-хостингу, які надають функцію FTP.
Додавання CSS і javascript
CSS може використовуватися для швидкого поліпшення зовнішнього вигляду вашого сайту. Ви можете використовувати CSS для додавання кольору, шрифтів і зміни розміщення елементів. З прив`язкою таблиці стилів CSS до HTML-сторінці ви можете змінити стиль всього тексту.
javascript - це мова програмування, і його можна використати для додавання додаткових функцій HTML-сторінок. Команди javascript вставляються між тегами. Вони можуть бути використані для додавання інтерактивних кнопок, виконання математичних розрахунків і т. Д.
Перед вами відкривається дивовижний світ веб-розробки. Дерзайте! Підкорити цю вершину просто, потрібно всього лише почати.
How to Create Simple HTML Page | Step by Step DIY Tutorial
