Вы хотите научиться программировать Web сайты и думаете, что это сложно? На самом деле нет. Программирование упрощается с каждым годом, оно становится доступным большему количеству человек, но не падает пока в популярности.
Я решил написать свой курс по HTML, сделать его бесплатным и описать все максимально просто. До сих пор мне удавалось описывать сложные вещи простым языком, пишите в комментариях, удалось ли это сделать на этот раз.
Этот курс будет полезен тем, кто никогда не работал с HTML или так и не понял, что это и зачем это. Я попробую рассказать по-своему, и может мой подход окажется вам понятнее. Обязательно повторяйте все, что я буду показывать. Увидеть на картинках – это хорошо, а вот увидеть лично, это совершенно другое.
HTML используется на Web сайтах, при создании E-Mail (хотя мы этого часто не видим в почтовых клиентах), при программировании мобильных приложений и т.д. Он используется для создания структуры документов. Это не язык программирования и не совсем визуальный интерфейс, это именно структура документов.
У документов обычно бывает называние, он может состоять из нескольких глав, в каждой главе может быть текст, который может выделяться или оформляться различным образом. И вот HTML как раз предназначен для того, чтобы указать, где в документе находятся заголовки, текст, что нужно подсветить.
Для работы с HTML я рекомендую использовать Visual Studio Code – lостаточно простой, легкий, быстрый и бесплатный редактор.
Запускаем редактор и создаем новый файл File->New File или Файл -> Новый Файл:
Сразу же сохраняем файл вызывав Ctrl+S в Windows или Command+S в macOS. Вводим в поле имени файла 1.html, выбираем папку для сохранения и сохраняем. Файлы, которые содержат статичный Html код обычно имеют расширение html. Статичный – это какой-то код, который прописан в файле. Динамический HTML генерируется какой-то программой или скриптами и тут уже расширение может отличаться. Мы будем работать здесь со статичным, так что желательно расширение .html
HTML документы – это просто текстовые файлы, которые можно создать в любом текстовом редакторе, главное сохранять файлы как чистый текст. Если в MS Word создать новый файл и писать в нем HTML, то это тоже может быть HTML документ, если сохранить потом файл как чистый текст (plain text), а не doc. Просто если сохранять как doc, то это будет достаточно сложный формат, а не просто текст.
Несмотря на то, что HTML можно писать в любом текстовом редакторе, даже в блокноте, лучше все же использовать более специализированную программу, как Visual Studio Code, которая умеет хорошо подсвечивать код и отделять его от простого текста.
Уже сейчас мы можем открыть файл в браузере, просто дважды щелкнув по нему мышкой, но в браузере ничего не появится.
Напишите любой текст в файле, сохраните его (Ctrl + S) и перезагрузите страницу в браузере (Ctrl+R в браузере). Для примера я в файле напечатал "Это текст страницы"
Этот текст на самом деле не является HTML разметкой, это просто текст и только что мы нарушили правила. Чтобы простой текст превратился в HTML, недостаточно поместить текст в файл, нужно добавить еще специальные теги.
Тег состоит из имени, которое заключается в угловые скобки. Весь HTML документ должен начинаться с тэга <html> и заканчиваться таким же, но со слешем </html>. Так работают все тэги HTML – у них есть начало и конец.
Бывает еще сокращенная версия, когда тег не содержит внутри информации, но мы пока этот случай упустим и рассмотрим чуть позже. Пока запоминаем только базовую конструкцию:
<имятега>текст</имятега>
В данном случае <имятега> означает начало действия тега, а тег с таким же именем, но слешем перед именем будет закрывающим. После закрытие действия тега прекращается.
Итак, это у нас будет пустой HTML документ:
<html> </html>
В первой строке мы начинаем действия тега html или можно в данном случае сказать проще – начинаем документ, а во второй строке заканчиваем документ. Теоретически все после закрытия документа уже HTML не будет являться, но если говорить о браузерах, то они отобразят этот текст, но лучше все же все, что касается документа помещать внутрь HTML документа, то есть между <html> и </html>.
Раньше этого было недостаточно, а по современным меркам это уже полноценный HTML документ.
Внутри HTML обычно создается две подраздела head и body. Первый предназначен для служебной информации о документе, а в разделе body будет сам текст. Так что правильным был бы следующий документ:
<html>
<head>
</head>
<body>
Это текст страницы
</body>
</html>
Между тегами заголовка <head> и </head> ничего нет. А вот в теле body находится текст, который мы хотим отобразить в браузере.
Зачем же нужен head? У файла Word есть текст, который мы отображаем в самом документе, а есть такая информация, которая важна для документа, но ее не нужно показывать, такая как автор документа или может название. Заголовок – это как раз самое популярное свойство, которое нужно указывать в заголовке:
<html>
<head>
<title>Это заголовок страницы</title>
</head>
<body>
Это текст страницы
</body>
</html>
Заголовок title в разделе head очень важен, потому что он отображается в названии закладки в браузере:
Таким образом пользователь может увидеть, какой сайт загружен на этой закладке. Это же имя отображается и при добавлении сайта в избранное и в результатах поиска в поисковой системе Google. Заголовок не только влияет на то, как Google видит страницу, но и как отображает ее.
В разделе head можно указывать и другие параметры, но они в основном служебные и не видны на странице. Я не думаю, что сейчас стоит заострять на этом внимание. Если я вам покажу разнообразные теги, которые можно указывать в заголовке, но вы не будете знать, как их применять, то эта информация просто не отложится в голове.
Если вы повторяете за мной используя Visual Studio Code, то скорей всего заметил, что написанный текст подсвечивается по-разному. Все теги подсвечены синим цветом, а просто текст белым. Таким образом очень удобно видеть разницу между одни и другим. Поэтому лучше использовать специализированные редакторы, а не просто блокнот.
Обратите внимание на то, как я оформляю текст. Это не случайно, таким образом я сразу же вижу, где начинается какой-то тэг, а где заканчивается. Чем сложнее структура документа, тем важнее хорошо оформлять код, чтобы видеть начинающий и завершающий тэг. Видно, как они вкладываются друг в друга.
Вернемся к тексту. Я просто вывел его прямо в разделе body (тело), ни указав, какой это текст, зачем этот текст. В принципе это работает и ничего мы не нарушили, но в документах или книгах текст обычно разбит на параграфы или абзацы, а для обозначения параграфа используется тэг <p>.
Возьмем для примера три первых абзаца знаменитого произведения Пушкина “Пиковая дама” и добавим в нашу HTML страницу:
<html>
<head>
<title>Пиковая дама</title>
</head>
<body>
<p>Однажды играли в карты у конногвардейца Нарумова. Долгая зимняя ночь прошла незаметно; сели ужинать в пятом часу утра. Те, которые остались в выигрыше, ели с большим аппетитом, прочие, в рассеянности, сидели перед пустыми своими приборами. Но шампанское явилось, разговор оживился, и все приняли в нем участие. </p>
<p>-Что ты сделал, Сурин? — спросил хозяин. </p>
<p>-Проиграл, по обыкновению. Надобно признаться, что я несчастлив: играю мирандолем, никогда не горячусь, ничем меня с толку не собьешь, а все проигрываюсь! </p>
</body>
</html>
Перед началом каждого абзаца стоит открывающийся тэг <p>, а в конце закрываем его. Таким образом я создал в этом примере три абзаца. Если посмотреть на результат, то он будет выглядеть так:
Обратите внимание, что браузер автоматически отобразил отступы между абзацами. Мы только указали, где начинаются и заканчиваются абзацы, а браузер добавил отступы. Но это личное желание браузера и теоретически каждый браузер может добавлять отступы или нет. HTML определяет структуру, какое-то оформление по умолчанию накладывает браузер. Но для реального оформления нужно использовать другой простой язык стилей CSS.
Я так же в этом примере изменил заголовок документа на Пиковая Дама.
Код у нас получился достаточно структурирован. Каждый новый тэг находиться внутри другого, что часто называют вложенностью. Один тэг вложен в другой. Если убрать весь текст и оставить только тэги, то получиться:
<html>
<head>
<title>. . .</title>
</head>
<body>
<p>. . .</p>
<p>. . .</p>
<p>. . .</p>
</body>
</html>
Желательно, чтобы текст находился в каком-то теге, а не просто так в воздухе. Браузеры достаточно умные и отобразят тест, то просто с эстетической точки зрения отображаемый текст должен быть внутри какого-то тэга. Для примера, следующий код будет не очень удачным:
<html>
<head>
<title>. . .</title>
</head>
<body>
<p>. . .</p>
Это просто текст
<p>. . .</p>
</body>
</html>
Здесь у нас есть “Это просто текст”, который не окружен никаким тегом. Да, этот текст все еще находиться внутри тэга body и поэтому он будет отображен, но просто с логической точки зрения это не красиво.
Если у вас есть какой-то текст, который должен быть на странице, но он не является параграфом, то его можно поместить в один из тагов div или span. По умолчанию текст внутри div занимает пространство всей строки и выглядит как параграф, но браузер не добавляет отступов, как для <p>:
<html>
<head>
<title>. . .</title>
</head>
<body>
<p>. . .</p>
<div>Это просто текст 1</div>
<div>Это просто текст 2</div>
<div>Это просто текст 3</div>
<p>. . .</p>
</body>
</html>
В результате между строками “Это просто текст” нет пустого пространства:
Второй вариант оформления текста – span и он работает немного по-другому – не занимает целую строку целиком, а вместо этого только занимает необходимое пространство для текста. Давайте попробуем заменить все div на span и увидеть разницу:
<html>
<head>
<title>. . .</title>
</head>
<body>
<p>. . .</p>
<span>Это просто текст 1</span>
<span>Это просто текст 2</span>
<span>Это просто текст 3</span>
<p>. . .</p>
</body>
</html>
Как видите, каждый блок span отображается друг за другом и уже не занимает всю строку. Итак, теперь мы знаем уже три метода описания текста в HTML документе – p, div и span.
Допустим, что вам нужно превратить в Web страницу книгу. У книги может быть несколько глав, каждая глава может состоять из разделов, а уже в разделах будет текст.
Для обозначения заголовков используются тэги h с номерами от 1 до 6 (h1, h2, h3, h4, h5 и наконец h6). Чем ниже цифра, тем выше ценность заголовка. Например, у вас может быть структура из следующих глав:
- Глава 1 -- 1.1. Рождение звезды -- 1.2. Нападение эльфов - Глава 2 -- 2.1. Восстание машин -- 2.2. В бой
Не пытайтесь найти эту книгу, ее не существует, потому что это я взял какие-то заголовки из головы, лишь бы было что-то похожее на книгу, и чтобы я не нарушил чьи-то права на интеллектуальную собственность. В наше время страшно использовать какой-то контент в интернете, всегда есть опасность нарушить чьи-то права.
Я даже пойду дальше и добавлю еще немного текста в главах, как показано на рисунке:
Как видите по заголовок “Глава 1” имеет самый большой размер шрифта, это самый главный заголовок, как бы первого уровня. Текст первого уровня помещаем в тег h1:
<h1>Глава 1</h1>
Разделы 1.1 и 1.2 имеют размер чуть меньше. Это как бы заголовки второго уровня или тег h2:
<h2>1.1. Рождение звезды</h2>
Весь код будет выглядеть следующим образом:
<html>
<head>
<title>Это заголовок страницы</title>
</head>
<body>
<h1>Глава 1</h1>
<p>Это начало главы 1, которая расскажет вам странную историю, в которой почти нет смысла и не пытайтесь его искать, потому что этот рассказ для иллюстрации разметки, а не для расказа реальной истории.</p>
<h2>1.1. Рождение звезды</h2>
<p>Дело было вечером, делать было нечего и родилась звезда. И я говорю не про поп звезду, а ту, что на небе, которую мы можем увидеть ночью. </p>
<p>Может показаться, что эта книга про звезды и космос - а нет, в следующей главе мы перевернем историю</p>
<h2>1.2. Нападение эльфов</h2>
<p>Вдруг откуда не возьмись, на нас напали эльфы. Не имеет значения откуда и что они делают в книге, где первая глава был про рождение звезды, но вот так получилось.</p>
<h1>Глава 2</h1>
<p>...</p>
<h2>2.1. Восстание машин</h2>
<p>...</p>
<p>...</p>
<h2>2.2. В бой</h2>
<p>...</p>
<p>...</p>
</body>
</html>
Я уже несколько раз отмечал, что HTML – это разметка, а для оформления используется язык стилей CSS. Но в HTML все же есть тэги, которые позволяют сказать, что какой-то текст должен быть выделен. Очень часто нужно еще что-то подчеркнуть, выделить жирным или наклонным шрифтом. Это все можно сделать с помощью стилей,
В этом тексте есть три слова, которые по-разному выделены одним из трех тэгов:
<u> - используется для подчеркивания и означает underline
<b> - выделение жирным или bold
<i> - наклон или italic
Полностью строка в HTML будет выглядеть так:
<p>HTML - это язык разметки, но он позволяет указать, что нужно <u>подчеркнуть</u>, <b>выделить</b> или <i>наклонить</i>.</p>
Прежде чем двигаться дальше я хотел бы остановиться на одном очень важном факте – пробелах. В HTML не имеет значения, сколько пробелов вы поставите между двумя буквами, при отображении они сократятся только до одного. Например, что если предыдущую строку разбить на несколько и добавить большое количество пробелов в различных местах как в следующем примере:
<p>
HTML - это язык разметки,
но он позволяет указать,
что нужно <u>подчеркнуть</u>,
<b>выделить</b>
или
<i>наклонить</i>.
</p>
Если теперь перегрузить страницу, то совершенно ничего не измениться, потому что все пробелы, которые я добавил между словами будут превращены в один.
Или вот такой промер:
<p>a b c d</p>
Как видите в результате такого большого количества пробелов между буквами a, b, c и d нет. Все пробелы между каждой буквой сократились до одного. Вторая строка также не поменялась. Все форматирование, которое мы делали в HTML файле пропало, потому что в HTML документе за форматирование отвечают тэги, а не то, как мы пишем текст.
Что если нам действительно нужно добавить пробел? Для этого используется специальная конструкция - Non-breaking space. Давайте добавим по три дополнительных пробела между буквами, с помощью этой конструкции:
<p>a b c d</p>
Теперь между буквами явно больше одного пробела.
Теперь как можно сделать так, чтобы вторая строка отображалась не в одну строку, а с учетом всех форматирований, которые мы указали в текстовом файле. Для этого можно использовать тэг <pre>:
<pre>
HTML - это язык разметки,
но он позволяет указать,
что нужно <u>подчеркнуть</u>,
<b>выделить</b>
или
<i>наклонить</i>.
</pre>
Вот теперь страница будет выглядеть именно так, как мы видим это в файле:
Обратите внимание, что по умолчанию браузер поменял еще и шрифт, теперь используется другой. Это очень хорошо, чтобы вы не пренебрегали тэгом <pre> и использовали его только там, где это реально необходимо. Я на своих сайтах использую его только тогда, когда нужно приводить на страницах сайта код.
Как же тогда добиться нужного результата – получить разрывы строк там, где мы хотим? Для этого используется тэг <br/>. Помните я говорил, что большинство тэгов начинают действие и заканчивают, поэтому состоят из пары тэгов – один просто с именем, другой с тем же именем, но со слешем. Первый начинает действие тэга, второй заканчивает.
Закрывать <br/> не обязательно, большинство браузеров прекрасно прочитают и <br> поэтому в HTML 5 разрешается использовать и закрытую версию <br/> и открытую <br>. Я все же рекомендую всегда закрывать. Это вопрос чистоты кода на мой взгляд, не так сложно явно указать, что контента нет для этого блока даже не смотря на то, что его и не может быть. Так что я всегда буду исопльзовать закрытую версию <br/>
В случае с <br/> не нужно начинать и заканчивать какое-либо действие, нужно просто создать новую строку, поэтому тут все решается одним тегом, у которого слеш находиться в конце. Он как бы говорит – начать действие и тут же закончить его. Мы просто указали на необходимость создать новую строку и все.
Посмотрим на следующий код:
<p>
HTML - это язык разметки, <br/>
но он позволяет указать, <br/>
что нужно <u>подчеркнуть</u>, <br/>
<b>выделить</b> <br/>
или <br/>
<i>наклонить</i>.
</p>
Мы снова имеем текст, который помещен в параграф, а не <pre>, а в конце каждой строки я явно указываю, что нужно действительно закончить строку, с помощью тэга <br/>. Результат здесь :
Остается только с помощью &npsp; вставить необходимые пробелы там, где они нужны, и мы получим нужный результат без использования <pre>.
Используйте <pre> только в крайних случаях, потому что это менее гибкий вариант. Если текст написан в параграфе и не помещается на страницу, то браузер автоматически переведет текст на новую строку в том месте, где это необходимо. Так было во всех предыдущих примерах, например здесь:
Текст не поместился в одну строку и браузер автоматически разбил на две строки.
При использовании <pre> вы отключаете все автоматические возможности форматирования и говорите, что нужно отображать все, как есть. Если текст не помещается на страницу, то будут появляться полосы прокрутки. Иногда это действительно необходимо и вот тогда можно будет использовать <pre>.
Если записать длинный текст в <pre> так:
<pre>
HTML - это язык разметки но он позволяет указать, что нужно <u>подчеркнуть</u>, <b>выделить</b> или <i>наклонить</i>.
</pre>
То такой текст может не поместиться на экран и мы увидим полосу прокрутки, как на этой картинке:
Когда я показываю код, то я не хочу автоматического форматирования и уже лучше полосы прокрутки, чем неверно отформатированный код.
Еще один очень важный и популярный тег, который мы сегодня изучим – <img>. Этот тэг не имеет контента, а значит его нужно использовать в сокращенной форме <img />. Он так же как и BR ничего не открывает и ничего не закрывает, а просто указывает в документе позицию, в которую нужно вставить изображение. А какое изображение?
У тегов могут быть атрибуты, и мы до сих пор пока не трогали эту тему, потому что не было хорошего примера, когда можно было бы показать вам реальную выгоду от их использования. Картинка стала первым таким тэгом.
Атрибуты указываются внутри открывающего тега между угловыми скобками в виде имя=значение. Значение чаще всего указывается в двойных кавычкам, но может быть и с одинарной кавычкой или совсем без них. Браузеры достаточно толерантны к тому, как вы записываете значение, но все же лучше использовать всегда двойные кавычки, просто чтобы все было всегда одинаково.
Итак, для изображения картинку можно указать в атрибуте src. Атрибуты должны быть у открывающих тэгов, а так как картинке не нужен закрывающий, то в единственном тэге:
<img src="https://www.flenov.info/data/headerimage.png" />
Итак, здесь я добавил атрибут src, которому присвоено в двойных кавычках значение пути к картинке https://www.flenov.info/data/headerimage.png. Результат – на странице отображается картинка:
И закончим основы HTML списками. Очень часто нужно отобразить на странице списки:
- во-первых, это круто
- во-вторых это бывает полезно
- в-третьих мы просто может захотеть показать список.
Отличный список и его можно отобразить именно так:
<p>- во-первых, это круто</p>
<p>- во-вторых это бывает полезно</p>
<p>- в-третьих мы просто может захотеть показать список. </p>
В принципе, это сработает и на экране мы увидим список. Но идея HTML не просто отобразить текст так, как мы хотим, но и сообщить документу, какого типа каждая часть этого документа – где параграфы, где выделения и где списки. Если говорить только о WEB сайте, то абсолютно всю разметку можно было сделать с помощью <span> или <div>, а потом стилями оформить каждый из них так, как хочется и я об этом расскажу в отдельном мануале про язык стилей CSS.
В данном случае нам не просто нужно отобразить список, а еще и сказать браузеру, что это именно список. Это просто уважение к браузеру. Списки создаются с помощью тэга <ul>.
<ul> </ul>
Этим мы создали пустой список без элементов. Чтобы наполнить его элементами нужно добавить внутрь элементы в виде тегов <li>:
<p>Почему мы делаем список:</p>
<ul>
<li>- во-первых, это круто</li>
<li>- во-вторых это бывает полезно</li>
<li>- в-третьих мы просто может захотеть показать список. </li>
</ul>
Элементы <li> вложены в ul, потому что элементы принадлежат списку.
В результате мы должны увидеть вот такой список:
Обратите внимание, что теперь нам не нужно вручную указывать символ тире перед каждым элементом. Браузер сам добавил круги перед каждый элементом списка. Так что можно убрать тире:
<p>Почему мы делаем список:</p>
<ul>
<li>во-первых, это круто</li>
<li>во-вторых это бывает полезно</li>
<li>в-третьих мы просто может захотеть показать список. </li>
</ul>
В принципе, если вы не укажите <ul> и сразу же напишите <li>, то в результате тоже будет список. Например:
<p>Почему мы делаем список:</p> <li>во-первых, это круто</li> <li>во-вторых это бывает полезно</li> <li>в-третьих мы просто может захотеть показать список. </li>
Мы не указали, где начинается список (нет <ul>) и не указали, где он заканчивается (нет </ul>). Мы просто создали три элемента, которые просто как бы висят в воздухе. Несмотря на это, браузер без проблем отобразит список. Разница будет только в том, что слева от элементов не будет отступа, потому что именно ul по умолчанию создает отступ:
Это плохо и так лучше не делать. Вся идея была в том, чтобы сказать о наличии списка и о том, где находятся его элементы.
<p>Почему мы делаем список:</p>
<ol>
<li>во-первых, это круто</li>
<li>во-вторых это бывает полезно</li>
<li>в-третьих мы просто может захотеть показать список. </li>
</ol>
Нам не нужно выставлять номера, браузер автоматически подставит порядковый номер перед каждым элементом списка. За счет того, что мы используем ol вместо ul, теперь элементы помечены не кружочком, а цифрой.
Списки можно вкладывать друг в друга. Внутри элемента li можно создать еще один список, который будет сдвинут на один шаг вправо, как показано на следующем рисунке:
Этого эффекта можно добиться следующим кодом:
<p>Почему мы делаем список:</p>
<ol>
<li>во-первых, это круто
<ul>
<li>круто - это самое важное</li>
<li>очень важно делать круто</li>
</ul>
</li>
<li>во-вторых это бывает полезно</li>
<li>в-третьих мы просто может захотеть показать список. </li>
</ol>
Внутри первого li блока находиться другой ul блок. Он начинается внутри li и заканчивается внутри того же элемента.
Таким образом можно создавать несколько уровней вложенности, я не знаю, есть ли какие-то физические лимиты, которые смогут отработать браузеры, но логических по идее нет. С точки зрения дизайна наверно лучше не делать более 3, потому что больше будет выглядеть уже не так наглядно, по крайней мере на мой вкус.
Мы уже познакомились с самыми основными возможностями HTML, но это только основы. Есть еще много нюансов, которые можно выделить в отдельный продвинутый курс и возможно я его сделаю.
Я хочу еще рассказать про специальные символы, которые мы может использовать в HTML. Например, символы < и > являются очень важными для HTML документов, потому что они начинают и заканчивают имя тэга. Если вы напишите <hello>, то это будет тоже тэгом. А что, если вы просто хотите отобразить на странице угловые скобки?
Для этого есть специальные последовательности, как и для пробелов:
< это символ <
> это символ >
© это символ copyright
& это символ &
" это двойные кавычки
' - одинарные кавычки
€ - символ денежной валюты Евро
® - символ R в кружке, который используется для обозначения торговой марки
Единственное, чего нам не хватает для завершения – таблиц. Это именно средство для создания в документе таблиц, а не форматирования текста. Для создания таблицы используется тэг <table>:
<table> </table>
У таблицы могут быть строки и для их создания используется тэг <tr> (table row или строка таблицы). Следующий пример создает таблицу из двух пустых строк:
<table>
<tr></tr>
<tr></tr>
</table>
Пока еще на экране ничего не отобразиться, потому что мы просто создали пустые строки без информации. Информация находиться в ячейках, а у каждой ячейки может быть два параметра – строка и колонка. Строки есть, остается добавить колонку и для этого можно использовать тэг td
<table>
<tr>
<td>Строка 1 Колонка 1</td>
<td>Строка 1 Колонка 2</td>
</tr>
<tr>
<td>Строка 2 Колонка 1</td>
<td>Строка 2 Колонка 2</td>
</tr>
</table>
Мы не видим границ ячеек, потому что не хватает оформления, но структура есть, и это как раз то, для чего был создан HTML.
У таблиц могут быть заголовки. Их можно создавать с помощью таких же ячеек td, как мы уже делали выше, а можно явно сказать структуре документа, что это заголовок таблицы и делается это с помощью тэга th (table header):
<table>
<tr>
<th>Колонка 1</th>
<th>Колонка 2</th>
<th>Колонка 3</th>
</tr>
<tr>
<td>Строка 1 Колонка 1</td>
<td>Строка 1 Колонка 2</td>
<td>Строка 1 Колонка 3</td>
</tr>
</table>
В первой строке здесь объявлены заголовки для трех колонок. Во второй строке значения за каждой из колонок. Результат можно увидеть на рисунке:
Не думайте о том, откуда взялись на этом скриншоте полоски, я их добавил стилями, чтобы видно было границы ячеек. Обратите внимание, что браузер нарисовал заголовки другим шрифтом, чтобы можно было отличить их от простого содержимого таблицы.
Что еще можно рассказать про таблицы. . .
В большинстве случаев вполне достаточно классической таблицы, но в некоторых случаях бывает необходимость объединить две колонки или две строки в одну. Например, на следующем скриншоте во второй строке первая ячейки занимает сразу две колонки. В третей строке первая ячейка занимает две строки. Это можно сделать с помощью атрибутов colspan (количество занимаемых колонок) и rowspan (количество занимаемых строк). По умолчанию эти атрибуты равны единице, то есть ячейка занимает одну колонку и одну строку, но можно указать любое значение.
<table>
<tr>
<th>Колонка 1</th>
<th>Колонка 2</th>
<th>Колонка 3</th>
</tr>
<tr>
<td>Строка 1 Колонка 1</td>
<td>Строка 1 Колонка 2</td>
<td>Строка 1 Колонка 3</td>
</tr>
<tr>
<td colspan="2">Строка 2 Колонка 1</td>
<td>Строка 2 Колонка 3</td>
</tr>
<tr>
<td rowspan="2">Строка 3 Колонка 1</td>
<td>Строка 2 Колонка 2</td>
<td>Строка 3 Колонка 3</td>
</tr>
<tr>
<td>Строка 2 Колонка 2</td>
<td>Строка 3 Колонка 3</td>
</tr>
</table>
Наверно стоит закончить знакомство с HTML и его основами, и сделать чуть более продвинутый курс. А пока практикуйтесь, пробуйте и смотрите на результат. Никакая теория не заменит хорошую практику. Теория может помогать с практикой, с пониманием того, как что-то работает. Этих основ достаточно для того, чтобы начать что-то делать самому, хотя бы простые вещи.
Внимание!!! Если ты копируешь эту статью себе на сайт, то оставляй ссылку непосредственно на эту страницу. Спасибо за понимание
Паника, что-то случилось!!! Ничего не найдено в комментариях. Срочно нужно что-то добавить, чтобы это место не оставалось пустым.
Программист, автор нескольких книг серии глазами хакера и просто блогер. Интересуюсь безопасностью, хотя хакером себя не считаю
Copyright © 2024 Михаил Флёнов. Тираж 1 штука. Отпечатано на ноутбуке. А за права отвечаю, или постараюсь.
А здесь еще и копирайт поставлю: Professional Web Development.
Добавить Комментарий