Как создать HTML файл в блокноте?

Как создать html файл - отметим, что web браузер может открывать файлы HTML

Как создать HTML файл в блокноте?

Как создать HTML файл в блокноте?

Любой сайт представляет собой набор файлов, которые объединены под одним адресом (доменом). Про домены, мы с Вами поговорим позже, а сейчас отметим, что web браузер может открывать файлы HTML формата.

Файлы html формата, это файлы определенной структуры, имеющие расширение .html или .htm. Об этом мы с вами говорили в прошлом, 4 уроке: Принцип работы языка HTML.

Файлы HTML формата, содержат код, в котором, управляющими тегами, браузеру указывается, где и как расположить на web странице объекты. А именно: текст, изображения, аудио, видео, Flash и другие объекты.

То есть, в состав сайта могут входить файлы самых разных форматов, но все эти файлы так или иначе, описаны (размечены) в файлах HTML.

Следует отметить, что сайты могут содержать какое угодно количество страниц, от одной до нескольких тысяч.

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

Ну что же, в этом уроке рассмотрим, — как создать html файл.

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

Рассмотрим два варианта создания файла с расширением html.

В первом варианте, мы создадим html файл средствами Windows, а во втором варианте, мы создадим html файл с помощью блокнота Notepad++.

Итак, для создания html файла средствами OS Windows, кликнем правой кнопкой мыши в любой папке, или, например, на рабочем столе компьютера.

В открывшемся контекстном меню, выберем – Создать -> Текстовый документ. Система создаст файл с именем: Новый текстовый документ.txt

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

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

Вот пример подобных настроек для Windows 7:

Нажимаем кнопки: Пуск – Панель управления – Параметры папок.

В окне параметров папок, в верхнем меню выбираем: «Вид».

Далее находим режим: «Скрывать расширения для зарегистрированных типов файлов»

От того, установлен флажок слева от этой опции или нет, зависит, будут или не будут отображаться расширения файлов Windows.

Нам необходимо, Чтобы расширения файлов отображались, поэтому флажок убираем.

Итак, надеюсь, что с расширение файлов Вы разобрались и вновь созданный текстовый файл у Вас отображается с расширением: Новый текстовый документ.txt

Теперь нам осталось переименовать имя и расширение только что созданного файла.

Для этого кликнем правой кнопкой мыши на созданном файле и выберем в открывшемся окне – «Переименовать».

Зададим имя файла – index, а расширение — html. Теперь у нас есть HTML файл главной страницы сайта index.html, с которым, мы можем экспериментировать.

Перейдем ко второму способу создания html файла. В этом случае воспользуемся блокнотом Notepad++.

Запустим программу блокнот Notepad++. Для того, чтобы создать html файл, кликнем в меню блокнота: «Файл» — «Сохранить как».

Откроется окно, в котором необходимо задать имя файла, в нашем случае – index. Далее, необходимо выбрать «Тип файла», кликаем на прокрутку окна типа файла и выбираем тип: «HyperTextMarkup Language *.html; *.htm»

Далее выбираем папку, в которую будет сохранен файл и жмем «Сохранить».

Итак, в этом уроке, мы с Вами научились создавать html файлы двумя способами.

А сейчас, обратите внимание на очень важный момент. Любой html файл или любой html документ, должен иметь определенную внутреннюю структуру.

О структуре html документа (файла), мы поговорим в следующем уроке.

Как написать и запустить HTML на компьютере?

Чтобы стать профессиональным разработчиком, нужно уметь пользоваться инструментами. В этом выпуске разберёмся, как и в чём написать и запустить HTML-код на своём компьютере.

Шаг 1. Качаем текстовый редактор

Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

Зайдите на https://code.visualstudio.com/ и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если OS X или Linux — нажмите Other platforms.

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.

Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

По шагам на скриншоте:

  1. Add workspace folder — открывает меню выбора папки.
  2. Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
  3. Нажмём Add.

После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

Скопируем код со стилями из файла https://htmlacademy.ru/assets/courses/299/outlines.css — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.

Шаг 6. Запускаем код и смотрим на результат

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

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

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

Читайте также  Как конвертировать файл Zoom в mp4?

Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.

Что мы сделали

  1. Установили и настроили редактор кода.
  2. Создали рабочую папку и добавили туда файлы нашего проекта.
  3. Научились редактировать и сохранять файлы с кодом.
  4. Установили расширение, чтобы сразу видеть результат вёрстки.

