Как составить свою web страницу

Была ли эта статья полезной?

Время на прочтение
13 мин

Количество просмотров 1.2M

Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.

Часть 1. Верстка стандартными средствами

Преимущество данной верстки состоит в том, что код получается более «чистым», а значит быстрее загружается и легче изменяется под специфические нужды. Недостаток такой верстки заключается в том, что она требует значительно больше времени, чем при использовании фреймворков.

Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.

Структура файлов

Первым шагом давайте создадим простую структуру файлов для наших файлов.

• Создаем папку с названием нашего проекта, например Whitesquare.
• В ней создаем пустой файл index.html.
• В папке проекта создаем папку css с пустым файлом styles.css.
• В папке проекта создаем пустую папку images.

Предварительный осмотр

После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:

• Как будут нарезаться изображения?
• Какими будут основные стили?
• Какой макет у нас получится?

Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода. Давайте рассмотрим эти вопросы по-порядку.

Общие изображения

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

Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png

В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png

Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png

Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png

Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.

Основные стили

И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.

На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега.

Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.

Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.

Прописываем все эти стили в styles.css:

body {
	color: #8f8f8f;
	font: 12px Tahoma, sans-serif;
	background-color: #f8f8f8;
	border-top: 5px solid #7e7e7e;
	margin: 0;
}
input[type="text"] {
	background-color: #f3f3f3;
	border: 1px solid #e7e7e7;
	height: 30px;
	color: #b2b2b2;
	padding: 0 10px;
	vertical-align: top;
}
button {
	color: #fff;
	background-color: #29c5e6;
	border: none;
	height: 32px;
	font-family: 'Oswald', sans-serif;
}
p {
	margin: 20px 0;
}

В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».

Каркас HTML

И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:

<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title>Whitesquare</title>
	<link rel="stylesheet" href="css/styles.css" type="text/css">
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,300" type="text/css">

	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
</body>
</html>

Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.

Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет.

Макет

В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).

Опишем это в теге body:

<body>
	<div id="wrapper">
		<header></header>
		<nav></nav>
		<div id="heading"></div>
		<aside></aside>
		<section></section>
	</div>
	<footer></footer>
</body>

Wrapper используется для объединения блоков и их выравнивания по центру страницы.

Затем укажем стили блоков:

#wrapper {
	max-width: 960px;
	margin: auto;
}
header {
	padding: 20px 0;
}

Логотип

Вставляем логотип в тег header:

<header>
	<a href="/"><img src="" alt="Whitesquare logo"></a>
</header>

Дополнительных стилей не требуется.

Поиск

Вставляем форму поиска в тег header:

<header>
…
<form name="search" action="#" method="get">
	<input type="text" name="q" placeholder="Search"><button type="submit">GO</button>
</form>
</header>

И стили выравнивания по правому краю для нее:

form[name="search"] {
	float: right;
}

Меню

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

<nav>
	<ul class="top-menu">
		<li><a href="/home/">HOME</a></li>
		<li class="active">ABOUT US</li>
		<li><a href="/services/">SERVICES</a></li>
		<li><a href="/partners/">PARTNERS</a></li>
		<li><a href="/customers/">CUSTOMERS</a></li>
		<li><a href="/projects/">PROJECTS</a></li>
		<li><a href="/careers/">CAREERS</a></li>
		<li><a href="/contact/">CONTACT</a></li>
	</ul>
</nav>

CSS стили для него будут следующие:

nav a {
	text-decoration: none;
}

nav ul {
	margin: 0;
	padding: 0;
}

nav li {
	list-style-position: inside;
	font: 14px 'Oswald', sans-serif;
	padding: 10px;
}

.top-menu li {
	display: inline-block;
	padding: 10px 30px;
	margin: 0;
}

.top-menu li.active {
	background: #29c5e6;
	color: #fff;
}

.top-menu a {
	color: #b2b2b2;
}

Здесь мы указали, что для всех навигаций ссылки не будут иметь подчеркивания, убрали стандартные отступы для элементов списка, отобразили список горизонтально и указали нужные цвета и шрифт.

Заголовок страницы

Заголовок страницы помещается в div с идентификатором heading

<div id="heading">
	<h1>ABOUT US</h1>
</div>

Заголовок имеет следующие стили:

#heading {
	background: transparent url(../images/h1-bg.png);
	margin: 30px 0;
	padding-left: 20px;
}

h1 {
	display: inline-block;
	color: #7e7e7e;
	font: 40px/40px 'Oswald', sans-serif;
	background: url(../images/bg.png);
	margin: 0;
	padding: 0 10px;
}

Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.

Колонки

Для того, чтобы создать колонки страницы нужно прописать следующие стили:

aside {
	float: left;
	width: 250px;
}
section {
	margin-left: 280px;
	padding-bottom: 50px;
}

Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.

Подменю

Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:

<aside>
<nav>
	<ul class="aside-menu">
		<li class="active">LOREM IPSUM</li>
		<li><a href="/donec/">DONEC TINCIDUNT LAOREET</a></li>
		<li><a href="/vestibulum/">VESTIBULUM ELIT</a></li>
		<li><a href="/etiam/">ETIAM PHARETRA</a></li>
		<li><a href="/phasellus/">PHASELLUS PLACERAT</a></li>
		<li><a href="/cras/">CRAS ET NISI VITAE ODIO</a></li>
	</ul>
</nav>
</aside>

И применяем к подменю следующие стили:

.aside-menu li {
	font-weight: 300;
	list-style-type: square;
	border-top: 1px solid #e7e7e7;
}

.aside-menu li:first-child {
	border: none;
}

.aside-menu li.active {
	color: #29c5e6;
}

.aside-menu a {
	color: #8f8f8f;
}

Для подменю применяется более тонкий шрифт и квадратные маркеры. Для отображения разделителей рисуем верхнюю границу у каждого элемента списка, кроме первого.

Контент сайдбара

В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.

В html это выглядит так:

<h2>OUR OFFICES</h2>
<p><img src="images/sample.png" width="230" height="180" alt="Our offices"></p>

В стилях укажем шрифты, цвета и отступы:

aside > h2 {
	background: #29c5e6;
	font: 14px 'Oswald', sans-serif;
	color: #fff;
	padding: 10px;
	margin: 30px 0 0 0;
}

aside > p {
	background: #f3f3f3;
	border: 1px solid #e7e7e7;
	padding: 10px;
	margin: 0;
}

Данные стили применяются только к заголовкам и параграфам, лежащим непосредственно внутри сайдбара, но не глубже.

Цитата

Вёрстку контента начнём с добавления цитаты.

Добавим код цитаты в раздел section

<section>
<blockquote>
	<p>
		“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”
	</p>
	<cite>John Doe, Lorem Ipsum</cite>
	</blockquote>
</section>

И применим для него стили:

blockquote {
	margin: 0;
	background: #29c5e6;
	padding: 10px 20px;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
}

blockquote p {
	color: #fff;
	font-style: italic;
	font-size: 33px;
	margin: 0;
}

blockquote cite {
	display: block;
	font-size: 20px;
	font-style: normal;
	color: #1d8ea6;
	margin: 0;
	text-align: right;
}

