Теги HTML и создание сайта (часть 2)

29 Сентябрь, 2013 - 18:00

В предыдущем посте мы рассмотрели общие понятия о тегах, их видах, а также некоторых моментах отображения содержимого страницы браузером.

А вот дальше начинается самое интересное. Пишется некий «каркас страницы», с этого каркаса будет писаться любая HTML страница.
Как отмечалось раньше, прописывается эта строчка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Затем прописываются основные теги, без которых не может существовать ни одна HTML страница

Итак, у нас есть некий код, который можно скопировать себе в Notepad и сохранить его следующим образом Файл/ Сохранить как / index.html в нашей папке на рабочем столе. Что мы видим из этого примера – мы создали пустую HTML страницу. Почему пустую – сейчас мы разберем.

Итак, по порядку: тегом <html> мы начали страницу и тегом </html> мы завершили страницу. Данный тег парный. Внутри него мы поместили тег <head> </head>(также парный). Он отвечает за отображение информации в «голове страницы», то есть название. Также внутри тега <head></head> мы поместили следующие три строчки с мета-тегами. Вот эти три строчки также будут следовать по всем HTML-страницам и необходимы они вот для чего:

Первая строка поясняет браузеру, в какой кодировке находится текст на странице, в данном случае кодировка стоит windows-1251, и это говорит, что информация будет на русском языке (кириллице).

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

Третья строка содержит краткую информацию о странице, предназначена она для поисковых систем и помогает найти ваш сайт с такой информацией.
Подробнее про мета-теги можно почитать здесь, разъяснять в этой статье также считаю бессмысленным.

Итак, структура создана, основные теги мы разобрали. Далее разберем как в «тело» документа поместить какую-либо информацию. Как было ясно на картинке 1 мы создали пустую страницу. Теперь же у нас в каркасе имеется еще один незадействованный тег - <body> </body>. Он также парный и внутрь этого тега теперь можно поместить какой-нибудь текст. Я сделал следующее:

И вот что получилось:

Итак, мы внесли поправки в код HTML и теперь на странице появилась надпись, которую вы видите на картинке выше. Теперь давайте еще немного приукрасим нашу первую страничку. Сделаем заголовок, добавим еще немного текста, добавим картинку и отформатируем текст – сделаем его жирным, изменим цвет текста и создадим еще одну страницу и соединим их ссылками между собой. Делая все это – вы изучите некоторые важные атрибуты к тегам. Итак:

Выглядеть это должно так: