Как создать html документ в visual studio

Основы HTML

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

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

Создание HTML-файла

1. Откройте Блокнот или любой обычный текстовый редактор.
2. В меню «Файл» выберите «Создать«.
3. Введите следующие строки:

 HTML is swell. Life is good. 

Here's the big picture
 

Make me an unordered list.
• One programmer
• Ten SDKs
• Great Internet Apps

Это должно приступить к работе. Если на веб-странице отображается отличная функция, вы можете узнать, как она была создана, проверив источник HTML. Редакторы HTML, такие как Веб-страница Майкрософт, можно использовать для создания простых и расширенных страниц.

Вот весь HTML-источник для файла, который вы создали:

Полное описание тегов, атрибутов и расширений см. в спецификации языка разметки гипертекста (HTML):

Верстальщик сайтов — HTML, CSS, Bootstrap, JavaScript | Задание 2 из 84

Урок 1.1. Редактор VS Code. Структура HTML-документа. Head. Заголовок title

Материалы и ссылки к уроку

• В рамках курса будет использован редактор VS Code от Microsoft и различные плагины к нему. Но вы можете использовать любой другой редактор кода, если привыкли к чему-то.

Скачать VS Code можно с официального сайта https://code.visualstudio.com

В редактор встроен инструмент Emmet, который заметно ускоряет процесс написания кода.
Шпаргалка по работе с Emmet

Скачать исходный код и материалы к курсу

Информационные ресурсы beONmax

Присоединяйтесь к сообществам beONmax, чтобы получать полезную информацию, новости и спец.предложения!

• ВКонтакте beONmax https://vk.com/beonmax
• Facebook beONmax https://facebook.com/beonmax
• Instagram beONmax https://instagram.com/beonmax
• Youtube beONmax https://youtube.com/beonmax
• Статья-навигатор по курсам beONmax
  Последовательность прохождения курсов beONmax и какие IT-профессии вы можете получить

Остались вопросы? Задайте ваш вопрос в сообщество студентов beONmax! Задать вопрос

Як створити HTML-файл

Для зручного і приємного написання коду потрібен якісний інструмент — текстовий редактор. Якщо у вас його все ще немає, то я рекомендую Visual Studio Code. Він не перевантажений додатковими функціями, в ньому є все, що треба і він просто працює.

Є трошки простіші альтернативи, типу Notepad++ або Sublime Text і для них ця інструкція буде теж справедливою, з поправкою на їх інтерфейс.

Завантажте

Перейдіть за посиланням Visual Studio Code та натисніть кнопку Download :

Почнеться завантаження файла встановлення:

Встановіть

Після того, як файл встановлення VS Code буде завантажений, розпочніть установку, запустивши цей файл:

Натискаючи кнопку Next просувайтесь до початку установки.

Натискайте кнопку Install і зачекайте, коли установка редактора закінчиться.

Відкрийте текстовий редактор

Та створіть новий файл.

Відкриється нова таба ( Untitled-1 ), в якій можна починати писати код.

Вставте HTML-код в редактор

Скопіюйте цей код:

     
Мамо, я в Інтернеті!
   

І вставте в редактор

Зверніть увагу на назву таби: вона змінилася і з’явився білий кружелик, котрий означає, що код в цій табі ще не збережений.

Збережіть внесені зміни

Для цього натисніть Ctrl + S , або відповідний пункт в меню редактора

Відкриється вікно збереження файлу. Виберіть шлях, де буде зберігатися майбутній HTML-файл, зазначте назву файлу — index.html і натисніть Save

Після цього назва таби зміниться на ім’я вашого файла, який ви щойно зберегли, а білий кружелик зникне:

Відкрийте HTML-файл в браузері

Відкрийте папку, в яку ви щойно зберегли файл index.html і запустіть його.

Рузультат який ви побачите, має бути схожим на цей:

Вітаю ��! Ви неймовірні ��!

Уроки HTML бесплатно – проще не куда

Вы хотите научиться программировать 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 обычно создается две подраздела head и body. Первый предназначен для служебной информации о документе, а в разделе body будет сам текст. Так что правильным был бы следующий документ:

  Это текст страницы  