В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее. Подпишитесь на нашу рассылку, чтобы не пропустить следующие выпуски.

Не знаете, какой код написать?

Знакомство с HTML и CSS на интерактивных курсах — бесплатно.

Нажатие на кнопку — согласие на обработку персональных данных

Как создать файл html для новичка и профессионального верстальщика

Приветствую всех новичков в области веб-разработки! Если вы хотите научиться создавать веб-странички, то эта статья как раз для вас. Все потому что в ней я поведаю вам основы основ, без которых дальнейшее изучение языка html просто невозможно. Я расскажу, как создать файл html несколькими способами.

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

Поговорим о технических особенностях

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

Так вот если вы присмотритесь к расширению этого файла, то увидите там расширение .htm или .html. Почему же так? Все очень просто. Потому что язык разметки гипертекста называется html и составляет «скелет» всех сервисов в сети.

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

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

Если же вам интересно посмотреть не результат кода (т.е. внешний вид веб-страницы, пользовательский интерфейс и т.д.), а сам программный код, то html-документы можно открыть при помощи не только специализированных программ для разработчиков, а и в обычных редакторах текста. Удобно, правда?

Распространенные способы создания html-файлов

Существует множество способов создания описываемых документов. Я перечислю наиболее популярные. Начну, пожалуй, с простых.

Для начинающих

Тех, кто сейчас впервые будет создавать html-страницу, я порадую! Для этого вам понадобится всего лишь одно приложение. Стандартное. Внимание! Открывайте «Блокнот». Да-да, именно его, если конечно у вас в качестве ОС стоит Windows 7, 8, 10 ну или может XP. Если же вы работаете на маке, т.е. на Mac OS, то в таком случае стоит открыть TextEdit.

Хочу обратить ваше внимание, что описывать порядок действий я буду на примере работы в блокноте.

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

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

Теперь нужно сохранить файл. Однако не спешите, а выполните все действия по порядку:

  1. Переведите курсор мышки на панель с закладками и нажмите на вкладку «Файл»;
  2. Выберете пункт «Сохранить как…»;
  3. Измените тип кодировки на UTF-8;
  4. Теперь обратите внимание на тип файла. Здесь нужно изменить формат с текстового на «Все файлы (*.*)»;
  5. Теперь пишем наименование сохраняемого документа. В мире веб-разработки главную страницу сайта принято называть index.html. Однако примеру вы можете дать любое название. Главное здесь соблюсти правило расширения. После имени добавьте .html и далее сохраните документ.

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

Для небольших проектов

Если вы от новичка перешли на следующий уровень, то «Блокнота» вам будет мало. Во-первых, в нем тяжело отслеживать ошибки. Во-вторых, в нем нет встроенной валидации и проверки синтаксиса. Также очень удобно, когда теги языка html подсвечиваются другими цветами. Все это ускоряет и оптимизирует работу верстальщика. Поэтому стоит скачать Notepad ++.

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

  1. В новый файл скопировать код программы;
  2. Во вкладке «Кодировка» выбрать «Кодировать в UTF-8 (без BOM)»;
  3. Нажать пункт «Сохранить как…»;
  4. И повторить действия из предыдущей инструкции, т.е. поменять расширение и тип файлов.

Для продвинутых

Если же вы решили сразу начинать работать в профессиональных средах разработки, то там все выглядит уже несколько по-другому. Так, в Visual Studio, программном продукте компании Microsoft, создать файл html можно благодаря таким действиям:

  1. Во вкладе «Файл» выбрать пункт «Новый» и далее снова «Файл…» (Его также можно создать при помощи комбинации клавиш Ctrl+N);
  2. Далее выбрать тип создаваемого документа. Нам необходим «HTML Page»;
  3. После вставки кода сохраните страницу с необходимым именем.

Как видите все очень просто.

Конечно работа в профессиональных средах сильно отличается от других вариантов, так как первая обладает рядом весомых преимуществ: отображение/скрытие номера (индекса) строк кода, подсветка ошибок, автодополнение и автозакрытие тегов, возможность тестировать код прямо через Visual Studio и т.д.

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

Надеюсь, вам понравилась моя статья и вы почерпнули для себя новую полезную информацию. А если это так, то вступайте в ряды моих верных подписчиков и вместе со своими друзьями следите за обновлениями блога. До встречи!

Что значит html и как создать html файл?

