Как создать сайт на html с нуля пошаговая инструкция - Instruktiv.top - инструкции по применению и эксплуатации на

Пройдите тест, узнайте какой профессии подходите

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Введение в HTML и основные понятия

HTML (HyperText Markup Language) — это стандартный язык разметки для создания веб-страниц. Он используется для структурирования контента на веб-странице и описания его семантики. HTML состоит из элементов, которые представляют собой теги, заключенные в угловые скобки. Эти элементы формируют структуру веб-страницы и могут включать текст, изображения, ссылки и другие мультимедийные компоненты.

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

Основные понятия, которые необходимо знать:

Теги: Основные строительные блоки HTML. Пример: <html>, <head>, <body>. Теги могут быть парными (с открывающим и закрывающим тегом) или одиночными.
Атрибуты: Дополнительные параметры тега, которые предоставляют дополнительную информацию. Пример: <a href="https://example.com">. Атрибуты всегда указываются в открывающем теге и могут содержать различные значения.
Элементы: Комбинация открывающего и закрывающего тега и содержимого между ними. Пример: <p>Это абзац.</p>. Элементы могут содержать текст, другие элементы и атрибуты.

Кинга Идем в IT: пошаговый план для смены профессии

Подготовка рабочей среды

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

Выбор текстового редактора

Для написания HTML-кода можно использовать любой текстовый редактор, но для удобства рекомендуется выбрать специализированный редактор, такой как:

Visual Studio Code: Бесплатный и мощный редактор с поддержкой множества расширений. Он предлагает функции подсветки синтаксиса, автодополнения и интеграции с системами контроля версий.
Sublime Text: Быстрый и легкий редактор с множеством функций. Он поддерживает плагины и имеет удобный интерфейс, что делает его популярным среди разработчиков.
Atom: Редактор с открытым исходным кодом, поддерживающий множество плагинов. Atom предлагает гибкость и настраиваемость, что позволяет адаптировать его под свои нужды.

Установка веб-браузера

Для просмотра и тестирования вашего сайта потребуется веб-браузер. Рекомендуется использовать современные браузеры, такие как:

Google Chrome: Популярный браузер с мощными инструментами разработчика.
Mozilla Firefox: Браузер с открытым исходным кодом и хорошей поддержкой стандартов.
Microsoft Edge: Современный браузер от Microsoft с поддержкой последних технологий.

Создание базовой структуры HTML-документа

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

Объяснение кода

<!DOCTYPE html>: Объявление типа документа, указывающее браузеру, что используется HTML5. Это обязательный элемент, который должен быть первым в документе.
<html lang="ru">: Открывающий тег HTML с атрибутом языка. Атрибут lang указывает язык содержимого страницы, что важно для поисковых систем и доступности.
<head>: Секция документа, содержащая метаданные. В этой секции размещаются теги, которые не отображаются непосредственно на странице, но важны для ее функционирования.
<meta charset="UTF-8">: Установка кодировки символов. Кодировка UTF-8 поддерживает большинство языков и символов, что делает ее универсальной.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Обеспечение адаптивности страницы. Этот тег позволяет странице корректно отображаться на устройствах с различными размерами экранов.
<title>: Заголовок страницы, отображаемый в браузере. Этот заголовок виден на вкладке браузера и важен для SEO.
<body>: Основное содержимое страницы. Все, что находится внутри этого тега, будет отображаться на веб-странице.

Добавление контента и элементов оформления

Теперь можно добавить больше контента и элементов оформления на вашу веб-страницу. HTML предоставляет множество возможностей для создания разнообразного и интерактивного контента.

Добавление изображений

Чтобы добавить изображение, используйте тег <img>:

Тег <img> является одиночным и не требует закрывающего тега. Атрибут src указывает путь к изображению, а атрибут alt предоставляет текстовое описание изображения, что важно для доступности и SEO.

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

Для создания гиперссылок используется тег <a>:

Тег <a> позволяет создавать ссылки на другие страницы или ресурсы. Атрибут href указывает URL, на который будет вести ссылка. Текст между открывающим и закрывающим тегами <a> будет отображаться как ссылка.

Форматирование текста

HTML предоставляет множество тегов для форматирования текста:

