ВадБокс №6: Как создать сайт с нуля (часть 2). Основы HTML
Здравствуйте! С вами Вадим и моя колонка «ВадБокс». Помните, в предыдущей статье я показал шаблон, с помощью которого можно создать документ в формате HTML (веб-страницу). В этой статье я подробно опишу теги, которые я использовал для написания ранее указанного кода. Кому интересно, прошу под кат!
Итак, напомню код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=«Content-Type» content=«text/html; charset=utf-8»>
<title>Пример Web-страницы</title>
</head>
<body>
<h1 align=«center»>Мобильные устройства.</h1>
<p>Здравствуйте! Вы видите мой сайт про различные мобильные телефоны и смартфоны <strong>мира</strong>. На сайте есть описания многих импортных и отечественных устройств.</p>
</body>
</html>
Те, кто запутался во всех этих тегах, не читайте дальше, т. к. у вас может заболеть голова.
Как вы заметили (а многие и раньше знали), то основные теги отличаются подстановкой символов. Открывается тег символом <>, а закрывается символом </>. Между < и > (или </ и >) пишется сам тег, например html. Кроме обычного тега, между вышеуказанными символами можно подставить дополнительные теги (параметры). Например, чтобы текст поместился в центр строки нужно ввести следующий код: align=«center». Ладно, строение тегов мы разобрали, теперь можно посмотреть значения тегов. P.S. Под знаком * я подразумеваю какой-либо текст или код.
Самый главный тег - <HTML>*</HTML> — он говорит браузеру, что перед ним файл в формате HTML.
Тег <HEAD>*</HEAD> обозначает «голову» страницы, не отображаемую визуально. Несёт в себе информацию для поисковых систем и название страницы.
Следующий тег - <meta http-equiv=«Content-Type» content=«text/html; charset=utf-8»> — представляет из себя набор параметров. Что из этого можно понять. Идёт основной тег <meta http-equiv>, дополненный типом контента (=«Content-Type» content=«text/html) и кодировкой (charset=utf-8»). Тип контента — текст в формате html, кодировка UTF-8. Сам тег отличается по наличию окончания. Не имеет часть вида </meta http-equiv>.
Тег <body>*</body> обозначает «тело» страницы, т. е. основную часть.
Тег <h1>*</h1> создаёт заголовок 1 (самый большой шрифт).
Тег <p>*</p> создаёт новый параграф к заголовку.
Тег <strong>*<strong> выделяет текст жирным.
Вот такие теги я использовал при написании страницы. А теперь попробуем поэкспериментировать с форматированием.
Давайте изменим цвет фона страницы. Для этого введём в тег <body> (начальный) параметр bgcolor="?". Вместо ? подставьте нужный код в формате RRGGBB (подробнее см. ниже). Чтобы фон страницы стал красным, введите FF0000 на место ?. Должно получиться следующее: <body bgcolor=«FF0000»>. Вывод: параметр bgcolor="?" изменяет цвет фона.
Интересно? Тогда продолжаем. Теперь изменим цвет текста в теле страницы. Поставьте после кавычек в теге <body bgcolor=«FF0000»> точку с запятой (;) и пишите следующий код: text="?". Вместо ? введите код цвета в формате RRGGBB, например, зелёный: 00FF00. Должно получиться следующее: <body bgcolor=«FF0000»; text="00FF00">. Из вышесказанного можно сделать вывод, что параметр text="?" изменяет цвет текста.
Для людей, которые ни разу не имели понятия о HTML наверняка будет интересно. Помню, как сам первый раз столкнулся с волшебством HTML. Разве это не интересно, ввёл определённый код, и фон страницы изменился. Ввёл код, и цвет текста изменился. Не устали? Тогда продолжаем!
Теперь добавим ссылку на другую страницу, которая будет находиться на вашем компьютере. Не заморачивайтесь, просто введите в блокноте следующий код:
<html>
<head>
<meta http-equiv=«Content-Type» content=«text/html; charset=utf-8»>
<title>BQ Lyon</title>
</head>
<body bgcolor=«00FF00»; text=«FF0000»>
<h1 align=«center»>Смартфон BQ LYON</h1>
<p>Этот телефон является одним из самых маленьких в мире. Кроме того, корпус выполнен полностью из металла. Положительным моментом является очень мощный динамик. Если его сравнивать с громкостью двух iPhone 5S, то раза в четыре звук у BQ Lyon будет мощнее.</p>
</body>
</html>
и сохраните в формате HTML. Далее откройте файл в браузере и копируйте адрес.
Теперь вставим этот адрес в «тело» первой страницы. Для этого воспользуемся следующим тегом: <a href=«NAME»>?</a>. Вместо вопросительного знака вставляем название ссылки, которое будет показываться пользователям (например, BQ Lyon), вместо NAME адрес второй страницы. Итак, полученный код <a href="адрес страницы №2">BQ Lyon</a> вставляем в «тело» первой страницы после закрывающегося тега </p> с новой строчки. Но не у всех компьютер поддерживает такие url-ссылки на файлы с жёсткого диска или съёмного носителя. Поэтому, я закачал страницу №2 на сервер UCOZ. Т. е. вместо адреса ссылки файла, расположенного на компьютере вставляем следующий url:
Итак, вот что должно у вас получится:
На этом всё. Список тегов и RRGGBB кодов цветов на сайте моего знакомого: a-b-sergeev.narod.ru/colors_RRGGBB.htm В следующих выпусках я расскажу про CSS, с помощью которого можно создать дизайн для сайта. Удачи!
PS: Статья хорошая, продолжай в том же духе как и начинал!
<body bgcolor=«FF0000»; text="00FF00">
При том уже наверное все юзеры знают основы html…