Як створити HTML сторінку

HTML (Мова гіпертекстової розмітки) - це основна мова програмування для розробки веб-сторінок. Створений в якості простого і зручного мови програмування. Більшість сторінок в інтернеті було розроблено з використанням однієї з форм цієї мови (ColdFusion, XML, XSLT). Ознайомившись із цією статтею, ви зможете продовжити ваше навчання, використовуючи інші ресурси в інтернеті. Постарайтеся пошукати інші статті, пов`язані з цією темою, в інтернеті.

Кроки

Написання HTML сторінки

1. 

   1

   До того, як ви почнете ознайомлення з одним з представлених тут кроків, подивіться розділ "Що вам знадобиться".

2. 

   2

   Що ви повинні знати до того, як почнете розбиратися в цьому питанні:

3. 3

   Основи. Ви коли-небудь чули про тезі? Тег оточений кутовими дужками, зі словом всередині. Кінцевий тег записується в такій же формі, але з додаванням слеша після першої кутової дужки. Атрибут - це додаткове слово в тезі, яке використовується для додавання деталей в тег.

4. 4

   Початок документа. У будь-якому текстовому редакторі, який ви використовуєте, вставте те, що знаходиться нижче:
   wikiHowHello World
   Тег повинен бути закритий таким же тегом, але зі слешем після першої кутової дужки. Існують винятки, такі як теги [i]META[/i] або [i]DOCTYPE[/i].

5. 

   5

   DOCTYPE
   • Як правило, більшість веб-сторінок задаються [i]DOCTYPE ". Це допомагає визначити кодування, а також, яким чином вона буде сприйматися веб-браузерами. Більшість сторінок будуть працювати і без цього, "але це необхідно, якщо ви хочете відповідати (Вони регулюють види кодувань інтернету і способи їх використання)[/i]. DOCTYPE для HTML 4.01 представлений нижче: Це один з найпоширеніших [i]DOCTYPE, що використовуються на сторінках по всьому інтернету. Спочатку, він вказує на тип сторінки, яка описує `html`, потім, він виділяє тип кодування, і врешті, розташування DOCTYPE, що в результаті, описує сторінку для веб-браузера.[/i]
   • Існують різні типи HTML (Різні версії, розроблені в перебігу багатьох років), наприклад, використання нових тегів, або специфічні теги. Деякі теги застаріли (Замість них використовуються інші, більш корисні теги).
   • [b] і [i][i][/i] - Це те, що в даний момент накладено на теги, тому що використовуються для перетворення тексту, але не специфікації, в результаті, на зміну їм приходять інші теги. Тег [b] є заміною для [b][b], і [i][/i], заміною для [i][i][/i].
   • Це важливо, що попередні теги замінюються на теги, які представляють із себе більше, ніж форматування. Якщо текст переведений, то не тільки форматування, але і його зміст залишається таким же. Це семантично правильно.
   • У XHTML версії 2.0, теги [b] і [i][i][/i] не використовуються, також, як і в HTML версія 3+.

6. 

   6

   HTML "Правило інкапсуляції".
   • Давайте подивимося на більш важливі теги, використовувані в даний час. Під час створення сторінки, використовується проста структура. Якщо був відкритий тег, то в результаті, [b]він повинен бути закритий. Це відноситься до всієї структурі. Тут представлений правильний приклад структури XHTML макета:
   • Hello World!

   • Hello World!

   • Приклад коду, який видає повідомлення [i]Hello World[/i]. Це називається тестом [i]Hello World[/i].

7. 

   7

   Тема
   • Тема веб-сторінки - це зміст між тегом [i][/i]. Це зміст не може бути переглянуто з боку користувача (тільки назва, яка показується в назві сторінки). Інформація між тегами [i][/i], може укладати інші теги, такі як:
     
     
     • Тег META, використовується для інформації, яка корисна для пошукових систем та інших утиліт.
     • Тег LINK, який створює зв`язок між документами, наприклад, для Сталий (CSS).
     • Тег SCRIPT, в це входить практично будь-яке веб-кодування, з можливістю віддаленого доступу (з іншого документа).
     • Тег STYLE, що по суті, є стилем, який може бути застосований на сторінці.
     • Тег TITLE, це назва, яка з`являється в якості назви сторінки у вашому веб-браузері.
   • Давайте подивимося демонстрацію деяких з них в прикладі заголовка, взятого з цього веб-сайту (він був скорочений):
     • ...
     • 
       Якщо ви не помітили, були виділені окремі теги, з видаленням реальної інформації. Приклад досить короткий, з показом, практично, кожного тега, який може знаходиться в [i][/i], за винятком HTML comment (Ми поговоримо про це в простих тегах).

8. 

   8

   Прості теги всюди
   • Давайте рухатися далі і подивимося інші теги. Будьте уважні з використанням тегів і пам`ятайте про правило великого пальця, "Інкапсуляція."
     
     
     • Виділяє важливий текст.
     
     
     
     • Робить менший розмір тексту. Розмір шрифту вимірюється в стандартних одиницях від 1 до 7, 3 - це розмір тексту за замовчуванням. .

     •  Визначає блок форматованого тексту. Як правильно, такий текст набирається шрифтом одного розміру і з усіма пробілами між словами.

     • Показує текст у вигляді фрази.
     • Перекреслює текст.
     • Визначає текст, який був вставлений в документ.

     • Один з багатьох тегів заголовка. Теги такого роду, починаються з `h`, з відмінностями в цифрі. Переконайтеся, що закриєте тег з такою ж цифрою.

     • Визначає параграф.

     • На відміну від інших тегів, коментар повинен знаходитися усередині самого тега. Дана інформація видна тільки, коли проглядається код.

     • Показує цитату, може бути використаний з тегом .

     • Кілька прикладів, представлених вище, не є повним списком існуючих тегів. Щоб дізнатися про інших, відвідайте.

9. 

   9

   Створення зрозумілої структури
   • Сторіночки сконструйовані для утримування даних в простих сетах з тегів так, щоб ми могли розібрати інформацію в параграфах. Комп`ютер розпізнає дані, він не знає про контекст або ідейної зв`язку. Ми повинні створювати зрозумілі для комп`ютера HTML сторінки. Це досягається при використанні тега div. Він допомагає створювати величезну кількість сторінок. Його можна стилізувати c CSS, і це простіше, ніж створення великих кодових таблиць для макета.

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

   • Давайте подивимося на простий макет HTML, який використовує тег div.
     • Hello World!

     • Hello World!

     • This is some text in div # contentOne.

     • A paragraph in a sub-section of div # contentOne
   • Використання тегів

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

Поради

• Після читання даної статті, не зупиняйтеся і не думайте, що ви дізналися все, що потрібно. Завжди є щось, чому можна навчитися, особливо в даній технології.
• Вчіться, розбирайтеся, і пишіть код.
• Зверніть увагу, що деякі теги використовують тільки <>. Параграф і br - одні з прикладів. Інші теги, відкриті з <>, потребують подальшого закриття. Наприклад, "".
• Люди очікують нових відкриттів, так що винаходьте, створюйте дизайн, або код.
• Як тільки ви дізнаєтеся багато чого, спробуйте навчитися серверного програмування.
• Навчитеся працювати з CSS, а також з javascript.