Выпуск №1. Структура HTML документа. Основные теги HTML.

Структура HTML документа

В первом выпуске рассылки хотелось бы подробней остановиться о формате и содержании рассылки.

Свою рассылку я начну с рассмотрения основ языка HTML.

Я постараюсь вести рассылку по принципу «от простого к сложному». Вести я ее буду именно в таком формате для того, чтобы человек, который захотел бы изучить основы сайтостроения, смог сразу же, после выпуска рассылки, на практике выполнять изложенный материал.

Но сразу же хочу оговориться, что, в частности, язык HTML – это очень обширный язык, который непрерывно развивается. И поэтому, для того, чтобы овладеть этим языком на высоком уровне, Вы должны тщательно изучить основы (т.е. выпуски моей рассылки). И параллельно с этим практиковаться.

Изучая основы языка HTML, мы будем обращаться к CSS стилям. А значит, мы будем изучать и CSS. Но это чуть позже. Также мы будем обращаться за помощью к javascript.

Сегодняшний вступительный урок, мы начнем с изучения структуры HTML документа и основных тегов HTML.

Поехали…

Каждый HTML документ начинается со строчки:

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

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

Тег <!DOCTYPE …> весьма разнообразен, и от его модификации зависит то, как будет отображаться содержимое на Вашей странице.

Однако, если умело расположить все элементы и блоки на странице и применить стиль, то все будет одинаково хорошо работать во всех браузерах с нужным <!DOCTYPE …>.

Но, пока мы не знаем, ни что такое блоки, ни что такое стили и как эту «абрукадабру» применять, считаю нужным вернуться к подробному рассмотрению <!DOCTYPE …>, когда мы уже будем что-то уметь и сможем реально оценить его работу.

А пока движемся ниже по странице.

Кстати, а почему я начал рассматривать HTML документ с верхней части страницы?

Потому что браузер загружает страницу и «считывает код» сверху вниз, слева направо. (Впрочем, как мы и читаем книги).

Значит, далее следует тег <HTML>. Он говорит браузеру, что страница, которую он открывает, является HTML документом.

Наверное, не совсем понятно слово тег?

Вообще говоря, тег – это инструкция, которая говорит браузеру, что в данном месте документа нужно сделать.

С помощью тегов мы создаем наши страницы. Все теги заключены в так называемые «уголки» (<тег>). И закрывающий </тег> (с косой чертой). Например, <strong> жирный текст </strong>. Указывает, что текст между открывающим и закрывающим тэгом strong будет выделен жирным.

Что такое тег, надеюсь, понятно.

Двигаемся дальше.

Предлагаю набрать что-нибудь своими руками.

Итак, приступим.

Запусти блокнот или wordpad в OC WINOWS. Наберем следующие строчки:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="author" content="Ф.И.О." />
<meta name="description" content="описание страницы" />
<meta name="keywords" content="слово, слово, слово" />
<meta http-equiv=refresh content="30;url=www.mysite.ru" />
<title>Заголовок окна браузера</title>
</head>
<body>
</body>
</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> определяет текст в заголовке окна браузера. (Тег закрывающийся).

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">

Давайте и наберем эту строку в нашем предыдущем примере.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="author" content="Ф.И.О." />
<meta name="description" content="описание страницы" />
<meta name="keywords" content="слово, слово, сдлово" />
<meta http-equiv=refresh content="30;url=www.mysite.ru" />
<title>Заголовок окна браузера</title>
</head>
<BODY bgcolor="black" text="white" link="red" alink="blue">
Текст, который мы увидим в своем браузере!!!
</body>
</html>

Должен быть белый текст на черном фоне, так как на картинке.

html

На этом, наш сегодняшний выпуск рассылки о структуре HTML-документа, закончен.

Также Вы можете скачать видео-урок себе на компьютер!

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (212)

  1. Роман

    Спасибо за нормальние обиснение, я уже изучал HTML от Евгения Попова, но хочу закрепит)

    P.S.:Дайте, пожалуста, оценку маему сайту :)

  2. Алексей

    Спасибо вам за урок.

  3. ОльгаКот

    Всё доступно изложено. Спасибо за урок.

  4. Александр

    Спасибо Андрей! У Вас все очень доходчиво получается-талант. Осваиваю CMS-ки, приходится редактировать шаблоны методом тыка, и понимаю , что без этих знаний все равно не обойтись.

  5. Михаил

    Благодарю за урок. Пока всё понятно.

  6. Елена

    Спасибо за урок. Все сделала. Теперь буду ждать с нетерпением второго.

  7. светлана

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

  8. светлана

    В КОМЕНТАРИЯХ не все видно что прописываю

  9. Александр Багров

    Вообще-то, все программы (включая и на HTML) хранятся в памяти в линейном виде, поскольку память имеет такую структуру.
    Соответственно и извлекаются они из памяти таким же образом. Поэтому в этом смысле для браузера нет понятий «верха» и «низа», а есть только понятия «перед» и «зад».
    Таким образом, код интерпретируется брузерами последовательно по мере его скачивания с сайта. А верх и низ, лево и право появляются при интерпретации браузером тегов языка и отображении соответствующих им указаний только на экране монитора.
    Так что ваша фраза:
    «Потому что браузер загружает страницу и «считывает код» сверху вниз, слева направо. (Впрочем, как мы и читаем книги).»
    неточна

  10. Александр Багров

    Далее читаем:
    «Между тегами и располагается информация, не отображаемая на странице.»
    Тоже некоторая точность.
    На самом деле нужно произвести две оговорки типа «кроме», поскольку отображаются:
    1. Заголовок страницы из контейнера … (о чем вы говорите чуть нииже).
    2. Фавикон (favicon), если между тегами и есть на то соответствующие указания.

  11. Александр Багров

    Цитата:
    «Однако, если умело расположить все элементы и блоки на странице и применить стиль, то все будет одинаково хорошо работать во всех браузерах с нужным .»
    По-моему, СКАЗАНО СЛИШКОМ ОПТИМИСТИЧНО для сегодняшнего состояния интернет-браузеров.

  12. Стас

    Урок для настоящих новичков!

  13. Баночкин Сергей

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    02.
    А зачем 2 строчка точно такая же как первая?
    Я это принимал за ошибку, когда пытался в Worde, что то похожее сделать; СТОЛЬКО было до тега HTML !!!
    Итогда решил сам формировать кодовые страницы…
    = Баночкин С. =

  14. Anatoliy

    То что нужно — для новичка!

  15. Вероника

    Спасибо большое за урок.Мне все понравилось, все понятно и все получилось.

  16. Валентин

    Спасибо за объяснения. Даже мне стало понятно

  17. Виктор

    Очень хороший и понятный урок!
    Я тоже долго разбирался и мне стало
    всё понятно.С нетерпением буду ждать
    следующих уроков.

  18. Ольга

    Андрей,я делаю блог на вордпрессе,нужны ли для этого знания по HTML? Спасибо!

  19. Sakura Ra

    оказывается, все ТАК просто!!!
    это невероятно!!!!
    спасибо огро-о-о-омное!!!!!
    я поверила в себя…..ведь это была моя «несбыточная» мечта…
    спасибо;)))))

  20. Александр Бронский

    Мне понравилось,доступно и понятно

  21. gixareva.olga@mail.ru

    Здраствуйте.
    У меня совсем другая проблема.С Notepad, когда переключаю на русскую клавиатуру,то какие то непонятные знаки. Пишу русский текст Worde ,вставляю в документ.Всё нормально,работает.А вот в вашем примере не срабатывает.Показывает какие то непонятные знаки вместо Текст, который мы видим в своём браузере.Почему так получается.И может Вы сталкивались с такой проблемой как у меня.Кодировка у меня стоит кодировать в UTF-8(без ВОМ).

  22. gixareva.olga@mail.ru

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

    Документ без названия

  23. Николай

    Спасибо парни за науку. Столько нам загрузили что разгребать наверно придется неделю а то и больше. С уважением Николай

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree