Виды сайтов

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

Коммерческие сайты-Сайты коммерческой направленности служат для получения прибыли за счёт продажи товаров и услуг либо их рекламы.
Интернет-магазин представляет собой сайт со сложным функционалом, предназначенный для продажи товаров или услуг.
Cайты услуг-Такие сайты содержат сведения о предоставляемых услугах – юридических, парикмахерских, репетиторских и т.д.
Сайт-визитка отличается лаконичным дизайном, состоит из одной или нескольких страниц и содержит краткие сведения о своем владельце. 
Лендинг (landing page) – одностраничный ресурс, созданный для рекламы какого-либо продукта.
Портфолио-галерея представляет собой презентацию работ компании или специалиста и создаётся, чтобы показать опыт и мастерство. 
Промо-сайт – это интернет-ресурс, созданный с целью продвижения основного сайта компании, какого-либо конкретного продукта или товарной группы. 
Блог представляет собой ленту постов, где пользователи могут оставлять комментарии и участвовать в дискуссиях. 

https://altblog.ru/vidy_sajtov/

Редакторы сайтов

Оффлайн программы для создания сайтов – это специализированный софт, упрощающий процесс создания и редактирования сайтов прямо на компьютере.

WordPress – универсальный движок, позволяющий собирать и публиковать блоги, магазины, визитки всех типов, порталы, лендинги, форумы и всё остальное, что может прийти в голову.
Mobirise – это бесплатный оффлайн конструктор для самостоятельного создания сайтов на своем ПК или ноутбуке.
Adobe Dreamweaver – среда создания сайтов для профессиональных разработчиков. 
FrontPage – очень древний визуальный HTML-редактор от Microsoft. 
Notepad++ – бесплатный текстовый редактор, быстрый и лёгкий.

https://uguide.ru/luchshie-programmy-dlya-sozdaniya-sajtov

Основы web-дизайна

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

https://webformyself.com/uroki-veb-dizajna-s-nulya-osnovy-xoroshego-dizajna/

https://idbi.ru/blogs/blog/osnovnye-pravila-veb-dizayna

https://lifehacker.ru/25-sovetov-web-dizajneram/

Создание html документа

HTML документ - это обычный текстовой файл c расширением .html, который содержит HTML-код. HTML документ иначе ещё называют HTML файлом. Чтобы из обычного текстового файла (с расширением .txt) сделать HTML документ, нужно сменить расширение с .txt на .html. Открыть файл, сохраненный с расширением .html, для просмотра в браузере можно двумя способами: Windows
1. Кликнуть по нему два раза левой кнопкой мыши, в этом случае HTML документ откроется в том браузере, который выбран по умолчанию.
2. Кликнуть по нему ПКМ → навести курсор на открыть с помощью... → выбрать нужный браузер.
При получении HTML документа браузер будет отображать его в виде веб-страницы (веб-страница - это то, что отображается в окне браузера). Рассмотрим это на примере. Создадим HTML-документ и расположим в нём следующий HTML-код:

<html>
 <head>
 <meta charset="utf-8">
 <title>Заголовок</title>
 </head>
<body>
<h1>Мой первый заголовок</h1>
<p>Мой первый абзац</p>
 </body>
</html>

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

https://puzzleweb.ru/html/00_teacher2.php

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

Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов <b> и <i>

http://htmlbook.ru/content/formatirovanie-teksta

Вставка изображений в документ с помощью html

Для добавления изображения в документ применяется тег <img>, его атрибут src определяет путь к графическому файлу, который должен быть в формате GIF, PNG или JPEG. Также для тега <img> необходимо указать обязательный атрибут alt, он описывает альтернативный текст видимый в процессе загрузки изображения или при отключении картинок в браузере.
<img src="путь к файлу" alt="альтернативный текст">

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

Чтобы добавить фоновую картинку на веб-страницу, задайте путь к изображению внутри значения url стилевого свойства background, которое в свою очередь добавляется к селектору body.
Общий синтаксис добавления фона следующий.
<style>
  body { background: url(путь к файлу); }
</style>
http://htmlbook.ru/faq/kak-dobavit-fonovyy-risunok-na-veb-stranitsu

Работа с цветами фона и текстом

Цвет фона является достаточно важным элементом любой веб-страницы. Во-первых, он задает нужное настроение и общий настрой сайта, а во-вторых, облегчает восприятие текста.
Цвет фона веб-страницы задается с использованием атрибута bgcolor тега <body>.
 <body bgcolor="#c0c0c0">
http://htmlbook.ru/content/tsvet-fona

Тег <font> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.
<font size="5" color="red" face="Arial">П</font>
http://htmlbook.ru/html/font

Оформление html-документа

Использование семантики облегчает восприятие html-кода страницы и понимание логического и функционального назначения каждого тега. В HTML существует довольно много тегов, которые в своем названии несут четкую семантику: <a>, <p>, <i>, <menu>. 
Структуру html-тегов необходимо делать по сетке дизайна. "Колонки" и логические блоки одного уровня обязательно помещайте в контейнер.
https://dev.1c-bitrix.ru/learning/course/index.php?COURSE_ID=43&LESSON_ID=4641&LESSON_PATH=3913.4776.4640.4641
https://html5book.ru/osnovy-html/

Таблицы

Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>.
http://htmlbook.ru/samhtml/tablitsy

Создание списков

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега <ol>, который и применяется для создания списка. Каждый пункт нумерованного списка обозначается тегом <li>, как показано ниже.
<ol>
 <li>Первый пункт</li>
 <li>Второй пункт</li>
 <li>Третий пункт</li>
</ol>
http://htmlbook.ru/samhtml/spiski/numerovannyy-spisok

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

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <a>. Общий синтаксис создания ссылок следующий.
<a href="URL">текст ссылки</a>
Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое контейнера <a> является ссылкой. Текст, расположенный между тегами <a> и </a>, по умолчанию становится синего цвета и подчеркивается. 
http://htmlbook.ru/samhtml/ssylki

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

Тег <marquee> создает бегущую строку на странице. На самом деле содержимое контейнера <marquee> не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.
 <marquee behavior="alternate" direction="left" bgcolor="#ffcc00">
    Бегущая строка
  </marquee>
http://htmlbook.ru/html/marquee

Фреймы

Несмотря на то, что сайты с фреймами встречаются все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. К тому же фреймы в каком-то смысле заняли свою нишу и применяются для систем администрирования и справки. Там, где недостатки фреймов не имеют особого значения, а преимущества наоборот, активно востребованы.
Для создания фрейма используется тег <frameset>, который заменяет тег <body> в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги <frame>, которые указывают на HTML-документ, предназначенный для загрузки в область.
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фреймы</title>
 </head>
 <frameset rows="25%,75%">
   <frame src="top.html" name="TOP" scrolling="no" noresize>
   <frameset cols="100,*">
     <frame src="menu.html" name="MENU">
     <frame src="content.html" name="CONTENT">
   </frameset>
 </frameset>
</html>

http://htmlbook.ru/samhtml/freymy/sozdanie-freymov

Вставка видео на сайт

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. 
<html>
 <head>
  <meta charset="utf-8">
  <title>video</title>
 </head>
 <body>
  <video width="400" height="300" controls="controls" poster="video/duel.jpg">
   <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером. 
   <a href="video/duel.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>

http://htmlbook.ru/html/video

Вставка музыки на сайт

Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. 
 <head>
  <meta charset="utf-8">
  <title>audio</title>
 </head>
 <body>
  <p>Александр Клименков - Четырнадцать</p>
  <audio controls>
    <source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">
    <source src="audio/music.mp3" type="audio/mpeg">
    Тег audio не поддерживается вашим браузером. 
    <a href="audio/music.mp3">Скачайте музыку</a>.
  </audio>
 </body>
</html>

http://htmlbook.ru/html/audio

Навигация сайта

Тег <nav> задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.
<html>
 <head>
  <meta charset="utf-8">
  <title>nav</title>
 </head> 
 <body>
  <header>
    <h1>Чебурашка и крокодил Гена</h1>
  </header>
  <nav><a href="1.html">Чебурашка</a> | <a href="2.html">Гена</a> |
       <a href="3.html">Шапокляк</a> | <a href="4.html">Лариска</a></nav>
  <article>
    <h2>Добро пожаловать!</h2>
  </article>
 </body> 
</html>

http://htmlbook.ru/html/nav