HTML (Язык гипертекстовой разметки) – это основной язык программирования для разработки веб-страниц. [1] X Источник информации Создан в качестве простого и удобного языка программирования. Большинство страниц в интернете было разработано с использованием одной из форм этого языка (ColdFusion, XML, XSLT). Ознакомившись с этой статьей, вы сможете продолжить ваше обучение, используя другие ресурсы в интернете. Постарайтесь поискать другие статьи, связанные с этой темой, в интернете.
Шаги
-
До того, как вы начнете ознакомление с одним из представленных здесь шагов, посмотрите раздел “Что вам понадобится”.
-
Что вы должны знать до того, как начнете разбираться в этом вопросе:
-
3Основы. Вы когда-нибудь слышали о теге? Тег окружен угловыми скобками, со словом внутри. Конечный тег записывается в такой же форме, но с добавлением слеша после первой угловой скобки. Атрибут – это дополнительное слово в теге, которое используется для добавление деталей в тег.
-
4Начало документа. В любом текстовом редакторе, который вы используете, вставьте то, что находится ниже:
<html><head><title>wikiHow</title></head><body>Hello World</body></html><big></big>
Тег должен быть закрыт таким же тегом, но со слешем после первой угловой скобки. Существуют исключения, такие как теги META или DOCTYPE . -
DOCTYPE
- Как правило, большинство веб-страниц задаются DOCTYPE”. Это помогает определить кодировку, а также, каким образом она будет восприниматься веб-браузерами. Большинство страничек будут работать и без этого, “но это необходимо, если вы хотите соответствовать [2] X Источник информации (Они регулируют виды кодировок интернета и способы их использования) . 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+.
-
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 .
-
Заголовок
- Заголовок веб-странички – это содержание между тегом <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 (Мы поговорим об этом в простых тегах).
- Заголовок веб-странички – это содержание между тегом <head>
. Это содержание не может быть просмотрено со стороны пользователя (только название, которое показывается в названии странички). Информация между тегами <head>
, может заключать другие теги, такие как:
-
Простые теги везде
- Давайте двигаться дальше и посмотрим другие теги. Будьте внимательны с использованием тегов и помните о правиле большого пальца, “Инкапсуляция."
- <strong> Выделяет важный текст.
- <small> Делает меньший размер текста. Размер шрифта измеряется в стандартных единицах от 1 до 7, 3 – это размер текста по умолчанию. [3] X Источник информации .
- <pre> Определяет блок форматированного текста. Как правильно, такой текст набирается шрифтом одного размера и со всеми пробелами между словами.
- <em> Показывает текст в виде фразы.
- <del> Перечеркивает текст.
- <ins> Определяет текст, который был вставлен в документ.
- <h1> Один из многих тегов заголовка. Теги такого рода, начинаются с ‘h’, с различием в цифре. Убедитесь, что закроете тег с такой же цифрой.
- <p> Определяет параграф.
- <!--- ... ---> В отличии от других тегов, комментарий должен находиться внутри самого тега. Данная информация видна только, когда просматривается код.
- <blockquote> Показывает цитату, может быть использован с тегом <cite>.
- Несколько примеров, представленных выше, не являются полным списком существующих тегов. Чтобы узнать о других, посетите [4] X Источник информации .
- Давайте двигаться дальше и посмотрим другие теги. Будьте внимательны с использованием тегов и помните о правиле большого пальца, “Инкапсуляция."
-
Создание понятной структуры
- Странички сконструированы для удерживания данных в простых сетах из тегов так, чтобы мы могли разобрать информацию в параграфах. Компьютер распознает данные, он не знает о контексте или идейной связи. Мы должны создавать понятные для компьютера 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, чтобы создать лучшее и отзывчивое взаимодействие с пользователем.
Реклама - Странички сконструированы для удерживания данных в простых сетах из тегов так, чтобы мы могли разобрать информацию в параграфах. Компьютер распознает данные, он не знает о контексте или идейной связи. Мы должны создавать понятные для компьютера HTML странички. Это достигается при использовании тега div. Он помогает создавать огромное количество страничек. Его можно стилизовать c CSS, и это проще, чем создание больших кодовых таблиц для макета.
Советы
- После чтения данной статьи, не останавливайтесь и не думайте, что вы узнали все, что нужно. Всегда есть что-то, чему можно научиться, особенно в данной технологии.
- Учитесь, разбирайтесь, и пишите код.
- Обратите внимание, что некоторые теги используют только <>. Параграф и 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
Источники
Реклама