Слышали про html? Или, может быть, слышали об html страницах в Интернете? На самом деле, все просто. HTML — это, упрощенно говоря, один из языков программирования, и не самый сложный из них.

p, blockquote 1,0,0,0,0 —>

HTML – сокращение от HyperText Markup Language, что переводится как язык гипертекстовой разметки.
Содержание:

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

p, blockquote 3,0,0,0,0 —>

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

По сути, html — это изнанка страниц многих сайтов. Часто их красивое оформление создается с помощью языка разметки html. Иначе это еще называют создание страниц с помощью html верстки.

Читайте также  Курс обучения созданию сайтов на WordPress

p, blockquote 4,0,0,0,0 —>

Сайты могут создаваться и на других языках программирования, например, на языке php.

p, blockquote 5,0,0,0,0 —>

Ученый из Британии Тим Бернерс Ли разработал язык html в 1986-1991 годах в Швейцарии. По сути html позволяет создавать простые, но при этом красивые документы. Уже позже в html были добавлены мультимедийные возможности (видео и т.п.) и поддержка работы с гипертекстом (для создания гиперссылок).

p, blockquote 6,0,0,0,0 —>

Для работы с html были созданы всем известные программы-браузеры, они же интернет-обозреватели, такие как:

p, blockquote 7,0,0,0,0 —>

  • Mozilla Firefox (Мозилла Фаерфокс),
  • Internet Explorer (Интернет Эксплорер),
  • Google Chrome (Гугл Хром),
  • Opera (Опера),
  • Яндекс (Yandex) браузер,
  • Safari (Сафари) и
  • другие.

Первоначально основная функция браузера состояла как раз в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя.

p, blockquote 8,0,0,0,0 —>

Что такое html страница?

Документы, файлы, страницы, созданные на языке html, имеют расширение вида .html или .htm. Например, html-страница (или html-файл, или html-документ) может иметь название вида:

p, blockquote 9,0,1,0,0 —>

  • тест.html,
  • html,
  • html или
  • название.html.

Строго говоря, тест.html – это имя файла (или имя страницы), где

p, blockquote 10,0,0,0,0 —>

  • тест — имя файла, а
  • .html – расширение имени файла (или расширение имени страницы), которое обычно просто называют «расширение».

Сейчас более распространенным вариантом вместо слова «расширение» стало слово «формат». Поэтому выражение «формат html» означает, что файл (или страница) написан на языке html и имя такого файла имеет расширение html. Значит,

p, blockquote 11,0,0,0,0 —>

файл c именем тест.html имеет формат html.

Операционная система Windows по умолчанию скрывает расширения файлов (то есть, форматы файлов). Программисты сделали это «не со зла», а для того, чтобы уберечь пользователя от бездумного изменения расширений файлов. Можно сделать так, чтобы по умолчанию расширения файлов были открыты. В Windows 7 для этого:

p, blockquote 13,0,0,0,0 —>

  • кликаем по кнопке Пуск,
  • открываем Панель управления,
  • находим Параметры папок,
  • открываем вкладку Вид, прокручиваем в самый низ и
  • убираем галочку напротив опции «Скрывать расширения для зарегистрированных типов файлов»,
  • жмем «ОК».

Рис. 1. Открываем все расширения файлов

Если сейчас Вы поднимите глаза вверх и посмотрите в адресную строку своего браузера, то увидите там имя той страницы, которую сейчас читаете, а в конце имени стоит .html. Это пример html страницы блога, которая размещена в Интернете. Обычно у блога (у сайта) много html страниц. Например, каждая статья на этом блоге является отдельной html страницей.

p, blockquote 14,0,0,0,0 —>

В Интернете также встречаются сайты-одностранички, состоящие всего из одной html страницы. Например, это может быть

p, blockquote 15,0,0,0,0 —>

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

Язык HTML постоянно развивается и на сегодняшний день существует несколько его версий, начиная от HTML 2.0 от 22 сентября 1995 года и заканчивая последней версией языка HTML 5 от 28 октября 2014 года. В сентябре 2016 года планируется выпуск HTML 5.1.

p, blockquote 16,0,0,0,0 —>

Что такое HTML теги?

HTML – это язык разметки документов с помощью тегов. Теги заключаются в треугольные скобки « ». Теги могут быть парными и непарными.

p, blockquote 17,0,0,0,0 —>

  • Например, тег «b», заключенный в треугольные скобки, делает текст жирным

текст, выделенный жирным

p, blockquote 18,0,0,0,0 —>