Здесь нет ничего нового, так же — шрифты, фоны и отступы.

Контент

Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после

.



<p>Lorem ipsum dolor sit amet…</p>
<p>Donec vel nisl nibh…</p>
<p>Donec vel nisl nibh…</p>

<figure>
	<img src="images/sample.png" width="320" height="175" alt="">
</figure>
<figure>
	<img src="images/sample.png" width="320" height="175" alt="">
</figure>

figure {
	display: inline-block;
	margin: 0;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
}

figure img {
	display: block;
	border: 1px solid #fff;
	outline: 1px solid #c9c9c9;
}

figure figcaption {
	font-size: 16px;
	font-weight: 300;
	margin-top: 5px;
}

figure figcaption span {
	display: block;
	font-size: 14px;
	color: #29c5e6;
}
section > figure + figure {
	margin-left: 28px;
}

<h2>OUR TEAM</h2>

section > h2 {
	background: #29c5e6;
	font: 30px 'Oswald', sans-serif;
	font-weight: 300;
	color: #fff;
	padding: 0 10px;
	margin: 30px 0 0 0;
}

<div class="team-row">
	<figure>
		<img src="images/sample.png" width="96" height="96" alt="">
		<figcaption>John Doe<span>ceo</span></figcaption>
	</figure>
	<figure>
		<img src="images/sample.png" width="96" height="96" alt="">
		<figcaption>Saundra Pittsley<span>team leader</span></figcaption>
	</figure>
…
</div>
<div class="team-row">
	<figure>
		<img src="images/sample.png" width="96" height="96" alt="">
		<figcaption>Ericka Nobriga<span>art director</span></figcaption>
	</figure>
	<figure>
		<img src="images/sample.png" width="96" height="96" alt="">
		<figcaption>Cody Rousselle<span>senior ui designer</span></figcaption>
	</figure>
…
</div>

figure figcaption {
	font-size: 16px;
	font-weight: 300;
	margin-top: 5px;
}

figure div {
	font-size: 14px;
	color: #29c5e6;
}

.team-row figure {
	margin-top: 20px;
}

.team-row figure + figure {
	margin-left: 43px;
}

<footer>
	<div id="footer">
		<div id="twitter"></div> 
		<div id="sitemap"></div>
		<div id="social"></div>
		<div id="footer-logo"></div>
	</div>
</footer>

footer {
	background: #7e7e7e;
	color: #dbdbdb;
	font-size: 11px;
}

#footer {
	max-width: 960px;
	margin: auto;
	padding: 10px 0;
	height: 90px;
}

<div id="twitter">
	<h3>TWITTER FEED</h3>
	<time datetime="2012-10-23"><a href="#">23 oct</a></time>
<p>
	In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
</p>
</div>

footer h3 {
	font: 14px 'Oswald', sans-serif;
	color: #fff;
	border-bottom: 1px solid #919191;
	margin: 0 0 10px 0;
}

#twitter time a {
	color: #b4aeae;
}

footer p {
	margin: 5px 0;
}

#twitter {
	float: left;
	width: 300px;
}

#twitter p {
	padding-right: 15px;
}

<div id="sitemap">
	<h3>SITEMAP</h3>
	<div>
		<a href="/home/">Home</a>
		<a href="/about/">About</a>
		<a href="/services/">Services</a>
	</div>
	<div>
		<a href="/partners/">Partners</a>
		<a href="/customers/">Support</a>
		<a href="/contact/">Contact</a>
	</div>
</div>

footer a {
	color: #dbdbdb;
}

#sitemap {
	width: 150px;
	float: left;
	margin-left: 20px;
	padding-right: 15px;
}

#sitemap div {
	display: inline-block;
}

#sitemap div + div {
	margin-left: 40px;
}

#sitemap a {
	display: block;
	text-decoration: none;
	font-size: 12px;
	margin-bottom: 5px;
}

#sitemap a:hover {
	text-decoration: underline;
}

<div id="social">
	<h3>SOCIAL NETWORKS</h3>
	<a href="http://twitter.com/" class="social-icon twitter"></a>
	<a href="http://facebook.com/" class="social-icon facebook"></a>
	<a href="http://plus.google.com/" class="social-icon google-plus"></a>
	<a href="http://vimeo.com/" class="social-icon-small vimeo"></a>
	<a href="http://youtube.com/" class="social-icon-small youtube"></a>
	<a href="http://flickr.com/" class="social-icon-small flickr"></a>
	<a href="http://instagram.com/" class="social-icon-small instagram"></a>
	<a href="/rss/" class="social-icon-small rss"></a>
</div>

#social {
	float: left;
	margin-left: 20px;
	width: 130px;
}

.social-icon {
	width: 30px;
	height: 30px;
	background: url(../images/social.png) no-repeat;
	display: inline-block;
	margin-right: 10px;
}

.social-icon-small  {
	width: 16px;
	height: 16px;
	background: url(../images/social-small.png) no-repeat;
	display: inline-block;
	margin: 5px 6px 0 0;
}

.twitter {
	background-position: 0 0;
}

.facebook {
	background-position: -30px 0;
}

.google-plus {
	background-position: -60px 0;
}

.vimeo {
	background-position: 0 0;
}

.youtube {
	background-position: -16px 0;
}

.flickr {
	background-position: -32px 0;
}

.instagram {
	background-position: -48px 0;
}

.rss {
	background-position: -64px 0;
}

<div id="footer-logo">
	<a href="/"><img src="" alt="Whitesquare logo"></a>
	<p>Copyright © 2012 Whitesquare. A <a href="http://pcklab.com">pcklab</a> creation</p>
</div>

#footer-logo {
	float: right;
	margin-top: 20px;
	font-size: 10px;
	text-align: right;
}

Для многих пользователей процесс создания сайта кажется чем-то невозможным, особенно когда речь идет о самостоятельном проектировании и кодировании веб-ресурса. На первый взгляд, это и вправду может показаться сложным, но с приходом различных конструкторов сделать это посильно каждому.

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

Выбор платформы для сайта

Прежде чем переходить к обзору популярных платформ для веб-разработки, стоит понимать, из чего вообще состоит сайт и как делаются те страницы, которые мы видим в интернете. Не будем углубляться в сложные аспекты, поговорим лишь о главных компонентах сайта:

• HTML – язык разметки, определяющий содержание и структуру веб-сайта. Благодаря ему мы видим все содержимое страницы. Технически это простой файл с расширением .html, который самостоятельно создается пользователем. Основные элементы «кода» – теги и атрибуты.
• CSS – текстовый файл в формате .css, в котором содержатся правила описания HTML-страницы. Данный компонент позволяет нам визуально кастомизировать язык разметки HTML. Например, изменить цвет фона, увеличить шрифт, добавить изображение или прописать эффекты к различным элементам.
• JavaScript – скриптовый язык программирования. Его основная идея – улучшить возможности сайта, например, добавить функцию «лайка», загрузить новые посты в ленту, запустить анимацию и так далее.

Обратите внимание на то, что CSS и JavaScript – необязательные компоненты, и вы вполне можете сделать сайт без них. Однако если без JavaScript прожить еще можно, то без CSS создать полноценный сайт почти нереально. На практике, конечно, можно, но выглядеть он будет как веб-ресурс из 2000-х.

Как только на локальном компьютере будет создан HTML-файл с привязанной таблицей стилей (CSS), сайт готов, т.е. его можно выгружать в интернет. Но не все так просто просто – такой подход «немного» устарел. Сейчас чаще всего можно встретить взаимосвязь этих компонентов с системой управления контентом – CMS. Это двигатель сайта, который обладает широким функционалом и позволяет создать мощный ресурс без знания программирования.

То есть вы можете самостоятельно создать сайт на HTML и CSS, а затем внедрить его в одну из CMS. Либо вы можете установить CMS на сервер и сделать сайт с помощью шаблонов. Естественно, что шаблон никогда не сможет заменить сайт, созданный с нуля, но это отличный способ для тех, кто не знает языка разметки и не умеет программировать.

Топ лучших CMS 

5 лучших CMS для запуска сайта в 2021 году:

1. WordPress
2. Joomla!
3. Drupal
4. Typo3
5. Serendipity

Первый в списке – WordPress, и возглавляет топ он не просто так. WP – это самая популярная система управления контентом в мире. На ней было создано множество популярных сайтов: Mercedes-benz.com, Thewaltdisneycompany.com, Lifehacker.ru и многие другие. Кроме того, WordPress славится своими шаблонными решениями. 

Несмотря на то, что WordPress очень популярен, для работы с ним нужны определенные навыки. Вдобавок самостоятельно создать уникальный и продающий сайт без подключения программиста будет довольно проблематично. Решением проблемы может стать использование конструктора сайтов. В нем вы можете создавать сайт простым перетаскиванием визуальных блоков.

Топ лучших конструкторов сайтов

Самые лучшие конструкторы сайтов в 2021 году:

1. Craftum
2. Tilda Publishing
3. LPgenerator
4. WIX

Особенности конструкторов:

• Никакого программирования и администрирования. Владельцу необязательно разбираться в HTML, CSS или FTP-клиентах.
• Выбор дизайна занимает несколько минут. Разработчики предлагают целый каталог бесплатных шаблонов, адаптированных под различные ниши.
• Настройка и управление осуществляются мышкой. Все работает в графическом интерфейсе, который позволяет менять блоки на страницах простым выбором из списка.

Защищенность таких сайтов довольно высока, ведь никаких самостоятельных изменений владелец не вносит, а «дыры» платформы давно и надежно залатаны. Обновление кода, добавление модулей и шаблонов происходит под контролем специалистов компании-разработчика. Остается лишь купить красивый домен, и проект готов к публикации в сети.

Рекомендую обратить внимание на Craftum – мощный инструмент для создания типовых сайтов. Это идеальный конструктор для тех, кто совершенно не разбирается в веб-разработке. Создать сайт на Craftum сможет даже ребенок – интерфейс сервиса крайне прост. Разумеется, у конструктора есть и расширенный функционал – например, можно добавлять сторонний код, чтобы воссоздать то, чего нельзя сделать стандартным функционалом. Для работы потребуется подключение тарифа, стоимость которого составляет 169 рублей в месяц, хотя попробовать констуктор можно и бесплатно в течение 10 дней.  

Обзор лучших конструкторов сайтов

Несомненный плюс конструктора – высокая стабильность без тестирования. Все ошибки, какие могли закрасться на этапе разработки, давно устранены. Ведь «тестировщиков» платформы много, и каждый вносит свой вклад в проверку. Отчасти это и стимулирует бесплатное предложение шаблонов и прочих элементов. Сейчас создавать сайт самостоятельно на базе конструктора – удобно и безопасно.

Craftum

Клиент получает все услуги в «одном пакете», остается только выбрать дизайн сайта и наполнить его контентом. В распоряжении пользователей сотни готовых шаблонов и никаких ограничений по количеству доменов или трафику. 

Выбор шаблонов в конструкторе Craftum

Особенности:

1. Множество готовых шаблонов под разные бизнес-направления.
2. Разнообразные блоки, которые позволяют собрать сайт с уникальной структурой.
3. Функция «Дизайн-блок» для создания кастомного сайта.

4. Адаптивный дизайн. Вам не нужно делать несколько версий сайта, блоки сами подстроятся под любой размер экрана.

5. Удобный и понятный интерфейс, минимум кликов для настройки.

6. Коллекция шрифтов, картинок и иконок.

7. Возможность вставить свой HTML-код, встроить Яндекс.Карты и подключить сторонние виджеты.

Сайты, созданные на конструкторе, получают неограниченное количество почтовых ящиков, а также бесплатный сертификат SSL от Let’s Encrypt. При возникновении вопросов пользователям доступна круглосуточная техническая поддержка.

Tilda

Платформа отечественной разработки. На ней одинаково просто делать лендинги, сайты-визитки, блоги или небольшие интернет-магазины. Сервис предоставляет более 210 шаблонов и 550 отдельных блоков в 28 категориях. Так что вопрос создания проекта на конструкторе заключается лишь в подборе оптимального набора инструментов и оформлении нужного дизайна.

Особенности:

1. Сайт собирается из готовых блоков в любой последовательности.
2. Страницы сразу адаптированы для показа на мобильных устройствах.
3. Платные тарифы включают модули приема платежей.
4. Сервис предлагает собственную CRM, способную работать с внешними сервисами.

Особое внимание конструктор уделяет подаче визуального контента. Его функционал включает встроенный редактор изображений, коллекцию бесплатных кнопок, библиотеку картинок. Готовые блоки (типа корзины, формы приема заказа, оформления доставки товара) работают сразу же после подключения к странице (методом Drag & Drop).

LPgenerator

Сервис заточен под создание одностраничных сайтов (лендингов). Тарифы не ограничивают количество страниц, поэтому LPgenerator хорошо подходит для продвижения целого списка товаров (под каждый – отдельная посадочная страница). Бесплатного тарифа у конструктора нет.

Особенности:

1. Платформа заточена под продажи – собственная CRM, аналитика, подключение сервисов по приему платежей, телефонии, SMS-оповещения, рассылок.
2. Сайт собирается из готовых блоков – 19 сценариев и каталог из 150 шаблонов.
3. Сервис предлагает массу маркетинговых инструментов – квизы, всплывающие окна, A/B-тестирование.

При желании удастся создать настоящий интернет-магазин. На платформе есть готовые модули под каталог, карточки товаров, корзину, оплату с банковских карт и электронных кошельков. Владельцу сайта нужно всего лишь собрать нужное количество страниц и опубликовать их. Тарифы зависят от объема подключаемых опций, поэтому систему легко масштабировать в зависимости от задач.

WIX

Еще одна платформа для создания сайтов с бесплатным доступом к конструктору. Есть и платные тарифы без ограничений по количеству страниц, дискового пространства, передаваемого трафика (а также с отсутствием рекламы, которая отображается на free-аккаунте).

Особенности:

