Як зробити простий веб-сайт HTML?


HTML або Мова розмітки HyperText є, як випливає з назви, мовою розмітки. Він не вважається мовою програмування в традиційному розумінні. Це мова, якою автор може створювати документи та маркувати різні частини за допомогою тегів HTML. HTML був натхненний SGML, а його перша версія з’явилася в 1990 році в CERN.

HTML спочатку був розроблений для простих статичних документів, ще тоді, коли всесвітню павутину вважали системою пошуку документів. В даний час майже кожна веб-сторінка використовує HTML, і вона стала мовою Мережі. Остання ітерація – це HTML5, який підтримується всіма основними браузерами і вдосконалюється до HTML 4, який був «стандартизований» у 1997 році.

Ця стаття буде точною основи створення простого веб-сайту HTML, щось, що може навчитися кожен, незалежно від обраної професії.

Чому слід вивчати HTML?

Можна стверджувати, що за допомогою сучасних технологій кожен може створити швидко і приємно виглядає веб-сайт без необхідності кодування єдиного рядка HTML, і хоча це, безумовно, правда, він завжди може стати в нагоді знати, як його трішки налаштувати..

Часто люди додають плагіни / модулі / розширення до такої CMS, як WordPress, Drupal, Joomla тощо, щоб розширити її простою функцією, яку можна було досягти за допомогою двох рядків HTML. Хоча плагін може бути простішим, він може додавати час завантаження сторінки, і це просто інша справа, яку потрібно турбувати з точки зору безпеки та оновлень.

Вивчити HTML досить легко, і це може бути дуже цікаво, тому що ви миттєво бачите результати, на відміну від мови програмування, де вам слід скласти написаний вами код. У вас уже є всі інструменти, необхідні для початку вивчення HTML, у вас веб-браузер, і ви, звичайно, маєте простий текстовий редактор, наприклад блокнот. Такі програми, як Microsoft Word, не обійдуться, вам знадобиться основний текстовий редактор: блокнот, блокнот ++. Існують так звані IDE (Integrated Environment Environment), які допоможуть вам написати HTML з такими функціями, як підсвічування синтаксису або автоматичне доповнення.

Привіт Світ!

Ви можете схопити безкоштовний текстовий редактор, наприклад «Блокнот ++» або «Піднесене текстове редактор», і запустити його. Збережіть порожній файл на робочому столі як “hello.html”. Це змінить редактор у режимі HTML, щоб ви могли користуватися перевагами IDE. Тепер вперед і введіть у нього наступний текст:

Привіт Світ!

Привіт Світ!

Збережіть файл та відкрийте його за допомогою веб-браузера. Це зовсім не було важко, правда? Ви можете заздалегідь змінити файл, зберегти його та оновити сторінку у своєму браузері, і ви побачите всі внесені зміни. Вам не потрібно боятися, немає ніякого способу вплинути на вашу операційну систему. Ви не можете видалити файли або речі такого характеру. І не бійтеся невдач, бо сказано: “Майстер зазнав невдачі більше разів, ніж початківець навіть намагався”.

Основи HTML і 101

html основи 101

HTML складається з тегів та тексту. Тег HTML має особливе значення для браузера, в основному це метод розмітки документа. Деякі теги можуть містити в собі інші теги, наприклад, не упорядкований тег списку

    може містити елементи списку
  • у цьому. Тег абзацу

    може містити новий тег рядка
    , якірний тег , сміливий , курсивом , тощо. теги.

    У нашому прикладі основний тег HTML містить тег заголовка та тег тіла. У головному тезі ми можемо вказати заголовок документа, який відображатиметься у заголовку вкладки браузера. У тілі у нас є тег H1 або тег заголовка 1.

    Теги HTML можуть мати атрибути, які можуть змінювати поведінку тегів, наприклад, ми можемо додати атрибут “style” до нашого H1, щоб вказати його стиль. Якщо ми додамо style = ”color: red”, так і стає

    Привіт Світ!

    ми можемо змінити його колір із чорного за замовчуванням на червоний. Звичайно, на більшій веб-сторінці стилізація наших елементів один за одним може стати проблематичним, і це захаращить наш HTML. Кращим методом було б надати елементу атрибут класу або ідентифікатор, а потім вказати його стиль цим класом або ідентифікатором.

    Є багато Підручники з HTML та ресурси в Інтернеті, ви можете дивитися підручники на YouTube або The Great Curses Plus або читати одну з тисяч статей в Інтернеті про HTML.

    Слід пам’ятати, що незалежно від того, скільки ви читаєте чи дивитесь, вам потрібно буде забруднити руки та почати писати HTML. Це єдиний спосіб, коли ви навчитесь, тому що в хвилину, коли ви почнете писати, у вас виникне більше запитань, і ці запитання приведуть до ще більше запитань, поки ви не станете впевненими та вільними в HTML.

    Стайлінг та сценарій

    Чиста веб-сторінка HTML є статичною. Це означає, що він не може містити частин, що динамічно змінюються, наприклад, “Наші останні новини”. Якщо ви створите веб-сайт із розділом новин, який постійно оновлюється, то просто створення статей та оновлення посилань на нього може стати досить величезним завданням.

    З іншого боку, якщо ви створюєте візитну картку або про мене тип веб-сайту в HTML, який не змінюється так часто, можливо, один або два рази на місяць, то статичний HTML-сайт ідеальний. Оскільки у нього немає “рухомих” частин, таких як база даних, обробка на стороні сервера (PHP, Python, Ruby і т.д.), все менше може піти не так, і це також надзвичайно швидко.

    Ви можете зробити статичну сторінку динамічною, додавши JavaScript (Сценарій ECMA якщо бути точним) до нього, що є мовою програмування сценаріїв. За допомогою JavaScript ви можете відповісти на введення користувачів, приховавши або показавши деякі частини HTML, ви також можете змінити зовнішній вигляд веб-сторінки. З AJAX, ви можете вимагати додаткових ресурсів з вашого веб-сайту, наприклад, підсторінок, контактної форми або останніх твітів, і ви можете включити їх у свій веб-сайт.

    Стилі HTML за замовчуванням досить нудні, це чорний текст на білому тлі. Ви можете змінити стиль будь-якого елемента HTML за допомогою CSS (Каскадні таблиці стилів). У HTML ви не маєте контролю над тим, як буде наданий ваш документ, це особливість HTML, а не недолік. За допомогою CSS ви можете спробувати бути більш точним, але ви все одно не будете мати 100% контроль. Деякі браузери будуть робити дещо інакше, ніж інші. Поточна версія CSS, яку підтримують усі основні браузери, – це CSS3 і має безліч корисних функцій, яких не вистачало попередньому стандарту.

    Щоб зрозуміти CSS, слід почати з моделі коробки, це вбереже вам багато плутанини на початку, і вам важливо зрозуміти різницю між кордоном, прокладкою, полями і т. Д. CSS досить легко вивчити і як у HTML, ви вмить побачите внесені вами зміни. Як уже згадувалося, ви можете додати ідентифікатор або елемент класу до будь-якого тегу HTML, і ви зможете написати правила CSS для цих ідентифікаторів та класів. Щоб повернутися до нашого прикладу, в головному розділі, якщо ми напишемо наступний текст,

    корпус {

    Колір фону: синій;

    }

    це змінить стандартний білий колір документа на синій.

    Одне, що потрібно пам’ятати про CSS, це те, що існує дуже багато тегів для браузера, тому переконайтеся, що ви протестуєте свій веб-сайт за допомогою різних браузерів або принаймні Google Chrome, принаймні Google Chrome, Mozilla Firefox, Internet Explorer 11 та Edge. Швидкий огляд у деяких мобільних браузерах не завадить, особливо Safari IOS.

    Висновок

    Вивчити HTML та CSS простіше, ніж більшість мов програмування, і це може бути дуже корисним досвідом. За допомогою HTML ви зможете створювати веб-сторінки саме такими, якими ви їх хочете, без компромісів, як у випадках із CMS. Створення HTML-сайтів дозволить вам розміщувати їх у будь-якому місці, і вони будуть надзвичайно швидко завантажуватись і плавні.

    Навіть з появою всіх типів конструкторів веб-сайтів, які перетягують і перетягують, HTML не можна вважати застарілим. Він лежить в основі кожного веб-сайту, і навіть з потужними інструментами CMS і для створення веб-сайтів, які дозволяють вам створити професійний веб-сайт без будь-яких знань кодування, можливо, ви захочете зробити щось тут і там на своєму веб-сайті, щоб отримати речі саме так, як ви хочу, щоб вони були. Вивчення деяких HTML дозволить вам це зробити.

    Знання основ HTML може бути корисним навиком придбати для будь-кого, не лише тих, хто планує кар’єру в ІТ. Ті, хто працює з веб-контентом, інтернет-маркетингом, перекладом та всі, хто потребує присутності в Інтернеті, скористаються курсом крашів HTML.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map