Пошаговое написание сайта в html и css на конкретном примере: Как создать сайт бесплатно самому? Показываем 3 простых способа!

Пошаговое создание сайта html. В чем состоит работа?

От автора: здравствуйте, уважаемые читатели блога webformyself. В этой статье будет показано пошаговое создание сайта html. Мы продолжим работу с сайтом, полученным в результате действий в предыдущей статье. Если не читали, то ничего, ссылка будет дана. Там мы уже разобрали на практике часть шагов, поэтому здесь они будут описаны лишь в теории, зато мы доработаем наш простенький сайт. Вы также можете скачать исходные файлы с кодом.

Планирование

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

Подготовка к работе

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

Создание и оформление базовой структуры.

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

Под базовой структурой нужно понимать самые главные блоки. Например, в сложных шаблонах могут быть сотни элементов, но самых главных всегда всего лишь несколько.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Уроки создания сайта html нужно проходить пошагово. Например, на нашем сайте в премиум-разделе вся информация подается от простого к сложному.

Создание и оформление дополнительных элементов

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

Работать нужно снизу вверх. Это необязательно, просто так удобней. Сначала занимайтесь оформлением шапки. Например, что у нас обычно размещают вверху страницы? Правильно, логотип и название сайта. Давайте мы тоже это сделаем. Для шапки у вас уже задан фоновый цвет, теперь нужно задать фоновое изображение. Я выбрал в качестве фонового изображения файл html5.png, который нужно скопировать туда же, где лежит наша страничка.

#header{
background: #D2E4AF url(html5.png) no-repeat 10% 50%
}

Слишком сложно будет объяснить вам эту строчку в полной мере, если вы впервые работаете с CSS. Вкратце: дописали после цвета адрес изображения, указали, что его не нужно повторять и задали позицию относительно блока: сдвиг на 10% ширины блока влево от левого края по горизонтали и на 50% от высоты вниз от верхнего края по вертикали. Напоминаю, все это нужно прописывать для блока header. Если все сделано правильно, логотип появится в шапке. Естественно, можно использовать и свое изображение, заодно и потренируетесь.

Давайте теперь в шапке разместим красивое название сайта. Заголовки в html задаются тегами h2-h6, в зависимости от размера и важности заголовка. Определенно, заголовок сайта очень важен, поэтому заключаем его в парный тег h2.

<h2>Название сайта</h2>

Отлично, у нас появился новый элемент. Как теперь до него дотянутся через CSS? Очень просто:

#header h2{
color: orange;
text-align: center;
text-shadow: 0 0 2px blue
}

Мы указали, что данные правила нужно применить ко всем тегам h2, находящимся внутри блока с id = «header». То есть ко всем самым крупным заголовкам внутри шапки. Я решил сделать цвет заголовка оранжевым, отцентрировать его и дать небольшую синюю размытую тень. Вам необязательно сейчас разбираться в написанном, просто скопируйте себе в таблицу стилей.

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

Вставляем меню в боковую колонку

Боковая колонка часто используется для того, чтобы вывести в ней главную навигацию по сайту. Давайте и мы поступим также. Нам нужен список. Каким тегом он задается? Тегом ul, а отдельные его пункты заключаются в теги li. Проще показать на примере:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
</ul>

Естественно, в реальном проекте будут названия разделов сайта, а не текст: «Пункт 1″. И это будут ссылки. То есть вот так:

<li><a href = «путь к разделу»>Пункт 5</a></li>

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

#sidebar ul{
list-style: none
}

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

#sidebar ul li{
border-bottom: 2px solid orange;
width: 55px
}

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

#sidebar ul li:hover{
background: orange;
color: white
}

Вставьте этот код и обновите страничку. Вроде неплохо, да?

Оформляем контент

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

#content{
padding: 10px
}

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

Итог

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

Это было пошаговое создание сайта html для чайников. Проще уже некуда. Если вам понравилось, вы можете продолжить изучать html, css и другие веб-технологии на нашем сайте. И однажды, может быть, создать сайт вам будет проще, чем пожарить картошку.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

пошаговая инструкция, технология и рекомендации

Создание html страницы в блокноте: разъяснения для чайников

Приветствую вас на страницах блога Start-Luck. Сегодня мне бы хотелось показать вам, как использовать код. Писать сайты – интересное занятие, которое многим может казаться невыполнимо сложным. На самом деле простенькую страничку можно создать всего за 5 минут.

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

Как создать страничку

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

Откройте документ.

Вставьте в него вот этот код.

<html> <head> <title>Моя первая страница</title> </head> <body> <center><h3>Создать страницу проще, чем вы думаете</h3></center> Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате. <br/><br/> <center><img alt=»Компьютер» src=»https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg»></center> <br/><br/> <font>Простой код позволяет сделать текст красным</font> <br/><br/> <b>Написать жирным не намного сложнее</b> <br/><br/> Мы дошли до самого низа <br/><br/> Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино. <br/><br/> <hr> К примеру, вот ссылка на мой блог — <a href=»http://start-luck.ru/»>Start-Luck</a> — рассказывает просто о «сложном». <br/><br/> Ну вот и все. Ваша первая страница готова <br/><br/> </body> </html>

Теперь нажмите «Сохранить как…». Это очень важный момент.

Файл нужно назвать index.html. Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.

Я сохранял документ на рабочий стол. Теперь нужно найти его, нажать правую кнопку мыши и открыть с помощью любого браузера. Я выберу Google Chrome.

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

Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center» и вставим строчку, в которой содержится слово «Color». Кстати, как менять цвет html я уже писал. Это очень просто, рекомендую к прочтению.

Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5

Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: </font>.

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

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

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

Теги

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

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

Основные

Начинается и заканчивается страница с тегов <html></html>. Они показывают браузеру, что это веб-документ, созданный при помощи html.

Далее идет <head></head> или заголовок. В ней располагается самая важная информация о странице, в нашем случае – Title. Если вы еще не нашли фразу «Моя первая страница», которая присутствует в коде, обратите внимание на саму вкладку, над поисковой строчкой.

Именно теги <title></title> отвечают за начало и конец основной информации о страничке.

Далее идет основная контентная часть. Теги <body></body>. Все видимое на странице: заголовки, текст, картинки и так далее.

Тег <h3> указывает на то, что фраза является заголовком. По умолчанию, она чуть больше основного текста и выделяется жирным. Если бы мы с вами сейчас писали не только на html, но и создавали CSS-файл, с которым перекликался наш файл, то могли бы управлять размерами, шрифтом и даже цветом всех заголовков на странице, не прописывая font style, как мы это делали в примере. Хотя об этом тоже рановато.

Кстати, Title и h3 имеют свое влияние во время присваивания вашему сайту места в поисковой выдаче. Относиться к ним нужно с большим вниманием и не писать внутри лишь бы что. Они имеют отношение к сео-оптимизации. Помимо h3, существуют еще и h4, h5,h5.

В этой же строчке есть открывающийся и закрывающийся <center>. Благодаря этому элементу можно выравнивать текст по середине. Если этот тег удалить, то текст встанет по правому краю.

<br/> — один из немногих единичных тегов. То есть он работает сам по себе. Благодаря этому элементы вы перепрыгиваете с одной строки, на другую. Проще говоря, делаете отступ. Написали его один раз, значит один раз переместились вниз, два, как у меня, и отступ получился чуть больше.

Картинка

Далее идет тег img, то есть image, картинка. Квадратная скобка открывается, в нее вписывается вся основная информация о изображении, только после этого она закрывается. Надо отметить, что img – это  тег, а все остальные элементы кода, которые вписываются внутрь, это его атрибуты.

Первым делом идет alt, то есть описание. Это также необходимо для оптимизации. Иногда добавляется еще и title. При наведении на изображение мышью рядом с курсором появляется подсказка, когда страница уже открыта в браузере.

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

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

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

<font></font> отвечает за придание части текста какого-то особого стиля, к примеру, как в нашем случае другого цвета. style=»color:red» показывает, что цвет будет красным. Если хотите желтый, напишите yellow, зеленый – green. Можно пользоваться кодами цветов из фотошопа.

<b></b> помогает выделить текст жирным.

<hr/> рисует горизонтальную линию. Он одиночный и используется только в закрытом виде. Если вы напишете <hr/> несколько раз, то получите ровно столько же горизонтальных полос при открытии страницы в браузере.

Ссылки

<a> указывает браузеру, что дальше будет ссылка. Вы хотите перенаправить читателя на другой адрес. Этот тег идет с обязательным атрибутом href=”адрес”. В кавычки вставляется путь, куда браузер должен перенести посетителя страницы. После того, как этот тег прописан, вставляется описание, слово или несколько, при нажатии на которое читателя будет переносить дальше. После того как эти условия выполнены, можно вставлять второй, закрывающийся тег </а>.

После того как основная часть страницы написана, вы закрываете тег body, так как тело закончено. И указываете на то, что прекращаете на сегодня использовать html.

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

Ещё хочу порекомендовать вам Видеокурс, который рассказывает, как верстаются сайты. Весь процесс показан на реальных примерах, что особенно хорошо. Курс предназначен как для новичков, которые ещё даже HTML не знают, так и для тех, кто уже хорошо знает и HTML, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup

Помимо этого заберите Бесплатную книгу по созданию сайтов! Эта книга рассчитана на начинающих, и вот там создаётся сайт ОТ и ДО. То есть готовится дизайн, затем верстаются страницы, пишется программная часть, а после сайт размещается в Интернете. Автор тщательно всё комментирует, а в книге очень много скриншотов и иллюстраций. Причём особенностью книги является то, что создаётся не какой-то абстрактный сайт, а вполне реальный и существующий в Интернете.

Сегодня вы сделали много, ведь первый шаг самый сложный.

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

До новых встреч и удачи!

start-luck.ru

а Как | Как написать html-документ

1 шаг

HTMLHTML – язык разметки гипертекста. Большинство интернет-страниц написаны на html.

2 шаг

Показаны теги html, head, body. Заметте, что эти теги не соединены.

Структура htmlЯзык html представляет собой следующее: имеется один “БОЛЬШОЙ” html, он делится на два раздела “поменьше”, на head (шапку документа) и body (тело документа). Соответственно эти два тега могут содержать множество других “маленьких” тегов, а они в свою очередь могут быть наполнены еще одними. НО “пересекаться” эти теги не могут ни в коем случае.

3 шаг

Создаем страницуДля того, чтобы начать писать, вам нужна программа блокнот или Akel Pad(существуют специальные html редакторы, но лично мне больше по душе обычный редактор). Я вам советую писать в Akel Pad’е, так как в нём больше функций по редактированию текста.

4 шаг

Теги html пишутся в треугольных скобках “<>” если это начальный тег и в треугольных скобках со слешем “</>” конечный тег.Итак, чтобы дать браузеру понять, что это html документ открываем начальный тег всего документа <html>, в нем мы пишем “шапку” документа <head>. В этом теге прописывается название документа, его favicon и другие теги не относящиеся к “телу”. Чтобы озаглавить текст впишите название между тегами <title> и </title>, расположенные в “шапке”. Далее мы, по окончании работы с “шапкой”, закрываем ее тегом </head>.Затем открываем тело тегом <body>, в нем пишется тег и текст (тот, что будет показан на готовой странице). По окончании работы с документами закрываем тело тегом </body>, а затем закрываем тег html (</html>)

5 шаг

Пример самого короткого html-документа<html><head><title>Пример</title>

Тело документа

6 шаг

Пример длинного html-документа<html><head><title>Длинный html-документ</title><link rel=»shortcut icon» href=»*ссылка на фавикон»/><link rel=»stylesheet» href=»*ссылка на CSS файл, содержащий стили для текстов*»/><style type=»text/css»><!— .style1 {color: #6699ff;} //—></style>

<b>Таблица</b><br>

Первый столбец первой строчки

Второй столбец первой строчки

Первый столбец второй строчки

ОписаниеИтак, тегом <html> мы начинаем весь документ. Затем идет “шапка документа” (<head>), в ней сначала расположен заголовок (<title>Длинный html-документ</title>), затем идет тег фавикона в котором параметр href указывает ссылку на изобравжение. Следующий элемент указывает на .css файл содержащий стили для текстов, эти стили можно прописать в самом документе внедрением в него CSS языка(тег “style”), но я считаю этот способ не удобным, так как если на сайте много страниц и во всех нужно изменить цвет удобнее прописать этот цвет в одном файле чем в каждой странице. Затем мы закрываем шапку(</head>) и открываем тело(<body>) В нем види элемент div, у которого имеется множество параметров, в данном случае это параметр “выравнивание”(align) у которого есть параметры спава(right), слева(left) и по центру(center), затем идет еще лдин div показывающий стиль введенный либо в css файле, либо в самом документе элементом style. Далее мы видим <b>, выделяющий текст жирным, и элемент <br>, делающий спуск “курсора” на одну строчку, дальше два элемента </div>. Затем начинается еще один div, показывающий выравнивание по центру, а в нем начинается таблица(<table>), а элемент border говорит о наличии рамки(рамку можно убрать изменив значение 1 на 0). Следом идет <tr> открывающий первую строчку, затем <td> открывающий первый столбец, затем текст этого столбца, и закрытие столбца тегом </td>. Надеюсь по таблице все понятно, а то рука отваливается писать:) Таблица закрывается тегом </table>. Потом закрывается div, который выравнивал таблицу по центру. Далее закрывается “тело” </body> и html </html>.-Надеюсь всё понятно??-Ссылка на то, что получилось

7 шаг

Другие языкиЧасто, чтобы улучшить свою страницу в html вставляются другие языки, например JavaScript, CSS и другие.

akak.ru

Как писать HTMLS-страницы | Учебник HTML5

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

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml»>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ />

Удалите этот фрагмент кода и замените его следующим:

<!DOCTYPE html>

<html lang=»en»>

<head>

<meta charset=utf-8>