Между тегами заголовка и ничего нет. А вот в теле body находится текст, который мы хотим отобразить в браузере.

Название страницы

Зачем же нужен head? У файла Word есть текст, который мы отображаем в самом документе, а есть такая информация, которая важна для документа, но ее не нужно показывать, такая как автор документа или может название. Заголовок – это как раз самое популярное свойство, которое нужно указывать в заголовке:

    Это текст страницы  

Заголовок title в разделе head очень важен, потому что он отображается в названии закладки в браузере:

Таким образом пользователь может увидеть, какой сайт загружен на этой закладке. Это же имя отображается и при добавлении сайта в избранное и в результатах поиска в поисковой системе Google. Заголовок не только влияет на то, как Google видит страницу, но и как отображает ее.

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

Если вы повторяете за мной используя Visual Studio Code, то скорей всего заметил, что написанный текст подсвечивается по-разному. Все теги подсвечены синим цветом, а просто текст белым. Таким образом очень удобно видеть разницу между одни и другим. Поэтому лучше использовать специализированные редакторы, а не просто блокнот.

Обратите внимание на то, как я оформляю текст. Это не случайно, таким образом я сразу же вижу, где начинается какой-то тэг, а где заканчивается. Чем сложнее структура документа, тем важнее хорошо оформлять код, чтобы видеть начинающий и завершающий тэг. Видно, как они вкладываются друг в друга.

Текст

Вернемся к тексту. Я просто вывел его прямо в разделе body (тело), ни указав, какой это текст, зачем этот текст. В принципе это работает и ничего мы не нарушили, но в документах или книгах текст обычно разбит на параграфы или абзацы, а для обозначения параграфа используется тэг

.

Возьмем для примера три первых абзаца знаменитого произведения Пушкина “Пиковая дама” и добавим в нашу HTML страницу:

    
Однажды играли в карты у конногвардейца Нарумова. Долгая зимняя ночь прошла незаметно; сели ужинать в пятом часу утра. Те, которые остались в выигрыше, ели с большим аппетитом, прочие, в рассеянности, сидели перед пустыми своими приборами. Но шампанское явилось, разговор оживился, и все приняли в нем участие.
 
-Что ты сделал, Сурин? — спросил хозяин.
 
-Проиграл, по обыкновению. Надобно признаться, что я несчастлив: играю мирандолем, никогда не горячусь, ничем меня с толку не собьешь, а все проигрываюсь!
   

Перед началом каждого абзаца стоит открывающийся тэг

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

Обратите внимание, что браузер автоматически отобразил отступы между абзацами. Мы только указали, где начинаются и заканчиваются абзацы, а браузер добавил отступы. Но это личное желание браузера и теоретически каждый браузер может добавлять отступы или нет. HTML определяет структуру, какое-то оформление по умолчанию накладывает браузер. Но для реального оформления нужно использовать другой простой язык стилей CSS.

Я так же в этом примере изменил заголовок документа на Пиковая Дама.

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

Желательно, чтобы текст находился в каком-то теге, а не просто так в воздухе. Браузеры достаточно умные и отобразят тест, то просто с эстетической точки зрения отображаемый текст должен быть внутри какого-то тэга. Для примера, следующий код будет не очень удачным:

    
. . .
 Это просто текст 
. . .
   

Здесь у нас есть “Это просто текст”, который не окружен никаким тегом. Да, этот текст все еще находиться внутри тэга body и поэтому он будет отображен, но просто с логической точки зрения это не красиво.

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

:

    
. . .
 
Это просто текст 1
 
Это просто текст 2
 
Это просто текст 3
 
. . .
   

В результате между строками “Это просто текст” нет пустого пространства:

Второй вариант оформления текста – span и он работает немного по-другому – не занимает целую строку целиком, а вместо этого только занимает необходимое пространство для текста. Давайте попробуем заменить все div на span и увидеть разницу:

    
. . .
 Это просто текст 1 Это просто текст 2 Это просто текст 3 
