Войти
Регистрация

Создание HTML страницы

Создание HTML страницы

Здравствуйте, дорогие друзья!
Меня зовут Самвел Погосов и в этой статье мы с Вами поговорим о создании Вашего первого сайта, а именно начнем с создания HTML-документа, без которого не может существовать ни один даже самый сложный сайт.

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

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

Ну, что же, приступим:

Вначале нам нужно решить, где именно мы будем создавать сайт. Обычно можно открыть блокнот и писать в нем, я так делал в самом начале, но было неудобно, т.к. все было одним цветом и синтаксис не подсвечивался. Начинающим я рекомендую использовать программу Notepad++, достаточно простая и удобная для HTML, CSS, JavaScript языков, есть и другие, более продвинутые, но об одной из них я расскажу в моем бесплатном курсе HTML и CSS для начинающих.

Скачать редактор Notepad++ можете по этой ссылке: https://notepad-plus-plus.org/

Как скачаете сразу установите. После этого создайте текстовый файл и откройте его с помощью Notepad++, нажав правой кнопкой мыши по текстовому файлу и выбрав "Edit with Notepad++" или откройте сразу программу и там создайте новый файл.

Далее пропишите вручную следующие строки, а именно - теги верхнего уровня:

<html>
<head>
</head>
<body>
</body>
</html>

Сохраните документ и назовите его index (где это расширение вместо .txt). Теперь Ваш текстовый документ превратился в HTML-документ. Можете открыть его в браузере и ничего не увидеть, потому что теги верхнего уровня не видны, значит нужно добавить текста немного. Однако Вы можете увидеть в исходном коде страницы их, нажмите сочетание клавиш Ctr+U или правой кнопкой мыши по странице в браузере и в появившемся окошке кликните на "Исходный код".

Объясню, что мы здесь написали

Обратите внимание, что здесь теги парные, например тег <html> в начале и </html> в конце, он парный, т.к. у него есть закрывающий тег в конце со знаком /. Точно также внутри тега <html> есть парные теги <head> и <body>. Но есть теги и одиночные, без закрывающего в конце тега, о них в следующих статьях.

Тег <html> означает начало и конец страницы, внутри этого тега размещаются все остальные, а именно:
-Тег <head> содержит в себе заголовки страницы, которые в свою очередь содержат информацию для браузера, поисковых систем, заголовок страницы, подключаемые файлы, мета-теги.
-Тег <body> содержит в себе все "тело" нашего сайта, т.е. все его содержимое - тексты, ссылки, фото и т.д.

Теперь попробуем добавить текст какой-нибудь, для этого внутри нашего тега <body> напишем несколько заголовков. Помните, что содержимое сайта пишем внутри тега <body>

<html>
<head>
</head>
<body>
  <h1>Заголовок 1-го уровня</h1>
  <h2>Заголовок 2-го уровня</h2>
  <h3>Заголовок 3-го уровня</h3>
  <h4>Заголовок 4-го уровня</h4>
  <h5>Заголовок 5-го уровня</h5>
  <h6>Заголовок 6-го уровня</h6>
</body>
</html>

Здесь мы прописали теги заголовков, они также парные, как видите, и имеют разный размер шрифта. Эти теги используются для выделения заголовков в тексте, но часто их употреблять не стоит, для выделения текста существуют другие теги. В основном используются только теги <h1, h2, h3>, а тег <h1> вообще чаще 1-го раза на странице использовать не рекомендуется, т.к. это не любят поисковые системы.

Теперь давайте с Вами вернемся к тегу <head> и внутри него пропишем еще 2 важных момента.

Добавим тег <title>, он также будет парным и иметь закрывающий тег </title>. Тег содержит заголовок страницы, который виден в названии вкладки в браузере:

<title>Моя первая HTML-страница</title>

И еще один мета-тег также добавим внутри тега <head>:

<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

Здесь тег <meta> передает информацию для браузера. Он имеет атрибут http-equiv и его значение Content-type говорит, что сейчас будет указан тип документа. Атрибут Content со значением text/html говорит нам, что наш документ это HTML-документ и его кодировка UTF-8, универсальная кодировка, благодаря которой документ отображается в кириллической кодировке.

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

<html>
<head>
  <title>Моя первая HTML-страница</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
</head>
<body>
  <h1>Заголовок 1-го уровня</h1>
  <h2>Заголовок 2-го уровня</h2>
  <h3>Заголовок 3-го уровня</h3>
  <h4>Заголовок 4-го уровня</h4>
  <h5>Заголовок 5-го уровня</h5>
  <h6>Заголовок 6-го уровня</h6>
</body>
</html>

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

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

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

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?