Пример 1

Введение в HTML

По сути, HTML довольно простой язык, состоящий из элементов, которые могут быть применены к частям текста, чтобы придавать им различные значения (Это абзац? Это маркированный список? Это часть таблицы?), разделять документ на логические секции (есть ли у документа шапка? три столбца с контентом? меню навигации?) и добавлять контент на Вашу страницу, такой как фото и видео. Этот модуль расскажет вам о первых двух возможностях HTML и научит фундаментальным концепциям и синтаксису, которые вам нужно знать, чтобы понять HTML.

Необходимые условия

Чтобы начать изучение этого модуля, вам не нужны никакие знания HTML, но вы должны иметь хотя бы базовые навыки обращения с компьютером и навыки пассивного использования Веба (т.е просто смотря на него, потребляя контент). У вас должна быть базовая рабочая среда, описанная в разделе Установка базового программного обеспечения), а также понимание, как создавать и управлять файлами, что подробно описано в статье Работа с файлами — обе статьи являются частью нашего модуля Начало работы с сетью.

Примечание: если вы работаете на компьютере/планшете/другом устройстве, с отсутствием возможности создания собственных файлов, вы можете испробовать примеры кода (большинство) в онлайн-редакторах кода, таких как JSBin или Thimble.

Руководства

Этот модуль содержит следующие статьи, которые помогут изучить всю основную теорию HTML и предоставят широкие возможности для проверки некоторых навыков.

Охватывает базовые основы HTML, чтобы вы начали изучение — мы опишем элементы, атрибуты и все другие важные термины, о которых вы, возможно, уже слышали, а также где и как они располагаются в языке. Мы также покажем, структуру HTML-элемента, как устроена типичная страница HTML, и объясним другие важные языковые особенности. По ходу мы будем играть с HTML так, чтобы вам было интересно!

Заголовок HTML — это часть документа, которая не отображается в браузере при загрузке страницы. Он содержит информацию, такую как: страница , ссылки на CSS (если вы хотите стилизовать свой HTML при помощи CSS), ссылки на пользовательские значки и метаданные (которые представляют собой данные о HTML, например, кто его написал или важные ключевые слова, которые описывают документ).

Основной задачей HTML является придание тексту значения **(**также известно, как семантика), чтобы браузер знал, как его правильно отображать. В этой статье рассматривается то, как использовать HTML, чтобы разбить блок текста на структуру из заголовков и абзацев, добавить акцент/значение слов, создать списки и многое другое.

Гиперссылки очень важны — ведь именно они делают интернет интернетом. В этой статье описан синтаксис, необходимый для создания ссылок, а также описано их наилучшее применение на практике.

Существует множество других элементов HTML для редактирования текста, про которые мы вам не рассказали в статье Основы редактирования текста в HTML. Описанные здесь элементы менее известны, но о них также полезно знать. Здесь вы узнаете о разметке цитат, списках описания, компьютерном коде и другом сопутствующем тексте, нижнем и верхнем индексах, контактной информации и многом другом.

Помимо определения отдельных частей страницы (таких как «абзац» или «изображение»), HTML также используется для определения отдельных зон веб-сайта (таких как «шапка», «меню навигации», «столбец с основным содержимым».) В этой статье рассматривается, как планировать базовую структуру веб-сайта и писать HTML для представления этой структуры.

Писать на HTML хорошо, но что, если что-то идёт не так, и вы не можете найти место ошибки в коде? В этой статье вы познакомитесь с некоторыми инструментами, которые могут вам помочь.

Оценка

Следующие задания проверят ваше понимание основ HTML, описанных в приведённых выше руководствах.

Все мы рано или поздно учимся писать письма; также это полезный тест, для проверки ваших навыков форматирования текста! Поэтому, в этом задании вам будет предоставлено письмо для разметки.

Этот тест проверит вашу способность использовать HTML для структурирования простой страницы, которая содержит шапку («хедер») , нижний колонтитул («футер»), меню навигации, основное содержимое и боковую панель.

