Как известно, все великое всегда начинается с малого. Если вас заинтересовал ответ на вопрос как создать сайт через блокнот, то наверняка вы где-то слышали о такой возможности. Это, действительно, возможно. Но стоит сразу оговориться, что создавать современный динамический интерактивный сайт через блокнот в настоящее время скорее всего никто не будет, так как для этого существуют специальные программы, многократно ускоряющие и упрощающие процесс разработки. А вот создать полноценную веб-страницу вполне возможно.
Для начала необходимо небольшое знакоство с теорией и общими терминами. Подавляющее большинство страниц сайтов представляют собой обычные
, которые оформлены специальным образом – языком гипертекстовой разметкой сокращенно называемой HTML. Некоторые причисляют
к языкам программирования, но это не верно.
HTML – это всего лишь способ стандартизации разметки документов, который однозначно интерпретируется браузерами для отображения на экранах компьютеров в удобной для пользователей форме. Основным инструментом языка HTML являются специальные структурные элементы, с помощью которых и оформляется документ. Их называют дескрипторами или тегами.
Таким образом, тег начинается знаком < после которого следует название тега table и вся конструкция завершается знаком >. Теги бывают парными как выделение текста жирным шрифтом и и непарными как перевод строки
. В случае использования парных тегов обязательно использование как открывающегося тега , так и закрывающегося . Закрывающимся тегом является дескриптор со знаком косой черты /.Рассмотрим основные виды тегов и их назначение.
- Элемент
.
Устанавливается в самое начало страницы и служит для указания браузеру того, как интерпретировать данный документ. Является не обязательным, но очень желателен на странице для избежания возможных проблем с ее отображением.
- Тег
.
Является парным тегом и состоит из двух частей и . Каждая страница сайта начинается с этого тега и заканчивается им.
- Тег
.
Также является парным тегом и состоит из двух частей и . Внутри данного тега размещается различная важная информация о странице: ее заголовок, ссылки на используемые стили оформления, подключаемые скрипты, специальные метаданные.
- Тег
</b>.
</i> <title> и и располагается внутри тега . Данный тег определяет заголовок страницы, с которым она будет видна в браузере.
- Тег
.
Является парным тегом, состоит из двух частей и и следует за тегом на странице. Именно в теге <body> содержится вся информация, которая отображается на странице в браузере.
- Тег .
Является одинарным. Служит для обозначения перевода строки в документе.
- Тег
.
Относится к парным тегам, записывается в несколько отличном от других тегов виде и служит для создания ссылок. Является важнейшим элементом всей концепции языка HTML, а также интернета в целом.
- Тег
.
Относится к парным тегам и состоит из двух частей . С его помощью оформляется текстовый абзац.
- Теги
,
,
,
,
,
.
Относятся к парным тегам, так как состоят из двух тегов, например и
. Данные теги служат для создания подзаголовков шести уровней и одновременно показывают важность заключенного в них текста относительно всего документа.
- Тег .
Также является парным тегом, состоящим из двух частей и и устанавливает полужирное оформление шрифта.
Всего насчитывается около ста тегов, но рассмотренных десяти уже хватит для оформления простейшей страницы сайта в блокноте. Основные теги документа , , , <body> распределяются в строгом порядке. Внутри тега <body> остальные дескрипторы могут находится в различных порядках в пределах стандартов языка HTML. Проще всего это понять на примере создания простой веб-страницы.<ol><li><span>Запустите Блокнот и в самой первое его строке установите элемент <!DOCTYPE html>, подсказывающий браузеру как следует интерпретировать ваш документ.<p> <!DOCTYPE html></p></span></li><li><span>Сделайте перевод строки и добавьте парный тег <html>. Переведите закрывающийся тег </html> на две строки вниз.<p> <!DOCTYPE html><br><html></p></span></li><li><span>Добавьте парный тег <head> в строке между тегами <html> и переведите закрывающийся тег </head> на две строки вниз.<p> <!DOCTYPE html><br><html><br><head></p><p></head><br></html></p></span></li><li><span>В строке между тегами <head> и </head> напишите парный тег <title> в одну строку.
Введите заголовок вашей веб-страницы между тегами и . Например, такой.
Моя первая страница сайта
Установите курсор в строке после закрывающегося тега и выполните перевод строки. Впишите в появившуюся пустую строку парный тег .
Моя первая страница сайта
Сделайте двойной перевод между внутри тегами и . В появившуюся строку впишите парный тег заголовка . Наберите внутри тега подзаголовок страницы.
Моя первая страница сайта
Обо мне
После закрывающегося тега заголовка сделайте перевод строки и в новой строке установите парные теги абзаца . Впишите между ними текст. Например, так.
Моя первая страница сайта
Обо мне
Меня зовут Иванов Иван. Я создаю свой сайт.
Заключите имя и фамилию в парный тег для выделения их жирным шрифтом.
Моя первая страница сайта
Обо мне
Меня зовут Иванов Иван. Я создаю свой сайт.
После закрывающегося тега абзаца выполните перевод строки и впишите в новой строке парный тег . Впишите между тегами какой-либо текст.
Моя первая страница сайта
Обо мне
Меня зовут Иванов Иван. Я создаю свой сайт.
Мои успехи
После закрывающегося тега подзаголовка снова сделайте перевод строки, впишите парные тег абзаца и между данными тегами напишите произвольный текст.
Моя первая страница сайта
Обо мне
Меня зовут Иванов Иван. Я создаю свой сайт.
Мои успехи
Из перечисленных в статье тегов остались не изученными два – перевод строки
и важнейший тег для создания ссылок . Применим их. Перед последним закрывающимся тегом впишите дескриптор
, а между
и конструкцию вида . У вас должно получится следующее.
Моя первая страница сайта
Обо мне
Меня зовут Иванов Иван. Я создаю свой сайт.
Мои успехи
Освоен базовый синтаксис HTML и создана первая страница будущего сайта.
В процессе обучения использованы материалы сайта сайт
Между кавычек в теге впишите адрес страницы, на которую вы будете ссылаться. Перед тегом можно вписать слово Ссылка, а между тегами и вписать текст, который будет отображаться на странице.
Моя первая страница сайта
Обо мне
Меня зовут Иванов Иван. Я создаю свой сайт.
Мои успехи
Освоен базовый синтаксис HTML и создана первая страница будущего сайта.
В процессе обучения использованы материалы сайта сайт
Ссылка: сайт
На этом создание простейшей страницы для сайта может быть завершено. В принципе, его можно было завершить еще и п.9, но если вы серьезно намерены изучать язык HTML, то дополнительная практика не будет лишней. Сохраните страницу с расширением *.html и можете открыть ее в любом браузере, чтобы просмотреть результаты своей работы. Если все сделано правильно, то вы должны увидеть примерно следующее.
Если после прочтения статьи решимость в создании сайта у вас не иссякла, то обязательно ознакомтесь с полным синтаксисом языка HTML, а также изучите использование каскадных стилей CSS для оформления страниц.
Либо в бесплатных или платных конструкторах. Но все же, в начале времен 1990-2000 годы сайты создавались преимущественно на HTML, без использования каких-либо обращений к базе данных. Различные программы, позволяющие редактировать HTML + CSS в реальном времени, например, Dreamweaver — появились только в самом конце 20-го века. Поэтому сайты создавались в блокноте и других подобных редакторов. Хоть сейчас и существует множество удобных способов сделать качественный ресурс, создание сайта при помощи блокнота позволяет выучить основы построения страницы и основы HTML в целом
.
Итак, для того, чтобы создать сайт через блокнот вам нужно для начала создать HTML файл. Сделать это можно следующим образом:
Заходите в меню Пуск -> Все программы -> Стандартные -> Блокнот
И сразу же сохраним его в HTML формате: В блокноте нажмите: Файл -> Сохранить как
И напишите название файла, к примеру, index.html
Теперь мы можем приступать непосредственно к созданию HTML верстки в блокноте. Для начала, напишем основную разметку HTML кода, вы можете ее сразу скопировать и вставить, чтобы не тратить время попусту.
Мой самый прекрасный сайт
Мой первый сайт
По сути это основные элементы, из которых и состоит любой веб-ресурс. Все, что находится в скобках называется HTML-тегом или просто тегом. Все HTML теги открываются, содержат в себе какую-то информацию и затем закрываются. Есть и другие теги, которым не нужен закрывающий тег, но о них мы поговорим позже. Сейчас нам куда интересней ответ на вопрос «как же создать сайт в блокноте?».
Давайте рассмотрим каждый из них, чтобы мы могли легко научиться создавать сайты в блокноте
HTML-теги для создания сайта через блокнот
- DOCTYPE — позволяет браузеру определить, что за тип документа он открыл, поскольку у HTML-документа есть множество версий.
- html — тег, которым открывается и закрывается вся веб-страница
- head — хед (или голова) документа. Данный тег несет в себе информацию для браузера и не отображается на web-странице. В нем содержаться по большей части информация для браузера и , стили CSS, которые мы пропишем чуть позже и различные скрипты.
- meta — указывает браузеру и поисковой системе определенную информацию. В данном случае тег мета указывает браузеру о необходимости использования кодировки UTF-8 (для того, чтобы правильно отображался русский язык). В других случаях этот тег может указывать какие-либо другие данные, например, автор статьи, описание страницы, ключевые слова.
- body — боди (или тело) документа. В этом теге содержится все то, что мы в данный момент видим на странице, можно сказать, что он включает в себя скелет или каркас веб-страницы.
- h1 — Главный заголовок на странице, который оказывает большое влияние, например на
- p — параграф — текст, который мы видим на странице
Получился у нас конечно, не самый лучший в мире веб-ресурс, но надо ведь с чего-то начинать?:)
В этой статье мы не создавали никакого меню, если вам интересно как же сделать горизонтальное меню для вашего сайта, то добро пожаловать в .
Теперь давайте придадим ему «красивостей», напишем несколько стилей внутри тега
Body {
background: #F2F2F2;
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
h1{
color: #4C4C4C;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #BEBEBE;
}
p{
font:italic;
}
В итоге наш пример сайта сделанного в блокноте в коде выглядит так
Мой самый прекрасный сайт
Мой первый сайт
Еще совсем чуть-чуть, и я научусь делать самые лучшие сайты на свете.
Теперь вы научились создавать простые сайты в блокноте. Попробуйте использовать другие стили и теги для того, чтобы понять как же устроены сайты.
UPD3.
Когда вы уже создадите сайт и захотите его разместить в интернете, вам понадобится хостинг, я написал как выбрать сервер и сделал подборку из лучших.
Думаете, как создать HTML-страницу? Для этого нужно потратить несколько часов, и вы будете знать А создать свою первую страницу сможете за 5 минут.
HTML расшифровывается как HyperText Markup Language. В переводе это означает "язык гипертекстовой разметки". Важно понимать, что HTML - это не язык программирования, а именно разметки сайта.
Все современные браузеры умеют распознавать его. Затем они отображают информацию в удобном виде для пользователя, как заранее было задумано автором.
В этом языке используются специальные теги. Каждый тег выполняет свою функцию. Их очень много. В идеале нужно выучить все. Но для начинающего базовых знаний вполне достаточно.
Основы HTML
Перед тем как создать HTML-страницу, нужно знать, из чего она состоит. В этом языке есть два понятия: элемент и тег.
Для того чтобы указать, где этот элемент начинается и закрывается, используются открывающий и закрывающий тег. Выглядит это так.
<открывающий тег>содержимое
Как видите, открывающий и закрывающий тег отличаются только "/".
Весь HTML-документ представляет собой набор этих элементов. Существуют определенные требования к структуре документа. Всё содержимое страницы должно находиться между двумя тегами и . Когда вы будете писать код, возьмите себе за привычку сразу проставлять открывающийся и закрывающийся тег.
Также запомните, что структура языка HTML имеет свою иерархию. Иначе она называется вложенность. является самым главным, поскольку все остальные находятся внутри его.
У HTML есть два дочерних элемента:
В блоке HEAD указывается различная служебная информация. Эта информация в браузер не выводится. Например, указания для разработчиков, для любых программ, для роботов и многое другое.
Самое главное - здесь нет контента.
В разделе BODY указывается содержание документа, которое будет отображено пользователю.
Учитесь сразу делать открытые и закрытые теги, поскольку может быть и по 10 вложенных элементов. Кроме этого, для удобства рекомендуется вложенные теги делать с отступом. Например, вот так.
Так делают, чтобы равные по значимости теги были на одном уровне, а дочерние - "внутри". Так намного удобнее для восприятия и поиска нужного куска кода. Иначе можно запутаться. Но для экономия места именно и body можно делать без отступов. Так поступают, чтобы у всех остальных не было лишнего отступа. Всё остальное желательно отделять.
Как создать простую страницу на HTML
Для написания кода вам нужен какой-нибудь редактор. Их очень много. Популярными являются Notepad++ и Adobe Dreamweaver. Также можно использовать и блокнот.
Вот так выглядит редактор Notepad++.
Это очень удобный редактор и при этом бесплатный. Вышеуказанный Adobe Dreamweaver является платным. Отличие редакторов, предназначенных для написания от блокнота - в том, что специальные теги подсвечиваются. Если он не подсветился, значит, вы написали неправильно.
Для того чтобы подсветка соответствовала языку, ее нужно указать в настройках.
Давайте рассмотрим, как создать страницу HTML в блокноте. То есть закончим техническую часть и потом непосредственно перейдем к изучению тегов.
Как создать веб-страницу в блокноте HTML
Для начала откройте блокнот.
Затем наберите в нем то, что указано на следующем скриншоте.
Привыкайте писать руками, а не просто копировать. Когда вы пишите руками, вы лучше запоминаете всю базу тегов.
После этого файл можно открывать в браузере и любоваться результатом. Теперь вам должно быть понятно, как создать веб-страницу в блокноте HTML.
Всемирный консорциум W3C
Существует такая организация, как W3С, которая разрабатывает и внедряет все стандарты для интернета. Все браузеры подчиняются этим стандартам и обрабатывают разметки (коды) страниц согласно этим правилам.
На официальном сайте разработчиков языка HTML можно найти таблицу со всеми тегами и правилами их использования. В рамках данной статьи мы рассматриваем самые основные.
Вы можете подумать, какие могут быть правила? Все описанные теги имеют свою рекомендацию. Их несколько:
- Необязательный тег.
- Запретный.
- Пустой тег.
- Устаревший
- Утерянный.
Теги в HTML
Перед тем как создать HTML-страницу, нужно разобраться с тем, что должно быть в служебной части HEAD.
В области HEAD есть как обязательные, так и необязательные теги. К обязательному тегу относится заголовок. Он обозначается
Заголовок. Он присваивается всему документу. И то, что вы видите в результатах поисковой системе Google, - это тег title.Перейдем к разделу BODY. Существуют элементы, которые отображаются в браузере, а есть и неотображаемые. Например, комментарии не отображаются пользователю. Их можно использовать для заметок или же для подсказки другим сотрудникам, если вы работаете в команде.
Обозначается они как
Всё, что находится между , расценивается программой именно так. Обратите внимание, что нельзя вложить тег-комментарий в другой тег-комментарий. Поскольку как только вы откроете .
Пример такой вложенности:
продолжение первого комментария -->
Результатом в браузере будет следующее
продолжение первого комментария -->
А вот кусок
не будет виден. Второй открывающийся тег