. . .
   

Как видите, каждый блок 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:

Глава 1
 

Разделы 1.1 и 1.2 имеют размер чуть меньше. Это как бы заголовки второго уровня или тег h2:

1.1. Рождение звезды
 

Весь код будет выглядеть следующим образом:

    
Глава 1
 
Это начало главы 1, которая расскажет вам странную историю, в которой почти нет смысла и не пытайтесь его искать, потому что этот рассказ для иллюстрации разметки, а не для расказа реальной истории.
 
1.1. Рождение звезды
 
Дело было вечером, делать было нечего и родилась звезда. И я говорю не про поп звезду, а ту, что на небе, которую мы можем увидеть ночью.
 
Может показаться, что эта книга про звезды и космос - а нет, в следующей главе мы перевернем историю
 
1.2. Нападение эльфов
 
Вдруг откуда не возьмись, на нас напали эльфы. Не имеет значения откуда и что они делают в книге, где первая глава был про рождение звезды, но вот так получилось.
 
Глава 2
 
.
 
2.1. Восстание машин
 
.
 
.
 
2.2. В бой
 
.
 
.
   

Стили

Я уже несколько раз отмечал, что HTML – это разметка, а для оформления используется язык стилей CSS. Но в HTML все же есть тэги, которые позволяют сказать, что какой-то текст должен быть выделен. Очень часто нужно еще что-то подчеркнуть, выделить жирным или наклонным шрифтом. Это все можно сделать с помощью стилей,

В этом тексте есть три слова, которые по-разному выделены одним из трех тэгов:

— используется для подчеркивания и означает underline

— выделение жирным или bold

— наклон или italic

Полностью строка в HTML будет выглядеть так:

HTML — это язык разметки, но он позволяет указать, что нужно подчеркнуть, выделить или наклонить.

Пробелы и форматирование

Прежде чем двигаться дальше я хотел бы остановиться на одном очень важном факте – пробелах. В HTML не имеет значения, сколько пробелов вы поставите между двумя буквами, при отображении они сократятся только до одного. Например, что если предыдущую строку разбить на несколько и добавить большое количество пробелов в различных местах как в следующем примере:

 
HTML - это язык разметки, но он позволяет указать, что нужно подчеркнуть, выделить или наклонить.
 

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

Или вот такой промер:

a b c d
 

Как видите в результате такого большого количества пробелов между буквами a, b, c и d нет. Все пробелы между каждой буквой сократились до одного. Вторая строка также не поменялась. Все форматирование, которое мы делали в HTML файле пропало, потому что в HTML документе за форматирование отвечают тэги, а не то, как мы пишем текст.

Что если нам действительно нужно добавить пробел? Для этого используется специальная конструкция   — Non-breaking space. Давайте добавим по три дополнительных пробела между буквами, с помощью этой конструкции:

Теперь между буквами явно больше одного пробела.

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

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

Обратите внимание, что по умолчанию браузер поменял еще и шрифт, теперь используется другой. Это очень хорошо, чтобы вы не пренебрегали тэгом и использовали его только там, где это реально необходимо. Я на своих сайтах использую его только тогда, когда нужно приводить на страницах сайта код.
Как же тогда добиться нужного результата – получить разрывы строк там, где мы хотим? Для этого используется тэг 
. Помните я говорил, что большинство тэгов начинают действие и заканчивают, поэтому состоят из пары тэгов – один просто с именем, другой с тем же именем, но со слешем. Первый начинает действие тэга, второй заканчивает.
Закрывать 
не обязательно, большинство браузеров прекрасно прочитают и 
поэтому в HTML 5 разрешается использовать и закрытую версию 
и открытую 
. Я все же рекомендую всегда закрывать. Это вопрос чистоты кода на мой взгляд, не так сложно явно указать, что контента нет для этого блока даже не смотря на то, что его и не может быть. Так что я всегда буду исопльзовать закрытую версию 
В случае с 
не нужно начинать и заканчивать какое-либо действие, нужно просто создать новую строку, поэтому тут все решается одним тегом, у которого слеш находиться в конце. Он как бы говорит – начать действие и тут же закончить его. Мы просто указали на необходимость создать новую строку и все.
Посмотрим на следующий код:
 
