12 Май 2023
3 мин
3271

Что такое HTML, CSS и JavaScript

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

Содержание

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

HTML (HyperText Markup Language)

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

Пример кода на HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Пример HTML-документа</title>
  </head>
  <body>
    <h1>Заголовок первого уровня</h1>
    <p>Это пример абзаца с текстом.</p>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
    </ul>
  </body>
</html>

CSS (Cascading Style Sheets)

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

Пример кода на CSS:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

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

p {
  color: #666;
  font-size: 16px;
}

ul {
  list-style-type: none;
  padding: 0;
}

JavaScript

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

Пример кода на JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  var button = document.createElement('button');
  button.textContent = 'Нажми меня!';
  button.addEventListener('click', function() {
    alert('Вы нажали на кнопку!');
  });
  document.body.appendChild(button);
});

Взаимодействие HTML, CSS и JavaScript

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

Вот пример веб-страницы, в которой используются все три технологии:

<!DOCTYPE html>
<html>
  <head>
    <title>Пример веб-страницы с HTML, CSS и JavaScript</title>
    <style>
      /* Вставленный CSS-код */
      body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1>Заголовок первого уровня</h1>
    <p>Это пример абзаца с текстом.</p>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
    </ul>

    <script>
      // Вставленный JavaScript-код
      document.addEventListener('DOMContentLoaded', function() {
        var button = document.createElement('button');
        button.textContent = 'Нажми меня!';
        button.addEventListener('click', function() {
          alert('Вы нажали на кнопку!');
        });
        document.body.appendChild(button);
      });
    </script>
  </body>
</html>

В заключении, освоение HTML, CSS и JavaScript является важным шагом для начинающих веб-разработчиков. Удачи в изучении и практике этих технологий! 😃

Добавить комментарий