- 1 Откройте файл HTML. Большинство текстовых редакторов (Блокнот или Word для Windows, TextEdit для Mac) могут быть использованы для создания HTML-файлов. Создайте новый документ и сохраните его (Файл — > Сохранить как) в формате веб-страницы, или изменить расширение файла «.html» или «.htm» вместо «.doc,» «.rtf» или другого расширения. Кстати, HTML уроки доступны на страницах нашего специализированного сайта.
- Может появиться предупреждение, что файл будет сохранен как «простой текст» вместо формата «rich text», или что форматирование и изображения не сохранятся. Так и надо; для HTML это и не нужно.
- Нет разницы между файлами с расширением .html и .htm. Любой вариант подходит.
2 Откройте этот файл в браузере. Сохранив пустой файл с расширением .htm, найдите его на компьютере и откройте двойным щелчком мыши. В браузере должна открыться пустая страница. Если этого не произошло, перетащите файл в адресную строку вашего браузера. Редактируя файл HTML из этой инструкции, вы сможете обновлять эту страницу, чтобы увидеть изменения.
- Обратите внимание, что таким образом вы не создаете сайт в интернете. У других людей не будет доступа к этой странице, и вам не нужен интернет, чтобы смотреть свою локальную страницу. Браузер просто интерпретирует HTML-код, который ему дают, неважно, в интернете он, или у вас на диске.
3 Изучите теги разметки. Теги не отображаются на странице, в отличие от обычного текста. Вместо этого они указывают браузеру, каким образом нужно отображать страницу и ее содержимое. «Открывающий тег» содержит инструкцию. Например, тег для жирного текста. Также нужен «тег», для разграничения области применения инструкции: в этом примере текст между открывающим и закрывающим тегами появится в полужирном начертании. Теги записываются внутри знаков неравенства, но закрывающий тег начинается с косой черты.
- Открывающий тег записывается между знаками неравенства: <Открывающий тег>
- В закрывающем теге перед дескриптором (названием) тега ставится косая черта: </Закрывающий тег>)
- Читайте дальше, чтобы узнать об использовании тегов. Для этого шага достаточно запомнить формат записи, теги записываются между знаками неравенства: и
- В некоторых самоучителях HTML, тэги называют «элементами», а текст между открывающим и закрывающим тегами называют «содержанием элемента».
4 Наберите в редакторе тег . Каждый html-файл должен начинаться с тега и заканчивается тегом . Эти теги указывают браузеру, что все содержимое между тегами написано на языке HTML. Добавьте эти теги в файл:
- Наберите в верхней части документа.
- Нажмите enter несколько раз, чтобы создать несколько пустых строк, затем наберите
- Все примеры из этой инструкции набираются между этими двумя тегами.
5 Создайте секцию в файле. Между тегами и создайте открывающий тег и закрывающий тег . Создайте несколько пустых строк между ними. Содержимое, записанное между тегами и не отображается на самой странице. Выполните следующие шаги, чтобы узнать, для чего нужен этот тег:
- Между тегами и , напишите и
- Между тегами и , напишите Как изучить HTML wikiHow.
- Сохраните изменения и откройте файл в браузере или обновите страницу, если файл уже открыт). Текст должен появиться в названии страницы, над адресной строкой?
6 Создайте секцию . Все остальные теги и текст в этом примере записываются в секцию body, содержимое которой отображается на странице. После закрывающего тега , но к тегу , добавьте теги и . До конца этой инструкции работайте с секцией body. Ваш файл должен выглядеть примерно так:
- Как выучить HTML — wikiHow
7 Добавьте текст, используя разные стили. Пришло время добавить данный содержимое страницы! Все, что вы напишете между тегами body, отображается на странице после обновления в браузере. Не используйте символы < или >, поскольку браузер попытается интерпретировать содержимое как тег, а не текст. Напишите Hello world! (или что захотите), затем попробуйте добавить теги к тексту, и посмотрите, что получится:
- Hello world! выделяет текст курсивом»: Hello world!
- Hello world! выделяет текст «жирным»: Hello world!
- Hello world! зачеркивает текст: Hello world!
- Hello world! отображает шрифт в виде верхнего индекса: Hello world!
- Hello world! отображает шрифт в виде нижнего индекса: Hello world!
- Попробуйте разные теги разом: Как будет выглядетьHello world!?
8 Разделите текст на параграфы. Если вы попытаетесь написать несколько строк текста в HTML-файле, вы заметите, что разрывы строк не отображаются в браузере. Абзацы определяются следующими тегами:
- Это отдельный абзац.
- После этого предложения следует разрыв строки.
тег в начале этого предложения.
Это первый тег не требует закрывающего тега. Такие метки называются «пустыми». - Создайте заголовки, чтобы показать названия разделов:
заголовок: Самый большой заголовоктекст заголовка
(заголовок второго уровня)
текст заголовка
(заголовок третьего уровня)
текст заголовка (заголовок четвертого уровня)
текст заголовка (самый маленький заголовок)
Как выучить HTML
Вся информация, изложенная на сайте, носит сугубо рекомендательный характер и не является руководством к действию