HTML - это язык разметки, 
но он позволяет указать, 
что нужно подчеркнуть, 
выделить 
или 
наклонить.
 
Мы снова имеем текст, который помещен в параграф, а не , а в конце каждой строки я явно указываю, что нужно действительно закончить строку, с помощью тэга 
. Результат здесь :

Остается только с помощью &npsp; вставить необходимые пробелы там, где они нужны, и мы получим нужный результат без использования .
Используйте только в крайних случаях, потому что это менее гибкий вариант. Если текст написан в параграфе и не помещается на страницу, то браузер автоматически переведет текст на новую строку в том месте, где это необходимо. Так было во всех предыдущих примерах, например здесь:

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

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

Еще один очень важный и популярный тег, который мы сегодня изучим – . Этот тэг не имеет контента, а значит его нужно использовать в сокращенной форме . Он так же как и BR ничего не открывает и ничего не закрывает, а просто указывает в документе позицию, в которую нужно вставить изображение. А какое изображение?
У тегов могут быть атрибуты, и мы до сих пор пока не трогали эту тему, потому что не было хорошего примера, когда можно было бы показать вам реальную выгоду от их использования. Картинка стала первым таким тэгом.
Атрибуты указываются внутри открывающего тега между угловыми скобками в виде имя=значение. Значение чаще всего указывается в двойных кавычкам, но может быть и с одинарной кавычкой или совсем без них. Браузеры достаточно толерантны к тому, как вы записываете значение, но все же лучше использовать всегда двойные кавычки, просто чтобы все было всегда одинаково.
Итак, для изображения картинку можно указать в атрибуте src. Атрибуты должны быть у открывающих тэгов, а так как картинке не нужен закрывающий, то в единственном тэге:

Итак, здесь я добавил атрибут src, которому присвоено в двойных кавычках значение пути к картинке https://www.flenov.info/data/headerimage.png. Результат – на странице отображается картинка:

Списки
И закончим основы HTML списками. Очень часто нужно отобразить на странице списки:
— во-первых, это круто
— во-вторых это бывает полезно
— в-третьих мы просто может захотеть показать список.
Отличный список и его можно отобразить именно так:
— во-первых, это круто
— во-вторых это бывает полезно
— в-третьих мы просто может захотеть показать список.
В принципе, это сработает и на экране мы увидим список. Но идея HTML не просто отобразить текст так, как мы хотим, но и сообщить документу, какого типа каждая часть этого документа – где параграфы, где выделения и где списки. Если говорить только о WEB сайте, то абсолютно всю разметку можно было сделать с помощью или , а потом стилями оформить каждый из них так, как хочется и я об этом расскажу в отдельном мануале про язык стилей CSS.

— во-первых, это круто
— во-вторых это бывает полезно
— в-третьих мы просто может захотеть показать список.

В результате мы должны увидеть вот такой список:

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

во-первых, это круто
во-вторых это бывает полезно
в-третьих мы просто может захотеть показать список.


