Знакомство с HTML
Редакторы HTML-документов
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере.
Важно понимать, что язык HTML - это не язык программирования, он предназначен для верстки документов (верстка - это размещение элементов сайта по нужным местам). Элементы HTML являются строительными блоками HTML страниц. С помощью HTML разные конструкции, изображения и другие объекты могут быть встроены в отображаемую страницу. HTML предоставляет средства для создания заголовков, абзацев, списков, ссылок, цитат и других элементов.
HTML-редактор это первое, что вам понадобится для того чтобы начать создавать веб-страницы, используя HTML и CSS. Существует множество бесплатных HTML-редакторов, и выбрать один из них может быть непростой задачей.
HTML довольно прост и поэтому вы можете начать работать с вашими веб-страницами используя простой текстовый редактор, такой как Notepad, WordPad или любой другой. Вы также можете пойти дальше и воспользоваться одним из редакторов с более богатым функционалом, например Coffecup, Notepad++, Brackets, Notetab или BlueGriffon. Преимущество использования более продвинутых и функциональных редакторов в том, что вы получаете больше инструментов, способных значительно ускорить процесс разметки и создания контента.
Notepad++
Этот редактор доступен только пользователям Windows, так что если у вас Mac или Linux, то листайте дальше. Notepad++ это лучший бесплатный HTML-редактор, который вы можете установить на свой компьютер с ОС Windows. На первый взгляд он очень элементарный, но это один из самых сложных и одновременно простых в использовании редакторов.
Brackets (бесплатен для Mac, Windows и Linux)
HTML-Online
Одно из достоинств этого редактора – конвертация Word в HTML, благодаря чему вы можете копировать ваш контент из файлов Microsoft Word и автоматически применять к нему HTML-разметку. Также есть поддержка Google docs, PDF, Excel, PowerPoint и многих других видов документов.
Atom
Теги и атрибуты
HTML теги - это специальные команды для браузера. Они говорят ему, что, к примеру, следует считать заголовком страницы, а что абзацем.
Теги строятся по такому принципу: уголок <, потом имя тега, а потом уголок >. Имя тега может состоять из английских букв и цифр. Примеры тегов:
Теги обычно пишутся парами - открывающий тег и соответствующий ему закрывающий. Разница между открывающим и закрывающим тегами в том, что в закрывающем теге после уголка < стоит слеш /.
К примеру, <p>
- так я открыл тег, а так - </p>
- я его закрыл. Все, что попадает между открывающим и закрывающим тегами, подпадает под воздействие нашего тега.
Бывают теги, которые не нужно закрывать, например, <br> или <img>
.
Атрибуты
В тегах также могут размещаться атрибуты - специальные команды, которые расширяют действие тега. Атрибуты размещаются внутри открывающего тега в таком формате:
<тег атрибут1="значение" атрибут2= "значение" >
Кавычки могут быть любыми - одинарными или двойными, допустимо их вообще не ставить, если значение атрибута состоит из одного слова (но это не желательно).
Наиболее яркий пример — тег , обозначающий изображение. Для него обязательно нужно указывать атрибут src , который задаёт адрес картинки (иначе браузер не сможет загрузить её), а также можно задать размер картинки по ширине в пикселах.
<img src="cat.jpg" width=500 />
Структура страницы HTML
Страница сайта - это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег <html>
, который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег <head>
для служебного содержимого страницы и тег <body>
- для основного текста, который и виден на экране браузера. Все указанные теги парные, а значит имеют тег начала и конца.
В служебное содержимое, которое располагается внутри тега <head>
, входит много различных вещей, но пока нам нужны только две из них. Это тег <title>
, задающий название страницы, которое будет видно во вкладке браузера, и тег <meta>
, который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8).
Кроме того, перед тегом <html>
обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт <!DOCTYPE html>
.
Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере - скопируйте его в текстовый файл с расширением .html и откройте в браузере):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок</title> </head> <body> Это основное содержимое страницы. </body> </html>
Кодировка страницы
Прежде чем начать двигаться дальше и изучать остальные тэги и атрибуты HTML, нам с вами нужно остановиться на одной важной теме, которая называется работа с кодировкой веб-страницы.
Когда вы создали веб-страницу и пытаетесь посмотреть ее текст в каком-либо браузере, она может отображаться примерно вот так:
Хотя на компьютере, где этот документ создавался, все могло работать нормально и текст отображался правильно, но на другом компьютере или другом браузере могут возникать проблемы.
Причина такой неисправности в неверной кодировке документа.
Сама по себе кодировка представляет собой таблицу, где по строкам и по столбцам представляются составляющие числа в какой-либо системе счисления, а на их пересечении образуются символы, которые необходимо вывести.
Для того, чтобы все заработало, нужно дополнительно сообщить браузеру, какую кодировку мы выставили для HTML-страницы.
Для этого нужно использовать специальный обязательный элемент, который называется meta и задать ему атрибут charset со значением кодировки, которую вы выставили.
Если вы не создадите этот элемент, то браузер будет пытаться определить кодировку текста автоматически и создаст этот элемент сам. Не факт, что это у него получиться правильно.
Поэтому указывать кодировку документа с помощью элемента meta - это очень важное действие, которое нужно сделать при создании любой HTML-страницы.
Элемент meta должен располагаться внутри элемента <head>
.
В качестве значения атрибута charset необходимо указать название кодировки.
Пример указания кодировки Юникод(UTF-8)
<meta charset="utf-8">
Пример указания кодировки Windows-1251.
<meta charset="windows-1251">
Наиболее часто сегодня используется кодировка Юникод(UTF-8). Чтобы корректно браузер отобразил документ, необходимо его сохранить в данной кодировке и указать в заголовке тег
<meta charset="utf-8">
.
Комментарии в документе HTML
Практически во всех языках программирования есть такое понятие как "комментарии". HTML хоть и не язык программирования, но тоже поддерживает комментарии. Комментарии - это такой текст, который будет проигнорирован браузером - на экране он будет не виден, но останется в исходном коде страницы.
Для чего нужны комментарии? Во-первых, для того, чтобы оставлять в исходном коде пометки себе или тому человеку, который будет править ваш код после вас. Во-вторых, с помощью комментариев можно убирать некоторые вещи, которые вы бы сейчас хотели удалить, но потом, может быть, захотите вернуть. Их можно просто временно закомментировать, а потом раскомментировать при необходимости.
Комментарии в HTML оформляются следующим образом: сначала уголок, знак ! и два дефиса - <!--
, потом текст комментария, а потом два дефиса и уголок - -->
. Смотрите пример: