Как создать сайт с нуля — «Нубекс»

Как сделать — Веб сайт самостоятельно

Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбуке, планшете и телефоне.

Создать сайт с нуля

Сайт «Проект макета»

Это может быть разумно, чтобы нарисовать макет проекта страницы перед созданием веб-сайта:

Навигационная панель

Боковое содержание

Какой-то текст какой-то текст..

Main Content

Какой-то текст какой-то текст..

Какой-то текст какой-то текст..

Какой-то текст какой-то текст..

Подвал

Первая шаг — базовая HTML страница

HTML — это стандартный язык разметки для создания веб сайтов, а CSS — это язык, описывающий стиль HTML документа. Мы объединим HTML и CSS для создания базовой веб страницы.

Примечание: Если вы не знаете HTML и CSS, мы предлагаем вам начать с чтения нашего HTML Учебник.

Пример

Мой сайт

Сайт, созданный мной.

Объяснение примера

• Декларация определяет этот документ как HTML5
• Элемент — корневой элемент HTML-страницы
• Элемент — содержит метаданные о документе
• Элемент — задает заголовок для документа
• Элемент — должен определять набор символов, который будет UTF-8
• Элемент — с name=»viewport» сайт хорошо выглядит на всех устройствах и разрешениях экрана
• Элемент — содержит стили для сайта (макет/дизайн)
• Элемент — содержит видимое содержимое страницы
• Элемент — определяет большой заголовок
• Элемент

  определяет параграф

Создание содержимого страницы

Внутри элемента нашего сайта, мы будем использовать наш «Макет проекта» для создания:

• Заголовок
• Навигационная панель
• Основное содержание
• Боковое содержание
• Подвал

Заголовок

Заголовок обычно расположен в верхней части веб-сайта (или прямо под верхним меню навигации). Он часто содержит логотип или название веб-сайта:

Затем мы используем CSS для стилизации заголовка:

.header <
padding: 80px; /* немного отступов */
text-align: center; /* текст по центру */
background: #1abc9c; /* зеленый фон */
color: white; /* белый цвет текста */
>

/* Увеличить размер шрифта элемента */
.header h1 font-size: 40px;
>

Навигационная панель

Панель навигации содержит список ссылок, которые помогают посетителям перемещаться по вашему сайту:

Используйте CSS для стилизации панели навигации:

/* Стиль верхней панели навигации */
.navbar overflow: hidden; /* Скрыть переполнение */
background-color: #333; /* Темный цвет фона */
>

/* Стиль ссылок на панели навигации */
.navbar a float: left; /* Убедитесь, что ссылки остаются бок о бок */
display: block; /* Измените отображение на блок, по причинам отзывчивости (см. ниже) */
color: white; /* Белый цвет текста */
text-align: center; /* Текст по центру */
padding: 14px 20px; /* Добавить некоторые отступы */
text-decoration: none; /* Удалить подчеркивание */
>

/* Выровненная по правому краю ссылка */
.navbar a.right float: right; /* Переместите ссылку вправо */
>

/* Изменение цвета при наведении / наведении курсора мыши */
.navbar a:hover background-color: #ddd; /* Серый цвет фона */
color: black; /* Черный цвет текста */
>

Создайте макет из 2 столбцов, разделенный на «Боковое содержание» и на «Основное содержание».

Мы используем CSS Flexbox для обработки макета:

/* Обеспечения правильного выбора размера */
* box-sizing: border-box;
>

/* Контейнер колонка */
.row <
display: flex;
flex-wrap: wrap;
>

/* Создайте два неравных столбца, которые находятся рядом друг с другом */
/* Боковая панель/левая колонка */
.side flex: 30%; /* Установите ширину боковой панели */
background-color: #f1f1f1; /* Серый цвет фона */
padding: 20px; /* Немного отступов */
>

/* Основная колонка */
.main flex: 70%; /* Установите ширину основного содержимого */
background-color: white; /* Белый цвет фона */
padding: 20px; /* Немного отступов */
>

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

/* Адаптивный макет — когда экран меньше, чем 700px широкий, сделать два столбцы складываются друг на друга, а не рядом друг с другом */
@media screen and (max-width: 700px) .row <
flex-direction: column;
>
>

/* Адаптивный макет-когда экран меньше 400 пикселей в ширину, сделайте навигационные ссылки стекаются друг на друга, а не рядом друг с другом */
@media screen and (max-width: 400px) .navbar a float: none;
width: 100%;
>
>

Совет: Чтобы создать другой вид макета, просто измените ширину flex (но убедитесь, что он добавляет до 100%).

Совет: Вам интересно, как работает правило @media? Подробнее об этом читайте в главе CSS Медиа запросы.

Совет: Чтобы узнать больше о модуле гибкая компоновка коробки, прочитайте нашу главу CSS Flexbox.

Что такое размер коробки?

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

Вы можете прочитать больше о свойстве box-sizing в нашем CSS Размер коробки Учебник.

Подвал

Наконец, мы добавим нижний колонтитул.

.footer <
padding: 20px; /* Немного отступов */
text-align: center; /* Текст по центру */
background: #ddd; /* Серый фон */
>

Поздравляю! Вы создали адаптивный сайт с нуля.

Источник

Как создать сайт HTML

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

      
Мой первый сайт в блокноте HTML
 
Привет! Это мой первый сайт.
  

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

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

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

      
Информация о нашей компании
  
Кто мы?
 
Мы - комманда профессионалов.
 
Наши услуги
 
Создание сайтов
 
Мы создаем по-настоящему крутые сайты.
 
Продвижение сайтов
 
Ваш сайт в ТОП-3 поисковых систем через 2 дня.
 
Посадка картошки
 
20 соток в час.
 
Контакты
 
Карта проезда: .
 
Телефон: 0000