Як створити HTML сторінку: 9 кроків (з ілюстраціями)

Метод1З 1:

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

1. 
   До того, як ви почнете ознайомлення з одним з представлених тут кроків, подивіться розділ "що вам знадобиться".
2. 
   Що ви повинні знати до того, як почнете розбиратися в цьому питанні:
3. Основи.ви коли-небудь чули про тег? Тег оточений кутовими дужками, зі словом всередині. Кінцевий тег записується в такій же формі, але з додаванням слеша після першої кутової дужки. Атрибут-це додаткове слово в тезі, яке використовується для додавання деталей в тег.
4. Початок документа. у будь-якому текстовому редакторі, який ви використовуєте, вставте те, що знаходиться нижче:
   &#Lt;html&#gt;&#lt;head&#gt;&#lt;title&#gt;wikiHow&#lt;/title&#gt;&#lt;/head&#gt;&#lt;body&#gt;Hello World&#lt;/body&#gt;&#lt;/html&#gt;&#lt;big&#gt;&#lt;/big&#gt;
   тег повинен бути закритий таким же тегом, але зі слешем після першої кутової дужки. Існують винятки, такі як теги META або DOCTYPE.
5. 
   DOCTYPE

   • Як правило, більшість веб-сторінок задаютьсяDOCTYPE". Це допомагає визначити кодування, а також, яким чином вона буде сприйматися веб-браузерами. Більшість сторінок будуть працювати і без цього, “але це необхідно, якщо ви хочете відповідати ^[2](вони регулюють види кодувань Інтернету і способи їх використання). DOCTYPE для HTML 4.01 представлений нижче: &#lt;!DOCTYPE html PUBLIC" - //W3C//DTD HTML 4.01 / / EN ""http://www.w3.org/TR/html4/strict.dtd" &#gt; це один з найпоширеніших DOCTYPE, використовуваних на сторінках по всьому Інтернету. Спочатку, він вказує на тип сторінки, що описує 'html', потім, він виділяє тип кодування, і в кінці, розташування DOCTYPE, що в результаті, описує сторінку для веб-браузера.
   • Існують різні типи HTML (різні версії, розроблені протягом багатьох років), наприклад, використання нових тегів, або специфічні теги. Деякі теги застаріли (замість них використовуються інші, більш корисні теги).
   • &#lt;b&#gt; і&#lt;i &#gt; – це те, що в даний момент накладено на теги, тому що використовуються для перетворення тексту, але не специфікації, в результаті, на зміну їм приходять інші теги. Тег&#lt; strong&#gt;є заміною для&#lt; b&#gt;, і&#lt; em&#gt; , заміною для&#lt; i &#gt; .
   • Це важливо, що попередні теги замінюються на теги, які представляють із себе більше, ніж форматування. Якщо текст переведений, то не тільки форматування, але і його сенс залишається таким же. Це семантично правильно.
   • В XHTML версії 2.0, теги &#lt;b&#gt; і&#lt;i&#gt; не використовуються, також, як і в HTML версія 3+.
6. 
   HTML "Правило інкапсуляції".

   • Давайте подивимося на більш важливі теги, використовувані в даний час. Під час створення сторінки, використовується проста структура. Якщо був відкритий тег, то в результаті, він повинен бути закритий. Це відноситься до всієї структури. Тут представлений правильний приклад структури XHTML макета:
   • &#lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&#gt;
   • &#lt;html xmlns="http://www.w3.org/1999/xhtml"&#gt;
   • &#lt;head&#gt;
   • &#lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"/&#gt;
   • &#lt;title&#gt;Hello World!&#lt;/title&#gt;
   • &#lt;/head&#gt;
   • &#lt;body&#gt;
   • &#lt;h1&#gt;Hello World!&#lt;/h1&#gt;
   • &#lt;/body&#gt;
   • &#lt;/html&#gt;
   • Приклад коду, який видає повідомленняHello World. Це називається тестомHello World .
7. 
   Заголовок

   • Заголовок веб-сторінки-Це зміст між тегом&#lt;head&#gt;. Цей зміст не може бути переглянуто з боку Користувача (тільки назва, яка показується в назві сторінки). Інформація між тегами &#lt;head&#gt;, може містити інші теги, такі як:
     
     
     • Тег META, використовується для інформації, яка корисна для пошукових систем та інших утиліт.
     • Тег LINK, який створює зв'язок між документами, наприклад, для стилів (CSS).
     • Тег SCRIPT, в це входить практично будь-яке веб-кодування, з можливістю віддаленого доступу (з іншого документа).
     • Тег STYLE, що по суті, є стилем, який може бути застосований на сторінці.
     • Тег TITLE, це назва, яка з'являється в якості назви сторінки у вашому веб-браузері.
   • Давайте подивимося демонстрацію деяких з них у прикладі заголовка, взятого з цього веб-сайту (він був скорочений):
     • &#lt;head&#gt;
     • &#lt;title&#gt; ... &#lt;/title&#gt;
     • &#lt;meta name="description" content=" ... " /&#gt;
     • &#lt;link rel="stylesheet" type="text/css" href=" ... " /&#gt;
     • &#lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&#gt;
     • &#lt;style type="text/css" media="all"&#gt; ... &#lt;/style&#gt;
     • &#lt;script type="text/javascript" src=" ... "&#gt;&#lt;/script&#gt;
     • &#lt; / head&#gt;
       
       якщо ви не помітили, були виділені окремі теги, з видаленням реальної інформації. Приклад досить короткий, з показом, практично, кожного тега, який може знаходиться в&#lt;head&#gt; , за винятком HTML comment (ми поговоримо про це в простих тегах).
8. 
   Прості теги скрізь

   • Давайте рухатися далі і подивимося інші теги. Будьте уважні з використанням тегів і пам'ятайте про правило великого пальця, " інкапсуляція."
     
     
     • &#lt;strong &#gt; виділяє важливий текст.
     • &#lt;small &#gt; робить менший розмір тексту. Розмір шрифту вимірюється в стандартних одиницях від 1 до 7, 3 – це розмір тексту за замовчуванням.^[3].
     • &#lt;pre &#gt; визначає блок форматованого тексту. Як правильно, такий текст набирається шрифтом одного розміру і з усіма пробілами між словами.
     • &#lt; em &#gt; показує текст у вигляді фрази.
     • &#lt;del &#gt; перекреслює текст.
     • &#lt;ins &#gt; визначає текст, який був вставлений в документ.
     • &#Lt; h1 &#gt; Один з багатьох тегів заголовка. Теги такого роду, починаються з 'h', з відмінністю в цифрі. Переконайтеся, що закриєте тег з такою ж цифрою.
     • &#lt;p &#gt; визначає параграф.
     • &#lt;!--- ... --- &#gt; на відміну від інших тегів, коментар повинен знаходитися всередині самого тега. Дана інформація видно тільки, коли проглядається код.
     • &#lt;blockquote &#gt; показує цитату, може бути використаний з тегом&#lt;cite &#gt;.
     • Кілька прикладів, представлених вище, не є повним списком існуючих тегів. Щоб дізнатися про інших, відвідайте^[4].
9. 
   Створення зрозумілої структури

   • Сторінки сконструйовані для утримування даних в простих сетах з тегів так, щоб ми могли розібрати інформацію в параграфах. Комп'ютер розпізнає дані, він не знає про контекст або ідейного зв'язку. Ми повинні створювати зрозумілі для комп'ютера HTML сторінки. Це досягається при використанні тега div. Він допомагає створювати величезну кількість сторінок. Його можна стилізувати C CSS, і це простіше, ніж створення великих кодових таблиць для макета.
     • &#lt;div &#gt; цей тег є особливим, тому що його можна стилізувати і використовувати окремі блоки інформації, які будуть зрозумілі і користувачеві, і комп'ютеру.
   • Давайте подивимося на простий макет HTML, який використовує тег div.
     • &#lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&#gt;
     • &#lt;html xmlns="http://www.w3.org/1999/xhtml"&#gt;
     • &#lt;head&#gt;
     • &#lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"/&#gt;
     • &#lt;title&#gt;Hello World!&#lt;/title&#gt;
     • &#lt;/head&#gt;
     • &#lt;body&#gt;
     • &#lt;h1&#gt;Hello World!&#lt;/h1&#gt;
     • &#lt;div id="contentOne"&#gt;
     • &#lt;p&#gt;This is some text in div#contentOne.&#lt;/p&#gt;
     • &#lt;div class="subSection"&#gt;
     • &#lt;p&#gt;A paragraph in a sub-section of div#contentOne&#lt;/p&#gt;
     • &#lt;/div&#gt;
     • &#lt;/div&#gt;
     • &#lt;/body&#gt;
     • &#lt;/html&#gt;
   • Використання тегів&#lt;div &#gt; допомагає з пошуком і зміною стилів, під час роботи з CSS і Javascript. HTML буде використовувати різну кодування для роботи з CSS стилями і Javascript, щоб створити краще і чуйне взаємодія з користувачем.