Азы HTML

Азы HTML

Книга действительно очень скучная, но очень даже нужная и важная. Есть, конечно, и справочники по HTML, но эти уроки, Андрея Бернацкого, на мой взгляд, проще и информативней. Из 20 его рассылок я выбрал для этой книги 10 выпусков. Учитесь и практикуйтесь Удачи! А. Вильчевский

Структура HTML документа. Основные теги.
Cразу же хочу оговориться, что, в частности, язык HTML – это очень обширный язык, который непрерывно развивается. И поэтому, для того, чтобы овладеть этим языком на высоком уровне, Вы должны тщательно изучить основы и параллельно с этим практиковаться.
Изучая основы языка HTML, мы будем обращаться к css стилям. А значит мы будем изучать и css. Но это чуть позже. Также мы будем обращаться за помощью к javascripts.
Cегодняшний вступительный урок мы начнем со структуры HTML документа.

Поехали… (А вся книга выложена для бесплатного скачивания в Файловом Архиве Проекта RusGuru)
Каждый HTML документ начинается со строчки:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>
В общем случае эта строчка говорит браузеру, который открывает нашу страницу, на какие стандарты ему опираться.
Тег <!DOCTYPE …>
весьма разнообразен, и от его модификации зависит, как будет отображаться содержимое на Вашей странице.
Однако, если умело расположить все элементы и блоки на странице и умело применить стиль, то все будет одинаково хорошо работать
во всех браузерах с нужным <!DOCTYPE …>.
Но, пока мы не знаем ни что такое блоки, ни что такое стили и как эту “абрукадабру” применять, считаю нужным вернуться к подробному рассмотрению <!DOCTYPE …>,
когда мы уже будем что-то уметь и сможем реально оценить его работу.
А пока движемся ниже по странице.
Кстати, а почему я начал рассматривать HTML документ c верхней части страницы?
Потому что браузер загружает страницу и “считывает код” сверху вниз, слево направо. (Впрочем как мы и читаем книги).
Значит, далее следует тег <HTML>. Он говорит браузеру, что страница, которую он открывает, является HTML документом.
Наверное, не совсем понятно слово тег?
Вообще говоря, тег – это инструкция, которая говорит браузеру, что в данном месте документа нужно сделать.
С помощью тегов мы создаем наши страницы. Все теги заключены в так называемые “уголки” (<тэг>). И закрывающий </тэг> (с косой чертой).
Например, <strong> жирный текст </strong>. Указывает, что текст между открывающим и закрывающим тэгом strong будет выделен жирным.
Что такое тег, надеюсь, понятно.
Двигаемся дальше.
Предлагаю набрать что-нибудь своими руками.
Итак, приступим.
Запусти блокнот или wordpad в OC WINOWS. Наберем следующие строчки:
view sourceprint?
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
02."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03.<html>
04.<head>
05.<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
06.<meta name="author" content="Ф.И.О." />
07.<meta name="description" content="описание страницы" />
08.<meta name="keywords" content="слово, слово, сдлово" />
09.<meta http-equiv=refresh content=”30;url=www.mysite.ru” />
10.<title>Заголовок окна браузера</title>
11.</head>
12.<body>
13.</body>
14.</html>
Сохраним файл под каким-либо именем, например start.html. Теперь разберемся что написали.
Между тегами <head> и </head> располагается информация не отображаемая на странице.
Например, тег <meta…>, кстати он закрывающего тега не требует, может указывать кодировку (charset=windows-1251) или сведения об авторе (name=”author” content=”Ф.И.О.”) , или слова для поисковой машины, тэг
<meta http-equiv=refresh content=”30;url=www.mysite.ru”> заставит браузер автоматически через 30 секунд перейти на сайт mysite.ru (пример).
Тэг <title> определяет текст в заголовке окна браузера. (Тег закрывающийся).

Также в теге <head> могут располагаться скрипты javascript или vbscript, заключенные в теги <script>….</script>.
И стили, заключенные в теги <style>….</style>.
На этом с тэгом <head> пожалуй мы закончим.
Далее у нас следует тэг <body>.
Это, собственно, тело документа, здесь размещается все то, что мы видим на странице. У тэга <body> есть
набор параметров, которые мы рассмотрим, но использовать их не рекомендуется.
Итак…
bgcolor – устанавливает цвет фона документа. (<body bgcolor=”black”>)
background – указывает на url-адрес изображения – фона документа.
text – устанавливает цвет текста документа.
link – устанавливает цвет гиперссылок.
vlink= – устанавливает цвет гиперссылок на которых вы уже побывали, используя значение.
alink= – устанавливает цвет гиперссылок при нажатии.
bgproperties=fixed – фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон – нет.
Данный параметр поддерживается только Internet Explorer.
Эти параметры можно объединять, например, на этой страничке используется
<BODY bgcolor=”black” text=”white” link=”red” alink=”blue”>.
Давайте и наберем эту строку в нашем предыдущем примере.
view sourceprint?
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
02."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03.<html>
04.<head>
05.<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
06.<meta name="author" content="Ф.И.О." />
07.<meta name="description" content="описание страницы" />
08.<meta name="keywords" content="слово, слово, сдлово" />
09.<meta http-equiv=refresh content=”30;url=www.mysite.ru” />
10.<title>Заголовок окна браузера</title>
11.</head>
12.<BODY bgcolor="black" text="white" link="red" alink="blue">
13.Текст, кторый мы увидим в своем браузере!!!
14.</body>
15.</html>
Должен быть белый текст на черном фоне, так как на картинке в книге.

На этом анонс,ситаю нужным закончить. Читать здесь, еще скучнее, чем сама книга, но скачать ее бесплатно в Проекте RusGuru необходимо всем, кто собирается зарабатывать в Интернете. Удачи!

2013г., автор и исполнитель Проекта RusGuru Вильчевский Александр Викторович

Помогите Другим и Весь Мир Поможет Вам

Рейтинг@Mail.ru

Copyright © 2017 А. В. Вильчевский