Cелекторы в CSS

До этого мы использовали только селектор конкретного тега ( например h1 {…} ) и селектор класса ( например some-class-name {…} ).

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

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

/*На странице у нас будет два div блока. Создадим и применим к ним два разных класса чтобы продемонстрировать работу и пользу селекторов*/ .divblock1 { width:410px; height:360px; background:#f1f1f1; float:left; margin: 0 15px 15px 0; text-align: center; padding: 5px 15px 15px 5px; box-shadow: 5px 10px #888888; } .divblock2 { width:410px; height:360px; background:#f1f1f1; float:left; margin: 0 15px 15px 0; text-align: center; padding: 5px 15px 15px 5px; box-shadow: 5px 10px #888888; } /* Ниже конекстный селектор. Здесь два html тега или класса (или и то и другое как в данном случае) пишутся через пробел. Здесь второй html тег это дочерний элемент первого. То есть если где-то на странице есть например div блоки к которым применен класс .divblock1 и в которых есть li теги то ко всем li тегам в этих div применяются свойства. Здесь у всех li в div с классом divblock1 меняется цвет текста с помощью color. */ .divblock1 li { color:blue; } /*ниже из прошлых уроков*/ .header { padding: 10px; background:#aaf6a1; } .nav { margin: 10px; padding: 10px; background:#f1f1a1; } .mainSection { float: left; width: 75%; height:600px; background:#b99999; } .aside { float: left; width: 25%; height:600px; background:#c1fee1; } .footer { clear: both; background:#d11777; } .header { padding: 10px; background:#aaf6a1; } .nav { margin: 10px; padding: 10px; background:#f1f1a1; } .section { float: left; width: 75%; height:600px; background:#b99999; } .aside { float: left; width: 25%; height:600px; background:#c1fee1; } .footer { clear: both; background:#d11777; } .divblock { width:410px; height:300px; background:#f1f1f1; float:left; margin: 0 15px 15px 0; text-align: center; padding: 5px 15px 15px 5px; box-shadow: 5px 10px #888888; } .imagePropsClass { width: 400px; height: 170px; } h1, h2 { font-weight: 600; font-family:’Brush Script MT’,cursive; } h3 { font-weight: 600; font-family: ‘Courier New’, monospace; } img { border-style: dashed; border-color: red; border-radius: 15px; }

Вот и сама страница с div-ами к которым будут применены классы divblock1 и divblock2. К списку в блоке класса divblock1 будет применен контекстный селектор.

Page tab text

Патрик учит div и CSS

List Item 1
List Item 2
List Item 3

Какой-то текст в теге p. Какой-то текст в теге p. Какой-то текст в теге p. Какой-то текст в теге p. Какой-то текст в теге p. Какой-то текст в теге p. Какой-то текст в теге p.

Патрик учит div и CSS

List Item
List Item
List Item

Если открыть страницу, то можно увидеть, что все li в div с классом divblock1 окрасились в синий.

То есть контекстный селектор сработал.

Если бы мы не знали о контекстном селекторе, то не очень понятно как бы можно было бы применить какие-то свойства к li только в блоке класса divblock1, то есть, чтобы, например, элементов li в блоке класса divblock2 это не касалось.

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

Также обратите внимание, что li не прямой потомок div, a li прямой потомок ul.

То есть контекстный селектор работает для любых потомков прямых или не прямых.

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

Селектор дочерних элементов

В отличие от предыдущего контекстного селектора селектор ">" выбирает только прямых потомков html элемента.

Контекстный селектор выбирал вообще все li, которые есть в блоке div класса divblock1 и применял к ним синий цвет. Этот же селектор применяет свойства только к ПРЯМОМУ потомку html элемента.

/*На странице у нас будет два div блока. создадим и применим к ним два разных класса чтобы продемонстрировать работу и пользу селекторов*/ .divblock1 { width:410px; height:430px; background:#f1f1f1; float:left; margin: 0 15px 15px 0; text-align: center; padding: 5px 15px 15px 5px; box-shadow: 5px 10px #888888; } .divblock2 { width:410px; height:430px; background:#f1f1f1; float:left; margin: 0 15px 15px 0; text-align: center; padding: 5px 15px 15px 5px; box-shadow: 5px 10px #888888; } /* Очевидно что li в любом случае не может быть прямым потомком div блока, поскольку li очевидно всегда является прямым потомком только тега ul. Поэтому не получится окрасить в синий цвет li сделав например так .divblock1 > li { color:blue; } поскольку li не прямой потомок .divblock1. Вместо этого нужно указывать цепочку прямых потомков чтобы добраться к li вот так: */ .divblock1 > ul > li { color:blue; } /*Селектор выше применяет синий цвет ко всем li, которые являются прямыми потомками ul, при этом ul должен являться прямым потомком .divblock1.*/ /*ниже из прошлых уроков*/ .header { padding: 10px; background:#aaf6a1; } .nav { margin: 10px; padding: 10px; background:#f1f1a1; } .mainSection { float: left; width: 75%; height:600px; background:#b99999; } .aside { float: left; width: 25%; height:600px; background:#c1fee1; } .footer { clear: both; background:#d11777; } .header { padding: 10px; background:#aaf6a1; } .nav { margin: 10px; padding: 10px; background:#f1f1a1; } .section { float: left; width: 75%; height:600px; background:#b99999; } .aside { float: left; width: 25%; height:600px; background:#c1fee1; } .footer { clear: both; background:#d11777; } .divblock { width:410px; height:300px; background:#f1f1f1; float:left; margin: 0 15px 15px 0; text-align: center; padding: 5px 15px 15px 5px; box-shadow: 5px 10px #888888; } .imagePropsClass { width: 400px; height: 170px; } h1, h2 { font-weight: 600; font-family:’Brush Script MT’,cursive; } h3 { font-weight: 600; font-family: ‘Courier New’, monospace; } img { border-style: dashed; border-color: red; border-radius: 15px; }

Добавим еще один ul обернутый в чистый div блок в div блок класса divblock1.

Page tab text

Патрик учит div и CSS

List Item
List Item
List Item

List Item
List Item
List Item

Какой-то текст в теге p. Какой-то текст в теге p. Какой-то текст в теге p. Какой-то текст в теге p. Какой-то текст в теге p. Какой-то текст в теге p.

Патрик учит div и CSS

List Item
List Item
List Item

List Item
List Item
List Item

Если откроем страницу, то можем увидеть что дочерний селектор > сработал и все прямые li потомки элемента ul, которые являются прямыми потомками блока с классом divblock1 окрасились в синий.

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

То есть синий цвет применился ко всем li, которые являются конечным элементом цепочки .divblock1 > ul > li, но он не был применен к li, которые являются конечным элементом .divblock1 > div > ul > li, поскольку такой цепочки в css файле мы не определяли.

Псевдокласс отрицания

С помощью псевдокласса отрицания not можно отключить применение свойств селектора к конкретным html элементам.

/*На странице у нас будет два div блока. Создадим и применим к ним два разных класса, чтобы продемонстрировать работу и пользу селекторов*/ .divblock1{ width:490px; height:925px; background:#f1f1f1; float:left; margin: 0 15px 15px 0; text-align: center; padding: 5px 15px 15px 5px; box-shadow: 5px 10px 5px #888888; } .divblock2{ width:490px; height:930px; background:#f1f1f1; float:left; margin: 0 15px 15px 0; text-align: center; padding: 5px 15px 15px 5px; box-shadow: 5px 10px 5px #888888; } /*В данном случае с помощью not можно сделать так чтобы свойства применялись ко всем дочерним img блока div с классом divblock1 КРОМЕ тех img которые с классом imagePropsClass.*/ .divblock1 img:not(.imagePropsClass){ border: 1.5px solid #d7d7d7; } /*ниже из прошлых уроков*/ .header { padding: 10px; background:#aaf6a1; } .nav { margin: 10px; padding: 10px; background:#f1f1a1; } .mainSection { float: left; width: 75%; height:600px; background:#b99999; } .aside { float: left; width: 25%; height:600px; background:#c1fee1; } .footer { clear: both; background:#d11777; } .header { padding: 10px; background:#aaf6a1; } .nav { margin: 10px; padding: 10px; background:#f1f1a1; } .section { float: left; width: 75%; height:600px; background:#b99999; } .aside { float: left; width: 25%; height:600px; background:#c1fee1; } .footer { clear: both; background:#d11777; } .divblock { width:410px; height:300px; background:#f1f1f1; float:left; margin: 0 15px 15px 0; text-align: center; padding: 5px 15px 15px 5px; box-shadow: 5px 10px #888888; } .imagePropsClass { width: 400px; height: 170px; } h1, h2 { font-weight: 600; font-family:’Brush Script MT’,cursive; } h3 { font-weight: 600; font-family: ‘Courier New’, monospace; } img { border-style: dashed; border-color: red; border-radius: 15px; }

Добавим пару картинок в div-ы. Как видим никаких классов к этим картинкам не применено.

Page tab text

Патрик учит div и CSS

List Item
List Item
List Item
List Item

List Item
List Item
List Item
List Item

Какой-то текст в теге p.Какой-то текст в теге p.Какой-то текст в теге p. Какой-то текст в теге p.Какой-то текст в теге p.Какой-то текст в теге p. Какой-то текст в теге p.Какой-то текст в теге p.

Патрик учит div и CSS

List Item
List Item
List Item
List Item

List Item
List Item
List Item
List Item

Если откроем страницу, то можем увидеть, что свойства селектора (рамка фиолетового цвета) были применены ко всем картинкам div блока с классом divblock1 кроме картинки с классом imagePropsClass

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

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

Теги структуры страницы. Семантические теги

Все видели классическую структуру страницы:

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

Для этих частей есть специальные теги, которые называются семантическими:

<section> – основной контент,
<aside> – это боковые секции,
<header> – это верхняя часть,
<footer> – нижняя часть,
<nav> – панель навигации.

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

Эти теги тоже нужно настраивать с помощью css.

header { /* сделаем отступы внутри секции header. */ padding: 10px; /* зададим цвет секции header. */ background: #aaf6a1; } nav { /* делаем отступы секции навигации */ margin: 10px; padding: 10px; /* зададим цвет секции nav */ background: #f1f1a1; } section { /* Делаем чтобы section и aside были в ряд. То есть чтобы было обтекание section справа */ float: left; /* задаем ширину section */ width: 75%; /* задаем высоту section */ height: 600px; /* зададим цвет секции section */ background: #b99999; } aside { /* то же самое здесь */ float: left; /* задаем ширину aside */ width: 25%; /* задаем высоту aside */ height: 600px; /* зададим цвет секции aside */ background: #c1f1e1; } footer { /* Предыдущие два блока обтекали друг друга. На footer нужно остановить обтекание. both значит запрет обтекания footer секции другими элементами с обеих сторон. */ clear: both; /* зададим цвет секции footer */ background: #d11777; } /* ниже из прошлых уроков */ .divblock { /* Основные параметры div-блока */ width: 410px; height: 300px; background: #f1f1f1; float: left; margin: 0 15px 15px 0; text-align: center; padding: 5px 15px 15px 5px; box-shadow: 5px 10px #888888; } .imagePropsClass { /* Определяем размеры изображений */ width: 400px; height: 170px; } h1, h2 { /* Стиль заголовков */ font-weight: 600; font-family: ‘Brush Script MT’, cursive; } h3 { /* Шрифт заголовков h3 */ font-weight: 600; font-family: ‘Courier New’, monospace; } img { /* Стилизация изображений */ border-style: dashed; border-color: red; border-radius: 15px; }

Вот и сама страница с тегами структуры, к которым будут применены только что определенные стили.

HTML Basics

header часть страницы. В ней может быть логотип панель навигации

section часть. здесь основной контент страницы

Давайте откроем только что написанную страницу в браузере.

Видим всем знакомую структуру страницы. Таким образом с помощью структурных тегов можно выстраивать структуру страницы

Структура страницы с помощью div.

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

Для каждого div отвечающего за какую-либо секцию создаются классы с соответствующими названиями.

.header { /* Делаем отступы внутри блока div, на который будет применен класс header. */ padding: 10px; /* Зададим цвет этому div. */ background:#aaf6a1; } .nav { /* Делаем отступы блоку div, на который будет применен класс header nav. */ margin: 10px; padding: 10px; /* Зададим цвет этому div. */ background:#f1f1a1; } .mainSection { /* Делаем так, чтобы блоки div, на которые будут применены классы mainSection и aside, были в ряд. То есть чтобы было обтекание блока div с классом mainSection. */ float: left; /* Задаем ширину этому div. */ width: 75%; /* Задаем высоту этому div. */ height: 600px; /* Зададим цвет этому div. */ background:#b99999; } .aside { /* Все то же самое здесь с блоком div, на который будет применен класс aside. */ float: left; width: 25%; height: 600px; /* Зададим цвет этому div. */ background:#f1fee1; } .footer { /* Предыдущие два блока обтекали друг друга. На div, к которому будет применен класс footer, нужно остановить обтекание. Both значит запрет обтекания этого div другими элементами с обеих сторон. */ clear: both; /* Зададим цвет этому div. */ background:#d11777; } /* Ниже из прошлых уроков */ .header { padding: 10px; background:#aaf6a1; } .nav { margin: 10px; padding: 10px; background:#f1f1a1; } .mainSection { float: left; width: 75%; height: 600px; background:#b99999; } .aside { float: left; width: 25%; height: 600px; background:#f1fee1; } .footer { clear: both; background:#d11777; } .divblock { width: 410px; height: 300px; background:#f1f1f1; float: left; margin: 0 15px 15px 0; text-align: center; padding: 5px 15px 15px 5px; box-shadow: 5px 10px #888888; } .imagePropsClass { width: 400px; height: 170px; } h1, h2 { font-weight: 600; font-family:’Brush Script MT’, cursive; } h3 { font-weight: 600; font-family: ‘Courier New’, monospace; } img { border-style: dashed; border-color: red; border-radius: 15px; }

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

HTML Basics

section часть. здесь основной контент страницы

aside часть. здесь может быть меню, реклама и т.д.

Давайте откроем только что написанную страницу в браузере.

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

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

Что такое div блок и зачем он нужен

Рассмотрим тег <div></div>.

Это наверное один из самых часто встречающихся тегов в любом html документе.

div сам по себе ничего не делает, но с ним можно вытворять различные вещи с помощью css и он может содержать в себе другие html теги.

Сейчас на примере убедитесь в его полезности.

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

.divblock { /* задаем ширину div блоку */ width: 410px; /* задаем высоту div блоку */ height: 300px; /* цвет фона div блоку */ background: #f1f1f1; /* float:left означает, что html элемент, который будет идти за html элементом, на котором применяется данный класс, будет обтекать его с левой стороны. */ float: left; /* margin делает отступ блока div от других html элементов вокруг него. В пикселях указываем отступы справа и снизу. 0 – расстояние отступа сверху, 15px – справа, 15px – снизу, 0 – слева */ margin: 0 15px 15px 0; /* Содержимое div блока будет располагаться по центру в нем. Также сам div блок должен от этого располагаться по центру страницы, но он не будет, так как выше использовали float, а он все располагает по левому краю */ text-align: center; /* padding делаем отступы в блоке div. То есть все элементы ВНУТРИ блока div будут иметь отступы от краев этого div. */ padding: 5px 15px 15px 5px; /* Можем задать тень блоку. Пикселями настраиваем расположение тени, с помощью кода #888888 задаем серый цвет тени. И у цветов есть код. Меняя цифры в этом коде можно менять цвет и его оттенки. */ box-shadow: 5px 10px #888888; } /* ниже из прошлых уроков */ .imagePropsClass { /* изменим размеры картинки */ width: 400px; height: 170px; } h1, h2 { font-weight: 600; font-family: ‘Brush Script MT’, cursive; } h3 { font-weight: 600; font-family: ‘Courier New’, monospace; } img { border-style: dashed; border-color: red; border-radius: 15px; }

Создадим страницу с тремя div блоками и применим к ним свойства созданного класса.

Page tab text

Патрик учит div и CSS

Какой-то текст в теге p.Какой-то текст в теге p. Какой-то текст в теге p.Какой-то текст в теге p. Какой-то текст в теге p.Какой-то текст в теге p.

Патрик учит div и CSS

Какой-то текст в теге p.Какой-то текст в теге p. Какой-то текст в теге p.Какой-то текст в теге p. Какой-то текст в теге p.Какой-то текст в теге p.

Патрик учит div и CSS

Какой-то текст в теге p.Какой-то текст в теге p. Какой-то текст в теге p.Какой-то текст в теге p. Какой-то текст в теге p.Какой-то текст в теге p.

Давайте откроем только что написанную страницу в браузере.

Как видим, свойства класса divblock были успешно применены к div блокам:

Размеры блоков 410 на 300, цвет фона #f1f1f1, то есть светло серый.
Рамка, как видим, 5 пикселей справа и 10 пикселей снизу цвета #888888, то есть темно серый.
Блоки обтекают друг друга – значит float работает.
Все элементы внутри div-ов расположены по середине – значит text-align: center работает.
Видим, что картинка и текст внутри div имеют отступы от краев div (справа и слева по 15 пикселей, снизу и сверху по 5 пикселей) – значит padding работает.
И также видим, что вокруг блоков div есть отступы (справа и слева по 15 пикселей, можно увидеть пространство между div-ами) – значит margin работает.

Польза от тега div очевидна.

Что такое классы в CSS

А что, если мы хотим применить определённый набор CSS-свойств вообще к любому элементу на странице, не указывая конкретный тег, например h1 { ... } или p { ... }?

Для этого используются классы.

Классы определяются в css файлике. У класса есть имя и оно может быть любым, его придумывает программист. Этому имени сопоставляется определённый набор CSS-свойств.

/*создаем класс с именем imagePropsClass. Теперь свойства в этом классе можно применить к любому тегу на html странице*/ .imagePropsClass { width: 600px; /*ширина html тега*/ height: 350px; /*высота html тега*/ } /*ниже из прошлых уроков*/ h1, h2 { font-weight: 600; font-family: ‘Brush Script MT’, cursive; } h3 { font-weight: 600; font-family: ‘Courier New’, monospace; } img { border-style: dashed; border-color: red; border-radius: 15px; }

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

Page tab text

Давайте откроем только что написанную страницу в браузере.

Как видим, свойства класса imagePropsClass были успешно применены к картинке. Ее ширина стала 600px, а высота 250px.

Как уже было сказано, класс можно применить вообще к любому тегу, то есть не только к img. В этом его смысл.

Базовые концепции CSS

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

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

Разделение CSS и HTML – это попытка разделить код, которым выполняется дизайн страницы и код, которым выполняется придание ей структуры.

CSS. Базовые концепции

Весь css код обычно пишется в отдельном файле, обычно с именем style.css. Как видим, css код пишется в файле со своим собственным особым форматом – css.

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

Давайте создадим css файл со стилями и html файл страницы в папке HTML.

Стили из файла style.css будут применены к файлу pageWithCSS.html.

Дизайн(стили) придается конкретным html тегам с помощью свойств.

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

/*Комментарии в css как в Java*/ /*Можно задавать группу свойств сразу нескольким тегам страницы. Тогда пишем их через запятую*/ h1, h2 { /*указываем жирность шрифта тегов h1 и h2 равной 600*/ font-weight: 600; /*указываем шрифт “Inter” для тегов h1 и h2*/ font-family: ‘Brush Script MT’, cursive; } /*а можно по отдельности. Придем свойства только тегу h3*/ h3 { font-weight: 600; font-family: ‘Courier New’, monospace; } /*Придем свойства только тегу img*/ img { /*тип рамки у картинки*/ border-style: dashed; /*цвет рамки у картинки*/ border-color: red; /*размер рамки у картинки*/ border-radius: 15px; }

Теперь как же придать только что заданные свойства нашей pageWithCSS.html странице?

Page tab text

Большой заголовок

Заголовок поменьше

Ваше маленький заголовок жесть

Тестируем написанный HTML+CSS код

Давайте откроем только что написанную страницу в браузере.

Как видим, свойства определенные в файле style.css были успешно применены к тегам на странице pageStructure.html.

Текст тегов h1, h2 стал жирным и принял шрифт Brush Script MT. Тег h3 стал жирным и принял шрифт ‘Courier New’, monospace. У картинки же появились закругления и рамка красного цвета. То есть всё, как мы писали в css файле.

Атрибуты в HTML

Мы уже рассмотрели некоторые аттрибуты типа src, href и border. Как уже можно было понять, они нужны, чтобы каким-либо образом настраивать элементы на странице.

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

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

С помощью аттрибута width можем задать ширину элементам.

С помощью аттрибута height можем задать высоту элементам.

Аттрибут align может быть у некоторых html тегов. Он может размещать элементы страницы справа, по центру или слева. По умолчанию всё справа. Давайте на нашей странице разместим всё по середине.

Page tab text

Большой заголовок

заголовок поменьше

Еще меньше

Какой-то текст в теге р.

Какой-то текст в строке 1	Какой-то текст в строке 1	Какой-то текст в строке 1
Какой-то текст в строке 2	Какой-то текст в строке 2	Какой-то текст в строке 2
Какой-то текст в строке 3	Какой-то текст в строке 3	Какой-то текст в строке 3

Кликни на меня и перейди на ютуб

Давайте откроем только что написанную страницу в браузере.

Как видим, аттрибут align-"center" и тег <center> сработали успешно. Всё размещено по середине страницы.

Также теги width и height очевидно тоже сработали. Изменилась высота первой строки таблицы, изменилась ширина всей таблицы и изменилась ширина и высота картинки.

Выводы:

Азы html верстки можно сказать изучены.

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

Поэтому перейдем к CSS. По ходу изучения CSS будут рассмотрены и некоторые другие важные HTML теги и концепции верстки.

Ключевые теги HTML

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

Для начала рассмотрим теги title и h.

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

Page tab text

Большой заголовок

Заголовок поменьше

Ваше маленький заголовок жесть

Какой-то текст в теге p.

Давайте откроем только что написанную страницу в браузере.

Видим на странице в браузере содержимое разных тегов заголовка.

Также на вкладке можно увидеть текст Page tab text. Этот текст мы писали в теге <title>.

Добавим на страницу таблицу.

Page tab text

Большой заголовок

заголовок поменьше

Еще меньше

Какой-то текст в теге p.

Какой-то текст в строке 1	Какой-то текст в строке 1	Какой-то текст в строке 1
Какой-то текст в строке 2	Какой-то текст в строке 2	Какой-то текст в строке 2
Какой-то текст в строке 3	Какой-то текст в строке 3	Какой-то текст в строке 3

Давайте откроем только что написанную страницу в браузере.

Видим на странице в браузере таблицу.

В ней три строки:

строка, которая содержит три ячейки с текстом “Какой-то текст в строке 1”,
строка, которая содержит три ячейки с текстом “Какой-то текст в строке 2”
и строка, которая содержит три ячейки с текстом “Какой-то текст в строке 3”.

То есть всё соответствует тегам, которое мы писали в файле.

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

Тегом img можем разместить картинку на странице.

В аттрибуте src указывается путь к картинке на нашем компьютере, которую мы хотим разместить на странице.

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

Page tab text

Большой заголовок

заголовок поменьше

Еще меньше

Какой-то текст в теге р.

Какой-то текст в строке 1	Какой-то текст в строке 1	Какой-то текст в строке 1
Какой-то текст в строке 2	Какой-то текст в строке 2	Какой-то текст в строке 2
Какой-то текст в строке 3	Какой-то текст в строке 3	Какой-то текст в строке 3

Как видим, картинка PatrickLearnsHtml.png действительно храниться в папке C:\\HTML.

Давайте откроем только что написанную страницу в браузере.

Как видим, картинка PatrickLearnsHtml.png из папки HTML успешно была добавлена на страницу.

Тегом br можно перейти на новую строку на странице (типа \n в консоли в Java).

Также важным тегом является тег ссылки – тег <a>.

Этот тег отображает на странице текст по нажатию на который происходит переход по ссылке.

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

Page tab text

Большой заголовок

заголовок поменьше

Еще меньше

Какой-то текст в теге p.

Кликни на меня и перейди на ютуб

Какой-то текст в строке 1	Какой-то текст в строке 1	Какой-то текст в строке 1
Какой-то текст в строке 2	Какой-то текст в строке 2	Какой-то текст в строке 2
Какой-то текст в строке 3	Какой-то текст в строке 3	Какой-то текст в строке 3

Давайте откроем только что написанную страницу в браузере.

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

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

Переход на ютуб прошел успешно.

Также довольно важно рассмотреть тег form.

С ним по ходу курса мы будем встречаться не однократно.

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

Рассмотрим пример.

Page tab text

Давайте откроем только что написанную страницу в браузере.

Видим, что форма содержит три поля, как мы и определяли в html файлике.

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

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

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

Что такое HTML и зачем он нужен

HTML – это язык разметки веб-страницы.

С помощью html мы задаем странице определенный каркас.

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

Все элементы размещаются на странице с помощью специальных тегов.

Все теги пишутся в файле с расширением html.

Например, тег p размещает на странице текст с нового абзаца. Если мы напишем

<p>Какой-то текст в теге р.</p>

в html файле и откроем его в браузере, то увидим в браузере на странице текст “Какой-то текст в теге р.”

Тегов в html много. Перейдем к изучению базовых.

В html коде комментарии указываются вот так: . Типа комментария /* Комментарий */ в Java.

В html есть три специальных базовых тега. Приведем пример страницы с этими тегами.

Какой-то текст в теге р.

Протестируем написанный код.

Давайте откроем только что написанную страницу База.html в браузере. Обычно это делается вот так: нажимаем правой кнопкой мыши по файлу и выбираем каким браузером открывать страницу.

Видим на странице в браузере содержимое тега p.