1. Сайт собирается из готовых модулей – система предлагает сотни виджетов.
2. Конструктор универсален – подходит для создания онлайн-визиток, блогов, лендингов и интернет-магазинов.
3. Простое подключение дополнений – модули, расширяющие функционал, доступны в App Market Wix.

Очевидно, что конструкторы из приведенного списка обладают схожим набором инструментов. Из-за этого выбор подходящего варианта может быть затруднен.  

Есть и другие популярные сервисы, способные удовлетворить запросы дотошных пользователей, – это UKit, uCoz, Nethouse, 1C-UMI, Setup и др. Они также отличаются интерфейсом панели управления, отчасти перечнем функциональных возможностей, количеством подключаемых модулей, но подобное разнообразие смущает еще больше.

Выход из ситуации один: взять наиболее важные критерии и сравнить их.

Сравним параметры конструкторов

На выбор конструктора вполне способны повлиять такие «мелочи», как договор с определенным оператором онлайн-касс или разработчиком конкретной CRM. Нет смысла подключать разные инструменты аналитики и обработки заявок. Эффективный подход к реализации заключается в объединении каналов продвижения в единой системе (принцип «одного окна»).

Общие принципы создания сайтов на конструкторе

Другой способ выбора конструктора – опробовать сайты в действии, пусть они и заполнены демонстрационными данными. Важно понять, насколько они подходят под ваши задачи. Особый акцент ставится на удобстве прохождения конверсионного пути (от входа на ресурс до совершения целевого действия), если речь идет о коммерческом ресурсе, или на возможности подольше удержать посетителя в блоге или внутри каталога образцов.

Рекомендации:

1. Выбор стилистики, дизайна. Каталоги шаблонов ограничены, а иногда внешний вид сайта становится основным критерием для конструктора. Главное, сократить к минимуму изменения настроек шаблона, ведь это ускорит запуск проекта.
2. Сделать ресурс оригинальным. Сюда включены работы над сменой стоковых изображений на собственные, изменением цветовой палитры, размера и типа шрифтов. Здесь все просто – все элементы обязаны соответствовать фирменному стилю и должны отличаться от стиля конкурентов.
3. Разработать уникальную структуру. Если сайт состоит даже из десятка страниц, каждая из них «затачивается» под отдельный товар, услуги, разделы.
4. Подготовить контент. Наполнение сайта предполагает создание продающих текстов, таблиц, качественных фотографий, инфографики, видеороликов. Ни в одном конструкторе нет и не будет релевантного контента – они дают только дизайн и функционал.

Итак, мы обсудили базовое строение сайта и рассмотрели лучшие платформы для его создания.Теперь можно переходить непосредственно к творческому процессу! В этой инструкции мы не будем писать свой код, а рассмотрим лишь те способы построения страниц, которыми могут воспользоваться новички. Это конструирование сайта в Craftum и использование шаблонов в WordPress.

Как создать сайт в конструкторе Craftum

Если для разработки веб-сайта на CMS WordPress требуются знания языка разметки, CSS-стилей и прочего, то в конструкторе Craftum можно обойтись без них. Благодаря встроенным шаблонам и особому блоку «Дизайн блок» можно создать уникальный сайт со своим дизайном и стилем.

Давайте посмотрим, как осуществляется работа с конструктором Craftum. Создадим с его помощью простой сайт-визитку на основе шаблонов и дизайн-блока.

1. Открываем официальную страницу и переходим к регистрации.
2. Заполняем контактные данные и жмем «Создать сайт». Сервисом можно пользоваться бесплатно в течение 10 дней!
3. В результате мы попадаем на главную страницу конструктора Craftum – здесь мы и будем проводить все манипуляции с будущим сайтом. Мы можем пойти двумя путями: использовать готовый шаблон из выбранной категории либо создать пустую страницу и уже внутри нее добавлять нужные нам блоки. Для наглядности давайте воспользуемся пустой страницей:
4. Для ее наполнения нам потребуется создать специальные блоки, которые будут отвечать за ту или иную информацию. Первым делом жмем «Выбрать блок».
5. В отобразившемся меню перед нами открывается доступ к основным шаблонам страницы. Например, чтобы создать меню, мы можем просто выбрать для этого шаблон. Аналогично можно поступить с контактной информацией и прочими блоками сайта. Помимо этого, есть опция «Дизайн блок», позволяющая самостоятельно конструировать кастомный дизайн. Давайте разработаем первый блок на основе данной опции, а уже потом перейдем к шаблонам.
6. После выбора дизайн-блока мы попадаем в окно его редактирования. Для начала давайте очистим холст – для этого выделяем все элементы и жмем клавишу «Delete».
7. Также давайте уберем фоновое изображение – в меню слева в разделе «Фон» нажмем для этого на крестик.
8. В результате мы получаем пустой холст. Заполним его необходимой информацией – первым делом добавим заголовок. Для этого в верхнем левом углу нажимаем на плюсик и выбираем «Текст». 
9. Зададим название заголовку, например, «Привет! Это мой первый сайт». Также давайте добавим картинку из компьютера – выберем для этого соответствующий блок «Фотография».
10. Чтобы добавить нужную картинку, кликаем по блоку «Фотография» и в левом меню нажимаем «Выберите файл».
11. Давайте также уберем еще и сетку, чтобы увидеть полную картину – для этого нажимаем на соответствующую кнопку в верхнем правом углу. 
12. Вот таким у нас получился первый экран. В дизайн-блоке мы можем работать непосредственно с элементами, например, задать размер текста, изменить его шрифт и провести другие манипуляции.
13. Также для сайта важно проработать его адаптивную версию. Мы не будем на этом останавливаться, но знайте, что экраны под разные устройства настраиваются через верхнее меню:
14. На этом закончим настройку дизайн-блока и закроем его.
15. Давайте добавим еще один блок, например, раздел «О нас». Для этого под созданным нами блоком нажимаем на плюсик и в разделе «Меню» выбираем «О проекте». Возьмем для примера первый шаблон:
16. В выбранном шаблоне мы можем изменять текстовое описание, а также удалять ненужные нам блоки текста.
17. Добавим раздел с контактами.
18. Выбранный раздел мы можем редактировать так же, как и предыдущий. Кроме того, мы можем подкорректировать карту через настройки блока.
19. После того как будут созданы и заполнены нужные блоки, следует опубликовать разработанный сайт. Для этого нажимаем на соответствующую кнопку в верхнем правом углу:
20. Задаем название странице и еще раз жмем «Опубликовать».
21. Чтобы посмотреть свой сайт и поделиться им с друзьями, мы можем нажать на кнопку «Открыть страницу» либо на кнопку в верхнем правом углу.

На этом разработка сайта в конструкторе Craftum завершена. Получился он совсем простым, но на основе этого можно создать любой другой веб-сайт с различным функционалом. Можно построить сайт полностью на дизайн-блоках либо комбинировать их с разнообразными шаблонами – все зависит от того, каких целей вы хотите добиться.

Оплатив тариф на год, вы получаете домен в зоне .ru .рф .fun .host .site .space .website или .online бесплатно! 

Наиболее быстрый вариант – воспользоваться готовым шаблоном сайта. Выбираете тематику ресурса, кликаете на понравившийся шаблон, заменяете тексты и загружаете фото – вуаля, ваш уникальный сайт готов к публикации в интернете! 