Абзацы: <p>Это абзац.</p>. Абзацы используются для разделения текста на логические блоки.
Заголовки: <h1>Заголовок 1</h1>, <h2>Заголовок 2</h2> и т.д. Заголовки помогают структурировать контент и важны для SEO.
Жирный текст: <strong>Жирный текст</strong>. Тег <strong> используется для выделения важного текста.
Курсив: <em>Курсив</em>. Тег <em> используется для выделения текста курсивом.

Пример расширенной структуры

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

Публикация и тестирование сайта

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

Выбор хостинга

Для публикации сайта потребуется веб-хостинг. Существуют бесплатные и платные варианты:

GitHub Pages: Бесплатный хостинг для статических сайтов. Отличный выбор для небольших проектов и личных сайтов.
Netlify: Бесплатный и платный хостинг с поддержкой CI/CD. Подходит для более сложных проектов с автоматизацией.
Vercel: Бесплатный и платный хостинг с поддержкой Next.js. Идеален для проектов, использующих современные фреймворки.

Загрузка файлов на сервер

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

Тестирование сайта

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

Адаптивность дизайна: Убедитесь, что сайт корректно отображается на мобильных устройствах и планшетах.
Скорость загрузки: Проверьте, насколько быстро загружается ваш сайт. Медленная загрузка может отпугнуть пользователей.
Корректность отображения элементов: Убедитесь, что все элементы сайта отображаются правильно и работают как задумано.

Теперь вы знаете, как создать сайт с нуля на HTML. Удачи в ваших начинаниях! 😉

Какие теги HTML важно знать новичку

HTML расшифровывается как HyperText Markup Language. Это особый язык разметки, который позволяет создавать сайты и просматривать их в интернете. Благодаря HTML можно публиковать разные элементы, например, текст, таблицы, иллюстрации и видеоролики. Также он позволяет расположить контент на странице так, как нужно, выстроить взаимосвязи между его частями и определить их функции.

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

<!DOCTYPE html>. Обозначение типа документа, который обозначает версию HTML.
<html>. Основной тег, включающий весь код на странице. Это контейнер для всех остальных элементов: иными словами, он помогает группировать контент.
<head>. Включает метаданные. В тег <head> можно добавлять ключевые слова для SEO-продвижения и перелинковки со сторонними сайтами.
<title>. Определяет заголовок страницы: именно в таком виде пользователь видит его в браузере.
<body>. Включает видимую часть контента. Поэтому все, что будет доступно пользователю, нужно заключить в этот тег.
<h1> – <h6>. Теги, обозначающие заголовки. Например, <h1> — основной заголовок, обычно это название всей страницы. А <h2> — подзаголовок, название раздела.
<p>. Тег, который используется для формирования текстовых блоков.
<a>. Гиперссылка. Позволяет размещать ссылки на другие страницы или сторонние ресурсы.
<img>. Тег для размещения картинок.
<ul>, <ol>. Списки — нумерованные и маркированные соответственно.
<table>. Тег для добавления таблиц.
<form>. Нужен для вставки форм обратной связи, чтобы пользователи могли отправлять данные на сервер.

Как выглядит базовая HTML-структура. Источник

Как стилизовать код на HTML с помощью CSS

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

У CSS есть несколько основных свойств, которые нужно знать для работы с HTML-кодом:

color. Обозначает цвет текстовых блоков.
background-color. Определяет цвет фона любого элемента страницы.
font-size. Обозначает размер шрифта.
margin. Устанавливает внешние отступы — расстояние между разными элементами.
padding. Добавляет внутренние отступы, то есть расстояние между границей и содержимым элемента.
border. Определяет границу элемента — ширину, стиль, оттенок.

Как JavaScript делает сайты на HTML удобнее

Чтобы создавать интерактивные и удобные для пользователей страницы, нужно знать JavaScript — язык программирования, благодаря которому интерфейс будет реагировать на команды пользователей. Например, показывать уведомления или открывать всплывающее окно при нажатии на определенную кнопку. Иными словами, JavaScript нужен, чтобы создать видимую часть сайта — фронтенд (frontend).

Для работы с JavaScript важно знать основные концепции этого языка программирования:

Переменные. Нужны для хранения информации и обозначаются ключевыми словами var, let или const.
Функции. Блоки с кодом для реализации конкретных команд.
События. То, что происходит после выполнения пользователем определенных действий. Например, когда человек кликает мышкой на определенный значок, открывается меню сайта.

