Учебные материалы
Содержание:
Преимущества HTML сайтов
В нем нет лишнего кода и весит он совсем ничего, поэтому имеет высокую скорость загрузки страниц, что очень нравится поисковикам.
На таком небольшом веб-ресурсе не будут сами собой плодиться дубли страниц и появляться битые ссылки, что не редкость для различных движков. Будет просто сделать анализ сайта, состоящего из нескольких страниц и устранить все возможные ошибки. Можно даже не заказывать модуль по Анализу блога.
Главную страницу и URL такого проекта можно заточить под какой-нибудь прибыльный ВЧ или СЧ запрос (например, конкретный товар или партнерский продукт). Добавляем релевантные НЧ запросы на несколько других страниц и ставим с них ссылки на главную. Тем самым мы максимально поднимем ее вес и вероятность выхода в ТОП (про внешнюю оптимизацию тоже не забываем). А это целевой трафик и продажи, то есть профит.
Кроме того, создавая сайт HTML, мы легко пропишем все важные мета-теги и контент в самом верху страницы, что тоже способствует успешному продвижению в поисковых системах. Сделать это, например, на WordPress человеку со слабыми знаниями языков HTML и CSS весьма проблематично. Уже слышу закономерный вопрос, а что возможно создать HTML сайт без знания этих языков? Представьте себе, можно. Причем не простую html страничку, а полноценный сайт с профессиональным дизайном.
Заголовки (H1-H6)
Я думаю не надо объяснять что такое заголовки. Но надо упомянуть, что в html существует 6 видов таких заголовков. Самый большой как правило ставится всего один раз на странице, а дальше по убывающей по степени вложенности. Например заголовок первого уровня может содержать в себе несколько заголовков второго уровня, а каждый заголовок второго уровня может содержать по нескольку заголовков 3-го уровня, и т.д.
Заголовки обозначаются следующими парными тегами:
Попробуйте скопировать это в документ между тэгами body и сохранить в формате html и вы увидите, что у вас получилось. А должно у вас получиться, как на рисунке ниже.
Понятие и назначение
Тег — это обязательный элемент языка гипертекстовой разметки html. Нужны эти знаки для того, чтобы говорить определенному куску контента (например тексту) каким он должен быть и как он должен себя вести. Благодаря таким тегам мы можем сделать текст больше, меньше, жирнее, изменить цвет, поставить фон, создать ссылку, поставить картинки, влепить текст в таблицу и многое другое.
Теги бывают парные и одиночные, но одиночных на самом деле очень мало (сегодня мы пройдем один из них). Все парные теги действуют по принципу: Сначала ставится открывающий тег, потом идет контент, а потом ставится закрывающий, причем закрывающий ставится точно также как и открывающий, только с добавлением слэша (/). Тогда контент, который находится внутри изменится в соответствии с командой, которую ему дали, например сменить цвет.
На практике это выглядит так
<tag>Контент</tag>
Но главное следить за правильностью, потому что если вы что-то забудете или неправильно поставите, то вы не увидите ожидаемый результат. Приведу пример неправильного оформления
Несколько тегов могут применяться к одному контенту, в таком случае их нужно использовать по принципу матрёшки:
ШАГ 2: изменяем цвета
Возможно, вы видите некоторый черный текст на белом фоне, но это
зависит от конфигурации браузера. Для того чтобы страница выглядела
более стильно, мы можем сделать очень легко одну простую вещь —
добавить цвета. (Оставьте окно браузера открытым — мы к нему еще
вернемся)
Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим
CSS стили и HTML разметку в разные файлы. Раздельное хранение
хорошо тем, что легче использовать те же самые стили для множества
HTML файлов: Вам нужно написать CSS стили только один раз. Но на
этом шаге мы оставим все в одном файле.
Нам нужно добавить элемент <style> к HTML файлу.
Определения стилей будут внутри этого тэга. Возвращаемся к
редактору и добавляем следующие пять строчек в заголовок HTML кода
между тэгами <head> и </head>. Строки, которые надо
добавить выделены красным (с 5-й по 9-ю).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
<body>
Первая строка говорит браузеру о том, что это таблица стилей и
что она написана на CSS (“text/css”). Вторая строка говорит, что мы
применяем стиль к элементу “body”. Третья устанавливает цвет текста
в пурпурный, а следующая устанавливает цвет фона в желто-зеленый
оттенок.
Таблицы стилей CSS создаются согласно правилам. Каждое
правило состоит из трех частей:
-
селектор (в нашем примере: “body”), которые
говорит о том, к какой части документа применить правило; -
свойство (в нашем примере свойствами являются
‘color’ и ‘background-color’), которое указывает что именно мы
устанавливаем у данного элемента, выбранного селектором; - и значение (‘purple’ и ‘#d8da3d’), которое
устанавливает значение атрибута.
Наш пример показывает что правила могут быть скомбинированы. Мы
установили два свойства, так же мы могли задать их раздельно:
body { color: purple }
body { background-color: #d8da3d }
но поскольку оба правила относятся к body мы записали “body”
один раз и поместили свойства и значения вместе. Для получения
большей информации о селекторах смотрите главу 2 из Lie & Bos.
Фон элемента body так же является фоном целого документа. Мы
явно не назначили другим элементам (p, li, address…) фона, так что
по умолчанию у них его нет (или он прозрачный). Свойство ‘color’
устанавливает цвет текста элемента body, но все остальные элементы
внутри body наследуют этот цвет, пока для них не задан другой в
виде другого правила. (Мы добавим другие цвета позже.)
Теперь сохраните этот файл (используйте команду “Сохранить” или
“Save” из файлового меню) и переключитесь обратно в браузер. Если
вы нажмете кнопку “обновить” , то изображение сменится со “скучной”
страницы на разукрашенную (но все еще однообразную) страницу. Кроме
ссылок сверху, весь текст должен быть пурпурный на желто-зеленом
фоне.
Теперь браузер показывает страницу к которой мы добавили цвет.
Работа с таблицами стилей CSS
Нами ранее была сформирована таблица стилей CSS, но вот что-либо добавить туда, мы пока не удосужились. Начнём с написания для сайта такого кода HTML:
* {
box-sizing:border-box;
}
.main {
width:1170px;
margin:0 auto;
border: 5px solid black;
}
Звездочка обозначает – любые элементы,
то есть все. Теперь рамки, отступы, не будут увеличивать ширину блоков, а для
установления правил, определяющих внешний вид веб-страницы, нам придётся
обратиться к классу main, задав ряд команд:
- ширина контейнера;
- отображение по центру;
- добавление рамок чёрного цвета с каждой из сторон.
Теперь можно с помощью HTML задать внешний вид
ключевых структурных блоков:
.menu {
margin:0 0 40px 0;
padding:0px;
}
.menu li {
display:inline-block;
width:auto;
padding:7px 15px;
}
.footer {
background-color:#f4f4f4;
}
Принцип работы заключается в
обращении к существующим элементам, у каждого из которых есть персональный
идентификатор или класс. У тега класс прописывается в свойстве class=”myname” и в CSS файле записывается .myname, а идентификатор
по аналогии id=”myname2″
и #myname2.
Изначально задаём стиль для шапки
сайта, сделав для неё рамку, позволяющую визуально отделить этот раздел от
прочих блоков. Теперь основная задача заключается в смещении в сторону боковой
колонки, которая по умолчанию будет отображаться сверху вниз, то есть так, как
прописана в нашем коде. Добиться отображения блока в требуемом формате можно
задав для сайдбара основные показатели:
- ширина;
- высота;
- правило float: left – прижатие компонента к
левой стороне родительского компонента.
Внимание! Идентичное свойство задаётся разделу с контентом,
прижимающемуся с той же стороны, но после колонки. После этого пишем блок
«Подвал», который по умолчанию не
высокий и имеет свойство clear, препятствующее наезду на разделы «Контент»
и «Боковая колонка», считающиеся
плавающими
«Подвал» теперь будет видеть эти блоки и всегда размещаться под
ними, но при условии, что ему будет задана команда clear: both
После этого пишем блок
«Подвал», который по умолчанию не
высокий и имеет свойство clear, препятствующее наезду на разделы «Контент»
и «Боковая колонка», считающиеся
плавающими. «Подвал» теперь будет видеть эти блоки и всегда размещаться под
ними, но при условии, что ему будет задана команда clear: both.
- Фон прописывается контейнеру по классу .content и
задаётся сразу для всего сайта. - Отдельно задаётся для каждого из блоков, для
подвала, шапки, контента и т.д.
Рекомендую дать сайт общий цвет, воспользовавшись одним кодом:
.main {backgroun-color:#f9f9f9;}
В видео уроке я немного дописал таблицу стилей и вот что получилось.
Архивархив с готовым сайтом на HTML
Стоимость создания сайта
Создание сайта на основе шаблона дешевле, чем создание с нуля. И цены на этот вид услуг сильно разнятся. Например создание одностраничного сайта у freelance разработчиков может варьироваться от 2500 р. до 20000 руб. А разработка Landing Page якобы с нуля стоит от 20000 руб, а у кого-то от $599. Хотя грамотно сделанный одностраничник — это по сути обычный лендинг. ))) Посмотрите на этот прекрасный минималистичный шаблон одностраничника:
Нажмите на фото для просмотра сайта
ну чем не лендинг? А вот минималистичный адаптивный одностраничник с галереей с категориями — портфолио (nano-folio):
Nano Folio-это простой HTML-шаблон сайта. Нажмите на фото для просмотра сайта
Сколько может стоить такая лаконичность? Как понять какие деньги вам придется потратить и не остаться разочарованным? Для начинающих свой бизнес в интернет самым предсказуемым вариантом будет создание сайта на основе шаблона, во первых он уже полностью готов в плане конструктива и функционала, в демо-версиях есть наполнение графикой и вы всегда можете увидеть “ваш будущий сайт” в работе, вам останется только заменить текст и графику на свои и запустить на своём домене и хостинге. Ориентируйтесь на компании занимающиеся профессиональным созданием сайтов, у них огромное количество своих разработок, поэтому каждый новый сайт — это по сути уже разработка использующая предыдущие наработки, т.е. почти по шаблону. )) Смотрите их цены и делите на 5. )) Это будет более-менее адекватная, начальная цена за создание сайта фрилансером на основе качественного шаблона, если конечно, вам не понадобиться правка кода и добавление новых функций. К примеру возьмем компанию занимающуюся созданием сайтов с 2007 г. Вот их расценки на 3 февраля 2021 г.
Понятно, что там работает не один человек, поэтому цены не самые маленькие но и не очень большие. ) И в нашем случае мы рассматриваем только “Сайты визитки”, “Одностраничные сайты” (они же лендинги в определенных случаях), “Промо-сайты” и “Многостраничные сайты”.
Бесплатные домены и хостинги
Не все знают, что свой собственный домен можно зарегистрировать совершенно бесплатно, конечно — это не домены в популярных зонах типа RU или COM, но иногда — это и не нужно. Так же большинство хостинг-провайдеров предоставляют возможность бесплатного хостинга.Таким образом разместить свой собственный сайт можно ! Но бесплатный вариант годится только для персонального использования в виде сайта-резюме или сайта-портфолио, и не подходит для коммерческих сайтов.Материл скоро появится.
Структура 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-документ.
Код примет следующий вид:
kartinka.jpeg – это наш логотип, далее следует команда, что логотип не должен повторяться и разместиться она должна по центру сверху и снизу, сместившись от начала блока на 5% по горизонтали.
Теперь убираем надпись «Здесь будет шапка» и пишем красивый заголовок.
Надо будет его красиво оформить, задав нужные стили:
Мы задали следующие свойства:
- размер и семейство шрифта;
- отступ слева;
- прижали заголовок к левому краю;
- выбрали цвет шрифта;
- верхний внутренний отступ;
- тень текста.
Теперь наша шапка готова. В реальности она может содержать различные ссылки, номера телефонов и т.п.
Оформление меню в сайдбаре
В сайдбаре кроме меню есть различные виджеты. Для создания меню нам понадобятся ссылки, которые будут вести на другие страницы сайта.
Зададим стили:
Можно перед меню добавить красиво оформленный заголовок.
Добавим статью и наш блок готов.
Не забываем прописывать теги заголовков:
Заголовки можно оформить цветом.
Как оформить подвал
Я не имею привычки что-то пихать в подвал. Обычно в футере размещают сведения об авторских правах. В данном случае и мы сделаем также.
Мы просто выровняем подвал по центру:
Вот и все, мы создали html файл в блокноте.
Наш файл содержит: логотип, название, сайдбар с меню, статью, футер. Чтобы сделать сайт привлекательным мы добавили стили, прописав их в файле .css.
Технические моменты
Собрав семантику, зарегистрировав домен и выбрав хостинг можно приступать к техническим моментам. Для начала выберем движок сайта.
4.1. Движок
Движок сайта — это программа (скрипт), которая отвечает за функционирование сайта. Фактически является ядром сайта. От него зависит скорость работы сайта, функционал и удобство.
Движков очень много. Каких только не создали уже. Они делятся на платные и бесплатные. Какой лучше использовать — это большая тема для рассуждения. У каждого есть свои плюсы и минусы. Рекомендую прочитать как выбрать движок для сайта, чтобы ориентироваться в этой теме.
Движок сайта зависит от ранее рассмотренных целей. Для каждого вида сайта существуют специализированные движки.
1. Для сайта-визитки и корпоративных сайтов подойдут:
WordPress, Joomla, 1С-Битрикс, UMI.CMS, Wix, uKit, Jimdo
3. Новостной и информационные сайты:
WordPress, Joomla, Drupal
4. Блог
WordPress, DLE
5. Форум
phpBB
4.2. Конструкторы сайтов
Помимо движков сайтов многие выбирают онлайн «конструкторы». Конструктор сайта — это упрощенный инструмент для создания сайта. Этот вариант очень хорошо подойдет для тех, кто заинтересован в краткосрочной перспективе что-то продать или сделать самый простенький сайт визитку.
Конструкторы сильно ограничивают функционал сайта и вносимые изменения со стороны создателя. По сути Вы можете сделать только то, что разрешено. А разрешено не так уж и много. Например, использовать конструкторы для создания сайтов под заработок на рекламе и прочее — бессмысленно.
Как я уже сказал, этот вариант хорошо подойдет только в случае, если от сайта не ждать каких-то результатов.
Бесплатные конструкторы сайта:
Подробный обзор каждого сервиса читайте в статье: обзор бесплатных конструкторов сайтов
4.3. Самостоятельная разработка сайта
Можно воспользоваться обычным блокнотом и уже в нем создать html-сайт. Правда он будет не динамичным и, скорее всего, очень примитивным. Для создания функциональных сайтов обязательно надо разделять исходный код сайта от базы данных.
Самостоятельная разработка движка под силу только профессионалам. Новички могут попробовать написать примитивные движки сайта на php. Однако это будет скорее интерес, чем качественный продукт. Чтобы исправить все «косяки» движка необходимы годы отладки (если мы говорим про функциональный сайт).
Для самостоятельной разработки сайта с нуля потребуются много знаний:
- PHP-уроки
- HTML-уроки и советы
- Уроки CSS
- Как сделать сайт на PHP
4.4. Разработка дизайна
Следующим этапом создания сайта является — разработка дизайна сайта. Есть несколько вариантов как поступить
- Создать самостоятельно. Этот вариант подойдет только для профессионалов. Надо владеть Фотошопом, знаниями HTML и CSS.
- Использовать шаблоны
- Заказать у фрилансеров (биржи и сайты фриланса)
Чем популярнее движок сайта, который Вы выбрали ранее, тем проще под него найти сделать дизайн. Например, под популярные CMS типо WordPress, Joomla, Drupal есть тысячи бесплатных шаблонов, которые можно использовать прямо сейчас. Вряд ли хватит сил пересмотреть их все.
Конечно, делая серьезные сайты лучше использовать не бесплатные шаблоны, а уникальный дизайн. Это ценится в поисковых машинах. Для этого можно заказать создания дизайна у фрилансеров. Стоимость подобной работы не высока. В среднем чек находится от 3000 до 10000 рублей.
4.5. Сайт на https (SSL-сертификат)
Все новые сайты есть смысл создавать только на протоколе https (защищенный), поскольку это стало важно для SEO-оптимизации. Для того, чтобы сайт был с таким протоколом необходимо приобрести SSL-сертификат
Структура любого сайта
Любой html-документ или сайт размечаются с помощью специальных тэгов. Тэг — это специальный знак, который дает команду сайту, как правильно нужно отображать тот или иной кусок содержимого, заключенный в него. Сейчас я подробно на этом останавливаться не буду, так как о тэгах я собираюсь рассказать вам в своей следующей статье.
Скажу лишь, что большинство тэгов парные, то есть сначала ставится открывающий, а после того, как мы написали информацию, надо закрыть тег. Закрывается он точно также как и открывается, только перед закрытием надо поставить знак «/».
В общем для функционирования нам нужно проставить несколько обязательных тэгов. Давайте посмотрим, что они из себя представляют.
- <html></html> — это главный тэг, благодаря которому мы говорим сайту, что сейчас будем писать тут на языке HTML, так что пусть не беспокоится. С него должен начинаться сайт и им же закрываться.
- <head></head> — сюда заносится служебная информация, например название документа, описание и многие другие. Ставится сразу после открытого тэга <html>.
- <title></title> — Между этими значениями мы пишем заголовок страницы, то есть это название будет отображаться не в самом содержимом сайта, а во вкладке браузера. Данный тип ставится между <header> и </header>.
- <body></body> — этот тэг отвечает за отображение содержимого на сайте. То есть всё, что вы напишите между этими тэгами будет отображаться на веб-странице.
Я так чувствую, что не все всё поняли, и у некоторых осталась каша в голове, поэтому я всё покажу вам на живом примере.
Этапы разработки веб-проекта
Работа проводится в несколько этапов:
- Подготовка макета, позволяющего получить
визуальный образ с помощью растровых редакторов. Также удобно рисовать макет на
листе бумаги. - Вёрстка
из макета psd, создаваемого дизайнером в программе Photoshop, с последующей адаптацией к
мобильным устройствам и проведением
тестирования, позволяющего корректно отображаться HTML сайту во
всех браузерах. - Верстка HTML макета на систему управления сайтом или язык PHP, что позволяет сделать
веб-ресурс динамичным.
Макет делают в графических
редакторах, таких как Adobe Photoshop, в котором нужно открыть новый документ,
с присвоением ему имени MySite. Чтобы добиться корректного отображения выбираем
большое разрешение от 1170 пикселей по ширине и более 800 px по высоте.
Осталось активировать изображение
направляющими и линейками, которые обязательно должны быть привязаны к границам
формируемого документа. Пользуясь
инструментами «Текст», «Форма», «Прямая», «Раскройка» добавляют необходимые
элементы страницы, делая полноценный шаблон сайта HTML.
Вёрстка заключается в размещении
всех блоков в текстовом файле index.html., который надо начать со строки
<!DOCTYPE html>, чтобы браузер знал, как проводить обработку содержимого.
Затем размещаются теги, содержащие отображаемую и скрытую от пользователя
информацию.
Внимание! Теги …, а точнее информация,
размещённая между ними, не будет видна пользователям. Организация текста на страницах
преимущественно осуществляется основными тегами:
Организация текста на страницах
преимущественно осуществляется основными тегами:
- <div>…</div>
- <p>…</p>
- <table>…</table>
- Списками
<ul><li>…</li></ul>
Формат отображения отдельных
элементов, располагающихся на сайте, задаётся тегами HTML напрямую или таблицей CSS, что
наиболее предпочтительно, поскольку, таким образом можно повторно использовать
стили компонентов.
Внимание! Задать таблицу CSS можно в рамках
, но чаще всего это делают в файле style.css, помещая внутри тегов
ссылку на него. Надо правильно разместить эту ссылку, пользуясь соответствующим тегом HTML:
Надо правильно разместить эту ссылку, пользуясь соответствующим тегом HTML: <link href=”style.css” type=”text/css” rel=”stylesheet”>.
ЕЩЁ
Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe
