Показать Меню
falbar Основы HTML

Первая HTML страница - с чего начать?!

Основы HTML

Дробового времени суток! Это вторая статья по основам HTML, и из неё Вы узнаете: что означает понятие HTML тег, и для чего эти теги нужны. Также мы создадим HTML страницу и разберем основные её части, а в завершении этого поста поговорим о комментариях в HTML.

Открывая любую веб-страницу, Вы должны понимать, что она состоит из тегов. А если говорить точнее, то из множества тегов расположенных определённым способом. Они формируют структуру HTML документа и, забегая не много вперед, скажу, что это очень важная часть разработки веб-страницы, и к ней не стоит относиться опрометчиво. Мне сразу на ум приходит хорошая аналогия, а именно – строительство дома. Если изначально сделать плохой фундамент у дома – не сложно догадаться, к чему это может привести. Так и при разработке HTML страницы, если плохо продумать её структуру, то, со временем, что-то обязательно «поедет».

И так, давайте вернёмся к HTML и дадим определение тегу.

Тег – это элемент, при помощи которого производиться разметка страницы, более правильным названием является дескриптор.

Все HTML теги делятся на две основных группы:

  • Одиночные (пустые);
  • Парные (открывающие и закрывающие).
<!-- Пример одиночных тегов -->
<link>		<meta>

<!-- Пример парных тегов -->
<h1></h1>		<b></b>

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

  • link – ссылка на внешний файл;
  • meta – системный тег предназначенный для хранения информации для браузера или поисковой машины;
  • h1 – заголовок первого уровня;
  • b – тег, предназначенный для выделения текста жирным.

Опережая вопрос, в каком регистре правильно или стоит писать, отвечу - все теги регистра независимы. Но есть, так сказать, правило «хорошего тона»: писать все теги желательно в нижнем регистре, так, в общем, делаю и я.

Теперь самое время, разобраться с HTML страницей и с основными частями.

<html>		<!--Начало документа-->
	<head>		<!--Начало шапки документа-->
		<title>Документ</title>
	</head>		<!-- Конец шапки документа-->
	<body>		<!-- Начало тела документа-->

		HTML код

	</body>		<!--Конец тела документа-->
</html>		<!--Конец документа-->

Так выглядит стандартный каркас HTML страницы. Как видите, он состоит из четырёх парных тегов: html, head, title и body. Этот код обязателен нужно будет прописывать перед началом разработки каждой HTML страницы. После того как Вы напишете этот пример в блокноте Вам останется его только сохранить с расширением .html и указав название файла.

Код HTML страницы

Теперь заходим в папку с файлом и кликаем по нему. Далее файл откроется в Вашем браузере, а он уже выполнит код.

HTML страница

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

Хочется отметить интересно штуку, связанную с написание тегов: html, head и body. Если обратиться к первоисточнику – спецификации HTML4.1, то, хоть эти теги и парные, их можно не закрывать. Браузер при анализе кода сам допишет за Вас, но, хочу сразу предостеречь, лучше их всё-таки закрывать самим. Это как минимум улучшит читаемость кода. А теперь давайте рассмотрим каждый из тегов HTML каркаса поподробней.

  • html – контейнер для все тегов находящихся внутри;
  • head – голова документа, перед тем как браузер начнёт отрисовывать страницу или тело документа, он анализирует содержимое этого элемента. В нем подключаются все системные теги, которые пользователь не видит. Например, подгружаются стили и скрипты, сообщается кодировка документа и т.д.;
  • title – заголовок страницы. Это не обязательный тег, если обратиться к спецификации HTML, но он очень важен для поисковых машин, а также помогает пользователю ориентироваться, переходя по страницам. Поэтому его обязательно стоит всегда указывать;
  • body – тело документа, в нем пишется вся информация которую следует отобразить пользователю в окне браузера.

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

<!--  Здесь может находиться любой текст -->

Текст, заключённый в комментарий не будет отображаться в окне браузера. Как Вы наверняка догадались, эта конструкция используется для пояснения HTML кода самим разработчиком страницы. Но тут важно помнить и понимать, что они не могут быть вложенными. А теперь поясню почему: браузер, при чтении документа найдя начало комментария, будет в последствие искать ближайшую концовку, а всё остальное выведет как обычный текст. Так что будьте аккуратны при использовании их.

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

Подписаться на обновления

Комментариев еще не оставлено