Просмотров: 53173

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

Закрыть ... [X]

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

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

 

Как создать сайт в блокноте
Для начала необходимо небольшое знакоство с теорией и общими терминами. Подавляющее большинство страниц сайтов представляют собой обычные текстовые документы, которые оформлены специальным образом – языком гипертекстовой разметкой сокращенно называемой 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> на странице. Именно в теге &ltbody> содержится вся информация, которая отображается на странице в браузере.
  • Тег <b>. Является одинарным. Служит для обозначения перевода строки в документе.
  • Тег <a>. Относится к парным тегам, записывается в несколько отличном от других тегов виде <a href=””></a> и служит для создания ссылок. Является важнейшим элементом всей концепции языка HTML, а также интернета в целом.
  • Тег <p>. Относится к парным тегам и состоит из двух частей <p> и </p>. С его помощью оформляется текстовый абзац.
  • Теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Относятся к парным тегам, так как состоят из двух тегов, например <h1> и </h1>. Данные теги служат для создания подзаголовков шести уровней и одновременно показывают важность заключенного в них текста относительно всего документа.
  • Тег <b>. Также является парным тегом, состоящим из двух частей <b> и </b> и устанавливает полужирное оформление шрифта.
Всего насчитывается около ста тегов, но рассмотренных десяти уже хватит для оформления простейшей страницы сайта в блокноте. Основные теги документа,,, распределяются в строгом порядке. Внутри тега остальные дескрипторы могут находится в различных порядках в пределах стандартов языка 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 для оформления страниц.
Источник: http://kakimenno.ru/komputery-i-sotovye/programmnoe-obespechenie/2236-kak-sozdat-sayt-cherez-bloknot.html


Поделись с друзьями



Рекомендуем посмотреть ещё:



Как создать сайт через блокнот? Как сделать правильные сырники из творога

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

ШОКИРУЮЩИЕ НОВОСТИ