Ссылки

https://htmlacademy.ru/

Нелёгкая жизнь без селекторов

Селекторы позволяют очень точно указывать к каким элементам применять CSS-свойства. 
Селекторы — это наш снайперский прицел.

Но для начала представим, что механизма селекторов не существует. 
Как в этом случае задавать CSS-свойства элементам? 
С помощью атрибута style. 


Например:

...


      
1
      
2
      
3
      
4
      
5
    

Селекторы по тегам

Задавать атрибут style для каждого тега неудобно и долго. 
Особенно, если тот же результат можно получить с помощью единственного CSS-правила, в котором используется селектор для тега li.
С помощью селекторов по именам тегов можно задать стили для всех элементов списка, изображений, абзацев и так далее. 
Эти селекторы содержат имя тега без символов < и >. 

Например:
li {
  /* стили для элементов списка */
}

Одно правило может относиться сразу к нескольким селекторам, в таком случае селекторы перечисляются через запятую:

a, img {
  /* стили для ссылок и изображений */
}

li { 
  
  background-color: white; 
  
  }

Селекторы по классам

Класс — это один из атрибутов тегов. 

Выглядит он вот так:


Этот атрибут особенный, так как в CSS существует возможность выбирать элементы по классу. 
Делается это с помощью такого селектора: .имя_класса. 

Например:

.first {
  /* стили для класса first */
}

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

Отрабатываем селекторы по классам

Синтаксис CSS позволяет выбирать элементы не только по одному классу или тегу. 
Можно, например, выбрать элемент одновременно по тегу и по классу или же элемент с двумя классами сразу. 
Для этого селектор составляется просто одной строкой из всех желаемых «частей» без пробелов. 
Давайте рассмотрим примеры.


В селекторе по тегу и классу первым пишется название тега, а потом идёт класс:
/* выбор всех тегов ul с классом target */
ul.target {...}


Если у элемента задано несколько классов, в HTML и в CSS-селекторе они могут идти в разном порядке — это не будет влиять на выборку элементов:
/* выбор элементов с двумя классами: text и green */
.text.green {...}





Количество классов в селекторе может быть любым:
/* выбор тегов span с четырьмя классами: underlined, red, big и text */
span.underlined.red.big.text {...}

Контекстные селекторы

Селектор может состоять из нескольких частей, разделённых пробелом, например:

p strong { ... }
ul .hit { ... }
.footer .menu a { ... }

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

Читать их проще всего справа налево:
/* выбрать все теги strong внутри тегов p */
p strong { ... }

/* выбрать все элементы с классом .hit внутри тегов ul */
ul .hit { ... }

/* выбрать все ссылки внутри элементов с классом .menu,
   которые лежат внутри элементов с классом .footer */
.footer .menu a { ... }

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

Соседние селекторы

Контекстные селекторы используются для вложенных друг в друга элементов, а соседние — для расположенных рядом.
Например, теги 
 в списке являются соседними по отношению друг к другу и вложенными в тег 
.
Соседние селекторы записываются с помощью знака +, например, селектор1 + селектор2. 
Стили применятся к элементу, подходящему под селектор2, только если сразу перед ним расположен элемент, подходящий под селектор1.

Пример. Есть два элемента списка:


  

  



Селектор .hit + .miss применит стили к элементу с классом miss, так как перед ним есть элемент с классом hit.
Селектор .hit + li, а также селектор li + .miss, или даже li + li тоже применит стили к элементу с классом miss, то есть ко второму элементу списка.
А вот селектор .miss + .hit не сработает, так как элемент с классом miss находится после элемента с классом hit в разметке.

.first + li + li {
  background-color: white;
  }    

Контекстные и соседние селекторы

Селекторы в CSS можно очень гибко комбинировать. 
В частности, можно комбинировать контекстные и соседние селекторы.
Например, селектор .player-1 .hit + .miss сработает для тега с классом miss, если сразу перед ним расположен тег с классом hit и оба тега расположены внутри тега с классом player-1.


li {
  background-color: white;
  }
  
  .third + li {
    background-color: red;
    }
    
.first + li  {
  background-color: red;
  }   
  
.shooter-2 .third + li  {
  background-color: yellow;
  }   

Дочерние селекторы

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

Взгляните на пример:


  
...
  
...


По отношению к списку 
 элементы 
 являются дочерними элементами и потомками, а  — потомки, но не дочерние элементы.
Контекстные селекторы влияют на всех потомков, что не всегда удобно. 
Иногда необходимо задать стили только для дочерних элементов. 
Особенно это полезно при работе с многоуровневыми списками.

Для этого существует дочерний селектор, в котором используется символ >. 

Например: ul > li или ul > li > span.

.places li {
  border-bottom: 2px solid #cccccc;
}

.places span {
  font-weight: bold;
}

.places ul > li {
  border-bottom: none;
  
}


.places ul > li > span {
  border-bottom: none;
  font-weight: normal;
}

Псевдоклассы

Псевдоклассы — это дополнения к обычным селекторам, которые делают их ещё точнее и мощнее. 
Обычный селектор — это снайперский прицел, а с псевдоклассом он становится прибором ночного видения.

Псевдокласс добавляется к селектору c помощью символа :  , вот так селектор:псевдокласс. 


Например:

a:visited { ... }
li:last-child { ... }
.alert:hover { ... }

Знакомство с псевдоклассами мы начнём с first-child и last-child.

Псевдокласс first-child позволяет выбрать первый дочерний элемент родителя, а last-child — последний дочерний элемент. 


Например:
li:last-child { ... }
Этот селектор выберет последний элемент списка.

li {
  background-color: white;
    }
    
li:first-child {
  background-color: red;
  }    
  
li:last-child {
  background-color: yellow;
  }  
  

Псевдокласс :nth-child

Псевдоклассы из предыдущего примера относятся к семейству псевдоклассов, помогающих выбирать элементы по их расположению.
С помощью псевдокласса nth-child можно выбирать теги по порядковому номеру, не используя классы. 
Синтаксис псевдокласса: селектор:nth-child(выражение). 
Выражением может быть число или формула. 

Например:

1. li:nth-child(2) { ... }
2. li:nth-child(4) { ... }
3. li:nth-child(2n) { ... }

Первый селектор выберет второй элемент списка, второй селектор — четвёртый элемент списка, третий селектор — все чётные элементы. 

li {
  background-color: white;
  }
  
li:nth-child(3) {
  background-color: red;
  
  }  
  
  li:nth-child(4) {
  background-color: red;
  
  }  

:nth-child и контекстные селекторы

Селекторы с псевдоклассами хорошо сочетаются с контекстными селекторами.
Например, следующий селектор выберет третий тег 
 внутри блока с классом shooter-2.

.shooter-2 li:nth-child(3) { ... }

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

li:nth-child(4) .text { ... }



li {
  background-color: white;
  }
  
.shooter-1 li:nth-child(2) {
  background-color: red;
  }
.shooter-1 li:nth-child(5) {
  background-color: red;
  }  
  
.shooter-2 li:nth-child(1) {
  background-color: red;
  }
  

Псевдокласс :hover

Некоторые псевдоклассы позволяют выбирать элементы, с которыми взаимодействует пользователь. 
Сначала познакомимся с псевдоклассом :hover.

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

Примеры:
1. a:hover { ... }
2. tr:hover { ... }
3 .menu-item:hover { ... }