Как создать сайт на WordPress

Создание сайта на движке осуществляется несколько сложнее, но я верю в вас!

Каждый сайт в сети идентифицируется уникальным именем – например, google.com или timeweb.com. Такое имя принято называть доменом, обычно оно приобретается у регистратора доменов, а затем устанавливается на хостинг. Существуют и бесплатные домены, но такой вариант больше подходит для тестируемого сайта, нежели для полноценного и рабочего.

Когда доменное имя будет приобретено, потребуется прикрепить его к своему сайту. Чтобы это сделать, необходимо зарегистрироваться на хостинге, добавить туда веб-сайт и только потом подключить домен. В случае с Timeweb все намного проще – создать сайт и приобрести для него домен можно в единой панели управления!

Выбираем доменное имя и хостинг

Давайте создадим аккаунт на хостинге Timeweb и подключим к нему домен:

1. Переходим на официальную страницу хостинга и в верхнем меню нажимаем на кнопку «Вход для клиентов».
2. На отобразившейся странице выбираем «Регистрация».
3. Вводим свое имя и почтовый адрес, затем жмем «Стать клиентом».
4. 10-дневный тестовый период активирован. Теперь мы будем перенаправлены в свой личный кабинет – здесь и будут происходить все взаимодействия с сайтом. Чтобы подключить к нему новый домен, откроем раздел «Домены и поддомены».
5. Здесь мы можем как зарегистрировать новый домен, так и добавить уже существующий. Если вы ранее покупали где-то доменное имя или хотите получить бесплатное, то выберите «Добавить домен». Чтобы купить новый домен, необходимо нажать на кнопку «Зарегистрировать домен» и подобрать нужное имя. Для примера подключим бесплатный домен, который выдается хостингом.
6. Таймвэб позволяет воспользоваться тестовыми зонами .tmweb.ru, .tw1.su, .tw1.ru, .webtm.ru. Например, мы можем создать бесплатный домен типа myfirstsite.webtm.ru. Обратите внимание на то, что доменное имя может быть занято. Если оно будет свободно, то напротив него отобразится зеленая галочка. После этого можно нажать на кнопку «Добавить».
7. Готово! Теперь мы можем перейти по указанному домену – достаточно ввести его в строку запроса браузера, куда прописываются адреса страниц. В результате должна отобразится информация о хостинге – это нормально, так как мы еще не создали сайт. 

Как видите, подключить свой домен совсем не сложно. Теперь можно переходить к созданию собственного сайта на движке WordPress. 

Устанавливаем WordPress на хостинг и выбираем шаблон

Домен мы подключили, теперь давайте свяжем его с нашим сайтом, но для начала создадим его базовый шаблон. Для этого в личном кабинете Timeweb выполним следующее:

1. Переходим в раздел «Каталог CMS» и выбираем WordPress.
2. В отобразившемся окне выбираем «Установить приложение».
3. Выбираем доменное имя, активируем создание новой базы данных и нажимаем на «Начать установку».
4. Готово! Теперь домен соединен с новым сайтом, а мы можем переходить к его модернизации. Для начала откроем административную панель – жмем на «Перейти к приложению».
5. Вводим данные для входа, указанные после установки WordPress, и жмем «Войти».
6. Далее мы мы попадаем в админку WordPress – здесь и будем проводить все модификации с сайтом. В первую очередь нас интересует его внешний вид – для этого перейдем в раздел «Внешний вид» -> «Темы» и в правой части нажмем «Добавить новую».
7. Выбираем вкладку «Популярные» и попадаем в огромный магазин с различными темами – на данный момент их 3918. Для примера возьмем тему «Agencyup» и установим ее.
8. На этой же странице активируем ее.
9. Теперь можем открыть сайт и убедиться в том, что тема активировалась. Для этого в верхнем левом углу наведем курсор мыши на название WordPress и нажмем на «Перейти на сайт».
10. В результате перед нами отобразится страница сайта. Чтобы ее кастомизировать, в верхнем меню есть специальная кнопка «Настроить», которая открывает доступ к редактированию доступных блоков: меню, футера, главной страницы и прочих элементов.

Вот так происходит создание сайта на WordPress. Помимо использования доступных тем, вы можете создавать свои собственные – в таком случае потребуются знания HTML, CSS, PHP и JavaScript. Кроме того, из этого вы можете построить неплохой бизнес – создание сайтов на WordPress пользуется большой популярностью во всем мире!

Заключение

На этом моя вводная инструкция по созданию сайтов подходит к концу. Сегодня мы поговорили о том, из чего состоят веб-сайты, какие платформы для них используются, а также попробовали создать сайт на WordPress и Craftum своими руками. Надеюсь, что совсем скоро создание веб-сайтов станет вашим хобби.

Конструкторы и технология Drag’n’Drop заметно облегчают создание сайта. Они компенсируют отсутствие знаний в программировании, веб-дизайне, верстке. Они позволяют все свести к наполнению готового шаблона уникальным контентом. Писать тексты и вырезать фото намного проще, чем писать код с нуля. 

Если вы планируете самостоятельно развивать сайт, то в будущем придется осваивать каноны копирайтинга, учиться собирать семантическое ядро, внедрять ключи как в сниппеты, так и в тексты. Кроме того, сайт должен постоянно «развиваться», ведь это позволит ему уверенно продвигаться в SEO. Под развитием понимается регулярное появление новых материалов, добавление страниц с товарами, статьями. Публикацией придется заниматься самостоятельно или отдавать работу на аутсорсинг, но это уже совсем другая история. 

Спасибо за внимание!

HTML – это язык гипертекстовой разметки,
которые позволяет создавать сайты людям, а браузерам на их компьютерах и
телефонах считывать и отображать эти сайты. По факту HTML не является языком программирования
даже. Он очень прост, и вы сможете освоить его на базовом уровне всего за 1
неделю!

Чтобы сделать сайт на языке HTML нужно подготовить файл формата index.html. Потребуется вставить в этот документ стандартный код, называемый скелетом и подключить к нему файл style.css. Впоследствии формируется меню, разрабатывается логотип и готовятся основные разделы: подвал, шапка сайта, блок контента. Приступим!

Чтобы понять, как сделать сайт
html, надо уяснить правила использования разметки гипертекста. Данный формат,
помимо текста содержит теги, позволяющие задавать команды для браузера, который
руководствуясь ими, отображает информацию в определённом виде, например, как заголовок
первого уровня: <h1>…</h1>.

Файл index.html можно делать в программе «Блокнот», но лучше воспользуйтесь бесплатной программой Notepad++, подсвечивающей синтаксис и ошибки языка HTML. Создайте новый файл и сохраните его в формате *.html  Впоследствии его нужно открыть в окне браузера, который и отобразит представленный на веб-странице контент. Надо вставить в этот документ стандартный код:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы для браузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="main">
<h1>Мой заголовок страницы</h1>
<p>Мой текст.</p>
</div>
</body>
</html>

