Пример создания html страницы в блокноте. Как создавать веб-страницу

2016-11-06


Создаем веб-страницу и размещаем ее на локальном веб-сервере

Здравствуйте уважаемый посетитель!

Эта статья о том, как создать веб-страницу и разместить ее на виртуальном хосте локального веб-сервера.

А, понадобится нам для этого, как показано на картинке: локальный веб-сервер, текстовый редактор, язык описания структуры веб-страниц HTML и язык стилей CSS.

  • Создание виртуального хоста на локальном веб-сервере
  • Создание файла веб-страницы с проверкой работы локального веб-сервера
  • Составление каркаса HTML-страницы
  • Исходные файлы сайта

Создание виртуального хоста на локальном веб-сервере

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

Здесь, будет рассматриваться работа с локальным веб-сервером на примере сборки программ Denwer (Денвер). Но, это не принципиально, так как все это можно делать и на других аналогичных программных продуктах.

После установки Денвера в директории "WebServers/home/" уже имеются сконфигурированные виртуальные хосты, такие как, "localhost", "test1.ru", "custom". Создадим для нашего сайта новый хост и назовем его, к примеру, "newsite.local", подразумевая под этим именем то, что это новый сайт и размещен он на локальном сервере (не стоит из-за возможной путаницы в дальнейшем, присваивать именам хоста реальные доменной зоны, такие как "ru", "com" и т.п.


В этой папке "newsite.local" создадим новую папку "www", в которой и будем размещать файлы сайта, а также, скопируем сюда же из существующих хостов, вспомогательные папки "subdomain" и "cgi".


После проделанных операций, необходимо перезапустить сервер для того, чтобы он внес в свою работу соответствующие изменения. Это можно сделать через ярлык "Restart Denwer", который может быть создан при установке Денвера, либо (если его не оказалось) через специальный файл Restart.exe в папке "denwer".

Создание файла веб-страницы с проверкой работы локального веб-сервера

Ну, а теперь перейдем к созданию веб-страницы. Для этого, в первую очередь, с помощью текстового редактора Notepad++ создадим файл "index.html", в котором будет находиться код нашей главной страницы. О том, как установить текстовый редактор показано в статье Устанавливаем текстовый редактор nodepad++ .

Следует отметить, что при открытии сайта с адресом, в котором указано доменное имя, без каких-либо других директорий, браузеры всегда открывают файл, находящийся в корневом каталоге под именем "index". Поэтому, мы и начнем создавать страницы нашего сайта с этого файла. В данном случае он будет иметь расширение "html", так как его код будет основан на HTML.

Но, перед этим, для того, чтобы избежать в дальнейшем лишних недоразумений с отображением HTML-страниц, желательно, в самом начале проверить кодировку, которая установлена в редакторе Notepad++ при открытии новых документов.

Это можно сделать следующим образом: через меню "Опции" открыть окно "Настройки" и в параметрах "Новый документ" проверить, чтобы была установлена универсальная кодировка "UTF-8 без метки BOM", как показано ниже.


Теперь создадим новый файл через меню "Файл", нажав на кнопку "Новый". В открывшейся новой вкладке для проверки работы веб-сервера и правильности установок кодировки, напишем какую-нибудь фразу, к примеру, "Проверка" (такая проверка не является необходимой при создании HTML-страницы и приводится здесь только лишь для лучшего понимания выполняемых действий).

Теперь сохраним этот файл в папке "www" вновь созданного хоста "newsite.local". Для этого, через меню "Файл" выберем "Сохранить как", введем имя файла "index.html", укажем нужную папку и нажмем "Сохранить".


Далее, проверим, как отображается наша страница. Для этого, обновим браузер, введя в его адресное поле имя нашего хоста "newsite.local". Если все сделано правильно, на экране должна появиться надпись с какими-то иероглифами, как показано на скриншоте (еще раз отмечу, что такие подробности здесь рассматриваются только для тех, кто это делает в первый раз, чтобы наглядно показать, что обычно получается при неправильном соответствии кодировок. А вообще, эту проверку можно пропустить и сразу перейти к следующему шагу).


Такие непонятные знаки появились из-за несоответствия кодировок браузера и отображаемой страницы. Для того, чтобы впредь такого не происходило, необходимо в дополнительном конфигурационном файле ".htaccess" веб-сервера указать нужную кодировку.

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

Для того, чтобы это сделать, надо аналогичным образом, как и с "index.html", в редакторе Notepad++ создать новый файл и сохранить его в той же папке под именем ".htaccess". При этом в самом файле необходимо написать следующую строку "AddDefaultCharset UTF-8", как показано на скриншоте.


Ну, а теперь, если снова обновить браузер с адресом нашего хоста "newsite.local", то можно убедиться в появлении на странице того текста, который изначально был написан нами в файле "index.html".

Это означает, что наша страница, размещенная на созданном хосте веб-сервера при открытии браузером отображается корректно, что подтверждает правильную работу веб-сервера и правильную установку кодировок.

В случае, если этого не получилось, то прежде, чем переходить к следующим шагам, нужно вернуться назад и устранить возникшую проблему.


Составление каркаса HTML-страницы

После того, как мы убедились в работоспособности локального веб-сервера и в правильном отображении нашей веб-страницы, перейдем к наполнению ее кодом HTML.

Но, для того, чтобы заниматься написанием HTML-страниц, необходимо с начала познакомиться с основами языка описания структуры веб-страниц HTML.

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

Несомненно, видеокурсы, которые наглядно показывают и разъясняют обучающий материал, очень полезны для общего ознакомления и понимания предмета обучения. Но, все же, они не всегда удобны для использования в качестве справочного источника информации, когда периодически нужно что-то уточнять по ходу работы.

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

Поэтому, при создании веб-страниц удобно пользоваться справочниками. Какими справочниками лучше пользоваться? Очень сложно однозначно ответить на этот вопрос, наверное, у каждого имеются свои предпочтения, тем более, что в сети интернет их имеется большое множество.

От себя, могу посоветовать такой информационный ресурс, как онлайн справочник "http://www.puzzleweb.ru/html/all_tags.php" . Особенность его в том, что он дает не только достаточно подробную справочную информацию по основным языкам, используемых в сайтостроении, таким, как HTML, CSS, JavaScript, PHP, но в нем имеются разделы самоучителя, в которых очень сжато, но в то же время довольно познавательно объясняются основы этих языков с приведением наглядных примеров.

Также, можно отметить справочный интернет-ресурс "https://webref.ru/" , в котором имеется довольно полная информация по современным версиям HTML5 и CSS3, куда также включены учебные курсы по веб-технологиям. К этому, можно добавить справочник "http://htmlbook.ru/html/" , из которого тоже можно подчерпнуть немало полезной информации и он также может быть полезен при написании веб-страниц.

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

А теперь, перейдем к составлению каркаса HTML-страницы, т.е. к формированию ее основных блоков. Ниже, показано, как будет выглядеть наш каркас, построенный на основе дизайн-макета сайта, созданного ранее в статье Создаем дизайн-макет веб-страницы .

  2. "utf-8" />

    <span><b>Заголовок страницы </b> </span>

    "Description" content ="Краткое описание содержания страницы" >

  4. "wrapper" >

    Шапка

    Ротатор

    Основное содержание

    Сайдбар

    Подвал

Для того, чтобы записать HTML-код каркаса в файл "index.html", его нужно открыть в текстовом редакторе Notepad++ и набрать код, пользуясь приведенным примером, либо его туда скопировать.

Кроме того, в конце каждой статьи, начиная с этой, будет прилагаться архив исходных файлов папки "www", создаваемого сайта на текущее состояние. Поэтому, можно просто воспользоваться этими дополнительными материалами и скачать файл "index.html" по ссылке, приведенной в конце этой статьи.

Вот так должен выглядеть HTML-код файла "index.html" в текстовом редакторе Notepad++, составленный в соответствии с приведенным примером.


Рассмотрим, более подробно то, что изображено на рисунке.

Первая строка является очень важной, так как указывает браузеру тип документа, для того, чтобы он мог правильно ее понимать. Необходимость этой записи обусловлено тем, что HTML существует в нескольких версиях, которые различаются не только наличием, или отсутствием каких-либо элементов, но и синтаксисом языка.

Поэтому, если не будет такого указания, то браузер, попросту "запутается" при обработке страницы. В данной строке, в частности указано, что документ создан на языке html версии 5.

Более подробно об элементе можно посмотреть в справочнике htmlbook.ru по ссылке "http://htmlbook.ru/html/!doctype" .

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

Теги бывают форматирующие и специальные. Форматирующие теги отвечают за создание элементов видимой части страниц, таких как абзацы, заголовки, ссылки, картинки и т.д.

Специальные же теги нужны для сообщения браузеру и поисковым системам информации о документе, так называемые метаданные, например, в какой кодировке сделана страница, какой у нее должен быть заголовок, какие таблицы стилей должны подключаться и т.п.

Кроме того, теги подразделяются на одинарные и парные. Парные теги всегда состоят из двух частей, в первой части они открываются, во второй, обозначенной символом слэш "/", закрываются (открывающийся и закрывающийся теги). То, что находиться между ними и будет обрабатываться в соответствии с правилами использования этого элемента.

Таким образом, во 2-ой и 17-ой строках указан тег "html", который, по существу представляет контейнер со всем содержимом страницы. Этот тег всегда указывается в таком порядке, что любой HTML-код должен быть внутри этого контейнера.

Следующая часть каркаса представляет собой область "head", в который размещаются все специальные теги. Эта область охватывает строки с 3 по 7. Содержащаяся в этой области информация является вспомогательной, и не отображается браузером, за исключением заголовка "title", который показывается на вкладке браузера.

В качестве таких специальных тегов в строке 4 размещен метатег с атрибутом "charset", указывающий на кодировку "utf-8", в строке 5 - тег "title", определяющий заголовок документа, а в 6-ой строке - метатег с атрибутами "name" и "content", предназначенный для краткого описания содержания страницы.

В дальнейшем, по мере выполнения верстки, область "head" будет дополнена и другими специальными элементами.

Следующая область "body", охватывающая строки с 8 по 16, предназначена для размещения форматирующих элементов, отвечающих за создание видимой части веб-страниц.

В соответствии с дизайн-макетом, в нашем случае, область "body" состоит из пяти основных блоков: "Шапка", "Ротатор", "Основное содержание", "Сайдбар" и "Подвал", где:

  • в 10-ой строке содержится блок "Шапка" (элемент "header");
  • в 11-ой строке - блок "Ротатор" (эл-т "section");
  • в 12-ой строке - блок "Основное содержание" (эл-т "main");
  • в 13-ой строке - блок "Сайдбар" (эл-т "aside");
  • в 14-ой строке - блок "Подвал" (эл-т "footer");

При этом, размещенные здесь блоки показаны в очень укрупненном виде. Например, "header" и "footer" будут включать в себя также (в соответствии с дизан-макетом) навигационное меню, а "main", в свою очередь, будет разбиваться на блоки, содержащие статьи и комментарии. И такое деление на более мелкие блоки будет продолжаться до тех пор, пока полностью не будет выполнена вся разметка HTML-страницы.

Что касается парного тега

, находящегося в 9 и 15 строках, то он здесь выполняет функцию блока "обвертки" для задания минимальной и максимальной ширины страницы в заданных пределах резиновой верстки. Этому тегу присвоен атрибут класса "wrapper" для возможности в дальнейшем назначать ему соответствующие стили CSS.

Следует обратить внимание на то, что раньше, до появления 5-ой версии HTML, для создания каркаса обычно использовались блочные элементы "div". Можно и сейчас использовать их для этих целей, в таком виде сайты по-прежнему смогут нормально работать.

Поэтому, сейчас, когда HTML5 полноправно занял основное место при разработке сайтов, постараемся с самого начала шагать в ногу со временем, и по возможности, использовать новые элементы этого языка.

Если сейчас в браузере открыть созданную страницу, то можно увидеть только слова, которые содержатся в тегах, размещенных в контейнере "body". Текст же, находящийся в области "head", как было отмечено выше, отображаться не будет. Исключением является заголовок "title" (в нашем случае "Заголовок страницы"), который будет виден на вкладке браузера.


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

Исходные файлы сайта

Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов .

Сайт на самом деле представляет собой набор файлов из кода на нескольких языках. А код можно писать в любом нормальном текстовом редакторе, даже в блокноте. Конечно, лучше использовать более продвинутый софт, вроде Notepad++ или полноценных программ для разработки. Ну да ладно, давайте посмотрим, как сделать сайт в блокноте средствами html и css.

Как создать сайт с нуля на html в блокноте — пошаговая инструкция

А вот оно и наше ключевое слово – HTML. Именно с этого языка начинается создание сайта. Без него невозможно представить себе веб-разработку. Это все равно что пытаться сварить суп без воды. Не спешите закрывать страницу, если вы абсолютный ноль в html. В этой пошаговой инструкции мы вместе создадим простой сайт, а я попробую объяснить те куски кода, которые мы будем добавлять в блокнот.

Шаг 1. Создание файлов

Создание html сайта в блокноте нужно начать с того, что создать два текстовых документа в какой-нибудь пустой папке. Один должен получить расширение.html, а второй.css. Имена могут быть любыми. Заметьте, не site.html.txt , а именно site.html .

Для этого, сохраняя документ вручную, допишите ему расширение через точку. Такую же манипуляцию проделываем со вторым файлов, но ему даем расширение.css. Ах да, не забудьте выбрать кодировку UTF-8 .

Шаг 2. Закладываем структуру

Файлы созданы и можно приступать к работе. Открывайте html-документ. В нем будет происходить основная работа. Строительным элементом в этом языке являются теги – это специальные слова в угловых скобках, которые указывают браузеру, что нужно отобразить на веб-странице.

Давайте и мы вставим что-то в наш документ, а то совсем пусто.

Hello, world! Привет, мир!

Итак, мы вставили сразу кучу тегов и может быть вы ничего не понимаете. Попробуйте открыть страничку в браузере. Там вы увидите слова “Привет, мир” если все сделано правильно. Это и есть, по сути, простейшая веб-страничка.

html – контейнер для всех остальных тегов. В нем содержится вся веб-страница.
В самом верху мы указали тип документа. Тег head – это служебная информация о странице. Тут мы с помощью тега задали название страницы, которое будет выводиться в строке браузера вверху. Далее задали кодировку и подключили css-файл с помощью тега <link> .</p><p>Как видите, есть теги парные и есть одинарные. Сейчас я не буду на этом подробно останавливаться, это зависит от того, какие функции выполняет команда.</p><h3>Шаг 3. Планирование</h3><p>Сейчас давайте на минутку оставим код в покое и подумаем. Из чего, по вашему, состоит типичный веб-ресурс? Конечно, в сети их много и все они разные, но есть же какие-то одинаковые элементы структуры, не так ли? Например, вертикальные и горизонтальные меню, боковые колонки, шапки (самый верх, где располагается логотип) и подвал (низ сайта).</p><p>Так вот, давайте и мы распланируем, как бы сделать наш первый простой сайт. В этом деле все нужно начинать с планирования. Нужно выделить структурные части будущего шаблона, из чего он будет состоять. Допустим, в нашем простом шаблоне будет шапка, часть с основным содержимым, боковая колонка и футер или подвал (одно и то же).</p><h3>Шаг 4. Начинаем!</h3><p>Значит, нам нужно 4 основных блока. В html есть возможность в парный тег вкладывать неограниченное количество других тегов, поэтому я предлагаю следующий метод:<br>Создать один общий контейнер, в котором будут расположены все наши 4 основных блока.</p><p>Итак, вернемся к коду. Писать мы его будем в теге body, так как он и являет собой будущую страницу. Можете смело удалить надпись <b>«Привет, мир» </b>, и напишем вот что:</p><p> <div id="main"> <div id="header">Это наша шапка</div> <div id="sidebar">Это боковая колонка</div> <div id="content">Это - контент</div> <div id="footer">Подвал</div> </div> </p><p>Таким образом мы создали один большой блок, в которой поместили остальные 4. Блок в html создается парным тегом div , который не имеет обязательных атрибутов, но я сразу добавил каждому из них уникальный id (идентификатор), чтобы позднее оформить внешний вид через CSS.</p><p>Скопируйте этот код себе и обновите страничку в браузере. Пока вы видите перед собой просто 4 строчки текста, но ничего, щас мы их превратим в сайт!</p><p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/2-1.jpg' height="89" width="160" loading=lazy><br></p><h3>Шаг 5. Нам поможет CSS</h3><p>Теперь начнем оформлять наши блоки. Конечно же, нужно начать с самого большого контейнера. Мы создали css-файл в самом начале, но так и не написали в него ничего. Самое время это исправить. Добавим туда такой код:</p><p> *{ box-sizing: border-box } #main{ width: 810px; margin: 0 auto; border: 5px solid black } </p><p>Первое правило устанавливает такое поведение для блоков, чтобы отступы и рамки не увеличивали их ширину. Дальше по коду мы обращаемся к блоку с идентификатором main , для этого достаточно поставить решетку и дописать имя идентификатора. Сразу после этого открываются фигурные скобки, где перечисляются правила внешнего вида, которые применятся к элементу.</p><p>Мы установили общему контейнеру ширину в 810 пикселей, правило margin: 0 auto устанавливает блок по центру, то есть наш сайт будет отображаться красиво по центру, а не прижат к левому краю. Последнее свойство border добавляет черную сплошную рамку с каждой стороны блока.</p><p><img src='https://i1.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/3-1.jpg' height="98" width="181" loading=lazy><br></p><p>Что ж, стили для главного контейнера мы сделали. На веб-страничке у нас по-прежнему отображается 4 строчки с текстом, но уже в черной рамке. Идем дальше.</p><p>Теперь самое время настроить внешний вид четырех основных структурных блоков нашей страницы. Я сразу приведу код, а ниже буду его комментировать.</p><p> #header{ height: 100px; border-bottom: 5px solid black } #sidebar{ width: 200px; height: 500px; float: left; border-right: 5px solid black } #content{ width: 600px; float: right; height: 500px } #footer{ height: 75px; clear: both; border-top: 5px solid black; } </p><p>Как вы понимаете, я просто обращаюсь к элементам с разными идентификаторами, описывая их сверху вниз. Сначала стили задаются для шапки – я поставил высоту в 100 пикселей и рамку снизу, чтобы она была отделена от остальных блоков.</p><p>А вот дальше все становится интересней. Дело в том, что по умолчанию блоки отображаются сверху вниз, если их просто написать в html-коде и никаких дополнительных правил не задавать. Но ведь боковая колонка на то и боковая, чтобы отображаться сбоку от основной части страницы. А как это сделать? Смотрите, мы сайдбару задаем высоту, ширину, рамку и еще одно свойство (float: left).</p><p>Это правило означает, что элемент будет прижат к левому краю родителя (то есть родительского элемента – блока #main). Отлично, теперь такое же свойство зададим блоку с контентом и он тоже прижмется к левому краю, но уже вслед за боковой колонкой.</p><p>Конечно, контент получает больше ширины, потому что так и должно быть, а вот высоту мы поставили одинаковую. На реальном сайте обычно в основном блоке будет много информации, поэтому высоту можно вообще не задавать. То же самое и с боковой колонкой, если в нее постоянно добавляется информация. Но мы для примера явно прописали высоту, чтобы было наглядно видно размеры блоков.</p><p>Наконец, осталось описать последний блок – <b>footer </b>. Он получает небольшую высоту, рамку с высоту и еще одно новое для нас свойство. Это свойство clear со значением both . Зачем его писать? Мы с вами прижали два предыдущих блока к левому краю. Они стали так называемыми плавающими блоками, но по умолчанию обычные блоки могут не замечать плавающие и наезжать на них.</p><p>Чтобы этого не происходило наш подвал получил вот такую команду – мол, смотри, обычный блок, выше тебя располагаются два плавающих. Заметь их и расположись ниже, чем они. Вот такую команду, по сути, дает свойство clear: both , которое заставляет обычный блок расположиться ниже всех плавающих.</p><p>Отлично, а теперь обновите страницу в браузере. Ну что, уже намного больше похоже на сайт, хотя бы по структуре.</p><p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/sajt-v-bloknote.jpg' width="100%" loading=lazy></p><h3>Шаг 6. Разукрашиваем сайт</h3><p>Следующий, очень интересный этап – давайте добавим каких-то цветов нашему сайту. Пусть у него будет не сплошной белый фон, а что-то поинтереснее. Задать фон можно двумя способами:</p><ul><li>Общий фон сразу всему сайту, прописав его общему контейнеру #main</li><li>Если каждый из основных блоков должен иметь свой оттенок цвета, то тогда нужно каждому задать цвет отдельно. Но лучше сильно не увлекаться – красная шапка, зеленый контент и желтый подвал будут смотреться не очень, сразу скажу</li> </ul><p>Предлагаю сделать по первому методу. Я тут нашел в онлайн-сервисе приятный светло-синий оттенок, который и предлагаю сделать фоном сайта. Добавьте к стилям общего контейнера такое свойство:</p><p> #main{ background: #B3C1E6 } </p><p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/fon.jpg' width="100%" loading=lazy></p><p>Обновляем страничку и убеждаемся в том, что наш сайт получил приятную светло-синюю гамму. Теперь предлагаю немного продвинуть уровень дизайна – пусть фон шапки и подвала будет потемнее, чем у остальных блоков. Можно добавить такие строчечки кода:</p><p> #header, #footer{ background: #9091DA } </p><p><img src='https://i1.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/4-1.jpg' width="100%" loading=lazy></p><p>Тут мы применили новую технику – через запятую записали два блока и новый фон применится к им обоим.</p><h3>Шаг 7. Работаем над шапкой</h3><p>Дальнейшая работа будет заключаться в оформлении отдельных блоков до более привлекательного состояния. Начнем с шапки. Что у нас обычно в шапке? Правильно, красивое название сайта и логотип. Вот это мы и добавим.</p><p>Начать я предлагаю с логотипа. Поскольку сайт мы создаем с помощью html, поместим логотип этого языка в левый угол шапки. В интернете я нашел вот такой вот милый логотипчик.</p><p>Его нужно скачать и положить в ту же папку, где хранится html-документ.<br>Теперь смотрим:</p><p> #header{ background: #9091DA url(html.jpeg) no-repeat 5% center } </p><p>Картинку я назвал html , а ее формат – jpeg , поэтому такая запись. Дальше мы также указали такие команды: картинка-фон не должна повторяться, а разместиться должна со смещением с 5% по горизонтали от начала блока и по центру по вертикали. Сначала всегда записывается горизонтальная позиция, а потом вертикальная.</p><p>Естественно, если у вас картинка называется по-другому или имеет другой формат, то вы должны немного изменить приведенный код. Отлично, логотип у нас есть. Пора убрать надпись – это шапка сайта и поставить вместо нее красивый заголовок. Удалим из шапки текст и вставим туда новый элемент:</p><p> <div id="header"> <div id="title">Название сайта</div> </div> </p><p>Теперь его нужно оформить:</p><p> #title{ font-size: 32px; float: left; margin-left: 200px; font-family: Tahoma; color: yellow; padding-top: 20px; text-shadow: 0 0 5px orange; } </p><p>Мы задали приличное количество стилей: размер шрифта, семейство шрифта, прижатие заголовка к левому краю, левый отступ, цвет, верхний внутренний отступ и тень текста. Объяснять работу каждого свойства сейчас нет смысла, поэтому просто скопируйте код и вставьте в таблицу стилей (css-файл).</p><p>Все, простая шапка готова. Конечно, на реальном сайте в ней могут находиться еще какие-то ссылки, адреса и т.д. Ну чтож, давайте что ли добавим для реализма. Этот html-код нужно вставить в содержимое шапки сайта.</p><p> <ul id="about"> <li>О нас</li> <li>Блог</li> <li>Обратная связь</li> </ul> </p><p>Он формирует список их трех ссылок. В действительности они должны куда-то вести, но у нас это просто пустые ссылки. Также оформим список и ссылки в нем.</p><p> #about{ float: right; list-style: none; margin-right: 50px } #about a{ color: yellow; } </p><h3>Шаг 8. Делаем меню в боковой колонке</h3><p>Обычно боковая колонка содержит меню сайта и еще много разных виджетов. Давайте сделаем там простейшее меню. Опять же, в этом нам поможет список, с помощью которого мы уже вывели ссылки в шапке, но поскольку главное меню по идее объемнее, то ссылок будет больше.</p><p> <ul class="menu"> <li>Пункт меню1</li> <li>Пункт меню2</li> <li>Пункт меню3</li> <li>Пункт меню4</li> <li>Пункт меню5</li> <li>Пункт меню6</li> </ul> </p><p>Menu{ list-style: none } </p><p>Собственно, тут я прописал только одно правило – убрал маркеры у пунктов списка, все остальное и так устраивает. Также перед меню можно добавить заголовок и как-нибудь его оформить. Можете этим сами заняться. Заголовки пишутся в парных тегах <h1> - <h6> , где первый – самый большой (заголовок статьи), а последний – самый маленький, часто он вообще не применяется. Для заголовка меню в боковой колонке оптимально брать <h3>.</p><h3>Шаг 9. Оформляем контентный блок</h3><p>Ну а что его там оформлять? Нужно добавить немного текста, чтобы было похоже на реальный сайт со статьей.</p><p> <h1>Заголовок статьи</h1> <p>А здесь будет какая-нибудь статья...</p> <p>Содержимое в статье разбивается на абзацы и подзаголовки...</p> <h2>Подзаголовок статьи</h2> </p><p>Любое содержимое можно вставить в блок с контентом. Абзацы в нем формируют основное содержимое, а теги h1-h2 – заголовки и подзаголовки. Тег <b>h1 </b> должен быть единственным на странице.</p><p>Оформление в данном случае заключается в том, чтобы определить цвет текста. Например, можно поставить коричневый. Заголовки можно выделить немного другим оттенком. Тут я не буду приводить никакого кода, сами уже сможете додуматься.</p><h3>Шаг 10. Оформляем подвал</h3><p>Если честно, у меня нет желания сейчас что-то пихать в подвал. На реальных сайтах в нем размещаются сведения об авторских правах, иногда там размещают меню и ссылки на другие сайты. Я напишу там просто слово копирайт и выровняю его по центру вот так:</p><p> #footer{ text-align: center } </p><h3>Шаг 11. А нет, нет больше шагов</h3><p>Вот, собственно, и все. Процесс создания наипростейшего шаблона на html можно считать законченным. У нас есть логотип, есть название сайта, меню, статья, подвал. В общем, это очень примитивный, но все же сайт.</p><p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/sajt-tselikom.jpg' width="100%" loading=lazy></p><p>Конечно, сайт выглядит так, что хочется никогда на него больше не смотреть, но сути это не меняет. Хороший внешний вид это работа веб-дизайнера.</p><h3>А что с ним дальше делать?</h3><p>Целью этой статьи было просто показать вам, как создается простейший сайт с помощью html и css. Можно поработать над его дизайном и в результате может получиться что-то привлекательное. Но все же нужно помнить, что это статический сайт. Если на него и добавлять новые страницы, то это делается вручную, с помощью создания новых html-документов.</p><p>Такой способ управления сайтом давно в прошлом, хотя и имеет свои плюсы. Чтобы выложить сайт в сеть, вы должны все html-файлы, таблицу стилей и необходимые картинки забросить на какой-нибудь хостинг, платный или бесплатный. Также нужно зарегистрировать имя сайта, чтобы он как-то назывался. Домен третьего уровня можно получить бесплатно у многих компаний, а вот за домен второго уровня придется заплатить <b>(.ru, .com, .ua и т.д.) </b></p><p>То, что мы делали с вами по ходу этой статьи, называется версткой сайта. Если вы хотите управлять сайтом с помощью удобного визуального редактора, то уже сделанную верстку нужно будет интегрировать с любым из популярных движков. Лучше всего с <b>WordPress </b>.</p><p>Это отдельная тема – интеграция во многом намного сложнее самой верстки. Чтобы научиться создавать сайты под движок, нужно пройти хороший обучающий курс. Бесплатной информации на просторах интернета вам может не хватить. Процесс создания сайта на wordpress я описал , но там вы не найдете сведений, как интегрировать html шаблон с движком.</p><p>В статье приводился так называемый блочный метод верстки, то есть все содержимое мы разместили в блоках. Сегодня это все еще самый популярный метод. Вообще при этом в процессе желательно использовать теги HTML5 , а не просто блоки, но ради простоты в этой статье был применен самый простой вариант.</p><p>Надеюсь, у вас сложилось хотя бы минимальное представление о том, как сделать сайт html в блокноте или любом другом текстовом редакторе.</p> <p>Господа, хорошего всем настроения) Сегодня решил написать статью на тему — Как создать свою веб-страницу. На эту тематику меня натолкнули читатели и друзья, которые почему-то до сих пор не различают типы сайтов и страниц в сети Интернет. Очень редко что-либо называю веб-страничкой))) Однако, многие мои друзья так часто говорят. Специально для них я решил описать основные типы веб-страниц, которые вы можете создать для себя, чтобы иметь некое представительство себя онлайн.</p> <p>Перед созданием веб-страницы, вам обязательно надо создать email или электронный адрес. Я описывал варианты создания в этой статье — . А если электронный адрес у вас есть, то последуем к вариантам создания вашей личной веб-страницы. Читайте способы, которые помогут создать свою веб-страницу.</p> <h3>Одностраничный сайт</h3> <p>Самый древний способ))) Для него Вам надо изучить основы языка HTML. Делать это в наше время совсем необязательно, существует миллион сервисов, речь о которых пойдет ниже. Однако, если вы хотите понимать — как работает сайт и, частично, сеть Интернет, то попробуйте создать одностраничный сайт самостоятельно. О том, как это сделать я описывал в статье — . Там есть варианты создания одностраничного сайта с помощью конструкторов сайтов и бесплатных платформ.</p> <h3>Страница в социальной сети Вконтакте</h3> <p>Думаю, в наше время фраза: «я создал себе страничку в Интернете» относится больше всего к социальной сети Вконтакте. VK — самая популярная социальная сеть в СНГ. Создать здесь свою страницу — дело 1 минуты. Более того, для вас открывается десятки полезных функций для деятельности в сети Интернет.<br> Про Вконтакте я писал много и планирую писать еще больше)) С этой социальной сетью вы сможете и .</p> <p>Вконтакте также позволяет создавать удобный URL-адрес к вашей веб-странице, вместо стандартного URL-адреса при регистрации http://vk.com/id8032931. Затем вы можете поменять его на красивый — http://vk.com/vasheimya.vashafamiliya.</p> <h3>Страница в социальной сети Facebook</h3> <p>Если Вконтакте самая популярная социальная сеть в СНГ, то Facebook — социальная сеть №1 во всем мире. Фейсбук, считается, вроде как для продвинутых русскоязычных пользователей))) Но лично я думаю, что это все из-за того, то Facebook очень популярен и удобен.</p> <p>Также как и в Вконтакте, вы можете присвоить себе красивый адрес своей веб-страницы. Полный мануал — как создать веб-страницу на Facebook, я описал в статье — .</p> <h3>Блог</h3> <p>Блог — самый рекомендуемый мною вариант создания своей веб-страницы. Блог дает тысячи возможностей самореализации и очень удобен в обращении. Часто также бесплатен, как веб-страницы в социальных сетях.<br> Предлагаю подборку статей по созданию веб-страницы с помощью блога:</p> <ul><li> — быстрый, но с затратами на хостинг и отдельный домен.</li> <li> — блог-платформа от Google. Интегрирована со многими гугловскими сервисами. Очень удобно, если Вы фанат Google))</li> <li> — самая динамично развивающаяся блог-платформа. Я читал в одном из американских изданий статистику о том, что Tumblr у детей США 12-13-ти лет популярнее Фейсбука!!! Думаю, это показатель удобства и развития этой платформы.</li> <li> — здесь указаны мануалы по практически всем известным блог-платформам, включая и вышеуказанные.</li> </ul><h3>Дневник</h3> <p>Вот все основные варианты создания вашей веб-странички, или, по-другому, веб-присутствия. Буквально 1 минута и вы уже погружаетесь в пространство всемирной паутины. Удачного веб-странининга!</p> <p>Либо в бесплатных или платных конструкторах. Но все же, в начале времен 1990-2000 годы сайты создавались преимущественно на HTML, без использования каких-либо обращений к базе данных. Различные программы, позволяющие редактировать HTML + CSS в реальном времени, например, Dreamweaver — появились только в самом конце 20-го века. Поэтому сайты создавались в блокноте и других подобных редакторов. Хоть сейчас и существует множество удобных способов сделать качественный ресурс, <b>создание сайта при помощи блокнота позволяет выучить основы построения страницы и основы HTML в целом </b>.</p> <p>Итак, для того, чтобы создать сайт через блокнот вам нужно для начала создать HTML файл. Сделать это можно следующим образом:<br> Заходите в меню Пуск -> Все программы -> Стандартные -> Блокнот</p> <p>И сразу же сохраним его в HTML формате: В блокноте нажмите: Файл -> Сохранить как</p> <p><img src='https://i0.wp.com/nz4.ru/wp-content/uploads/2015/05/bloknot2.jpg' align="center" height="192" width="299" loading=lazy><br> И напишите название файла, к примеру, index.html</p> <p><img src='https://i0.wp.com/nz4.ru/wp-content/uploads/2015/05/bloknot3.jpg' align="center" width="100%" loading=lazy></p> <p>Теперь мы можем приступать непосредственно к созданию HTML верстки в блокноте. Для начала, напишем основную разметку HTML кода, вы можете ее сразу скопировать и вставить, чтобы не тратить время попусту.</p><p> <!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Мой самый прекрасный сайт

Мой первый сайт

По сути это основные элементы, из которых и состоит любой веб-ресурс. Все, что находится в скобках называется 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. Когда вы уже создадите сайт и захотите его разместить в интернете, вам понадобится хостинг, я написал как выбрать сервер и сделал подборку из лучших.

МОСКОВСКИЙ ИНСТИТУТ ОТКРЫТОГО ОБРАЗОВАНИЯ
КАФЕДРА МАТЕРИАЛЬНЫХ И ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ

Материалы дистанционного курса
"Информационные технологии и образование"

Полилова Татьяна Алексеевна
[email protected]

Как создать web-страницу

Самый простой способ создать страницу для размещения в Интернете - воспользоваться инструментами пакета Microsoft Office. Последние версии этого пакета предоставляют возможность преобразовать обычный документ в HTML-формат с неплохим качеством кода.

Возможности Word

Подготовленный в текстовом редакторе Word документ можно легко преобразовать в web-страницу. Однако она будет выглядеть не столь привлекательно, как хотелось бы, если не предпринять дополнительные шаги. Рассмотрим несколько примеров.

Возьмем некоторый текст.

Преобразуем документ в web-страницу с помощью операции Сохранить как web-страницу… (вызывается из главного меню - позиция Файл). Тогда html-представление документа будет иметь вид:

Первое, что бросается в глаза - текст занимает все экранное пространство. Длина строки слишком большая. Для комфортного чтения на экране число символов в строке должно быть в диапазоне 50-65.

Использование таблицы

Можно в этом случае поступить совсем просто: завести в исходном документе таблицу и поместить в нее нужный текст. В таблице можно задать рамку. Тогда вид web-страницы намного улучшится, и в браузере страница будет выглядеть привлекательнее.

Фон и стиль

Желательно выбрать не слишком яркий фон, чтобы на нем хорошо читался текст. Таким фоном в предложенном списке является, например, Рисовая бумага. Вид страницы заметно преобразился:

Вставка картинки

В документ можно добавить картинку, взяв ее, к примеру, из коллекции клипов.

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

Если вы вставляете картинку внутрь абзаца, то лучше изменить свойства картинки, задав обтекание текста вокруг картинки (нужно выбрать позицию главного меню Формат и далее Рисунок):

В документе при этом не будет создаваться лишнего пустого пространства.

Наконец, можно добавить картинке рамку и тень с помощью кнопок на панели Рисование - Тип линии и Стиль тени. Подобные нюансы заметно прибавляют выразительности странице.

Если панели Рисование нет на странице, то нужно установить ее, выбрав позицию главного меню Вид и далее Панели инструментов и Рисование.

Бегущая строка

Word позволяет внести на web-страницу и другие оформительские элементы, например "бегущую строку". Чтобы воспользоваться этой возможностью нужно открыть на экране панель web-компонентов (из главного меню - позиция Вид, далее Панели инструментов и Веб-компоненты). Щелчок по кнопке операции Бегущая строка открывает дополнительное окно для задания текста параметров бегущей строки.

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

Мы привели пример лишь очень скромного набора дизайнерских приемов, с помощью которых можно оформить web-страницу на основе имеющегося документа в формате Word.

Использование шаблонов оформления

Если вы начинаете создавать страницу с нуля, то можно воспользоваться мастером веб-страниц, который в диалоге будет помогать формировать документ. Или же можно использовать готовый шаблон оформления страницы, выбрав его из достаточно представительного набора. Для этого нужно в операции Создать выбрать режим Создание с помощью шаблона и далее Общие шаблоны. На экране появится форма, в которой нужно выбрать закладку Веб-страницы:

Цветовое и стилевое решение пользователь может выбирать самостоятельно, например, с помощью настроек Формат - Тема.

Создание гиперссылок и закладок

Последний вопрос, который мы планируем рассмотреть в данном разделе - создание гиперссылок в документе.

Если мы хотим сослаться в документе на другой документ или другой сайт в Интернете, то такую гиперссылку можно сделать так: выделить в документе фрагмент текста (слово) и выполнить операцию Вставка - Гиперссылка… На экране появится форма, в которой задается адрес гиперссылки. Адрес можно ввести явно или можно выбрать файл в окне.

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

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

Веб-презентация в PowerPoint

Программа PowerPoint ориентирована на создание презентаций на компьютере. Однако у нее имеется функция преобразования подготовленной презентации в веб-формат.

Вы можете открыть подготовленную презентацию и выполнить операции (из главного меню) Файл - Сохранить как веб-страницу. Как обычно нужно задать имя веб-презентации в открывшемся окне. В результате выполнения преобразования презентации будет создан файл с заданным именем и расширением.htm и одноименная папка с дополнительными материалами.

Если теперь из браузера вызвать веб-презентацию, то на экране можно увидеть результат преобразования.

В нижней части экрана создается специальная строка, где располагаются кнопки перехода к слайдам и кнопки для задания различных параметров просмотра презентаций.

Презентацию можно просматривать с показом структуры слайдов. Но если эта информацию не представляет интереса, то зарезервированное для показа структуры поле на экране можно убрать (операция развернуть/свернуть структуру в нижней строке).

С помощью кнопки Показ сладов можно просматривать слайды на полном экране.

Создание гиперссылок

В презентации можно создать гиперссылки, которые связывают объекты на слайде, например, с другими слайдами. Тем самым можно создать структуру гипермедиа, которая естественным образом будет соответствовать идеологии Интернета. Поясним этот прием на примере.

Пусть у нас есть несколько заготовленных слайдов на тему растительного мира Байкала, составленных из коллекции фотографий. Создадим новый слайд - оглавление коллекции.

Если новый слайд получился не первый в последовательности, то нужно выйти в режим сортировщика слайдов (из главного меню с помощью операций Вид - Сортировщик слайдов) и перетащить новый слайд в начало коллекции.

На новый слайд поместим уменьшенные копии всех фотографий. Проще всего это сделать самым прямолинейным способом: на пустой слайд последовательно скопировать все фотографии коллекции, уменьшить их размер и разместить, например, в две линии. Картинки можно будет в дальнейшем оформить рамками с тенью. На слайд-оглавление можно добавить название презентации. Вид презентации в режиме Сортировщик слайдов представлен ниже:

Перейдем в обычный режим просмотра слайдов (команды Вид и далее Обычный). На слайде-оглавлении выделим фотографию и выполним команду Вставка - Гиперссылка. В открывшемся окне зададим переход по гиперссылке - номер слайда с большой фотографией, с которой был скопирован меньший образец для оглавления.

Аналогично свяжем другие картинки на слайде-оглавлении с соответствующими слайдами с оригиналами фотографий.

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

Осталось совсем немного усовершенствовать нашу структуру. Добавим на каждый слайд с фотографией в его верхнюю левую часть стрелку (Автофигура на панели инструментов Рисование), и сделаем из этой стрелки гиперссылку, выполняющую переход на слайд-оглавление. Теперь движение по созданной нами структуре гипермедиа станет "двусторонним": из оглавления можно перейти на слайды с фотографиями, и с любого слайда вернуться на оглавление.

После выполнения преобразования презентации в веб-формат наша первая страница будет иметь вид:

Щелчок по картинке из меню вызовет переход к слайду с большой фотографией, а щелчок по стрелке (в левой верхней части слайда) обеспечит переход на страницу с оглавлением коллекции.