Итак в этом уроке мы начнём изучение основ HTML, для того, чтобы лучше вникнуть в это дело, вам необходимо прочитать мой первый урок из этой серии: Вводный урок HTML
Итак, создадим в Notepad++ новый документ, сохраним его в формате html и проставим кодировку как было указано в предыдущем уроке. Теперь вы наверняка зададитесь вопросом: "Как же создать html страницу?", для того, чтобы браузер воспринимал написанное именно как html страницу, а не просто как текст, нужен специальный код.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> </head> <body> </body> </html>
Вот собственно и сам код для создания страницы, давайте рассмотрим его более подробно.
<html></html> - (СЭ) теги, определяющие начало и конец документа.
<head></head> - (ФиС) служебная секция в которой размещаются команды для браузеров, инструкции для поисковых роботов, ссылки на отдаленные файлы и скрипты.
<title></title> - (СЭ) теги, определяющие название документа, которое отображается на вкладке в браузере.
<body></body> - (ФиС) секция содержащая всю видимую часть web-страницы как текст, изображения, кнопки и прочее.
<meta> - относится к метатегам, их мы будем изучать позже
Существует два типа тегов - двойные и одинарные, двойные теги это теги которые имеют две одинаковые части, в последней из которых перед названием стоит слэш например: <html></html>
Одинарные имеют всего один тег, и в них не используется слэш к примеру: <*br> (без звёздочки)
Давайте попробуем написать что-нибудь между тегами <body>, а ещё лучше скопируем текст откуда-нибудь, вот к примеру этот сонет У. Шекспира:
"По совести скажи: кого ты любишь?
Ты знаешь, любят многие тебя.
Но так беспечно молодость ты губишь,
Что ясно всем - живешь ты, не любя.
Свои лютый враг, не зная сожаленья,
Ты разрушаешь тайно день за днем
Великолепный, ждущий обновленья,
К тебе в наследство перешедший дом.
Переменись - и я прощу обиду,
В душе любовь, а не вражду пригрей.
Будь так же нежен, как прекрасен с виду,
И стань к себе щедрее и добрей.
Пусть красота живет не только ныне,
Но повторит себя в любимом сыне."
Ставим его как и говорилось выше между тегами <body>, оставляя между текстом и тегами одну пустую строку. Теперь сохраняем документ, жмём вверху кнопку "Запуск" и выбираем из списка свой браузер.
Страница открывается, но, что мы видим? Вместо упорядоченных столбцов, у нас получается целая каша из слов,
в этом нет ничего удивительного, потому что если мы не будем ставить специальные теги, то текст так и будет выдаваться нам в виде вот такого месива. Что мы делаем? Мы идём обратно в редактор, и заключаем каждый столбец в тег <p></p>, это тег параграфа, это опять же парный тег, поэтому не забываем его закрывать. После того как мы заключили все столбцы в тег <p>, мы сохраняем документ и обновляем страницу в браузере, и, что мы видим теперь? Все столбцы выровнялись, хоть конечно ещё и не стали выглядеть как в редакторе.
Теперь, чтобы всё-таки придать странице вид как в редакторе, возвращаемся в этот самый редактор, и в конце каждой строки ставим тег <*br>, это одинарный тег, закрывать его не надо.
Этот тег разделяет элементы, или можно сказать выполняет фуннкцию кнопки "Enter". Сохраняем документ, обновляем страницу, и к нашей рдости, всё стало выглядеть действительно как в редакторе.
На этом пока всё, продолжим в следующем уроке.
Отредактировано psycho (2012-05-06 14:25:28)