Первый селектор выбирает ссылку, второй строку таблицы, третий элемент с классом menu-item, но только в том случае, если на них наведён курсор мыши.
Благодаря этому псевдоклассу можно добавлять в интерфейс динамику и интерактивность, так как элементы начинают реагировать на действия пользователя, изменяя свой внешний вид.

table {
  background: rgba(255, 255, 255, 0.95);
}

tr:hover {
  background-color: #fcf8e3;
}

strong:hover {
  color: #0088cc;
}

Динамические эффекты с помощью :hover

Интересовались ли вы, как с помощью CSS создаются выпадающие меню?
Львиная доля динамических эффектов, создаваемых с помощью CSS, опираются на несколько псевдоклассов, главный из которых, конечно же, :hover. 
Весь секрет заключается в сочетании контекстных селекторов и псевдоклассов. 

Посмотрите на пример:

li.top ul.submenu {
  display: none;
}

li.top:hover ul.submenu {
  display: block;
}


Первое правило прячет список-подменю. 
Второе правило гласит: «если на верхний пункт меню, в котором находится подменю, наведут курсор, то надо показать подменю». 
Вот так всё просто.

Общий принцип такой: родительский элемент реагирует на наведение мыши и изменяет свойства элементов-потомков. 
То есть всё работает на контекстных селекторах вида селектор1:hover селектор2.


em {
  display: none;
}

:hover > em {
  display: inline;
  color:red;
  }
  
strong:hover {
  color: #0088cc;
  }  

Псевдоклассы :link, :visited и :active

Отвлечёмся от биатлона и познакомимся с псевдоклассами для ссылок.

:link выбирает ещё не посещённые ссылки.
:visited выбирает посещённые ссылки.
:active выбирает активные ссылки (кнопка мыши зажата на ссылке).

Пример задания CSS-правил для ссылок:
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

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

a:link {
  color: black;
  }
  
a:visited {
  color: #cccccc;
  } 
  
a:active {
  color: green;
  }  

Псевдокласс :focus

Псевдокласс :focus позволяет выбрать элемент, который в данный момент в фокусе. 
Например, текстовое поле, в которое установлен курсор, находится в фокусе.
В фокусе могут быть не только текстовые поля. 
Если вы переключаетесь между элементами веб-страницы с помощью клавиши tab, то в фокус будут попадать ссылки.

Пример использования псевдокласса:

input:focus {
  /* стили для поля в фокусе */
}




  
    
    
    
    
  
  
    

      Логин
      

      Пароль
      

      
    
  


form input:focus {
  border-color: #0088cc;
}

Селекторы атрибутов

Существуют селекторы, которые позволяют выбирать элементы по любым атрибутам.
Чаще всего такие селекторы используются при работе с формами, так как поля форм имеют атрибут type с разными значениями.
Селекторы атрибутов записываются с использованием квадратных скобок: элемент[атрибут]. 

Примеры селекторов:

1. input[checked] { ... }
2. input[type="text"] { ... }

Первый селектор выберет поля формы, у которых есть атрибут checked, 
второй селектор выберет поля формы, у которых атрибут type имеет значение text.

input[required] {
  background-color: #fcf8e3;
  }

input[name="password"] {
  background-color: #f2dede;
  }
  
input[type="submit"] {
  border-color: green;
  }  

Селектор по id

Существует ещё один HTML-атрибут, для которого существует специальный селектор. 
Этот атрибут id (идентификатор), а селектор записывается с помощью символа #, например, #some-id.
На значение id распространяются те же ограничения, что и на имя класса. 
Также id должен быть уникальным на странице.

Пример:

HTML
Приветствие!
CSS#greeting {
  ...
}

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

итог

  
    
    
    
    
  
  
    
Результаты соревнования
    

      

        
Игрок
        
Раунд 1
        
Раунд 2
        
Раунд 3
        
 Итог
      
      
 
        
Иван Васильев
        
10
        
-20
        
30
        
  20  
      
      

        
Анна Иванова
        
50
        
10
        
-30
        
 30 
      
      

        
Василий Ольгин
        
 50
        
 50
        
 50
        
 150 
      
      

        
Ольга Аннова
        
-10
        
-20
        
40
        
  10 
      
          
  



h1 {
  font-size: 20px;
}

h1 + .results {
  margin-top: 20px;
}

th {
  font-weight: normal;
  background-color: #dad7f4;
  text-align: left;
}

td:nth-child(5) > span {
  font-weight: bold;
}

.disqualified {
  text-decoration: line-through;
}

.player-1 .total {
  background-color: silver;
}

.player-2 .total {
  background-color: gold;
}

.player-3 .total {
  background-color: red;
}

.player-4 .total {
  background-color: chocolate;
}

Ссылки

https://htmlacademy.ru/

Первая форма

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

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

У тега  есть два важных атрибута:
action задаёт адрес, URL, отправки формы;
method задаёт метод отправки формы.

Пример:

  поля формы


Для отправки формы обычно используют методы get или post. 
Если не указать атрибут method, то будет использован get.

Метод get посылает данные формы в строке запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса. 
Например:
https://www.google.com/search?q=htmlacademy

Метод get лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты поиска и передать её кому-то.

Метод post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. 
Например, при редактировании личного профиля.

Текстовое поле ввода

Большинство полей форм создаётся с помощью одиночного тега . 

У этого тега два обязательных атрибута:
type задаёт тип поля;
name задаёт имя поля.

Тип поля влияет на то, как оно будет отображаться и вести себя. 
Самый распространённый тип — это text, который обозначает текстовое поле. 
Он же используется по умолчанию. 

Пример:

  


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

Идентификатор и значение по умолчанию

Атрибут id поля ввода обозначает идентификатор. 
Он должен быть уникальным не только в пределах формы, но и на всей странице.
Обычно идентификаторы используют для повышения удобства работы с формой, например, создают подписи, связанные с мелкими полями. 
При нажатии на такие подписи активируется связанное поле. 
И это удобно, так как по большой подписи попасть легче, чем по маленькому полю. 
Также идентификаторы используют в JavaScript для работы с полями.

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

Атрибут value задаёт значение поля ввода по умолчанию. 
Это тоже повышает удобство.

Согласитесь, приятно зайти в огромную анкету на каких-нибудь госуслугах, 
а там ваши паспортные данные уже подставлены в нужные поля и заполнять их не надо. 
И всё благодаря тому, что программист добавил к полям атрибут value с нужными данными.

Подпись для поля ввода

Можно подумать, что сделать подпись к полю очень просто. 

Пишем текст рядом с полем и всё готово:
Подпись 

На самом деле этого недостаточно — мы получили просто кусок текста и поле, 
которые расположены рядом друг с другом, но логически никак не связаны.
Есть специальный тег, который позволяет смело сказать: 
«Этот кусок текста действительно подпись к этому полю!». 
Это парный тег .

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

Создавать подписи к полям с помощью  — хороший приём. 
Используйте его.

Первый способ создать подпись — просто обернуть текст подписи и тег поля в тег , вот так:


  Подпись 


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

Связываем подпись и поле по id

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

Алгоритм такой:
Добавляем к полю ввода идентификатор с помощью атрибута id.
Оборачиваем текст подписи в тег .
Добавляем тегу  атрибут for.

В атрибут for записываем такое же значение, что и в атрибуте id у поля.

Например:
Имя пользователя
...
много-много других тегов
...






  
    
    
    
  
  
    
Форма входа

    

      Ваш логин
      
      

      

       Ваш пароль 
      
    
  

Поле для ввода пароля

Мы создаём простую форму входа. 
Уже есть два поля и связанные с ними подписи. Одно из полей предназначено для ввода пароля, но сейчас оно является простым текстовым полем.
Чтобы сделать его настоящим полем для ввода пароля, в котором текст будет отображаться «звёздочками», нужно просто изменить значение атрибута type на password.



  
    
    
    
  
  
    
Форма входа

    

      Ваш логин
      
      

      

      Ваш пароль
      
    
  

Кнопка отправки формы

Такая кнопка создаётся с помощью тега  c типом submit.
Надпись на кнопке можно задать с помощью атрибута value. 
Для кнопки отправки формы задавать имя необязательно. 
Но если имя задано, то на сервер будут отправляться имя и значение кнопки.
Обычно имя для кнопки отправки задают, когда в форме несколько кнопок, отвечающих за разные действия. 
Браузер отправляет на сервер имя и значение только той из них, на которую нажал пользователь. 
Таким образом, сервер может понять, какую кнопку нажали и что нужно сделать.





  
    
    
    
  
  
    
Форма входа

    

      Ваш логин
      
      

      

      Ваш пароль
      
      

      

       
    
  

Многострочное поле ввода

Мы научились создавать простейшие формы с текстовыми полями и кнопками. 
А теперь познакомимся с более сложными элементами формы.
Многострочное текстовое поле создаётся с помощью парного тега . 
У него есть атрибуты name и id, которые аналогичны атрибутам текстового поля.
Атрибут rows принимает целочисленное значение и задаёт высоту многострочного поля в строках. 
Атрибут cols задаёт ширину поля в символах. В качестве ширины символа берётся некоторая «усреднённая ширина».
Атрибут value у многострочного поля отсутствует, а значение по умолчанию задаётся по-другому. 
Текст, расположенный между открывающим и закрывающим тегом <textarea> и является значением по умолчанию. 

Вот так:
<textarea>Значение по умолчанию

Чекбокс или «галочка»

Поле-галочка — это тег  с типом checkbox.
Галочка работает по принципу «либо да, либо нет». 
Если галочка стоит, то браузер посылает переменную с именем поля на сервер, если галочки нет, то не посылается ничего. 
Таким образом, атрибут value не является обязательным.
Чтобы галочка стояла по умолчанию, нужно добавить к тегу атрибут checked. 

Вот так:


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

Переключатель или «радиобаттон»

Поле-переключатель — это тег  с типом radio.
Обычно переключатели размещают группами по несколько штук. 
Причём у переключателей из одной группы должно быть одинаковое имя и разные значения, которые задаются c помощью value.
Таким образом, атрибут value является для переключателей обязательным. 
Браузер отправляет на сервер значение value выбранного переключателя.
В этом задании мы начнём создавать переключатель.

Группа переключателей

Теперь добавим ещё один вариант ответа в наш переключатель. 
Для этого нужно добавить ещё один  с таким же именем, но другим значением value.
Подобным образом можно создавать группы переключателей с любым количеством вариантов.
Чтобы сделать какой-либо вариант в переключателе выбранным по умолчанию, нужно добавить к соответствующему тегу  атрибут checked, как у поля-галочки.
Кстати, имя поля у переключателей одной группы должно быть одинаковым, но идентификаторы всегда должны быть уникальными.

Раскрывающийся список или «селект»

Раскрывающийся список так же, как и переключатель, позволяет выбрать один вариант ответа из нескольких.
Раскрывающийся список создаётся с помощью парного тега , у которого есть знакомые атрибуты name и id.
Варианты ответов задаются с помощью парных тегов , которые должны располагаться внутри тега . 

Например:

  Светлая тема
  Тёмная тема
  ...


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

«Мультиселект»

Раскрывающийся список можно превратить в так называемый «мультиселект», то есть список, в котором можно выбрать не один, а несколько вариантов.
Чтобы сделать это, нужно добавить к тегу  атрибут multiple.
Выбрать несколько вариантов можно, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на MacOS.
Высоту мультиселекта можно изменять с помощью атрибута size тега .
Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам  добавить атрибут selected.
При отправке данных мультиселекта на сервер с PHP после имени в значении атрибута name ставятся символы квадратных скобок []. 
Например, . 
Это необязательное требование для имени мультиселекта, а нужно только для корректной обработки данных в PHP.




  
    
    
    
  
  
    
Анкета

    

      
В мультиселекте можно выбрать несколько вариантов, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на MacOS.

      
Любимые дни недели:
      
        Понедельник
        Вторник
        Среда
        Четверг
        Пятница
        Суббота
        Воскресенье
      

      
    
  

Поле для загрузки файлов

Поле для загрузки файлов — это тег  с типом file. 
Для этого поля обязательным атрибутом является имя.
Чтобы поле заработало и браузер смог передать выбранный файл на сервер, 
необходимо добавить форме атрибут enctype со значением multipart/form-data. 
Не полю, а форме.

Этот атрибут указывает браузеру, в каком виде пересылать данные. 
Если вы хотите отправить на сервер файл, данные из формы эффективнее всего передавать по частям. 
За это и отвечает значение multipart/form-data.

Кстати, внешний вид полей с типом file очень сильно отличается в зависимости от операционной системы и очень плохо изменяется с помощью стилей.




  
    
    
    
  
  
    
Профиль

    

      
Выберите изображение для своего аватара:
      
      
    
  

Скрытое поле

И ещё одно невидимое и очень полезное поле. 
Это скрытое поле. 
Его используют, когда в форме нужно отправить какие-то дополнительные служебные данные, которые не вводятся пользователем.
Например, это могут быть реквизиты заказа или номер пользователя в форме оплаты.

Скрытое поле — это тег  с типом hidden.

ссылки

https://htmlacademy.ru/

Простейшая таблица

Простейшая таблица описывается с помощью трёх тегов:
 обозначает таблицу.
 расшифровывается как «table row», обозначает строку таблицы.
, а те, в свою очередь, внутри 
 расшифровывается как «table data», обозначает ячейку внутри строки таблицы.
Теги 
 располагаются внутри тегов 
. 
Почти всё текстовое содержимое таблицы размещается внутри тегов  должно быть одинаковое количество  добавить по ячейке 
.
В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех 
.
Для того чтобы добавить столбец в таблицу, надо в каждую строку 


Пример


  
    
    
  
  
  
Распределение браузеров
     

      

        
Браузер
        
Посещения
      
      

        
Mozilla Firefox
        
163
      
      

        
Google Chrome
        
78
      
      

        
Safari
        
35
      
    
   


Задаём рамки с помощью CSS 
Таблицы в предыдущих заданиях отображались с рамками по умолчанию. 
Такие рамки отображаются, если у тега  задан атрибут border с ненулевым значением.
Но с помощью атрибута border гибко управлять рамками не получается. 
С его помощью можно только изменять их толщину.
Улучшаем отображение рамок
По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.
Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. 
Вот так:

table {
  border-collapse: collapse;
}

Значение collapse убирает двойные рамки: 
схлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы. 
При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину.

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

Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:
border-top,
border-right,
border-bottom,
border-left.

Эти свойства задают отображение только одной рамки ячейки: 
верхней, правой, нижней или левой соответственно.

table {
  border-collapse: collapse;
  border: 3px solid black;
}

td {
  border: 2px solid lightgray;
}

.td_black {
border-top: 1px solid black;
}
 
Отступы между ячейками
Большинство задач по оформлению таблиц решаются с помощью работы с рамками, отступами внутри ячеек, изменения цвета фона ячеек.
Помимо внутренних отступов можно задавать отступы между ячейками таблицы.
Отступы между ячейками не работают с border-collapse: 
collapse, что достаточно логично, ведь рамки ячеек в этом режиме «склеены» и их не разорвать.

Отступы между ячейками можно задать:
с помощью атрибута cellspacing тега 

или c помощью CSS-свойства border-spacing.
Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.

Ячейки-заголовки 
Поздравляем! Вы научились создавать простейшие таблицы и оформлять их. 
В следующей части курса мы познакомимся с ещё несколькими табличными тегами и научимся создавать более сложные таблицы.
Обычно в таблицах выделяют названия столбцов или строк.
В HTML для этого предусмотрен специальный тег 
, для него стилями можно задавать все те же свойства.
По умолчанию текст внутри 

		
	


	


	


		
			

				
					Рубрики				
				

					html				

			


			
Конспект «Оформление текста»
		


			


									

						
							
								Автор записи							
													
						
							Автор: Evgeny Yakovlev						
					
										

						
							
								Дата записи							
													
						
							2020/04/22
						
					
					
			


		


		
	




	


		


			
ссылка 
https://htmlacademy.ru/courses/309/run/19

Свойство font-size  
Управляет размером шрифта. 
Значение свойства задаёт желаемую высоту символа шрифта. 
Причём единицы измерения могут быть абсолютными или относительными.

Самая часто используемая единица измерения размера шрифта — пиксели px:
p {
  font-size: 20px;
}

Но, чтобы при изменении основного размера шрифта родителя его дочерние элементы пропорционально меняли свои размеры шрифта, есть специальная единица измерения — em.
Величина 1em — это такой же размер шрифта, что и у родителя. 
Соответственно, если нужно, чтобы шрифт дочернего элемента был всегда в 2 раза больше родительского, то надо задать значение 2em:
h1 {
  font-size: 2em;
}

Свойство line-height
Свойство управляет высотой строки или межстрочным интервалом.
По умолчанию это свойство имеет значение normal. 
Оно указывает браузеру, что межстрочный интервал нужно подобрать автоматически, исходя из размера шрифта. 
Спецификация рекомендует устанавливать его в пределах 100-120% от размера шрифта. 

То есть:
p {
  font-size: 10px;
  line-height: normal; /* значение будет примерно 12px */
}

Значение normal позволяет всем нестилизованным текстам выглядеть удобочитаемо. 
Однако, если есть необходимость отойти от стилизации по умолчанию, line-height можно задать фиксированное абсолютное значение в px.

p {
  font-size: 16px;
  line-height: 26px;
}

Если нужно задать line-height относительное значение, но не такое, как normal, то значение задаётся в процентах или в виде множителя.
В таком случае браузер вычисляет значение динамически в зависимости от font-size:

p {
  font-size: 10px;
  line-height: 150%; /* вычисленное значение: 10px * 150% = 15px */
  line-height: 2;    /* вычисленное значение: 10px * 2 = 20px */
}

Относительные значения более гибкие, чем абсолютные. 
Но для простых сайтов фиксированных font-size и line-height будет вполне достаточно.

Свойство font-family
В значении этого свойства указывается список названий шрифтов, перечисленных через запятую. 
В начале списка располагают самый желаемый шрифт, затем менее желаемый, а в самом конце списка — общий тип шрифта. 
Браузер проходит по списку слева направо и использует первый найденный в системе или на сайте шрифт. 
Если название шрифта состоит из нескольких слов, то его нужно заключать в кавычки.

body {
  font-family: "PT Sans", "Arial", sans-serif;
}

Свойство font-weight
Свойство задаёт насыщенность или толщину шрифта. 
Шрифт может быть жирнее или тоньше обычного начертания. 
В качестве значения можно использовать ключевое слово или число. 

Самые часто встречающиеся значения:
400 или normal — обычный шрифт, значение по умолчанию;
700 или bold — жирный шрифт.


Например:
h1 {
  font-weight: 400; /* то же самое что и normal */
}

p {
  font-weight: bold; /* то же самое что и 700 */
}


Свойство text-align
Описывает, как выравнивается текст и другие инлайновые элементы (изображения, инлайн-блоки, инлайн-таблицы и другие) внутри блока по горизонтали.

Свойство может принимать следующие значения:

left — выравнивание по левому краю блока, это значение по умолчанию;
right — по правому краю блока;
center — по центру блока;
justify — по ширине блока, при этом слова в строке будут размещаться так, чтобы занять равномерно всё пространство строки (пробелы между словами в таком случае становятся неравномерными, 
          так как браузер «растягивает» слова в строке).


Важно помнить, что свойство text-align применяется именно к самому блоку-контейнеру, внутри которого находится текстовый контент:
HTML:

  Я текст внутри абзаца


CSS:
p {
  text-align: center;
}

Свойство vertical-align
Свойством можно выравнивать инлайновые элементы относительно содержащей его строки. 
Самый простой пример — выровнять картинку  по вертикали в текстовой строке.

У свойства vertical-align много значений, но самые часто используемые:
top — выравнивание по верхнему краю строки;
middle — по середине строки;
bottom — по нижнему краю строки;
baseline — по базовой линии строки (значение по умолчанию).
В отличие от text-align свойство vertical-align задаётся самому элементу, а не содержащему его контейнеру:

HTML:

  
  Я текст внутри абзаца


CSS:
img {
  vertical-align: middle;
}

Свойство color
Цветом текста можно управлять свойством color.
Цвет может быть задан в виде ключевого слова (полный список ключевых слов приводится в спецификации). 

Например:
color: black; /* чёрный цвет */
color: red;   /* красный цвет */
color: white; /* белый цвет */

Ещё один вариант указания цвета — в виде шестнадцатеричного значения. 
В этом случае цвет формируется из красной, зелёной и синей составляющих, заданных в виде шестнадцатеричного числа от 00 до ff. 
Помимо шести, цветовой код может содержать три знака, в этом случае второй символ в цветовых составляющих дублируется первым:
color: #000000; /* чёрный цвет */
color: #f00;    /* красный цвет, то же что #ff0000 */
color: #fff;    /* белый цвет, то же что #ffffff */

Если не хочется иметь дело с шестнадцатеричными значениями, можно воспользоваться специальной функцией rgb, 
в которой указывается цвет в более привычном десятичном виде в диапазоне от 0 до 255 также в виде трёх цветовых составляющих, перечисленных через запятую:
color: rgb(0, 0, 0)       /* чёрный, то же что #000000 */
color: rgb(255, 0, 0)     /* красный, то же что #ff0000 */
color: rgb(255, 255, 255) /* белый, то же что #ffffff */