и сразу же напишите

   , то в результате тоже будет список. Например:



) и не указали, где он заканчивается (нет


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

во-первых, это круто
во-вторых это бывает полезно
в-третьих мы просто может захотеть показать список.


Нам не нужно выставлять номера, браузер автоматически подставит порядковый номер перед каждым элементом списка. За счет того, что мы используем ol вместо ul, теперь элементы помечены не кружочком, а цифрой.
Списки можно вкладывать друг в друга. Внутри элемента li можно создать еще один список, который будет сдвинут на один шаг вправо, как показано на следующем рисунке:

Этого эффекта можно добиться следующим кодом:

во-первых, это круто

круто — это самое важное
очень важно делать круто


во-вторых это бывает полезно
в-третьих мы просто может захотеть показать список.

Внутри первого li блока находиться другой ul блок. Он начинается внутри li и заканчивается внутри того же элемента.
Таким образом можно создавать несколько уровней вложенности, я не знаю, есть ли какие-то физические лимиты, которые смогут отработать браузеры, но логических по идее нет. С точки зрения дизайна наверно лучше не делать более 3, потому что больше будет выглядеть уже не так наглядно, по крайней мере на мой вкус.
Важные символы
Мы уже познакомились с самыми основными возможностями HTML, но это только основы. Есть еще много нюансов, которые можно выделить в отдельный продвинутый курс и возможно я его сделаю.
Я хочу еще рассказать про специальные символы, которые мы может использовать в HTML. Например, символы < и >являются очень важными для HTML документов, потому что они начинают и заканчивают имя тэга. Если вы напишите , то это будет тоже тэгом. А что, если вы просто хотите отобразить на странице угловые скобки?
Для этого есть специальные последовательности, как и для пробелов:
© это символ copyright
" это двойные кавычки
€ — символ денежной валюты Евро
® — символ R в кружке, который используется для обозначения торговой марки
Таблицы
Пока еще на экране ничего не отобразиться, потому что мы просто создали пустые строки без информации. Информация находиться в ячейках, а у каждой ячейки может быть два параметра – строка и колонка. Строки есть, остается добавить колонку и для этого можно использовать тэг td
 
 
Строка 1 Колонка 1
 
Строка 1 Колонка 2
 
 
Строка 2 Колонка 1
 
Строка 2 Колонка 2
 
 
 

Мы не видим границ ячеек, потому что не хватает оформления, но структура есть, и это как раз то, для чего был создан HTML.
У таблиц могут быть заголовки. Их можно создавать с помощью таких же ячеек td, как мы уже делали выше, а можно явно сказать структуре документа, что это заголовок таблицы и делается это с помощью тэга th (table header):
 
 
Колонка 1
 
Колонка 2
 
Колонка 3
 
 
Строка 1 Колонка 1
 
Строка 1 Колонка 2
 
Строка 1 Колонка 3
 
 
 
В первой строке здесь объявлены заголовки для трех колонок. Во второй строке значения за каждой из колонок. Результат можно увидеть на рисунке:

Не думайте о том, откуда взялись на этом скриншоте полоски, я их добавил стилями, чтобы видно было границы ячеек. Обратите внимание, что браузер нарисовал заголовки другим шрифтом, чтобы можно было отличить их от простого содержимого таблицы.
Что еще можно рассказать про таблицы. . .
В большинстве случаев вполне достаточно классической таблицы, но в некоторых случаях бывает необходимость объединить две колонки или две строки в одну. Например, на следующем скриншоте во второй строке первая ячейки занимает сразу две колонки. В третей строке первая ячейка занимает две строки. Это можно сделать с помощью атрибутов colspan (количество занимаемых колонок) и rowspan (количество занимаемых строк). По умолчанию эти атрибуты равны единице, то есть ячейка занимает одну колонку и одну строку, но можно указать любое значение.

 
 
Колонка 1
 
Колонка 2
 
Колонка 3
 
 
Строка 1 Колонка 1
 
Строка 1 Колонка 2
 
Строка 1 Колонка 3
 
 
Строка 2 Колонка 1
 
Строка 2 Колонка 3
 
 
Строка 3 Колонка 1
 
Строка 2 Колонка 2
 
Строка 3 Колонка 3
 
 
Строка 2 Колонка 2
 
Строка 3 Колонка 3
 
 
 
Заключение
Наверно стоит закончить знакомство с HTML и его основами, и сделать чуть более продвинутый курс. А пока практикуйтесь, пробуйте и смотрите на результат. Никакая теория не заменит хорошую практику. Теория может помогать с практикой, с пониманием того, как что-то работает. Этих основ достаточно для того, чтобы начать что-то делать самому, хотя бы простые вещи.
04 Ноября 2020 | Программирование
Поделитесь с друзьями
Внимание. Если ты копируешь эту статью себе на сайт, то оставляй ссылку непосредственно на эту страницу. Спасибо за понимание
Читать:
Как смотреть hdr видео на пк