Темы: Что такое HTML и DOM?
TL;DR: HTML – это язык оформления DOM, который является холстом вашего веб-браузера, а теги в HTML – это способы добавления контента на страницу!
Репозиторий, если вам нужен код: он будет в папке HTML_Only.
Теперь, когда мы настроили Git, Github и Visual Studio Code, давайте погрузимся в основы создания собственной веб-страницы! Существует множество различных способов создания базовой веб-страницы, но сегодня мы сосредоточимся на технологии, которая используется в качестве основы для всех причудливых Front End Frameworks, о которых вы слышали. : HTML!
HTML означает язык гипертекстовой разметки и используется в качестве стандартного языка кодирования для создания документа, который затем будет использоваться в качестве основы для создания веб-страницы, визуализируемой на наш браузер.
Если языком является HTML, то бумага для написания языка находится в DOM или в объектной модели документа.
Со страницы Документация Mozilla:
Объектная модель документа (DOM) — это представление данных объектов, составляющих структуру и содержимое документа в Интернете.
Думайте о DOM как о холсте, который будет содержать то, что вы хотите отобразить для пользователей. Поскольку веб-страница является документом, модель DOM представляет этот документ, чтобы с ним можно было манипулировать. Примечание. Это объектно-ориентированное представление веб-страницы, поэтому такие языки, как Javascript, позволяют нам вносить в него изменения!
Имея в виду эту теорию, давайте создадим собственную веб-страницу, чтобы похвастаться перед друзьями и запачкать руки!
Во-первых: Документация для использования
Следующее выше, что вы видите, — это базовый шаблон HTML-страницы, который вам может понадобиться для начала написания кода. Если у вас загружен код Visual Studio, вы можете ввести html на странице с именем __.html, и вы увидите множество вариантов. Вы можете выбрать любой из них, и вы увидите структуру, аналогичную той, что вы видите выше. Я использовал html:5 в качестве предоставленного мне варианта и создал теги, которые вы видите выше.
Что такое тег, спросите вы? Тег — это оболочка, куда вы можете поместить текстовое содержимое, которое хотите отобразить на странице. Все теги имеют начальный тег и конечный тег, между которыми вы можете хранить содержимое.
Например, все заключено между тегом ‹html› ‹/html›, который является родительской оболочкой и служит для хранения всех остальных тегов. Оттуда вы можете хранить информацию тебе нужно. Но давайте сделаем разбор!
- ‹!DOCTYPE html›: это обязательное объявление, которое сообщает браузеру, какой тип документа должен быть прочитан DOM, то есть HTML5.
- ‹html›‹/html› : родительская оболочка, в которой все хранится. Просто имейте в виду, что вам нужно сделать что-то после объявления!
- ‹head›‹/head›: это контейнер для метаданных (данных о данных), которые вы хотите сохранить на своей HTML-странице. Это может содержать информацию с тегом заголовка вашей страницы (которую вы можете показать в Интернете), метатеги, содержащие информацию о данных, и так далее! Вы можете проверить здесь для большего!
- ‹body›‹/body›: здесь вы будете хранить фактический контент, который вы будете показывать на странице! Будь то текст, числа или изображения, вы можете использовать дополнительные теги для дальнейшего улучшения того, что отображается на вашей странице!
Обратите внимание, как хранятся теги. Все теги заключены в тег html, при этом ‹/html› расположен в строке 11 на изображении выше. И как ‹head› содержит метатеги и title внутри, но заканчивается на строке 7. Затем, наконец, тег body, который в настоящее время пуст.
Мы вкладываем эти теги друг в друга, а для основного содержимого страницы мы собираемся вложить теги контента в тег ‹body›. Итак, давайте продолжим и посмотрим, что мы собираемся построить:
Как всегда, пожалуйста, напечатайте и закодируйте это сами! Если вы не выработаете эту привычку сразу, вы навредите своему собственному росту. Поэтому, хотя решения будут находиться в репозитории Github, мы познакомим вас только с концепциями, чтобы вы могли попробовать ориентироваться самостоятельно.
Начнем с приветственного сообщения страницы! Используя тег ‹h1›, мы можем сделать текст такого большого размера. Итак, давайте поместим этот текст между тегом h1 следующим образом:
‹h1› Текст здесь ‹/h1›
Если вы используете Visual Studio Code и выполнили первую настройку, которую мы сделали, вы можете открыть страницу через Live Server, щелкнув страницу правой кнопкой мыши и выбрав «Открыть с Live Server». Если у вас нет этой опции, вы можете просто использовать «Открыть в браузере по умолчанию» для просмотра страницы.
Поздравляем! Это то, что вы увидите на своей странице, и теперь у вас есть самая первая веб-страница! Конечно, мы хотели бы добавить больше контента, так что давайте продолжим двигаться вперед. Если вы хотите, чтобы контент менялся по мере добавления, вы можете просто обновить браузер или повторно щелкнуть мышью, чтобы открыть браузер с помощью Visual Studio Code.
Далее давайте просто добавим, как мы рады научиться быть разработчиком и использовать тег ‹h3›.
После того, как мы указали, насколько мы взволнованы, давайте теперь поместим общий тег, который будет служить родительским тегом для размещения остальных наших тегов. Это называется тегом ‹div›, и он не добавляет никаких причудливых шрифтов или изменений размера, но используется разработчиками в качестве тега по умолчанию для разделения контента и облегчения чтения.
Мы собираемся разместить больше материала для вашей страницы. Давайте воспользуемся другим общим тегом, называемым тегом ‹p›, который является просто тегом абзаца.
Чтобы поместить те строки, которые разбивают контент, вы можете использовать тег ‹hr›. Этому тегу не нужен закрывающий тег, как другим, которые мы видели , потому что нет необходимости помещать контент между этими тегами. Это просто разрыв строки.
Теперь давайте добавим тег таблица, чтобы добавить все, что мы уже узнали в этой серии. Таблица позволяет помещать строки, заголовки и ячейки с тегами ‹tr›, ‹th› и ‹td› соответственно. Так как это намного сложнее, чтобы заставить его работать, давайте потратим время на просмотр связанного документа. Одним из наиболее важных навыков является умение читать документацию в коде. Вы не можете запомнить все! Итак, давайте выработаем привычку читать и учиться читать учебные пособия (такие как этот!)
И, наконец, давайте поместим несколько тегов абзаца внизу о вашем росте и ваших целях в изучении кода.
Имея все это в виду, давайте проверим страницу, и если она выглядит так же, как в начале, отлично!
Обязательно загрузите свою первую веб-страницу на свой Github! Важно создать постоянный поток коммитов для себя, чтобы показать, что вы преданы своему делу и работаете, чтобы учиться перед будущими потенциальными рекрутерами. Итак, давайте загрузим его на Github и продолжим в следующем выпуске!
