Загрузить PDF
Загрузить PDF
HTML — это сокращение от английского Hyper Text Markup Language (язык гипертекстовой разметки). Это код, или язык, на котором создается базовая разметка сайтов. Если вы никогда не программировали, изучение может показаться сложным, но на самом деле все, что вам нужно, чтобы начать обучение, — это простейший текстовый редактор и интернет-браузер. Возможно, вы даже узнаете некоторые примеры HTML-разметки, которые попадались вам на интернет-форумах, кастомизированных пользовательских страницах или в статьях wikiHow. HTML — полезный инструмент для любого пользователя интернета, а изучение его основ займет меньше времени, чем вы думаете.
Шаги
-
Откройте документ HTML. Большинство текстовых редакторов (Блокнот или Notepad++ для Windows, TextEdit для Mac, gedit для GNU/Linux) можно использовать для создания файлов HTML. Создайте новый документ, и сохраните его с помощью Файл → Сохранить как в формате веб-страницы или измените расширение файла на .html или .htm вместо .doc, .rtf или другого расширения.
- Может появиться предупреждение, что файл будет сохранен как «простой текст» вместо формата RTF или что форматирование и изображения не сохранятся. Это нормально; для HTML эти опции и не нужны.
-
Откройте созданный файл в браузере. Сохраните пустой файл, найдите его на компьютере и откройте двойным щелчком мыши. В браузере должна открыться пустая страница. Если этого не произошло, перетащите файл в адресную строку вашего браузера. В процессе редактирования HTML-файла вы сможете обновлять эту страницу, чтобы посмотреть изменения.
- Обратите внимание, что таким образом вы не создаете сайт в интернете. У других людей не будет доступа к этой странице, и вам не нужно интернет-соединение, чтобы тестировать свою локальную страницу. Браузер просто интерпретирует HTML-код, «читая» его, как будто это веб-сайт.
-
Поймите, что такое теги разметки. В отличие от обычного текста, теги не отображаются на странице. Вместо этого они указывают браузеру, каким образом отображать страницу и ее содержимое. «Открывающий» тег содержит инструкцию. Например, он может сообщать браузеру, что текст должен отображаться как полужирный . Также нужен «закрывающий» тег, показывающий браузеру, где заканчивается действие инструкции. В данном примере текст между открывающим и закрывающим тегами отобразится в полужирном начертании. Теги записываются внутри знаков неравенства, но закрывающий тег начинается с косой черты.
- Открывающий тег записывается между знаками неравенства:
<открывающий тег> - В закрывающем теге перед дескриптором (названием) тега ставится косая черта:
</закрывающий тег> - Читайте дальше, чтобы узнать об использовании различных тегов. Для этого шага достаточно запомнить формат записи. Теги записываются между знаками неравенства: < > и </ >
- В некоторых самоучителях HTML теги называют элементами, а текст между открывающим и закрывающим тегами называют содержимым элемента.
- Открывающий тег записывается между знаками неравенства:
-
Наберите в редакторе тег <html>. Каждый файл HTML должен начинаться с тега
<html>и заканчиваться тегом</html>. Эти теги указывают браузеру, что все содержимое между тегами написано на языке HTML. Добавьте эти теги в свой документ:- Часто файлы HTML начинаются со строки
<!DOCTYPE html>, которая означает, что браузеры должны распознавать весь файл как HTML. Эта строка не является необходимой, однако может помочь в решении проблем совместимости. - Наберите <html> вверху документа.
- Нажмите Enter или Return несколько раз, чтобы создать несколько пустых строк, затем наберите </html>
- Помните, что весь код, который вы будете создавать, следуя этой статье, нужно будет писать между этими двумя тегами.
- Часто файлы HTML начинаются со строки
-
Создайте в файле секцию <head>. Между тегами <html> и </html> создайте открывающий тег <head> и закрывающий тег </head> . Добавьте несколько пустых строк между ними. Содержимое, записанное между тегами <head> и </head>, не отображается на самой странице. Выполните следующие действия и вы увидите, для чего нужен этот тег:
- Между тегами <head> и </head> напишите <title> и </title>
- Между тегами <title> и </title> напишите Как выучить HTML - wikiHow .
- Сохраните изменения и откройте файл в браузере (или обновите страницу, если файл уже открыт). Видите текст, который отобразился в названии страницы над адресной строкой?
-
Создайте секцию <body>. Все остальные теги и текст в этом примере записываются в секции body, содержимое которой отображается на странице. После закрывающего тега </head>, но до тега </html> добавьте теги <body> и </body> . До конца этой статьи работайте с секцией body. Ваш файл должен выглядеть примерно так:
<html>
<head>
<title>Как выучить HTML - wikiHow</title>
</head>
<body>
</body>
</html> -
Добавьте текст, используя различные стили. Пришло время добавить настоящее содержимое страницы! Все, что вы напишете между тегами body, отобразится на странице после обновления в браузере. Не используйте символы < или > , поскольку браузер попытается интерпретировать содержимое как тег вместо текста. Напишите Всем привет! (или что захотите), затем попробуйте добавить эти теги к тексту и посмотрите, что получится:
-
<em>Всем привет!</em>выделяет текст "курсивом": Всем привет! -
<strong>Всем привет!</strong>выделяет текст "полужирным": Всем привет! -
<s>Всем привет!</s>зачеркивает текст:Всем привет! -
<sup>Всем привет!</sup>отображает шрифт в виде верхнего индекса: Всем привет! -
<sub>Всем привет!</sub>отображает шрифт в виде нижнего индекса: Всем привет! - Попробуйте разные теги вместе. Как будет выглядеть
<em><strong>Всем привет!</strong></em>?
-
-
Разделите текст на абзацы. Если вы попробуете написать несколько строк текста в файле HTML, то заметите, что разрывы строк не отображаются в браузере. Чтобы разделить текст на абзацы, нужно добавить теги:
-
<p>Это отдельный абзац.</p> -
После этого предложения следует разрыв строки <br> перед началом этой строки.
Это первый тег, не требующий закрывающего тега. Такие теги называются «пустыми». - Создайте заголовки, чтобы показать названия разделов:
<h1>текст заголовка</h1>: самый большой заголовок
<h2>текст заголовка</h2>(заголовок второго уровня)
<h3>текст заголовка</h3>(заголовок третьего уровня)
<h4>текст заголовка</h4>(заголовок четвертого уровня)
<h5>текст заголовка</h5>(самый маленький заголовок)
-
-
Научитесь создавать списки. Есть несколько способов создания списков на веб-странице. Попробуйте приведенные ниже варианты и решите, какой вам больше нравится. Обратите внимание, что одна пара тегов нужна для списка в целом (например <ul> и </ul> для маркированного списка), а каждый элемент списка выделяется другой парой тегов, например <li>и</li>.
- Маркированный список:
<ul><li>Первая строка</li><li>Вторая строка</li><li>И так далее</li></ul> - Нумерованный список:
<ol><li>Один</li><li>Два</li><li>Три</li></ol> - Список определений:
<dl><dt>Кофе</dt><dd>- горячий напиток</dd><dt>Лимонад</dt><dd>- холодный напиток</dd></dl>
- Маркированный список:
-
Сверстайте страницу, используя разрывы строк , горизонтальные линии, и картинки . Пришло время добавить на страницу что-то помимо текста. Попробуйте следующие теги или перейдите по ссылкам, чтобы получить больше информации. Используйте онлайн-хостинг для создания ссылки на картинку, которую вы хотите разместить:
- Горизонтальная линия:
<hr> - Вставить картинку
:
<img src="ссылка на картинку">
- Горизонтальная линия:
-
Добавьте ссылки. Вы можете использовать эти теги для создания гиперссылок на другие страницы и сайты, но поскольку у вас еще нет веб-сайта, сейчас вы научитесь создавать «якорные» ссылки, то есть ссылки на конкретные места на странице:
- Создайте якорь тегом <a> в том месте страницы, на которое вы хотите сослаться. Придумайте понятное и запоминающееся название:
<a name="Советы">Текст, на который вы ссылаетесь.</a> - Используйте тег <href>, чтобы создать относительную ссылку или ссылку на внешний ресурс:
<a href="ссылка на страницу или название якоря внутри страницы">Текст или изображение, которые будут служить ссылкой.</a> - Чтобы сослаться на относительную ссылку другой страницы, добавьте знак # после основной ссылки и название якоря. Например, https://ru.wikihow.com/выучить-HTML#Советы ссылается на раздел советов этой страницы.
Реклама - Создайте якорь тегом <a> в том месте страницы, на которое вы хотите сослаться. Придумайте понятное и запоминающееся название:
-
Познакомьтесь с атрибутами. Атрибуты записываются внутри тега, указывая на дополнительную информацию. Формат атрибутов такой: название="значение" , где название определяет атрибут (например, color для атрибута цвета), а значение указывает на его значение (например, red для красного цвета).
- Атрибуты на самом деле уже применялись в предыдущем разделе основ HTML. Тег <img> использует атрибут src , якоря относительных ссылок используют атрибут name , а ссылки используют атрибут href . Как вы уже заметили, все атрибуты записываются в формате ___="___" .
-
Поэкспериментируйте с таблицами HTML. Создание таблицы предполагает использование различных тегов. Вы можете поэкспериментировать, или прочитать более подробную инструкцию .
- Создайте теги таблицы:
<table></table> - Содержимое каждой строки таблицы заключите в теги:
<tr> - Заголовок столбца определяется тегом:
<th> - Ячейки в последующих строках:
<td> - Пример использования этих тегов:
<table><tr><th>Столбец 1: месяц</th><th>Столбец 2: сбережения</th></tr><tr><td>Январь</td><td>5000 рублей</td></tr></table>
- Создайте теги таблицы:
-
Выучите дополнительные теги секции head. Вы уже выучили тег <head>, идущий вначале каждого файла html. Кроме тега <title>, есть и другие теги для этой секции:
- Мета-теги, в которых содержатся метаданные , используемые поисковыми системами для индексации сайта. Чтобы ваш сайт легче находился в поисковых системах, используйте один или несколько открывающих тегов <meta> (закрывающие теги не требуются). Используйте по одному атрибуту и значению на тег: <meta name="description" content="описание страницы">; или <meta name="keywords" content="ключевые слова, разделенные запятыми">
- Теги <link>, ведущие на сторонние файлы, к примеру на таблицы стилей (CSS), которые создаются с помощью другого типа кодирования и позволяют изменить HTML-страницу с помощью цвета, выравнивания текста и многих других функций.
- Теги <script>, используемые для прикрепления к странице файлов JavaScript . Эти файлы нужны для изменения страницы в интерактивном режиме (в ответ на действия пользователя).
-
Поэкспериментируйте с кодом HTML других сайтов. Отличным способом изучения HTML станет просмотр исходного кода других веб-страниц. Вы можете щелкнуть правой кнопкой мыши на странице и выбрать «Посмотреть исходный код» или что-то подобное в верхнем меню браузера. Попробуйте определить, что делает незнакомый тег, или поищите информацию о нем в интернете.
- Хотя вы и не можете редактировать чужие сайты, вы можете скопировать исходный код в свой файл, чтобы потом поэкспериментировать с тегами. Обратите внимание, что разметка CSS может быть недоступна, и цвета и форматирование могут выглядеть по-другому.
-
Приступите к изучению более подробных руководств. В интернете есть много сайтов, посвященных тегам HTML, например W3Schools или HTMLbook . В продаже есть и бумажные книги, но постарайтесь найти актуальное издание, поскольку стандарты меняются и развиваются. Еще лучше освоить CSS, чтобы в гораздо большей степени контролировать разметку и внешний вид сайта. После изучения CSS вебдизайнеры обычно изучают JavaScript.Реклама
Советы
- Notepad++ — отличная бесплатная программа, похожая на обычный Блокнот, но вы можете сохранять и тестировать свой код в браузере в онлайн-режиме. (Она также поддерживает практически любой язык — HTML, CSS, Python, JavaScript и так далее).
- Найдите в сети какую-нибудь простую страницу, сохраните код к себе на компьютер и поэкспериментируйте с ним. Попробуйте переместить текст, изменить шрифт, заменить изображения — все что угодно!
- Вы можете завести блокнот, куда будете записывать теги, чтобы всегда иметь их под рукой. Также можете распечатать эту страницу и сверяться с ней.
- Когда вы пишете код, делайте это аккуратно, чтобы и вы, и другие люди могли его понять. Используйте <!-- Insert comment here --> для комментариев в HTML: они не будут отражаться на странице, но будут видны в документе с кодом.
- XML и RSS обретают все большую популярность. Код страниц, содержащих технологии XML и RSS, неискушенному пользователю сложнее прочесть и понять, но эти инструменты весьма полезны.
- Теги разметки в HTML не зависят от регистра, однако рекомендуется использовать только строчные буквы (как в примерах в этой статье) — как в целях стандартизации, так и для совместимости с XHTML. [1] X Источник информации
Реклама
Предупреждения
- Некоторые теги за последние несколько лет вышли из обихода и были заменены новыми, дающими те же или какие-то дополнительные эффекты.
- Если вы хотите проверить свою страницу, зайдите на сайт W3 и узнайте современные требования к HTML. Стандарты HTML меняются со временем, и на смену некоторым тегам приходят новые, которые лучше работают в современных браузерах.
Реклама
Что вам понадобится
- Текстовый редактор, например Блокнот (Windows) или TextEdit (Mac)
- Бумага/блокнот (необязательно)
- HTML-редактор, например Notepad++ (Windows) или TextWrangler (Mac) (необязательно)
Источники
Реклама
