Структура html страницы
Браузер читает HTML так, как читаете его вы: сверху вниз и слева направо. Таким образом, HTML-документ начинается и заканчивается тем, чем должен начинаться и заканчиваться текст. Во-первых необходимо сообщить браузеру, что вы будете "говорить" с ним на языке HTML. Это делается тэгом <html> (тут ничего нового). Так что, прежде чем напечатать что-либо, нужно поставить тэг "<html>". Как Вы помните <html> это открывающий тэг, который должен иметь и закрывающий тэг после того, как вы закончите ввод HTML. Поэтому, чтобы не забыть, поставьте закрывающий тэг "</html>" на пару строк ниже и вводите весь текст документа между <html> и </html>. Следующее, что необходимо, это "head" (голова или "шапка"), которая содержит служебную информацию о вашем документе, и "body" (тело), содержимое самого документа. Поскольку HTML логичен, head (<head> и </head>) находятся выше body (<body> и </body>).
Давайте скажем пару слов о том, как собственно создать веб-страницу на практике. Все очень просто, для этого понадобится текстовый редактор, желательно с подсветкой синтаксиса HTML (Sublime Text 2, Notepad++). Создайте файл с расширением html, например, index.html. В нем мы и будем писать наши тэги и текст страницы.
Примечание: Главную страницу сайта принято называть index (index.html, index.php).
Все, что будет отображаться на создаваемой web странице, должно быть размещено внутри открывающего и закрывающего <body>. Внутри <head> размещается служебная информация, которая может понадобиться браузеру для правильной интерпретации кода документа. Эта служебная информация внутри <head> не будет видна на web странице.
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
Привет всем! А это мой первый сайт.
</body>
</html>
Не забывайте про табуляцию, чтобы Ващ код был читаемым.
Что такое html-атрибуты
Тэги это метки, указывающие браузеру, как нужно представлять ваш web-сайт. (Например, <br /> информирует браузер, что нужно сделать перевод строки). В некоторых тэгах вы можете вводить дополнительную информацию. Такая дополнительная информация называется "атрибут".
Атрибуты всегда записываются внутри тэга, после них следует знак равенства и детали атрибута, заключённые в двойные кавычки. Точка с запятой после атрибута служит для разделения команд разных стилей. Мы к этому ещё вернёмся.
<h2 style="background-color:#ff0000;">Мой друг HTML</h2>
Ссылка <a>
Сайт это множество перелинкованных между собой страниц. Ссылка устанавливается с помощью «закрывающегося» тега <a>, у которого есть 12 атрибутов:
accesskey — активирует ссылку с помощью комбинации клавиш.
href - задает адрес документа, на который следует перейти.
name — устанавливает имя якоря внутри документа (в HTML5 следует использовать id).
tabindex — определяет последовательность перехода между ссылками при нажатии на кнопку <Tab>.
target - тип окна, в котором браузер будет загружать документ. Может принимать значения.
_blank — загружает страницу в новом окне браузера.
_self — загружает страницу в текущем окне (значение по умолчанию).
_parent — загружает страницу во фрейме-родителе, если фреймов нет, то этот параметр работает как _self.
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.
<a href="http://www.html.net/">Это ссылка на HTML.net</a>
Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:
<a href="page2.htm">Щёлкните здесь для перехода на page 2</a>
Если page 2 помещена в подпапку "subfolder", ссылка выглядит так:
<a href="subfolder/page2.htm">Щёлкните здесь … на page 2</a>
Вы можете также создавать ссылки-переходы внутри самой страницы - например, оглавление со ссылками на главы. Всё, что вам необходимо, - использовать атрибут id и символ "#". Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:
<h1 id="heading1">heading 1</h1>
Теперь можно создать ссылку на этот элемент с помощью знака "#" в атрибуте ссылки. Знак "#" сообщает браузеру, что это переход на той же самой странице. После "#" должен следовать id тэга, на который выполняется переход. Например:
<a href="#heading1">Ссылка на heading 1</a>
Вы можете также сделать ссылку на e-mail адрес почти так же, как в ссылке на документ:
<a href="mailto:nobody@html.net">Отправить на HTML.net</a>