Часто для создания сайтов разработчики используют HTML. Это наиболее доступный и простой способ сформировать любую веб-страницу — от юридических услуг до справочника по ботанике. С помощью этого языка получится сделать страницы с понятной структурой, а также наполнить их любым контентом.
В статье расскажем, как написать простой код на 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 с помощью 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.
Создание сайта на 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>
Это структура сайта. Здесь есть заголовок, описание страницы, контакты и разделы меню. Этот код в будущем легко дополнить любым контентом.
Этап 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-код помог задать стили сайту: оттенок фона, шрифты, выравнивание абзацев, внешний вид меню и футера. Благодаря этому страница стала более презентабельной, а значит сможет привлекать больше пользователей.
Этап 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, который показывает окно с контактами при нажатии на пункт меню «Контакты». Также добавили код, который закрывает данное окно при нажатии на крестик.
Как создать сайт на HTML: коротко о главном
- HTML — это язык разметки, который используется для создания веб-страниц. Он позволяет отформатировать код так, чтобы сайт выглядел корректно и структурировано в браузере. Например, можно задать заголовки, абзацы, добавить списки, иллюстрации, таблицы и определить местоположение каждого элемента.
- Кроме HTML, для создания сайта нужно знать основы языка стилизации CSS и уметь писать код на JavaScript. Первый нужен, чтобы задать внешний вид всем элементам страницы — от фона до заголовков. А второй позволяет сделать сайт более удобным для пользователей благодаря интерактивности.
Пройдите тест, узнайте какой профессии подходите
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы
Введение: Что такое HTML и зачем он нужен
HTML (HyperText Markup Language) — это основной язык разметки, используемый для создания веб-страниц. Он позволяет структурировать контент, добавлять текст, изображения, ссылки и другие элементы. HTML является основой любого веб-сайта и используется в сочетании с другими технологиями, такими как CSS и JavaScript, для создания полноценных веб-приложений. В этой статье мы рассмотрим, как создать простой сайт на HTML с нуля, следуя пошаговой инструкции.
HTML был разработан в конце 1980-х годов Тимом Бернерс-Ли и с тех пор стал основой для создания веб-страниц. Он позволяет разработчикам создавать структурированные документы, которые могут быть легко интерпретированы браузерами. HTML-документы состоят из различных элементов, таких как заголовки, параграфы, списки, изображения и ссылки, которые помогают организовать и представить информацию пользователям.
Шаг 1: Подготовка инструментов и создание проекта
Выбор текстового редактора
Для начала вам понадобится текстовый редактор. Существует множество вариантов, но для новичков подойдут следующие:
- Visual Studio Code — бесплатный и мощный редактор с множеством расширений. Он поддерживает различные языки программирования и имеет множество полезных функций, таких как автодополнение кода, подсветка синтаксиса и интеграция с системами контроля версий.
- Sublime Text — легкий и быстрый редактор с удобным интерфейсом. Он также поддерживает множество языков программирования и имеет богатый набор плагинов, которые могут расширить его функциональность.
- Notepad++ — простой и функциональный редактор для Windows. Он поддерживает множество языков программирования и имеет удобный интерфейс, что делает его отличным выбором для новичков.
Создание проекта
Создайте папку для вашего проекта на компьютере. Назовите её, например, my_first_website. Внутри этой папки создайте файл с расширением .html, например, index.html. Этот файл будет основной страницей вашего сайта. Создание проекта в отдельной папке поможет вам организовать файлы и легко управлять ими в процессе разработки.
Шаг 2: Основы HTML: создание первой страницы
Структура HTML-документа
Каждый HTML-документ имеет базовую структуру, которая включает следующие элементы:
<!DOCTYPE html>— объявление типа документа, указывающее, что используется HTML5. Это важно для обеспечения совместимости с современными браузерами.<html lang="en">— корневой элемент, содержащий весь контент страницы. Атрибутlangзадает язык документа, что помогает поисковым системам и браузерам правильно интерпретировать содержимое.<head>— содержит метаданные, такие как кодировка, описание и заголовок страницы. Метаданные не отображаются на странице, но они важны для SEO и правильного отображения страницы.<meta charset="UTF-8">— указывает кодировку символов. UTF-8 является стандартной кодировкой, поддерживающей большинство языков мира.<meta name="viewport" content="width=device-width, initial-scale=1.0">— обеспечивает корректное отображение на мобильных устройствах. Это важно для создания адаптивных веб-сайтов, которые хорошо выглядят на различных устройствах.<title>— заголовок страницы, отображаемый в браузере. Он также важен для SEO и помогает пользователям понять, о чем ваша страница.<body>— основной контент страницы. Все, что находится внутри этого тега, будет отображаться пользователям.
Добавление заголовка и параграфа
Теперь добавим заголовок и параграф в тело документа:
Заголовки и параграфы являются основными элементами для структурирования текста на веб-странице. Заголовки помогают организовать контент и делают его более читабельным, а параграфы используются для разделения текста на логические блоки.
Шаг 3: Добавление контента: текст, изображения и ссылки
Добавление текста
Текст на веб-странице можно структурировать с помощью различных тегов:
<h1> – <h6>— заголовки разного уровня. Заголовки первого уровня (h1) обычно используются для основного заголовка страницы, а заголовки второго уровня (h2) и ниже — для подзаголовков.<p>— параграфы. Параграфы используются для разделения текста на логические блоки и делают его более читабельным.<ul>и<ol>— неупорядоченные и упорядоченные списки. Неупорядоченные списки (ul) используются для элементов, которые не имеют определенного порядка, а упорядоченные списки (ol) — для элементов, которые должны быть представлены в определенном порядке.<li>— элементы списка. Каждый элемент списка (li) представляет собой отдельный пункт в списке.
Пример:
Добавление изображений
Для добавления изображений используется тег <img>. Пример:
src— путь к изображению. Убедитесь, что путь к изображению указан правильно, иначе изображение не будет отображаться.alt— альтернативный текст, отображаемый, если изображение не загрузилось. Альтернативный текст также важен для SEO и доступности, так как он помогает поисковым системам и пользователям с ограниченными возможностями понять, что изображено на картинке.
Добавление ссылок
Ссылки создаются с помощью тега <a>. Пример:
href— адрес ссылки. Убедитесь, что адрес указан правильно, иначе ссылка не будет работать.
Ссылки являются важной частью веб-страниц, так как они позволяют пользователям переходить на другие страницы и ресурсы. Вы можете использовать ссылки для навигации по вашему сайту или для предоставления дополнительной информации.
Шаг 4: Стилизация сайта с помощью CSS
Введение в CSS
CSS (Cascading Style Sheets) — это язык стилей, используемый для описания внешнего вида HTML-документа. С помощью CSS можно изменять цвета, шрифты, отступы и другие параметры. CSS позволяет отделить содержание от представления, что делает код более чистым и удобным для поддержки.
Подключение CSS
Создайте файл styles.css в папке вашего проекта и подключите его к HTML-документу:
Подключение внешнего файла стилей позволяет легко изменять внешний вид вашего сайта, не изменяя HTML-код. Это особенно полезно, если у вас есть несколько страниц, которые используют одни и те же стили.
Основные стили
Добавьте следующие стили в styles.css:
Эти стили изменят внешний вид вашего сайта, делая его более привлекательным и удобным для чтения. Вы можете экспериментировать с различными свойствами CSS, чтобы создать уникальный дизайн для вашего сайта.
Применение стилей
Теперь ваш сайт будет выглядеть более привлекательно:
Теперь у вас есть базовое понимание того, как создать простой сайт на HTML и стилизовать его с помощью CSS. Продолжайте экспериментировать и изучать новые возможности, чтобы улучшить свои навыки веб-разработки! 🚀
HTML и CSS являются основными инструментами для создания веб-страниц, и знание их основ поможет вам создавать красивые и функциональные сайты. Не бойтесь экспериментировать и пробовать новые вещи, так как это лучший способ научиться и стать более уверенным в своих навыках. Удачи в вашем пути к освоению веб-разработки!
Читайте также
Серёжа СыроежкинКопирайтер
Сегодня мы разберемся как создать сайт в блокноте при помощи 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, структуру HTML-документа и ключевые теги, которые позволят вам создать простые, но функциональные веб-страницы.
Вы получите необходимую базу, чтобы приступить к созданию своего первого веб-сайта.
Что такое HTML?
HTML, или язык разметки гипертекста (HyperTextMarkupLanguage), является стандартным языком для создания веб-страниц. Он используется для структурирования контента на странице, определения элементов, их функций и взаимосвязей. HTML использует различные теги и атрибуты, которые сообщают браузеру, как отображать содержимое веб-страницы.
Каждая веб-страница состоит из HTML-документа, который является основным строительным блоком сайта. Структура HTML-документа состоит из следующих элементов:
- <!DOCTYPE html>. Объявление типа документа, указывающее на версию HTML.
- <html>. Корневой элемент документа, обозначающий начало и конец HTML-кода.
- <head>. Этот элемент содержит метаинформацию о документе, такую как заголовок страницы, подключение CSS или JavaScript.
<body>. Основное содержимое веб-страницы располагается в этом элементе, включая текст, изображения, ссылки и другие элементы.
Основные теги HTML и их функциональность
HTML предоставляет множество тегов, каждый из которых выполняет свою функцию. Вот несколько основных тегов HTML и их функциональность.
- <h1>, <h2>, …, <h6>. Заголовки разного уровня, используются для структурирования заголовков страницы.
- <p>. Параграф, используется для отображения текстового контента.
- <a>. Гиперссылка, создает ссылки на другие веб-страницы или ресурсы.
- <img>. Вставка изображений на веб-страницу.
- <ul>, <ol>. Ненумерованные и нумерованные списки соответственно.
- <table>. Создание таблиц для представления данных в упорядоченной форме.
- <form>. Используется для создания форм, которые позволяют пользователям отправлять данные на сервер.
Это лишь небольшой набор тегов, и существует множество других тегов, которые позволяют реализовать различные функции и структуры на веб-страницах.
Выбор текстового редактора или интегрированной среды разработки (IDE)
Прежде чем мы начнем создавать веб-страницы с помощью HTML, вам потребуется текстовый редактор или интегрированная среда разработки (IDE). Выбор инструмента для написания кода — важный шаг, который влияет на вашу производительность и удобство работы.
Существует множество текстовых редакторов и IDE, и выбор зависит от ваших предпочтений. Некоторые популярные текстовые редакторы, которые отлично подходят для начинающих, включают.
- VisualStudioCode. Бесплатный и мощный текстовый редактор с широкими возможностями и поддержкой различных языков программирования.
- Atom. Еще один бесплатный и легкий в использовании редактор, разработанный GitHub.
- SublimeText. Легкий, быстрый и хорошо настраиваемый редактор.
- Notepad++. Бесплатный редактор для операционных систем Windows, поддерживающий различные языки.
Выберите тот, который соответствует вашим потребностям и скачайте его с официального сайта.
Создание базовой структуры HTML-документа
Когда у вас есть текстовый редактор или IDE, можно приступать к созданию базовой структуры HTML-документа. Вся веб-страница будет находиться внутри этой структуры. Вот простейший шаблон HTML.
Обратите внимание на следующие элементы.
- <!DOCTYPE html>. Это объявление типа документа и указывает на версию HTML, которую мы собираемся использовать (в данном случае HTML5).
- <html>. Открывающий тег корневого элемента документа, указывающий начало HTML-кода.
- <head>. Этот элемент содержит метаинформацию о документе, такую как заголовок страницы, подключение CSS или JavaScript.
- <title>. Заголовок вкладки браузера, который отображается, когда вы открываете веб-страницу.
- <body>. Основное содержимое веб-страницы располагается в этом элементе. Ваш контент, такой как текст, изображения, ссылки и другие элементы, будет размещаться внутри этого тега.
Сохранение и запуск первой веб-страницы
Теперь, когда у вас есть базовая структура HTML-документа, сохраним ее с расширением .html. Например, index.html — хорошее имя для вашего первого файла. Убедитесь, что файл сохранен в формате «Веб-страница, HTML» или аналогичном в вашем текстовом редакторе.
Чтобы запустить вашу первую веб-страницу, просто дважды кликните на файл index.html, и браузер откроет его. Вы увидите пустую страницу с заголовком, который вы указали в элементе <title>. Поздравляю, вы только что создали свою первую веб-страницу с использованием HTML!
Работа с текстом и изображениями
A. Форматирование текста с помощью HTML-тегов
Теперь, когда вы освоили базовую структуру HTML-документа, пришло время заполнить вашу страницу контентом. В HTML есть много тегов для форматирования текста. Вот несколько примеров.
B. Вставка изображений на веб-страницу
Изображения могут улучшить внешний вид вашей веб-страницы. Для вставки изображения используется тег <img> с атрибутом src, который указывает путь к файлу изображения. Вот пример.
Создание гиперссылок
Гиперссылки позволяют переходить с одной веб-страницы на другую. Для создания ссылки используется тег <a> с атрибутом href, который указывает целевой URL или путь к другой странице. Вот пример.
Таблицы и списки
Таблицы — отличный способ представления структурированных данных на веб-странице. Для создания таблицы в HTML используется элемент <table>, а для определения строк — элемент <tr>, столбцов — элемент <td>. Вот пример создания простой таблицы.
Создание упорядоченных и неупорядоченных списков
Списки используются для представления информации в упорядоченном или неупорядоченном формате. Для упорядоченных списков используется элемент <ol>, а для неупорядоченных — элемент <ul>. Каждый элемент списка представляется тегом <li>. Вот пример.
Формы и элементы управления
Формы используются для сбора информации от пользователей, такой как текстовые данные, флажки, переключатели и другие. Для создания формы используется элемент <form>, а для различных элементов управления — соответствующие теги, такие как <input>, <textarea>, <select> и т.д.
HTML предоставляет разнообразные элементы управления для форм. Некоторые из них.
- <input type=»text»>. Поле для ввода текста.
- <input type=»password»>. Поле для ввода пароля (текст отображается замаскированным).
- <input type=»checkbox»>. Флажок для множественного выбора.
- <input type=»radio»>. Радиокнопка для выбора одного варианта из нескольких.
- <input type=»submit»>. Кнопка для отправки данных формы.
- <textarea>. Многострочное текстовое поле.
- <select> и <option>. Выпадающий список с выбором одного варианта.
Семантическая разметка
Семантическая разметка в HTML обозначает значение и функциональность элементов на веб-странице. Это не только помогает поисковым системам лучше понимать контент вашего сайта, но и повышает доступность для пользователей с ограниченными возможностями.
HTML5 представил ряд семантических тегов, которые помогают более ясно определить структуру веб-страницы. Некоторые из них.
- <header>. Заголовочная часть страницы, обычно содержит логотип и навигацию.
- <nav>. Элемент для группировки навигационных ссылок.
- <main>. Основное содержимое страницы.
- <article>. Самостоятельный контент, который может быть переиспользован.
- <section>. Логическая секция контента.
- <aside>. Контент, связанный с основным содержимым страницы.
- <footer>. Нижняя часть страницы, содержит информацию об авторе, копирайт и другие.
Применение семантических тегов делает код более читаемым и понятным для разработчиков и браузеров, а также улучшает опыт пользователей на вашем сайте.
В этой части статьи мы рассмотрели создание таблиц, списков, форм и важность семантической разметки в HTML. Научившись использовать эти элементы, вы сможете создавать более удобные и информативные веб-страницы. В следующей части статьи мы погрузимся в работу с мультимедиа и стилизацией веб-страниц с помощью CSS.
Нужна поддержка разработчика в настройке микроразметки?
Задайте вопрос, и мы найдем подходящее решение.
Задать вопрос
Работа с мультимедиа
Веб-страницы становятся более интересными и привлекательными благодаря мультимедийным элементам, таким как видео и аудио. Для вставки видео используется тег <video>, а для аудио — тег <audio>.
Использование элемента canvas для рисования на странице
Элемент <canvas> позволяет создавать рисунки, графику и анимацию непосредственно на веб-странице с помощью JavaScript.
Стилизация с помощью CSS
CSS (CascadingStyleSheets) — язык стилей, используемый для оформления и внешнего вида веб-страниц. Он позволяет изменять цвета, шрифты, размеры, расположение элементов и многое другое, что делает дизайн веб-страниц более привлекательным и современным.
Стили CSS можно добавить в HTML-документ через встроенные стили <style>, внешние стили с помощью тега <link> или встроенные стили в элементы HTML с помощью атрибута style.
Адаптивный дизайн и мобильная совместимость
Современные веб-сайты должны быть адаптивными и хорошо выглядеть на разных устройствах, таких как компьютеры, планшеты и смартфоны. Адаптивный дизайн позволяет автоматически изменять макет и размеры элементов для оптимального отображения на различных экранах.
Медиа-запросы позволяют применять разные стили CSS для разных типов устройств. Например, вы можете использовать медиа-запросы для изменения размеров шрифтов или перестроения макета в зависимости от ширины экрана устройства.
Оптимизация производительности
Оптимизация изображений — это важная часть создания быстрых и эффективных веб-страниц. Вы можете использовать сжатие изображений и выбор правильных форматов, таких как JPEG для фотографий и PNG для изображений с прозрачностью.
Минимизируйте CSS и JavaScript файлы, чтобы уменьшить их размер. Также следите за порядком загрузки ресурсов на странице — сначала загружайте критически важные элементы.
Веб-разработка — это постоянно развивающаяся область, и есть много возможностей для улучшения навыков и изучения новых технологий. Продолжайте практиковаться, изучать новые инструменты и техники, и вы станете более опытным веб-разработчиком.
Профессиональная консультация веб-разработчика
Если у вас нетривиальная задача — вы можете привлечь профессионального разработчика — мы изучим цели и требования вашего проекта, а затем предложим оптимальное решение.
Подробнее
Создание сайта 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 (они не так сложны как кажется).