Найти в Дзене
SoulWind WebStudio

HTML и его элементы

Что такое html?? Если посмотреть на все глазами обычного пользователя то скорее всего он подумает что это какой то ЯП (язык программирования), но по факту это всего лишь язык гипертекстовой разметки, который отображает символы в браузере.
1. Данный документ как правило имеет расширение .html 2. Язык имеет строчные и блочные элементы. <i>Слово</i>, то строчный элемент займет ровно столько места сколько требуется на 5 символов, и рядом с ним можно будет разместить еще одно слово т.к осталось свободное пространство в блоке родителя. Блочные элементы это те элементы которые занимают всю ширину родительского блока как например body. Родительский блок - это блок который находится выше данного блока Т.е у блоков <i> родительский блок это <body>, а у <body> родительский блок это <html> Т.е даже если у блока есть незаполненное пространство он все равно, займет оставшуюся ширину окна браузера, вот вам для примера два блочных элемента. Как видим, они располагаются на разных строках, хотя по

Что такое html?? Если посмотреть на все глазами обычного пользователя то скорее всего он подумает что это какой то ЯП (язык программирования), но по факту это всего лишь язык гипертекстовой разметки, который отображает символы в браузере.

1. Данный документ как правило имеет
расширение .html

2. Язык имеет строчные и блочные элементы.

  • Строчные элементы это те элементы которые занимают ровно столько, сколько они на самом деле занимают к примеру если написать

<i>Слово</i>, то строчный элемент займет ровно столько места сколько требуется на 5 символов, и рядом с ним можно будет разместить еще одно слово т.к осталось свободное пространство в блоке родителя.

Как видите строчный элемент занимает ровно то пространство которое ему необходимо. При этом строчные элементы как правило хранятся в блочных, но не наоборот, исключение тег <a> о нем поговорим позже
Как видите строчный элемент занимает ровно то пространство которое ему необходимо. При этом строчные элементы как правило хранятся в блочных, но не наоборот, исключение тег <a> о нем поговорим позже

Блочные элементы это те элементы которые занимают всю ширину родительского блока как например body.

Родительский блок - это блок который находится выше данного блока

Т.е у блоков <i> родительский блок это <body>, а у <body> родительский блок это <html>

-3

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

-4

Как видим, они располагаются на разных строках, хотя по идее могли бы расположиться в одной строке, как в примере, когда они обернуты в тег <i>.

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

Основные html теги которые нужны на старте и используются чаще всего

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

  • div - просто блочный элемент :), в современной верстке используется почти повсеместно
  • ul - создание маркированного списка
  • ol - создание нумерованного списка
  • form - создание формы
  • h1 - h5 - создание заголовков (h1 на странице может быть только 1 раз, общепринятое правило )

Строчные элементы

  • a - очень важный элемент, предназначен для создания ссылок на странице
  • br - переносит текст на другую строку
  • i, b - выделяет текст курсивом или же просто делает его жирным

Я постарался накидать самые основные теги с помощью которых можно сверстать страницу, но для более семантичной верстки нужно знать все теги и использовать их по назначению, поэтому как будет время или желание капнуть в данную тему чуть по лучше, можете использовать данный сайт: http://htmlbook.ru/ вбиваем в поисковик на сайте блочные/строчные элементы и потихоньку запоминаем их все, как и говорил выше, самый минимум я выписал.

Если у вас будут замечания по поводу материала или классные идеи, то буду рад вашим комментариям.