Skip to content

HTML & CSS

Jump to bottom
yury mid edited this page Apr 4, 2023 · 1 revision

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

Что такое HTML?

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

Базовые тэги в HTML

HTML использует различные тэги для создания структуры и содержания на странице. Некоторые из наиболее распространенных тэгов включают:

<html> - определяет начало и конец HTML документа.
<head> - содержит информацию о документе, такую как заголовок, мета-тэги и ссылки на внешние ресурсы.
<body> - определяет содержимое документа, которое будет отображаться на странице.
<h1>-<h6> - определяют заголовки разных уровней.
<p> - определяет абзац текста.
<a> - определяет гиперссылку на другую страницу или ресурс.
<img> - определяет изображение на странице.
<ul> - определяет неупорядоченный список.
<ol> - определяет упорядоченный список.
<div> - определяет блок элементов на странице.

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

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
    <h1>Заголовок первого уровня</h1>
    <p>Абзац текста</p>
    <img src="image.jpg" alt="Описание изображения">
    <a href="http://www.example.com">Ссылка на внешний сайт</a>
  </body>
</html>

Что такое CSS?

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

h1 {
  color: blue;
  font-size: 32px;
}

p {
  color: black;
  font-size: 16px;
}

img {
  max-width: 100%;
  height: auto;
}

Базовый синтаксис CSS

CSS использует правила, которые определяют стили для элементов на странице. Каждое правило состоит из селектора и объявления. Селектор определяет, какие элементы на странице будут стилизованы, а объявление задает свойства стиля и их значения.

Пример правила CSS:

h1 {
  font-size: 32px;
  color: #333;
}

В этом примере h1 - это селектор, который применяет стили к заголовку первого уровня, а font-size и color - это свойства стиля, задающие размер шрифта и цвет текста заголовка.

Как браузер интерпретирует HTML и CSS?

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

Основные концепции HTML и CSS

Ниже приведены некоторые основные концепции HTML и CSS, которые необходимо знать для создания веб-страниц.

  • Семантическая разметка. Семантическая разметка означает использование тегов, которые точно описывают содержимое на странице. Например, вместо использования тега
    для создания блока контента, можно использовать тег <article>, который говорит браузеру, что это статья на странице. Это помогает поисковым системам и другим инструментам лучше понимать содержимое на странице.
  • Каскадность и приоритетность CSS. Каскадность CSS означает, что если несколько стилей применены к одному элементу, то браузер использует последний определенный стиль. Приоритетность CSS означает, что если несколько стилей применены к одному элементу, то браузер использует наиболее специфический стиль. Специфичность может быть определена, например, по количеству селекторов, ID или классов.
  • Box model определяет, как элементы на странице отображаются как прямоугольники, включая размер, отступы, рамки и заполнение. Это помогает управлять расположением и выравниванием элементов на странице.
  • Responsive design. Responsive design - это подход к веб-разработке, который обеспечивает оптимальное отображение веб-страницы на различных устройствах и экранах, включая мобильные устройства. Это достигается путем использования гибких макетов, медиа-запросов и других техник.

    • Заключение

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

created by "iceberg group" / mid © pieceowater 2023.

Clone this wiki locally