HTML и CSS
являются основой любой веб-страницы
HTML (Hyper Text Markup Language) -«язык гипертекстовой разметки»
CSS (Cascading Style Sheets) -«каскадные таблицы стилей»
Языки HTML и CSS созданы для верстки сайта т.е : для размещения элементов сайта по нужным местам
С помощью HTML создается каркас страницы, сам язык разметки представляет собой набор тэгов с помощью которых на странице выделяются Заголовки (тэги <h1><h2><h3>…<h6>) , параграфы (тэг <p>) изображения (тэг <img>) и другие блоки
HTML теги это специальные команды для браузера которые говорят ему как отображать информацию расположенную внутри тэгов.
Большинство тегов парные открывающий <тег> и соответствующий ему закрывающий </тег>. Все что находится между открывающим и закрывающим тегом, попадает под действие тега.
Так же есть одиночные теги, которые не нужно закрывать, например, <img> ,<link> ,<meta>, <input>,<br>, <hr> их не так много как парных
Так же в тегах могут размещаться атрибуты – команды расширяющие действие тега, атрибут размешается внутри открывающего тега <тег атрибут1= "значение" атрибут2="значение">.
Таблицы стилей CSS расширяют возможности HTML позволяя менять стандартное форматирование HTML позволяя менять цвет размер фон отступ шрифт, и другие параметры, отвечающие за оформления сайта.
Теперь разобравшись с основной терминологией, мы займемся изучением основных тегов. Начнем с обязательных тегов, отвечающих за структуру страницы.
Веб страница
Веб-страница — это текстовый документ с расширением .html. Внутри него хранится текст разметки, заключенный в теги. Этот файл обязательно должен иметь следующие теги: тег <html> внутри которого находятся все остальные теги (все что попадает за пределы этого тега браузером игнорируется), внутри него должны быть два тега <head> для служебного содержимого , и <body> - для основного текста который увидит пользователь на экране браузера.
<head> может включать много различных тегов, но для начала нам нужно только два из них это тег <meta> с атрибутом charset который в большинстве случаев имеет значение utf-8 <meta charset="utf-8"> он задает кодировку страницы.
И тег <title> задающий название страницы которое будет отображено на вкладке браузера.
Помимо этого перед тегом <html> обычно пишется doctype который указывает браузеру что файл нужно читать как html страницу выглядит он так <!DOCTYPE html>
Структура
Теперь посмотрим, как выглядит основная структура страницы:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
Это основное содержимое страницы.
</body>
</html>
Вы можете прямо сейчас скопировать этот пример в текстовый файл с расширением .html и открыть его в браузере
Внутри тега <body> размещаются все теги, отвечающие за содержимое.
Основные из них это:
<p> -Параграф, создается он так <p>Текст параграфа</p>
<h1> - <h6> - Заголовки, всего их шесть от <h1> -cамого крупного до <h6> - самого мелкого создаются они так:
<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h3>Заголовок</h3>
…..
<h6>Заголовок</h6>
Заголовки, как и многие теги html имеют встроенный стиль, который можно изменить по своему усмотрению с помощью CSS.
<ul> -unordered list и <ol> ordered list: Теги, отвечающие за списки <ul> - не нумерованный список и <ol> - нумерованный список. Внутри этих тегов должны быть теги <li> - list item это пункты списка одному <li> соответствует один пункт списка.
Выглядит это так:
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
Нумерация в <ol> происходит автоматически от 1 до последнего пункта списка, в <ul> в свою очередь каждый элемент помечен точкой , списки можно вкладывать один в другой таким образом создавая подсписки.
<a> - anchor tag: Данный тег создает ссылки нажимая на которые мы переходим с одной веб-страницы на другую, у нее должен быть обязательный атрибут href в который записывается адрес, на который ведет ссылка. Выглядит это так:
<a href=”http://example.com”> Текст ссылки </a>
Ссылки бывают абсолютные и относительные могут вести как на ваш сайт так и на другой.
<img> - image Картинка этот одиночный тег нужен для размещения картинок, внутри него обязательно должен быть атрибут src в котором указан путь к картинке, и необязательный атрибут alt который отобразит текст в случае если не удастся загрузить изображение
<img src="example.png" alt=”текст замены”>
Так же мы можем заключить картинку <img> внутри ссылки <a> в таком случае при нажатии на изображение будет открываться ссылка
<a href="http://example.com"> <img src="example.png"> </a>
Зная эти 7 тегов вы уже можете создать простую веб-страницу, но выглядеть она будет не презентабельно, чтобы улучшить и разнообразить внешний вид веб страниц были созданы каскадные таблицы стилей CSS
Подключаться к html они могут тремя разными способами первые два на данный момент являются плохой практикой, поэтому рассмотрим сразу третий и единственно верный на данный момент.
Создается отдельный файл с расширением .css например style.css он подключается к HTML документу внутри тега <head> с помощью одиночного тега <link> с атрибутом rel имеющим значение stylesheet
И вторым атрибутом href который указывает путь к файлу с таблицей стилей, выглядит это так:
<link rel="stylesheet" href="/style.css" />
Внутри файла CSS каждому тегу HTML соответствует селектор CSS записывается он так же как в HTML но без <> например тегу <h1> соответствует селектор h1, с помощью селектора мы задаем правила оформления для всех элементов страницы заключенных в одноименный тег. После селектора следуют фигурные скобки {} внутри которых прописываются свойства CSS
Именно свойства CSS задают цвет, размер, фон и другие правила отображения элементов на странице, их записывают в формате Имя свойства, двоеточие : значения свойства потом точка с запятой ; после которой можно записывать следующее свойство для селектора.
Выглядит это так:
Селектор {
Свойство: Значение;
}
Например:
h1 {
color: red;
}
С помощью селектора h1 мы выбираем все теги <h1> на странице и свойством color со значением red, перекрашиваем их в красный цвет.
Так же селектор может выбирать элементы по классу который прописывается внутри атрибута тега class (<div class=”first”>)
Внутри CSS он будет выбираться так:
*first {
Свойство: Значение;
}
И по id (<div id=”second”>)
#second {
Свойство: Значение;
}
Разница между id и class заключается в том что один class может быть присвоен неограниченному числу тегов на странице а id единственный на всю html страницу.
Вот и все, к более углубленному изучению HTML и CSS мы подойдем в следующих уроках.
Видео с практикой и домашним задание ниже
https://vk.com/video221023361_456239716
Канал в телеграмме: https://t.me/joinchat/AAAAAFZ38NQeuRe-PLmB5w