Среда для разработки сайта на HTML

Чтобы сделать сайт на HTML, понадобится обычный текстовый редактор, например, блокнот, или IDE — интегрированная среда разработки. Чаще всего программисты используют такие инструменты:

Visual Studio Code. Бесплатный текстовый редактор, который поддерживает разные языки программирования и подходит для создания веб- и облачных приложений. Работает на операционных системах Windows, Linux и macOS. Важно различать Visual Studio Code и Visual Studio, потому что последний — это не текстовый редактор, а IDE. Этот инструмент более масштабный, но тяжеловесный и сложный в освоении.
Atom. Бесплатный текстовый редактор для Linux, macOS, Windows, который поддерживает плагины, написанные на JavaScript. Инструмент легко настраивать под себя, поэтому его часто выбирают новички.
Sublime Text. Кроссплатформенный текстовый редактор для написания кода на разных языках, в том числе HTML, CSS и JavaScript. Также с его помощью можно верстать веб-страницы. Инструмент платный, но есть бесплатная ознакомительная версия.
Notepad++. Один из самых популярных бесплатных текстовых редакторов для Windows. Внешне он напоминает блокнот, но инструмент более функциональный. Важно различать Notepad++ и Notepad. Последний — это обычный «Блокнот», который по умолчанию есть на разных устройствах Windows.

Notepad++ можно использовать не только для написания кода, но и для заметок или создания текстов

Создание сайта на HTML: основные этапы

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

Этап 1. Создайте HTML-структуру

Откройте текстовый редактор и добавьте такой код:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta charset="UTF-8">

    <title>Отель "Добрые лапки"</title>

</head>

<body>

    <div class="wrapper">

        <header class="header">

            <div>

                Logo

            </div>

            <nav class="menu">

                <a class="menu__item" href="#">Главная</a>

                <a class="menu__item" href="#">Услуги</a>

                <a class="menu__item" href="#">Контакты</a>

                <a class="menu__item" href="#">Отзывы</a>

            </nav>

        </header>

        <main class="main">

            <section class="about">

                <h2>Добро пожаловать в отель для кошек «Добрые лапки»!</h2>

                <p>

                    В нашем отеле ваши питомцы будут чувствовать себя как дома.

                    Предлагаем круглосуточное наблюдение за хвостиками, полноценное питание, уход и приятную компанию!

                </p>

                <p>

                    Также у нас можно купить товары для ваших любимцев

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

                </p>

            </section>

        </main>

        <footer class="footer">

            <div>

                Телефон: +7(ххх)-ххх-хх-хх

            </div>

            <div>

                Email: mail@mail.ru

            </div>

        </footer>

    </div>

</body>

</html>

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

Так выглядит сайт на HTML для пользователей

Этап 2. Добавьте стилей с помощью CSS

Чтобы стилизовать страницу, например, придать оттенки тексту и задать нужные шрифты, вставьте такой код в раздел <head>:

<style>

    body {

        font-family: Arial, sans-serif;

        margin: 0;

        padding: 0;

        background: #f7f0f0;

    }

    .wrapper {

        display: flex;

        flex-direction: column;

        min-height: 100vh;

    }

    .header {

        display: flex;

        justify-content: space-between;

        padding: 20px;

        border-bottom: 1px solid #000000;

    }

    .menu {

        display: flex;

        gap: 15px;

    }

    .menu__item {

        color: #000000;

        text-decoration: none;

    }

    .main {

        padding: 20px;

    }

    .about {

        text-align: center;

    }

    .footer {

        margin-top: auto;

        padding: 20px;

        border-top: 1px solid #000000;

    }

</style>

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

Как выглядит сайт после стилизации с помощью CSS-кода

Этап 3. Придайте интерактивности с помощью JavaScript

В раздел <body> вставьте такой JS-код:

<script>

    document.addEventListener('DOMContentLoaded', function() {

        const linkContacts = document.querySelector('.menu__item_contacts');

        const modal = document.querySelector('.modal');

        const modalClose = modal.querySelector('.modal__close')

        linkContacts.addEventListener('click', function(event) {

            event.preventDefault();

            modal.classList.add('modal_active');

        });

        modalClose.addEventListener('click', function(event) {

            event.preventDefault();

            modal.classList.remove('modal_active');

        });

    });