У функции rgb есть расширенная версия — rgba. 
В этом случае помимо указания цвета последним значением указывается степень непрозрачности цвета — alpha. 
Значение может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный):
color: rgba(0, 0, 0, 0.5)      /* чёрный, непрозрачный на 50% */
color: rgba(255, 0, 0, 0.3)     /* красный, непрозрачный на 30% */
color: rgba(255, 255, 255, 0.9) /* белый, непрозрачный на 90% */

Контраст цвета текста и фона
Фоновое изображение и фоновый цвет блока всегда должен достаточно сильно контрастировать с цветом текста в этом блоке. 
Чем больше контраст, тем удобнее этот текст читать в разных условиях освещённости и на разных устройствах. 
Поэтому если вы задаёте блоку фоновое изображение, нужно обязательно дополнительно задавать подходящий фоновый цвет. 
В этом случае, пока изображение загружается, или в случае, если оно совсем не загрузится, текст всё равно можно будет прочитать:
p {
  /* идеальный контраст: цвет текста белый, цвет фона — чёрный */
  background-color: #000000;
  color: #ffffff;
}

span {
  /* плохой контраст: цвет текста и фона — серые */
  background-color: #cccccc;
  color: #dddddd;
}

Свойство white-space, управление пробелами
Браузер игнорирует множественные пробелы и переносы строк в HTML-коде. 
С помощью свойства white-space можно управлять пробелами и переносами строк. 
Свойство принимает значения:
nowrap — схлопывает лишние пробелы и отображает весь текст одной строкой без переносов;
pre — сохраняет пробелы и переносы как в исходном коде аналогично тегу pre
pre-wrap — работает как значение pre, но добавляет автоматические переносы, если текст не помещается в контейнер;
normal — режим по умолчанию: лишние пробелы и переносы строк схлопываются, текст переносится, пробелы в конце строк удаляются.

Свойство text-decoration
Задаёт дополнительное оформление текста. 
Значения свойства:
underline — подчёркивание;
line-through — зачёркивание;
overline — надчёркивание;
none — убирает вышеперечисленные эффекты.

К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел:
p {
  text-decoration: underline; /* подчёркнутый текст */
}

span {
  /* подчёркнутый и зачёркнутый текст */
  text-decoration: underline line-through;
}

Свойство text-decoration — составное. 
Оно раскладывается на отдельные свойства:
text-decoration-line — вид линии: зачёркивание, подчёркивание или надчёркивание;
text-decoration-style — стиль линии, может принимать значения:
solid — сплошная линия;
double — двойная линия;
dotted — точечная линия;
dashed — пунктирная линия;
wavy — волнистая линия.
text-decoration-color — цвет линии.



Свойство font-style
Свойством можно задать начертание текста. 
Его основные значения:
normal — обычное начертание;
italic — курсивное начертание.
oblique — наклонное начертание.
Если задано значение italic, браузер будет пытаться найти в заданном шрифте отдельное курсивное начертание символов. 
В некоторых шрифтах отдельный курсив предусмотрен.
Если отдельного курсивного начертания в шрифте не предусмотрено, то браузер сделает текст наклонным, то есть сымитирует курсив. 
Что равноценно заданию тексту значения font-style: oblique.

Свойство text-transform
С его помощью можно управлять регистром символов: делать буквы строчными (маленькими) или заглавными (большими). 
Значения свойства:
lowercase — все строчные;
uppercase — все заглавные;
capitalize — каждое слово начинается с большой буквы;
none — отменяет изменение регистра.

Отступы 
Важный фактор того, что текст в блоке будет удобочитаемым, это наличие свободного пространства в блоке для этого текста. 
Вокруг текста должно быть достаточно «воздуха», он не должен «прилипать» к краям, ему не должно быть «тесно».

За отступы в CSS отвечают два свойства: padding задаёт внутренние отступы в блоке, а margin задаёт внешние отступы.



		


	


	

		
	


	


	


	


		
			

				
					Рубрики				
				

					html				

			


			
Конспект «Ссылки и изображения»
		


			


									

						
							
								Автор записи							
													
						
							Автор: Evgeny Yakovlev						
					
										

						
							
								Дата записи							
													
						
							2020/04/22
						
					
					
			


		


		
	




	


		


			
ссылка
https://htmlacademy.ru/

Конспект «Ссылки и изображения»

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

Например:
HTML Academy

Тег  можно использовать вообще без адреса, то есть без атрибута href. 
Такой тег обозначает «ссылку-заглушку», которая в других условиях может стать обычной ссылкой. 

Часто ссылки-заглушки используют, чтобы показать, что мы находимся на текущей странице:

  
1 страница
  
2 страница
  
3 страница


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


Абсолютные ссылки
Если нужно сделать ссылку на другой сайт в интернете, то необходимо использовать «обычный» адрес. 
Этот «обычный» или полный адрес называется абсолютным. 

Выглядит он, например, так:
https://site.ru/blog/index.html

Абсолютные адреса содержат минимум три части: 
протокол, имя сервера и путь.



Относительные ссылки
Когда файл по ссылке должен открываться локально на компьютере, используются относительные адреса. 
В отличие от «обычных» адресов, в нём нет адреса сайта.

 Например:
day-2.html
Относительные адреса работают не только для файлов на компьютере, но и для страниц в сети. 
Если выложить два каких-то файла в интернет (не меняя их взаимное расположение), то их ссылка друг на друга всё равно будет работать.
Если в адресе нет имени сервера или протокола, то это относительный адрес.


Ссылки на файл
По ссылкам можно не только переходить, но и скачивать файлы. 
Для этого необходимо просто в атрибуте href прописать ссылку на этот файл. 
А для того чтобы предотвратить открытие файлов прямо в браузере, у тега  существует атрибут download.
Браузер скачает меня, а не будет читать



Ссылки-якоря
Ссылка-якорь — это обычная ссылка, в адресе которой используется символ #, после которого следует идентификатор элемента.
Идентификатор создаётся с помощью атрибута id у того тега, к которому надо перейти при щелчке по ссылке.
Глава 1
Ссылка-якорь используется для прокрутки к заданной части страницы, в том числе используется и в абсолютных адресах.



Изображения
Подключение изображений
Для подключения изображений существует тег , для него не требуется закрывающего тега, а путь к картинке задаётся в атрибуте src. 
Например:



Форматы изображений
Существует несколько основных форматов изображений: JPEG, PNG, SVG и GIF.

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


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


Формат PNG позволяет сохранять изображения, в которых требуется особенная чёткость. 
Главная особенность этого формата — поддержка прозрачности. 
Подходит для изображений с прозрачностью и полупрозрачностью, когда необходима повышенная точность полноцветных изображений 
и для изображений с резкими переходами цветов.


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


Размеры изображения
Для управления шириной или высотой изображения, используются атрибуты width и height. 
Размеры в этих атрибутах задаются без единиц измерения.

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


Атрибут alt
В случаях, когда картинка не может отобразиться, для того, чтобы было понятно, что на ней изображено, существует альтернативный текст. 
Также альтернативный текст помогает сайтам оставаться доступными, например, для категории пользователей, которая не имеет возможности видеть картинки.
Альтернативный текст изображения задаётся с помощью атрибута alt. 
Например:



Figure и figcaption
Тег 
 подходит для любого иллюстративного или демонстрационного материала, которым можно дополнить содержание документа: 
схемы, графики, примеры кода, таблицы и так далее. 
При удалении такого материала основное содержание не должно пострадать, иначе это не дополнительный материал и тег 
 не подходит для его разметки.
Для разъясняющего комментария к такому иллюстративному материалу существует тег 

		


	


	

		
	


	


	


	


		
			

				
					Рубрики				
				

					html				

			


			
Конспект: Разметка текста \ html
		


			


									

						
							
								Автор записи							
													
						
							Автор: Evgeny Yakovlev						
					
										

						
							
								Дата записи							
													
						
							2020/04/22
						
					
					
			


		


		
	




	


		


			
Cсылки
 
https://htmlacademy.ru/

Неупорядоченный список:
Тег 
 (сокращение от «unordered list»). 
Используется, когда порядок элементов не важен. 
Например, для разметки перечня ссылок в меню, преимуществ товара, ингредиентов в составе продукта.

Непосредственно в теге 
 могут находиться только теги 
 (сокращение от «list item»), 
которые обозначают элементы или пункты списка:


  
Я пункт списка, могу быть на любом месте
  
И я пункт списка, и мне тоже не важен порядок


По умолчанию элементы 
 отмечаются маркерами такого же цвета, как цвет текста.


Упорядоченный список: 
Тег 
 (сокращение от «ordered list»). 
В этом списке действительно важно, в каком порядке идут элементы. 
Упорядоченные списки подходят для разметки алгоритмов, инструкций, рецептов, результатов соревнований и так далее.

Пункты упорядоченного списка тоже размечаются с помощью тега 
. 

Пример кода:


  
Я первый и только первый пункт
  
Я не я, если я не второй пункт
  
Третий после стольких лет? Всегда!


По умолчанию перед элементами 
 ставится их порядковый номер. 
У 
 может быть несколько атрибутов: start, reversed и type.


Атрибут start меняет стартовое число нумерации пунктов. 
Может быть отрицательным.


Атрибут reversed меняет направление нумерации на противоположный. 
Этот атрибут не требует значения.

С помощью атрибута type можно задавать различные типы маркеров: 
строчные и заглавные латинские буквы или римские цифры.

Список описаний: 
Тег 
 (сокращение от «description list»). 
Список описаний используется для разметки вопросов-ответов, наименований и определений, категорий и тем. 

Он создаётся с помощью трёх тегов:

 обозначает сам список описаний;
 (сокращение от «description term») обозначает термин;
 (сокращение от «description definition») обозначает описание или определение.

Теги 
 и 
 пишутся внутри 
. 
Каждый список 
 может содержать один или несколько терминов и одно или несколько описаний для каждого термина. 

Пример кода:

  
HTML
  
Язык гипертекстовой разметки
  
CSS
  
Каскадные таблицы стилей
  
Язык для оформления HTML-документов


По умолчанию браузер добавляет небольшой отступ слева от определений.

Переформатированный текст и код: 
!!! спец символы больше и меньше пропущены
Тег "pre" (сокращение от «preformatted text»). 
Используется для отображения примеров кода, также применяется для отображения картинок ASCII Art. 

Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега "pre".

Пример:
pre
        переформатированного
        текста     с сохранёнными пробелами
                     и переносами строк
/pre




Обозначения фрагментов кода: 
Тег . 
Используется для обозначения фрагментов кода.

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

Тег ul — это неупорядоченный список.
Тег  можно вкладывать внутрь тега "pre".


Цитаты:
Небольшие цитаты
Тег  (сокращение от «quote»). 
Предназначен для выделения цитат внутри предложения. 
Текст внутри тега браузер автоматически обрамляет кавычками, поэтому добавлять кавычки вручную не нужно.

Источник цитат
Тег . 
В нём можно указывать помимо адреса источника цитаты ещё и название произведения, откуда цитируется текст, 
а также имя автора или организации, чей текст цитируется. 
Содержимое  в браузере выделяется курсивом.

По словам Чарльза Буковски — Интеллектуал о простой вещи говорит сложно — художник сложную вещь описывает простыми словами.
Тег  может быть самостоятельным и не привязываться к цитате:
Какой доктор ваш любимый (в сериале Доктор Кто)?

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


  
Ум ценится дорого, когда дешевеет сила.
  Джейсон Стэтхэм


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

Символы-мнемоники:

Это особые строки, которые начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). 
Например, знак меньше на страницу можно вставить мнемоникой '<' (less than), а знак больше мнемоникой '>' (greater than):

Некоторые символы в HTML зарезервированы, то есть браузер считает их HTML-кодом. 
Например, любой текст после знака меньше (<) браузер будет пытаться интерпретировать как тег и на странице не отобразит. 
Чтобы использовать специальные символы в тексте страницы как обычные символы их нужно заменить на символы-мнемоники.

& lt ;  <
& gt ;  > 

Перенос строк:
Тег 
 (сокращение от «line break»). 
Применяется, чтобы вставить в текст перенос строки, не создавая при этом абзац. 
Например, при разметке стихов или текстов песен.

Верхний и нижний индексы:
Теги  и . 
Названия образованы от слов «superscript» и «subscript».

Тег  отображает текст в виде верхнего индекса, а  отображает текст в виде нижнего индекса.

Их используют для указания единиц измерения или для написания простых формул:
20м2
H2O
X3+X2=1

Для создания более сложных формул, эти теги можно использовать внутри друг друга.

Дата и время:
Тег . 
С помощью него можно описывать даты одновременно и для человека, и для машины. 
Для указания даты в машиночитаемом формате ISO 8601 существует атрибут datetime и выглядит так:
09:54 утра
18 ноября 2015
в прошлую субботу
вчера

Браузер отображает только содержимое тега, а содержимое datetime не отображается.

Акцентирование внимания:
Теги  и . 
Названия образованы от слов «emphasis» и «italic». 
Предназначены для акцентирования внимания на слово или фразу. 
Визуально оба тега одинаковы, они выделяют текст курсивом.

Тег  определяет текст, на который сделан особый акцент, меняющий смысл предложения.

Я просто обожаю холодные зимние дни!

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

В речи такой текст обычно выделяется интонационно:
Он взглянул в окно и подумал — такого просто не может быть!


Выделение и придание важности:
Теги  и . 
Название  образовано от слова «bold». 
Отображаются оба тега одинаково, они выделяют текст жирным.

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

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

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

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


Описание изменений:
Теги  и . 
Названия тегов образованы от слов «delete» и «insert». 
Предназначены для описания изменений в документе.

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

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


  
Почистить посудомоечную машину
  
Погулять
  
Поспать
  
Купить принтер



Разделение контента:

Теги 
 и . 
Это «чистые» элементы, и обычно они отлично подходят в качестве обёртки для стилизации или группировки других элементов. 
Использовать эти теги рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось.

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

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



  

    
…
    
…
  
  
Текст, в котором выделена фраза





		


	


	

		
	


	


	


	


		
			

				
					Рубрики				
				

					html				

			


			
Конспект «Структура HTML-документа»
		


			


									

						
							
								Автор записи							
													
						
							Автор: Evgeny Yakovlev						
					
										

						
							
								Дата записи							
													
						
							2020/04/22
						
					
					
			


		


		
	




	


		


			
ссылки: 
https://htmlacademy.ru/

Конспект «Структура HTML-документа»
Каждый HTML-документ начинается с декларации типа документа или «доктайпа». 
Тип документа необходим, чтобы браузер мог определить версию HTML и правильно отобразить страницу.



