Основы HTML - html-css-course.ru

HTML-CSS-COURSE.RU

html-css-course.ru
Перейти к контенту
Основы HTML
Теги, конструкция.
HTML (HyperText Markup Language) по своей сути является набором тегов, которые определяют элементы вебстраницы и размещаются по определенным правилам. Совокупность HTML-тегов составляет код страницы браузера. Тегом называется конструкция вида <символ>, то есть "символ" окружается угловыми скобками. Значение символа меняется и определяет вид и конструкцию вебстраницы, тег кода может быть как одинарным, так и двойным. Например, тег <br> одинарный, а теги <b></b> называют двойным или парным тегом. Конструкцию двойного тега еще называют контейнером.
Написание совокупности HTML-тегов по определенным правилам и является написанием кода HTML-страницы.
Документ HTML.
Как и любой другой документ, код html-страницы должен составляться по определенным правилам и иметь определенную структуру, которая называется базовой структурой HTML-документа. Так, любой код html-страницы должен состоять из следующих базовых элементов:
<!DOCTYPE html> - с данного тега должен начинаться любой html-документ, говорит браузеру по какому стандарту написана страница.  В настоящее время стандартом является HTML5.
<html> - тег, который открывает вебстраницу;
<head> - открывающий тег раздела заголовка документа;
</head> - закрывающий тег раздела заголовка;
<body> - открывающий тег содержимого html-страницы "тело документа"
</body> - закрывающий тег раздела "тело"
</html> - тег, закрывающий html-страницу.
Как видно из приведенных выше символов, любая html-страница состоит из двух основных частей:
HEAD - раздел рабочего заголовка документа;
BODY - раздел содержимого html-страницы.
Основные части html-страницы.
"HEAD".
Как  было сказано выше является разделом рабочего заголовка html-страницы. При отображении html-страницы браузером остается невидимым для пользователя, но содержит очень важные сведения, влияющие на отображение страницы браузером.
Раздел рабочего заголовка "head" содержит парный тег <title></title>, написание которого не является принципиально важным и обязательным по установленным правилам, но он очень важен для поисковых машин. Вы ведь не хотите, чтобы страница была занесена в базу поисковых машин "безликой" ("untitled"), а при открытии страницы браузером появилась запись - "Untitled Document" (Документ без названия).
"BODY".
Здесь думаю пояснять ничего не надо. Само название раздела говорит за себя. Здесь содержится содержимое html-страницы (текст, картинки, анимация, фильмы и многое другое). Все, что вы видите на экране монитора при открытии браузера, расположено внутри тега "BODY".

Написание первого кода html.
Спешу вас обрадовать - написание вебкода можно производить в любом текстовом редакторе, который по всей видимости уже установлен на вашем компьютере (блокнот,word ...). Единственно, что необходимо делать, это сохранять написанный код в формате html. Например, напишем следующий код в блокноте (программе windows):
<!DOCTYPE html>
<html>
<head>
<title>Первая страница</title>
</head>
<body>
<p>Это первая страница, которая написана на языке html</p>
</body>
</html>
----------------------
   
---------------------      
Для наработки навыков работы с кодом, рекомендую все приведенные коды самостоятельно и вручную набирать на клавиатуре.
Сохраним файл под именем page.html
Нажмем правую кнопку мышки на созданном файле и выберем "открыть в (название вашего браузера)". Посмотрим, что у нас получилось:
Наведите курсор указателя мышки на картинку
браузер
Как вы видите, в браузере у нас отобразилась следующая информация:
Контейнер <title></title> - браузер вывел название страницы "Первая страница";
Контейнер <body></body> - браузер вывел содержимое документа "Это первая страница, которая написана на языке html".
А сам html-код нам не видим. То есть выводится только необходимое содержимое. Если вы хотите посмотреть написанный вами код в браузере, тогда необходимо произвести следующие действия (можно сделать несколькими способами):
1. Навести указатель мышки на вебстраницу и нажать на правую кнопку мышки - вы увидите диалоговое окно браузера. Выберите пункт "просмотреть код страницы" и браузер в новом окне откроет исходный код вашей страницы.
2. Намного проще это сделать если нажать кнопки клавиатуры "Ctrl" и "u". Не бойтесь экспериментировать.
----------------------

----------------------
Желательно самостоятельно написать приведенный выше код (текст заголовка, строки можете написать любой) и поэкспериментировать с просмотром результата и исходного кода в веб-браузере.
_______________

Назад к содержимому