Сохраните изменения в документе, и в результате у вас должна получиться HTML5-страница, которая сможет пройти валидацию в валидаторе W3C (http:// validator. w3.org/).

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

Итак, что же мы в действительности сделали чуть раньше? Прежде всего мы указали новое объявление типа документа HTML5:

<!DOCTYPE html>

Если вам нравится писать код в нижнем регистре, то <!doctype html> будет ничуть не хуже. Разницы никакой.

ОБЪЯВЛЕНИЕ ТИПА ДОКУМЕНТА HTML5 — ПОЧЕМУ ОНО ТАКОЕ КОРОТКОЕ?

Объявление типа документа HTML5 <!DOCTYPE html> такое короткое потому, что лишь указывает браузерам обрабатывать страницы в «стандартном режиме». Такой наиболее эффективный подход к написанию синтаксиса преобладает в значительной части HTML5.

После объявления типа документа мы открыли тег <html>, указали язык, а затем открыли раздел <head>:

<html lang=»en»>

<head>

ВЫ ГОВОРИТЕ ПО-НЕМЕЦКИ?

Согласно спецификациям W3C (http://dev. w3.Org/html5/spec/Overview. html#attr-lang) атрибут lang определяет первичный язык для содержимого конкретного элемента и любых атрибутов этого элемента, которые содержат текст. Если вы пишете страницы не на английском, то вам потребуется указать соответствующий язык. Например, для японского языка тег <html> будет выглядеть как <html lang=»ja»>. Полный перечень языков можно увидеть по адресу http:// Www.iana.org/assignments/languagesubtag-registry.

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

<meta charset=utf-8>

Если только у вас не будет веской причины указать другую кодировку символов, то ею почти всегда будет UTF-8.

Вам также могут быть интересны следующие статьи:

html5ru.com

пошаговая инструкция, технология и рекомендации

Думаете, как создать HTML-страницу? Для этого нужно потратить несколько часов, и вы будете знать основы HTML. А создать свою первую страницу сможете за 5 минут.

HTML расшифровывается как HyperText Markup Language. В переводе это означает «язык гипертекстовой разметки». Важно понимать, что HTML — это не язык программирования, а именно разметки сайта.

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

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

Основы HTML

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

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

<открывающий тег>содержимое</закрывающий тег>

Как видите, открывающий и закрывающий тег отличаются только «/».

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

Также запомните, что структура языка HTML имеет свою иерархию. Иначе она называется вложенность. Тег HTML является самым главным, поскольку все остальные находятся внутри его.

У HTML есть два дочерних элемента:

• <head> … </head>;
• <body> .. </body>.

В блоке HEAD указывается различная служебная информация. Эта информация в браузер не выводится. Например, указания для разработчиков, для любых программ, для роботов и многое другое.

Самое главное — здесь нет контента.

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

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

<html>

<head>

</head>

<body>

</body>

</html>

Так делают, чтобы равные по значимости теги были на одном уровне, а дочерние — «внутри». Так намного удобнее для восприятия и поиска нужного куска кода. Иначе можно запутаться. Но для экономия места именно теги head и body можно делать без отступов. Так поступают, чтобы у всех остальных не было лишнего отступа. Всё остальное желательно отделять.

Как создать простую страницу на HTML

Для написания кода вам нужен какой-нибудь редактор. Их очень много. Популярными являются Notepad++ и Adobe Dreamweaver. Также можно использовать и блокнот.

Вот так выглядит редактор Notepad++.

Это очень удобный редактор и при этом бесплатный. Вышеуказанный Adobe Dreamweaver является платным. Отличие редакторов, предназначенных для написания кода HTML, от блокнота — в том, что специальные теги подсвечиваются. Если он не подсветился, значит, вы написали неправильно.

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

Давайте рассмотрим, как создать страницу HTML в блокноте. То есть закончим техническую часть и потом непосредственно перейдем к изучению тегов.

Как создать веб-страницу в блокноте HTML

Для начала откройте блокнот.

Затем наберите в нем то, что указано на следующем скриншоте.

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

После этого нажмите в меню «Сохранить файл» и укажите любое имя файла, но с расширением .html.

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

Всемирный консорциум W3C

Существует такая организация, как W3С, которая разрабатывает и внедряет все стандарты для интернета. Все браузеры подчиняются этим стандартам и обрабатывают разметки (коды) страниц согласно этим правилам.

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

Вы можете подумать, какие могут быть правила? Все описанные теги имеют свою рекомендацию. Их несколько:

• Необязательный тег.
• Запретный.
• Пустой тег.
• Устаревший
• Утерянный.

Теги в HTML

Перед тем как создать HTML-страницу, нужно разобраться с тем, что должно быть в служебной части HEAD.

В области HEAD есть как обязательные, так и необязательные теги. К обязательному тегу относится заголовок. Он обозначается <title>Заголовок</title>. Он присваивается всему документу. И то, что вы видите в результатах поисковой системе Google, — это тег title.

Перейдем к разделу BODY. Существуют элементы, которые отображаются в браузере, а есть и неотображаемые. Например, комментарии не отображаются пользователю. Их можно использовать для заметок или же для подсказки другим сотрудникам, если вы работаете в команде.

Обозначается они как <!— комментарий —>

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

Пример такой вложенности:

<!— первый комментарий <!— второй комментарий —> продолжение первого комментария —>

Результатом в браузере будет следующее

продолжение первого комментария —>

А вот кусок <!— первый комментарий <!— второй комментарий —> не будет виден. Второй открывающийся тег <!— был проигнорирован и воспринялся как простой текст.

Заголовки в тексте

Заголовок указывается не только в разделе HEAD при помощи тега title. В контексте заголовок нужно указывать обязательно. Поскольку только его увидит пользователь.

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

Бывает всего 6 уровней. Самый главный заголовок обозначается <h3>Заголовок</h3>. С точки зрения продвижения страницы текст в тегах h3 и title должен совпадать. Более того, h3 с эстетической точки зрения должен быть только один. Но это не значит, что браузер не будет обрабатывать последующие h3. Их можно сделать сколько угодно, но это нежелательно.

Для подзаголовков используют теги от h4 до h6. Они так и — называются заголовок первого, второго, третьего, четвертого, пятого и шестого уровня. Так создаются вложенность информации и подразделение на категории.

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

Абзац

Основной текст в коде нужно оформлять в теге <p>…</p>. Он произошел от слова «параграф». Каждый абзац нужно оформлять тегом <p>, а не лепить всё в одну кучу. Обычный перенос строки не будет обработан. Всё выведется в одну строку. Для переносов нужно использовать тег <br>.

Обратите внимание, что тег переноса не закрывается. Он одиночный.

Рассмотрим на примере стихов.

У разных тегов, помимо своего «имени», есть и свой атрибут. Например, у тега абзаца есть атрибут «выравнивание», который обозначается align. Он может принимать значение left, right, center. То есть, выравнивание по левому или правому краю или по центру.

Использование ссылок

Наверное, вы уже подумали: а как создать HTML-страницу со ссылками? Сложного в этом ничего нет. Создать ссылки страницы HTML очень просто. Для этого есть специальный тег <a>. У него есть свои обязательные атрибуты. Правильная ссылка выглядит вот так:

<a href=»адрес страницы»>текст ссылки</a>

Если не указать адрес и текст, то данная ссылка будет бесполезной или невидимой для пользователя.

Заключение

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

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

fb.ru

Как написать код текстом на HTML странице — Примеры

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

Как написать тег в тексте

Нужно преобразовать символы & < >, которые используются в кодировке веб-документа. Можно автоматизировать процесс благодаря форме ниже:

Компактная программа CoderHTML делает тоже самое.

Тег <pre>

Дополнительно можно применить тег <pre>. По умолчанию, любое количество пробелов идущих на HTML странице подряд показывается как один. Для преодоления этого эффекта, используется свойство white-space, символ &nbsp; или тег <pre>.

<p>шпаргалка            блоггера</p>шпаргалка блоггера

Для данного тега можно задать CSS стиль (для Blogger нужно указать .post-body перед pre — подробнее как это сделать — см. скриншот ниже):

pre { margin: 10px 0px 10px 10px; padding: 10px; color: #3f0309; font: 14px normal helvetica, sans-serif; border-left: 4px solid #d2bf94; white-space: pre-wrap; word-wrap: break-word; }

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

Тег <code>

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

Тег <code>

Итог оформления кода текстом

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

shpargalkablog.ru

Текст в html

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.

Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.

Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы. По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.

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

Строчные элементы обрамляются тегами <span>…</span>.

Для обрамления элементов блочного типа используется пара <div>…</div>.

Браузеры обрамляют div-блоки разрывами строки.

Блок <div> не может располагаться внутри блока <span>.

Пример

БлокиПервый блок текста Второй блок текста.

Основные теги форматирования текста

Пример

Заголовки и абзацыЗаголовокпервого уровня Заголовок второго уровня Заголовок третьего уровня Заголовок четвертого уровня Заголовок пятого уровня Заголовок шестого уровня Тест абзаца

Создайте текстовый файл, как в примере. Сохраните его с расширением html.

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

Для создания и редактирования html-страниц подойдёт даже Блокнот. Но я рекомендую использовать Notepad++ или PhpStorm.

Выделение в тексте

Пример

Текст может быть полужирным. Текст может быть курсивом.Текст можно подчеркнуть. Текст можно зачеркнуть.Текст может быть надстрочным. Текст может быть подстрочным.

РЕЗУЛЬТАТ:

Текст может быть полужирным. Текст может быть курсивом.Текст можно подчеркнуть. Текст можно зачеркнуть. Текст может быть надстрочным. Текст может быть подстрочным.

Цитаты, переменные, адреса

Читать дальше: HTML списки

htmlweb.ru

Как писать стили CSS | Step For Top

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

На сайтах ucoz все CSS стили размещены в отдельном файле. В этом файле Вы можете изменять/редактировать/добавлять стили. Управлять этим файлом Вы можетеПанель управления – Дизайн – Управление дизайном CSS

Селекторы CSS

Что такое стили CSS я писала в статье: Просто о стилях CSS. А в этой статье будем разбирать сам синтаксис написания того или иного стиля.

Любой стиль пишется для конкретного тега (или нескольких тегов html). Поэтому CSS и HTML неразрывно связаны, об этом я писала и ранее.Основной синтаксис:Вначале указывается имя тега, – в умных книжках называется селектор – заглавными или строчными символами не имеет значения. Внутри фигурных скобок пишется сам стиль – свойство, а после двоеточия — его значение этого свойства. Набор свойств разделяется между собой точкой с запятой и может располагаться как в одну строку, так и в несколько.

Обратите внимание: красным цветом выделены обязательные знаки, без которых стили просто не будут работать. Забыли одну скобку или двоеточие – все – ничего работать не будет, стиля как будто не существует. Это важно будьте внимательны.

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

Например:

p{ font-family: Georgia; font-size: 13px; font-style: italic; background-color: #fbe1e4; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:5px; -khtml-border-radius:10px; }

Результат:

Стиль для тега <p>

Универсальный селектор

Универсальный селектор содержит в себе свойства абсолютно для всех тегов сайта. И обозначается он звездочкой. Синтаксис универсального селектора выглядит так:

Классы CSS

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

А что делать если я не хочу чтобы все теги P имели заданные свойства. А что если мне необходимо, чтобы некоторые теги имели совсем другие свойства. Для этого и существуют классы CSS стилей.

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

CSS

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

Например:

В данном примере селектору (тегу) <P> присвоено еще и дополнительное имя admin. Это означает,что не все теги <p> будут иметь заданный стиль, а только те, в которых прописан класс “admin“.

HTML

Мы видим что написан тег <p>, и ему присвоен класс admin.

Именно так, при верстке сайта создаются разные стили для одинаковых тегов. Самым распространенным при верстке сайта, по моему мнению, является тег div. И часто именно для него прописано огромное количество разнообразных стилей.

Очень часто одни и те же стили, могут применяться для разных тегов, например div, p, и т.д. Тогда сам тег не пишется, а после точки пишется название класса.

Пример:

<html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title>Пример Урока 2</title> <style> div { background:#39F; color:#600 } div.admin { background:#0F6; color:#003; margin: 5px; } .style { background:#000; color:#FFF; border: 2px solid #F00; margin: 10px; } </style> </head> <body> <div> Друг познается в беде </div> <div>The Friend in Need is the Friend indeed</div> <p>On connaît l’ami dans le besoin </p> </body> </html>

Результат:

Друг познается в беде

The Friend in Need is the Friend indeed

On connaît l’ami dans le besoin

Дочерние селекторы CSS стилей

Очень часто в html версии сайта бывает так что один тег находится внутри другого. Чаще всего внутри тегов div находятся еще самые разнообразные теги. Так вот теги внутри тегов являются дочерними. А CSS стили написанные для таких тегов являются дочерними селекторами.

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

Разбираем CSS

div.admin { display:block; background:#39F; color:#600; margin: 10px; padding: 10px; font-family:»Palatino Linotype», «Book Antiqua», Palatino, serif; } div.admin p{ color:#F00; margin: 5px; } div.admin a { background:#000; color:#FFF; font-weight:bold; }

Итак, ми видим, что класс для всех тегов (селекторов) – admin. Первый селектор – это внешний тег div, для которого и заданы свойства. Далее мы видим следующий селектор div.admin p – вот он значит свойства для всех тегов p, которые находятся внутри тега div класса admin. Тоже самое с div.admin a – тут прописаны все свойства тега а, который находится внутри тега div класса admin.

Синтаксис дочерних селекторов простой: тот тег, который находится внутри предыдущего, пишется после главного тега через пробел. В нашем случае, например, div.admin p. Внешний тег div.admin. А внутренний p, он и написан после div.admin после пробела.

Разбираем HTML

<div>The Friend in Need is the Friend indeed <p>On connait l’ami dans le besoin </p> <p><a href=»»> А это ссылка </a></p></div>

С HTML все проще простого. Класс прописан всего только раз, в самом внешнем теге div. В нашем примере это класс admin. А далее все теги находятся внутри тега div и являются дочерними, поэтому на них распространяются стили дочерних селекторов написанных в CSS.

Результат:

Псевдоклассы CSS

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

Синтаксис псевдоклассовПсевдоклассы пишутся после селектора (тега) через знак двоеточие.Например,

Самые распространенные псевдоклассы CSS для определения стилей ссылок

:link – определяет стиль еще НЕ посещенной ни разу ссылки.:active – определяет стиль активной ссылки. Ссылка становится активной если кликнуть по ней.:visited – определяет стиль еще посещенной ссылки ранее.:hover – определяет стиль ссылки, когда на нее навести курсором.Обратите внимание, что :hover всегда должно располагаться после :link и :visited, так как в противном случае правила каскадирования скроют свойства :hover. Лучше всего располагать псевдоклассы так, как я расположила их при объяснении.

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

А вот как это выгдядит в CSS:

.inf { margin: 5px; } .natinf a:link { padding-left: 5px; display:block; background: #f1fcff; border: #f1fcff; color: #005d68; font-size: 10pt; text-decoration: none; border-radius: 3px; } .natinf a:hover { padding-left: 5px; display:block; background: #B9FAFF; color: #005059; text-decoration: none; border-left: 1px solid #0a8387; border-top: 1px solid #0a8387; border-right: 1px solid #43bdc1; border-bottom: 1px solid #43bdc1; border-radius: 3px; }

А это код HTML, который я употребляю в информере:

<div><a href=»$ENTRY_URL$»>$TITLE$</a></div>

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

Статьи по теме:

stepfor.top

Создание веб-сайта. Курс молодого бойца / Хабр

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

Условно процесс создания сайта (web-проекта) можно разделить на 3 этапа:

Данный этап можно разделить на несколько подэтапов:

• Создание идеи
• Разработка структуры проекта
• Проработка макета проекта

Создание идеи

На данном этапе нам необходимо определиться с тематикой проекта (сайта, сервиса). Далее, в соответствии с выбранной темой, необходимо собрать соответствующие материалы: текстовые, графические.

Разработка структуры проекта

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

Проработка макета проекта

После того, как мы определились со структурой проекта можно составить макет проекта (схематично).

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

Основные элементы страницы

Зачастую основными элементами страницы являются:

содержащий блок (wrapper, container)

,

логотип

,

навигация

,

контент

,

футер (нижний колонтитул)

,

свободное пространство

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

Содержащий блок (контейнер)

Роль контейнера на странице может выполнять непосредственно элемент body или же div. Ширина содержащего блока может быть резиновой (fluid), а может быть фиксированной (fixed).

Логотип

Текстовая или графическая составляющая проекта и выделяющая его среди других. Логотип чаще всего располагается в верхнем левом углу страницы или же посередине (в зависимости от идеи, макета).

Навигация

Основная навигационная панель содержит ссылки на основные разделы сайта. Навигационная панель часто располагается в верхней части страницы (в независимости от того вертикально или горизонтально располагаются элементы навигации).

Контент

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

Нижний колонтитул (footer)

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

Резиновый и фиксированный макет

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

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

Резиновый макет

«Резиновый» макет подразумевает, что страница сайта будет стараться занять всё доступное ей пространство на экране пользователя, подстраиваясь под разрешение.

В данном контексте стоит уяснить такие понятия, как отзывчивый веб-дизайн (Responsive Web Design aka. RWD) и адаптивный веб-дизайн (Adaptive Web Desing aka. AWD). Первое понятие укладывается в концепцию «резинового» и означает, что при изменении размера экрана ваш сайт подстраивается под него, второе понятие подразумевает, что при разработке вы определяете основные разрешения (размеры экрана), под которые будет подстраиваться (адаптироваться) ваш контент. В обоих случаях следует разрабатывать не один, а несколько макетов, которые будут соответствовать разным разрешениям экрана. Часто создаётся 3 макета под разрешения iPhone (Android Phone), iPad (Android Tablet) и Desktop.

На данном изображении показаны оба подхода. Сверху блок «отзывается» на любые изменения размера контейнера, снизу «адаптируется» под определённую ширину

Полезные ссылки по теме:

Почему при «резиновом» дизайне создаётся несколько макетов, а не используется один?

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

Модульная сетка

Перед составлением схемы проекта так же необходимо уяснить понятие модульной сетки. Модульная сетка подразумевает под собой разделение страницы на отдельные колонки по вертикали и выстраивание контента, при разработке дизайн макета, именно по этой сетке.

Наиболее популярной системой является модульная сетка 960 Grid System (http://960.gs), которая максимально делит страницу на 12, 16 и 24 колонки. Максимум в ширине сетка имеет 960 пикселей. Данное решение основано на том, что большинство современных мониторов, на момент создания сетки, имели разрешение не меньше 1024 на 768 пикселей. Создание макета на основе данной сетки, в дальнейшем, поможет ускорить процесс разработки (вёрстки).

Так же стоит отметить, что при разработке «резинового» макета страницы существует понятие максимальной ширины. Данное утверждение основывается на удобстве восприятия информации. Если предположить, что наш сайт не имеет максимального значения по ширине, то на больших мониторах информация будет сильно растягиваться и её неудобно будет читать. Чаще всего ограничиваются шириной в 1280 пикселей.

Модульная сетка 960GS отвечает концепции «фиксированного» дизайна, для «резинового» дизайна можно обратить внимание на адаптацию этой же сетки на сайте http://www.designinfluences.com/fluid960gs/ или воспользоваться сеткой, которую предлагает фрэймворк Bootstrap (http://getbootstrap.com/css/#grid).

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

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

Полезные ссылки и материалы:

Макеты веб-страниц

Среди всего многообразия составления макета веб-страницы можно выделить четыре наиболее распространённых:

• Навигация в левом столбце

• Навигация в правом столбце
  
• Навигация в трёх столбцах

• Горизонтальная навигация. На данном этапе сайты с таким типом навигации составляют большинство. Удобство такого подхода легко объяснить тем, что в данном случае у нас остаётся больше пространства для контента, составляющего наш сайт.

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

На первых двух сайтах можно посмотреть какие цвета использовались в дизайне.

Mobile First

С учётом тенденций последних лет данный подход плотно занимает свою нишу в разработке и дизайне сайтов. Тенденция такова, что практически около 60% пользователей интернета используют для доступа в сеть мобильные устройства, поэтому правилом хорошего тона становится разработка не только десктопной версии сайта, но и мобильной версии. При использовании данного подхода разработка макета сайта, дизайна и вёрстки начинается с мобильной версии, а затем уже прорабатываются макеты для других разрешений: добавляются блоки, баннеры, дополнительные элементы дизайна и пр.

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

Усвоив всё вышесказанное можно переходить к следующему этапу – Дизайн.

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

Один из способов определения основного цвета в проекте – это составление mood board. Для этого необходимо выписать себе все синонимы, связанные с темой проекта, а затем каждый синоним набрать в поиске по картинкам Google или Yandex. На основе найденных изображений выписать себе цвета, которые чаще всего встречаются на них (каких цветов больше). Найденные цвета будут составлять визуальное восприятие нашего проекта и вызывать у пользователя соответствующие чувства.

Для работы с выбранным цветом и составлением палитры цветов нашего сайта можно использовать следующие инструменты:

• Color Scheme Designer 3 (http://colorschemedesigner.com/csd-3.5/). Помимо выбора цветовой схемы данный сервис позволяет посмотреть пример того, как выбранные цвета будут смотреться на сайте

• Adobe Color CC (https://color.adobe.com/ru/). Данный ресурс, в отличие от Color Scheme Designer 3, позволяет создавать палитры ещё и на основе загруженных изображений (которые, например, могли появиться у нас на этапе составления mood board). Так же данный сервис обладает большим архивом палитр других пользователей.

• COLORlovers (http://www.colourlovers.com/). Обширное сообщество, где можно подобрать различные палитры.

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

При работе над дизайном главной и внутренних страниц стоит помнить о некоторых основных принципах.

Элементы Call to Action

Понятие призыва к действию относится к интерактивным элементам сайта: кнопки, баннеры и пр. Данные элементы оформляются таким образом, что пользователю должно хотеться непременно на них нажать. Например, это может быть кнопка с призывом к действию (Нажми, Купи, Сэкономь), яркий баннер с заманчивым предложением, яркой картинкой и пр.

Данное понятие хорошо вписывается в принцип AIDA (Attraction Interest Desire Action).

AIDA

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

• Привлечение внимания
• Интерес
• Желание
• Действие

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

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

Схема просмотра страницы

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

Визуальные направляющие

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

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

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

Фрэймворки

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

Bootstrap

,

Foundation

,

Material Design Lite

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

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

_{Готовые элементы дизайна из Bootstrap, Foundation и Material Design Lite (MDL)}

Трэнды

Нельзя не упомянуть о некоторых наметившихся трендах последнего времени в качестве компоновки и дизайна страниц.

Во-первых, стоит упомянуть о так называемых лэндинговых страницах, которые подразумевают под собой длинную страницу, разделённую на соответствующие секции и знакомящие пользователя с основным контентом сайта. Часто лэндинг является единственной страницей, на которой сразу удаётся показать всю необходимую информацию, не заставляя пользователя переходить по страницам. Лэндингам обычно сопутствует хороший дизайн, выверенная и продуманная подача информации, элементы call-to-action, интерактивность (счётчики, анимация и пр.).

Стоит так же сказать о внешнем виде страниц и вспомнить такие понятия как скевоморфизм и плоский дизайн.

Скевоморфизм

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

Плоский дизайн

Плоский дизайн использует минимум текстур и оформление, создание дизайна базируется на понятиях контраста, соотношения цветов и размеров.

Не маловажную роль на тренды в веб-дизайне оказало развитие мобильных операционных систем. Чаще всего двигателем прогресса становятся решения от компании Apple, которая в своих дизайн-решениях iOS сначала использовала имитацию реальных объектов, а затем всё упростила до плоского дизайна (Flat UI). Сейчас в вебе главенствует Flat дизайн и Material дизайн, который активно развивает Google.

Неплохой сайт-сравнение двух концепций: http://www.flatvsrealism.com/

По основам веб-дизайна и прототипированию неплохим подспорьем может стать данная книга: Джейсон Берд: Веб-дизайн. Руководство разработчика.

Итак, процесс дизайна макета страницы плавно перетекает в процесс «оживления» сделанного на предыдущих этапах. Прежде чем сразу начинать писать HTML, CSS и JS стоит немного поговорить о редакторах кода и структуре проекта.

Редакторы кода

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

От части, все эти редакторы похожи по принципу работы, когда при установке мы получаем редактор, в который затем можем «доставить» необходимые модули и плагины, так сказать, «редакторы на стероидах». Разница лишь в технологиях, которые были использованы при написании редакторов, если Sublime Text написан при помощи C++ и Python, то 2 других используют JavaScript, HTML, CSS (Less). За счёт этой разницы Sublime Text может работать чуть быстрее своих коллег.

Существуют так же более продвинутые IDE (студии) такие, как Web Storm, PHP Storm и пр., но для вёрстки проекта вполне подойдёт редактор кода, а не целая студия (IDE).

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

Обзоры текстовых редакторов:

Структура проекта

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

Лучше всего отдельные категории файлов помещать в свои папки: картинки в папку images или img, css в папку css, javascript в папку js. В корне будет лежать только index.html и страницы сайта, либо только index.html, а страницы в отдельной папке pages. Соблюдая эти правила вы никогда не запутаетесь в проекте.

Так же стоит сказать и об именовании файлов проекта. Чаще всего применяются следующие имена: главная страница – это index.html, стили проекта styles.css, скрипты scripts.js или app.js, минимизированные версии файлов имеют префикс .min, картинки носят не пространные названия на русском языке или набора цифр, а отражают то, что на них изображено, например, button.png, download-icon.png, logo.png и т.д.

Работа над проектом

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

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

Написание HTML

Сейчас при написании HTML кода уже смело можно использовать тэги и элементы разметки, которые появились вместе с стандартом HTML5, если вам необходимо поддерживать старые браузеры, то можно использовать, например, плагин html5shiv (

https://github.com/afarkas/html5shiv

), который обеспечивает поддержку новых стандартов в старых браузерах или библиотеку Modernizr (

https://modernizr.com/

) (html5shiv входит в сборку Modernizr), которая определяет возможности браузера, с помощью которого просматривается сайт.

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

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

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

Правила именования классов

В проекте во всём должен быть порядок: от структуры проекта до имен классов, разметки и написания кода. Если при разметке важно следить за типом информации и размещением её в соответствующих блоках (заголовок, список, ссылка, строчный элемент, параграф и пр.), то при именовании классов и идентификаторов важно соблюдать здравый смысл. Классы должны давать абстрактное понятие о блоке, к которому они относятся, чтобы код было легче читать, а затем и писать стили. В принципе здесь не должно быть ничего сложного, если мы размечаем меню, то логично содержащему блоку дать класс .nav или .navigation, если это блок с текстом, то можно дать ему класс .block-text и т.д.

БЭМ

На сегодняшний день есть один популярный подход, который касается принципов построения проекта в целом, но на данном этапе нас интересует именно именование классов. Подход называется

БЭМ

и расшифровывается, как

Блок Элемент Модификатор

.

Вкратце можно описать данный подход, как некое соглашение по именованию классов и представлению разметки страницы. Каждый элемент страницы являет собой сущность, которая может существовать независимо от контекста, тогда мы говорим о Блоке (.block) или же только в контексте другой сущности, тогда мы говорим об Элементе (.block__element). Каждый Блок или Элемент могут иметь различные модели представления: цвет, форму, прозрачность и пр. За подобные свойства будет отвечать Модификатор (.block__element_mod).

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

Более полная информация о методологии: https://ru.bem.info/

SMACSS

Так же существует подход

SMACSS

(расшифровывается данный акроним как Scalable and Modular Architecture for CSS – Масштабируемая и Модульная Архитерктура для CSS), который разделяет понятие о классах и разметке на несколько уровней: базовый, макет, модуль, состояние, тема.

• К базовому уровню будет относиться всё, что касается непосредственно тэгов html.
• К уровню макета мы будем относить всё, что касается основных составляющих страницы: секции.
• К уровню модуль мы будем относить всё, что касается переиспользуемых элементов страницы: баннеры, навигация, списки, блоки информации и пр.
• Уровень Состояние описывает как будут выглядеть модули и секции в том или ином состоянии: отображаются или не отображаются, сжатые или раскрытые, активны или неактивны и пр.
• Уровень темы чем-то схож с уровнем Состояния и отражает как модули или секции могут выглядеть.

В данном подходе используются следующие соглашения по именованию. Уровни определяются при помощи префиксов и соответствующего буквенного обозначения:

• Макет: .l- или .layout-
• Так как модули составляют основную часть проекта именовать их, используя префикс module- избыточно. Поэтому для них используются имена как есть, например: .example {}, .afisha {} и пр.
• Состояния имеют префикс .is-, например .is-hidden {}
• Уровень Темы именуется подобно модулям.

При данном подходе часто бывает удобно каждый уровень абстракции и его классы держать в отдельном файле.

Информация о методологии и онлайн книга: https://smacss.com/

Русскоязычный перевод книги по SMACSS: https://github.com/andrew—r/smacss

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

Небольшой курс по основам HTML: Смотреть

Написание CSS

Правила именования классов подводят нас к следующему этапу. Когда написана html структура проекта, определены классы можно переходить к написанию CSS стилей и нарезке макета.

Стоит упомянуть о 2-х CSS файлах-дополнениях: normalize.css и reset.css.

Reset.css

Изначально в проектах повсеместно использовался

reset.css

, написанный Эриком Мейером. Цель данного свода правил – сбросить стили браузера, которые он по умолчанию использует для отображения элементов разметки. Таким образом при использовании reset.css нам не нужно переписывать стили браузера, по сути мы работаем с «чистым листом» и можем сосредоточиться на написании собственных стилей с нуля.

Normalize.css

Normalize.css

наоборот, не сбрасывает все стили «в ноль», а нормализует их, приводит отображение стилей проекта к более-менее однообразию во всех современных браузерах.

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

Так же стоит упомянуть о, так называемом, «быстром сбросе», когда мы абсолютно для всех элементов страницы с помощью селектора * прописываем свойства {margin: 0; padding: 0}. Таким образом мы сбрасываем все внутренние и внешние отступы для всех элементов страницы. Но данную технику не рекомендуется использовать, так как она замедляет процесс отрисовки страницы, да и по сути имеет мало смыла (на мой взгляд).

Так же стоит отметить, что все размеры и отступы берутся непосредственно из дизайн-макета. Для получения данных значений нам необходимо использовать инструмент «линейка» и направляющие (речь про инcтрументарий Adobe Photoshop), а затем переносить полученные значения в код. Если мы работаем с фиксированным макетом, то значения переносятся в пикселях как есть, если же у нас «резиновый», то значения нужно переводить в проценты. Основная формула – это ширина элемента, делённая на ширину контекста (ширина содержащего блока). Например, если блок, содержащий текст и картинку имеет на макете ширину 400px, а блок с текстом в нём должен иметь ширину 340px, то в процентном выражении это будет (340 / 400) * 100%, то есть 85% будет занимать блок с текстом.

Не стоит перегружать ваши стили чрезмерной специфичностью, например, если мы хотим, чтобы ссылка внутри списка имела красный цвет, то не обязательно записывать всю линейку классов и тэгов: .main –nav ul li a, достаточно просто указать .main-nav a. Слишком «специфичные» правила делают правила контекстно зависимым и заставляют вас писать лишний код, а так же влияют на скорость отрисовки страницы, так как при разборе правил CSS парсер читает их справа налево и ему сначала, если брать описанный выше пример, нужно взять все ссылки (a), затем отбросить все ссылки, которые не лежат в li и т.д. пока он не доберётся до содержащего класса.

Специфичность кода, так же означает чрезмерную привязку к базовым тэгам. Например, если мы хотим, чтобы элемент внутри .block был синим и при разметке использовали элемент span (в правилах мы написали .block span {background-color: blue}), то при замене его на div, например, нам нужно будет написать новое правило уже для div внутри .block. Таким образом наш код будет обрастать ненужными правилами, которые по сути дублируют друг друга. Гораздо проще определить всего лишь один класс (класс элемента), который при присвоении внутренним элементам будет приводить нас к желаемому результату.

Ещё один пример контекстной зависимости кода – это использование имен тэгов вместе с именами классов, например, div.block {display: block}. Если мы захотим тот же класс применить к span, то нам придётся написать опять span.block {display: block} или span.block, div.block {display: block}, что в любом случае приведёт к увеличению кода на лишнюю строчку.

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

Если, вы используете правила, относящиеся к спецификации CSS3, то не поленитесь проверить необходимость использования браузерных префиксов на сайте http://caniuse.com.

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

Полезные ссылки и материалы:

Написание JS

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

Есть неплохой ресурс, который приводит альтернативы одних и тех же манипуляций на языке JavaScript и с помощью библиотеки jQuery: http://youmightnotneedjquery.com/, так же неплохим подспорьем является сайт https://developer.mozilla.org/ru/, на котором, помимо описания методов и свойств JavaScript, можно найти полифиллы для тех или иных методов (библиотека или часть кода, которая добавляет в старые браузеры поддержку возможностей современных функций и методов JavaScript).

Важно отметить, что не рекомендуется использовать JavaScript для стилизации, то есть не стоит для того или иного объекта DOM (элемента страницы) добавлять портянку CSS свойств с помощью JavaScript, чтобы выделить его состояние и пр. Рекомендуется использовать классы, то есть заранее в CSS определить классы-состояния (активный, не активный, скрытый, использованный и пр.) и при манипуляции элементами просто добавлять или убирать соответствующие классы.

Например, у нас есть элемент списка с классом .list__item, для того, чтобы показать активный элемент в данный момент (выбран пользователем) или нет, можно просто добавить класс (.list__item—active), а не прописывать все стили, присущие этому классу в JS:

document.querySelector(‘.list__item’).style.color = ‘red’;

и т.д.

Небольшой пример с возможными способами присваивания класса (присвоение модификатора происходит при нажатии на зелёный квадрат):

http://jsbin.com/

.

Не рекомендуется решать задачи, которые явно относятся к уровню CSS с помощью JavaScript, пытаясь как-то выровнять объект или добавить ему стили при наведении и пр.

Опять-таки, возвращаясь к теме Mobile First, нельзя не упомянуть о 2-х концепциях, которые коррелируют с данной техникой. Progressive Enhacement и Graceful Degradation, что переводится как прогрессивное улучшение и последовательное ухудшение. Данные принципы описывают 2 разных подхода к разработке: в первом случае мы разрабатываем наш сайт, пишем скрипты с учётом старых браузеров и систем или же определяем поведение при невозможности запуска скриптов, а затем постепенно улучшаем скрипт, вводя современные функции и методы, таким образом мы получаем сайт, который будет одинаково хорошо работать в старых и новых браузерах и средах (то же касается и css).

При Graceful Degradation подход противоположный – мы разрабатываем для современных браузеров и, лишь, потом начинаем вносить доработки и изменения с учётом старых версий.

Подход Mobile First чем-то схож с Progressive Enhacement.

Проверка кода

После написания html, css и js для нашей страницы необходимо проверить всё ли сделано верно. Для этого можно использовать online средства:

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

Статьи с рекомендациями по написанию JS, HTML и CSS:

Средства автоматизации

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

960GS

Мы уже говорили об этом средстве разработки в разделе про модульные сетки и дизайн. Нужно сказать, что 960GS предлагает не только макеты для создания дизайна, но и свою систему именования классов. Используя предлагаемые классы при вёрстке и при подключении css файла системы в проект, блоки сайта будут выстроены по этой сетке, что сэкономит время на написании практически того же самого самостоятельно.

<div>
  <div>
      <div>
          ...
      </div>
      <div>
          ...
      </div>
      <div>
          ...
      </div>
  </div>
  <div>
      ...
  </div>
</div>

Emmet

Emmet – это средство работы с html и css (

http://emmet.io/

). Плагин для работы с данным средством можно установить, например, в Sublime Text, тогда у вас появляется возможность не писать громоздкие куски кода на html и css, а записывать их в строчку, раскрывая затем в полноценную разметку. Например, строка

.block>ul.list>li.list__item*3

, может быть раскрыта в полноценный код:

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Затем вам просто необходимо вписать текстовые значения в элементы списка. То же касается и css: строка

w:100px+h:150px+bgc:#ff0

раскрывается в:

width: 100px;
height: 150px;
background-color: #ff0;

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

Jade

Далее стоит упомянуть и о таком языке работе с шаблонами, как jade (

http://jade-lang.com/

). Опять-таки, с помощью jade писать html становится быстрее и удобнее, а так же появляется возможность создания переиспользуемых блоков кода и миксинов, передавая которым на вход те или иные параметры мы будет получать нужную нам разметку. Благодаря jade в проекте, касательно разметки и написания страниц, может поддерживаться модульность, а часто используемые названия и блоки кода могут выноситься в качестве переменных (названия, имена страниц и пр.) или миксинов в отдельные файлы настроек и файлы, соответственно. Для работы с jade, а точнее для преобразования написанного кода из jade в html, необходимо использовать командную строку, а так же установить на ваш компьютер платформу nodejs (

https://nodejs.org/en/

,

http://nodejs.ru/

).

Командная строка

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

mkdir project && cd project && mkdir css && touch css/styles.css && mkdir images && mkdir js && touch js/app.js && touch index.html

После нажатия enter мы получим папку project в которой будут находиться папки css, images, js, в папках css и js файлы styles.css и app.js, соответственно, а в корне project лежать файл index.html. Таким образом мы сэкономили время на создание папки, написание её названия, создание файлов и пр. Так же командная строка используется для работы с остальными средствами автоматизации.

Sass

Далее стоит поговорить о таком языке как Sass (

http://sass-lang.com

/). Данный язык упрощает работу с css. Благодаря Sass можно записывать вложенные классы, проводить математические вычисления прямо в коде, выносить переиспользуемые величины в качестве переменных в отдельные файлы или в начало файла, что в значительной степени упрощает дальнейшую работу со стилями и упрощает изменение тех или иных величин, так как они все будут храниться в одном месте и не нужно будет «ходить» по всему проекту и вносить соответствующие правки. Так же, благодаря Sass в проекте можно придерживаться принципа модульности, храня части разметки в соответствующих файлах и подключать их все в основной, затем с помощью консольной команды можно собрать весь код в один css файл, так же поддерживается сборка результирующего файла на лету по мере написания стилей. Опять-таки для работы с Sass потребуется командная строка. Процесс установки пакета можно изучить здесь:

http://sass-lang.com/install

.

HTML5Boilerplate

HTML5Boilerplate (

https://html5boilerplate.com/

) представляет собой заранее скомпонованный проект, в котором уже есть index.html, normalize.css и пр. В index.html, например, уже заранее прописаны основные куски кода, которые необходимы при написании html страницы. Проект позволяет скачать архив со всеми файлами как есть или же использовать кастомную сборку:

http://www.initializr.com/

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

Gulp и Grunt

Gulp (

http://gulpjs.com/

) и Grunt (

http://gruntjs.com/

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

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

Оба сервиса используют различный подход в описании выполнения задач, но суть их работы одинакова. Полезным будет данное сравнение: http://frontender.info/gulp-grunt-whatever/

Так же многие сервисы вроде autoprefixer (автоматическая простановка браузерных префиксов), jshint (проверка JS кода на валидность) могут быть установлены как сторонние плагины в текстовом редакторе (Sumblime Text, Atom, Brackets) и инициализированы при нажатии определённого сочетания клавиш.

Bootrstrap, Foundation, Material Design Lite

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

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

Со всеми возможностями и примерами можно ознакомиться на соответствующих сайтах:

Данное описание не является исчерпывающим и представляет собой лишь поверхностный взгляд на некоторые технологии. Но прежде чем пускаться во все тяжкие, используя средства автоматизации, библиотеки, framework’и, готовый код и прочее, стоит, всё-таки, изучить основы работы с html, css и js.

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

Руководство по Django часть 2: создание скелета — Изучение веб-разработки

Это вторая статья из нашего руководства по Django, которая показывает, как можно создать «скелет» сайта, как фундамент, на котором можно строить всё остальное: настройки, ссылки, модели, контроллеры и представления.

Эта статья показывает, как можно создать «скелет»(прототип) сайта, который затем можно расширить при помощи различных настроек, url адресов, моделей, представлений, и шаблонов (эти темы будут объясняться в последующих статьях).

Алгоритм следующий:

1. Использовать django-admin для создания папки проекта, шаблонов остальных файлов, и скрипта для управления проектом (manage.py).
2. Использовать manage.py для создания одного или нескольких приложений.

   Примечание: Сайт может состоять из одной или нескольких различных частей, например: основная часть, блог, вики, раздел загрузок, и так далее. Философия Django подталкивает разработчиков создавать эти части, как разные приложения, которые, если понадобится, могут быть использованы повторно в других проектах. 

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

Для Сайта местной библиотеки папка сайта и проекта будет называться locallibrary, и у нас будет одно приложение с названием catalog. Верхняя структура проекта будет следующей:

locallibrary/         
    manage.py         
    locallibrary/     
    catalog/          

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

Для начала откройте командную строку/терминал, перейдите в ту папку, куда вы хотите поместить проект Django(лучше в папке профиля пользователя C:\Users\user_name, при запуске командной строки используется именно эта директория), и создайте папку для вашего нового сайта (в данном случае: locallibrary). Затем войдите в эту папку, используя команду cd:

mkdir locallibrary
cd locallibrary

Создайте новую папку, используя команду django-admin startproject как в примере ниже, и затем зайдите в созданную папку.

  django-admin startproject locallibrary .
cd locallibrary

Команда django-admin создаст файловую структуру, как в примере ниже:

locallibrary/
    manage.py
    locallibrary/
        settings.py
        urls.py
        wsgi.py

Подпапка проекта locallibrary это ключевая директория нашего проекта: 

• settings.py содержит в себе все настройки проекта. Здесь мы регистрируем приложения, задаём размещение статичных файлов, настройки базы данных и так далее.  
• urls.py задаёт ассоциации url адресов с представлениями. Несмотря на то, что этот файл может содержать все настройки url, обычно его делят на части, по одной на приложение, как будет показано далее.
• wsgi.py используется для налаживания связи между вашим Django приложением и веб-сервером. Вы можете воспринимать его, как утилиту.

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

Выполнив предыдущие шаги, запустите следующую команду для создания приложения catalog, который будет размещён внутри папки locallibrary (команду необходимо выполнять из папки, в которой находится manage.py):

python3 manage.py startapp catalog

Примечание: приведённая выше команда справедлива для GNU Linux/Mac OS. На Windows команда должна иметь вид: py -3 manage.py startapp catalog

Если вы работаете под Windows, заменяйте команду python3 на py -3 в этой и следующих статьях.

Эта команда создаст новую папку и наполнит её файлами различных частей приложения (выделенные полужирным ниже). Большинство файлов названы, исходя из их назначения (например контроллеры(views) должны находится во views.py, модели в models.py, тесты в tests.py, настройки административной части в admin.py, регистрация приложения в apps.py) и уже содержат некоторый шаблонный код для работы с вышеназванными объектами.

Обновлённая директория должна выглядеть следующим образом:

locallibrary/
    manage.py
    locallibrary/
    catalog/
        admin.py
        apps.py
        models.py
        tests.py
        views.py
        __init__.py
        migrations/

Кроме перечисленных выше файлов были созданы:

• Папка migrations используется, чтобы хранить»миграции» — файлы, которые позволяют вам автоматически обновлять базу данных по мере изменения моделей. 
• __init__.py — пустой файл для того, чтобы Django и Python распознавали папку как Python модуль и позволяет нам использовать его объекты внутри других частей проекта.

Примечание: Заметили, что некоторых файлов не хватает? В то время, как там нашли себе место файлы для контроллеров(views) и моделей(models), файлов для настройки url соотносителя, шаблонов, и статичных файлов создано не было. Далее мы покажем, как их создать (они не обязательны для каждого сайта, но нужны в данном примере).

После создания приложения, нам нужно зарегистрировать его в проекте, чтобы различные утилиты затрагивали его своим действием (например при добавлении моделей в базу данных). Приложения регистрируются добавлением их названий в список INSTALLED_APPS в настройках проекта(который, как мы помним, называется settings.py). 

Откройте файл locallibrary/locallibrary/settings.py и найдите в нём список INSTALLED_APPS . Затем добавьте новую строку в конец списка, как показано полужирным ниже.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'catalog.apps.CatalogConfig', 
]

Новая строка указывает на файл конфигурации приложения (CatalogConfig), который был создан в /locallibrary/catalog/apps.py , когда вы создали приложение.

Примечание: Легко заметить, что в INSTALLED_APPS уже подключено большое количество приложений (и объектов MIDDLEWARE, ниже в файле конфигурации). Они добавляют поддержку админ-панели Django и, как следствие, огромное количество функциональности (включая сессии, аутентификацию и прочее).

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

Мы будем использовать базу данных SQLite для этого проекта, потому что не предполагаем большое количество одновременных запросов на неё, а ещё потому, что для её настройки совсем не надо ничего делать! Вы можете видеть, что база данных уже настроена в settings.py (подробная информация указана ниже):

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

Так как мы используем SQLite, то нам не нужно ничего делать.

Давайте продолжим!

Файл settings.py так же применяется и для некоторых других настроек, но на данном шаге имеет смысл поменять разве что TIME_ZONE — это значение должно быть представлено строкой, указанной в списке часовых поясов tz (колонка TZ в таблице, в строке временной зоны, которая вам нужна). Измените TIME_ZONE на одну из строк из таблицы, которая отвечает вашему часовому поясу. Например:

TIME_ZONE = 'Europe/Moscow'

В файле присутствует две настройки, которые не нужно менять сейчас, но о назначении которых следует знать:

• SECRET_KEY. Это секретный ключ, который используется Django для поддержки безопасности сайта. Если вы раскроете этот ключ в процессе разработки кому-либо, то необходимо будет его сменить (возможно считать его с какого-либо файла на сервере или переменной окружения) когда будете размещать проект на сервер.blog/’, include(‘blog.urls’))
  «»»
  from django.urls import path
  from django.contrib import admin

  urlpatterns = [
  path(‘admin/’, admin.site.urls),
  ]
  

  URL соотношения хранятся в переменной urlpatterns, которая является списком функций path(). Каждая path() функция или ассоциирует шаблон URL с контроллером(views) или же его с другим таким списком (во втором случае, первый URL становится «базовым» для других, которые определяются в дочернем списке). Список urlpatterns инициализирует список функции, которая, например, соотносит admin/ с модулем admin.site.urls , который содержит собственный файл-соотноситель.

  Добавьте строчки, приведённые ниже в низ файла urls.py , чтобы добавить новый элемент в список urlpatterns. Этот элемент содержит url() который направляет запросы с URL catalog/ к модулю  catalog.urls (файл с относительным путём /catalog/urls.py).

  
  from django.urls import include
  from django.urls import path
  urlpatterns += [
       path('catalog/', include('catalog.urls')),
  ]
  

  Теперь давайте перенаправим корневой URL нашего сайта (например 127.0.0.1:8000) на URL 127.0.0.1:8000/catalog/; это единственное приложение, которое мы собираемся использовать, поэтому это вполне разумно. Чтобы это использовать, нам понадобится специальная функция (RedirectView), которая принимает первым параметром новый относительный URL на который следует перенаправлять (/catalog/) когда указанный в функции url() адрес  соотносится с адресом запроса (корневой URL, в данном случае).

  Добавьте следующие строчки, тоже в конец файла:

  
  from django.views.generic import RedirectView
  urlpatterns += [
      path('', RedirectView.as_view(url='/catalog/', permanent=True)),
  ]

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

  Добавьте последнюю часть в конец файла:

  # Используйте static() чтобы добавить соотношения для статических файлов
  # Только на период разработки
  from django.conf import settings
  from django.conf.urls.static import static
  
  urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
  

  Примечание: Существуют различные способы дополнения списка urlpatterns (в примере мы просто добавляли объект, используя оператор += чтобы чётко разделить изначальный и дописанный код). Вместо этого, мы могли бы добавить соотношения внутрь определения переменной:

  urlpatterns = [   path('admin/', admin.site.urls),
  path('catalog/', include('catalog.urls')),path('',
  RedirectView.as_view(url='/catalog/', permanent=True)), ] +
  static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

  Кроме того, мы добавили import вниз файла (from django.urls import include) ,чтобы видеть, что мы добавили, но обычно все инструкции import добавляются в верхнюю часть файла.

  Напоследок, создайте файл urls.py внутри папки catalog, и добавьте следующий код, чтобы определить (пустой) urlpatterns. Сюда мы будем добавлять наши URL соотношения, по мере разработки сайта. 

  from django.urls import path
  from . import views
  
  
  urlpatterns = [
  
  ]
  

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

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

  Запуск миграций базы данных

  Django использует Объектный Соотноситель Связей (ORM) чтобы соотносить определения моделей в Django приложении со структурами данных, которые используются базой данных. Когда мы меняем наши модели, Django отслеживает изменения и может создать файлы миграций (в папке /locallibrary/catalog/migrations/) чтобы применить соответствующие структуры данных к базе, чтобы та соответствовала модели.

  При создании сайта, Django автоматически добавил несколько моделей, чтобы мы могли их использовать в админ-панели (о которой мы поговорим позже). Выполните следующие команды, чтобы создать нужные таблицы в базе данных, соответствующие этим моделям (убедитесь, что вы находитесь в папке с manage.py):

  python3 manage.py makemigrations
  python3 manage.py migrate
  

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

  Команда makemigrations создаёт (но не применяет) миграции для всех приложений, которые установлены в ваш проект (вы так же можете указать в конце имя конкретного приложения, чтобы создать миграции только для него). Это даёт вам возможность проверить код перед тем, как их применить — когда вы станете хорошо разбираться в Django, то сможете даже менять их!

  Команда migrate применяет созданные миграции к базе (Django отслеживает, какие миграции были созданы для данной базы).

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

  Запуск сайта

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

  Примечание: Отладочный веб-сервер не настолько функционален и производителен, для постоянного размещения , но это самый простой способ запустить свой сайт на Django и проверить его на наличие ошибок. По умолчанию, он разместит сайт на вашем компьютере (http://127.0.0.1:8000/), но вы так же можете указать различные компьютеры в вашей сети для этой цели. Для получения большего количества информации загляните в раздел django-admin и manage.py: отладочный сервер документации Django.

  Запустите веб-сервер, используя команду runserver (в той же папке, что и manage.py):

  python3 manage.py runserver
  
   Performing system checks...
  
   System check identified no issues (0 silenced).
   September 22, 2016 - 16:11:26
   Django version 1.10, using settings 'locallibrary.settings'
   Starting development server at http://127.0.0.1:8000/
   Quit the server with CTRL-BREAK.
  

  Когда сервер запустится, вы сможете посетить сайт по адресу http://127.0.0.1:8000/ в вашем веб-браузере. Вы должны увидеть страницу с ошибкой, навроде этой:

  Не волнуйтесь! Эта страница должна появиться и сообщить нам, что мы ещё не настроили ни одной страницы в модуле catalogs.urls (на который мы были перенаправлены запросили корневой URL сайта). 

  Примечание: Показанная выше страница открывает нам одно из замечательных свойств Django — автоматические отчёты об ошибках. На экране с ошибкой отображается множество полезной информации, когда страница не найдена, или ошибка была вызвана кодом. В данном случае, мы видим, что запрошенный URL  не соответствует ни одному шаблону (из указанных). Подобные отчёты будут выключены при DEBUG=False (когда мы разместим приложение в Сеть), в этом случае будет показана менее информативная, но более дружелюбная к пользователю страница(которую вам надо будет создать — прим. переводчика).

  На данном этапе, мы поняли, что Django работает должным образом! 

  Примечание: вам следует перезапускать миграцию и заново тестировать сайт, после того как вы делаете важные изменения. Поверьте, это не займёт много времени!

  Папка catalog/ содержит файлы контроллеров(views), моделей(models), и других частей приложения. Просмотрите эти файлы. 

  Как было написано выше, URL соотноситель для админ-панели был подключён в файле urls.py. Войдите в административную часть и посмотрите, что произойдёт (вы можете найти URL из соотношения выше).

  Теперь вы создали полноценный скелет веб-приложения, который теперь вы можете расширить url соотносителями, контроллерами(views) и моделями(models).

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

  Как сделать нумерованный список в css. Создание списков

  В следующем примере рассмотрены различные стили оформления маркированных списков:

  В HTML есть возможность создать список с графическими маркерами. Одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое – когда разработчик сам подбирает маркер в соответствии с дизайном страницы. Для того, чтобы сделать элементы списка красивыми, часто используют маленькие картинки.
  Чтобы заменить обычный маркер на графический, заменим свойство list-style-type
  на свойство list-style-image
  и укажем URL–адрес картинки:

  Пример: Графические маркеры

  • Попробуй сам »

  Знаки зодиака
  

  • Телец
  • Близнeцы

  Знаки зодиака

  • Овен
  • Телец
  • Близнeцы

  Списки определений (описаний)

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

  
  (от англ. Definition List – список определений). Он включает в себя теги

  
  (от англ. Definition Term – определяемое слово, термин) и

  
  (от англ. Definition Description – описание определяемого термина).
  Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии, словари, справочники и т.д.

  Общая структура списка описаний имеет следующий вид:

  Первый термин

  Описание первого термина

  Второй термин

  Описание второго термина

  В следующем примере показано одно из возможных использований списка определений:

  Пример: Список определений

  • Попробуй сам »

  Всемирная паутина
  — от англ. World Wide Web (WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету.
  Интернет
  — совокупность сетей, применяющих единый протокол обмена для передачи информации.
  Сайт
  — набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.

  Всемирная паутина

  — от англ. World Wide Web (WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету.

  Интернет

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

  Сайт

  — набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.

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

  Доброго времени суток!

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

  Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:

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

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

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

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

  А вот так выглядит в браузере:

  Рис. 1.1.
  Стандартный вид маркированного ненумерованного списка HTML в браузере

  1.1
  Стандартные маркеры для маркированного списка

  На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

  1.2
  Маркер списка в виде пустого круга

  Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type
  и задали его нашему маркированному списку:

  html > head > title > Пример маркированного списка с маркером в виде пустого круга/ title > / head > body > p > Звезды:/ p > ul type = «circle» > li > Сириус/ li > li > Арктур/ li > li > Поллукс/ li > li > Бетельгейзе/ li > li > Солнце/ li > / ul > / body > / html >

  Сразу смотрим как этот код будет выглядеть в браузере:

  Рис. 1.2.
  Вид маркера для списка в виде окружности в браузере

  1.3
  Маркер списка в виде квадрата

  Посмотрим также и последний пример с квадратным маркером для HTML списка:

  Обратите внимание на маркер, он стал квадратным:

  Рис. 1.3.
  Вид маркера для списка в виде квадрата в браузере

  Важное замечание:
  сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида.

  Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 («»), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — .

  Ошибка будет следующая:

  Рис. 1.4.
  Ошибка на валидаторе при использовании атрибута «type» у списка

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

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

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

  Пример нумерованного списка:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  html > head > title > Пример стандартного нумерованного списка/ title > / head > body > p > От одного до пяти:/ p > ol > li > Первый/ li > li > Второй/ li > li > Третий/ li > li > Четвертый/ li > li > Пятый/ li > / ol > / body > / html >

  Таким образом выглядит нумерованный список со стандартными настройками в браузере:

  Рис. 2.1.
  Нумерованный список в браузере со стандартными настройками

  Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

  2.1
  Стандартные маркеры для нумерованного списка

  Здесь у нас есть выбор не из трех видов маркеров, а из пяти:

  Название маркера	Значение атрибута «type»	Пример списка
  Маркеры в виде арабских чисел	1	Бадминтон Бейсбол
  Маркеры в виде строчных латинских букв	a	Джомолунгма Чогори Канченджанга
  Маркеры в виде заглавных латинских букв	A	Summit Plummet Tantrum Alley Insano
  Маркеры в виде римских цифр в нижнем регистре	i	Филиппинское море Аравийское море Коралловое море
  Маркеры в виде римских цифр в верхнем регистре	I	Красный Зеленый Синий

  2.2
  Своя нумерация в списке HTML

  Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут «start»
  . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  html > head > title > Произвольная нумерация для нумерованного списка/ title > / head > body > p > Начинаем нумерацию с двенадцати:/ p > ol type = «a» start = «12» > li > Двенадцать/ li > li > Тринадцать/ li > li > Четырнадцать/ li > li > Пятнадцать/ li > li > Шестнадцать/ li > / ol > / body > / html >

  Вот как это будет отображаться на реальном сайте:

  Рис. 2.2.
  Нумерация с произвольного числа в нумерованном списке

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

  Ну а сейчас перейдем к вложенным спискам HTML.

  3. Как сделать многоуровневый (вложенный) список в HTML

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

  На примере моделей автомобилей мы построим многоуровневый список в HTML:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  html > head > title > Вложенный маркированный список HTML/ title > / head > body > ul > li > Citroen ul > li > Berlingo/ li > li > C1/ li > li > C2/ li > li > C3 Picasso/ li > li > C4 Grand Picasso/ li > / ul > / li > li > KIA/ li > li > Toyota/ li > li > Audi/ li > li > Lexus/ li > / ul > / body > / html >

  Обратите внимание, как выглядит многоуровневый список в браузере:

  Рис. 3.1.
  Пример многоуровневого списка в HTML

  Мы делали многоуровневый список с помощью маркированного (тег

  ). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать ).

  Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  html > head > title > Нумерованные, маркированные и многоуровневые списки в HTML/ title > / head > body > ul > li > Первая группа тюльпанов ol > li > Первый класс ul > li > Простые ранние тюльпаны/ li > / ul > / li > li > Второй класс ul > li > Махровые тюльпаны/ li > / ul > / li > / ol > / li > / ul > / body > / html >

  В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список.

  Смотрим его вид в браузере:

  Рис. 3.2.
  Пример многоуровневого нумерованного списка в маркированный список в браузере

  4. Полезные материалы по спискам HTML

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

  4.1
  Как сделать список HTML в строку

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

  4.2
  Как сделать список HTML без значка

  За это отвечает свойство list-style-type
  в CSS (подробнее ):

  4.3
  Как сделать список в HTML по центру

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

  4.4
  Как сделать список в HTML с картинками

  Достаточно лишь одного свойства CSS list-style-image
  . Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:

  4.5
  Маркированный список HTML свой маркер

  В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome
  ). Тогда можно сделать любую иконку вместо стандартного маркера:

  4.6
  Как сделать список в HTML в несколько столбцов

  Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count
  (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:

  5. Практика работы со списками

  На видео ниже вы можете увидеть всю работу со списками HTML на практике:

  Чтобы закрепить полученную информацию, я рекомендую все действия проделать вручную. Попробовать разные маркеры для списков, создать нумерованные списки, а после перейти к многоуровневым (вложенным) спискам и поэкспериментировать с ними.

  На этом со списками заканчиваем и переходите к следующему уроку по изображениям.

  Больше практикуйтесь!

  Урок 3. Как сделать список в HTML
  4.91
  /5
  (98.26%)
  23
  голос(ов)

  Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега

  9 шагов для создания веб-страницы с использованием базового HTML для начинающих [Иллюстрированное руководство] · Dev Practical

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

  Требования

  Вам понадобятся всего две вещи: текстовый редактор и браузер.Если вы знаете, как использовать эти два, пропустите раздел требований и перейдите к процессу из 9 шагов.

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

  Для написания HTML-кода необходим текстовый редактор. На каждом компьютере есть текстовый редактор, поэтому пока не торопитесь ничего устанавливать. Вы можете использовать Блокнот в Windows, Gedit в Ubuntu и TextEdit в MacOS X .

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

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

  Браузер

  Вы будете использовать Firefox, Chrome, Chromium, Safari или любой другой веб-браузер , уже установленный на вашем компьютере.

  Содержание веб-страницы

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

  Если вы просто хотите попрактиковаться, вы можете скопировать содержание, которое я уже подготовил здесь.

  Если вы хотите создать уникальную веб-страницу, вам необходимо:

  • Запись содержимого

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

    Если вы не можете найти тему для веб-страницы, выберите тему из 100 идей для своей первой веб-страницы.

  • Загрузить изображения или скопировать URL изображения

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

    Когда у вас есть текст и изображение, пора переходить к следующему шагу.

  • Дизайн сайта

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

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

  Для этого урока мы создадим веб-страницу о Crickets For Food .
  
  Эта веб-страница не изящная, но хороший первый проект. Я сделал это одной колонкой, чтобы все было удобно для новичков.

  9 шагов для создания вашей первой веб-страницы в формате HTML

  Шаг 1. Откройте редактор текста / HTML

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

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

  Шаг 2. Напишите HTML-код

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

  Скопируйте и вставьте приведенный ниже код в свой файл.Теперь ваш файл должен выглядеть так:

  
  
    
      
    
    
      Ваш контент здесь. 
  
   

  Сохраните html-страницу, нажав CTRL + S или щелкнув опцию файла, затем опцию сохранения. Убедитесь, что вы назвали файл в следующем формате: «имя», затем «.html», примеров index.html, cook.html.

  Вы можете использовать эти два правила при именовании файла веб-страницы:

  • использовать.html расширение имени файла: Расширение имени файла html сообщает компьютеру, что этот файл является веб-страницей и должен просматриваться в веб-браузере.
  • Используйте подчеркивание или дефис вместо пробела: Если вы решили дать файлу более одного слова, используйте дефис или подчеркивание между словами. Если вы добавите пробелы в имя файла, веб-браузер может не найти веб-страницу.

  Выберите место для сохранения файла. Выбрав место для сохранения файла, нажмите «Сохранить».

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

  Шаг 3. Добавьте текстовое содержимое

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

  Обновите веб-страницу в браузере. Он будет выглядеть как кусок текста без абзацев или заголовков, показанных ниже.

  Шаг 4: Добавьте теги HTML.

  Заголовки

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

  Поместите этот текст между тегами h2, как показано ниже:

    
  
      Поедание насекомых: полное руководство по поеданию сверчков
    
    

  Сохраните свою работу и проверьте результат в браузере.

  Пункты

  Для абзацев текста поместите каждый абзац текста между тегами

  html.
  Пример:

    
  
    Когда вы слышите о поедании насекомых, большинство людей возмущается. Однако во многих частях света насекомые считаются деликатесом. Большинство съедаемых насекомых выращиваются на фермах, но в некоторых местах они не уклоняются от поедания насекомых, собранных в дикой природе.
  
  
    Поедание насекомых считается:
  
    здоровые, так как у насекомых меньше жира.Экологичность: для выращивания насекомых требуется меньше корма / растений, чем для коров.
    люди, которые не едят молоко и мясные продукты, могут попробовать насекомых в качестве заменителя белка.
    

  Просмотрите результат в браузере.

  Шаг 6: Добавьте список

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

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

  Обновите и просмотрите результат в браузере.

  Шаг 7: Добавьте изображения

  Запомните URL или изображения, которые вы сохранили. Пришло время дать им волю.
  Мы собираемся использовать HTML-тег img , чтобы добавить изображения на веб-страницу.

  Если вы просто скопировали URL-адрес изображений, вы добавите URL-адрес в кавычки атрибута src.Не забудьте добавить атрибут alt, который показывает, когда изображение не может быть отображено. Пример:

  Шаг 8. Вставьте видео с YouTube

  Найдите подходящее видео на YouTube. Как только вы его нашли, нажмите кнопку / ссылку «Поделиться». Вы получите всплывающее окно. Нажмите на вариант встраивания.

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

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

    
   Просмотрите HTML-страницу в браузере.
   Если вы выполнили все 8 шагов, у вас должна быть рабочая HTML-страница, которой вы должны гордиться.
   Шаг 9: Добавьте ссылку на свой источник информации 
   Если вы скопировали какой-либо контент с другой веб-страницы, считается целесообразным добавить URL-адрес, указывающий на исходный источник информации.
   Вы можете добавить ссылку, используя   слов, поясняющих, что вы найдете, если щелкнете ссылку   HTML-тега.
     HTML и CSS Cricket Project   
   Просмотрите HTML-страницу в браузере .Теперь у вас должна быть ссылка внизу со словами: «HTML и CSS Cricket Project».
   Дополнительные советы 
   Проверьте свои ссылки, чтобы убедиться, что они работают. Вы можете проверить свою ссылку, щелкнув по ним, чтобы увидеть, перейдут ли они на нужную страницу.
    Необязательно:  Опубликуйте веб-страницу в Интернете. Когда вы будете готовы, вы можете поделиться своими работами в Интернете. Вы можете использовать github или codepen для публикации своей веб-страницы в Интернете.
    Необязательно:  Добавьте CSS, чтобы веб-страница выглядела великолепно.После того, как вы закончите работу над HTML, вы можете приступить к стилизации веб-страницы с помощью CSS. Вот несколько вещей, которые вы можете сделать, чтобы сделать веб-страницу отличной:
   Отрегулируйте размер шрифта и тип шрифта текста.
   Отрегулируйте размер изображений.
   CSS: первые шаги — Изучите веб-разработку 
   CSS (каскадные таблицы стилей) используются для стилизации и компоновки веб-страниц — например, для изменения шрифта, цвета, размера и интервала вашего контента, разделения его на несколько столбцов или добавления анимации и других декоративных функций.Этот модуль обеспечивает мягкое начало вашего пути к мастерству CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стиля в HTML.
   Хотите стать интерфейсным веб-сайтом
   разработчик? 
   Мы составили курс, который включает в себя всю важную информацию, необходимую для
   работать для достижения своей цели.
    Начать 
   Перед запуском этого модуля у вас должно быть:
   Базовые знания об использовании компьютеров и пассивном использовании Интернета (т.е. глядя на него, потребляя контент.)
   Базовая рабочая среда, настроенная, как описано в разделе «Установка основного программного обеспечения», и понимание того, как создавать файлы и управлять ими, как подробно описано в разделе «Работа с файлами».
   Базовое знакомство с HTML, как описано во введении в модуль HTML.
    Примечание : Если вы работаете на компьютере / планшете / другом устройстве, на котором у вас нет возможности создавать свои собственные файлы, вы можете опробовать (большую часть) примеры кода в онлайн-программе кодирования, такой как JSBin. или глюк.
   Этот модуль содержит следующие статьи, которые познакомят вас со всей базовой теорией CSS и предоставят вам возможность проверить некоторые навыки.
   Что такое CSS?
    CSS  (каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как это работает под капотом? В этой статье объясняется, что такое CSS, на простом примере синтаксиса, а также рассматриваются некоторые ключевые термины, связанные с языком.
   Начало работы с CSS
   В этой статье мы возьмем простой HTML-документ и применим к нему CSS, попутно изучая некоторые практические вещи о языке.
   Как устроен CSS
   Теперь, когда у вас есть представление о том, что такое CSS и основы его использования, пора немного глубже изучить структуру самого языка. Мы уже познакомились со многими концепциями, обсуждаемыми здесь; вы можете вернуться к этому, чтобы подвести итоги, если вы обнаружите, что какие-либо более поздние концепции сбивают с толку.
   Как работает CSS
   Мы узнали основы CSS, для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер использует CSS и HTML и превращает их в веб-страницу.
   Используя свои новые знания
   Благодаря тому, что вы узнали в последних нескольких уроках, вы обнаружите, что можете форматировать простые текстовые документы с помощью CSS, чтобы добавить к ним свой собственный стиль. Эта статья дает вам шанс сделать это.
   Как создать регистрационную форму в HTML с нуля 
   Предоставление вашим клиентам простых форм подписки и регистрации на вашем веб-сайте имеет важное значение для привлечения потенциальных клиентов, расширения списка адресов электронной почты и увеличения общих продаж.
   Есть только одна проблема: HTML.
   HTML5 — это стандартный код, используемый для работы большинства веб-страниц. Это язык Интернета. Но, как и для любого другого языка программирования — от Javascript и jquery до PHP и CSS3 — здесь требуется крутая кривая обучения, особенно если вы никогда не касались кода.
   Не бойся. Мы здесь, чтобы помочь. Возможно, мы сможем превратить вас в Билла Гейтса в одночасье, но с помощью некоторых полезных примеров к концу этого руководства вы будете готовы в кратчайшие сроки создать базовую регистрационную форму с использованием HTML.
   💡  Прежде чем мы начнем:  Хотите избежать хлопот, связанных с использованием HTML? С помощью такого конструктора форм, как Paperform, вы можете сэкономить время и создать мощную профессиональную регистрационную форму за считанные минуты.
   Мы знаем, что вы заняты. Есть триллион статей, которые нужно прочитать. Фильмы Netflix для просмотра. Сериалы до запоя. Итак, вот версия TL; DR прямо перед вами, чтобы помочь вашему скиммингу.
   1. Выберите HTML-редактор 
   2. Создайте свой HTML-файл 
   3. Добавьте текстовые поля и создайте форму 
   4.Добавьте текст-заполнитель 
   5. Настройте его с помощью CSS
   После этого остается еще один шаг — отбросить все это в сторону и использовать конструктор онлайн-форм, такой как Paperform, чтобы облегчить вашу жизнь. Но об этом скоро.
   Шаг 1. Выберите HTML-редактор 
   Так же, как вам нужен текстовый процессор для создания текстового документа, вам нужен текстовый редактор для создания HTML-кода. Эти инструменты преобразуют странный и замечательный код, который вы вводите, в регистрационную форму.
   На рынке существуют десятки (если не сотни) редакторов HTML, большинство из которых, как правило, предлагают аналогичные функции.Не будем утомлять вас подробностями, но есть несколько ключевых вещей, которые сделают вашу жизнь проще:
    Обнаружение ошибок:  Автоматическое выделение синтаксических ошибок для упрощения исправления.
    Автозаполнение:  Предлагает релевантные элементы HTML на основе предыдущих изменений (экономит время при использовании длинного кода).
    Подсветка синтаксиса:  Применяет цвета к различным тегам HTML на основе определенных категорий, чтобы упростить чтение и сортировку кода.
    Найти и заменить:  Найти и перезаписать все экземпляры определенного кода, а не редактировать каждый по отдельности.
   Если вы  действительно  начинаете программировать, есть и другие функции, о которых стоит беспокоиться, но это должно с лихвой покрыть вас этой простой регистрационной формой.
   Какое приложение выбрать — дело личных предпочтений. Хотите что-то, что вы можете использовать в своем браузере? Попробуйте Codepen. Голые кости? Блокнот ++. Минималистичный интерфейс и интуитивно понятное поле ввода? Превосходный текст полностью.
   Наш соучредитель и постоянный программист Дин придерживается VS Code.
    «С точки зрения ботаников VS Code отлично вписывается в технический стек Paperform и имеет отличные плагины для удаленной разработки, которые мне нравятся. Он также отлично подходит для HTML-материалов и супер настраиваемый, если вы хотите, чтобы ваши инструменты выглядели красиво, сохраняя при этом все функциональные возможности. вам нужно. 
   Нет необходимости зацикливаться на этом слишком много. К сожалению, нет HTML-редактора, который сгенерирует для вас регистрационную форму, какой бы хорошей она ни была.Вся эта вечеринка на тебе.
   Шаг 2. Создайте свой HTML-файл 
   Следующий шаг — сообщить текстовому редактору, что вы собираетесь создать HTML-файл. Для этого создайте новый файл и сохраните его с расширением «.html».
   Например, myform.html. После того как вы указали редактору, что создаете HTML-код, он должен автоматически сгенерировать для вас следующий код:
    
  
  
        
  
  
      
  
    
    💡 Совет:  Некоторые редакторы не поддерживают автозаполнение.Это нормально. Просто скопируйте и вставьте этот код выше, и он будет иметь тот же эффект.
   Шаг 3. Добавьте текстовые поля и создайте форму 
   Хорошо. Пришло время добавить соответствующий код и превратить этот простой HTML-код в форму регистрации.
   Теперь, если вы здесь ради кода, который мы понимаем. Вы найдете все, что вам нужно, в параграфе или двух ниже. Не стесняйтесь пропустить вперед. 👇
    Но , если вы хотите узнать немного о том, что вы вводите на самом деле,  означает,  позволит нам быстро пройти курс HTML-учебника.
   HTML-форма состоит из «элементов формы». Это такие вещи, как текстовые поля, переключатели, флажки и раскрывающиеся меню, которые позволяют людям взаимодействовать с вашей живой формой.
   Каждый элемент имеет свой собственный тег. Например, тег HTML
   определяет ваш код как форму, а можно использовать для сбора данных, вводимых пользователем. </p>
  <p> Эти элементы похожи на обувь: они всегда идут парами. Все теги, которые вы хотите включить в форму, должны быть вставлены между тегами open </p>
  <form> и closed </form>
  <p>.</p>
  <p> Хорошо, это Sparknotes. Теперь код, который вам действительно нужно ввести. Здесь: </p><pre> <code> <! DOCTYPE html>
  <html> <head> <h2><span class="ez-toc-section" id="%D0%A4%D0%BE%D1%80%D0%BC%D0%B0_%D1%80%D0%B5%D0%B3%D0%B8%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D0%B8_%D0%BA%D0%BE%D0%BC%D0%BF%D0%B0%D0%BD%D0%B8%D0%B8"></span> Форма регистрации компании <span class="ez-toc-section-end"></span></h2>
  </head>
  <body>
  <форма>
  <table> <tr> <td> Адрес электронной почты: </td> <td> <input type = ”text” email = ””> </td> </tr> <tr> <td> Пароль: </ td > <td> <input type = ”Password” name = ””> </td> </tr> </table>
  </form>
  </body>
  </html> </code> </pre><p> Этот (базовый) HTML-код выведет что-то похожее на это: </p>
  <p> Не совсем то, что выглядит лучше всего в мире, не так ли? Но вы спросили, как создать регистрационную форму HTML.Не стреляйте в посыльного. </p>
  <p> Тег </p>
  <tr> указывает ему расположить ответы в ряд, а </p>
  <td> (обозначает данные таблицы) указывает на то, что вы хотите фиксировать любой тип респондента. В этом случае для простоты мы добавили два поля: </p>
  <ol>
  <li> Введите адрес электронной почты </li>
  <li> Введите пароли </li>
  </ol>
  <p> Вам ничего не мешает добавить дополнительные поля. Типы ввода варьируются от чисел и дат до цветов или даже изображений. Просто скопируйте приведенный ниже код и вставьте нужный тип ввода.У W3Schools есть отличный список, который поможет вам. </p><pre> <code> <tr> <td> Адрес электронной почты: </td> <td> <input type = ”text” email = ””> </td> </code> </pre><p>
       <strong> 💡 Совет: </strong> Выбор правильного типа входа имеет решающее значение. Он сообщает форме, как текст должен отображаться на экране. Например, последнее, что мы хотим, — это чтобы чей-то пароль был виден при вводе, поэтому мы используем тип ввода «пароль», чтобы скрыть его.<br />
        </p>
  <h4><span class="ez-toc-section" id="%D0%A8%D0%B0%D0%B3_4_%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D1%8C%D1%82%D0%B5_%D0%B7%D0%B0%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D0%B8"></span> Шаг 4. Добавьте заполнители <span class="ez-toc-section-end"></span></h4>
  <p> Заполнитель — это текст внутри полей формы, который побуждает респондентов отвечать определенным образом.В основном это используется как толчок в правильном направлении, но это также полезная стратегия, позволяющая сделать формы более привлекательными. </p>
  <p> Например, предположим, вы добавляете в форму простое поле имени. Вы можете набрать «вставить имя» и покончить с этим, <em> или </em> вы можете приукрасить вещи, написав «Брюс Уэйн» для немного чутья. </p>
  <p> Какую бы стратегию вы ни выбрали, добавить заполнители в вашу HTML-форму довольно просто. После типа ввода вставьте «placeholder =» с текстом, который вы хотите отобразить.</p><pre> <code> <! DOCTYPE html>
  <html>
  <head>
  <h2><span class="ez-toc-section" id="%D0%A4%D0%BE%D1%80%D0%BC%D0%B0_%D1%80%D0%B5%D0%B3%D0%B8%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D0%B8_%D0%BA%D0%BE%D0%BC%D0%BF%D0%B0%D0%BD%D0%B8%D0%B8-2"></span> Форма регистрации компании <span class="ez-toc-section-end"></span></h2>
  </head>
  <body>
  <форма>
  <таблица>
  <tr>
  <td>
  Адрес электронной почты:
  </td>
  
  <td>
  <input type = ”mail” placeholder = ”Email” name = ””>
  </td>
  </tr>
  <tr>
  <td>
  Пароль:
  </td>
  
  <td>
  <input type = ”Password” placeholder = ”Password” name = ””>
  </td>
  </tr>
  </table>
  </form>
  </body>
  </html> </code> </pre><p> При вводе этого кода будет получена следующая форма: </p>
  <p> Довольно скудные.Но это работает. Вы можете создать дополнительные параметры для клиентов, чтобы выбрать свой возраст или пол, используя код, аналогичный приведенному выше. </p>
  <p> Чтобы создать поле пола, вставьте в код следующие значения (прямо над последним тегом </table>
  <p>). Мы также добавим номер телефона и опцию «Тема» в раскрывающемся списке. </p><pre> <code> <input type = "checkbox" name = "Male" value = "Male"> Male <br> <input type = "checkbox" name = "Female" value = "Female"> Female <br> </code> </pre><p> Это превратит поле данных в флажки — один для мужчин и один для женщин.Вот как будет выглядеть последняя итерация вашей HTML-формы регистрации: </p>
  <p> Не совсем то грандиозное открытие, которого вы ожидали, верно? Можете ли вы представить, как кто-то ищет вашу компанию в Google и встречает эту страницу? Или поделиться этим в социальных сетях? </p>
  <p> Можно с уверенностью сказать, что такая HTML-форма входа в систему никого не побудит подписаться на ваш бизнес. В их головах возникнет один непреодолимый вопрос, вероятно, тот же самый, что и у вас. . . </p>
  <h4><span class="ez-toc-section" id="%D0%9F%D0%BE%D1%87%D0%B5%D0%BC%D1%83_%D0%BC%D0%BE%D1%8F_%D1%80%D0%B5%D0%B3%D0%B8%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F_HTML-%D1%84%D0%BE%D1%80%D0%BC%D0%B0_%D1%82%D0%B0%D0%BA%D0%B0%D1%8F_%D1%83%D1%80%D0%BE%D0%B4%D0%BB%D0%B8%D0%B2%D0%B0%D1%8F"></span> Почему моя регистрационная HTML-форма такая уродливая? <span class="ez-toc-section-end"></span></h4>
  <p> Как вы не видите, ваша HTML-форма не особенно привлекательна.Это что-то вроде гадкого утенка. И это нормально — мы не все можем быть Марго Робби — но это не совсем соблазняет людей заполнять его. </p>
  <p> И в этом проблема. HTML-формы обычно выглядят так: </p>
  <ul>
  <li> Скучно </li>
  <li> Скучно </li>
  <li> Трудно настроить </li>
  <li> Неуклюже управлять </li>
  </ul>
  <p> Это связано с простой природой HTML. Это фреймворк, который помогает выполнять необходимые действия с формами, однако он определенно не получит никаких наград за дизайн. </p>
  <blockquote><p> <em> Простым решением этой проблемы является использование специального онлайн-конструктора форм, такого как Paperform, чтобы избежать тяжелой работы с HTML или CSS.Вы можете создать красивые формы регистрации, контактные формы и полные целевые страницы — среди сотен других творений — за считанные минуты без единой строчки кода. </em> </p></blockquote>
  <p> Но, возможно, вы действительно настроены на весь HTML (или, может быть, вы просто любитель наказания). В любом случае, если вы действительно привержены своей регистрационной форме HTML, вы можете улучшить ее внешний вид с помощью CSS. </p>
  <h4><span class="ez-toc-section" id="%D0%A8%D0%B0%D0%B3_5_%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D1%83%D0%B9%D1%82%D0%B5_CSS_%D0%B4%D0%BB%D1%8F_%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B8_HTML-%D1%84%D0%BE%D1%80%D0%BC%D1%8B"></span> Шаг 5. Используйте CSS для стилизации HTML-формы <span class="ez-toc-section-end"></span></h4>
  <p> CSS — это язык программирования, используемый для стилизации HTML-документа.Он настраивает способ отображения элементов HTML на экране и позволяет настраивать все, от цвета шрифта и прозрачности до добавления фонового изображения или ссылки на другую страницу с помощью старого доброго тега <href>. </p>
  <p> Итак, вы были бы здесь всю неделю, если бы мы перечислили каждое свойство CSS. Мы могли бы сделать это и попытаться повысить SEO этой страницы, но это никому не интересно. Если вам нужен исчерпывающий список, мы рекомендуем список ссылок W3School по CSS. </p>
  <p> В рамках нашего руководства мы быстро переделаем нашу HTML-форму регистрации с помощью CSS.Мы настроим цвет текста, стиль шрифта и настроим поля, чтобы (немного) улучшить внешний вид. </p>
  <p>
       <strong> 💡 Совет: </strong> Наиболее распространенный способ добавления CSS на страницу HTML — это использование внешнего файла таблицы стилей, связанного с элементом. Эта таблица стилей создается в том же текстовом редакторе и сохраняется с расширением «.css».<br />
        </p>
  <p> Вот код, который мы будем использовать: </p><pre> <code> table {
  семейство шрифтов: Arial, Helvetica, sans-serif;
  размер шрифта: 100%;
    font-weight: жирный;
    цвет фона: белый
  }
   h2 {
     цвет: # ea503f;
     семейство шрифтов: Arial;
     выравнивание текста: центр
   } </code> </pre><p> И с этой магией стилизации ваша форма в конечном итоге будет выглядеть так, как показано ниже.Это немного похоже на нанесение губной помады на свинью, но это в некоторой степени лучше. </p>
  <h3> </h3>
  <p><strong> Почему HTML-форма — не лучшее решение </strong> </h3>
  <p> Хотя изучение того, как кодировать и создавать базовые регистрационные формы — это забавный навык, вам следует серьезно пересмотреть их использование для любых важных целей. Не пытайтесь его запустить, это просто не стоит времени, усилий и разочарований. </p>
  <p> Нужна ли вам контактная форма для ваших клиентов, форма входа для вашего бизнеса или форма регистрации студентов на новый учебный год, любое решение, склеенное вместе с HTML и CSS, в конечном итоге будет выглядеть неотшлифованным и непрофессиональным, особенно если у вас нет навыков программирования.</p>
  <blockquote><p> К счастью, есть еще один способ создания регистрационных форм, который намного проще, быстрее и интуитивно понятнее: конструктор онлайн-форм, такой как Paperform. С нашей простой платформой вы можете начать работу с красивой фирменной формой за считанные минуты. </p></blockquote>
  <p> С Paperform вы не просто получаете базовую HTML-форму. Вы получаете динамичный опыт, который дает вам возможность собирать любые типы данных, которые вам нужны — от простых контактных данных до сложных расчетов и даже приема платежей. Опыт проектирования не требуется.</p>
  <p> Плюс, настройка не требует усилий. Настраивайте цвета и шрифты, а также настраивайте пользовательский интерфейс формы несколькими щелчками мыши. Затем, когда вы будете довольны своим новым творением, вы можете встроить форму на свой веб-сайт, бесплатно разместить ее в Интернете или встроить на свой сайт WordPress с помощью нашего нового плагина WordPress. </p>
  <p> <strong> 📚 Узнайте, как создать форму WordPress с помощью Paperform. </strong> </p>
  <p> Чтобы показать, насколько это просто, мы создали шикарную регистрационную форму: </p>
  <p> Не хотите создать свое собственное творение? Для этого и предназначена наша библиотека из более чем 500 шаблонов форм.Выберите один из наших шаблонов регистрации, добавьте его в свою учетную запись одним щелчком мыши и приступайте к работе быстрее, чем вы сможете выпить утренний эспрессо. </p>
  <p> Регистрационная форма — это только начало того, что вы можете делать с Paperform. Попробуйте сами, воспользовавшись нашей 14-дневной бесплатной пробной версией — кредитная карта не требуется. </p>
  <hr/>
  <p>
   <strong> 💡 Часто задаваемые вопросы о регистрационной форме в формате HTML </strong>
       </p>
  <p> <strong> Могу ли я создать регистрационную форму HTML без CSS? </strong> <br /> Да, но было бы некрасиво. Фактически, это могло бы выглядеть как что-то из первых дней Microsoft.Не очень.
        </p>
  <p> <strong> Как создать регистрационную форму HTML с загрузкой изображений? </strong> <br /> Чтобы добавить поле загрузки изображения, используйте тип ввода «файл».
        </p>
  <p> <strong> Могу ли я создать HTML-форму без использования таблицы? </strong> <br /> Хотя команда table действительно помогает с выравниванием, легко создать форму без нее. Просто введите данные напрямую без команд «tr» или «td».
        </p>
  <p> <strong> Можно ли использовать регистрационную форму HTML для покупок в Интернете? </strong><br />
       <br /> Да.Чтобы создать форму покупок в Интернете, включите поля для контактной информации, адреса доставки, идентификатора продукта и точки доставки. При сборе платежей возникают сложности, поэтому мы рекомендуем простые формы оплаты Paperform.
      </p>
  <p> <strong> Как создать страницу входа и регистрации? </strong></p>
  <p> Мы рассмотрели, как их создать, но ответ заключается в большом количестве кода и настройке. Намного проще использовать специальный конструктор онлайн-форм, такой как Paperform. </p>
  <h2><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%B0_%D1%81_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%D0%BC_HTML_-_%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B9%D1%82%D0%B5_%D1%81%D0%B2%D0%BE%D0%B8_%D0%BF%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_HTML_%D0%B8_CSS"></span> Создание контента с использованием HTML — Создайте свои первые веб-страницы с помощью HTML и CSS <span class="ez-toc-section-end"></span></h2>
  <p>https: // vimeo.com / 270701148 </p>
  <p data-claire-element-id="30666752"> В этой главе мы более подробно рассмотрим HTML и узнаем, как рассказать историю с помощью вашего кода. </p>
  <h5 data-claire-element-id="30666944"><span class="ez-toc-section" id="%D0%A0%D0%B0%D1%81%D1%81%D0%BA%D0%B0%D0%B6%D0%B8%D1%82%D0%B5_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D1%8E_%D1%81%D0%B2%D0%BE%D0%B8%D0%BC_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%BE%D0%BC"></span> Расскажите историю своим контентом <span class="ez-toc-section-end"></span></h5>
  <p data-claire-element-id="10080802"> Когда вы пишете статью, пресс-релиз или другой письменный документ для работы или учебы, вы должны структурировать свой контент таким образом, чтобы это имело смысл. То же самое верно, когда вы пишете HTML в Интернете. </p>
  <p data-claire-element-id="10044203"> Сравните эти две статьи на сайте кемпинга. Что из этого вам больше нравится? </p>
  <p> Неструктурированный и структурированный текст </p>
  <p data-claire-element-id="10058381"> Контент справа рассказывает лучше! Он показывает <strong> иерархию информации </strong>, и контент более понятен благодаря этой структуре <strong> </strong>.В сети это достигается за счет написания хорошего HTML. </p>
  <p data-claire-element-id="10058382"> Но вы не единственный, кто «видит» ваш контент. Браузеры и поисковые системы также видят вашу веб-страницу, но у них нет глаз. Однако они понимают HTML. </p>
  <p data-claire-element-id="10058391"> <strong> Поисковые системы </strong>, такие как Google, читают код вашего веб-сайта, чтобы понять, о чем эта страница. Таким образом, когда пользователи что-то ищут, ваш веб-сайт будет отображаться в списке результатов. Ваш браузер <strong> </strong> также считывает ваш код, чтобы отображать элементы определенным образом.Если вы не напишете чистый HTML, ваш сайт не будет читаться, потому что браузеры не будут знать, что с ним делать. Конец истории. </p>
  <h5 data-claire-element-id="10104104"><span class="ez-toc-section" id="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%81_HTML"></span> Базовый синтаксис HTML <span class="ez-toc-section-end"></span></h5>
  <p data-claire-element-id="10044212"> HTML использует теги <strong> </strong> для описания каждого фрагмента контента на веб-странице. Правильный выбор тегов зависит от вас, как разработчика! </p>
  <p data-claire-element-id="10044213"> Просмотрите эту строку HTML ниже из примера кемпинга (и не позволяйте странным символам вроде <> вывести вас из себя): </p><pre data-claire-element-id="10044214"> <code data-claire-semantic="html"> <h2><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B_%D0%BA%D0%B5%D0%BC%D0%BF%D0%B8%D0%BD%D0%B3%D0%B0"></span> Основы кемпинга <span class="ez-toc-section-end"></span></h2> </code> </pre><p data-claire-element-id="10044215"> Давайте разберем этот дружелюбный фрагмент кода.</p>
  <p data-claire-element-id="10044216"> <strong> </p>
  <h2> </h2>
  <p></strong> </p>
  <p data-claire-element-id="10080904"> В HTML этот первый набор символов называется открывающим тегом <strong> </strong>. То, что находится между знаками <и>, указывает, какой тип элемента <strong> </strong> вы создаете. h2 — это, например, заголовок, и это самый мощный (самый большой) заголовок из возможных. </p>
  <p data-claire-element-id="10044218"> «Элемент» — это что-либо на веб-странице. Это может быть абзац, изображение, заголовок и т. Д. </p>
  <p data-claire-element-id="10044220"> <strong> Основы кемпинга </strong> </p>
  <p data-claire-element-id="10080905"> После открывающего тега часто отображается текстовое содержимое.В этом заголовке текст «Основы кемпинга» отображается как заголовок, указанный в открывающем теге. </p>
  <p data-claire-element-id="10044222"> <strong> </h2>
  <p> </strong> </p>
  <p data-claire-element-id="10044223"> Последний набор символов в HTML представляет собой закрывающий тег <strong> </strong>. Это означает, что вы завершили этот конкретный элемент. Он должен быть идентичен открывающему тегу, за исключением косой черты после <. </p>
  <p data-claire-element-id="10044224"> Если это кажется сложным, давайте подумаем, как вы форматируете элементы в текстовом документе. Часто вы выделяете их от начала до конца, а затем превращаете в заголовок (если вы этого хотите).</p>
  <p data-claire-element-id="10044225"> То же самое и в HTML. Вы должны превратить свой контент в заголовок. Написав открывающие и закрывающие теги </p>
  <h2><span class="ez-toc-section" id="%D0%B2%D0%BE%D0%BA%D1%80%D1%83%D0%B3_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B3%D0%BE_%D0%B2%D1%8B_%D1%83%D0%BA%D0%B0%D0%B7%D1%8B%D0%B2%D0%B0%D0%B5%D1%82%D0%B5_%D1%87%D1%82%D0%BE_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B5_%D0%B2%D0%BD%D1%83%D1%82%D1%80%D0%B8_%D0%B4%D0%BE%D0%BB%D0%B6%D0%BD%D0%BE_%D0%B1%D1%8B%D1%82%D1%8C_%D0%BF%D1%80%D0%B5%D0%B2%D1%80%D0%B0%D1%89%D0%B5%D0%BD%D0%BE_%D0%B2_%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%BE%D0%B9_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA"></span> вокруг содержимого, вы указываете, что содержимое внутри должно быть превращено в большой заголовок. <span class="ez-toc-section-end"></span></h2>
  </p>
  <p data-claire-element-id="10058401"> Поэтому, когда вы пишете этот HTML-код для примера статьи о принадлежностях для кемпинга: </p><pre data-claire-element-id="10044227"> <code data-claire-semantic="html"> <h2><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B_%D0%BA%D0%B5%D0%BC%D0%BF%D0%B8%D0%BD%D0%B3%D0%B0-2"></span> Основы кемпинга <span class="ez-toc-section-end"></span></h2> </code> </pre><p data-claire-element-id="10044228">, вы получаете следующий результат: </p>
  <p data-claire-element-id="10044230">
  <p data-claire-element-id="10044231"> Почти каждый HTML-элемент, который вы пишете будет следовать этому шаблону (открывающий тег, контент, закрывающий тег).Давайте рассмотрим еще один пример, чтобы детально изучить эту точку. </p><pre data-claire-element-id="10044232"> <code data-claire-semantic="html"> <p> Сбор правильного снаряжения имеет решающее значение для хорошего времяпрепровождения в следующем походе. Убедитесь, что вы принесли нужные вещи, используя наш контрольный список. </p> </code> </pre><p data-claire-element-id="10085744"> В итоге вы получите следующий результат: </p>
  <p data-claire-element-id="10085746">
  <p data-claire-element-id="10044233">
  <p> — это открывающий тег в приведенном выше примере (следовательно, </p>
  <p> — закрывающий ярлык). Содержимое в середине становится абзацем, потому что «p» означает «абзац». </p>
  <p data-claire-element-id="10044234"> Имена HTML-элементов часто являются сокращениями того содержания, которое они представляют.Вы увидите многие из этих элементов во второй и третьей частях курса. </p>
  <h5 data-claire-element-id="30666765"><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%BA%D0%B0"></span> Практика! <span class="ez-toc-section-end"></span></h5>
  <p data-claire-element-id="10104105"> В этом следующем упражнении по коду вы разместите базовые теги HTML вокруг заранее написанного содержимого. Это то, что делают разработчики, когда получают текст для новой веб-страницы, скажем, от маркетинговой команды или копирайтера. Ваша очередь попробовать! </p>
  <p data-claire-element-id="30657675"> Перейдите к упражнению CodePen. Контент полностью не отформатирован (посмотрите под текстовым редактором, чтобы увидеть результат). Первая строка не отображается как заголовок, текст не отображается как абзацы… <em> yikes </em>. Превратите каждый фрагмент текста в соответствующий HTML-элемент, заключив его в открывающие и закрывающие теги. <strong> Обязательно загружайте изменения каждый раз, нажимая синюю кнопку </strong> «Обновить» <strong>. </strong> Иначе не покажут! Следуйте инструкциям ниже: </p>
  <ol data-claire-element-id="30666763">
  <li data-claire-element-id="30666756">
  <p data-claire-element-id="30666755"> Превратите текст «Соседская девочка спасает кошку от дерева» в большой заголовок, заключив его в правильные открывающие и закрывающие теги. </p>
  <p data-claire-element-id="30657646"> Подсказка: </p>
  <p data-claire-element-id="30657647"> Открывающий тег: <code> </p>
  <h2> </h2>
  <p></code> </p>
  <p data-claire-element-id="30657648"> Закрывающий тег: <code> </h2>
  <p> </code> </p>
  </li>
  <li data-claire-element-id="30666758">
  <p data-claire-element-id="30666757"> Поверните текстовую группу, которая начинается с «Джилл Джексон, жительница Оук-Лейн… «в абзац, заключив его в правильные открывающие и закрывающие теги. </p>
  <p data-claire-element-id="30657651"> Подсказка: </p>
  <p data-claire-element-id="30657652"> Открывающий тег: <code> </p>
  <p> </code> </p>
  <p data-claire-element-id="30657653"> Закрывающий тег: <code> </p>
  <p> </code> </p>
  </li>
  <li data-claire-element-id="30666760">
  <p data-claire-element-id="30666759"> Поверните текстовую группу который начинается с «Whispers имеет репутацию …» в абзаце, заключив его в правильные открывающие и закрывающие теги. </p>
  <p data-claire-element-id="30657656"> Подсказка: </p>
  <p data-claire-element-id="30657657"> Открывающий тег: <code> </p>
  <p> </code> </p>
  <p data-claire-element-id="30657658"> Закрывающий тег: <code> </p>
  <p> </code> </p>
  </li>
  <li data-claire-element-id="30666762">
  <p data-claire-element-id="30666761"> Поверните текстовую группу, которая начинается с «Когда просят прокомментировать… «в абзац, заключив его в правильные открывающие и закрывающие теги. </p>
  <p data-claire-element-id="30657661"> Подсказка: </p>
  <p data-claire-element-id="30657662"> Открывающий тег: <code> </p>
  <p> </code> </p>
  <p data-claire-element-id="30657663"> Закрывающий тег: <code> </p>
  <p> </code> </p>
  </li>
  </ol>
  <h2><span class="ez-toc-section" id="%D0%98%D0%B7%D1%83%D1%87%D0%B8%D1%82%D0%B5_HTML_%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D0%B2_%D1%8D%D1%82%D0%BE%D1%82_%D1%81%D1%83%D0%BF%D0%B5%D1%80_%D0%BF%D1%80%D0%BE%D1%81%D1%82%D0%BE%D0%B9_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82"></span> Изучите HTML, сделав этот супер простой веб-сайт <span class="ez-toc-section-end"></span></h2>
  <p> Вы хотите знать, как создать веб-сайт, но не знаете, какой HTML-код использовать? Следуйте этому руководству, чтобы создать свой первый базовый веб-сайт на HTML с примерами исходного кода! </p>
  <p> Мы рассмотрим 3 вещи: </p>
  <ol>
  <li> что такое HTML </li>
  <li> некоторый базовый синтаксис HTML, </li>
  <li> и как сделать локальный сайт на своем компьютере.</li>
  </ol>
  <p> Замечу: этот пост предназначен для начинающих, которые никогда раньше не работали с HTML. </p>
  <p> Здесь не будет задействован какой-либо CSS или JavaScript, поэтому имейте в виду, что эта веб-страница, которую мы будем делать, не будет такой уж красивой. Он просто сфокусирован на демонстрации HTML и его основных функций. </p>
  <blockquote>
  <p> <strong> Пытаетесь изучить HTML и CSS? <br /> </strong> Я настоятельно рекомендую книгу Джона Дакетта «HTML и CSS», а также продолжение «JavaScript и jQuery» для начинающих.Книги красиво оформлены и легко для понимания объясняют основные темы. Посмотрите их на Amazon! </p>
  </blockquote>
  <h3><span class="ez-toc-section" id="%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_HTML"></span> Что такое HTML? <span class="ez-toc-section-end"></span></h3>
  <p> Итак, что такое HTML? HTML означает <strong> язык разметки гипертекста. </strong> </p>
  <p> Это способ отображения информации на веб-страницах в вашем браузере. </p>
  <p> Следует помнить, что HTML сам по себе не является языком программирования. Это язык разметки. В языках программирования, таких как PHP или Java, для управления содержимым используются такие вещи, как логика и условия.</p>
  <p> HTML этого не делает, но он по-прежнему чрезвычайно важен. В конце концов, он составляет каждый существующий веб-сайт! </p>
  <h3><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0_HTML-%D1%84%D0%B0%D0%B9%D0%BB%D0%B0_%D0%B2_%D0%B2%D0%B0%D1%88_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80"></span> Загрузка HTML-файла в ваш браузер <span class="ez-toc-section-end"></span></h3>
  <p> Фактически вы можете создать HTML-файл на своем компьютере и загрузить его в свой браузер. Его не будет в Интернете, поэтому его может просматривать только ваш локальный компьютер. </p>
  <p> Для реальных веб-сайтов, к которым любой может получить доступ в Интернете, файлы HTML хранятся на компьютерах, называемых серверами. Но основной процесс очень похож.</p>
  <p> Для создания HTML-файла: </p>
  <ol>
  <li> Зайдите на рабочий стол или куда хотите поместить файл. </li>
  <li> Затем щелкните правой кнопкой мыши и выберите «Новый» и «Текстовый документ». Убедитесь, что имя файла читается как «index.html» и не заканчивается на «.txt». <br /> (Если по какой-то причине вы не видите расширение файла, щелкните вкладку «Просмотр» и убедитесь, что установлен флажок «Расширения имени файла».) </li>
  <li> Когда у вас все готово, откройте его в браузере. </li>
  <li> Если слева есть значок Chrome или другого браузера, это означает, что вы можете дважды щелкнуть, чтобы открыть его автоматически.Если этого не произошло, щелкните правой кнопкой мыши, выберите «Открыть с помощью» и выберите свой любимый браузер. </li>
  <li> В браузере все будет выглядеть пустым, и это нормально, потому что в файле еще ничего нет. </li>
  </ol>
  <h3><span class="ez-toc-section" id="%D0%A0%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0"></span> Редактирование файла <span class="ez-toc-section-end"></span></h3>
  <p> Теперь, когда у вас настроен файл, вы готовы приступить к кодированию! </p>
  <p> Чтобы отредактировать HTML-файл, откройте его в редакторе кода. Щелкните файл правой кнопкой мыши и выберите «Открыть с помощью» и редактор, либо у некоторых редакторов будет быстрая ссылка в меню.</p>
  <p> Я использую Visual Studio Code, но вы можете использовать и другие программы, например: </p>
  <p> Теперь, когда индексный файл открыт и в браузере, и в редакторе, мы приступим к написанию кода! </p>
  <h3><span class="ez-toc-section" id="HTML-%D1%82%D0%B5%D0%B3%D0%BE%D0%B2"></span> HTML-тегов <span class="ez-toc-section-end"></span></h3>
  <p> Давайте посмотрим на некоторые основные функции HTML. </p>
  <p> HTML состоит из тегов. </p>
  <p> <strong> Теги — это специальный текст, который вы используете для разметки или выделения частей вашей веб-страницы. Отсюда и язык «разметки» гипертекста. </strong> </p>
  <p> Эти теги сообщают браузеру, что нужно отображать содержимое тега определенным образом.</p>
  <p> Вот один пример действия тега: </p><pre> <code> Это мой самый первый веб-сайт, и я <b> очень взволнован !!!!! </b> </code> </pre><p> Вы можете видеть слова «чрезвычайно взволнован» в этих тегах <code> <b> </code> — «b» означает жирный шрифт. </p>
  <p> Теперь давайте сохраним файл и перезагрузим браузер. Текст должен выглядеть так: </p>
  </p>
  <p> Хорошо! Вы только что написали HTML. Уже чувствуете волнение? 🙂 </p>
  <h4><span class="ez-toc-section" id="%D0%90%D0%BD%D0%B0%D1%82%D0%BE%D0%BC%D0%B8%D1%8F_HTML-%D1%82%D0%B5%D0%B3%D0%B0"></span> Анатомия HTML-тега <span class="ez-toc-section-end"></span></h4>
  <p> Давайте еще раз взглянем на тег.</p>
  <p> Тег перед фразой называется открывающим тегом <strong> — </strong> <code> <b> </code> </p>
  <p> И тег после фразы — это закрывающий тег <strong> — </strong> <code> </b> </code>. Вы можете видеть, что закрывающий тег имеет косую черту перед буквой «b». </p>
  <p> Вместе эти два тега предписывают браузеру выделить текст между ними жирным шрифтом. Именно это и произошло. </p>
  <p> Теперь, возможно, это очевидно, но когда браузер загружает HTML, сами теги невидимы — они не отображаются на странице.</p>
  <p> Довольно круто, а? Одна из причин, по которой я так люблю создавать веб-сайты, заключается в том, что это почти похоже на волшебство — иметь возможность отображать объекты в вашем браузере. </p>
  <h3><span class="ez-toc-section" id="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_HTML-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0"></span> Базовая структура HTML-документа <span class="ez-toc-section-end"></span></h3>
  <p> Итак, эта строка текста, которую мы написали, работает, потому что мы сохранили файл как файл HTML, который может распознать ваш браузер. </p>
  <p> Но для настоящего HTML в Интернете нам нужно добавить в файл еще несколько тегов, чтобы все работало правильно. </p>
  <h4><span class="ez-toc-section" id="Doctype_%D0%B8_HTML-%D1%82%D0%B5%D0%B3%D0%B8"></span> Doctype и HTML-теги <span class="ez-toc-section-end"></span></h4>
  <p> Самый первый тег, который вам нужен, — это тег doctype.Это не совсем HTML-тег, но он сообщает браузеру, что это документ HTML5. </p>
  <p> Вот как это выглядит: <code> <! DOCTYPE html> </code> </p>
  <p> Этот тег не требует закрывающего тега, потому что он не окружает какой-либо текст, он просто объявляет, что это HTML. </p>
  <p> Другие типы документа, которые использовались в прошлом, — это HTML 4 или XHTML. Но сейчас HTML 5 — единственный используемый тип документа. </p>
  <p> После doctype у вас есть HTML-тег. Он сообщает веб-браузеру, что все внутри него — HTML: </p>
  <p>.</p><pre> <code> <! DOCTYPE html>
  <html>
   
  </html> </code> </pre><p> Я знаю, это кажется немного избыточным, поскольку вы уже использовали тег HTML doctype.Но этот тег гарантирует, что все внутри него унаследует некоторые необходимые характеристики HTML. </p>
  <h4><span class="ez-toc-section" id="%D0%93%D0%BE%D0%BB%D0%BE%D0%B2%D0%B0_%D0%B8_%D1%87%D0%B0%D1%81%D1%82%D0%B8_%D0%BA%D0%BE%D1%80%D0%BF%D1%83%D1%81%D0%B0"></span> Голова и части корпуса <span class="ez-toc-section-end"></span></h4>
  <p> Внутри основного тега HTML ваш контент обычно разделен на две части: заголовок и тело. </p>
  <p> Вот как это будет выглядеть в коде: </p><pre> <code> <! DOCTYPE html>
  <html>
     <head>
  
     </head>
     <body>
  
     </body>
  </html> </code> </pre><p> Тег заголовка содержит информацию о веб-сайте, а также то, куда вы загружаете файлы CSS и JavaScript.Сегодня мы не будем их освещать, но просто чтобы вы знали. </p>
  <p> Тег тела <strong> </strong> является основным содержимым веб-страницы. Все, что вы видите на странице, обычно находится в теге body. Итак, нам нужно переместить то предложение, которое мы сделали в начале, в тело. </p>
  <p> Вот как это должно выглядеть: </p><pre> <code> <body>
     Это мой самый первый веб-сайт, и я <b> очень взволнован !!!!!! </b>
  </body> </code> </pre><p> Когда вы перезагружаете страницу в своем браузере, все должно выглядеть точно так же, как и раньше.</p>
  <p> Теперь давайте перейдем к некоторым основным тегам, которые обычно используются в заголовке и в теле. </p>
  <p> Я не буду перебирать все возможные теги, потому что их больше сотни. И это займет целую вечность. </p>
  <p> Мы просто рассмотрим наиболее часто используемые, чтобы вы могли лучше понять, как устроена HTML-страница. </p>
  <h3><span class="ez-toc-section" id="%D0%A2%D0%B5%D0%B3%D0%B8_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B9_%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B8"></span> Теги базовой головки <span class="ez-toc-section-end"></span></h3>
  <h3><span class="ez-toc-section" id="%D0%9C%D0%B5%D1%82%D0%B0-%D1%82%D0%B5%D0%B3%D0%B8"></span> Мета-теги <span class="ez-toc-section-end"></span></h3>
  <p> Первый тег, который должен быть у вас в голове, — это этот метатег.Это устанавливает кодировку символов. </p><pre> <code> <meta charset = "utf-8"> </code> </pre><p> UTF-8 — это тип кодировки Unicode, используемый практически на всех веб-сайтах по всему миру. Нам нужна кодировка, потому что нам нужно переводить буквы, числа и символы, которые мы используем, в байты, используемые компьютерами. </p>
  <p> Вы можете думать об этом как о своего рода словаре, переводящем человеческие языки на компьютерный язык. </p>
  <p> Следующий метатег, который должен быть на всех веб-сайтах, — это тег области просмотра: </p><pre> <code> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> </code> </pre><p> Это важно для отзывчивых веб-сайтов.Адаптивный означает, что веб-сайт может правильно отображаться на всех устройствах — компьютерах, планшетах и ​​мобильных телефонах. </p>
  <p> В содержимом этого тега говорится, что ширина веб-сайта должна быть такой же, как у любого устройства, которое его просматривает. </p>
  <p> Например, у мобильного телефона разрешение или размер экрана намного меньше, чем у портативного компьютера. Это позволит изменять размер веб-сайта в зависимости от того, что использует пользователь. </p>
  <p> Исходный масштаб устанавливает масштаб веб-сайта.В настоящее время в браузерах вы можете увеличивать и уменьшать масштаб, делая веб-сайт больше или меньше. Мы хотим, чтобы он был установлен на 1 по умолчанию, то есть не увеличивался или не уменьшался. </p>
  <h3><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA"></span> Заголовок <span class="ez-toc-section-end"></span></h3>
  <p> Помимо метатегов, одним из наиболее важных тегов является тег заголовка: </p><pre> <code> <title> Мой первый сайт </title> </code> </pre><p> Как вы, наверное, догадались, это устанавливает заголовок веб-страницы. Если у веб-сайта разные страницы, каждая страница может иметь свой собственный заголовок. </p>
  <p> После добавления всех этих тегов в код тег заголовка должен выглядеть так: </p><pre> <code> <head>
     <meta charset = "utf-8">
     <meta name = "viewport" content = "width = device-width, initial-scale = 1">
     <title> Мой первый веб-сайт </title>
  </head> </code> </pre><p> И вы увидите в своем браузере, что на вкладке будет то, что вы поместили в тег заголовка: </p>
  </p>
  <h3><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5_%D1%82%D0%B5%D0%B3%D0%B8_%D1%82%D0%B5%D0%BB%D0%B0"></span> Основные теги тела <span class="ez-toc-section-end"></span></h3>
  <p> Давайте теперь посмотрим на самое интересное — теги тела контролируют контент, который вы действительно видите.</p>
  <p> Большинство основных тегов тела основаны на том, что вы можете делать в документах Word. Вы можете создавать заголовки, полужирный текст, составлять списки и даже таблицы. </p>
  <p> До появления CSS использование этих тегов помогало систематизировать и стилизовать ваш контент, чтобы его было легче понять читателю. </p>
  <p> Не все эти теги до сих пор используются так часто, как раньше. Некоторые из них больше не нужны, потому что теперь мы можем использовать CSS для достижения того же стиля. </p>
  <p> Но я думаю, что все же полезно хотя бы знать, что это за основные теги.</p>
  <h3><span class="ez-toc-section" id="%D0%A2%D0%B5%D0%B3%D0%B8_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0"></span> Теги заголовка <span class="ez-toc-section-end"></span></h3>
  <p> Давайте сначала посмотрим на заголовок или теги заголовка, обозначенные буквой H. Каждый тег H также имеет номер после H. Они варьируются от <code> </p>
  <h2> </h2>
  <p></code> до <code> </p>
  <h6> </h6>
  <p></code>. </p>
  <p> Тег <code> </p>
  <h2> </h2>
  <p></code> имеет наивысший приоритет. Обычно он используется для заголовка страницы. </p>
  <p> Мы собираемся добавить на нашу веб-страницу тег <code> </p>
  <h2> </h2>
  <p></code>. Внутри тега мы поместим заголовок веб-страницы «Мой первый веб-сайт».</p>
  <p> Мы также добавим субтитры с помощью тега <code> </p>
  <h3> </h3>
  <p></code> с содержанием: «Игровая площадка HTML». </p>
  <p> И просто для удовольствия, давайте добавим остальные теги H до <code> </p>
  <h6> </h6>
  <p></code>. </p>
  <p> Итак, ваш тег на теле будет выглядеть примерно так: </p><pre> <code> <body>
     <h2><span class="ez-toc-section" id="%D0%9C%D0%BE%D0%B9_%D0%BF%D0%B5%D1%80%D0%B2%D1%8B%D0%B9_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82"></span> Мой первый веб-сайт <span class="ez-toc-section-end"></span></h2>
     <h3><span class="ez-toc-section" id="%D0%9F%D0%BB%D0%BE%D1%89%D0%B0%D0%B4%D0%BA%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%B8%D0%B3%D1%80%D1%8B_%D0%B2_HTML"></span> Площадка для игры в HTML <span class="ez-toc-section-end"></span></h3>
     <h4><span class="ez-toc-section" id="%D0%9F%D0%BB%D0%BE%D1%89%D0%B0%D0%B4%D0%BA%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%B8%D0%B3%D1%80%D1%8B_%D0%B2_HTML-2"></span> Площадка для игры в HTML <span class="ez-toc-section-end"></span></h4>
     <h5><span class="ez-toc-section" id="%D0%9F%D0%BB%D0%BE%D1%89%D0%B0%D0%B4%D0%BA%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%B8%D0%B3%D1%80%D1%8B_%D0%B2_HTML-3"></span> Площадка для игры в HTML <span class="ez-toc-section-end"></span></h5>
     <h5><span class="ez-toc-section" id="%D0%9F%D0%BB%D0%BE%D1%89%D0%B0%D0%B4%D0%BA%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%B8%D0%B3%D1%80%D1%8B_%D0%B2_HTML-4"></span> Площадка для игры в HTML <span class="ez-toc-section-end"></span></h5>
     <h6><span class="ez-toc-section" id="%D0%9F%D0%BB%D0%BE%D1%89%D0%B0%D0%B4%D0%BA%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%B8%D0%B3%D1%80%D1%8B_%D0%B2_HTML-5"></span> Площадка для игры в HTML <span class="ez-toc-section-end"></span></h6>
  </body> </code> </pre><p> Если вы сохраните и перезагрузите веб-страницу, она будет выглядеть так: </p>
  </p>
  <p> Вы можете видеть, как размер шрифта постепенно уменьшается с <code> </p>
  <h2> </h2>
  <p></code> до <code> </p>
  <h6> </h6>
  <p></code>.</p>
  <p> Большинство веб-сайтов не используют все теги H. Обычно они используют <code> </p>
  <h2> </h2>
  <p></code> для заголовка, <code> </p>
  <h3> </h3>
  <p></code> для субтитров и <code> </p>
  <h4> </h4>
  <p></code> иногда для заголовков разделов. Довольно редко используются значения от <code> </p>
  <h5> </h5>
  <p></code> до <code> </p>
  <h6> </h6>
  <p></code>. </p>
  <h3><span class="ez-toc-section" id="%D0%BF%D1%83%D0%BD%D0%BA%D1%82"></span> пункт <span class="ez-toc-section-end"></span></h3>
  <p> Следующий тег, который мы рассмотрим, — это абзац или тег <code> </p>
  <p> </code>. Как и в Word, вы можете использовать абзацы для разделения содержимого на блоки.Вы можете создать абзац, заключив в свой контент теги <code> </p>
  <p> </code>. </p>
  <p> Мы собираемся сделать абзац с текстом-заполнителем. </p>
  <p> Один из самых простых способов найти текст-заполнитель — это поискать в Google «<em> <strong> lorem ipsum </strong>. </em> ”Это один из сайтов, которым я пользуюсь довольно часто. </p>
  <p> <em> Текст Lorem ipsum </em> — это бессмысленные латинские слова, которые используются в публикации и дизайне для заполнения текста при работе над макетом. </p>
  <p> Итак, мы скопируем этот абзац сюда и поместим его в наш код внутри тега <code> </p>
  <p> </code>.Сделаем и второй абзац. Мы скопируем еще немного текста и поместим его во второй тег <code> </p>
  <p> </code>. </p><pre> <code> <p>
     Lorem ipsum dolor sit amet, conctetur adipiscing elit.
     Nullam facilisis arcu vel mollis finibus. Nunc facilisis
     vel nisl lacinia cursus. Cras Suscipit augue sed volutpat
     tincidunt. Aenean dictum tincidunt urna, quis eleifend
     quam mattis eu. Целочисленный sollicitudin, nisl faucibus aliquam
     ullamcorper, metus sapien scelerisque lorem, at ornare dui
     orci non orci.Целое число tempus conctetur metus, vitae
     blandit nibh aliquam nec. Pellentesque vestibulum arcu eget
     ante sollicitudin, id accumsan dui molestie. Suspendisse
     Vehicleula semper dui id congue. Suspendisse sed velit сидеть
     amet velit luctus varius. Ut condimentum tincidunt consquat.
     Sed eu ligula non magna scelerisque auctor.
  </p>
  
  <p>
     Maecenas feugiat iaculis imperdiet. Duis vitae pellentesque
     nunc, eget elementum metus. Nulla sollicitudin bibendum nibh,
     сидеть амет семпер мучитель.Nunc rhoncus non arcu in scelerisque.
     Donec magna mauris, congue ac dignissim rutrum, tincidunt
     quis leo. Maecenas dictum orci in magna iaculis, in elementum
     felis viverra. Энеан сидит, амет сапиен одио. Донецкое молесье
     est et nisl mattis dictum. Nullam at nibh aliquet, tincidunt
     lorem et, facilisis enim. Praesent id felis sit amet quam
     dignissim volutpat. Nam nec cursus mi, quis tincidunt justo.
  </p> </code> </pre><p> В браузере это будет выглядеть так: </p>
  </p>
  <p> И вот оно.Браузер автоматически добавляет пробел между абзацами и другим содержимым: </p>
  <h3><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D1%80%D1%8B%D0%B2_%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8"></span> Разрыв строки <span class="ez-toc-section-end"></span></h3>
  <p> Теперь, если вы хотите разделить свой контент на несколько строк, но не хотите, чтобы пространство, которое идет с абзацем, вы можете использовать разрыв строки или тег <code> <br /> </code>. </p>
  <p> Давайте возьмем еще текст <em> lorem ipsum </em> и поместим его в наш редактор. </p>
  <p> Теперь нужно отметить, что HTML не разбивает строки автоматически. </p>
  <p> Если вы нажмете клавишу ввода несколько раз в своем контенте, на странице ничего не изменится.То же самое касается нажатия пробела несколько раз. </p>
  <p> Браузер предоставит только одно место, и все. Чтобы создать разрыв строки, вам необходимо добавить тег <code> <br /> </code>. </p>
  <p> Вы даже можете добавить несколько разрывов строк, чтобы добавить больше места в ваш контент. </p>
  <p> № </p><pre> <code> Fusce sit amet rutrum lacus. <br> <br> <br> <br> <br/>
  Sed efficitur laoreet nisl, ac faucibus velit hendrerit sit amet.
  Phasellus ac orci eget nisi porta accumsan a eget ex.Нам лациния
  dolor at mi tristique rhoncus. Mecenas nisl est, roncus id cursus.
  non, tempor a neque. </code> </pre></p>
  <h4><span class="ez-toc-section" id="%D0%9F%D1%83%D1%81%D1%82%D1%8B%D0%B5_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B_%D0%BD%D0%B5_%D1%82%D1%80%D0%B5%D0%B1%D1%83%D1%8E%D1%82_%D0%B7%D0%B0%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B3%D0%BE_%D1%82%D0%B5%D0%B3%D0%B0"></span> Пустые элементы не требуют закрывающего тега <span class="ez-toc-section-end"></span></h4>
  <p> Вы заметите, что нет закрывающего тега <code> <br /> </code> — он не нуждается в закрывающем теге, потому что он не используется для окружения текста. </p>
  <p> Эти типы тегов, у которых нет закрывающего тега, называются пустыми элементами. Пустота означает пустой, потому что у них нет содержимого. </p>
  <p> Еще одно замечание по этому поводу: иногда вы можете увидеть разрыв строки, записанный как <code> <br /> </code> с закрывающей косой чертой.Это было требованием для XHTML, но в HTML 5 косая черта не нужна. </p>
  <p> Браузер по-прежнему будет правильно читать тег, но я все же рекомендую писать пустые элементы без косой черты. </p>
  <h3><span class="ez-toc-section" id="%D0%A2%D0%B5%D0%B3%D0%B8_%D1%81%D1%82%D0%B8%D0%BB%D1%8F"></span> Теги стиля <span class="ez-toc-section-end"></span></h3>
  <p> Следующий набор тегов, который мы рассмотрим, — это теги стиля. Эти теги добавляют стили к тексту. </p>
  <p> Они могут быть полужирными, как мы делали в самом начале, затем есть курсив, подчеркивание, выделенные и сильные теги. </p>
  <p> Как мы уже говорили, эти теги стилей используются не так часто, потому что теперь вы можете использовать CSS для стилизации всего.</p>
  <p> Давайте рассмотрим каждый из тегов стиля: </p>
  <ul>
  <li> Тег <code> <b> </code> выделяет текст <strong> жирным шрифтом </strong>. </li>
  <li> Тег <code> <i> </code> делает текст <em> курсивом </em>. </li>
  <li> Тег <code> <u> </code> делает текст подчеркнутым. </li>
  <li> Тег <code> <em> </code> (выделенный) обычно интерпретируется в браузерах как <em> курсив </em>. </li>
  <li> И тег <code> <strong> </code> обычно представляет собой <strong> полужирный текст </strong>.</li>
  </ul>
  <p> Вот демонстрационный код того, как каждый из них будет выглядеть: </p><pre> <code> <b> Sed efficitur laoreet nisl, </b> <br>
   <i> ac faucibus velit hendrerit sit amet. </i> <br>
   <u> Phasellus ac orci eget nisi porta accumsan a eget ex. </u> <br>
   <em> Nam lacinia dolor at mi tristique rhoncus. </em> <br>
   <strong> Maecenas nisl est, rhoncus id cursus non, tempor a neque. </strong> </code> </pre><p> А вот как этот код будет выглядеть в браузере: </p>
  <h4> </h4>
  <h3><span class="ez-toc-section" id="%D0%93%D0%BE%D1%80%D0%B8%D0%B7%D0%BE%D0%BD%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F_%D0%BB%D0%B8%D0%BD%D0%B5%D0%B9%D0%BA%D0%B0"></span> Горизонтальная линейка <span class="ez-toc-section-end"></span></h3>
  <p> Тег горизонтальной линейки создаст горизонтальную линию на вашей веб-странице, которая будет проходить полностью.</p>
  <p> Вы пишете так: <code> </p>
  <hr>
  <p> </code> </p>
  <p> Подобно тегу разрыва строки, горизонтальная линейка является пустым элементом и требует только одного тега без закрывающего тега. </p><pre> <code> ...
  <strong> Maecenas nisl est, roncus id cursus non, tempor a neque. </strong>
  <hr>
  Phasellus venenatis dapibus laoreet. Sed in lacus a augue rutrum ultricies.
  Donec eget lacinia elit. Suspendisse Commodo Justo at lorem molestie, vitae
  tempus enim laoreet.
  ... </code> </pre><p> Содержимое до тега <code> </p>
  <hr>
  <p> </code> будет над линией, а содержимое под ним будет под строкой, например: </p>
  </p>
  <h3><span class="ez-toc-section" id="%D0%AF%D0%BA%D0%BE%D1%80%D0%BD%D0%BE%D0%B5_%D0%B7%D0%B2%D0%B5%D0%BD%D0%BE"></span> Якорное звено <span class="ez-toc-section-end"></span></h3>
  <p> Ссылки — это один из основных способов передвижения по Интернету.</p>
  <p> Тег ссылки записывается как тег <code> <a> </code>. Это означает «якорь», потому что ссылка соединяет два веб-сайта, как якорь лодки соединяет лодку с тем, к чему она привязана. </p>
  <p> Чтобы создать ссылку, сначала поместите тег <code> <a> </code> вокруг текста ссылки, который должен быть интерактивным. </p>
  <p> Помимо самого тега, тегу <code> <a> </code> требуется атрибут, который означает дополнительную информацию внутри открывающего тега.</p>
  <h4> </h4>
  <p><strong> Атрибуты </strong> </h4>
  <p> Используемый атрибут — <strong> href </strong>. Это сокращение от гипертекстовой ссылки <strong> </strong>. А значение — это URL-адрес целевого веб-сайта. </p>
  <p> Например, если вы хотите создать ссылку на главную страницу Google, вы должны использовать URL-адрес https://www.google.com/. </p>
  <p> URL-адрес </p>
  <p> означает <strong> Universal Resource Locator </strong>, и он действует как адрес, который дает вам местоположение веб-страницы или файла, который вы хотите загрузить.</p>
  <p> Другой часто используемый атрибут в теге <code> <a> </code> — «цель». Это определяет, будет ли ссылка, по которой вы щелкнули, открываться на той же странице или открываться на новой странице или вкладке в вашем браузере. </p>
  <p> По умолчанию ссылка будет открываться на той же странице. Если вы хотите, чтобы ссылка открывалась на новой странице, установите для цели значение «_blank». </p>
  <p> Вот демонстрация якорной ссылки: </p><pre> <code> <a href="https://www.google.com/" target="_blank" rel="noopener"> Sed in lacus a augue rutrum </a> </code> </pre><h3><span class="ez-toc-section" id="%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F"></span> Изображения <span class="ez-toc-section-end"></span></h3>
  <p> Следующее, что мы рассмотрим, — это изображения.Чтобы разместить изображение на своей веб-странице, вы можете использовать тег изображения, записанный как <code> <img> </code>. </p>
  <p> Тег изображения — это еще один пустотный элемент, для которого не требуется закрывающий тег. </p>
  <p> Подобно тегу ссылки, тегу изображения требуется URL. Вместо использования href-подобных ссылок тег изображения имеет атрибут <strong> src </strong>, означающий источник изображения. </p>
  <p> Давайте найдем изображение в Интернете для использования в этом примере. Одно действительно полезное место, куда я захожу для тестовых изображений, — это https: // placeholder.com /. </p>
  <p> Мы возьмем URL-адрес изображения с Placeholder.com и поместим его в источник изображения, которое мы создаем: </p><pre> <code> <noscript><img class="lazy lazy-hidden" src = "https://via.placeholder.com/600x300.jpg"></noscript><img class="lazyload lazy lazy-hidden" src = "https://via.placeholder.com/600x300.jpg"><noscript><img src = "https://via.placeholder.com/600x300.jpg"></noscript> </code> </pre><p> В качестве альтернативы вы можете загрузить само изображение и поместить его в ту же папку, что и ваш файл index.html, и сослаться на него следующим образом: </p><pre> <code> <noscript><img class="lazy lazy-hidden" src = "600x300.jpg"></noscript><img class="lazyload lazy lazy-hidden" src = "600x300.jpg"><noscript><img src = "600x300.jpg"></noscript>
   </code> </pre><p> Один из атрибутов, который использует тег <code> <img> </code>, — это граница <strong> </strong>, которую можно установить на количество пикселей: </p><pre> <code> <noscript><img class="lazy lazy-hidden" src = "https: // через.placeholder.com/600x300.jpg "border =" 10 "></noscript><img class="lazyload lazy lazy-hidden" src = "https: // через.placeholder.com/600x300.jpg "border =" 10 "><noscript><img src = "https: // через.placeholder.com/600x300.jpg "border =" 10 "></noscript> </code> </pre><p> Это будет выглядеть так: </p>
  </p>
  <h3><span class="ez-toc-section" id="%D0%A1%D0%BF%D0%B8%D1%81%D0%BA%D0%B8"></span> Списки <span class="ez-toc-section-end"></span></h3>
  <p> Следующее, что мы рассмотрим, — это списки. HTML может довольно легко создавать маркированные или нумерованные списки. </p>
  <p> Маркированные списки называются <strong> неупорядоченными списками </strong>, в отличие от упорядоченных </strong> списков, в которых используются числа. </p>
  <p> Для создания списка вы будете использовать тег списка — <code> </p>
  <ol> </code> или <code> </p>
  <ul> </code> в зависимости от того, составляете ли вы упорядоченный или неупорядоченный список.</p>
  <p> Составим неупорядоченный список разных видов фруктов. </p>
  <p> Сделаем наш тег <code> </p>
  <ul> </code> для списка. </p>
  <p> Внутри тега списка вы помещаете элементы списка. Каждый элемент будет помещен в свой собственный тег элемента списка, записанный как <code> </p>
  <li> </code>. </p>
  <p> Добавим яблоки, апельсины, ананасы, манго и драконьи фрукты: </p><pre> <code> <ul>
     <li> яблоки </li>
     <li> апельсины </li>
     <li> ананасы </li>
     <li> манго </li>
     <li> драконий фрукт </li>
  </ul> </code> </pre><p> А вот как это выглядит.</p>
  </p>
  <p> Теперь, если мы изменим наш список на упорядоченный, используя тег <code> </p>
  <ol> </code>, вот как это будет выглядеть. </p>
  </p>
  <h4> </h4>
  <p><strong> Вложенные списки </strong> </h4>
  <p> Вы можете даже вкладывать списки друг в друга. Допустим, я хочу добавить под яблоки разные типы яблок. Мы бы создали новый тег списка внутри рассматриваемого элемента списка с его собственными элементами списка. </p>
  <p> Итак, в теге apple <code> </p>
  <li> </code> я добавлю новый тег <code>
  <ul> </code> под текстом «яблоко».</p>
  <p> Затем мы добавим несколько разных сортов яблок — Golden Delicious, Gala, Granny Smith. </p><pre> <code> <ul>
     <li> яблоки
        <ul>
           <li> золотой вкусный </li>
           <li> бабушка смит </li>
           <li> гала </li>
        </ul>
     </li>
     <li> апельсины </li>
     <li> ананасы </li>
     <li> манго </li>
     <li> драконий фрукт </li>
  </ul> </code> </pre><p> Когда мы перезагружаем нашу страницу, вы можете видеть, что вложенный список типов яблок имеет даже больший отступ, чем основной список.</p>
  </p>
  <h3><span class="ez-toc-section" id="%D0%92%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D1%8C_%D0%B8_%D0%BE%D1%82%D1%81%D1%82%D1%83%D0%BF"></span> Вложенность и отступ <span class="ez-toc-section-end"></span></h3>
  <p> Это подводит меня к важному аспекту написания хорошего HTML. Если вы поместите тег HTML внутрь другого, это называется вложением. </p>
  <h4> </h4>
  <p><strong> Дочерние и родительские элементы </strong> </h4>
  <p> Элемент внутри другого называется дочерним элементом <strong> </strong>, а внешний элемент называется родительским элементом <strong> </strong>. </p>
  <p> Чтобы организовать родительские и дочерние элементы, мы делаем отступ для дочернего элемента. Это помогает отличить его от родительского.</p>
  <p> Как видите, в списке фруктов я выделил основные элементы списка (яблоки, апельсины и манго). А потом для типов яблок я сделал еще больший отступ. </p>
  <h4> </h4>
  <p><strong> Отступы делают код читаемым для людей </strong> </h4>
  <p> Это помогает сохранить код в чистоте. Вы и другие люди можете быстро понять, что он делает. </p>
  <p> Если бы все элементы HTML вообще не имели отступов и находились на одном уровне, все выглядело бы более запутанным. Только представьте, что у вас есть не один элемент, а множество различных элементов и тегов, вложенных друг в друга.Чтобы разобрать, что говорит код, потребуется целая вечность. </p>
  <p> Такая практика отступов считается хорошей практикой не только для HTML, но и для CSS, JavaScript и в основном существующих языков программирования. </p>
  <p> Это не обязательно для компьютеров, но необходимо, чтобы люди читали код. На моей первой работе отступление было первым, чему меня научили во время обучения. </p>
  <p> Это очень важно. Нет ничего хуже, чем работать над чужим кодом, получая полный беспорядок.Таким образом, отступы — это простой способ убедиться, что вы пишете код, который другие люди (и вы сами) могут вернуться и прочитать. </p>
  <h3><span class="ez-toc-section" id="%D0%A1%D1%82%D0%BE%D0%BB"></span> Стол <span class="ez-toc-section-end"></span></h3>
  <p> И, говоря об отступах и вложенных элементах, последний тег HTML, который мы собираемся рассмотреть, использует много этого. Это стол. </p>
  <p> Таблицы изначально использовались как эффективный способ организации данных в строки и столбцы. Для демонстрации давайте составим таблицу для гипотетического ежемесячного бюджета домохозяйства. </p>
  <h4> </h4>
  <p><strong> Построение стола </strong> </h4>
  <p> Для начала нам понадобится тег <code> </p>
  <table> </code>.Все остальное в таблице будет внутри этого тега. </p>
  <p> Внутри таблицы у нас будут строки таблицы, ячейки таблицы и заголовки таблиц для заголовков столбцов. </p>
  <p> Затем мы добавим в первую строку таблицы, используя тег <code> </p>
  <tr> </code>. </p><pre> <code> <таблица>
     <tr> </tr>
  </table> </code> </pre><p> Внутри этой строки мы хотим поместить заголовки столбцов. Мы можем сделать это с помощью тегов <code> </p>
  <th> </code> — заголовок таблицы — теги. По умолчанию заголовки таблицы выделены жирным шрифтом и также расположены по центру ячейки.</p>
  <p> Затем мы просто добавим сюда несколько категорий бюджета, чтобы построить эту таблицу. Мы начнем с месяца, а затем у нас будет аренда, коммунальные услуги, продукты, рестораны и развлечения. Я уверен, что есть и другие категории, о которых я забываю, но здесь мы просто стараемся сделать это проще. </p><pre> <code> <таблица>
     <tr>
        <th> Месяц </th>
        <th> Аренда </th>
        <th> Утилиты </th>
        <th> Продовольственные товары </th>
        <th> Питание вне дома </th>
        <th> Развлечения </th>
     </tr>
  </table> </code> </pre><p> Затем в следующую строку мы добавим данные за август.Поскольку это не заголовки, мы будем использовать тег <code> </p>
  <td> </code> для табличных данных. </p>
  <p> Хорошо. Допустим, наша ежемесячная арендная плата составляет 1500 долларов? Затем мы получили 150 долларов на коммунальные услуги, 350 долларов на продукты, 100 долларов на питание вне дома и 50 долларов на развлечения. </p><pre> <code> <таблица>
     <tr>
        <th> Месяц </th>
        <th> Аренда </th>
        <th> Утилиты </th>
        <th> Продовольственные товары </th>
        <th> Питание вне дома </th>
        <th> Развлечения </th>
     </tr>
     <tr>
        <td> август </td>
        <td> 1500 долларов </td>
        <td> 150 </td>
        <td> 350 долларов </td>
        <td> 100 </td>
        <td> 50 </td>
     </tr>
  </table> </code> </pre><p> Посмотрим, как это выглядит.А вот и наша таблица: </p>
  </p>
  <h4> </h4>
  <p><strong> Стилизация стола </strong> </h4>
  <p> Довольно простой вид, правда? Мы можем немного стилизовать таблицу с помощью некоторых встроенных атрибутов таблицы. </p>
  <p> Сначала мы можем добавить строки в таблицу, установив атрибут <strong> border </strong> в тег таблицы. Установим границу толщиной 1 пиксель. Если вы используете большее число, рамка вокруг стола станет шире. Однако границы между ячейками таблицы по умолчанию всегда имеют ширину 1 пиксель.</p>
  <p> Вы также можете использовать <strong> cellpadding </strong>, который контролирует количество дополнительного пространства внутри каждой ячейки, от текста до границы. Так что давайте попробуем клетку из 10. И это дает немного больше места для передышки, поэтому она не кажется такой тесной. </p>
  <p> Другой атрибут, который вы можете изменить, — это <strong> интервал ячеек </strong>. Это контролирует количество пространства между ячейками. Лично мне нравится, когда между ячейками нет места, поэтому оставим его равным 0. </p><pre> <code> <table border = "1" cellpadding = "10" cellspacing = "0"> </code> </pre><p> Вот как выглядит таблица с этими атрибутами стиля: </p>
  </p>
  <h4> </h4>
  <p><strong> Лучшие практики для столов </strong> </h4>
  <p> При построении таблицы HTML необходимо убедиться в том, что в каждой строке таблицы должно быть одинаковое количество столбцов.</p>
  <p> Иначе все испортится. Я могу показать вам, как это будет выглядеть, если я удалю ячейку Продовольственные товары. </p><pre> <code> <table border = "1" cellpadding = "10" cellspacing = "0">
     <tr>
        <th> </th>
        <th> Месяц </th>
        <th> Аренда </th>
        <th> Утилиты </th>
        <! - Продовольственные товары удалены ->
        <th> Питание вне дома </th>
        <th> Развлечения </th>
     </tr>
     <tr>
        <td> август </td>
        <td> 1500 долларов </td>
        <td> 150 </td>
        <td> 350 долларов </td>
        <td> 100 </td>
        <td> 50 </td>
     </tr>
  </table> </code> </pre></p>
  <p> Если вы посмотрите на таблицу в браузере, вы увидите, как заголовки теперь смещены на единицу, а в конце есть странное пустое пространство, потому что там нет ячейки таблицы.Так что давайте вернем это обратно. </p>
  <h4> </h4>
  <p><strong> Ячейки таблицы могут охватывать несколько столбцов / строк </strong> </h4>
  <p> Однако можно сделать так, чтобы ячейка таблицы занимала несколько столбцов. Допустим, мы хотели разбить Утилиты, чтобы иметь два типа данных: один для воды и один для электричества. Итак, мы скажем, что электричество стоит 100 долларов, а вода — 50 долларов. </p>
  <p> Для этого мы фактически создадим дополнительную ячейку в данных и отрегулируем количество утилит. У нас сначала электричество за 100 долларов, а затем вода за 50 долларов.</p><pre> <code> <table border = "1" cellpadding = "10" cellspacing = "0">
     <tr>
        <th> Месяц </th>
        <th> Аренда </th>
        <th> Утилиты </th>
        <th> Продовольственные товары </th>
        <th> Питание вне дома </th>
        <th> Развлечения </th>
     </tr>
     <tr>
        <td> август </td>
        <td> 1500 долларов </td>
        <td> 100 </td> <! - 150 долларов изменено на 100 долларов ->
        <td> 50 долларов </td> <! - добавлена ​​дополнительная ячейка за 50 долларов ->
        <td> 350 долларов </td>
        <td> 100 </td>
        <td> 50 </td>
     </tr>
  </table> </code> </pre><p> Если мы просто загрузим таблицу в этот момент, вы увидите, что она снова выглядит испорченной из-за этой дополнительной ячейки во второй строке.Следующий атрибут исправит это. </p>
  <h4> </h4>
  <p><strong> Атрибут Colspan </strong> </h4>
  <p> Мы хотим, чтобы ячейка заголовка Utilities была выше ячейки 100 и 50 долларов. </p>
  <p> Для этого мы добавим атрибут с именем <strong> colspan </strong>, то есть диапазон столбцов, в ячейку заголовка Utilities. И установите его на 2. </p><pre> <code> <th colspan = "2"> Утилиты </th> </code> </pre><p> В результате ячейка Utilities будет занимать 2 столбца вместо одного. </p>
  <p> И вот мы! Выглядит очень организованно, не правда ли? </p>
  </p>
  <h4> </h4>
  <p><strong> Атрибут Rowspan </strong> </h4>
  <p> В дополнение к colspan вы также можете использовать атрибут rowspan, чтобы ячейка занимала несколько строк.</p>
  <p> Допустим, у нас есть данные за июнь, июль и август, и мы хотели обозначить их как «Осень». </p>
  <p> Я просто собираюсь снова скопировать и вставить и использовать данные за август для создания данных за июнь и июль. </p>
  <p> Чтобы создать ячейку для осени, я хочу, чтобы она находилась слева от месяцев, начиная с июня. Итак, в июньском ряду я создам новую ячейку до июня и добавлю в нее «Осень». Затем я установлю диапазон строк этой ячейки равным 3, чтобы он охватывал июнь, июль и август. </p>
  <p> И нам нужно добавить разделительную ячейку в первую строку, чтобы в общей сложности 4 строки были охвачены этим первым столбцом.</p><pre> <code> <table border = "1" cellpadding = "10" cellspacing = "0">
     <tr>
        <th> </th>
        <th> Месяц </th>
        <th> Аренда </th>
        <th colspan = "2"> Утилиты </th> <! - Эта ячейка будет охватывать 2 столбца в строке под ней ->
        <th> Продовольственные товары </th>
        <th> Питание вне дома </th>
        <th> Развлечения </th>
     </tr>
      <tr>
        <td rowspan = "3"> Осень </td> <! - эта ячейка будет охватывать 3 строки, июнь, июль и август ->
        <td> июнь </td>
        <td> 1500 долларов </td>
        <td> 100 долларов </td> <! - Ячейки 100 и 50 долларов будут под ячейкой Утилиты ->
        <td> 50 </td>
        <td> 350 долларов </td>
        <td> 100 </td>
        <td> 50 </td>
     </tr>
     <tr>
        <td> июль </td>
        <td> 1500 долларов </td>
        <td> 100 </td>
        <td> 50 </td>
        <td> 350 долларов </td>
        <td> 100 </td>
        <td> 50 </td>
     </tr>
     <tr>
        <td> август </td>
        <td> 1500 долларов </td>
        <td> 100 </td>
        <td> 50 </td>
        <td> 350 долларов </td>
        <td> 100 </td>
        <td> 50 </td>
     </tr>
  </table> </code> </pre><p> Вот как выглядит финальный стол! </p>
  </p>
  <h4> </h4>
  <p><strong> Таблицы использовались для макетов сайта </strong> </h4>
  <p> Немного исторического контекста о таблицах.Помимо данных, веб-разработчики также использовали таблицы для макета веб-дизайна. </p>
  <p> Так, например, если у вас есть дизайн веб-сайта с заголовком, основным содержимым и нижним колонтитулом, вы можете создать одну большую таблицу с тремя строками. Затем вы можете поместить все свое содержимое в эти ячейки таблицы. Ячейки таблицы могут содержать любой HTML-код — изображения, ссылки, текст и т. Д. </p>
  <p> Когда-то это было очень удобно. В настоящее время столы используются нечасто. Единственное распространенное исключение, которое я могу придумать, — это электронные письма в формате HTML, потому что некоторые старые почтовые системы не могут использовать много CSS, поэтому кодирование, подобное тому, что было в 1999 году, к сожалению, является единственным вариантом.</p>
  <h3><span class="ez-toc-section" id="%D0%97%D0%B0%D0%BA%D1%80%D1%8B%D1%82%D0%B8%D0%B5"></span> Закрытие <span class="ez-toc-section-end"></span></h3>
  <p> Вот и все — вы создали базовый веб-сайт на HTML. </p>
  <p> Если вы заинтересованы в изучении HTML и веб-разработки, я бы порекомендовал для начала использовать некоторые из следующих ресурсов: </p>
  <ul>
  <li> freeCodeCamp — бесплатный онлайн-курс для начинающих по программированию, организованный некоммерческой организацией. Многие выпускники устроились на постоянную работу в области веб-разработки. </li>
  <li> Учебный курс для веб-разработчиков, созданный Кольтом Стилом — полный учебный онлайн-курс для веб-разработчиков на Udemy, проводимый бывшим инструктором учебного курса по программированию.</li>
  </ul>
  <p> Если вам понравился этот пост, пожалуйста, оставьте комментарий ниже или поделитесь им с друзьями! </p>
  <h2><span class="ez-toc-section" id="%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B_%D1%81_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%D0%BC_HTML_%D0%B8_CSS"></span> Дизайн веб-страницы с использованием HTML и CSS <span class="ez-toc-section-end"></span></h2>
  <p> <code> <! DOCTYPE html> </code> </p>
  </p>
  <p> <code> <</code> <code> html </code> <code>> </code> </p>
  </p>
  <p> <code> <</code> <code> </code> <code> </code> <code> голова </code> <code> </code> <code> title </code> <code>> Простой шаблон веб-разработки </ </code> <code> title </code> <code>> </code> </p>
  </p>
  <p> <code> </code> <code> <</code> <code> style </code> <code>> </code> </p>
  <p> <code> <code> </code> <code> * {</code> ; </code> </p>
  <p> <code> </code> <code> обивка: 0; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>.панель навигации {</code> </p>
  <p> <code> </code> <code> дисплей: гибкий; </code> </p>
  <p> <code> </code> <code> align-items: center; </code> </p>
  <p> <code> </code> <code> justify-content: center; </code> </p>
  <p> <code> </code> <code> позиция: липкая; </code> </p>
  <p> <code> </code> <code> верх: 0; </code> </p>
  <p> <code> </code> <code> курсор: указатель; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>.фон {</code> </p>
  <p> <code> </code> <code> фон: черный; </code> </p>
  <p> <code> </code> <code> фоновый режим наложения: затемнение; </code> </p>
  <p> <code> </code> <code> размер фона: обложка; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code> .nav-list {</code> </p>
  <p> <code> </code> <code> ширина: 70%; </code> </p>
  <p> <code> </code> <code> дисплей: гибкий; </code> </p>
  <p> <code> </code> <code> align-items: center; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>.логотип {</code> </p>
  <p> <code> </code> <code> дисплей: гибкий; </code> </p>
  <p> <code> </code> <code> justify-content: center; </code> </p>
  <p> <code> </code> <code> align-items: center; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>. Логотип img {</code> </p>
  <p> <code> </code> <code> ширина: 180 пикселей; </code> </p>
  <p> <code> </code> <code> радиус границы: 50 пикселей; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>.nav-list li {</code> </p>
  <p> <code> </code> <code> стиль списка: нет; </code> </p>
  <p> <code> </code> <code> отступ: 26 пикселей 30 пикселей; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code> .nav-list li a {</code> </p>
  <p> <code> </code> <code> текстовое оформление: нет; </code> </p>
  <p> <code> </code> <code> цвет: белый; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>.nav-list li a: hover {</code> </p>
  <p> <code> </code> <code> цвет: серый; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code> .rightnav {</code> </p>
  <p> <code> </code> <code> ширина: 30%; </code> </p>
  <p> <code> </code> <code> выравнивание текста: по правому краю; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code> #search {</code> </p>
  <p> <code> </code> <code> отступ: 5 пикселей; </code> </p>
  <p> <code> </code> <code> font-size: 17px; </code> </p>
  <p> <code> </code> <code> граница: сплошной серый цвет 2 пикселя; </code> </p>
  <p> <code> </code> <code> радиус границы: 9 пикселей; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>.первая часть {</code> </p>
  <p> <code> </code> <code> цвет фона: зеленый; </code> </p>
  <p> <code> </code> <code> высота: 400 пикселей; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code> .второй раздел {</code> </p>
  <p> <code> </code> <code> цвет фона: синий; </code> </p>
  <p> <code> </code> <code> высота: 400 пикселей; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>.коробка-основная {</code> </p>
  <p> <code> </code> <code> дисплей: гибкий; </code> </p>
  <p> <code> </code> <code> justify-content: center; </code> </p>
  <p> <code> </code> <code> align-items: center; </code> </p>
  <p> <code> </code> <code> цвет: черный; </code> </p>
  <p> <code> </code> <code> максимальная ширина: 80%; </code> </p>
  <p> <code> </code> <code> маржа: авто; </code> </p>
  <p> <code> </code> <code> высота: 80%; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>.первая половина {</code> </p>
  <p> <code> </code> <code> ширина: 100%; </code> </p>
  <p> <code> </code> <code> дисплей: гибкий; </code> </p>
  <p> <code> </code> <code> flex-direction: столбец; </code> </p>
  <p> <code> </code> <code> justify-content: center; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>. Вторая половина {</code> </p>
  <p> <code> </code> <code> ширина: 30%; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>.вторая половина img {</code> </p>
  <p> <code> </code> <code> ширина: 70%; </code> </p>
  <p> <code> </code> <code> граница: сплошной белый цвет 4 пикселя; </code> </p>
  <p> <code> </code> <code> радиус границы: 150 пикселей; </code> </p>
  <p> <code> </code> <code> дисплей: блок; </code> </p>
  <p> <code> </code> <code> маржа: авто; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code> .text-big {</code> </p>
  <p> <code> </code> <code> font-family: 'Piazzolla', serif; </code> </p>
  <p> <code> </code> <code> font-weight: жирный; </code> </p>
  <p> <code> </code> <code> размер шрифта: 35 пикселей; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>.мелкий текст {</code> </p>
  <p> <code> </code> <code> размер шрифта: 18 пикселей; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code> .btn {</code> </p>
  <p> <code> </code> <code> отступ: 8px 20px; </code> </p>
  <p> <code> </code> <code> поле: 7px 0; </code> </p>
  <p> <code> </code> <code> граница: 2 пикселя сплошной белый; </code> </p>
  <p> <code> </code> <code> радиус границы: 8 пикселей; </code> </p>
  <p> <code> </code> <code> фон: нет; </code> </p>
  <p> <code> </code> <code> цвет: белый; </code> </p>
  <p> <code> </code> <code> курсор: указатель; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>.btn-sm {</code> </p>
  <p> <code> </code> <code> отступ: 6 пикселей 10 пикселей; </code> </p>
  <p> <code> </code> <code> vertical-align: middle; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>. Раздел {</code> </p>
  <p> <code> </code> <code> высота: 400 пикселей; </code> </p>
  <p> <code> </code> <code> дисплей: гибкий; </code> </p>
  <p> <code> </code> <code> align-items: center; </code> </p>
  <p> <code> </code> <code> justify-content: center; </code> </p>
  <p> <code> </code> <code> максимальная ширина: 90%; </code> </p>
  <p> <code> </code> <code> маржа: авто; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>.section-Left {</code> </p>
  <p> <code> </code> <code> flex-direction: ряд-реверс; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code> .paras {</code> </p>
  <p> <code> </code> <code> отступ: 0px 65px; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code> .thumbnail img {</code> </p>
  <p> <code> </code> <code> width: 250px; </code> </p>
  <p> <code> </code> <code> граница: сплошной черный цвет 2 пикселя; </code> </p>
  <p> <code> </code> <code> радиус границы: 26 пикселей; </code> </p>
  <p> <code> </code> <code> верхнее поле: 19 пикселей; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code>.по центру {</code> </p>
  <p> <code> </code> <code> выравнивание текста: по центру; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  </p>
  <p> <code> </code> <code> .text-footer {</code> </p>
  <p> <code> </code> <code> text-align: center; </code> </p>
  <p> <code> </code> <code> отступ: 30 пикселей 0; </code> </p>
  <p> <code> </code> <code> font-family: 'Ubuntu', без засечек; </code> </p>
  <p> <code> </code> <code> дисплей: гибкий; </code> </p>
  <p> <code> </code> <code> justify-content: center; </code> </p>
  <p> <code> </code> <code> цвет: белый; </code> </p>
  <p> <code> </code> <code>} </code> </p>
  <p> <code> </code> <code> </ </code> <code> стиль </code> <code>> </code> </p>
  <p> <code> </ </code> <code> головка </code> <code>> </code> </p>
  </h2>
  <p>22 </p>
  <p> <code> </code> </p>
  </h2>
  <p>22 </p>
  <p> корпус </code> <code> <</code> <code> nav </code> <code> class </code> <code> = </code> <code> «фон панели навигации» </code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> ul </code> <code> class </code> <code> = </code> <code> "</code> <code>" </code> <code> "</code> <code>" <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code> "логотип" </code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> img </code> <code> src </code> <code> = </code> <code> "логотипpng "</code> <code>> </code> </p>
  <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> li </code> <code>> <</code> <code> a </code> <code> <code> 9012" </code> <code> <code> 9012 "</code> <code> 9012" > Веб-технологии </ </code> <code> a </code> <code>> </ </code> <code> li </code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> li </code> <code>> <</code> <code> a </code> <code> href </code> <code> = </code> > Программирование на языке C </ </code> <code> a </code> <code>> </ </code> <code> li </code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> li </code> <code>> <</code> <code> a </code> <code> href </code> <code> = </code> <code> > Курсы </ </code> <code> a </code> <code>> </ </code> <code> li </code> <code>> </code> </p>
  <p> <code> </code> <code> </ </code> <code> ul </code> <code>> </code> </p>
  </p>
  <p> <code> </code> 90 134 <</code> <code> div </code> <code> класс </code> <code> = </code> <code> "rightNav" </code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> вход </code> <code> тип </code> <code> = </code> <code> "текст </code> <code>" текст </code> <code> поиск "</code> <code> id </code> <code> = </code> <code>" search "</code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> кнопка </code> <code> class </code> <code> = </code> <code>" btn btn-sm "<code data-lang="html"> </code> <code> кнопка <Search > </code> </p>
  <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p>
  <p> <code> </code> <code> </ </code> <code> nav </code> <code>> </code> </p>
  </p>
  <p> <code> </code> <code> <code> класс <code> </code> <code> <раздел <code> <code> firstsection "</code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> div </code> <code> class </code> <code> = </code> <code>" box-main "9012 5 <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> div </code> <code> класс </code> <code> = </code> <code> "firstHalf" </code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> h2 </code> <code> большой текст </code> <code> </code> </code> </code> <code> большой </code> <code> </code> <code> </code> <code> id </code> <code> = </code> <code> "web" </code> <code>> Веб-технологии </ </code> <code> h2 </code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> p </code> <code> class </code> <code> = </code> <code>> </code> </p>
  <p> <code> </code> <code> HTML означает язык разметки гипертекста.</code> </p>
  <p> <code> </code> <code> Он используется для разработки веб-страниц с использованием языка разметки </code> </p>
  <p> <code> </code> <code>. HTML - это комбинация гипертекста </code> </p>
  <p> <code> </code> <code> и языка разметки. Гипертекст определяет ссылку </code> </p>
  <p> <code> </code> <code> между веб-страницами. Язык разметки </code> </p>
  <p> <code> </code> <code> используется для определения текстового документа в теге </code> </p>
  <p> <code> </code> <code>, который определяет структуру веб-страниц.</code> </p>
  <p> <code> </code> <code> HTML - это язык разметки, который используется браузером </code> </p>
  <p> <code> </code> <code> для управления текстом, изображениями и другим содержимым </code> </p>
  <p> <code> </code> <code> для отображения его в требуемом формате. </code> </p>
  <p> <code> </code> <code> </ </code> <code> p </code> <code>> </code> </p>
  </p>
  <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p>
  <p> <code> </code>125 <code> <code> </p>
  <p> <code> </code>125 <code> </p>
  <p> <code> </code>125 <code> </p>
  <p> </ </code> <code> раздел </code> <code>> </code> </p>
  </p>
  <p> <code> </code> <code> <</code> <code> раздел </code> <code> класс </code> <code> = </code> <code> «второй раздел» </code> <code>> </code> </p>
  <p> <code> </code> </code> </p>
  <p> <code> </code> </code> </code> <code> "основная коробка" </code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> div </code> <code> класс </code> <code> = </code> <code> "firstHalf" </code> <code>> </code> </p>
  <p> <code> </code> <code> <code> <code> </code> <code> </code> <code> "большой текст" </code> <code> id </code> <code> = </code> <code> "программа" </code> <code>> </code> </p>
  <p> <code> </code> <code> Программирование C </code> </p>
  <p> <code> </code> <code> </ </code> <code> h2 </code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> p125 <code> <code> <code> <code> <code> <code> <code> <code> <code> <code> <code> <code> <code> <code> > </code> </p>
  <p> <code> </code> <code> C - это процедурный язык программирования.Он </code> </p>
  <p> <code> </code> <code> был первоначально разработан Деннисом Ричи </code> </p>
  <p> <code> </code> <code> как язык системного программирования для написания операционной системы </code> </p>
  <p> <code> </code> <code>. Основные особенности языка C </code> </p>
  <p> <code> </code> <code> включают низкоуровневый доступ к памяти, </code> </p>
  <p> <code> </code> <code> простой набор ключевых слов и чистый стиль, </code> </p>
  <p> <code> </code> <code> эти функции делают язык C подходящим для </code> </p>
  <p> <code> </code> <code> системное программирование как операционная система или разработка компилятора </code> </p>
  <p> <code> </code> <code>.</code> </p>
  <p> <code> </code> <code> </ </code> <code> p </code> <code>> </code> </p>
  </p>
  <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p>
  <p> <code> </code>125 <code> </p>
  <p> <code> </code>125 <code> </p>
  <p> <code> </code>125 <code> </p>
  <p> </ </code> <code> раздел </code> <code>> </code> </p>
  </p>
  <p> <code> </code> <code> <</code> <code> раздел </code> <code> класс </code> <code> = </code> <code> «раздел» </code> <code>> </code> </p>
  <p> <code> </code> <code> </code> </p>
  <p> <code> </code> <code> <code> </code> <code> </code> <code> "paras" </code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> h2 </code> <code> class </code> <code> = </code> <code> "sectionTag text-big" </code> <code>> Java </ </code> </p>
  <h2><span class="ez-toc-section" id="3_h2"></span>3 h2 <span class="ez-toc-section-end"></span></h2>
  </p>
  <p> </code> </p>
  <p> </code> <code> <</code> <code> p </code> <code> class </code> <code> = </code> <code> "sectionSubTag tex t-small "</code> <code>> </code> </p>
  <p> <code> </code> <code> Java уже много лет является одним из самых популярных языков программирования </code> </p>
  <p> <code> </code> <code>.</code> </p>
  <p> <code> </code> <code> Java является объектно-ориентированной. Однако это </code> </p>
  <p> <code> </code> <code> не считается чисто объектно-ориентированным </code> </p>
  <p> <code> </code> <code>, поскольку он обеспечивает поддержку примитивных типов данных </code> </p>
  <p> <code> </code> <code> (например, int, char и т. Д.). </code> </p>
  <p> <code> </code> Коды Java сначала компилируются в байтовый код </code> </p>
  <p> <code> </code> <code> (машинно-независимый код).Затем </code> </p>
  <p> <code> </code> <code> байтовый код выполняется на Java Virtual </code> </p>
  <p> <code> </code> <code> Machine (JVM) независимо от базовой архитектуры </code> </p>
  <p> <code> </code> <code>. </code> </p>
  <p> <code> </code> <code> </ </code> <code> p </code> <code>> </code> </p>
  </p>
  <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p>
  </p>
  <p> <code> <code> </code> </code> </code> <code> </code> </code> </code> <code> </code> </code> "thumbnail" </code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> img </code> <code> src </code> <code> = </code> <code> "img.png "</code> <code> alt </code> <code> = </code> <code>" изображение ноутбука "</code> <code>> </code> </p>
  <p> <code> </code> <code> </ </code> <code> div </code> <code>> </code> </p>
  <p> <code> </code> <code> </ </code> <code>000 </p>
  </p>
  <p> <code> </code> <code> <</code> <code> нижний колонтитул </code> <code> класс </code> <code> = </code> <code> «фон» </code> <code>> </code> </p>
  <p> <code> </code> <code> <</code> <code> p </code> <code> класс </code> <code> = </code> <code> «текст </code> <code>» <code> </code> <code> Авторские права © - Все права защищены </code> </p>
  <p> <code> </code> <code> </ </code> <code> p </code> <code>> </code> </p>
  </p>
  <p> <code> </code> <code> </ </code> <code> футер </code> <code> 90/</code> </code> <code> 90/90 <code>> </code> </p>
  </p>
  <p> <code> </ </code> <code> html </code> <code>> </code> </p>
  <h2><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA_%D0%BA%D0%BE%D0%B4%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82_%D0%B5_%D1%81_%D0%BD%D1%83%D0%BB%D1%8F_5_%D0%BF%D1%80%D0%BE%D1%81%D1%82%D1%8B%D1%85_%D1%88%D0%B0%D0%B3%D0%BE%D0%B2"></span> Как кодировать веб-сайт е с нуля! 5 простых шагов <span class="ez-toc-section-end"></span></h2>
  <h3><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA%D0%B8%D0%B5_%D1%81%D1%83%D1%89%D0%B5%D1%81%D1%82%D0%B2%D1%83%D1%8E%D1%82_%D1%82%D0%B8%D0%BF%D1%8B_%D1%8F%D0%B7%D1%8B%D0%BA%D0%BE%D0%B2_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F"></span> Какие существуют типы языков программирования? <span class="ez-toc-section-end"></span></h3>
  <p> Языки программирования для веб-сайтов делятся на две основные категории, а именно: интерфейс и серверную часть.Языками программирования веб-страницы для Frontend являются HTML, CSS и JavaScript. </p>
  <h4><span class="ez-toc-section" id="%D0%AF%D0%B7%D1%8B%D0%BA%D0%B8_%D0%B2%D0%BD%D0%B5%D1%88%D0%BD%D0%B5%D0%B3%D0%BE_%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81%D0%B0_%D0%B2%D0%BA%D0%BB%D1%8E%D1%87%D0%B0%D1%8E%D1%82"></span> Языки внешнего интерфейса включают: <span class="ez-toc-section-end"></span></h4>
  <ul>
  <li> <strong> Язык разметки гипертекста (HTML) </strong> - этот язык используется для форматирования веб-страниц и организации элементов на веб-странице. Он состоит из открывающих и закрывающих тегов, каждый из которых имеет определенную задачу. Например, тег заголовка используется для записи заголовка веб-страницы в адресной строке. </li>
  <li> <strong> Каскадные таблицы стилей (CSS) </strong> - Как следует из названия, CSS используется для стилизации веб-страниц.Например, вы можете использовать CSS для определения шрифта веб-сайта, размера шрифта, цветов и т. Д. CSS можно записать в один файл и многократно использовать для множества элементов на веб-странице. </li>
  <li> <strong> JavaScript (JS) </strong> - JavaScript используется для повышения интерактивности веб-сайтов. Допустим, вы создали кнопку и хотите, чтобы при нажатии на нее отображалось сообщение. Вы можете использовать JavaScript для написания этой функции. </li>
  </ul>
  <h4><span class="ez-toc-section" id="%D0%AF%D0%B7%D1%8B%D0%BA%D0%B8_%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%BD%D0%BE%D0%B9_%D1%87%D0%B0%D1%81%D1%82%D0%B8"></span> Языки серверной части <span class="ez-toc-section-end"></span></h4>
  <p> Серверную часть можно закодировать на любом языке, поддерживающем веб-разработку.Вы можете использовать JavaScript на стороне сервера, используя NodeJS, Python, Ruby или PHP. Одной из наиболее часто используемых программ для разработки веб-сайтов является PHP. В этом руководстве мы сосредоточимся на PHP как языке сценариев. </p>
  <p> <strong> PHP: </strong> </p>
  <p> PHP - это препроцессор гипертекста. В отличие от интерфейсных технологий, которые выполняются в веб-браузере, PHP выполняется на веб-сервере. Он обычно используется для выполнения таких действий, как регистрация пользователей, аутентификация пользователей, отправка электронных писем и т. Д. </p>
  <p> В этом руководстве вы узнаете: </p>
  <h3><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA_%D0%BA%D0%BE%D0%B4%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82_-_%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B5_%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE_%D0%B4%D0%BB%D1%8F_%D0%BD%D0%B0%D1%87%D0%B8%D0%BD%D0%B0%D1%8E%D1%89%D0%B8%D1%85"></span> Как кодировать веб-сайт - полное руководство для начинающих <span class="ez-toc-section-end"></span></h3>
  <p> В этом всеобъемлющем руководстве мы научим вы, как создать веб-сайт с нуля и написать весь код самостоятельно, или вы можете использовать существующую платформу, такую ​​как WordPress или Joomla и т. д.</p>
  <p> В этом полном руководстве мы рассмотрим следующие темы. </p>
  <ul>
  <li> Создание с нуля Вс. с использованием системы управления контентом </li>
  <li> Создание веб-сайта с нуля с использованием фреймворка (PHP MVC Framework) </li>
  <li> Создание веб-сайта с использованием системы управления контентом (WordPress) </li>
  </ul>
  <h3><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%B0%D1%8F_%D0%BA%D0%BE%D0%BD%D1%86%D0%B5%D0%BF%D1%86%D0%B8%D1%8F_HTML"></span> Основная концепция HTML <span class="ez-toc-section-end"></span></h3>
  <p> Документ HTML - это текстовый файл который содержит теги и элементы HTML и обычно заканчивается расширением файла .html. </p>
  <p> HTML также может быть встроен в файлы с расширениями других языков сценариев, например *.php, * .jsp или * .asp. </p>
  <p> Веб-браузеры анализируют HTML-документы для отображения веб-страниц. Вы можете просмотреть HTML-код, составляющий веб-страницу, в веб-браузере. </p>
  <p> Вот шаги, которые помогут вам создать веб-сайт: </p>
  <p> <strong> Шаг 1) </strong> Щелкните правой кнопкой мыши на веб-странице, чтобы отобразить всплывающее меню. </p>
  <p> <strong> Шаг 2) </strong> Выберите Просмотр источника страницы. </p>
  <p> <strong> Шаг 3) </strong> HTML-код будет отображаться в виде обычного текста, и вы сможете увидеть HTML-теги и элементы, составляющие страницу.</p>
  <p> Вы также можете увидеть некоторые CSS и JavaScript, встроенные или включенные как отдельные внешние файлы. </p>
  <p> Функция веб-браузера заключается в переводе HTML-документа в удобочитаемый формат. Браузер также обрабатывает JavaScript, включенный в веб-страницу. </p>
  <h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BD%D1%8F%D1%82%D1%8C_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D1%83_HTML-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0"></span> Понять структуру HTML-документа. <span class="ez-toc-section-end"></span></h3>
  <p> Предположим, вы уже создали текстовый документ раньше. В этом случае вам будет довольно легко понять структуру HTML-документа.В текстовом документе у вас будет заголовок документа, интерактивное оглавление, разделы содержимого, отформатированные по-разному, и нижний колонтитул. Структура HTML-документа более или менее аналогична текстовому документу, который мы только что описали. </p>
  <p> Все документы HTML заключаются в тег HTML. В теге HTML у вас будут другие теги, такие как голова и тело. Тег заголовка содержит другие теги, например заголовок для отображения заголовка страницы. Он также включает ссылки на внешние файлы для стилей CSS, JavaScript и метаданных.Тег body содержит элементы, составляющие веб-страницу. Элементами внутри тега body могут быть div, таблицы, списки и т. Д. </p><pre>
  <! doctype html>
  <html lang = "ru">
  <head>
      <meta charset = "utf-8">
      <title> Как создать сайт для начинающих </title>
      <meta name = "description" content = "Моя первая веб-страница, созданная с использованием HTML, CSS, JavaScript и PHP">
      <meta name = "author" content = "Guru99">
      
  </head>
  <body>
      <h4><span class="ez-toc-section" id="%D0%94%D0%BE%D0%B1%D1%80%D0%BE_%D0%BF%D0%BE%D0%B6%D0%B0%D0%BB%D0%BE%D0%B2%D0%B0%D1%82%D1%8C_%D0%BD%D0%B0_%D0%BC%D0%BE%D1%8E_%D0%BF%D0%B5%D1%80%D0%B2%D1%83%D1%8E_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%83"></span> Добро пожаловать на мою первую веб-страницу <span class="ez-toc-section-end"></span></h4>
  </body>
  </html>
   </pre><p> <strong> Объяснение: </strong> </p>
  <ul>
  <li> <! Doctype html> определяет тип документа, которым является HTML. </li>
  <li> <html lang = "en">… </html> определяет тег HTML с атрибутом языка, который указывает язык веб-сайта. </li>
  <li> В этом простом примере язык веб-сайта - английский. Внутри открытого и закрывающего HTML-тега у нас будут такие теги, как head и body, которые, в свою очередь, включают другие теги и элементы.</li>
  <li> <head>… </head> определяет тег заголовка, который содержит в себе метаданные. </li>
  <li> <body>… </body> определяет тело, которое содержит содержимое веб-сайта. </li>
  </ul>
  <h4><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B7%D0%BD%D0%B0%D0%BA%D0%BE%D0%BC%D1%8C%D1%82%D0%B5%D1%81%D1%8C_%D1%81_%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%B0%D0%BC%D0%B8_CSS"></span> Познакомьтесь с селекторами CSS <span class="ez-toc-section-end"></span></h4>
  <p> Селекторы CSS выбирают элементы на веб-странице, которые вы хотите отформатировать на основе определенных правил CSS. </p>
  <p> Селекторы CSS делятся на пять основных категорий, а именно: </p>
  <ul>
  <li> <strong> Простые селекторы: </strong> Эти селекторы используются для выбора элементов на основе таких атрибутов, как идентификатор, имя или класс.</li>
  <li> <strong> CSS Combinator </strong>: Как следует из названия, этот тип селектора выбирает элемент на основе комбинации связанных элементов. Например, вы можете использовать этот метод для выбора только тех элементов абзаца, которые находятся внутри элементов div. </li>
  <li> <strong> Псевдоклассы CSS </strong>: Эти селекторы работают в зависимости от состояния элемента. Например, наведите указатель мыши на гиперссылку. Вы можете изменить цвет фона, чтобы показать пользователю, куда он в данный момент указывает. Поэтому, когда пользователь отводит указатель мыши от гиперссылки, форматирование автоматически удаляется.</li>
  <li> <strong> Псевдоэлементы CSS </strong>: этот селектор используется для выбора определенных частей элемента. Например, вы можете использовать селектор псевдоэлементов, чтобы увеличить первую букву первого слова в каждом абзаце и оставить остальные буквы нетронутыми. </li>
  <li> <strong> Атрибут CSS </strong>: этот селектор работает на основе атрибутов, примененных к элементам, или определенных значений атрибутов.
  <p> Например, вы можете использовать селектор атрибутов CSS для форматирования всех кнопок HTML на зеленый цвет фона, который содержит значение атрибута «submit."</p>
  <p> Это применит зеленый цвет фона к кнопкам, для которых задано значение атрибута для отправки. </p>
  </li>
  </ul>
  <h4><span class="ez-toc-section" id="%D0%9E%D0%B1%D1%8A%D0%B5%D0%B4%D0%B8%D0%BD%D0%B8%D1%82%D0%B5_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%83_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9_CSS"></span> Объедините таблицу стилей CSS <span class="ez-toc-section-end"></span></h4>
  <p> В этом разделе будет создан простой документ стиля CSS, который выполняет простое оформление путем определения следующих </p>
  <ul>
  <li> <strong> Центрировать текст на основе центра класса: </strong> Это правило центрирует текст и меняет цвет текста на красный.</li>
  <li> <strong> Форматирование текста на основе идентификатора элемента: </strong> Мы создадим правило стиля для идентификатора title, который изменит цвет на оранжевый, сделает шрифт жирным и изменит регистр текста на верхний регистр.</li>
  <li> <strong> Форматирование текста на основе номера элемента заголовка 2: </strong> Это правило устанавливает синий цвет текста заголовка и устанавливает размер шрифта 60 пикселей. </li>
  </ul>
  <p> Следующий код определяет документ CSS с указанными выше правилами. </p><pre>
  .center {
      выравнивание текста: центр;
      красный цвет;
  }
  #заглавие {
      оранжевый цвет;
      преобразование текста: прописные буквы;
      font-weight: жирный;
  }
  h3 {
      размер шрифта: 60 ​​пикселей;
      цвет синий;
  }
   </pre><p> <strong> Объясняет: </strong> </p>
  <ul>
  <li>.center {…} - определяет центр правил класса, который выравнивает текст по центру и изменяет цвет шрифта. </li>
  <li> #title {…} - определяет правило заголовка, которое изменяет цвет шрифта, переводит все буквы в верхний регистр и изменяет начертание шрифта на полужирный. </li>
  <li> h3 {…} - определяет правила, которые будут применяться ко всем элементам h4. Размер шрифта будет установлен на 60 пикселей, а цвет шрифта будет обновлен до синего. </li>
  </ul>
  <h4><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%B8%D1%82%D0%B5_%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%82%D0%B5_Bootstrap"></span> Загрузите / установите Bootstrap <span class="ez-toc-section-end"></span></h4>
  <p> Bootstrap - это CSS-фреймворк, который поставляется с большим количеством стилей, которые вы можете сразу начать использовать.Он содержит стили для макетов и элементов форматирования. </p>
  <p> Вы можете написать свои стили CSS, которые изменяют настройки по умолчанию для начальной загрузки CSS. Для этого вы можете либо загрузить Bootstrap прямо с официального сайта, либо включить его в свой HTML-документ из сети доставки контента (CDN). </p>
  <p> В качестве альтернативы вы можете использовать инструмент управления пакетами, такой как Node Package Manager (NPM), для установки Bootstrap, но это для опытных веб-разработчиков. Чтобы загрузить Bootstrap, вы можете щелкнуть эту ссылку здесь и использовать ее в своем проекте, как и любой другой файл CSS и JavaScript.</p>
  <p> Мы узнаем, как его использовать, в разделе ниже, когда мы рассмотрим создание вашей первой веб-страницы. </p>
  <h3><span class="ez-toc-section" id="%D0%A0%D0%BE%D0%BB%D1%8C_HTML_%D0%B8_CSS"></span> Роль HTML и CSS <span class="ez-toc-section-end"></span></h3>
  <p> Роль HTML заключается в обеспечении структуры веб-страниц. Веб-браузеры используют эту структуру для отображения презентабельного контента для пользователей. Во-вторых, пауки поисковых систем используют структуру HTML для навигации по веб-странице и ее индексации. </p>
  <p> Роль CSS состоит в том, чтобы обеспечить стиль для контента, чтобы он был визуально привлекательным для пользователей. </p>
  <h3><span class="ez-toc-section" id="%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D1%81%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F_%D0%BE%D0%B1_%D0%BE%D0%B1%D1%89%D0%B8%D1%85_%D1%82%D0%B5%D1%80%D0%BC%D0%B8%D0%BD%D0%B0%D1%85_HTML"></span> Общие сведения об общих терминах HTML <span class="ez-toc-section-end"></span></h3>
  <p> Давайте теперь рассмотрим некоторые общие термины HTML, с которыми вы должны быть знакомы как веб-разработчик.</p>
  <table>
  <thead>
  <tr>
  <th> <strong> S / N </strong> </th>
  <th> <strong> Срок </strong> </th>
  <th> <strong> Описание </strong> </th>
  </tr>
  </thead>
  <tr>
  <td> 1 </td>
  <td> Элемент </td>
  <td> Элементы - это ключевые слова, которые используются для определения конкретных структур и содержимого веб-страницы. Например, элемент h4 используется для определения структуры заголовка. Другие примеры элементов включают абзацы (p), привязки (a), контейнеры (div) и т. Д. </td>
  </tr>
  <tr>
  <td> 2 </td>
  <td> Tag </td>
  <td> Теги - это метки, которые отмечают начало и конец элемента.Теги включают ключевые слова элемента в угловых скобках. Например, </p>
  <p> Paragraph </p>
  <p> - это тег абзаца, где </p>
  <p> - это открывающий тег, а </p>
  <p> - закрывающий тег. </td>
  </tr>
  <tr>
  <td> 3 </td>
  <td> Атрибут </td>
  <td> Атрибуты - это свойства элементов, которые предоставляют дополнительную информацию. Например, мы можем использовать атрибут id, чтобы дать уникальное имя элементу. Идентификатор можно использовать в CSS или JavaScript. </td>
  </tr>
  <tr>
  <td> 4 </td>
  <td> Гиперссылка </td>
  <td> Гиперссылка - это интерактивная ссылка, которая открывает новую веб-страницу.Вы можете создать его, используя элемент привязки. </td>
  </tr>
  <tr>
  <td> 5 </td>
  <td> Head </td>
  <td> Тег head содержит информацию, скрытую от пользователя, но полезную для веб-браузера и поисковых систем. </td>
  </tr>
  <tr>
  <td> 6 </td>
  <td> Body </td>
  <td> Тег body содержит информацию, которая видна пользователю в веб-браузере. </td>
  </tr>
  <tr>
  <td> 7 </td>
  <td> Нижний колонтитул </td>
  <td> Тег нижнего колонтитула содержит информацию, которая отображается в разделе нижнего колонтитула веб-страницы.</td>
  </tr>
  <tr>
  <td> 8 </td>
  <td> Комментарий </td>
  <td> Комментарии используются для документирования и объяснения HTML-кода, и они игнорируются браузером при синтаксическом анализе HTML-документа. </td>
  </tr>
  <tr>
  <td> 9 </td>
  <td> Div </td>
  <td> Div - это элемент контейнера, который используется для создания макетов. </td>
  </tr>
  <tr>
  <td> 10 </td>
  <td> Заголовок </td>
  <td> Тег заголовка используется для создания заголовков HTML. </td>
  </tr>
  <tr>
  <td> 11 </td>
  <td> Разрыв строки </td>
  <td> Этот элемент используется для создания нового разрыва строки.</td>
  </tr>
  <tr>
  <td> 12 </td>
  <td> Ссылки </td>
  <td> Ссылки используются для включения других файлов, таких как внешние файлы CSS, в документы HTML. </td>
  </tr>
  <tr>
  <td> 13 </td>
  <td> Метаданные </td>
  <td> Тег метаданных предоставляет дополнительную информацию о веб-странице, которая наиболее полезна для роботов поисковых систем. </td>
  </tr>
  <tr>
  <td> 14 </td>
  <td> Список </td>
  <td> Тег списка используется для создания списка. Список может быть как упорядоченным, так и неупорядоченным. </td>
  </tr>
  <tr>
  <td> 15 </td>
  <td> Абзац </td>
  <td> Элемент абзаца используется для отображения текстовых данных в формате абзаца </td>
  </tr>
  <tr>
  <td> 16 </td>
  <td> Таблица </td>
  <td> Этот элемент используется для создания таблицы </td>
  </tr>
  </tr>
  <tr>
  <td> 17 </td>
  <td> Заголовок </td>
  <p> Как и предполагает заголовок, он используется для установки заголовка веб-страницы.</td>
  </tr>
  <tr>
  <td> 18 </td>
  <td> Форма </td>
  <td> Тег формы используется для создания форм, которые мы можем использовать для получения данных от пользователей. </td>
  </tr>
  <tr>
  <td> 19 </td>
  <td> Скрипт </td>
  <td> Тег скрипта связан с внешним кодом JavaScript или встроенным кодом JavaScript в документе HTML. </td>
  </tr>
  <tr>
  <td> 20 </td>
  <td> AJAX </td>
  <td> AJAX означает асинхронный JavaScript и XML. Это технология, используемая для обновления определенных частей веб-страницы без перезагрузки всей страницы.</td>
  </tr>
  </table>
  <h3><span class="ez-toc-section" id="%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D1%81%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F_%D0%BE%D0%B1_%D0%BE%D0%B1%D1%89%D0%B8%D1%85_%D1%82%D0%B5%D1%80%D0%BC%D0%B8%D0%BD%D0%B0%D1%85_CSS"></span> Общие сведения об общих терминах CSS <span class="ez-toc-section-end"></span></h3>
  <p> Ниже приведены некоторые общие термины CSS, с которыми вы должны быть знакомы. </p>
  <table>
  <thead>
  <tr>
  <th> <strong> S / N </strong> </th>
  <th> <strong> Срок </strong> </th>
  <th> <strong> Описание </strong> </th>
  </tr>
  </thead>
  <tr>
  <td> 1 </td>
  <td> Селектор </td>
  <td> Это относится к CSS, отвечающему за выбор элементов документа HTML, которые мы хотим отформатировать. </td>
  </tr>
  <tr>
  <td> 2 </td>
  <td> Свойства </td>
  <td> Свойства относятся к атрибуту элемента, для которого мы хотим установить значение.</td>
  </tr>
  <tr>
  <td> 3 </td>
  <td> Значения </td>
  <td> Как следует из названия, мы присваиваем значение свойству для стилизации. </td>
  </tr>
  <tr>
  <td> 4 </td>
  <td> Комментарий </td>
  <td> Комментарии используются для документирования и объяснения кода CSS </td>
  </tr>
  <tr>
  <td> 5 </td>
  <td> Набор правил </td>
  <td> Относится к полному разделу кода CSS, состоящему из селектора, скобки объявления, свойств, и соответствующие значения. </td>
  </tr>
  <tr>
  <td> 6 </td>
  <td> Объявление </td>
  <td> Это относится к одной строке кода в документе CSS. </td>
  </tr>
  <tr>
  <td> 7 </td>
  <td> Блок объявлений </td>
  <td> Это относится к разделу CSS, который определяет правила стилизации.Он заключен в фигурные скобки. </td>
  </tr>
  <tr>
  <td> 8 </td>
  <td> Ключевое слово </td>
  <td> Это зарезервированное слово, имеющее особое значение в CSS. Например, слово auto имеет особое значение, поэтому является ключевым словом </td>
  </tr>
  <tr>
  <td> 9 </td>
  <td> Селектор атрибутов </td>
  <td> Селектор выбирает элемент на основе значения атрибута. </td>
  </tr>
  <tr>
  <td> 10 </td>
  <td> Универсальный селектор </td>
  <td> Этот селектор используется для сопоставления любых элементов в данном контексте.Контекст обычно применяется к родительскому элементу, например к списку, так что все элементы в списке могут наследовать стиль от родительского </td>
  </tr>
  <tr>
  <td> 11 </td>
  <td> Селектор идентификатора </td>
  <td> Этот селектор делает выбор на основе идентификатора элемента. </td>
  </tr>
  <tr>
  <td> 12 </td>
  <td> Селектор класса </td>
  <td> Этот селектор делает выбор на основе значения или значений атрибута класса. </td>
  </tr>
  <tr>
  <td> 13 </td>
  <td> Селектор типа элемента </td>
  <td> Этот селектор основан на типе элемента, используемого в документе HTML.</td>
  </tr>
  </table>
  <h3><span class="ez-toc-section" id="%D0%A0%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80%D1%8B_HTML"></span> Редакторы HTML <span class="ez-toc-section-end"></span></h3>
  <p> Редактор HTML - это программа, которая используется для написания и редактирования кода HTML. Вы можете использовать любой текстовый редактор для написания HTML-кода, но HTML-редакторы имеют множество встроенных функций, которые упрощают написание кода. </p>
  <p> Давайте посмотрим на некоторые из популярных вариантов: </p>
  <h4><span class="ez-toc-section" id="Visual_Studio_Code"></span> Visual Studio Code: <span class="ez-toc-section-end"></span></h4>
  <p> Visual Studio Code - это кроссплатформенный редактор кода, разработанный Microsoft. Вы можете использовать Visual Studio Code для редактирования кода для многих языков, включая HTML, CSS, JavaScript и PHP.Visual Studio Code бесплатен и работает в Windows, Mac и Linux. </p>
  <h4><span class="ez-toc-section" id="Sublime_Text"></span> Sublime Text: <span class="ez-toc-section-end"></span></h4>
  <p> Sublime Text - это кроссплатформенный редактор кода, который также можно использовать для написания и редактирования кода HTML, CSS, JavaScript и PHP. Это коммерческий продукт, и вам необходимо его приобрести. Вы также можете использовать его бесплатно в незарегистрированном режиме. </p>
  <h4><span class="ez-toc-section" id="Notepad"></span> Notepad ++ <span class="ez-toc-section-end"></span></h4>
  <p> Notepad ++ - это легкий редактор кода, который также поддерживает множество языков. В отличие от Visual Studio Code и Sublime Text, Notepad ++ не является кроссплатформенным.Работает только на платформе Microsoft Windows. </p>
  <h4><span class="ez-toc-section" id="NetBeans_IDE"></span> NetBeans IDE <span class="ez-toc-section-end"></span></h4>
  <p> NetBeans - это интегрированная среда разработки (IDE), которая предлагает больше функций, чем обычный редактор кода. NetBeans является бесплатным и кроссплатформенным. </p>
  <h3><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B2%D0%B0%D1%88%D0%B5%D0%B9_%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B9_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span> Создание вашей первой веб-страницы <span class="ez-toc-section-end"></span></h3>
  <p> Давайте теперь создадим простую веб-страницу. Здесь мы создали простой HTML-документ и применили некоторые стили с помощью Bootstrap CSS. У нас также будет интерактивная кнопка, которая будет отображать простое сообщение с использованием JavaScript.</p>
  <p> Вот шаги, которые помогут вам научиться создавать веб-сайт с нуля: </p>
  <p> <strong> Шаг 1) </strong> Откройте ваш любимый текстовый редактор. </p>
  <p> Здесь мы открываем блокнот. </p>
  <p> <strong> Шаг 2) </strong> Создайте новый файл. </p>
  <p> с именем index.html. </p>
  <p> <strong> Шаг 3) </strong> Добавьте следующий код </p>
  <p> в файл index.html. </p><pre>
  <! doctype html>
  <html lang = "ru">
  
  <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
  
      
  
      <title> Моя первая веб-страница </title>
      <сценарий>
      function displayMessage () {
          document.getElementById ("сообщение"). innerHTML = "Привет из JavaScript!";
      }
      </script>
  </head>
  <body>
      <div>
          <h2><span class="ez-toc-section" id="%D0%9C%D0%BE%D0%B5_%D0%B2%D0%B5%D0%B1-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5"></span> Мое веб-приложение! <span class="ez-toc-section-end"></span></h2>
          <p> Ваше сообщение появится здесь.</p>
          <button type = "button"> Нажми меня! </button>
      </div>
  </body>
  
  </html>
   </pre><p> <strong> Объяснение: </strong> </p>
  <ul>
  <li> <! Doctype html> определяет тип документа. </li>
  <li> <head>… </head> определяет тег заголовка, который содержит метаданные, невидимые для пользователей. </li>
  <li> Заголовок также содержит тег сценария, содержащий код JavaScript, отображающий приветственное сообщение. </li>
  <li> Мы также загружаем Bootstrap CSS из сети CDN.</li>
  <li> <body>… </body> определяет содержимое нашей страницы: заголовок, абзац и кнопку, которая применяет некоторые стили из Bootstrap CSS. </li>
  </ul>
  <h3><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81_%D0%BD%D1%83%D0%BB%D1%8F_Vs_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D1%8B_%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%BE%D0%BC"></span> Создание с нуля Vs. использование системы управления контентом <span class="ez-toc-section-end"></span></h3>
  <p> Создание веб-сайта с нуля требует навыков и соответствующих знаний. Это также занимает больше времени и может стоить больших денег. </p>
  <p> С другой стороны, вам не нужно быть опытным программистом, чтобы создать свой веб-сайт с помощью системы управления контентом, такой как WordPress.Системы управления контентом похожи на такие приложения, как Microsoft Word. </p>
  <p> Используя систему управления контентом, вы сосредотачиваетесь на создании страниц, написании контента и публикации контента, точно так же, как создание словесных документов и их печать на принтере. </p>
  <p> В следующей таблице сравниваются два популярных метода создания веб-сайтов. </p>
  <table>
  <thead>
  <tr>
  <th> <strong> S / N </strong> </th>
  <th> <strong> Pro / Con </strong> </th>
  <th> <strong> Создание с нуля </strong> </th>
  <th> <strong> Использование системы управления контентом </strong> </th>
  </tr>
  </thead>
  <tr>
  <td> 1 </td>
  <td> Время </td>
  <td> Требуется много времени.</td>
  <td> Занимает мало времени. Его можно создать менее чем за 24 часа. </td>
  </tr>
  <tr>
  <td> 2 </td>
  <td> Стоимость </td>
  <td> Наем квалифицированного программиста может быть дорогостоящим. </td>
  <td> Вы можете сделать это сами или нанять кого-нибудь, кто сделает это за вас. </td>
  </tr>
  <tr>
  <td> 4 </td>
  <td> Навыки </td>
  <td> Требуется опытный и квалифицированный программист </td>
  <td> Требуется меньше навыков. Для этого вам нужно быть компьютерным грамотным. </td>
  </tr>
  <tr>
  <td> 5 </td>
  <td> Безопасность </td>
  <td> Хакерам нелегко найти слабые места в коде для использования.</td>
  <td> Хакеры могут легко найти слабые места в коде и использовать их. Регулярные обновления важны по соображениям безопасности. </td>
  </tr>
  <tr>
  <td> 6 </td>
  <td> Скорость </td>
  <td> Как правило, быстрее, потому что во время выполнения загружаются только необходимые функции. </td>
  <td> Обычно работает медленнее, потому что система управления контентом представляет собой универсальное решение, которое может загружать функции, которые вам не обязательно нужны. </td>
  </tr>
  <tr>
  <td> 7 </td>
  <td> Техническое обслуживание </td>
  <td> Простое обслуживание, потому что обновления выполняются только при необходимости. </td>
  <td> Требуется дополнительная работа, так как вам необходимо регулярно обновлять CMS из соображений безопасности.</td>
  </tr>
  <tr>
  <td> 8 </td>
  <td> Поисковая оптимизация (S.E.O) </td>
  <td> Требуется больше работы, и нужно напоминать программисту, потому что большинство программистов не являются экспертами по S.E.O.</td>
  <td> Большинство систем управления контентом поставляются с инструментами S.E.O из коробки. Дополнительные функции можно легко добавить с помощью плагинов. </td>
  </tr>
  </table>
  <h3><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B2%D0%BE%D1%80%D0%BA%D0%B0_PHP_MVC_Framework"></span> Использование фреймворка (PHP MVC Framework) <span class="ez-toc-section-end"></span></h3>
  <p> В этом разделе мы рассмотрим, как создать наш веб-сайт с нуля. Каждый веб-сайт должен использовать интерфейсные технологии, такие как язык разметки гипертекста (HTML), JavaScript и каскадные таблицы стилей (CSS).</p>
  <p> Бэкэнд имеет больше возможностей для языков программирования. Вы можете использовать PHP, Python, Ruby, JavaScript и т. Д. PHP - один из самых распространенных. В этом разделе мы поговорим о технологиях PHP. </p>
  <p> Вы можете использовать PHP, поскольку это медленный процесс, поэтому даже программисты, которые создают веб-сайты с нуля, должны использовать среду разработки. Самым популярным из них является фреймворк Model-View-Controller (MVC). Примеры фреймворков PHP MVC включают Laravel, CodeIgniter, Cake PHP, Symfony и т. Д. </p>
  <p> Фреймворки </p>
  <p> MVC предоставляют следующие возможности: </p>
  <ul>
  <li> <strong> Встроенная связь базы данных с библиотеками: </strong> Это экономит ваше время на написание кода для подключения к база данных безопасно записывать и извлекать данные.</li>
  <li> <strong> Встроенные модули аутентификации: </strong> Это сэкономит вам время на написание кода, который потребует от пользователей входа на сайт и выхода из него, если это необходимо. </li>
  <li> <strong> Структурированный код: </strong> Шаблон проектирования MVC отделяет бизнес-логику от представления. Это позволяет легко иметь программиста, который может работать над серверной частью, и веб-дизайнера, который работает над разработкой внешнего интерфейса. </li>
  <li> <strong> Пакеты: </strong> Это коллекции библиотек, которые выполняют очень специфические задачи.Например, вы можете использовать или загрузить пакет для добавления таких функций, как;
  <ul>
  <li> Добавление функции комментариев Disqus на ваш сайт </li>
  <li> Вызов API </li>
  <li> Интеграция платежного шлюза. </li>
  </ul>
  </li>
  </ul>
  <p> Вы можете использовать инфраструктуры MVC, чтобы ускорить время разработки. Вы также можете использовать HTML-шаблоны для ускорения разработки Frontend за счет использования HTML-шаблонов с открытым исходным кодом. Вы также можете купить коммерческий HTML-шаблон, а затем настроить его в соответствии с вашими требованиями. Некоторые разработчики HTML-шаблонов даже создают специальные HTML-шаблоны MVC framework.</p>
  <p> Например, вы можете приобрести шаблон HTML, который использует шаблон лезвия, механизм шаблонов, встроенный в платформу Laravel MVC. </p>
  <h3><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0_%D1%81_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%D0%BC_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D1%8B_%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%BE%D0%BC_WordPress"></span> Создание веб-сайта с использованием системы управления контентом (WordPress) <span class="ez-toc-section-end"></span></h3>
  <p> В этом разделе мы рассмотрим, как вы можете создать веб-сайт с помощью WordPress: </p>
  <h4><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0_WordPress"></span> Загрузка WordPress <span class="ez-toc-section-end"></span></h4>
  <p> Вы можете загрузить WordPress с официального сайта и запустить его на ваш локальный компьютер, если у вас есть веб-сервер и установлен PHP. Однако, если у вас уже есть учетная запись хостинга, вы можете установить WordPress прямо из своей cPanel.</p>
  <h4><span class="ez-toc-section" id="%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B_%D1%81_WordPress"></span> Начало работы с WordPress <span class="ez-toc-section-end"></span></h4>
  <p> После того, как вы установили WordPress, вы можете приступить к созданию своего веб-сайта. </p>
  <p> <strong> Веб-хостинг: </strong> </p>
  <p> Прежде чем вы начнете, вам необходимо иметь доменное имя и учетную запись веб-хостинга. В учетной записи веб-хостинга должен быть установлен PHP и MySQL в качестве ядра базы данных. Вы можете воспользоваться услугами Bluehost, Godaddy или использовать WP Engine, который специализируется на предоставлении управляемого хостинга WordPress. </p>
  <p> <strong> Установка: </strong> </p>
  <p> У большинства провайдеров веб-хостинга есть специальные скрипты в административной панели, позволяющие установить WordPress.Если ваш хостинг-провайдер использует cPanel, вы сможете установить WordPress, щелкнув значок WordPress, как показано на изображении ниже: </p>
  <p> После того, как вы выберете вышеуказанный вариант, вам будут представлены следующие окна для завершения установки. </p>
  <p> <strong> Настройки: </strong> </p>
  <p> Раздел настроек позволяет вам настроить такие вещи, как имя сайта, постоянные ссылки URL, часовой пояс, может ли кто-либо зарегистрироваться на вашем сайте и т. Д. </p>
  <p> <strong> Шаблон: </strong> </p>
  <p> Шаблоны позволяют нам видеть как выглядит наш сайт.WordPress поставляется с бесплатными встроенными шаблонами, которые вы можете использовать прямо сейчас. Вы также можете скачать шаблоны, созданные другими. Помимо бесплатных шаблонов, вы также можете приобрести шаблоны премиум-класса на торговых площадках, таких как ThemeForest. </p>
  <p> <strong> Плагины: </strong> </p>
  <p> Плагины позволяют расширить функциональность WordPress. Например, вы можете использовать плагин, чтобы ваши клиенты могли платить вам через PayPal с вашего веб-сайта. Вы также можете использовать плагины, чтобы заставить пользователей использовать безопасные соединения (HTTPS) или создавать карты сайта.</p>
  <p> <strong> Конструкторы веб-сайтов: </strong> </p>
  <p> Конструкторы веб-сайтов имеют множество функций, которые упрощают создание веб-сайтов с помощью методов перетаскивания. Конструкторы веб-сайтов обычно устанавливаются как плагины и поставляются с шаблонами, которые вы можете использовать. </p>
  <p> Давайте посмотрим на некоторые из самых популярных веб-разработчиков: </p>
  <p> <strong> Astra </strong> </p>
  <p> Astra - это быстрая, легкая и настраиваемая тема WordPress. Он поставляется со стартовыми шаблонами, которые вы можете использовать для быстрого создания своих сайтов.В нем есть как бесплатные, так и премиальные шаблоны для начинающих. </p>
  <p> <strong> Elementor: </strong> </p>
  <p> Elementor - это конструктор веб-сайтов для WordPress, который используют более 5 миллионов пользователей. Elementor предлагает как бесплатные, так и премиальные функции. </p>
  <p> <strong> Beaver Builder: </strong> </p>
  <p> Beaver Builder - это простой в использовании конструктор веб-сайтов для WordPress, который позволяет быстро создавать профессионально выглядящие веб-сайты. </p>
  <h3><span class="ez-toc-section" id="%D0%90%D0%BB%D1%8C%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D1%8B_WordPress"></span> Альтернативы WordPress <span class="ez-toc-section-end"></span></h3>
  <p> WordPress - не единственная система управления контентом, которую вы можете использовать для создания своего веб-сайта.Вы также можете посмотреть альтернативы, такие как </p>
  <ul>
  <li> <strong> Joomla: </strong> Joomla - это система управления контентом с открытым исходным кодом, которую можно использовать для публикации контента, дискуссионных форумов, приложений электронной коммерции и т. Д. Она использует PHP в качестве языка программирования и MySQL как движок базы данных. </li>
  <li> <strong> Drupal: </strong> Это система управления веб-контентом, которая может создавать личные блоги, корпоративные веб-сайты или управлять знаниями для делового сотрудничества. Drupal написан на PHP и JavaScript.</li>
  <li> <strong> MODX: </strong> Это система управления контентом с открытым исходным кодом, написанная на PHP. И использует MySQL в качестве движка базы данных. Его можно использовать как в Интернете, так и в интранете. </li>
  <li> <strong> Постоянный контакт </strong>: Это конструктор веб-сайтов, который предоставляет функции перетаскивания. Его можно использовать для создания базовых веб-сайтов и интернет-магазинов. </li>
  </ul>
  <h4><span class="ez-toc-section" id="%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5"></span> Описание: <span class="ez-toc-section-end"></span></h4>
  <ul>
  <li> Сайты создаются с использованием компьютерного кода. </li>
  <li> Компьютерный код - это удобочитаемые инструкции, которые говорят компьютеру выполнить определенную задачу.</li>
  <li> Веб-сайты можно создавать либо с нуля, либо с использованием существующей платформы, такой как WordPress.<br />
  	</div>
  
  			<footer class="entry-footer">
  			<span class="cat-links">Category <a href="https://pyobjc.ru/category/html" rel="category tag">Html</a></span>		</footer>
  	</article>
  
  	<nav class="navigation post-navigation" aria-label="Записи">
  		<h2 class="screen-reader-text">Навигация по записям</h2>
  		<div class="nav-links"><div class="nav-previous"><a href="https://pyobjc.ru/raznoe/novost-na-radio-pravila-napisaniya-kak-pisat-novosti-dlya-radio-i-teleefira-radioportal.html" rel="prev">Новость на радио правила написания: Как писать новости для радио- и телеэфира | Радиопортал</a></div><div class="nav-next"><a href="https://pyobjc.ru/raznoe/ekonomika-organizaczij-i-predpriyatij-kem-rabotat-ekonomika-predpriyatij-i-organizaczij-oficzialnyj-sajt-vyatgu.html" rel="next">Экономика организаций и предприятий кем работать: Экономика предприятий и организаций — Официальный сайт ВятГУ</a></div></div>
  	</nav>
  <div id="comments" class="comments-area">
  
  		<div id="respond" class="comment-respond">
  		<h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/poshagovoe-napisanie-sajta-v-html-i-css-na-konkretnom-primere-kak-sozdat-sajt-besplatno-samomu-pokazyvaem-3-prostyh-sposoba.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://pyobjc.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>
  Имя * 
  Email * 
  Сайт