</script>

Мы написали код на JS, который показывает окно с контактами при нажатии на пункт меню «Контакты». Также добавили код, который закрывает данное окно при нажатии на крестик.

После внедрения кода на JavaScript страница преобразилась

Как создать сайт на HTML: коротко о главном

HTML — это язык разметки, который используется для создания веб-страниц. Он позволяет отформатировать код так, чтобы сайт выглядел корректно и структурировано в браузере. Например, можно задать заголовки, абзацы, добавить списки, иллюстрации, таблицы и определить местоположение каждого элемента.
Кроме HTML, для создания сайта нужно знать основы языка стилизации CSS и уметь писать код на JavaScript. Первый нужен, чтобы задать внешний вид всем элементам страницы — от фона до заголовков. А второй позволяет сделать сайт более удобным для пользователей благодаря интерактивности.

Источник

Как создать свой первый веб-сайт с HTML, CSS и JavaScript

Создание веб-сайта может показаться сложной задачей, но на самом деле это увлекательный процесс, который можно легко освоить! В этой статье мы покажем вам, как создать простой веб-сайт с использованием трех основных технологий: HTML, CSS и JavaScript. Вы поймете, какой файл за что отвечает и как эти технологии работают вместе. Давайте начнем! 🚀

Что такое HTML?

HTML (HyperText Markup Language) — это основа любого веб-сайта. Он создаёт структуру страницы, указывая, где будут располагаться текст, изображения, ссылки и другие элементы. Представьте, что HTML — это как каркас здания, который задает форму вашему сайту. Без этого «каркаса» сайт просто не будет существовать.

HTML не заботится о том, как будет выглядеть страница или какие действия она будет выполнять. Он просто организует контент и предоставляет структуру для всего остального. В HTML используются различные теги, такие как <h1>, <p>, <div>, <a>, которые помогают создавать контент на странице.

Давайте рассмотрим самые важные элементы, которые вам понадобятся при создании сайта:

<html>: Этот тег указывает, что это HTML-документ. Он оборачивает весь контент страницы.
<head>: В этом разделе указываются метаданные страницы, такие как заголовок страницы, ссылки на стили и скрипты.
<body>: Здесь располагается основное содержимое вашего сайта, которое будет отображаться пользователям.
<h1>, <h2>, <h3> и так далее: Теги заголовков, которые используются для организации текста.
<p>: Этот тег используется для создания параграфов текста.
<a>: Ссылка, которая позволяет пользователю перейти на другую страницу или ресурс.

Пример простого HTML-кода:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой первый сайт</title>
  </head>
  <body>
    <header>
      <h1>Добро пожаловать на мой сайт!</h1>
    </header>
    <main>
      <p>Это мой первый веб-сайт, и я использую HTML, CSS и JavaScript!</p>
    </main>
    <footer>
      <p>© 2025 Все права защищены</p>
    </footer>
  </body>
</html>

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

Что такое CSS?

CSS (Cascading Style Sheets) — это то, что превращает ваш сайт из простого набора текста в красивую и удобную страницу. Если HTML — это каркас здания, то CSS — это отделка, цвета, шрифты и стили, которые делают ваш сайт привлекательным.

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

Основные способы использования CSS:

Inline CSS: Применяется непосредственно к элементу HTML, с помощью атрибута style.
Internal CSS: Стили размещаются внутри тега <style> в разделе <head> вашего HTML-файла.
External CSS: Стили хранятся в отдельном файле, который подключается к HTML-документу через тег <link>.

Пример CSS для стилизации сайта:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

main {
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
  position: fixed;
  width: 100%;
  bottom: 0;
}

Этот CSS-код изменяет внешний вид страницы: устанавливает шрифт для всего сайта, задаёт цвета для фона и текста, а также делает футер фиксированным внизу страницы.

Что такое JavaScript?

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

Если HTML задаёт структуру, а CSS — стиль, то JavaScript добавляет «жизнь» вашему сайту. Например, при помощи JavaScript можно сделать так, чтобы кнопка меняла цвет при наведении мыши или чтобы при клике открывалось новое окно.

JavaScript позволяет сайту реагировать на действия пользователя: клики, ввод текста, прокрутку страницы и другие события.