Простейшая HTML-страница состоит как минимум из трёх тегов: ,  и . 

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

А в теге  хранится содержание страницы, которое отображается в окне браузера.

Для подключения стилей к странице существует тег . 
Для этого у него есть атрибут href в котором задаётся адрес стилевого файла, 
а значение stylesheet атрибута rel говорит браузеру, что мы подключаем именно стили, а не что-то другое.


  


Ещё один элемент, который располагается в  — это тег 


Ещё один важный тег, располагающийся внутри  это тег . 
Он одиночный, то есть не требует парный закрывающий тег в конце. 
С помощью  можно сообщать браузеру, поисковому роботу или другому устройству различную служебную информацию (или метаинформацию) о вашем сайте: 
кодировку текста, описание контента и так далее. 
Для этого используются теги  с разными атрибутами и их значениями.

Кодировка текста HTML-страницы указывается с помощью атрибута charset:

Самая распространённая современная кодировка — utf-8.

Перечень ключевых слов задаётся тегом , у которого атрибут name имеет значение keywords. 
Ключевые слова (самые важные слова из содержания страницы) перечисляются в атрибуте content через запятую:


Краткое описание (или аннотация) страницы задаётся похожим образом, только значение атрибута name меняется на description:


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

Тег 
 содержит вводную часть страницы, которую чаще называют «шапкой», а тег 
пример index.html 


  
    
    
    
  

  
    

      Контакты в шапке
    

    

      
Неопознанный Енот
      
Junior верстальщик
    

    

      
Давайте познакомимся
      
Пара слов о себе
      
Текст с парой слов о себе.
      
Чем могу быть полезен
      
Текст о том, чем могу быть полезен.
    

    

      
Мои работы

      
Сайт инструктора Кекса
      
Небольшой лендинг о школе для начинающих.

      
Блог начинающего верстальщика
      
Статический блог про обучение HTML и CSS.
    

    
  


пример index.css
html,
body {
  margin: 0;
  font-family: "Arial", sans-serif;
  font-size: 14px;
  line-height: 20px;
}

body {
  min-width: 430px;
  border: 2px dashed #c7e4ff;
}

html::before,
body::before,
header::before,
footer::before,
main::before {
  color: #7fc1ff;
}

main,
header,
footer {
  background-color: #f3faff;
  border: 2px solid #7fc1ff;
}

nav,
section,
article,
aside {
  background-color: #f9f7ff;
  border: 2px solid #9779ec;
}

nav::before,
section::before,
article::before,
aside::before {
  color: #9779ec;
}

h1,
h2,
h3 {
  font-size: 18px;
  background-color: #ffffff;
  border: 2px solid #ff994f;
}

h1::before {
  content: "h1";
  color: #ff994f;
}

h2::before {
  content: "h2";
  color: #ff994f;
}

h3::before {
  content: "h3";
  color: #ff994f;
}

p {
  background-color: #ffffff;
  border: 2px solid #f36dff;
}

p::before {
  color: #f36dff;
  content: "p";
}

* {
  position: relative;
  padding: 25px 25px 20px;
  margin: 0;
  border-radius: 4px;
}

*:not(:last-child) {
  margin-bottom: 20px;
}

*::before {
  position: absolute;
  top: 8px;
  left: 10px;
  font-weight: 700;
  font-size: 11px;
  line-height: 10px;
  letter-spacing: 0.04em;
}

html::before {
  content: "html";
}

body::before {
  content: "body";
}

main::before {
  content: "main";
}

header::before {
  content: "header";
}

footer::before {
  content: "footer";
}

section::before {
  content: "section";
}

article::before {
  content: "article";
}

aside::before {
  content: "aside";
}

nav::before {
  content: "nav";
}



		


	


	

		
	


	


	


	


		
			

				
					Рубрики				
				

					html				

			


			
html вводное
		


			


									

						
							
								Автор записи							
													
						
							Автор: Evgeny Yakovlev						
					
										

						
							
								Дата записи							
													
						
							2019/09/21
						
					
					
			


		


		
	




	


		


			
P - Point of Peresence POP точка присутствия. называют провайдера. или места подключения к сети интернет
N - точки доступа Network Access Point  места объединений нескольких провайдеров.
DNS - сервер доменных системы имен
F - файловый сервер
w - веб сервер
D - домен

протоколы передачи данных:
ip - internet protocol - маршрутизация
tcp - Transmission Control Protocol  - передача данных (подтверждение доставки)
udp - User Datagram Protocol - передача данных (без подтверждения доставки)
ftp - File Transport Protocol - передача файлов
pop - Post Office Protocol - передача почты
smtp - Simple Mail Transfer Protocol - простой протокол передачи почты
imap - Internet Message Access Protocol - передача почты

виды подключений
постоянные - по выделенной линии
сеансовые - коммутированные подключение

файл и расширение
Имя html файла следует писать строчными латинскими буквами.
Можно использовать цифры, знаки подчеркивания и тире.
расширение: .html  .htm

форматы графических файлов
BMP GIF JPEG PCX  PNG

пиксели и разрешения
Растровая графика это графика представленная в пк множеством точек.и это файлы определенного формата.
Разрешение это количество точек на единицу измерения
dpi количество точек на дюйм
ppi количество пикселей на дюйм 
spi  сканер. количество проб на дюйм.
пиксель -pixel - picture element -  минимальный адресуемый элемент двухмерного  растровая изображения - одна точка изображения

примеры размещения графики на странице
любое фото.  
высота 11см ширина 13см 
скан в  300 dpi цветного и черно белого изображения равен  1304 x 1479 . применяют  печатные издания.
скан в 72 dpi цветного  313 x 355 пример для интернет страниц.

баннер реклама
Баннер небольшой рекламный модуль
468x60 полный горизонтальное баннер
465x60 полный горизонтальное Баннер
234x60 половинной Баннер
125x125 квадратный баннер
120x90  Баннер кнопка
120x60  Баннер кнопка
88x31 микро кнопка баннер
120x240 вертикальный баннер
Существуют оговоренные ограничения на Баннер.  на баннер 465x60  10-15 Кбайт
www.promo.ru энциклопедия рекламы

публикация и поиск документов
students.ru
resume.ru
hermitage.ru
Kremlin. ru


		


	


	

		
	


	


	


	


		
			

				
					Рубрики				
				

					html				

			


			
html гипертекстовые ссылки \ a href = url
		


			


									

						
							
								Автор записи							
													
						
							Автор: Evgeny Yakovlev						
					
										

						
							
								Дата записи							
													
						
							2019/09/21
						
					
					
			


		


		
	




	


		


			
Гипертекстовые ссылки нужны для более удобного использования страниц и их связывания.
такая ссылка задается тегами  тело ссылки 
она имеет несколько атрибутов . HREF и NAME обязательны. 
HREF - ссылка за пределы документа 
URL - Uniform Resurce Locator - Унифицированный указатель ресурса
<имя тега значение тега =значение атрибута > полезная нагрузка           

		
	


	


	


	


		
			

				
					Рубрики				
				

					html				

			


			
html связь веб страницы с дополнительных и файлами \ LINK
		


			


									

						
							
								Автор записи							
													
						
							Автор: Evgeny Yakovlev						
					
										

						
							
								Дата записи							
													
						
							2019/09/21
						
					
					
			


		


		
	




	


		


			
