Читать предыдущий материал
Итак, первая страница создана. Далее, чтобы было проще объяснить, делаем так: создаем еще одну страницу в блокноте (Notepad) и сохраняем ее в той же папке где лежит страница index.html и называем ее, например next.html.

Теперь открываем эту новую страницу в блокноте и вставляем туда вот этот код:

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

Итак, мы создали две статичные HTML страницы. А теперь давайте разберем по порядку все новые теги, атрибуты и значения.

Начнем с первой страницы:
Тег

<h1></h1>

- (показан в реальную величину) создает заголовки Первого уровня.

Всего 6 уровней заголовков и Первый – самый большой по размеру. Также в нашем примере этот тег содержит еще атрибут align=”” в кавычках стоит параметр center. Этот атрибут позволяет выравнивать весь заголовок по центру, влево или вправо соответственно меняя параметр в кавычках атрибута на left или right.

Следом за тегом заголовка идет тег <font></font> - этот тег отвечает за форматирование текста в HTML странице. Сам тег по себе ничего не значит, однако благодаря атрибуту color=”” поставив нужное значение (в нашем случае это red) можно изменить цвет текста, а с помощью атрибута face=”” (в нашем случае это Tahoma) можно менять начертание шрифта.

При создании сайтов лучше использовать такие шрифты как Arial, Tahoma, Verdana. Это те шрифты, которые по умолчанию есть во всех версиях Windows. Смотрим далее по коду: тег <p></p> - позволяет делать абзацы в тексте там, где вставлен этот тег. Данный тег содержит такой важный атрибут как align=”” который также позволяет сдвигать текст - вправо влево по центру.

Следующий тег - <strong></strong> - позволяет сделать текст, заключенный в этот тег, жирным.

Далее мы видим по коду, что у нас на странице имеется картинка обтекаемая текстом. Чтобы вставить картинку на страницу понадобится тег <img>. Этот тег одинарный и не имеет своего «собрата» закрывающего тега. Зато к этому тегу приставляются некоторые атрибуты. Первый из них src="" – с помощью этого атрибута вставляется сам адрес картинки, где она лежит (на компьютере или в интернете). В нашем случае она лежит на хостинге картинок, а в кавычки атрибута вставлен адрес картинки.

Если же картинка лежит на компьютере и в той же папке где лежат html страницы – то пишется так

srс=”название картинки.jpg”

Также обязательно указать размеры картинки – ширина width="" и высота height="". Атрибут align="" выравнивает картинку, в нашем случае влево, а текст соответственно будет обтекать картинку справа.

Но чтобы картинка не прилипала к тексту нужно сделать отступы hspace="" – сверху/снизу (в кавычках размер указывается в пикселах) и vspace="" - справа/слева. Атрибут alt=”” необязателен, но лучше его использовать, помогает поисковой оптимизации. Этот атрибут задает название картинки, которое пользователю не видно, но его понимает браузер и поисковый робот.

Также между тегами <p></p> можно поместить парный тег <em></em> который позволяет делать текст курсивом.

Следующий тег - <ul></ul>. Как вы видите, он парный. Функция его в том, что вместе с парным тегом <li></li> он позволяет создавать маркированные списки в HTML. Также тег <ul> содержит в себе атрибут type=”” который задает тип маркированного списка. В нашем случае это квадратики. Чтобы создать нумерованный список вместо тега <ul> ставим тег <ol></ol>, который в свою очередь с атрибутом type=”” и цифрами в кавычках (римскими или арабскими) позволит создать нумерованный список. А если в кавычки поставить латинскую букву – список будет начинаться с этой буквы.

Также в нашем примере имеется еще один немаловажный тег <a></a>. Этот тег отвечает за ссылки на страницах HTML.
Он также как и тег <img> без атрибутов ничего не значит, но в отличие от тега <img> тег <a> - парный.
Итак, открывая тег <a> внутрь прописываем атрибут href=”” в кавычки которого вставляется адрес, на которую будет вести сама ссылка. Опять же, как и в случае с картинкой если ссылка будет вести на какую-либо страницу, находящуюся в одной и той же папке, то пишется так

href=”название страницы.html”

Атрибут target=”_blank” позволяет при нажатии на ссылку переключать открываемую страницу на новую вкладку браузера. И еще один атрибут title=”” который отвечает на обозначение ссылки, название, которое будет понятно браузеру и поисковому роботу.

Есть еще один тег, который позволяет делать перенос текста на новую строку. Одиночный тег <br> позволяет делать перенос в любом месте, где будет стоять этот тег.
Также хочу добавить, что у тега <body> тоже есть свои атрибуты, которые имеют свое предназначение. Например, атрибут link="red" позволяет сделать не посещенную ни разу ссылку на этой странице красным цветом, атрибут vlink="orange" делает посещенную ссылку оранжевой, а атрибут alink="yellow" окрашивает нажимаемую ссылку в желтый цвет. Конечно, все цвета можно поменять на любой удобный вам.

Подводя итоги трех постов остается лишь высказать надежду на то, что вы почерпнули новые знания. Узнали что такое теги, научились делать страницы, добавлять на них текстовую и графическую информацию. Также мы разобрали, что такое парные и непарные теги, узнали некоторые нюансы при создании html страниц, научились форматировать текст в html страницах и познали как можно связать ссылками две разные HTML страницы которые лежат в одной папке. В следующих статьях мы разберем, что такое CSS (каскадные таблицы стилей) и немного внедримся в язык программирования PhP.