Пример JavaScript для интерактивности:

document.getElementById("myButton").onclick = function() {
  document.getElementById("message").innerText = "Ты нажал кнопку!";
};

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

Как все это работает вместе?

Теперь, когда мы разобрались с каждым компонентом, давайте посмотрим, как HTML, CSS и JavaScript работают вместе. Для этого создадим три файла:

index.html — это файл, который содержит структуру сайта.
styles.css — это файл, который определяет внешний вид сайта.
script.js — это файл, который добавляет интерактивность и действия на сайт.

Пример структуры проекта:

Представьте, что у нас есть следующие файлы:

index.html — основной файл, который будет загружать наш сайт.
styles.css — файл, который задаёт стиль страницы.
script.js — файл для добавления интерактивности.

1. index.html

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой первый сайт</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Добро пожаловать на мой сайт!</h1>
    </header>
    <main>
      <p>Это мой первый веб-сайт!</p>
      <button id="myButton">Нажми меня!</button>
      <p id="message"></p>
    </main>
    <footer>
      <p>© 2025 Все права защищены</p>
    </footer>
    <script src="script.js"></script>
  </body>
</html>

2. styles.css

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

main {
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
  position: fixed;
  width: 100%;
  bottom: 0;
}

3. script.js

document.getElementById("myButton").onclick = function() {
  document.getElementById("message").innerText = "Ты нажал кнопку!";
};

Заключение

Поздравляю! Вы только что создали свой первый веб-сайт. Теперь вы понимаете, как HTML, CSS и JavaScript работают вместе, чтобы создать полноценную веб-страницу. Это только начало — с этими знаниями вы сможете создавать более сложные и интерактивные проекты! 🚀

Не забывайте, что практика — это ключ к успеху. Чем больше вы экспериментируете и создаете, тем более опытным разработчиком становитесь. Удачи вам в вашем пути веб-разработки! 😊

Источник

Серёжа СыроежкинКопирайтер

Сегодня мы разберемся как создать сайт в блокноте при помощи HTML. HTML-документ должен иметь следующую структуру:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Как создать сайт с нуля - "Нубекс"</title>
 </head>
 <body>
  <h1>Мой первый сайт в блокноте HTML</h1>
  <p>Привет! Это мой первый сайт.</p>
 </body>
</html>

Скопируйте приведенный код в блокнот (Notepad) и сохраните на компьютере в формате .html. Чтобы теперь посмотреть на нашу веб-страницу, откройте сохраненный файл с помощью браузера (Правой кнопкой мыши -> Открыть с помощью).

Большинство тегов, которые используются в нашем коде уже были рассмотрены в предыдущих статьях:

html — корневой тег документа, является контейнером веб-страницы;
head — в этом теге указываются основные данные, касающиеся генерации веб-страницы (заголовок, стили, скрипты, мета-теги и так далее);
body — основной тег страницы. Представляет собой «тело» документа, внутрь которого помещаются остальные теги;
<!DOCTYPE html> — указывает на тип документа (Doctype);
meta — используется для указания метаданных страницы (в нашем случае тег указывает на кодировку страницы. Подробнее о мета-тегах читайте в статье Мета-теги);
title — задает непосредственный заголовок страницы (Тег title);
H1 — заголовок страницы/статьи (подзаголовки задаются тегами H2-H6);
P — тег, с помощью которого выделяются абзацы в тексте страницы;

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>ООО Василий Пупкин</title>
 </head>
 <body>
  <h1>Информация о нашей компании</h1>
	<center><img src="we.jpg" width="30%" /></center>
    <h2>Кто мы?</h2>
	<p>Мы - комманда профессионалов.</p>
    <h2>Наши услуги</h2>
	<h3>Создание сайтов</h3>
	  <p>Мы создаем по-настоящему крутые сайты.</p>
	<h3>Продвижение сайтов</h3>
	  <p>Ваш сайт в ТОП-3 поисковых систем через 2 дня.</p>
	<h3>Посадка картошки</h3>
	  <p>20 соток в час.</p>
     <h2>Контакты</h2>
	<div id="map">Карта проезда: 
	   ...	
	</div>
	<p>Телефон: 0000</p>
 </body>
</html>

Основная информация о создании сайта при помощи конструктора сайтов «Нубекс» описана в статье: Как правильно создать сайт.