не парный тег  обязательный атрибут HREF="целевой адрес" TYPE="тип данных"   REL/REV


		


	


	

		
	


	


, который расшифровывается как «table header» и обозначает ячейку-заголовок. 
Тег 
 аналогичен 
, он так же должен располагаться внутри 
 выделяется жирным и выравнивается по центру ячейки.

Заголовок таблицы 
В предыдущем задании вы создали заголовочные ячейки с помощью подходящих тегов, в этом задании мы создадим подпись к таблице (или заголовок таблицы).
Сейчас подпись Распределение браузеров сделана с помощью заголовка первого уровня. 
В принципе, можно догадаться, что это название таблицы, но семантически правильнее будет сделать это название с помощью тега 
.
Тег 
 должен размещаться внутри тега , причём непосредственно внутри него и первым, до остальных вложенных тегов. 

Вот так:

  ...
 

  
Текст

Тег заголовка идёт первым внутри таблицы, но с помощью CSS можно переместить заголовок таблицы в любое место: сверху или снизу таблицы, по центру, справа или слева.
По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom, которые обозначают до и после таблицы соответственно.
По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.

caption {
  caption-side: bottom;
  text-align: right;
}


Объединяем ячейки в строках
Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов 
 или 
.
Когда вы задаёте ячейке атрибут colspan со значением 2, то ячейка как бы «растягивается» на ячейку справа, 
но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец. 
Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».



      
Распределение браузеров
      

        
Браузер
        
Посещения
        
 можно удалить 
              
      

        

        
Количество
        
В процентах
      
      

        
Mozilla Firefox
        
163
        
59%
      
      

        
Google Chrome
        
78
        
28%
      
      

        
Safari
        
35
        
13%
      
    


Объединяем ячейки в столбцах 
Объединение ячеек по вертикали немного сложнее. 
Оно осуществляется с помощью атрибута rowspan у тега 
 или 
.
Когда вы задаёте ячейке атрибут rowspan со значением 2, то ячейка как бы «растягивается» на следующую строку. 
При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец. 
Удалив ячейку, которая была под «растянутой», мы избавимся от этого столбца.



  
    
    
    
  
  
    

      
Распределение браузеров
      

        
Браузер
        
Посещения
      
      

        

        
Количество
        
В процентах
      
      

        
Mozilla Firefox
        
163
        
59%
      
      

        
Google Chrome
        
78
        
28%
      
      

        
Safari
        
35
        
13%
      
    
  



table {
  border-collapse: separate;
  border-spacing: 4px;
  border: 2px solid black;
}

td {
  padding: 5px;
  padding-right: 30px;
  border: 1px solid lightgray;
}

th {
  padding: 10px;
  border: 1px solid black;
}

caption {
  margin-bottom: 10px;
  font-size: 18px;
}

.pink {
  background-color: pink;
}



Комбо: colspan + rowspan 
Можно растягивать ячейку одновременно и по вертикали, и по горизонтали.
Для этого нужно задать ячейке два атрибута: rowspan и colspan.

Вытеснение соседних ячеек будет происходить так же, как и при обычном объединении ячеек. 
Правда, вытесненных ячеек окажется больше. 
Например, ячейка с rowspan="2" и colspan="2" вытеснит три соседних ячейки.



  
    
    
    
  
  
    

      

        
1.1
        
1.2
        
1.3
      
      

        
2.1
        
2.2
        
2.3
      
      

        
3.1
        
3.2
        
3.3
      
    
  




table {
  border-collapse: separate;
  border-spacing: 4px;
  border: 2px solid black;
}

td {
  padding: 5px;
  padding-right: 30px;
  border: 1px solid lightgray;
}

.pink {
  background-color: pink;
}


Выравнивание содержимого в ячейках 
Выравнивание содержимого в ячейках
Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью CSS.
За выравнивание по горизонтали отвечает CSS-свойство text-align. 
Чаще всего используются значения left, center и right.

За выравнивание по вертикали отвечает CSS-свойство vertical-align. 
Чаще всего используются значения top, middle и bottom.

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

 {
  vertical-align: значение;
  text-align: значение;
}

Эти стили повлияют на все ячейки. Чтобы задать выравнивание только в определённых ячейках, нужно назначить им классы и определить стили для классов.


Добавим цвета 
 Таблицы можно раскрашивать, задавая цвет фона ячеек, цвет текста в ячейках, а также цвет рамок. 
Можно задавать и фоновые изображения.

Цветами можно управлять с помощью этих свойств:
background-color — задаёт цвет фона,
color — цвет текста,
border-color — цвет рамок.

До этого мы использовали компактную форму для описания рамок: 
border: 1px solid lightgray;

Таким образом, чтобы задать цвета для ячейки в CSS, нужен такой код:
td {
  color: цвет;
  background-color: цвет;
  border: 1px solid цвет;
}



  
    
    
    
  
  
    

      
Распределение браузеров
      

        
Браузер
        
Посещения
      
      

        
Количество
        
В процентах
      
      

        
Mozilla Firefox
        
126
        
59%
      
      

        
Google Chrome
        
78
        
30%
      
      

        
Safari
        
34
        
11%
      
    
  


table {
  border-collapse: collapse;
  border: 2px solid black;
  border-color: red;
}

td {
  padding: 5px;
  padding-right: 10px;
  border: 1px solid lightgray;
  color: brown;
  background-color: lightyellow;
  border-color: green;
}

th {
  padding: 10px;
  border: 1px solid black;
  color: darkblue;
  background-color: lightcyan;
  border-color: yellow;
}

caption {
  margin-bottom: 10px;
  font-size: 18px;
}


Как быть, если стили нужно задать для какой-то определённой ячейки, группы ячеек, или строки? 
Можно использовать классы и применять стили для этих классов. 

Например, вот так:
.my-class {
  стили
}

Задаём размеры таблицы 
По умолчанию ширина и высота таблицы зависит от содержимого и отступов внутри ячеек. 
Чем меньше содержимого, тем меньше размеры таблицы.
С помощью CSS можно управлять размерами таблицы, задавать желаемую ширину и высоту. 
Также размерами можно управлять с помощью атрибутов таблицы, но мы рассмотрим только CSS.
Стоит отметить, что у таблицы есть минимальные размеры, которые зависят от содержания, меньше которых она не сожмётся, какое бы значение ширины или высоты ни задавалось.
Ширина таблицы задаётся с помощью CSS-свойства width, а высота с помощью свойства height, например:

table {
  width: 100px;
  height: 100px;
}

Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — 20px, так и в относительных, в процентах — 20%.
При использовании процентов размеры таблицы будут вычисляться с учётом размеров родительского элемента, в нашем случае окна мини-браузера.
Особое значение auto включает расчёт размеров по умолчанию. 

Например: 
width: auto; 
height: auto;

!!!Важное замечание. 
Проценты при задании высоты обычно не работают.


Размеры ячеек и столбцов тоже можно задавать вручную, особенно если вам не нравится, как браузер распределил ширину колонок. 
Размеры ячеек задаются точно так же, как и размеры таблицы: с помощью CSS-свойств width и height.

Есть два варианта добавления стилей ячейкам:
Назначать ячейкам уникальные имена классов, например, class="cell-11", и применять стили для этих классов.
Использовать атрибут style, внутри которого можно писать CSS-код.

Пример второго варианта:

  ...