В результате получится так: текст, выделенный жирным

p, blockquote 19,1,0,0,0 —>

  • А тег «i» делает текст курсивным.

текст, выделенный курсивом

p, blockquote 20,0,0,0,0 —>

В результате получим: текст, выделенный курсивом

p, blockquote 21,0,0,0,0 —>

  • Есть еще тег для перевода строки «br».
  • С помощью тега «a href» выделяют гиперссылку.
  • Тег для заголовка документа – . Это тег, открывающий документ. Он является парным в том смысле, что для него обязательно нужен закрывающий тег со слешем .
  • После заголовка идет основная часть, которая находится между открывающим тегом и закрывающим тегом

Как создать html файл и что делать, если вместо HTML страницы отображается текст?

Приветствую, друзья. Сегодня вернемся к HTML, но не продолжим его изучение, а вернемся к самым истокам, дабы в будущем не у кого не возникало вопросов и проблем. Как создать HTML файл? Именно так звучит самый популярный вопрос начинающих пользователей. И отсюда довольно часто возникает другой вопрос: «Что делать, если вместо HTML страницы отображается просто текст?» И чтобы закрыть подобные вопросы на самом начальном этапе, написана эта статья.

Данные проблемы чаще всего возникают не из-за самого пользователя, а из-за операционной системы, используемой на компьютере. При чем здесь операционная система? Все дело в том, что по умолчанию операционные системы Windows, в частности XP и 7, скрывают расширение файлов. Отсюда и возникают проблемы, при создании файлов и назначении им правильного формата.

Я буду объяснять, на примере Windows XP и Windows 7, так как другие не использовал и не знаю, что там, да как.

Итак, для начала включим отображение расширения файлов.

Если используется Windows XP:

Открываем «Мой компьютер»

Заходим в «Сервис» и выбираем пункт «Свойства папки».

Затем, в открывшемся окне выбираем вкладку «Вид».

Находим пункт «Скрывать расширения для зарегистрированных типов файлов», и снимаем галочку.

Нажимаем «Применить» и «ОК».

Если используется Windows 7:

Кликаем на «Упорядочить» и выбираем из списка «Параметры папок и поиска»

В открывшемся окне выбираем вкладку «Вид».

Находим пункт «Скрывать расширения для зарегистрированных типов файлов», и снимаем галочку.

Нажимаем «Применить» и «ОК».

Теперь, если все сделано правильно в конце имени файлов, будет дописано расширение файла, типа: .txt, .html и т.д. Так будет гораздо удобнее ориентироваться в форматировании файлов.

Переходим к решению поставленных вопросов.

Как создать html файл?

Здесь, все на самом деле, до безобразия просто. Есть несколько вариантов, в зависимости, каким инструментом мы пользуемся.

Если используется NotePad++:

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

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

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

И после написания кода, выбираем «Сохранить как». В первое поле пишем название файла, а во втором выбираем его формат, в нашем случае — HTML.

После чего, сохраняем.

Таким образом, можно создать html файл, с помощью текстового редактора NotePad.

Если используется блокнот:

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

Создаем новый текстовый документ.

Сохраняем документ, как есть. (В формате txt.)

И переименовываем документ. При этом главное изменить не имя документа, а его расширение. То есть txt заменить на html. После чего, нажать «Enter». Выскочит предупреждение, где нажимаем на кнопку «ДА».

Вот так мы создали файл в формате html, с помощью блокнота.

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

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

Что делать, если вместо HTML страницы отображается текст?

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

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

То есть, как Вы уже догадались, для ее решения необходимо переименовать файл из (файл.html.txt) в (файл.html).

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

На этом у меня все. Надеюсь, данная статья поможет избавиться от вопросов, которые могут возникнуть в самом начале изучения html или css.

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

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

  1. Для этого понадобится готовый дизайн сайта собственного производства или скачанный из сети psd исходник. Его нужно раскроить для верстки html.
  2. Блокнот, а именно NotePad++. Его можно скачать с официально сайта.
  3. Файл index.html. Его можно создать в любой удобной папке на компьютере. Но лучше выдели отдельную папку для своего сайта и размести его там. У меня это папка c:siteindex.html
  4. Файл c:sitestyle.css. Это файл стилей, зачем он нужен станет понятно позже.
  5. Папка c:siteimages. В эту папку нужно поместить все изображения нужные для будущего сайта.
  6. Купить хостинг и домен если нужно сайт выложить в интернете

