Зміст

• кроки
• Метод 1 з 1: Написання HTML сторінки
• Поради
• попередження
• Що вам знадобиться

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

кроки

Метод 1 з 1: Написання HTML сторінки

1. 1 До того, як ви почнете ознайомлення з одним з представлених тут кроків, подивіться розділ "Що вам знадобиться".
2. 2 Що ви повинні знати до того, як почнете розбиратися в цьому питанні:
3. 3 Основи. Ви коли-небудь чули про тезі? Тег оточений кутовими дужками, зі словом всередині. Кінцевий тег записується в такій самій формі, але з додаванням слеша після першої кутової дужки. Атрибут - це додаткове слово в тезі, яке використовується для додавання деталей в тег.
4. 4 Початок документа. У будь-якому текстовому редакторі, який ви використовуєте, вставте то, що знаходиться нижче:
   html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
   Тег повинен бути закритий таким же тегом, але зі слешем після першої кутової дужки. Існують винятки, такі як теги META або DOCTYPE.
5. 5 DOCTYPE
   • Як правило, більшість веб-сторінок задаються DOCTYPE ". Це допомагає визначити кодування, а також, яким чином вона буде сприйматися веб-браузерами. Більшість сторінок працюватимуть і без цього, "але це необхідно, якщо ви хочете відповідати (Вони регулюють види кодувань інтернету і способи їх використання). DOCTYPE для HTML 4.01 представлений нижче:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Це один з найпоширеніших DOCTYPE, використовуваних на сторінках по всьому інтернету.Перш за все, він вказує на тип сторінки, яка описує 'html', потім, він виділяє тип кодування, і в кінці, розташування DOCTYPE, що в результаті, описує сторінку для веб-браузера.
   • Існують різні типи HTML (Різні версії, розроблені в перебігу багатьох років), наприклад, використання нових тегів, або специфічні теги. Деякі теги застаріли (Замість них використовуються інші, більш корисні теги).
   • b> і i> - це те, що в даний момент накладено на теги, тому що використовуються для перетворення тексту, але не специфікації, в результаті, на зміну їм приходять інші теги. тег strong> є заміною для b>, і em>, Заміною для i>.
   • Це важливо, що попередні теги замінюються на теги, які вдають із себе більше, ніж форматування. Якщо текст переведений, то не тільки форматування, але і його сенс залишається таким же. Це семантично правильно.
   • У XHTML версії 2.0, теги b> і i> не використовуються, також, як і в HTML версія 3+.
6. 6 HTML "Правило інкапсуляція".
   • Давайте подивимося на більш важливі теги, які використовуються в даний час. Під час створення сторінки, використовується проста структура. Якщо був відкритий тег, то в результаті, він повинен бути закритий. Це відноситься до всієї структурі. Тут представлений правильний приклад структури XHTML макета:
   • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • head>
   • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
   • title> Hello World! / title>
   • / Head>
   • body>
   • h1> Hello World! / h1>
   • / Body>
   • / Html>
   • Приклад коду, який видає повідомлення Hello World. Це називається тестом Hello World.
7. 7 Заголовок
   • Тема веб-сторінки - це зміст між тегом head>. Це зміст не може бути переглянуто з боку користувача (тільки назва, яке показується в назві сторінки). Інформація між тегами head>, Може укладати інші теги, такі як:
     
     
     • Тег META, використовується для інформації, яка корисна для пошукових систем та інших утиліт.
     • Тег LINK, який створює зв'язок між документами, наприклад, для Сталий (CSS).
     • Тег SCRIPT, в це входить практично будь-який веб-кодування, з можливістю віддаленого доступу (з іншого документа).
     • Тег STYLE, що по суті, є стилем, який може бути застосований на сторінці.
     • Тег TITLE, ця назва, яке з'являється в якості назви сторінки в вашому веб-браузері.
   • Давайте подивимося демонстрацію деяких з них в прикладі заголовка, взятого з цього веб-сайту (він був скорочений):
     • head>
     • title> ... / title>
     • meta name = "description" content = "..." />
     • link rel = "stylesheet" type = "text / css" href = "..." />
     • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
     • style type = "text / css" media = "all"> ... / style>
     • script type = "text / javascript" src = "..."> / script>
     • / Head>
       
       Якщо ви не помітили, були виділені окремі теги, з видаленням реальної інформації. Приклад досить короткий, з показом, практично, кожного тега, який може знаходиться в head>, За винятком HTML comment (Ми поговоримо про це в простих тегах).
8. 8 Прості теги всюди
   • Давайте рухатися далі і подивимося інші теги. Будьте уважні з використанням тегів і пам'ятайте про правило великого пальця, "Інкапсуляція."
     
     
     • strong> Виділяє важливий текст.
     • small> Робить менший розмір тексту. Розмір шрифту вимірюється в стандартних одиницях від 1 до 7, 3 - це розмір тексту за умовчанням. .
     • pre> Визначає блок тексту фіксованої. Як правильно, такий текст набирається шрифтом одного розміру і з усіма пробілами між словами.
     • em> Показує текст у вигляді фрази.
     • del> перекреслює текст.
     • ins> Визначає текст, який був вставлений в документ.
     • h1> Один з багатьох тегів заголовка. Теги такого роду, починаються з 'h', з різницею в цифрі. Переконайтеся, що закриєте тег з такою ж цифрою.
     • p> Визначає параграф.
     • ! --- ... ---> На відміну від інших тегів, коментар повинен перебувати всередині самого тега. Дана інформація видна тільки, коли проглядається код.
     • blockquote> Показує цитату, може бути використаний з тегом cite>.
     • Кілька прикладів, наведених вище, не є повним списком існуючих тегів. Щоб дізнатися про інші, відвідайте.
9. 9 Створення зрозумілої структури
   • Сторінки сконструйовані для утримування даних в простих сетах з тегів так, щоб ми могли розібрати інформацію в параграфах. Комп'ютер розпізнає дані, він не знає про контекст або ідейної зв'язку. Ми повинні створювати зрозумілі для комп'ютера HTML сторінки. Це досягається при використанні тега div. Він допомагає створювати величезну кількість сторінок. Його можна стилізувати c CSS, і це простіше, ніж створення великих кодових таблиць для макета.
     • div> Цей тег є особливим, тому що його можна стилізувати і використовувати окремі блоки інформації, які будуть зрозумілі і користувачеві, і комп'ютера.
   • Давайте подивимося на простий макет HTML, який використовує тег div.
     • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • head>
     • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
     • title> Hello World! / title>
     • / Head>
     • body>
     • h1> Hello World! / h1>
     • div id = "contentOne">
     • p> This is some text in div # contentOne. / p>
     • div>
     • p> A paragraph in a sub-section of div # contentOne / p>
     • / Div>
     • / Div>
     • / Body>
     • / Html>
   • Використання тегів div> допомагає з пошуком і зміною стилів, під час роботи з CSS і Javascript. HTML буде використовувати різну кодування для роботи з CSS стилями і Javascript, щоб створити краще і чуйне взаємодія з користувачем.

Поради

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

попередження

• Пам'ятайте, що HTML - це редагування змісту. Це означає, що HTML використовується тільки для зберігання змісту в визнаному форматі. Інші зміни повинні здійснюватися за допомогою інших технологій, наприклад, CSS. Це також означає, надходити "Семантично правильно, Навіть якщо інші цього не визнають. Інші мови програмування допомагають побудувати веб-сторінки (CSS, Javascript, і XML). HTML - це конструктор змісту.

Що вам знадобиться

• Текстовий редактор, який підтримує кодування ANSI
• Веб-браузер, такий як Internet Explorer або Mozilla Firefox
• (За бажанням) wysiwyg або wykiwyg HTML редактор, такий як Adobe Dreamweaver, Aptana Studio, або Microsoft Expression Web