HTML/CSS

Web-fundamentals

План на сегодня 🚀

HTML
CSS

HTML

HyperText Markup Language

HTML

HTML элемент в общем виде

HTML

Состоит из двух тегов: открываюший и закрывающий

HTML

"tag": название тега

HTML

Аттрибуты тега

HTML

Cодержимое тега (может содержать дочерние HTML элементы)

HTML

HTML элемент может не иметь закрывающего тега (следовательно и дочерних элементов)

HTML

а также не иметь аттрибутов

HTML


                <!DOCTYPE html>
                <html lang="en">
                <head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible"
                        content="IE=edge">
                  <title>Title</title>
                </head>
                <body>
                
                </body>
                </html>

Базовая структура (разметка) html документа

HTML


                <!DOCTYPE html>
                <html lang="en">
                <head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible"
                        content="IE=edge">
                  <title>Title</title>
                </head>
                <body>
                
                </body>
                </html>

Объявление типа документа. Исторический артефакт

HTML


                <!DOCTYPE html>
                <html lang="en">
                <head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible"
                        content="IE=edge">
                  <title>Title</title>
                </head>
                <body>
                
                </body>
                </html>

Элемент <html> содержит в себе всё содержимое страницы, и иногда его называют "корневой элемент"

HTML


                <!DOCTYPE html>
                <html lang="en">
                <head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible"
                        content="IE=edge">
                  <title>Title</title>
                </head>
                <body>
                
                </body>
                </html>

Элемент <head> содержит метаинформацию.

HTML


                <!DOCTYPE html>
                <html lang="en">
                <head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible"
                        content="IE=edge">
                  <title>Title</title>
                </head>
                <body>
                
                </body>
                </html>

Элемент <meta> устанавливает кодировку utf-8.

HTML


                <!DOCTYPE html>
                <html lang="en">
                <head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible"
                        content="IE=edge">
                  <title>Title</title>
                </head>
                <body>
                
                </body>
                </html>

Элемент <title> устанавливает заголовок вашей страницы, который появляется во вкладке браузера

HTML


                <!DOCTYPE html>
                <html lang="en">
                <head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible"
                        content="IE=edge">
                  <title>Title</title>
                </head>
                <body>
                
                </body>
                </html>

Элемент <body> содержит весь видимый контент

HTML


                <!DOCTYPE html>
                <html lang="en">
                <head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible"
                        content="IE=edge">
                  <title>Title</title>
                </head>
                <body>
                
                </body>
                </html>

Вот тут, в своих потомках

HTML


                <!DOCTYPE html>
                <html lang="en">
                <head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible"
                        content="IE=edge">
                  <title>Title</title>
                </head>
                <body>
                <div id="links">
                    <ul>
                      <li>
                        <a href="#">HOME</a>
                      </li>
                      <li>
                        <a href="#">BLOG</a>
                      </li>
                      <li>
                        <a href="#">CONTCT US</a>
                      </li>
                      <li>
                        <a href="#">ABOUT</a>
                      </li>
                      <li>© 2023</li>
                    </ul>
                </div>
                </body>
                </html>

HTML образует деревовидную структуру, называемую DOM:
Document Object Model

HTML

DOM

HTML

DOM

HTML

DOM

HTML

DOM

Для чего нужна иерархическая структура?

Структура ради структуры!
Анализ поисковыми движками
Навигация с клавиатуры (доступность)
Cкринридеры

CSS

Cascading Style Sheets

CSS


                selector {
                  prop1: "value1";
                  prop2: "value2";
                }

набор CSS правил в общем виде

CSS


                selector {
                  prop1: "value1";
                  prop2: "value2";
                }

Селектор - строка, ссылающаяся на html элементы в DOM дереве

CSS


                p {
                  prop1: "value1";
                  prop2: "value2";
                }

Ссылаемся на все параграфы

CSS


                p a {
                  prop1: "value1";
                  prop2: "value2";
                }

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

CSS


                p, a {
                  prop1: "value1";
                  prop2: "value2";
                }

Ссылаемся на все ссылки и на все параграфы

CSS


                selector {
                  prop1: "value1";
                  prop2: "value2";
                }

Более подробное построение селекторов мы рассмотрим далее

CSS


                selector {
                  prop1: "value1";
                  prop2: "value2";
                }

Объявление свойства

CSS


                selector {
                  prop1: "value1";
                  prop2: "value2";
                }

Объявление свойства

CSS


                p {
                  color: "white";
                  prop2: "value2";
                }

Например таким образом мы задаем белый цвет текста всем параграфам

CSS


                p {
                  color: "white";
                  text-align: "right";
                }

А также выравнивание по правому краю

CSS


                selector1 {
                  prop1: "value1";
                  prop2: "value2";
                }

                selector2 {
                  prop1: "value1";
                  prop2: "value2";
                }

