Работа с HTML и CSS

60 минут Урок 7

Введение. Этот урок посвящен основам работы с HTML и CSS, которые являются основой веб-разработки. Мы рассмотрим, как создать простую HTML-страницу и применить стили с помощью CSS.

HTML (HyperText Markup Language) — это язык разметки, который используется для создания структуры веб-страниц. CSS (Cascading Style Sheets) — это язык, который используется для описания оформления документов, написанных на HTML.

Ключевые термины
HTML
Язык разметки, используемый для создания веб-страниц.
CSS
Язык, который используется для оформления веб-страниц.
Элемент
Структурная часть HTML-документа.
Селектор
Часть CSS, которая определяет, к каким элементам применяются стили.

Структура HTML-документа. Стандартный HTML-документ состоит из следующих частей:

  • <!DOCTYPE html> - определяет тип документа;
  • <html> - корневой элемент;
  • <head> - содержит метаданные;
  • <body> - основное содержимое страницы.

html 
<!DOCTYPE html>
<html>
<head>
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Добро пожаловать на мою страницу!</h1>
    <p>Это простой пример HTML-документа.</p>
</body>
</html>

Основные теги HTML. В HTML существует множество тегов. Рассмотрим некоторые из них:

  • <h1> - заголовок первого уровня;
  • <p> - параграф;
  • <a> - ссылка;
  • <img> - изображение.

Стилизация с помощью CSS. CSS позволяет управлять стилями элементов HTML. Стили могут быть добавлены несколькими способами:

  • Внутри тега <head> с помощью <style>;
  • C внешнего файла, подключаемого с помощью <link>;
  • С помощью встроенных стилей непосредственно в элементах.

css 
body {
    background-color: #f0f0f0;
}
h1 {
    color: blue;
}
p {
    font-size: 16px;
}
Упражнение

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

Вопрос

Что такое HTML?

Чек-лист урока
Практический сценарий: Кейс: Создание веб-страницы

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

Задание:
Опишите свои шаги по созданию структуры HTML и стилизации элементов с помощью CSS.
Сценарий видео

Скрипт для видео

Здравствуйте, в этом видео мы поговорим о том, как работать с HTML и CSS...

Предыдущий урок Следующий урок