Смотрите также:

Источник

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

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

Для этого понадобится готовый дизайн сайта собственного производства или скачанный из сети psd исходник. Его нужно раскроить для верстки html.
Блокнот, а именно NotePad++. Его можно скачать с официально сайта.
Файл index.html. Его можно создать в любой удобной папке на компьютере. Но лучше выдели отдельную папку для своего сайта и размести его там. У меня это папка c:\site\index.html
Файл c:\site\style.css. Это файл стилей, зачем он нужен станет понятно позже.
Папка c:\site\images. В эту папку нужно поместить все изображения нужные для будущего сайта.
Купить хостинг и домен если нужно сайт выложить в интернете

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

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Заголовок страницы для браузера</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
 </head>
 <body>
  <h1>Заголовок страницы</h1>
  <!-- Комментарий -->
  <p>Абзац.</p>
   
 </body>
</html>

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<html>...</html>

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

<head>...</head>

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

<body>...</body>

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

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

{module 110}

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div id="basic">
     
    </div>
</body>
</html>

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

/*Каркас сайта*/
body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}
img {border:0;}
a {color:#ff9c00;}
a:hover {text-decoration:none;}

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

Шапка сайта

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

<!-- Шапка сайта -->
    <div id="head-site">
    <a href="/"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
    <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />
</div>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div id="basic">
     
        <!-- Шапка сайта -->
        <div id="head-site">
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />
        </div>
         
    </div>
</body>
</html>

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

/*Шапка сайта*/
li.none-bg {background:none!important;}
.telefon {float:right;}

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

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

<!-- Шапка сайта -->
            <div id="head-site">
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />
        </div>

Этот код:

<!-- Верхнее меню сайта -->
    <div id="menu-top">
        <div class="bg-1">
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li class="none-bg"><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div class="bg-2"></div>
    </div>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div id="basic">
     
        <!-- Шапка сайта -->
        <div id="head-site">
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />
        </div>
         
        <!-- Верхнее меню сайта -->
        <div id="menu-top">
        <div class="bg-1">
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li class="none-bg"><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div class="bg-2"></div>
        </div>
         
    </div>
</body>
</html>

А в файл style.css:

/*Верхнее меню сайта*/
#top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}
.bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:#fff; background:#ff9c00;}

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

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

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

<!-- Верхнее меню сайта -->
<div id="menu-top">
......
</div>

Добавляем следующее:

<!-- Левое меню и Контент -->
            <div id="content">
             
            <!-- Контент - правый блок -->
            <div class="right">
                <h1>Кофе Американо</h1>
                <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
 
                <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
                 
                <img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />
                <img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />
                <img src="/images/img3.png" alt="" title="" />
 
                <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
 
                <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
 
                <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
 
                <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
            </div>
             
            <!-- Левое меню - левый блок блок -->
            <div class="left">
                <div id="left-menu">
                    <div class="block-nad-menu"></div>
                    <div class="block-menu">
                    <ul>
                    <li><a href="#">Кофе Айриш</a></li>
                    <li><a href="#">Кофе Американо</a></li>
                    <li><a href="#">Кофе Глясе</a></li>
                    <li><a href="#">Кофе Диппио</a></li>
                    <li><a href="#">Кофе Капучино</a></li>
                    <li><a href="#">Кофе Кон Панна</a></li>
                    <li><a href="#">Кофе Коретто</a></li>
                    <li><a href="#">Кофе Латте</a></li>
                    <li class="none-bg"><a href="#">Кофе Лунго</a></li>
                    </ul>
                    </div>
                    <div class="block-pod-menu"></div>
                </div>
             
            </div>
         
        </div>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div id="basic">
     
        <!-- Шапка сайта -->
        <div id="head-site">
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />
        </div>
         
        <!-- Верхнее меню сайта -->
        <div id="menu-top">
        <div class="bg-1">
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li class="none-bg"><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div class="bg-2"></div>
        </div>
         
        <!-- Левое меню и Контент -->
        <div id="content">
         
            <!-- Контент - правый блок -->
        <div class="right">
                <h1>Кофе Американо</h1>
                <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
  
                <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
                  
                <img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />
                <img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />
                <img src="/images/img3.png" alt="" title="" />
  
                <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
  
                <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
  
                <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
  
                <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
           
        </div>
             
        <!-- Левое меню - левый блок блок -->
        <div class="left">
            <div id="left-menu">
                <div class="block-nad-menu"></div>
                <div class="block-menu">
                <ul>
                <li><a href="#">Кофе Айриш</a></li>
                <li><a href="#">Кофе Американо</a></li>
                <li><a href="#">Кофе Глясе</a></li>
                <li><a href="#">Кофе Диппио</a></li>
                <li><a href="#">Кофе Капучино</a></li>
                <li><a href="#">Кофе Кон Панна</a></li>
                <li><a href="#">Кофе Коретто</a></li>
                <li><a href="#">Кофе Латте</a></li>
                <li class="none-bg"><a href="#">Кофе Лунго</a></li>
                </ul>
                </div>
            <div class="block-pod-menu"></div>
            </div>
              
        </div>
          
        </div>
          
    </div>
</body>
</html>

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

/*Левое меню и Контент*/
#content {width:960px; padding:20px 0 0 0; }
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h1 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#ff9c00;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}
.block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}
li.none-bg {background:none!important;}

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