Несколько наборов CSS правил

CSS


                selector1 {
                  prop1: "value1";
                  prop2: "value2";
                }

                selector2 {
                  prop1: "value1";
                  prop2: "value2";
                }

Несколько наборов CSS правил

CSS/HTML

Блочные элементы


                  
                  
                    
                      Lorem ipsum dolor sit amet consectetur, 
                      adipisicing elit. Debitis nemo assumenda soluta
                      iste obcaecati aliquid quibusdam blanditiis tenetur
                      distinctio perspiciatis! Repellat nam vitae omnis
                      impedit, ab commodi minus debitis quisquam.


                /* css */
                /* empty for now */

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis nemo assumenda soluta iste obcaecati aliquid quibusdam blanditiis tenetur distinctio perspiciatis! Repellat nam vitae omnis impedit, ab commodi minus debitis quisquam.

CSS/HTML

Блочные элементы


                  
                  
                    
                      Lorem ipsum dolor sit amet consectetur, 
                      adipisicing elit. Debitis nemo assumenda soluta
                      iste obcaecati aliquid quibusdam blanditiis tenetur
                      distinctio perspiciatis! Repellat nam vitae omnis
                      impedit, ab commodi minus debitis quisquam.


                /* css */
                p {
                  border: 3px dashed red;
                }

CSS/HTML

Блочные элементы


                  
                  
                    
                      Lorem ipsum dolor sit amet consectetur, 
                      adipisicing elit. Debitis nemo assumenda soluta
                      iste obcaecati aliquid quibusdam blanditiis tenetur
                      distinctio perspiciatis! Repellat nam vitae omnis
                      impedit, ab commodi minus debitis quisquam.


                /* css */
                p {
                  border: 3px dashed red;
                }

CSS/HTML

Блочные элементы


                  
                  
                    
                      Lorem ipsum dolor sit amet consectetur, 
                      adipisicing elit. Debitis nemo assumenda soluta
                      iste obcaecati aliquid quibusdam blanditiis tenetur
                      distinctio perspiciatis! Repellat nam vitae omnis
                      impedit, ab commodi minus debitis quisquam.


                /* css */
                p {
                  border: 3px dashed red;
                  margin: 40px;
                }

CSS/HTML

Блочные элементы


                  
                  
                    
                      Lorem ipsum dolor sit amet consectetur, 
                      adipisicing elit. Debitis nemo assumenda soluta
                      iste obcaecati aliquid quibusdam blanditiis tenetur
                      distinctio perspiciatis! Repellat nam vitae omnis
                      impedit, ab commodi minus debitis quisquam.


                /* css */
                p {
                  border: 3px dashed red;
                  margin: 40px;
                }

CSS/HTML

Блочные элементы


                  
                  
                    
                      Lorem ipsum dolor sit amet consectetur, 
                      adipisicing elit. Debitis nemo assumenda soluta
                      iste obcaecati aliquid quibusdam blanditiis tenetur
                      distinctio perspiciatis! Repellat nam vitae omnis
                      impedit, ab commodi minus debitis quisquam.


                /* css */
                p {
                  border: 3px dashed red;
                  margin: 40px;
                  padding: 40px;
                }

CSS/HTML

Блочные элементы


                  
                  
                    
                      Lorem ipsum dolor sit amet consectetur, 
                      adipisicing elit. Debitis nemo assumenda soluta
                      iste obcaecati aliquid quibusdam blanditiis tenetur
                      distinctio perspiciatis! Repellat nam vitae omnis
                      impedit, ab commodi minus debitis quisquam.


                /* css */
                p {
                  border: 3px dashed red;
                  margin: 40px;
                  padding: 40px;
                }

CSS/HTML

Блочные элементы


                  
                  
                    
                      Lorem ipsum dolor sit amet consectetur, 
                      adipisicing elit. Debitis nemo assumenda soluta
                      iste obcaecati aliquid quibusdam blanditiis tenetur
                      distinctio perspiciatis! Repellat nam vitae omnis
                      impedit, ab commodi minus debitis quisquam.


                /* css */
                p {
                  border: 3px dashed red;
                  margin: 40px;
                  padding: 40px;
                }

CSS/HTML

Блочные элементы


                  
                  
                    
                      Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                    
                    
                      Lorem ipsum dolor sit amet consectetur, adipisicing elit.


                /* css */
                p {
                  border: 3px dashed red;
                  margin: 30px;
                  padding: 20px;
                }

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

CSS/HTML

Блочные элементы


                  
                  
                    
                      Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                    
                    
                      Lorem ipsum dolor sit amet consectetur, adipisicing elit.


                /* css */
                p {
                  border: 3px dashed red;
                  margin: 30px;
                  padding: 20px;
                }

Lorem ipsum dolor sit amet consectetur, adipisicing elit.