Я продолжаю цикл статей по созданию собственного веб-сайта в ОС Убунту
В прошлой статье мы установили редактор кода Sublime Text 3 и установили Emmet. Ссылка на начало :
Теперь откроем Sublime Text. В прошлый раз мы остановились на создании файла и базовой разметке.
Что же это такое, базовая разметка? Базовая разметка начинается строкой DOCTYPE. В ней указывается тип документа. Это делается для того что бы браузеры могли интерпретировать данный документ :
Следующая строка <html lang="en"> означает что контент страницы на английском языке. "en" означает язык. Сокращённо от english.
Если контент страницы будет на русском языке то вместо en надо будет указать ru. Если будете делать сайт на английском языке, на русском языке, итальянском языке и т.д. то надо обязательно указывать язык.
Между тэгами head помещаются в блоке техническая информация страницы и её заголовок. Тэг <meta charset="UTF-8"> отвечает за кодировку страницы а тэг<title>Document</title>за её заголовок :
Так же в этом блоке надо проставить тэги description и keywords. Тэг description отвечает за описание страницы для поисковых систем а в тэге keywords прописываются ключевые слова. Теперь пропишем все тэги. В тэге <html lang=" я укажу язык русский(ru ). В тэге <title></title> я напишу LinuxUSER. В тэге <meta name="description" content=""> я напишу "LinuxUSER делает разметку HTML". В тэге <meta name="keywords" content=""> я напишу ключевые слова "LinuxUSER,HTML":
Теперь нужная мне информация выглядит так:
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LinuxUSER</title>
<meta name="description" content="LinuxUSER делает разметку HTML">
<meta name="keywords" content="LinuxUSER,HTML">
Теперь всю эту информацию сохраним комбинацией клавиш CTRL+S и попробуем получившийся файл открыть в браузере:
И в открывшемся окне мы видим в визуальной части только заголовок "LinuxUSER" :
Что бы увидеть исходный код страницы нужно нажать комбинацию CTRL+U:
В итоге открылся исходный код страницы. Это именно то что я написал ранее. О том как пользоваться другими тегами в следующей статье: