Урок #2 (знакомство с HTML и CSS)
BulatСодержание:
Баг, бывает один, а бывает и много
Домашнее задание, чтобы закрепить
Ссылка для открытия на компьютере без прокси и vpn - https://tgraph.io/urok-2-05-25
HTML, без него никуда
Ну что, теперь небось сидите довольные с красивой темой в Sublime? А мы тем временем начинаем разбираться в верстке сайта. Верстка любого сайта ведется с помощью HTML. Давайте подробно рассмотрим его структуру:
<!doctype html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
Итак, если простым языком, то все эти слова в треугольных скобках - теги. Они являются элементами разметки. Давайте рассмотрим их подробнее:
<!doctype html>
Этот тег показывает браузеру, в каком формате открывать веб страницу, т.к. существуют разные версии HTML, например XHTML.
<html>
Он сообщает браузеру, что страница написана на языке HTML.
<head>
Предназначен для хранения других элементов, не отображающихся на странице, которые помогают браузеру правильно открыть сайт.
<title>
Определяет заголовок. Вы увидете его, открыв страницу в браузере.
Hello, World!
Текст - заголовок страницы. Помещается внутри тега <title>
Например заголовок этой страницы - Урок #2 (знакомство с HTML и CSS)
</title>
Закрывающий тег. Закрывающие теги есть у всех тегов, кроме некоторых, таких как <!doctype html> . С другими мы ещё познакомимся.
</head>
Закрывающий тег
<body>
Он нужен для хранения контента, показываемого в окне браузера. Внутри него находится все, что будет отображено в окне браузера.
<p>
Тег абзаца. С его помощью обозначается новый абзац.
Hello, World!
Контент абзаца (текст).
</p>
Закрывающий тег
</body>
Закрывающий тег
</html>
Закрывающий тег
Кстати, почему именно "Hello, World!"? Этот текст традиционно считается первой программой любого начинающего программиста. Давайте не будем нарушать традиции и вместе её напишем.
Думаю, вы уже написали программу и попробовали её запустить. Если еще нет, так чего же вы ждете, а мы тем временем переходим к знакомству с CSS.
CSS, чтобы сайт был красивым
CSS - язык описания внешнего вида. С его помощью мы сможем сделать сайт привлекательным. На мой взгляд структура CSS очень проста:
p {
color: #fc0303;
}
p
Это селектор, он указывает на то, с каким элементом кода мы взаимодействуем.
{}
Все, что внутри скобок является описанием.
color
Это одно из свойств. Наверное вы понимаете, что его значение определяет цвет.
#fc0303
Значение свойства. Это HEX номер цвета. Вы можете скопировать и вставить его в Google, чтобы узнать, что это за цвет.
Давайте теперь приукрасим нашу первую программу
Создайте файл index.html таким образом (не надо это делать, если вы сделали это на прошлом уроке). Теперь не надо переписывать код, написанный выше, ведь у вас есть плагин Emmet. Просто поставьте восклицательный знак и нажмите клавишу Tab. Не прошло и секунды, а вся структура HTML уже готова. Но постойте, тут появились какие-то
<meta charset="UTF-8">
и
<html lang="en">
Если вы заметили это первыми, то вы молодцы. Ваша внимательность поможет вам отыскивать баги и опечатки в своем коде. Любой программист должен уметь искать информацию, поэтому вашем домашним заданием будет найти, а что же такое <meta charset="UTF-8"> и <html lang="en">
Это было небольшое лиричиское отступление, давайте продолжим. Между тегами <title></title> напишем любой заголовок страницы. Пусть это будет "Hello, World!". Напишем уже известную нам фразу и между тегами заголовка, заодно запомним их. Теги <h1>Какой-то заголовок</h1> обозначают заголовок первого типа. Существует 6 типов заголовков. Например 6 тип записывается так: <h6>Какой-то заголовок</h6>
Напоминаю, что теги<p></p>и<h1></h1>пишутся внутри<body></body>!
Внимание! Существует тег заголовка страницы<title></title>и тег заголовка<h1></h1>. Первый отвечает за название страницы (написано на вкладке), а второй - просто большой и жирный текст.
Обязательно сохраните файл. Быстрее всего это делается сочитанием ctrl + S.
Создайте файл style.css. Запишите в него такой код, чтобы цвет текста стал красным. Не помните как это делать? Вернитесь сюда. Не забудьте сохранить файл и обновить ваш сайт в браузере.
Emmet нам в помощь! Он будет автоматически закрывать скобки и дописывать свойства и их значения, вам нужно будет всего лишь нажимать на Enter. Если не совсем понимаете как работает Emmet, пишите мне в Telegram.
Наш первый баг
Упс, ничего не получилось. кажется вы столкнулись с первым багом. Файл index.html не получает данные из style.css. Это связано с тем, что мы никак не связали их. Для того, чтобы сделать это, нужно открыть файл index.html и прописать внутри тега head следующее:
<link rel="stylesheet" href="style.css">
Этим кодом мы как бы говорим браузеру, что лист со стилями нужно подгружать из файла style.css.
Важно! Это сработает только если файл index.html и style.css находятся в одной папке! Если они в разных папках, то перед style.css вам нужно будет указать путь к этой папке. Например ваш файл index.html лежит в папке coding на рабочем столе, а файл style.css лежит просто на рабочем столе, тогда вам надо будет дать полную ссылку на него. Например <link rel="stylesheet" href="C:\Users\Peter\Desktop\style.css"> , но я настоятельно рекомендую так не делать. Сохраните и проверьте, все ли работает? Нет? Тогда я подозреваю, что вы ошиблись в файле style.css, записав код
p {
color: #fc0303;
}
вместо
h1 {
color: #fc0303;
}
Пожалуйста обращайте внимание на селекторы!
Теперь еще раз сохраните файл и обновите страницу в браузере. Все равно не получилось? Ищите опечатку. После того, как нашли её обязательно проверьте ошибку выше, быть может вы исправили правильное на неправильное.
Теперь сделаем задний фон. Выберите цвет сами. Свойство заднего фона - background . Сделайте задний фон по аналогии с цветом текста.
Картинки, чтобы было веселее
Внимание! Не нарушайте авторское право иначе у вас могут появиться проблемы с законом!
Существует много сервисов с картинками без авторского права, таких как Pexels. Скачайте любую понравившеюся картинку оттуда и сохраните её в папке coding. Обращайте внимание на размеры картинки.
Чтобы вставить картинку на сайт необходим пропишите такой код:
<img src="названиекартинки.jpg" alt="">
Не забываем пользоваться emmet. В этом случае надо просто прописать img и нажать Tab.
Сохраните и обновите страницу в браузере. Не забудьте насладиться этим моментом, когда вы впервые создали сайт с картинкой да еще и кодом CSS.
Домашнее задание
Что такое <meta charset="utf-8"> и <html lang="en"> . Поищите в интернете другие свойства css и поделитесь ими в общем чате. Посмотрите на :hover, на text-allign или font-size.