vp-webdev

7 лет назад

Учимся разработке сайтов на html, css и JavaScript - часть 1

Этим постом я открываю небольшой цикл статей по HTML+CSS+JS для полных новичков. Если вы хотите научиться создавать сайты, подписывайтесь, и следите за уроками.

Вступление

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

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

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

Бэкенд код пишется веб-программистами на PHP, Python или других языках программирования, и выполняется на стороне сервера. Фронтенд и бэкенд взаимодействуют между собой посредством GET, POST и AJAX запросов.

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

Кроме того, существуют CMS - системы управления сайтами, которые позволяют быстро и легко сделать типовые сайты вроде блога или интернет магазина, не слишком углубляясь в дебри программирования (Wordpress, Joomla, Drupal, 1C Битрикс). Некоторые новички ставят CMS и сразу учатся делать на них несложные сайты. Мы же начнём изучение тематики создания сайтов со стандартной связки HTML+CSS+JS.

Что нам понадобится

Будем учится делать вёрстку руками, в блокноте. Но не в том блокноте, который по умолчанию установлен в Windows. Я рекомендую скачать и использовать Notepad++.
https://notepad-plus-plus.org/download/

Он корректно работает с кодировками. Любая веб страничка должна быть создана в кодировке UTF-8 (без BOM), чтобы в браузере не отображались кракозябры. Кроме Notepad++ нужно установить несколько браузеров для тестирования своих веб страниц. Про Internet Explorer сразу забудьте - и под него не верстайте. Ориентируйтесь на Chrome, Opera, Firefox и Edge для Win10. Я предпочитаю пользоваться Mozilla Firefox потому что в нём есть удобный режим просмотра сайта на экранах мобильных (Ctrl+Shift+M) и встроенный способ снятия скриншотов всей страницы с прокруткой.

Что такое HTML и CSS

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

Итак - сперва создаётся HTML файл, в нём пишут структуру текстовых блоков которые должны быть на сайте. Потом создается CSS файл, в нём перечисляют свойства, которые отвечают за внешний вид этих блоков. Далее, по желанию, добавляют JS(JavaScript) файлы, для анимации, обработки пользовательских данных, и динамического изменения внешнего вида сайта в зависимости от действий пользователя. Ссылки на CSS и JS файлы прописывают в заголовке HTML страницы, и открывают её в браузере чтобы посмотреть результат.

Вместо тысячи слов - покажи мне код

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

<b>Текст внутри этого тега будет жирным</b>

Давайте попробуем создать простейшую HTML страничку с подключенным к ней CSS файлом. Для этого используем универсальный шаблон пустой страницы в котором уже прописан минимально необходимый набор тегов. Код, расположенный ниже нужно сохранить как index.html в какую-нибудь папку:

<html>
<head>
    <title>Заголовок веб страницы</title>
    <meta charset="utf-8">
    <meta name="description" content="Текстовое описание о чем веб страница">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href='css/css.css' rel='stylesheet' type='text/css'>
</head>
<body>
Здесь будут блоки с текстом и прочие HTML теги
</body>
</html>

В той же папке где лежит index.html создадим пустую папку с названием "css", а в ней с помощью Notepad++ файл css.css. В него поместим следующую заготовку:

* {
    box-sizing:border-box;
}
body, html {
    margin: 0px;
    padding: 0px;
}

Получится файл index.html и рядом папка с вторым файлом css.css

В принципе, если мы сейчас откроем index.html в браузере мы увидим пустую белую страницу с надписью "Здесь будут блоки с текстом и прочие HTML теги".

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

Каждая HTML страничка должна начинаться тегом <html> и заканчиваться закрывающим тегом </html>. Этот тег указывает браузеру что страница имеет тип HTML. Все остальные теги сайта должны быть между этими двумя парными тегами.

Внутренняя структура HTML страницы состоит из заголовочной части которая определяется тегами <head> и и тела страницы <body> и </body> - в котором находится основной текстовые блоки сайта и другие теги вроде картинок.

В заголовочную часть между тегами <head> и </head> в нашей заготовке мы написали четыре тега

<head>
    <title>Заголовок веб страницы</title>
    <meta charset="utf-8">
    <meta name="description" content="Текстовое описание о чем веб страница">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href='css/css.css' rel='stylesheet' type='text/css'>
</head>

Теги <title>Заголовок веб страницы</title> и <meta name="description" content="Текстовое описание о чем веб страница"> нужны для того чтобы поисковые системы найдя ваш сайт поняли о чем он по заголовку и краткому описанию в заголовочной части HTML кода.

Тег <meta charset="utf-8"> нужен для того чтобы явно указать кодировку страницы - UTF-8.

Тег <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> необходим для корректного отображения сайта на мобильных устройствах.

Тег <link href='css/css.css' rel='stylesheet' type='text/css'> подключает к нашему HTML файлу файл css.css который мы создавали в папке css.

Итак, сейчас у нас имеется папка, в которой лежит index.html а рядом с ним папка css в которой лежит css.css. Откроем оба этих файла с помощью Notepad++ и приступим к созданию первого текстового блока.

Чтобы создать текстовый блок, который можно оформить средствами CSS нам нужны парные теги <div class="mytext"> и </div>

Здесь "mytext" это название класса, которое мы дали этому блоку. Вместо "mytext" можно написать любое другое название на английском.

Давайте сотрём в нашей заготовке строчку "Здесь будут блоки с текстом и прочие HTML теги" и добавим вместо неё наш текстовый блок, а в него поместим текст "МОЙ ПЕРВЫЙ ПРОСТОЙ САЙТ".

<html>
<head>
    <title>Заголовок веб страницы</title>
    <meta charset="utf-8">
    <meta name="description" content="Текстовое описание о чем веб страница">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href='css/css.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="mytext">МОЙ ПЕРВЫЙ ПРОСТОЙ САЙТ</div>
</body>
</html>

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

Для примера откроем наш файл css.css и явно укажем ширину нашего текстового блока с помощью свойства width: 100%;. Также укажем высоту блока с помощью свойства height: 500px;. Ширину мы указали в процентах, а высоту в пикселях.

Cделаем фоновый цвет блока каким-то другим, отличающимся от белого, например синим (цвет deepskyblue). Для этого добавим свойство background: deepskyblue;.

Добавим свойство text-align: center; для того чтобы отцентрировать текст по горизонтали.

Добавим свойство font-size: 25px; чтобы указать размер шрифта

И наконец сделаем отступ сверху от надписи padding-top: 220px;

Все эти свойства поместим в наш файл css.css

* {
    box-sizing:border-box;
}
body, html {
    margin: 0px;
    padding: 0px;
}
.mytext {
    width: 100%;
    height: 500px;
    background: deepskyblue;
    text-align: center;
    font-size: 25px;
    padding-top: 220px;
}

Должен получиться большой синий текстовый блок, шириной 100% и высотой 500px, в котором центрирован текст, изменен размер шрифта и есть отступ сверху от надписи.

Мы создали заготовку для HTML и CSS файлов, изучили что такое теги, сделали текстовый блок с надписью, и изменили его внешний вид, прописав свойства в CSS.

В следующем уроке мы сделаем верхнюю часть Landing page (одностраничный сайт-продажник). Для этого изменим синий фоновый цвет на красивую фоновую картинку, и добавим яркую кнопку под надписью. Также будут подробнее рассмотрены CSS свойства, и их применение.

Данный материал подготовлен @pythono.

1028