Впрочем казалось бы, что такого в табличной верстке и на кой оно вам надо. Ответ прост она не умерла, а перешла в иное качественное состояние. Сегодня табличная верстка активно используется для создания html-рассылок. В данном случае, в отличие от разработчиков браузеров, разработчики софта для работы с письмами так и не пришли к единому консенсусу и 100% у вас на каждом отдельном устройстве откроются совершенно разные виды на вашу верстку. Порой ужасные.
Чтобы этого избежать там используется не стандарт HTML5, а строгий старый режим HTML4. К нему, вдобавок, идут набором ныне морально устаревшие теги типа center, и приходится использовать ухищрения, которые ни один верстальщик сайтов никогда в здравом уме использовать не будет.
Блочная верстка
Блочная верстка
В отличие от табличной, блочная верстка позволяет набрать необходимое количество элементов страницы без условностей и требований первого метода. Да и в целом этот тип можно отнести к инновационным. Наряду с блочной версткой стали активно использовать внешние файлы css, которые призваны были описывать внешний вид div-ов. Притом эта тенденция (выносить данные) дошла до того, что инлайновые стили стали неким моветоном. Лично я с этим конвейерным и неразумным подходом не согласен.
Разумно использовать внешние стили для повторяющихся элементов, для классов, для медиа запросов и во многих других случаях. Но если в конкретно этом span надо прописать color:red, зачем создавать отдельный класс или id и писать под него стили!?
Float:left
Самое частое свойство, которое мне приходилось использовать во время верстки сайта по блочному методу. Так как по-умолчанию div занимает всю область по ширине, куда он вписан, то, чтобы выстроить в линию несколько блоков необходимо дать им размер ширину. Но тогда они просто выстроятся один под одним с указанными размерами. Чтобы выполнить «обтекание» нужно использовать свойство float.
Float:left заставляет элемент отобразиться таким образом, чтобы предыдущий был по левую сторону от него.
Небольшой хак
Существует иной способ решить этот вопрос, переноса блоков. Достаточно сменить ему свойство display с дефолтного block на inline-block. Тогда браузер будет воспринимать данный div, как символ в предложении.
Данная тема постепенно приводит нас к каскадным стилям. О них я расскажу после того, как опишу работу с тегами.
Редакторы кода
Выбор редактора кода (IDE)
Прежде чем мы приступим к практике, вам необходимо выбрать редактор. Иными словами IDE. IDE это интегрированная среда разработки. Иными словами среда в которой разработчик (тут верстальщик может почувствовать гордость, что он на одной ступени с программистами) пишет код и ему в этом помогают всякие утилиты, виджеты и прочая вспомогательная ерунда. Если у вас подсвечивается код в соответствии с синтаксисом выбранного языка это IDE.
Но будем откровенны. Изначально мы работали в редакторах исходного кода. Мы это верстальщики, программисты, все, кто работал с кодом. Таким редактором долгое время был, и наверное остался блокнот, который поставлялся и поставляется до сих пор с операционной системой Windows. Со средой разработки в Linux не все так просто. Там есть Vim редактор, позволяющий обрабатывать содержимое файлов прямо в режиме консоли.
Если открыть в Vim файл формата html с примером кода, описываемого в главе Теги, то можно увидеть вот это:
Редактор Vim в консоли Windows PowerShell с установленной подсистемой Ubuntu
Никто не знает, как выйти из вима
Сей факт породил тонны шуток и мемов в духе:
На самом деле все просто, достаточно ввести двоеточие и символ q в английской раскладке. Никакой интриги.
Язык не поворачивается назвать Vim IDE, так что я скорее отнесу его к редактору исходного кода. К слову, если блокнотом сейчас никто не пользуется, то Vim более чем здравствует. Если вы начнете использовать Linux систему, или, как я Windows, с установленной подсистемой Ubuntu и будете использовать систему хранения версий, то скорее всего столкнетесь с этим редактором.
Минутка истории
Самым первым редактором исходного кода можно считать что угодно, вплоть до гальки на песке, которая описывает алгоритм. Но более близкое к нашему времени можно считать дырокол (вспоминаем перфокарты) и лист бумаги\тетради. Именно с использованием обычной аналоговой бумаги мои родители писали и сдавали программы во время обучения в институте.