Подвал сайта

После блока:

<!-- Левое меню - левый блок блок -->
<div class="left">
...
</div>

Вставляем:

<div class="myclr"></div>
         
        <!-- Подвал -->
        <div id="podval">
            <div class="yellow"></div>
            <div class="p1">ООО “Кофейня” 2015г.<br/>
            г. Москва, ул Революционная 1а</div>
            <div class="p3"><img src="/images/stat.png" alt="" title="" /></div>
            <div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
             
        </div>
        <div class="myclr"></div>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div id="basic">
     
        <!-- Шапка сайта -->
        <div id="head-site">
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />
        </div>
         
        <!-- Верхнее меню сайта -->
        <div id="menu-top">
        <div class="bg-1">
            <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Отзывы</a></li>
            <li><a href="#">Забронировать столик</a></li>
            <li><a href="#">Наши клиенты</a></li>
            <li class="none-bg"><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div class="bg-2"></div>
        </div>
         
        <!-- Левое меню и Контент -->
        <div id="content">
         
            <!-- Контент - правый блок -->
            <div class="right">
                <h1>Кофе Американо</h1>
                <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
 
                <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
                 
                <img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />
                <img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />
                <img src="/images/img3.png" alt="" title="" />
 
                <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
 
                <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
 
                <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
 
                <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
             
            </div>
             
            <!-- Левое меню - левый блок блок -->
            <div class="left">
                <div id="left-menu">
                    <div class="block-nad-menu"></div>
                    <div class="block-menu">
                    <ul>
                    <li><a href="#">Кофе Айриш</a></li>
                    <li><a href="#">Кофе Американо</a></li>
                    <li><a href="#">Кофе Глясе</a></li>
                    <li><a href="#">Кофе Диппио</a></li>
                    <li><a href="#">Кофе Капучино</a></li>
                    <li><a href="#">Кофе Кон Панна</a></li>
                    <li><a href="#">Кофе Коретто</a></li>
                    <li><a href="#">Кофе Латте</a></li>
                    <li class="none-bg"><a href="#">Кофе Лунго</a></li>
                    </ul>
                    </div>
                    <div class="block-pod-menu"></div>
                </div>
             
            </div>
         
        </div>
         
        <div class="myclr"></div>
         
        <!-- Подвал -->
        <div id="podval">
            <div class="yellow"></div>
            <div class="p1">ООО “Кофейня” 2015г.<br/>
            г. Москва, ул Революционная 1а</div>
            <div class="p3"><img src="/images/stat.png" alt="" title="" /></div>
            <div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
        </div>
        <div class="myclr"></div>
         
    </div>
</body>
</html>

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

/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #4c281e; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}

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

/*Каркас сайта*/
body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:500px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}
img {border:0;}
a {color:#ff9c00;}
a:hover {text-decoration:none;}
 
/*Шапка сайта*/
#head-site {height:70px;}
li.none-bg {background:none!important;}
.telefon {float:right;}
 
/*Верхнее меню сайта*/
#top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}
.bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:#fff; background:#ff9c00;}
 
/*Левое меню и Контент*/
#content {width:960px; padding:20px 0 0 0; }
 
/*Контент - правый блок*/
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h1 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}
 
/*Левое меню - левый блок*/
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#ff9c00;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}
.block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}
 
 
/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #4c281e; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Мой первый сайт на html</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
    <!-- Основной блок сайта -->
    <div id="basic">
     
        <!-- Шапка сайта -->
        <div id="head-site">
            <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
            <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />
        </div>
         
        <!-- Верхнее меню сайта -->
        <div id="menu-top">
        <div class="bg-1">
            <ul>
            <li><a href="/o-nas.html">О нас</a></li>
            <li><a href="/assortiment.html">Ассортимент</a></li>
            <li><a href="/otzivi.html">otzivi.html</a></li>
            <li><a href="/zabronirovat-stolik.html">Забронировать столик</a></li>
            <li><a href="/nashi-klienty.html">Наши клиенты</a></li>
            <li class="none-bg"><a href="/kontakty.html">Контакты</a></li>
            </ul>
        </div>
        <div class="bg-2"></div>
        </div>
         
        <!-- Левое меню и Контент -->
        <div id="content">
         
            <!-- Контент - правый блок -->
            <div class="right">
                <h1>Кофе Американо</h1>
                <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
 
                <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
                 
                <img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />
                <img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />
                <img src="/images/img3.png" alt="" title="" />
 
                <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
 
                <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
 
                <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
 
                <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
             
            </div>
             
            <!-- Левое меню - левый блок блок -->
            <div class="left">
                <div id="left-menu">
                    <div class="block-nad-menu"></div>
                    <div class="block-menu">
                    <ul>
                    <li><a href="/kofe-ayrish.html">Кофе Айриш</a></li>
                    <li><a href="/kofe-amerikano.html">Кофе Американо</a></li>
                    <li><a href="/kofe-glyase.html">Кофе Глясе</a></li>
                    <li><a href="/kofe-dippio.html">Кофе Диппио</a></li>
                    <li><a href="/kofe-kapuchino.html">Кофе Капучино</a></li>
                    <li><a href="/kofe-kon-panna.html">Кофе Кон Панна</a></li>
                    <li><a href="/kofe-koretto.html">Кофе Коретто</a></li>
                    <li><a href="/kofe-latte.html">Кофе Латте</a></li>
                    <li class="none-bg"><a href="/kofe-lungo.html">Кофе Лунго</a></li>
                    </ul>
                    </div>
                    <div class="block-pod-menu"></div>
                </div>
             
            </div>
         
        </div>
        <div class="myclr"></div>
         
        <!-- Подвал -->
        <div id="podval">
            <div class="yellow"></div>
            <div class="p1">ООО “Кофейня” 2015г.<br/>
            г. Москва, ул Революционная 1а</div>
            <div class="p3"><img src="/images/stat.png" alt="" title="" /></div>
            <div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
             
        </div>
        <div class="myclr"></div>
         
    </div>
</body>
</html>

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

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

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

Источник

Пройдите тест, узнайте какой профессии подходите

Введение в HTML и основные понятия

Подготовка рабочей среды

Выбор текстового редактора

Установка веб-браузера

Создание базовой структуры HTML-документа

Объяснение кода

Добавление контента и элементов оформления

Добавление изображений

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

Форматирование текста

Пример расширенной структуры

Публикация и тестирование сайта

Выбор хостинга

Загрузка файлов на сервер

Тестирование сайта

Читайте также

Какие теги HTML важно знать новичку

Как стилизовать код на HTML с помощью CSS

Как JavaScript делает сайты на HTML удобнее

Среда для разработки сайта на HTML

Создание сайта на HTML: основные этапы

Этап 1. Создайте HTML-структуру

Этап 2. Добавьте стилей с помощью CSS

Этап 3. Придайте интерактивности с помощью JavaScript

Как создать сайт на HTML: коротко о главном

Как создать свой первый веб-сайт с HTML, CSS и JavaScript

Что такое HTML?

Пример простого HTML-кода:

Что такое CSS?

Пример CSS для стилизации сайта:

Что такое JavaScript?

Пример JavaScript для интерактивности:

Как все это работает вместе?

Пример структуры проекта:

1. index.html

2. styles.css

3. script.js

Заключение

Смотрите также:

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

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

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

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

Шапка сайта

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

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

Подвал сайта

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