Теперь осталось подключить «style.css» – файл со стилями, а для этого придётся прописать перед тегом </head>:

<link rel="stylesheet" href="style.css">

У тега могут быть различные
свойства, например, класс, идентификатор, высота и другие. Но в современном
интернете обходятся классом, а любые параметры – цвет, размер, бордюр, фон и
другие – задаются в CSS
стилях через класс.

Создаем меню

Надо создать меню сайта, используя списки HTML, указывая для каждого из включаемых в него разделов ссылку на страницу, к которой будет переходить посетитель при нажатии на соответствующую надпись.

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы для браузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="menu">
  <li>Главная</li>
  <li>Новости</li>
  <li>Контакты</li>
</ul>
<div class="main">
<h1>Мой заголовок страницы</h1>
<p>Мой текст.</p>
</div>
</body>
</html>

Чтобы создать логотип надо сделать
папку «image», в
которой будут находиться все картинки, имеющие отношение к сайту.

Внимание! Примерный размер логотипа составляет 200х100 px, скачайте и загрузите выбранную картинку в папку.

Логотипу нужно присвоить имя и сделать для него разрешение в формате png или jpg (а начиная с 2019 года в обиход входит формат webp, которые является более современным и легким).

<img src="image/logo.png" alt="Наш логотип">

Чтобы сделать на сайте подвал внедряем с помощью HTML следующее содержание:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы для браузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="menu">
  <li><img src="image/logo.png" alt="Наш логотип"></li>
  <li>Главная</li>
  <li>Новости</li>
  <li>Контакты</li>
</ul>
<div class="main">
<h1>Мой заголовок страницы</h1>
<p>Мой текст.</p>
</div>
<div class="footer">
<p>© 2019 Копирайт. <a href="https://goodlifer.ru/">Блог Гудлайфера</a>.</p>
</div>
</body>
</html>

Внимание! Именно в подвале при создании сайтов делается копирайт.

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

Работа с таблицами стилей 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.

Однако пока наш сайт на HTML чёрно-белый, как немое
кино с Чарли Чаплином. Разукрасить его можно двумя методами:

1. Фон прописывается контейнеру по классу .content и
   задаётся сразу для всего сайта.
2. Отдельно задаётся для каждого из блоков, для
   подвала, шапки, контента и т.д.

Рекомендую дать сайт общий цвет, воспользовавшись одним кодом:

.main {backgroun-color:#f9f9f9;}

В видео уроке я немного дописал таблицу стилей и вот что получилось.

Скачать готовый HTML-сайт, разработанный в уроке можно по ссылке ниже:

Видео-урок разработки сайта

Теги – основа языка HTML

Пользуясь простыми примерами кода
HTML, мы словно
конструктор, собрали свой site, однако можем ли мы сделать это самостоятельно?
Чтобы написать веб-страницу с нуля, нужно знать всё о тегах и принципах их
использования.  Разберёмся, как создаются
сайты html, опираясь на азы, знакомые каждому профессиональному
веб-программисту.  Тегов очень много,
поэтому мы выделим основные:

• <html></html> – используются для
  открытия и закрытия веб-страницы, давая браузеру понять, что он имеет дело с
  веб-документом;
• <head></head> – содержит ключевые
  данные, касающиеся веб-страницы;
• <title></title> – содержит основной
  заголовок – описание содержания страницы;
• <body></body> – тело страницы, в
  котором помещаются все объекты, которые нужно видеть пользователям Интернета,
  это могут быть картинки, заголовки, текстовый контент.

Внимание! Надо уже на
этапе создания сайта подумать о его продвижении, так как теги Title и H1 будут
влиять на ранжирование страниц в результатах поисковой выдачи.

Чтобы информация на страничках отображалась по центру, а ни как придётся, надо пользоваться тегами <center>, без которых текст будет располагаться справа. Наверное, вы обратили внимание, что все теги парные, то есть один открывающий, а второй закрывающий. Однако существуют и единичные теги и самый распространённый из них это <br/>. Именно его использование помогает перепрыгивать с одной строчки на другую, делая отступ. Таких пробелов в статьях будет ровно столько, сколько веб-мастер поставит соответствующих тегов HTML.

Этапы разработки веб-проекта

Работа проводится в несколько этапов:

1. Подготовка макета, позволяющего получить
   визуальный образ с помощью растровых редакторов. Также удобно рисовать макет на
   листе бумаги.
2. Вёрстка
   из макета psd, создаваемого дизайнером в программе Photoshop, с последующей адаптацией к
   мобильным устройствам  и проведением
   тестирования, позволяющего корректно отображаться HTML сайту во
   всех браузерах.
3.  Верстка HTML макета на систему управления сайтом или язык PHP, что позволяет сделать
   веб-ресурс динамичным.

Макет делают в графических
редакторах, таких как Adobe Photoshop, в котором нужно открыть новый документ,
с присвоением ему имени MySite. Чтобы добиться корректного отображения выбираем
большое разрешение от 1170 пикселей по ширине и более 800 px по высоте.

Осталось активировать изображение
направляющими и линейками, которые обязательно должны быть привязаны к границам
формируемого документа.   Пользуясь
инструментами «Текст», «Форма», «Прямая», «Раскройка» добавляют необходимые
элементы страницы, делая полноценный шаблон сайта HTML.

Вёрстка заключается в размещении
всех блоков в текстовом файле index.html., который надо начать со строки
<!DOCTYPE html>, чтобы браузер знал, как проводить обработку содержимого.
Затем размещаются теги, содержащие отображаемую и скрытую от пользователя
информацию.

Внимание! Теги <head>…</head>, а точнее информация,
размещённая между ними, не будет видна пользователям.

Организация текста на страницах
преимущественно осуществляется основными тегами:

1. <div>…</div>
2. <p>…</p>
3. <table>…</table>
4. Списками
   <ul><li>…</li></ul>

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

Внимание! Задать таблицу CSS можно в рамках
<head>, но чаще всего это делают в файле style.css, помещая внутри тегов
ссылку на него.

Надо правильно разместить эту ссылку, пользуясь соответствующим тегом HTML: <link href=”style.css” type=”text/css” rel=”stylesheet”>.

Альтернативные методы бесплатного создания сайтов

Чтобы всё это проделать, надо
освоить азы веб-программирования, но можно обойтись и без таких жертв,
воспользовавшись  бесплатными
конструкторами сайтов. Нужно просто компоновать элементы на веб-странице,
формируя шаблон, который впоследствии загружается на хостинг.  Можно воспользоваться следующими
конструкторами сайтов:

• Weblium;
• UKit;
• Nethouse;
• UMI.

Альтернативой конструкторам служат CMS системы, пригодные для разработки
блогов, визиток и даже корпоративных ресурсов и форумов.  Наиболее популярны следующие из них:

• WordPress;
• Joomla;
• InstantCms.

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

Заключение

Если хочешь разместить в
Интернете свою статью на собственном сайте, то язык HTML подойдёт для этого лучше всего.
Чтобы открыть доступ к веб-странице для других людей, помести её на бесплатный
или платный хостинг, воспользовавшись услугами любого из сервисов. Сделать это
можно в несколько кликов, предварительно зарегистрировавшись. Стать
веб-мастером не так уж сложно!

Гипертекстовый учебник на HTML

Скачать материалы к учебному курсу:

Скачать Notepad++ Portable

Скачать папку web

Задание:

1. Изучить основные команды, используемые при создании HTML-страниц.
2. Выполнить, приведенные в тексте урока упражнения.
3. Выполнить контрольное задание.
4. Сдать урок преподавателю устно, отвечая на вопросы и демонстрируя все действия на компьютере.

В этом уроке мы создадим небольшой сайт, как показано на рисунке ниже,
внизу страницы разместим видеофайл об университете

1. Понятие фреймов. Двухфреймовая структура HTML_документа

В этом уроке Вам предстоит оформить сайт РГППУ при помощи фреймовой структуры.

Что такое фрейм?

Фреймы используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ (фрейм или кадр).

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

В действительности, даже при использовании простого дизайна с двумя фреймами (рис.1) задействовано три документа:

• документ, описывающий фреймовую структуру;
• документ для левого фрейма;
• документ для правого фрейма.

Фреймовая структура дает возможность на все время закрепить навигацию на экране в поле зрения посетителя сайта (в нашем случае это навигационная панель со ссылками на разделы сайта РГППУ).

Организация фреймов

Фреймы содержатся в структуре <FRAMESET> и </FRAMESET>, замещающей в странице с фреймами структуру <BODY> и </BODY>. Допускается вложение фреймовых областей.

Атрибуты тега <FRAMESET>

Фреймовая структура из двух столбцов (листинг 1)

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv=Content-Type content=»text/html; charset=utf-8″ />
        <title>Простая фреймовая структура</title>
</head>
          <frameset cols=»25%,75%»>
                <frame name=»first» src=»doc1.html»>
                <frame name=»second» src=»doc2.html»>
          </frameset>
</html> 

Для того, чтобы осуществить эту структуру, нам необходимо создать файлы doc1.html и doc2.html.

Листинг 2. Документ doc1.html 

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv=Content-Type content=»text/html; charset=utf-8″ />
        <title>Документ для левого фрейма</title>
</head>
<body background=»library/fons/fon8.jpg»>
          <h3>Документ для левого фрейма</h3>
</body>
</html> 

Листинг 3. Документ doc2.html 

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv=Content-Type content=»text/html; charset=utf-8″ />
        <title>Документ для правого фрейма</title>
</head>
<body background=»library/fons/fon10.jpg»>
         <h1>Документ для правого фрейма</h1>
</body>
</html> 

Упражнение 1

1. Откройте программу Блокнот.
2. Наберите текст, изображенный в листинге 1.
3. Сохраните документ в папке web под именем frames_2.html
4. В новом документе наберите текст, изображенный в листинге 2. Сохраните документ в папке web под именем doc1.html
5. В новом документе наберите текст, изображенный в листинге 3. Сохраните документ в папке web под именем doc2.html
6. Запустите файл frames_2.html двойным щелчком. В окне браузера web-страница должна иметь следующий вид (рис. 1).

Рис. 1.

Экран по вертикали разбивается на 2 фрейма. Левый фрейм занимает 25% экрана и содержит страницу с названием doc1.html. Правый фрейм займет 75% экрана и вначале покажет файл doc2.html.

Примечание: в значениях COLS (столбец), ROWS (строка) перечень должен быть заключен в кавычки. Если кавычки не используются, между значениями не должно быть пробелов.

Тег <FRAME>

Тег <FRAME> определяет отдельный фрейм. Это непарный тег. Тегов <FRAME> должно быть ровно столько, сколько областей определено в структуре FRAMESET. У тега <FRAME> имеются следующие атрибуты:

2. Трехфреймовая структура HTML-документа 

Фреймовая структура из трех фреймов (листинг 4) 

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv=Content-Type content=»text/html; charset=utf-8″ />
        <title>Фреймовая структура из трех фреймов</title>
</head>
        <frameset rows=»15%,85%»>
               <frame name=»three» src=»doc3.html» scrolling=»no» noresize»>
                        <frameset cols=»25%,75%»>
                                 <frame name=»first» src=»doc1.html» frameborder=»no»>
                                  <frame name=»second» src=»doc2.html» frameborder=»no»>
                </frameset>
          </frameset>
</html> 

Листинг 5. Документ doc3.html 

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv=Content-Type content=»text/html; charset=utf-8″ />
         <title>Документ для верхнего фрейма</title>
</head>
<body background=»library/fons/fon3.jpg»>
          <h2>Документ для верхнего фрейма</h2>
 </body>
</html>

Упражнение 2

1. Откройте программу Блокнот.
2. Наберите текст, изображенный в листинге 4.
3. Сохраните документ в папке web под именем frames_3.html
4. В новом документе наберите текст, изображенный в листинге 5. Сохраните документ в Вашей папке под именем doc3.html
5. Запустите файл frames_3.html двойным щелчком. В окне браузера web-страница должна иметь примерно следующий вид (рис. 2).

Рис. 2. 

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

Эффект «бегущей строки» — популярное украшений web-страниц.

Текст, выделенный тегами <MARQUEE> и </MARQUEE> изображается браузером в виде бегущей строки.

Атрибуты тега <MARQUEE>

Организация бегущей строки. Листинг 6 

<!DOCTYPE html>
<html>
 <head>
            <meta http-equiv=Content-Type content=»text/html; charset=utf-8″ />
            <title>Бегущая строка</title>
 </head>
 <body background=»library/fons/fon3.jpg»>
            <marquee align=»middle»
            direction=»left»
            bgcolor=»yellow»
            behavior=»scroll»
            height=»25″
            width=»100%»
            loop=»infinite»
            scrollamount=»7″
            scrolldelay=»0,02″>
            <font face=»arial» size=»4″ color=»navy»><b>РОССИЙСКИЙ ГОСУДАРСТВЕННЫЙ ПРОФЕССИОНАЛЬНО-ПЕДАГОГИЧЕСКИЙ УНИВЕРСИТЕТ</b></font>
            </marquee>
</body>
</html> 

Упражнение 3

1. Откройте программу Блокнот.
2. Наберите текст, изображенный в листинге 6.
3. Сохраните документ в Вашей папке под именем stroka.html
4. Запустите файл stroka.html двойным щелчком. 

4. Списки 

Средствами HTML можно создавать любые списки: нумерованные с разными схемами нумерации и маркированные с разными типами маркеров.

Маркированные списки

Тег <U1>.. .</U1> формирует маркированный список.

Отдельный элемент списка в списке <U1> формируется с помощью тега <LI>.

У тегов <U1> и <LI> есть атрибут TYPE, который задает тип маркеров списка.

Его допустимые значения:

TYPE=»disc« (закрашенный круг);

TYPE=»circle« (окружность);

TYPE=»square» (квадрат).

Нумерованные списки

Тег <OL>…</OL> формирует нумерованный список. Когда браузер встречает тег нумерованного списка, он нумерует элементы списка последовательно, начиная с единицы (по умолчанию). Отдельный элемент списка создается тегом <LI>.

Атрибуты тега <OL>

Создание списков. Листинг 7

<!DOCTYPE html>
<html>
 <head>
            <meta http-equiv=Content-Type content=»text/html; charset=utf-8″ />
            <title>Маркированный список</title>
 </head>
 <body background=»library/fons/fon8.jpg»>
            <p align=»left»><font size=»4″ face=»arial»><i>
            В настоящее время в структуре РГППУ 3 института</i></font>
            <ul type=»square»><font size=»4″ face=»arial» color=»maroon»>
                        <li>Институт психолого-педагогического образования (ППО)</li>
                        <li>Институт гуманитарного и социально-экономического образования (ГСЭО)</li>
                        <li>Институт инженерно-педагогического образования (ИПО)</li>
            </ul>
</body>
</html>

Упражнение 4

1. Откройте программу Блокнот.
2. Наберите текст, изображенный в листинге 7.
3. Сохраните документ в Вашей папке под именем spisok.html
4. Запустите файл spisok.html двойным щелчком. Результат изображен на рис. 3.
5. Откройте html-код файла frames_2.html, исправьте src=»doc1.html» на src=»spisok.html».
6. Сохраните исправленный файл под именем institut.html.
7. Запустите вновь созданный файл. Результат на рис. 4

Рис. 3.

Рис. 4

4. Организация гиперссылок 

Для организации гиперссылки следует сообщить браузеру, какой элемент в HTML-файле служит привязкой, а также указать адрес документа или ресурса Internet, на который указывает ссылка. Все это делается в теге <А>…</А>. Между <А> и </А> могут находиться только текст и графика. Текст, располагающийся между <А> и </А> изображается браузером в цвете.

Графические элементы привязки создаются аналогично. Вместо текстового элемента привязки с помощью тега <IMG> создается графический и располагается между тегами <А> и </А>. Когда пользователь щелкает на любом участке изображения, браузер открывает web-страницу, ссылка на которую дана в теге <А>. 

Атрибуты тега <А>

 Примеры:

• <А HREF=»HTTP://WWW.RAMBLER.RU»> — удаленный переход;
• <А HREF=»#MYLABEL»> — переход на конкретный фрагмент текущего документа. Предварительно этот фрагмент должен быть помечен меткой с помощью тега <А NAME = «MYLABEL»>;
• <А HREF=»MY.HTM»> — переход на другой документ на своем компьютере;
• <А HREF=»C:TEMPMYFILE.HTM»> — использование в ссылке абсолютного адреса на своем компьютере.

Абсолютный адрес — это полный Internet — адрес со всей информацией, требующейся клиенту для того, чтобы отыскать сервер (HTTP ://WWW.RAMBLER.RU).

Относительный адрес — используется для адресации в пределах документа или совокупности документов на одном компьютере. В этом случае URL указывается относительно компьютера и каталога, из которого браузер первоначально загружает web-страницу.

Рекомендуется всегда использовать относительные ссылки, т.к. при переносе сайта с одного компьютера на другой компьютер, где имя диска может отличаться, все абсолютные ссылки сайта перестанут работать. 

Задание цвета гиперссылок

У тега <BODY> есть три атрибута, используя которые можно изменить цвет гиперссылки.

Упражнение 5

Введем ссылки в документ spisok.html

1. Откройте документ spisok.html в виде HTML-кода.

2. Для тега <body> задайте цвет гиперссылок: 

<body background=»library/fons/fon8.jpg» link=»maroon» alink=»red»  vlink=»maroon»> 

3. Организуйте гиперссылки для пунктов Институт психолого-педагогического образования (ППО) и Институт гуманитарного и социально-экономического образования (ГСЭО)

• Для этого просмотрите в браузере файлы psihology.html и gumanitar.html из папки web.
• В документе spisok.html в соответствующих строках введите записи: 

<li><a href=»psihology.html» target=»second»> Институт психолого-педагогического образования (ППО) </a>

и

<li><a href=»gumanitar.html» target=»second»>Институт гуманитарного и социально-экономического образования (ГСЭО)</a> 

В данных записях атрибут гиперссылки target=»second» означает, что файлы psihology.html и gumanitar.html будут открываться во фрейме для второго документа, который имеет имя name=»second» (см. html-код файла frames_2.html из листинга 1.

4. Запустите файл istitut.html в браузере. Щелкайте по гиперссылкам, чтобы проверить их работу. Содержание гиперссылки должно отображаться в правом фрейме. Результат на рис. 5

Рис. 5. Содержание активной ссылки из левого фрейма отображается в правом фрейме 

5. Добавление видое на web-страницу

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

Мы рассмотрим, как подгрузить на наш сайт видеофайл с ресурса http://www.youtube.com.

В качестве примера мы выбрали видео под названием «Финал сезона Открытой Лиги КВН РГППУ. Игра целиком». Финал проходил 15.05.2015 г.

1. Для начала просмотрите этот ролик по адресу http://www.youtube.com/watch?v=-F_TgCoEDF4

2. Приступим к размещению этого ролика на нашей web-страничке под названием rgppu.html.

Для этого нам необходим HTML-код ролика. Чтобы получить код, на странице http://www.youtube.com/watch?v=-F_TgCoEDF4 щелкаем по ссылке Поделиться, далее по ссылке HTML-код (на рисунке 6 обозначено зеленым цветом).

Рис. 6 

После этого появится код ссылки (рис. 7).

Рис. 7 

3. Скопируйте код и вставьте в конец кода страницы rgppu.html. Добавьте впереди тег абзаца с выравниванием по центру. В результате код вставки видео будет следующим 

<p align=»center»><iframe width=»560″ height=»315″ src=»https://www.youtube.com/embed/-F_TgCoEDF4″ frameborder=»0″ allowfullscreen></iframe>

 4. Сохраните изменения. Просмотрите результат. 

6. Контрольное задание 

Задание: организовать сайт РГППУ. Фоны, шрифты и цвета Вы можете использовать по своему желанию

1. Создайте фреймовую структуру сайта, состоящую из трех фреймов (аналогичную рис. 2). Новый файл с трехфреймовой структурой назовите index.html. Как правило, у любого сайта главная страница имеет имя index.

Примечание: для указания размеров фреймов во фреймовой структуре можно использовать значения в пикселях, а не в процентах, например <frameset rows =»50,*»>. Цифра 50 означает, что верхняя строка будет высотой 50 пикселей, а звездочка означает, что высота нижней строки будет рассчитана браузером автоматически в зависимости от высоты экрана пользователя.

1. В верхнем фрейме расположите бегущую строку.
2. В левом фрейме расположите список институтов РГППУ.
3. Создайте web-страничку для третьего института инженерно-педагогического образования (ИПО). Информацию об институте можно найти в файле inzhener.txt в папке web.
4. Для всех институтов организуйте гиперссылки, аналогично упражнению 5. В правом фрейме должна отображаться информация выбранной ссылки.
5. Ниже списка институтов расположите ссылку На главную страницу, при выборе которой в правом фрейме будет грузиться файл rgppu.html.

Ваш сайт должен выглядеть примерно так, как показано на рис. 8.

Рис. 8