Создание сайта в блокноте MEIN ARBEIT
   

Создание сайта в блокноте

Дата: 10/06/2015

Здравствуйте, дорогие пользователи и будущие вебмастера. Изучив мои статьи по теме HTML, многие из вас попросили меня более подробно разжевать тему "Создание сайта в блокноте", чтобы всё было понятно, даже ребёнку. Подозреваю, что вы были не внимательны к моим статьям, но давайте не будем о грустном, и я с удовольствием вам снова расскажу об этой технологии и продемонстрирую примеры, которые для вас станут образцами создания сайта в блокноте. И тогда часто мучивший вас вопрос, как создать сайт в блокноте, отпадёт сам собой.

Пошаговое создание сайта в блокноте

Надеюсь, что вы уже знаете, где находится этот самый блокнот? Если же нет, то ищите эту программку в меню WINDOWS "Пуск", выбираем "Программы" и уже там ищем сам блокнот. Он может ещё находиться в подменю "Стандартные" в том же разделе "Программы". Но есть самый простой способ запустить блокнот. Нужно в меню "Пуск" кликнуть по ссылке "Выполнить" и в появившейся строке набрать notepad, и нажать enter. Блокнот появится! Если, конечно, он у вас был установлен в вашей операционной системе. Думаю, что вы справились с этой простой задачей, и блокнот перед вами, поэтому можно переходить к следующему нашему шагу, а именно, к созданию нашей первой HTML страничке.

Простой пример создания сайта в блокноте

Прежде чем перейти к первому примеру, я сделаю небольшое вступление, которое вам облегчит жизнь. Я говорю про комментарии в самом документе HTML. Делается он следующим образом.

<!-- Это мой комментарий в HTML документе. Этот комментарий, если вы его перенесёте в HTML документ, виден не будет для пользователей, просматривающих вашу страницу. -->

Ну, а теперь можно и написать первую HTML страничку, которую я буду снабжать пошаговыми комментариями.

<document HTML>
<!-- Первая строка обозначает, что наш документ принадлежит HTML, а именно, пятой версии. -->
<html>
<!-- Вторая строка обозначает начало HTML документа. Внизу вы увидите закрывающий тег. Он обязателен. -->
<head>
<!-- Тег HEAD обязателен. Он создаёт головную часть HTML документа, где размещаются метатеги и скрипты со стилями. -->
<title> Первая страница! </title>
<!-- Метатег TITLE - обязательный метатег для всех HTML документов. Без него поисковики не индексируют страницы, поэтому всегда включайте метатег TITLE в каркас HTML документа. -->
</head>
<body>
<!-- Тег BODY нужен, как основа HTML документа. Внизу есть закрывающий тег, он обязателен, как и все здесь имеющиеся. Между этими тегами вставляются большинство тегов, которые используются в написании текста с картинками и таблицами. -->
<h2> Добро пожаловать на мою первую страницу! </h2>
<!-- Это тег заголовка второго уровня. Всего уровней шесть, но чтобы управлять этими заголовками, вам надо изучить стили CSS. -->
<p> Меня зовут Костя, и я создал свою первую страничку, которую скоро размещу в интернете. По всем вопросам обращайтесь по электронной почте. Если не буду занят, отвечу всем. </p>
<!-- Этот тег используется довольно часто и считается основным тегом используемым в HTML документах, чтобы им управлять, надо изучить стили в CSS. -->
</body>
</html>

Вы можете скопировать этот пример и вставить в блокнот.

Создание сайта в блокноте заключение

Вставили этот пример в свой блокнот? Если да, то выполните следующие действия, чтобы наш пример стал полноценным HTML документом. Нажмите в блокноте, в панеле инструментов "Файл", выберите из списка функцию "Сохранить как", нажимайте. Перед вами должно появиться окно с сохранением документа. Курсор будет находиться в строке "Имя файла:". Напишите в этой строчке следующее - index.html и нажмите "Сохранить". Поздравляю! Ваша первая HTML страничка готова. Запустите её и проверьте на работоспособность. Если она не отображает исходный текст, это может означать только одно: в HTML коде допущена синтаксическая ошибка, то есть, забыли где-то поставить угловую скобку или тег. Проверьте! Во избежание кракозябр при сохранении документа в блокноте выберите кодировку UTF-8. Это универсальная кодировка, которая отображает все символы, как они есть.

Ещё один пример создания сайта в блокноте

Верю, что у вас всё получилось и вы теперь обладаете своей первой страничкой и немного продвинулись в создании сайта с помощью блокнота. Но давайте сделаем ещё одну страничку, которая будет дополнением к первой и которая будет связана с ней.

<document HTML>
<!-- Вы уже знакомы с началом HTML документа, поэтому пока без комментариев, кроме этого. -->
<html>
<head>
<title> Вторая страница! </title>
</head>
<body>
<h3> Это мои картинки и ссылки. </h3>
<p> <img src="http://mein-arbeit.narod.ru/pic/gold.gif" alt="Золото">
<!-- Тег IMG используется при вставке картинок в HTML документ. Атрибут SRC предназначен для прописания пути к файлу с картинкой. В нашем случае картинка загружается с сайта MEIN ARBEIT. Дополнительно о вставке картинок вы можете узнать, прочитав статью Вставка картинок в HTML. -->
<img src="http://mein-arbeit.narod.ru/pic/warning.gif" alt="Предупреждение"> <br>
<!-- Здесь мы использовали тег BR, который перекидывает текст, картинки, на следующую строчку. Этот тег похож на функцию клавиши ENTER в текстовых редакторах. >
<img src="http://mein-arbeit.narod.ru/pic/warning.gif" alt="Предупреждение"> </p> <br>
<a href="index.html">Вернуться на первую страницу!</a>
<!-- a - это один из главных тегов в HTML документе. Он создаёт гиперссылки и связывает ваши HTML страницы воедино. Ссылки в HTML самый главный инструмент, поэтому их возможности надо изучить досконально. -->
</body> <br>
</html>

Создайте новый документ в блокноте и скопируйте данный пример в него. Затем сохраните этот пример, как файл с названием 2.html. Поместите его в папку, где у вас находится ваш первый файл под названием index.html, и затем запустите ваш файл с названием 2.html. У вас должно появиться две маленькие картинки и ссылка на вашу первую страничку.

Подводим итог

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

Желаю вам удачи! Администратор сайта MEIN ARBEIT!


Рекомендую прочесть!


Список статей по теме...




   
Бесплатный Хостинг Яндекс.Метрика