Как создать HTML страничку

Загрузить PDF
Загрузить PDF

HTML (Язык гипертекстовой разметки) – это основной язык программирования для разработки веб-страниц. [1] Создан в качестве простого и удобного языка программирования. Большинство страниц в интернете было разработано с использованием одной из форм этого языка (ColdFusion, XML, XSLT). Ознакомившись с этой статьей, вы сможете продолжить ваше обучение, используя другие ресурсы в интернете. Постарайтесь поискать другие статьи, связанные с этой темой, в интернете.

Метод 1
Метод 1 из 1:

Написание HTML странички

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ed\/Write-an-HTML-Page-Step-1.jpg\/v4-460px-Write-an-HTML-Page-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ed\/Write-an-HTML-Page-Step-1.jpg\/v4-728px-Write-an-HTML-Page-Step-1.jpg","smallWidth":460,"smallHeight":325,"bigWidth":728,"bigHeight":514,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    До того, как вы начнете ознакомление с одним из представленных здесь шагов, посмотрите раздел “Что вам понадобится”.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f8\/Write-an-HTML-Page-Step-2.jpg\/v4-460px-Write-an-HTML-Page-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f8\/Write-an-HTML-Page-Step-2.jpg\/v4-728px-Write-an-HTML-Page-Step-2.jpg","smallWidth":460,"smallHeight":325,"bigWidth":728,"bigHeight":514,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  3. 3
    Основы. Вы когда-нибудь слышали о теге? Тег окружен угловыми скобками, со словом внутри. Конечный тег записывается в такой же форме, но с добавлением слеша после первой угловой скобки. Атрибут – это дополнительное слово в теге, которое используется для добавление деталей в тег.
  4. 4
    Начало документа. В любом текстовом редакторе, который вы используете, вставьте то, что находится ниже:
    <html><head><title>wikiHow</title></head><body>Hello World</body></html><big></big>
    Тег должен быть закрыт таким же тегом, но со слешем после первой угловой скобки. Существуют исключения, такие как теги META или DOCTYPE .
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/14\/Write-an-HTML-Page-Step-3.jpg\/v4-460px-Write-an-HTML-Page-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/14\/Write-an-HTML-Page-Step-3.jpg\/v4-728px-Write-an-HTML-Page-Step-3.jpg","smallWidth":460,"smallHeight":325,"bigWidth":728,"bigHeight":514,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • Как правило, большинство веб-страниц задаются DOCTYPE”. Это помогает определить кодировку, а также, каким образом она будет восприниматься веб-браузерами. Большинство страничек будут работать и без этого, “но это необходимо, если вы хотите соответствовать [2] (Они регулируют виды кодировок интернета и способы их использования) . 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b0\/Write-an-HTML-Page-Step-4.jpg\/v4-460px-Write-an-HTML-Page-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b0\/Write-an-HTML-Page-Step-4.jpg\/v4-728px-Write-an-HTML-Page-Step-4.jpg","smallWidth":460,"smallHeight":325,"bigWidth":728,"bigHeight":514,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • Давайте посмотрим на более важные теги, используемые в настоящее время. Во время создания странички, используется простая структура. Если был открыт тег, то в результате, он должен быть закрыт . Это относится ко всей структуре. Здесь представлен правильный пример структуры 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e0\/Write-an-HTML-Page-Step-5.jpg\/v4-460px-Write-an-HTML-Page-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e0\/Write-an-HTML-Page-Step-5.jpg\/v4-728px-Write-an-HTML-Page-Step-5.jpg","smallWidth":460,"smallHeight":325,"bigWidth":728,"bigHeight":514,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • Заголовок веб-странички – это содержание между тегом <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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b8\/Write-an-HTML-Page-Step-6.jpg\/v4-460px-Write-an-HTML-Page-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b8\/Write-an-HTML-Page-Step-6.jpg\/v4-728px-Write-an-HTML-Page-Step-6.jpg","smallWidth":460,"smallHeight":325,"bigWidth":728,"bigHeight":514,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • Давайте двигаться дальше и посмотрим другие теги. Будьте внимательны с использованием тегов и помните о правиле большого пальца, “Инкапсуляция."

      • <strong> Выделяет важный текст.
      • <small> Делает меньший размер текста. Размер шрифта измеряется в стандартных единицах от 1 до 7, 3 – это размер текста по умолчанию. [3] .
      • <pre> Определяет блок форматированного текста. Как правильно, такой текст набирается шрифтом одного размера и со всеми пробелами между словами.
      • <em> Показывает текст в виде фразы.
      • <del> Перечеркивает текст.
      • <ins> Определяет текст, который был вставлен в документ.
      • <h1> Один из многих тегов заголовка. Теги такого рода, начинаются с ‘h’, с различием в цифре. Убедитесь, что закроете тег с такой же цифрой.
      • <p> Определяет параграф.
      • <!--- ... ---> В отличии от других тегов, комментарий должен находиться внутри самого тега. Данная информация видна только, когда просматривается код.
      • <blockquote> Показывает цитату, может быть использован с тегом <cite>.
      • Несколько примеров, представленных выше, не являются полным списком существующих тегов. Чтобы узнать о других, посетите [4] .
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/Write-an-HTML-Page-Step-7.jpg\/v4-460px-Write-an-HTML-Page-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/Write-an-HTML-Page-Step-7.jpg\/v4-728px-Write-an-HTML-Page-Step-7.jpg","smallWidth":460,"smallHeight":325,"bigWidth":728,"bigHeight":514,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • Странички сконструированы для удерживания данных в простых сетах из тегов так, чтобы мы могли разобрать информацию в параграфах. Компьютер распознает данные, он не знает о контексте или идейной связи. Мы должны создавать понятные для компьютера 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 class="subSection">
      • <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


Дополнительные статьи

Как
запустить файл Python с помощью Командной строки Windows
Как
написать программу в блокноте
Как
вставить пробелы в HTML
Как
добавить веб–сайт в надежные узлы
Как
добавлять и удалять учетные записи пользователей через командную строку Windows
Как
добавить горизонтальную линию в HTML
Как
использовать Net Send
Как
научиться писать программы
Как
менять цвета в Командной строке
Как
скомпилировать программу C, используя компилятор GNU Compiler (GCC)
Как
создать гиперссылку в HTML
Как
сделать задержку в командном файле
Как
использовать DOSBox
Как
создать базу данных в среде SQL Server
Реклама

Источники

  1. ↑ Язык гипертекстовой разметки
  2. ↑ Консорциуму Всемирной паутины
  3. ↑ Руководства по HTML
  4. ↑ HTML Dog
  5. Way2Tutorial HTML Руководство
  6. HTML5 Теги

Об этой статье

На других языках
Эту страницу просматривали 8752 раза.

Была ли эта статья полезной?

Реклама