- 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-файле, вы заметите, что разрывы строк не отображаются в браузере. Абзацы определяются следующими тегами:
- Это отдельный абзац.
- После этого предложения следует разрыв строки.
тег в начале этого предложения.
Это первый тег не требует закрывающего тега. Такие метки называются «пустыми». - Создайте заголовки, чтобы показать названия разделов:
заголовок: Самый большой заголовоктекст заголовка
(заголовок второго уровня)
текст заголовка
(заголовок третьего уровня)
текст заголовка (заголовок четвертого уровня)
текст заголовка (самый маленький заголовок)