Уважаемые друзья, я рад что Вы зашли в эту тему и хотите познать основы html!
Я расскажу в этом уроке Вам структуру html, это надо знать обязательно.
Итак, структура html-файла следующая
тип html-файла сам html-файл -голова -тело
Синтаксис. В html для всего существуют тэги. Тэги (или теги, tags) - это элементы для обозначение принадлежности элементов к чему-то. Сейчас объясню. Все просто.
<html>Hello</html>
html - это тег, <html> - это открытие тега (внесенные его написанием изменения действуют на текст после него), а </html> - это закрытие тега, т.е. на текст, идущий дальше, тег больше не действует.
Все, что помещают в скобки <> - это теги и их параметры. А все то, что находиться между открытием тега и его закрытием (<html>воз здесь</html>) подпадает под действие тега, который изменяет параметры отображения этого текста и настройки. Надеюсь, понятно. Если написать
<em>Hello</em>
то текст Hello отобразиться курсивом (Hello)
И т.д., таких обозначений огромная куча. Расшифровывает их браузер.
Параметры тегов задают при открытии тегов:
<em align="center">Hello</em>
В этом случае текст Hello будет ровно посредине экрана по горизонтали.
align="center" - это параметр и значение (align - параметр, "center" - значение. значения всегда помещают в кавычки).
И еще. Есть теги, которые надо закрывать, которые не обязательно закрывать и которые не надо закрывать. Например, тег <br> просто делает перенос строки на новую, и не содержит никаких параметров, так как кроме этого ничего не делает, поэтому его не закрывают.
Итак, итоги по поводу тегов:
<имятега параметр="значение">текст</имятега> <em align="center">Hello</em>
Возвращаемся к структуре. Структура сделана тегами следующим образом:
тип файла html - указывается одним тегом <html> здесь находиться тот текст, который браузер принимает за файл html и отобразит его так, как говорят теги <head> здесь находиться "голова" сайта - общие указания для отображения, настройки отображения (стили) </head> <body> А здесь находиться тело сайта - весь его контент, статьи, материалы и другое </body> </html>
Пример
<!DOCTYPE html> - тип html (они разные)
<html>
<head>
<title>Это простой сайт</title> - это заголовок, отображаемый только на вкладке и в имени окна браузера
<meta charset="utf-8"/> - установка кодировки юникод "utf-8" для страницы (кодировка имеет значение)
</head>
<body bgcolor="yellow" text="green"> - фон желтый, текст зеленый
<h1 align="center">Это мой первый сайт</h1> - 1 Заголовок (самый большой, есть поменьше), отображается по центру ("center")
<p align="center">Это первый абзац<br>Вторая строка<br>Третья строка<br></p> - абзац, отображаемый по центру, внутри которого <br> переносит строку. Абзац переносит строку дважды после его закрытия.
<p align="center">Это второй абзац<br>Вторая строка<br>Третья строка</p>
</body> - закрытие тела
</html>
Работать будет без объяснений (так как браузер их отображает)
<!DOCTYPE html> <html> <head> <title>Это простой сайт</title> <meta charset="windows-1251"/> </head> <body bgcolor="yellow" text="green"> <h1 align="center">Это мой первый сайт</h1> <p align="center">Это первый абзац<br>Вторая строка<br>Третья строка<br></p> <p align="center">Это второй абзац<br>Вторая строка<br>Третья строка</p> </body> </html>
Вот последний пример выше, можете сохранить в любом редакторе в кодировке windows-1251 как index.html и запустить, будет работать. Будет работать даже есть не сохранять в кодировке windows-1251. Для правильного отображения, кодировка блокнота должна соответствовать кодировке, указанной в голове сайта метатегом <meta />. Короче, если отобразится что-то вроде "ЁЁЁЁпЁЁЁпЁЁЁЁ", то поменяйте кодировку в самом html - файле на ancsi или utf-8.
Вот такая структура в html-файла. Попробуйте поэкспериментировать (поменяйте параметры тега body - измените yellow на black: <body bgcolor="black" text="green"> и другое).
Задача. Есть html-файл
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
сохраните его в любой кодировке (здесь она не имеет значения) как index2.html
Поменяйте параметры тега body таким образом, чтобы:
1) Фон стал синим
2) Текст стал красным
3) Напишите 2 абзаца с английским текстом (для русского нужна кодировка).
4) Выровняйте абзацы по центру.
5) Измените количество строк в абзацах до 10 (вставьте 10 раз <br> между текстом).
Итог.
Структура html определяется тегами, которые указывают браузеру, что нужно делать с помещенным в них текстом. html-документ состоит из строки, указывающей тип html-документа; головы сайта, внутри тега head, где указаны общие параметры для отображения; и тела сайта, которое содержится внутри тега body и содержит основной контент сайта.
Структура дословно имеет следующий вид:
тип html-файла сам html-файл -голова -тело
причем голова и тело обязательно находятся внутри тега html, т.е. до его закрытия
А программно он имеет вид
<!DOCTYLE html> <html> <head> </head> <body> </body> </html>
Вместо DOCTYPE html можно вставить какой-то другой DOCTYPE, в зависимости от набора тегов (для html5 он немного другой)
Теги (тэги (правильное), tags (английское), теги (разговорное)) - это обозначения, указывающие браузеру, что надо делать с текстом внутри. Применение тега имеет вид:
<имятега параметр1="значение" параметр2="значение" и т.д. (параметров много)>Текст, подпадающий под действие тега</имятега> - закрытие для некоторых тегов необязательное, а для метатегов - <meta параметр1="значение" параметр2="значение" и т.д./> - / перед концом тега, т.е. закрытие
Имя тега не должно содержать пробелов.
Надеюсь, все понятно.