Основы HTML и CSS

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

Основы HTML

HTML (HyperText Markup Language) — это язык разметки, который используется для создания структуры веб-страниц. Он позволяет задавать различные элементы на странице, такие как заголовки, параграфы, списки, изображения и ссылки. HTML состоит из множества тегов, которые описывают содержимое и его организацию.

Структура HTML-документа

Каждый HTML-документ начинается с <!DOCTYPE html>, который указывает браузеру, что это документ HTML5. Затем идет корневой элемент <html>, внутри которого находятся элементы <head> и <body>. Элемент <head> содержит метаданные и ссылки на внешние файлы стилей, а <body> содержит видимое содержимое страницы.

Пример базовой структуры HTML-документа:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Название страницы</title>
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Это параграф текста.</p>
  </body>
</html>

Основы CSS

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

Применение стилей

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

Пример подключения внешнего файла CSS:

<link rel="stylesheet" href="styles.css">

Пример простого CSS:

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

Принципы работы с HTML и CSS

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

Заключение

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

Спасибо за внимание!

Практическое задание:

  1. Создайте простой HTML-документ с заголовком и несколькими параграфами текста. Используйте базовую структуру, представленную выше.
  2. Создайте внешний CSS-файл и подключите его к вашему HTML-документу. Примените стили для изменения шрифтов и цветов текста.
  3. Разместите документ и CSS-файл на локальном сервере или платформе для тестирования, чтобы проверить, как применяются стили.