» » » Как создать сайт через блокнот?

Как создать сайт через блокнот?

Как создать сайт через блокнот?

Как известно, все великое всегда начинается с малого. Если вас заинтересовал ответ на вопрос как создать сайт через блокнот, то наверняка вы где-то слышали о такой возможности. Это, действительно, возможно. Но стоит сразу оговориться, что создавать современный динамический интерактивный сайт через блокнот в настоящее время скорее всего никто не будет, так как для этого существуют специальные программы, многократно ускоряющие и упрощающие процесс разработки. А вот создать полноценную веб-страницу вполне возможно.

 
Как создать сайт в блокноте
Для начала необходимо небольшое знакоство с теорией и общими терминами. Подавляющее большинство страниц сайтов представляют собой обычные текстовые документы, которые оформлены специальным образом – языком гипертекстовой разметкой сокращенно называемой 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> и устанавливает полужирное оформление шрифта.
Всего насчитывается около ста тегов, но рассмотренных десяти уже хватит для оформления простейшей страницы сайта в блокноте. Основные теги документа <html>, <head>, <title>, <body> распределяются в строгом порядке. Внутри тега <body> остальные дескрипторы могут находится в различных порядках в пределах стандартов языка HTML. Проще всего это понять на примере создания простой веб-страницы.
  1. Запустите Блокнот и в самой первое его строке установите элемент <!DOCTYPE html>, подсказывающий браузеру как следует интерпретировать ваш документ.

    <!DOCTYPE html>

  2. Сделайте перевод строки и добавьте парный тег <html>. Переведите закрывающийся тег </html> на две строки вниз.

    <!DOCTYPE html>
    <html>

    </html>

  3. Добавьте парный тег <head> в строке между тегами <html> и переведите закрывающийся тег </head> на две строки вниз.

    <!DOCTYPE html>
    <html>
    <head>

    </head>
    </html>

  4. В строке между тегами <head> и </head> напишите парный тег <title></title> в одну строку.

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    </html>

  5. Введите заголовок вашей веб-страницы между тегами <title> и </title>. Например, такой.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Моя первая страница сайта</title>
    </head>
    </html>

  6. Установите курсор в строке после закрывающегося тега </head> и выполните перевод строки. Впишите в появившуюся пустую строку парный тег <body>.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Моя первая страница сайта</title>
    </head>
    <body></body>
    </html>

  7. Сделайте двойной перевод между внутри тегами <body> и </body>. В появившуюся строку впишите парный тег заголовка <h1>. Наберите внутри тега <h1> подзаголовок страницы.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Моя первая страница сайта</title>
    </head>
    <body>
    <h1>Обо мне</h1>
    </body>
    </html>

  8. После закрывающегося тега заголовка </h1> сделайте перевод строки и в новой строке установите парные теги абзаца <p> и </p>. Впишите между ними текст. Например, так.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Моя первая страница сайта</title>
    </head>
    <body>
    <h1>Обо мне</h1>
    <p>Меня зовут Иванов Иван. Я создаю свой сайт.</p>
    </body>
    </html>

  9. Заключите имя и фамилию в парный тег <b> для выделения их жирным шрифтом.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Моя первая страница сайта</title>
    </head>
    <body>
    <h1>Обо мне</h1>
    <p>Меня зовут <b>Иванов Иван</b>. Я создаю свой сайт.</p>
    </body>
    </html>

  10. После закрывающегося тега абзаца </p> выполните перевод строки и впишите в новой строке парный тег <h3>. Впишите между тегами какой-либо текст.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Моя первая страница сайта</title>
    </head>
    <body>
    <h1>Обо мне</h1>
    <p>Меня зовут <b>Иванов Иван</b>. Я создаю свой сайт.</p>
    <h3>Мои успехи</h3>
    </body>
    </html>

  11. После закрывающегося тега подзаголовка </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>

  12. Из перечисленных в статье тегов остались не изученными два – перевод строки <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>

  13. Между кавычек в теге <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>

  14. На этом создание простейшей страницы для сайта может быть завершено. В принципе, его можно было завершить еще и п.9, но если вы серьезно намерены изучать язык HTML, то дополнительная практика не будет лишней. Сохраните страницу с расширением *.html и можете открыть ее в любом браузере, чтобы просмотреть результаты своей работы. Если все сделано правильно, то вы должны увидеть примерно следующее.

    созданная страница сайтасозданная страница сайта

Если после прочтения статьи решимость в создании сайта у вас не иссякла, то обязательно ознакомтесь с полным синтаксисом языка HTML, а также изучите использование каскадных стилей CSS для оформления страниц.