Как известно, все великое всегда начинается с малого. Если вас заинтересовал ответ на вопрос как создать сайт через блокнот, то наверняка вы где-то слышали о такой возможности. Это, действительно, возможно. Но стоит сразу оговориться, что создавать современный динамический интерактивный сайт через блокнот в настоящее время скорее всего никто не будет, так как для этого существуют специальные программы, многократно ускоряющие и упрощающие процесс разработки. А вот создать полноценную веб-страницу вполне возможно.
Для начала необходимо небольшое знакоство с теорией и общими терминами. Подавляющее большинство страниц сайтов представляют собой обычные текстовые документы, которые оформлены специальным образом – языком гипертекстовой разметкой сокращенно называемой HTML. Некоторые причисляют разметку HTML к языкам программирования, но это не верно.
HTML – это всего лишь способ стандартизации разметки документов, который однозначно интерпретируется браузерами для отображения на экранах компьютеров в удобной для пользователей форме. Основным инструментом языка HTML являются специальные структурные элементы, с помощью которых и оформляется документ. Их называют дескрипторами или тегами.
В общем виде тег представляет собой конструкцию вида <table> Таким образом, тег начинается знаком < после которого следует название тега table и вся конструкция завершается знаком >. Теги бывают парными как выделение текста жирным шрифтом <b> и </b> и непарными как перевод строки <br>. В случае использования парных тегов обязательно использование как открывающегося тега <b>, так и закрывающегося </b>. Закрывающимся тегом является дескриптор со знаком косой черты /.
Рассмотрим основные виды тегов и их назначение.
- Элемент <!DOCTYPE html>. Устанавливается в самое начало страницы и служит для указания браузеру того, как интерпретировать данный документ. Является не обязательным, но очень желателен на странице для избежания возможных проблем с ее отображением.
- Тег <html>. Является парным тегом и состоит из двух частей <html> и </html>. Каждая страница сайта начинается с этого тега и заканчивается им.
- Тег <head>. Также является парным тегом и состоит из двух частей <head> и </head>. Внутри данного тега размещается различная важная информация о странице: ее заголовок, ссылки на используемые стили оформления, подключаемые скрипты, специальные метаданные.
- Тег <title>. Является парным тегом, состоит из двух частей <title> и </title> и располагается внутри тега <head>. Данный тег определяет заголовок страницы, с которым она будет видна в браузере.
- Тег <body>. Является парным тегом, состоит из двух частей <body> и </body> и следует за тегом <head> на странице. Именно в теге <body;> содержится вся информация, которая отображается на странице в браузере.
- Тег <b>. Является одинарным. Служит для обозначения перевода строки в документе.
- Тег <a>. Относится к парным тегам, записывается в несколько отличном от других тегов виде <a href=””></a> и служит для создания ссылок. Является важнейшим элементом всей концепции языка HTML, а также интернета в целом.
- Тег <p>. Относится к парным тегам и состоит из двух частей <p> и </p>. С его помощью оформляется текстовый абзац.
- Теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Относятся к парным тегам, так как состоят из двух тегов, например <h1> и </h1>. Данные теги служат для создания подзаголовков шести уровней и одновременно показывают важность заключенного в них текста относительно всего документа.
- Тег <b>. Также является парным тегом, состоящим из двух частей <b> и </b> и устанавливает полужирное оформление шрифта.
- Запустите Блокнот и в самой первое его строке установите элемент <!DOCTYPE html>, подсказывающий браузеру как следует интерпретировать ваш документ.
<!DOCTYPE html>
- Сделайте перевод строки и добавьте парный тег <html>. Переведите закрывающийся тег </html> на две строки вниз.
<!DOCTYPE html>
<html>
</html> - Добавьте парный тег <head> в строке между тегами <html> и переведите закрывающийся тег </head> на две строки вниз.
<!DOCTYPE html>
<html>
<head>
</head>
</html> - В строке между тегами <head> и </head> напишите парный тег <title></title> в одну строку.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
</html> - Введите заголовок вашей веб-страницы между тегами <title> и </title>. Например, такой.
<!DOCTYPE html>
<html>
<head>
<title>Моя первая страница сайта</title>
</head>
</html> - Установите курсор в строке после закрывающегося тега </head> и выполните перевод строки. Впишите в появившуюся пустую строку парный тег <body>.
<!DOCTYPE html>
<html>
<head>
<title>Моя первая страница сайта</title>
</head>
<body></body>
</html> - Сделайте двойной перевод между внутри тегами <body> и </body>. В появившуюся строку впишите парный тег заголовка <h1>. Наберите внутри тега <h1> подзаголовок страницы.
<!DOCTYPE html>
<html>
<head>
<title>Моя первая страница сайта</title>
</head>
<body>
<h1>Обо мне</h1>
</body>
</html> - После закрывающегося тега заголовка </h1> сделайте перевод строки и в новой строке установите парные теги абзаца <p> и </p>. Впишите между ними текст. Например, так.
<!DOCTYPE html>
<html>
<head>
<title>Моя первая страница сайта</title>
</head>
<body>
<h1>Обо мне</h1>
<p>Меня зовут Иванов Иван. Я создаю свой сайт.</p>
</body>
</html> - Заключите имя и фамилию в парный тег <b> для выделения их жирным шрифтом.
<!DOCTYPE html>
<html>
<head>
<title>Моя первая страница сайта</title>
</head>
<body>
<h1>Обо мне</h1>
<p>Меня зовут <b>Иванов Иван</b>. Я создаю свой сайт.</p>
</body>
</html> - После закрывающегося тега абзаца </p> выполните перевод строки и впишите в новой строке парный тег <h3>. Впишите между тегами какой-либо текст.
<!DOCTYPE html>
<html>
<head>
<title>Моя первая страница сайта</title>
</head>
<body>
<h1>Обо мне</h1>
<p>Меня зовут <b>Иванов Иван</b>. Я создаю свой сайт.</p>
<h3>Мои успехи</h3>
</body>
</html> - После закрывающегося тега подзаголовка </h3> снова сделайте перевод строки, впишите парные тег абзаца <p> и </p> и между данными тегами напишите произвольный текст.
<!DOCTYPE html>
<html>
<head>
<title>Моя первая страница сайта</title>
</head>
<body>
<h1>Обо мне</h1>
<p>Меня зовут <b>Иванов Иван</b>. Я создаю свой сайт.</p>
<h3>Мои успехи</h3>
<p>Освоен базовый синтаксис HTML и создана первая страница будущего сайта.
В процессе обучения использованы материалы сайта kakimenno.ru</p>
</body>
</html> - Из перечисленных в статье тегов остались не изученными два – перевод строки <br> и важнейший тег для создания ссылок <a href=””>. Применим их. Перед последним закрывающимся тегом впишите дескриптор <br>, а между <br> и </p> конструкцию вида <a href=””></a>. У вас должно получится следующее.
<!DOCTYPE html>
<html>
<head>
<title>Моя первая страница сайта</title>
</head>
<body>
<h1>Обо мне</h1>
<p>Меня зовут <b>Иванов Иван</b>. Я создаю свой сайт.</p>
<h3>Мои успехи</h3>
<p>Освоен базовый синтаксис HTML и создана первая страница будущего сайта.
В процессе обучения использованы материалы сайта kakimenno.ru<br>
<a href=””></a></p>
</body>
</html> - Между кавычек в теге <a href=””> впишите адрес страницы, на которую вы будете ссылаться. Перед тегом <a href=””>можно вписать слово Ссылка, а между тегами <a href=””> и </a> вписать текст, который будет отображаться на странице.
<!DOCTYPE html>
<html>
<head>
<title>Моя первая страница сайта</title>
</head>
<body>
<h1>Обо мне</h1>
<p>Меня зовут <b>Иванов Иван</b>. Я создаю свой сайт.</p>
<h3>Мои успехи</h3>
<p>Освоен базовый синтаксис HTML и создана первая страница будущего сайта.
В процессе обучения использованы материалы сайта kakimenno.ru<br>
Ссылка: <a href=”http://kakimenno.ru/”>kakimenno.ru</a></p>
</body>
</html> - На этом создание простейшей страницы для сайта может быть завершено. В принципе, его можно было завершить еще и п.9, но если вы серьезно намерены изучать язык HTML, то дополнительная практика не будет лишней. Сохраните страницу с расширением *.html и можете открыть ее в любом браузере, чтобы просмотреть результаты своей работы. Если все сделано правильно, то вы должны увидеть примерно следующее.
