Знакомство с 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>
<img>

Теги обычно пишутся парами - открывающий тег и соответствующий ему закрывающий. Разница между открывающим и закрывающим тегами в том, что в закрывающем теге после уголка < стоит слеш /.

К примеру, <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 оформляются следующим образом: сначала уголок, знак ! и два дефиса - <!--, потом текст комментария, а потом два дефиса и уголок - -->. Смотрите пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок</title>
	</head>
	<body>
		<!-- 
 
			Это комментарий HTML -
 
			на странице сайта он не отображается.
 
		-->
 
		Это основное содержимое страницы.
 
	</body>
</html>

Направление: