Илья Федотов веб-разработчик

Создание веб-сайта с нуля на HTML и CSSHTML (HyperText Markup Language) - это основной язык разметки для создания веб-страниц. Если вы хотите создать собственный сайт, знание HTML является первым шагом в этом процессе. В этой статье мы рассмотрим базовые

20.12.2024
89 просмотров

Основы HTML

HTML состоит из элементов, которые обозначаются тегами. Некоторые из них могут быть самостоятельными (например, ``, ``, ``), а некоторые должны идти парами (включая и закрывающие теги, такие как `

` или `
`). Основные структурные элементы HTML включают в себя:
- `` — объявление типа документа;
- `` — корневой элемент страницы, внутри которого помещаются остальные элементы;
- `` — элемент содержит метаинформацию о документе (такую как заголовок или ссылки на стили и скрипты);
- `` — задает название вашей веб-страницы, отображаемое в вкладке браузера;<br>- `<body>` — содержит все содержимое страницы, которое видит пользователь.<br><h2>Продвинутые элементы HTML</h2>Кроме базовых элементов существует множество других тегов для размещения текстового и мультимедийного контента:<br>- `<h2>` до `<h6>` для заголовков разного уровня;<br>- `<p>` — параграф или абзац текста;<br>- `<a>` — гиперссыл для создания ссылок на другие страницы или ресурсы;<br>- `<img>` — тег для вставки изображений;<br>- `<ul>`, `<ol>`, и `<li>` — не упорядоченные, упорядоченные списки и элементы списков соответственно.<br><h2>Основы CSS</h2>CSS (Cascading Style Sheets) обычно используется в паре с HTML для стилизации элементов. Хотя это не прямое требование для создания простого веб-сайта, знание основ CSS позволяет более тонко контролировать внешний вид вашего сайта:<br>- Внешние таблицы стилей (например, `<link rel="stylesheet" href="styles.css">`) позволяют применять одинаковые стили ко всем страницам;<br>- Внутренние стили используются внутри тега `<style>` в теле документа;<br>- Инлайн стили применяются напрямую к элементу через атрибут `style`.<br><h2>Практические навыки</h2>1. Установите редактор кода, например, Atom, Visual Studio Code или Sublime Text.<br>2. Создайте новый файл с расширением `.html`.<br>3. Напишите структуру базовой HTML-страницы:<br> ```html<br> <!DOCTYPE html><br> <html lang="ru"><br> <head><br> <meta charset="UTF-8"><br> <title>Моя первая страница



Заголовок моего сайта












```
4. Добавьте CSS для стилизации вашего веб-сайта в отдельном файле `styles.css` или внутри тега `