Веб-разработка. Создаем свою википедию. Часть 1.

Привет капибаряне! Возможно, уже увидев название поста вы были удивлены, но я покажу вам, как создать свою псевдовикипедию, хотя, быть честным, только страницу из нее. Итак, начнем.

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

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

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

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

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

В контейнере (Да, запомните это слово, чуть позже оно нам пригодится) head хранятся данные сайта как сайта. Логично.

говорит браузеру, в какой кодировке написан сайт.

А вот в хранится название вкладки. Да-да, вкладки. По-этому эта часть особенно важна.

Итак, перейдем к основе, все, что внутри сайта, пишется в контейнере . Нашу страницу на википедии мы будем писать о... КАПИБАРАХ!!!!! кхм-кхм, извините

Начнем с тех моментов, которые мы изучили ранее. Создадим заголовки. Из предыдущего поста вы узнали, как их создавать.

Создайте заголовки следующего типа: Капибары (h1), Внешний вид (h3), Отличительные признаки (h3), Обитание (h2), Места с наибольшей популяцией (h3) и Места с наименьшей популяцией (h3), Медиа (h2).

Ваш код и сайт будут выглядеть так:

Уже напоминает?

Но чего-то не хватает. А, точно, описания капибары! В интернете находим описание капибары и вставляем. Какой тег мы будем использовать для обычного текста? Правильно - тег параграфа

.

Добавляем информацию из интернета для пунктов

• Внешний вид
• Отличительные признаки
• Места с наименьшей популяцией

А чтобы текст не выглядел скучно, выделите основные моменты (ВРЕМЯ ЗАПОМИНАНИЯ НОВЫХ ТЕГОВ!) жирным шрифтом - или или курсивом - . Для этого прямо в тексте выделите нужные слова этими тегами.

Ну, почти все. Но, почему мы пропустили пункт "Места с наибольшей популяцией"? Тут нам нужно сделать так называемый "топ стран", иначе говоря - список. Есть два типа списков:

(ordered list) - пронумерованный список и
(unordered list) - непронумированный список. Внутри списка каждый элемент помечается по следующей схеме:
• Первый в списке
. Добавим список в наш код.

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

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