Для удобства я сделал архив с изображениями и уже готовыми пустыми файлами index.html и style.css. Скачай и распакуй архив в нужную тебе папку.

Для работы сайта в сети необходим веб-сервер. Сервер при обращении к домену или папке сайта без указания конкретного файла будет искать в ней index.html или index.php если не найдет отобразит список файлов папки.

Так как у нас простая html страничка нам не потребуется установка сервера на нашем компьютере, так как язык разметки понимает любой браузер. Однако если потребуется использование php, то просто браузером уже не обойтись.

Теперь нужно открыть файл index и style в NotePad++

Структура html документа

Скопируй код в файл index.html

Теперь открой его в браузере, должно получится так:

В кратце опишу что значат эти теги. Если хочешь подробнее разобраться то по googl-и как говорится информации на эту тему море.

Указываем браузеру по какому стандарту нужно отображать страницу:

Тег html говорит о том где начинается и заканчивается html документ

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

Тег body содержит разметку страницы, содержимое этого тега видят посетители сайта.

Верстка или создание сайта на html

В процессе верстки сайта будут встречаться теги и атрибуты описать которые в данной статье невозможно. Поэтому рекомендую пользоваться сайтом htmlbook.ru. Кроме того советую внимательно изучать каждый тег и стиль css, который тебе встречается.

Итак что будем верстать:

Фон и основной каркас сайта

Замени содержимое своего файла index.html на следующее:

И добавь в style.css такой код:

Обнови страницу с сайтом в браузере (F5), должно получится так:

Шапка сайта

Добавьте в тег div с идентификатором basic следующий код:

Что бы получилось следующее:

И добавляем в файл css строки:

Верхнее меню сайта

Что бы на нашем html сайте появилось навигационное меню, которое изображено в макете добавить в index.html после:

Что бы получилось так:

А в файл style.css:

Теперь сайт имеет логотип телефон и меню при наведении на которое меняется фон:

Левое меню и контент

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

Файл index.html будет выглядеть вот так:

И в конец файла css копируем:

Если все сделано правильно получится сайт как на картинке ниже:

Подвал сайта

Теперь весь файл index.html выглядит вот так:

В файл css добавляем код в самый низ:

Теперь весь файл style.css выглядит следующим образом:

А сам сайт вот так:

Другие страницы сайта и ссылки меню

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

Названия страниц должны быть уникальными и состоять из латинских символв. Я просто перевел названия пунктов меню на транслит.

  • o-nas.html – О нас
  • assortiment.html – Ассортимент
  • otzivi.html – Отзывы
  • zabronirovat-stolik.html – Забронировать столик
  • nashi-klienty.html – Наши клиенты
  • kontakty.html – Контакты

То же самое нужно сделать и с левым меню.

  • kofe-ayrish.html – Кофе Айриш
  • kofe-amerikano.html – Кофе Американо
  • kofe-glyase.html – Кофе Глясе
  • kofe-dippio.html – Кофе Диппио
  • kofe-kapuchino.html – Кофе Капучино
  • kofe-kon-panna.html – Кофе Кон Панна
  • kofe-koretto.html – Кофе Коретто
  • kofe-latte.html – Кофе Латте
  • kofe-lungo.html – Кофе Лунго

Теперь открываем index.html в NotePad++ и добавляем нужные ссылки соответствующему меню, что бы получилось так:

Теперь жми “Сохранить” потом “Файл > Сохранить как” и сохраняй для каждой ссылки файл с соответствующим именем в папке с файлами сайта. Вот что получилось у меня:

Все сайт готов. Осталось только поменять в каждой странице контент.

У такого сайта не смотря на его простоту есть очень большой недостаток. Что бы поменять один пункт меню или элемент дизайна придется это делать это в каждом сайте. Когда страниц больше 10 начинается страшная путаница при его обслуживании. Так что создание сайта html в блокноте советую делать только для очень маленьких сайтов или одно-страничных LandingPage. А для полноценных сайтов осваивать CMS (они не так сложны как кажется).

Борис Аладышкин/ автор статьи

Приветствую! Я являюсь руководителем данного проекта и занимаюсь его наполнением. Здесь я стараюсь собирать и публиковать максимально полный и интересный контент на темы связанные с современными технологиями и программным обеспечением. Уверен вы найдете для себя немало полезной информации. С уважением, Борис Аладышкин.

Понравилась статья? Поделиться с друзьями:
Itsovet61.ru
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: