Если Ваш сайт в ближайшей перспективе не будет наполнятся большим количеством контента или сложным функционалом (интернет магазин, фриланс биржа, форум и прочее), то его лучше писать в блокноте или лучше в Notepad++ без использования CMS CMS (Content Management System) — система, которая предоставляет пользовательский интерфейс для создания и настройки сайта, а также управления контентом без навыков программирования.
- Для этого нужно определиться какую информацию мы хотим показать пользователям, будущий дизайн.
- Файл index.html. Его можно создать в любой удобной папке на компьютере, но лучше выделить отдельную папку(корень сайта) для своего сайта и размести его там. Сервер при обращении к домену или папке сайта без указания конкретного файла будет искать в ней index.html или index.php.
- Папка ...\images. В эту папку нужно поместить все изображения нужные для будущего сайта.
- Купить хостинг и домен у хостинг-провайдера если нужно сайт выложить в интернете
Теперь открываем наш индекс.чтмл в ноутпад и помешаем в него этот код. Это основа любого html-документа.
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png">
<title>Мой первый лендинг</title>
</head>
<body>
<!-- Так пишется комментарий -->
<p> body область для видимой части страницы </p>
</body>
</html>
Исполняем наш index.html в браузере и наблюдаем результат наших трудов...
Разберем код. Весь документ состоит из блоков, обрамленными открывающимися и закрывающимися ТЕГами <> </>. В кратце разберем что значат эти теги.
<!DOCTYPE html > Указываем браузеру по какому стандарту нужно отображать страницу: Бывают более информационные, например <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>...</html>Тег показывает где начинается и заканчивается html документ
<head>...</head> Тег необходим для размещения служебной информации, тут подключаются стили, скрипты и размещена meta информация страницы. Посетители сайта не видят содержимого этого тега.
<link ... > Тег ссылка. Закрывать не нужно. В данном случае отображает иконку сайта в браузере
<title>...</title> Тег показывает название сайта в браузере при наведении мышки на иконку
<body>...</body Тег содержит разметку страницы, содержимое видят пользователи сайта.
<p>...</p> создаёт блок, всё, что находится внутри него, начнётся с новой строки.
Структура html документа готова, начинаем верстать наш одностраничный сайт. Копируем(заменяем) код.
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png">
<title>Мой первый лендинг</title>
</head>
<body>
<h1> Лужу Паяю</h1>
<img src="./images/Lugy.jpg" alt=""/>
<img src="./images/Pajau.jpg" alt="лужу чайник"/>
<h2> Эвм Починяю </h2>
<img src="./images/Evm_pochinau.jpg" alt=""/>
<p>ЗВОНИТЬ 322233223332</p>
<button> <h1>ХОТИТЕ МЫ ВАМ ПЕРЕЗВОНИМ...... ЖМИТЕ</h1> </button>
</body>
</html>
Не забываем сохранить, исполняем или перегружаем страницу в браузере.
Разберем добавленные ТЕГи:
<h1> Лужу Паяю</h1>оформление заголовка.<h1>Самый важный заголовок</h1> <h2>Заголовок уровня 2</h2> <h3>Заголовок уровня 3</h3> <h4>Заголовок уровня 4</h4> <h5>Заголовок уровня 5</h5> <h6>Заголовок уровня 6</h6>
<img src="./images/Lugy.jpg" alt=""/> Тег добавляет изображение на страницу, растровые, векторные — любые, поддержка форматов уже зависит от браузера. src= Обязательный атрибут. В качестве значения указывается адрес картинки. Абсолютная или относительная ссылка до файла в любом допустимом формате. alt=обязательный атрибут. Текст называется альтернативным описанием изображения и рассказывает словами, что изображено. Это полезно, если картинка не загрузилась.
<button>.....</button>Тег создаёт кликабельную кнопку. На кнопку можно поместить любой хтмл элемент, включая изображения. Мы поместили <h1></h1>
Сайт готов, можно выкладывать, НО корявый дизайн и кнопка призыва к действию не реагирует. Продолжаем. Подключаем к нашему коду Таблицу Каскадных Стилей CSS для дизайна, а кнопку оживим JavaScript.
Начнем со стилей. Это можно сделать двумя способами, с помощью тегов прямо в html или внешним файлом таблицы стилей, хранящимся в отдельном файле с расширением .css.
Мы пойдем другим путем (В.И. Ленин). Создадим в корне нашего сайта еще два файла, style.css и script.js, имя любое, расширение строго .css , js. ДжавуСкрипт пока не трогаем.
и подключим эти файлы в нашем index .html
Атрибут rel="stylesheet" указывает, что этот файл является таблицей стилей. В href указывается относительный или абсолютный путь к CSS-файлу.
В файле .css пишется все то же самое, что и во внутренних стилях. И наоборот: во внутренних стилях внутри тегов <style> можно писать все то же самое, что и в файле .css. Разница только в том, что внешние стили могут применяться сразу к нескольким страницам HTML и даже ко всему сайту целиком.
Начинаем стилизацию в файле style.css. Пишем в этом файле
Не забываем сохранить, перегружаем(исполняем) наш сайт. Все заголовки h1 стали коричневыми(brown) и расположились по центру относительно родителя. "Лужу Паяю"- родитель body, "ХОТИТЕ МЫ ВАМ ПЕРЕЗВОНИМ...... ЖМИТЕ" - родитель кнопка, тег button.
CSS представляет из себя правило или набор правил, описывающих форматирование (изменение внешнего вида) отдельных элементов на веб-странице. Правило, состоит из двух частей: селектора и следующим за ним блоком объявлений. На изображении ниже показана структура (синтаксис) правила:
Сделаем рамку синего цвета на изображениях и кнопке, расположим их по центру. объединив эти элементы html в КЛАСС. Имя любое, обрамленная кавычками.
Свойство text-align можно использовать для выравнивания изображений или другого элемента html, но в данном случае не сработает, ко всем сразу обращаться нельзя. B помощь ДИВ <div></div>.
Элемент <div> группирует или оборачивает другие элементы и семантически ничего не значит, пользователь увидит пустое место на экране. Можно представить этот тег как универсальную коробку. В неё можно положить что угодно или не класть ничего и просто оформить как нужно.
Обернем два верхних рисунка в див и присвоим этой "коробке" класс block-top, (<div class="block-top">). С помощью этого класса, в файле style.css растянем блок див по всему экрану поровну, зарезервируем место под будущий анимационный банер, вставив див в див.
Делаем вывод по вёрстке. Браузер парсит страницу сверху вниз, четко размечайте с помощью ТЕГов html(<>...</>) свои желания. Присваивайте класс или классы ТЕГам и через них применяйте каскадную таблицу стилей .CSS, селектор{свойство:значение;}. Тегов, свойств и их значений много, плюс минус тысяча. На первое время достаточно штук 50.
Ну и теперь давайте применим JavaScript для нашего сайта. Призовем пользователей совершить действие(CTA) миганием текста на кнопке.
Присваиваем ТЕГу <h1> на кнопке идентификатор id, например <h1 id="migaet">...<h1> и с помощью этого ид анимируем текст, будем менять цвет текста с частотой 1 сек.
Простой, не оптимизированный код js. Объяснения выходят за рамки статьи, задача показать, как html, css и JavaScript слажено работают.
Через ид можно стилизовать. Растянем текст на 1000 пикселей. Текст растянет кнопку. Выглядит это так
Похоже все. Для детального изучения тегов, атрибутов, свойств и их значений множество статей. Переходим СЮДА...