Смотрите также

Отличный фундаментальный курс Mozilla, который даёт множество тестов, проверяющих знания, о которых мы говорили в модуле Введение в HTML. Учащиеся знакомятся с чтением, письмом и использованием сети в модуле из 6 частей. Откройте для себя основы Интернета через производство и сотрудничество.

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

Самоучитель HTML

Термин HTML (HyperText Markup Language) означает «язык разметки гипертекста». Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными. Известны спецификации 2.0, 3.2, 4.0 и 4.01. Текущую спецификацию HTML всегда можно найти на сервере W3C [1].

Всё, о чём написано в Самоучителе HTML, будет гарантированно работать с программным обеспечением, поддерживающим любую известную на сегодня спецификацию HTML. Естественно, для этого пришлось опустить некоторые детали, которые описаны не во всех спецификациях или описаны в разных спецификациях по-разному. Однако могу Вас уверить, что Ваши документы будут полностью работоспособными и вполне приличными по внешнему виду.

Что Вам понадобится для освоения HTML? [ править ]

Для освоения HTML по этому Самоучителю Вам понадобятся две вещи:

• Любой браузер, то есть, программа, пригодная для просмотра HTML-файлов.
• Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем компьютере установлен Windows, вполне подойдет Notepad.

Мы будем использовать текстовый редактор для подготовки HTML-файлов, а браузер — как инструмент контроля за сделанным.

Свои первые HTML-файлы Вы будете разрабатывать у себя на локальном диске. Другими словами, компьютер, на котором Вы будете заниматься, может и не иметь подключения к Интернет. При этом один и тот же *.html-файл может быть одновременно открыт и в Notepad, и в Netscape Navigator. Сохранив изменения в Notepad, просто нажмите кнопку Reload («перезагрузить») в браузере, чтобы увидеть эти изменения реализованными в HTML-документе.

Необходимое отступление о редакторах HTML [ править ]

В настоящее время широко используются два типа редакторов HTML:

• Редакторы типа «что видишь, то и получишь» (Namo WebEditor 2006, Microsoft Front Page). Пользователь не видит «внутренностей» документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word или Word Perfect. Кстати говоря, существует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word или Word Perfect, в HTML-документы.
• Редакторы собственно HTML-текстов (HotDog, Ken Nesbitt Web Editor и многие другие). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML. Работа с таким редактором очень похожа на работу с интерактивной средой программирования типа Microsoft Visual Basic или Borland Delphi.

Теги HTML-документа [ править ]

Как устроен HTML-документ [ править ]

HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:

      
Привет!
 
Это простейший пример HTML-документа.
 
Этот *.html-файл может быть одновременно открыт и в Notepad, и в браузере. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в браузере, чтобы увидеть эти изменения реализованными в HTML-документе.
  

Попробуйте написать этот документ в программе Блокнот и просмотреть в браузере.

Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:

    
Привет!
 
Это простейший пример HTML-документа.
 
Этот *.html-файл может быть одновременно открыт и в Notepad, и в браузере. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в браузере, чтобы увидеть эти изменения реализованными в HTML-документе.
  

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «». Такой фрагмент (например, ) называется тегом (по-английски — tag, читается «тэг»).

Большинство HTML-тегов — парные, то есть на каждый открывающий тег вида есть закрывающий тег вида с тем же именем, но с добавлением «/».

Теги можно вводить как большими, так и маленькими буквами. Например, теги , и будут восприняты браузером одинаково.

Многие теги, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущий тег. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.

Обязательные теги [ править ]

Тег должен открывать HTML-документ. Аналогично, тег должен завершать HTML-документ.

Эта пара тегов указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание тега ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.

Тег meta определяет кодировку сайта, хранит служебную информацию для поисковых роботов и браузеров.

Всё, что находится между тегами , толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

Эта пара тегов указывает на начало и конец тела HTML-документа, которое и определяет содержание документа.

Теги вида (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.

Такая пара тегов описывает абзац. Всё, что заключено между

Источник