Мастерство в использовании HTML <div> и стилизации CSS

Введение

В этом лабе вы научитесь использовать HTML-тег <div> для разделения веб-страницы на разные разделы или части. Также вы научитесь применять CSS к элементам, сгруппированным с использованием тега <div>.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-70744{{"HTML тег

и стилизация CSS"}} html/head_elems -.-> lab-70744{{"HTML тег

и стилизация CSS"}} html/text_head -.-> lab-70744{{"HTML тег

и стилизация CSS"}} html/layout -.-> lab-70744{{"HTML тег

и стилизация CSS"}} html/doc_flow -.-> lab-70744{{"HTML тег

и стилизация CSS"}} end

Создание структуры веб-страницы

Откройте файл index.html в вашем текстовом редакторе.

Во - первых, создайте базовую структуру HTML - файла, добавив объявление doctype, теги <html>, <head> и <body>.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body></body>
</html>

Добавление заголовка

В этом шаге мы добавим раздел заголовка на веб - страницу с использованием тега <div>.

Внутри тега <body> добавьте тег <div> с именем класса "header".

<div class="header"></div>

Добавьте некоторый контент внутри тега <div>, чтобы представить раздел заголовка. Например:

<div class="header">
  <h1>Welcome to my website</h1>
</div>

Добавление боковой панели и разделов основного содержания

Далее мы добавим боковую панель и разделы основного содержания на веб - страницу с использованием тега <div>.

Внутри тега <body> добавьте еще один тег <div> с именем класса "container".

<div class="container"></div>

Внутри тега <div> с классом "container" добавьте еще два тега <div> - один для боковой панели и один для основного содержания. Назначьте им имена классов "sidebar" и "main - content" соответственно.

<div class="container">
  <div class="sidebar">
    <!-- add sidebar content -->
  </div>
  <div class="main-content">
    <!-- add main content here -->
  </div>
</div>

Добавьте контент внутри тегов <div>, чтобы представить боковую панель и разделы основного содержания. Например:

<div class="container">
  <div class="sidebar">
    <h2>About Me</h2>
    <p>Hi, my name is John and I'm a web developer.</p>
  </div>
  <div class="main-content">
    <h2>My Latest Project</h2>
    <p>Check out my latest web project!</p>
  </div>
</div>

Добавление подвала

Наконец, мы добавим раздел подвала на веб - страницу с использованием тега <div>.

Внутри тега <body> добавьте еще один тег <div> с именем класса "footer".

<div class="footer"></div>

Добавьте некоторый контент внутри тега <div>, чтобы представить раздел подвала. Например:

<div class="footer">
  <p>&copy; 2021 My Website. All rights reserved.</p>
</div>

Стилизация веб - страницы

Теперь, когда мы создали базовую структуру веб - страницы с использованием тега <div>, мы можем применить стили CSS, чтобы сделать страницу более привлекательной.

Откройте файл style.css в вашем текстовом редакторе, или создайте новый файл с именем style.css и свяжите его с файлом index.html с использованием тега <link> внутри секции <head>.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body></body>
</html>

В файле style.css добавьте следующие стили для различных имен классов, которые мы использовали ранее:

/* Header styles */
.header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

/* Container styles */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* Sidebar styles */
.sidebar {
  width: 30%;
  padding: 10px;
  background-color: #f2f2f2;
}

/* Main Content styles */
.main-content {
  width: 65%;
  padding: 10px;
  background-color: #fff;
}

/* Footer styles */
.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

Предварительный просмотр веб - страницы

Теперь, когда мы создали структуру веб - страницы и применили стили CSS с использованием тега <div>, давайте предварительно просмотрим веб - страницу в веб - браузере.

Сохраните файлы index.html и style.css.
Откройте файл index.html в веб - браузере, чтобы увидеть веб - страницу.

Вы должны увидеть веб - страницу с заголовком, боковой панелью, основным содержанием и секцией подвала, все красиво стилизованными с использованием CSS.

Резюме

В этом практическом занятии вы узнали, как использовать HTML - тег <div> для разделения веб - страницы на разные разделы или части. Также вы узнали, как применить стили CSS к различным разделам с использованием имен классов, присвоенных им. С помощью этих методов вы можете создавать более сложные и визуально привлекательные веб - страницы.

HTML тег <div> и стилизация CSS