HTML и JavaScript — это два основных языка программирования, которые используются для создания интерактивных веб-страниц. HTML (HyperText Markup Language) используется для написания структуры и контента веб-страницы, а JavaScript — для добавления динамического поведения и взаимодействия с пользователями.
Для начала создания веб-страницы нам понадобится редактор кода. Рекомендуется использовать редакторы с подсветкой синтаксиса и автоматическим завершением кода, такие как Visual Studio Code, Sublime Text или Atom.
1. Создание HTML-структуры страницы:
Начнем с создания основной структуры HTML-страницы. Для этого создайте файл с расширением .html и откройте его в выбранном редакторе кода.
«`html
Привет, мир!
Это моя первая веб-страница.
«`
В данном примере создается простая веб-страница с заголовком первого уровня `
` и абзацем `
`. Также добавлен заголовок для веб-страницы с помощью тега `
Привет, мир!
Это моя первая веб-страница.
«`
В файле styles.css вы можете добавить стили для элементов на странице:
«`css
h1 {
color: blue;
}
p {
font-size: 18px;
}
«`
В данном примере заголовок первого уровня будет иметь синий цвет, а размер абзаца будет 18 пикселей.
3. Добавление динамического поведения с помощью JavaScript:
Теперь давайте добавим немного взаимодействия на нашей веб-странице с помощью JavaScript. Добавьте следующий код в ваш HTML-файл:
«`html
Привет, мир!
Это моя первая веб-страница.
«`
В данном примере добавлен абзац с идентификатором «demo» и кнопка с атрибутом onclick, который вызывает функцию changeText() при клике на кнопку. Файл script.js содержит код JavaScript для изменения текста абзаца:
«`javascript
function changeText() {
document.getElementById(«demo»).innerHTML = «Текст изменен!»;
}
«`
При клике на кнопку текст абзаца будет изменяться на «Текст изменен!».
Таким образом, вы создали простую веб-страницу, добавили стили с помощью CSS и добавили динамическое поведение с использованием JavaScript. Это только начало, и HTML и JavaScript предлагают множество возможностей для создания и управления веб-страницами. Вы можете изучить дополнительные материалы и примеры кода, чтобы расширить свои знания и навыки в этой области. Удачи в создании своих веб-страниц!
