Создание первой страницы html

HTML-код, хотя он очень мощный, не является сложным языком. Для начала требуется совсем немного, почти ничего:

  • Браузер , по крайней мере один уже установлен на компьютере или устройстве которое мы используем.
  • Текстовый редактор , хотябы один, как правило кже есть в каждой операционной среде. Важно помнить, что мы не должны использовать такие программы, как Word, OpenOffice или WordPad, которые являются развитыми текстовыми процессорами.

Так как браузер и текстовый редактор уже есть на вашем ПК мы приступим к созданию нашей первой страницы для этого запускаем наш текстовый редактор, например классический блокнот Windows, и пишем простой текст, подобный следующему:

Привет Мир!

После мы сохраняем наш файл с расширением .html, для этого в блокноте найдите меню файл и в нем подменю «Сохраникть как», прописываем имя файла с расширением допустим «ПерваяПрограмма.html»

первая программа HTML

После находим наш файл по пути куда сохранили его и открываем, файл с расширением .html будет автоматически открыт в браузере используемый по умолчанию в вашей ОС. И что же мы увидели в браузере? Ни чего не обычного просто текст. Но давайте посмотрим, что произойдет, если мы добавим разметку:

<h1>Привет мир!</h1>
<p>эта наша первая страница на HTML!</p>

После того, как мы добавили заголовок первого уровня ( <h1>) и абзац ( <p>), сохраните файл и обновите страницу (обычно просто нажать F5), текст изменится следующим образом:

Первая страница на html

Браузер показывает наш заголовок крупным и жирным шрифтом. При этом содержание абзаца (тот, что между <p></p>) представлено с меньшим размером.

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

Выбор стиля по-прежнему важен, но является вспомогательным, в этом случае мы видим стили предварительно сформированные в браузере.

Теги <head> и <body>: минимальная структура страницы HTML

Чтобы сделать вещи немного лучше, если мы удовлетворены нашей первой страницей, давайте вернемся к нашему редактору и изменим разметку следующим образом:

<!doctype html>
<html lang="ru">
<head><title>Привет мир!</title></head>
<body>
  <h1>Привет мир!</h1>
  <p>эта наша первая страница на HTML!</p>
</body>
</html>

При обновлении страницы F5мы не увидим существенных изменений, но позже мы узнаем, насколько важно правильно определить структуру страницы.

тег описание
<! DOCTYPE html> Он просто говорит о том, что файл является страницей HTML
<Html> Это тег, который охватывает всю страницу и позволяет нам, например, определить, какой язык страницы, как в нашем случае, когда мы определили, что документ на русском языке благодаря атрибуту lang="ru"
<Head> Этот тег содержит ряд полезной информации для управления страницей, в нашем случае мы, например, определили, какой заголовок будет отображаться в поисковых системах и на вкладках браузера, благодаря тегу <title>, но этот раздел должен содержать большую часть которую мы увидим позже.
<Body> Он содержит элементы страницы, весь контент и все связанные теги, которые затем будут отображаться на экране, вставленые сюда, как мы это сделали в нашем случае с заголовком и абзацем.

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

Фактически все браузеры дают возможность отображать HTML-код страниц, и почти все они позволяют делать это с помощью комбинации клавиш CTRL+U.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *