Выпуск №1. Структура HTML документа. Основные теги.
15.07.2009 Рубрика: Обучение \ Курс по HTML&CSS
В первом выпуске рассылки хотелось бы подробней остановиться о формате и содержании рассылки.
Для изучения данного урока рекомендую скачать видео-версию.
Свою рассылку я начну с рассмотрения основ языка HTML.
Я постараюсь вести рассылку по принципу «от простого к сложному». Вести я ее буду именно в таком формате для того, чтобы человек, который захотел бы изучить основы сайтостроения, смог сразу же, после выпуска рассылки, на практике выполнять изложенный материал.
Но сразу же хочу оговориться, что, в частности, язык HTML – это очень обширный язык, который непрерывно развивается. И поэтому, для того, чтобы овладеть этим языком на высоком уровне, Вы должны тщательно изучить основы (т.е. выпуски моей рассылки). И параллельно с этим практиковаться.
Изучая основы языка HTML, мы будем обращаться к CSS стилям. А значит, мы будем изучать и CSS. Но это чуть позже. Также мы будем обращаться за помощью к javascript.
Сегодняшний вступительный урок мы начнем со структуры 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> определяет текст в заголовке окна браузера. (Тег закрывающийся).
Также в теге <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>
Должен быть белый текст на черном фоне, так как на картинке.
На этом наш сегодняшний выпуск рассылке закончен.
Для тех, кто не совсем понял как это реализовать на практике, настоятельно рекомендуем просмотреть видео-урок:
Также Вы можете скачать видео-урок себе на компьютер!
С Вами был Бернацкий Андрей.
Обязательно не пропустите следующий выпуск рассылки.
Если возникнут вопросы, то смело пишите на мой E-mail:contact@webformyself.com
Проект webformyself.com – основы самостоятельного сайтостроения
С уважением, Андрей Бернацкий.
| Подписаться |
|
Поделиться |
|
Метки: cтруктура html документа
Популярные записи
Монетизация сайта с помощью ссылочных бирж.
Как создать свой первый профессиональный дизайн сайта с нуля.
На пути к монетизации сайта: увеличиваем рейтинг сайта через наращивание ссылочной массы.
Загибающийся флеш-уголок для сайта.
Создание шаблона для отдельной страницы WordPress.
Очень хорошо написано, все понятно. Жду дальнейших уроков.
Нравится или не нравится:
0 
0
Отличный курс. Все ясно. Урок понравился. Жду следующего.
С уыажением Валерий.
Нравится или не нравится:
0 
0
оч классно. пасипа
Нравится или не нравится:
0 
0
И мне урок понравился. Андрею РЕСПЕКТ!
Нравится или не нравится:
0 
0
Наконец-то нашёл статью на живом и понятном языке.
Нравится или не нравится:
0 
0
Спасибо, хоть буду разбираться
Нравится или не нравится:
0 
0
Жаль,что я не знаю англ.языка,а то,наверное,было бы понятнее.Спасибо большое!
Нравится или не нравится:
0 
0
Спасибо. Урок понравился. Узнала кое-что новое.
Нравится или не нравится:
0 
0
Спасибо.
Нравится или не нравится:
0 
0
неплохой урок)
Нравится или не нравится:
0 
0
урок нормальный, только мало,побольше давай, а то на месяца три растянуться может))))
Нравится или не нравится:
0 
0
Пока ничего нового, но этож первый урок
Нравится или не нравится:
0 
0
Спс, учиться буду. А то сайт есть, а я в нём как в лесу, даже баннер на шапку поставить не могу(((
Нравится или не нравится:
0 
0
Урок хороший но маловато можно было чуть побольше!!! Большое спасибо что ребята создают такие уроки.
Нравится или не нравится:
0 
0
Мало… больше необходимо либо чаще)
Нравится или не нравится:
0 
0
Спасибо, интересный урок! Разобрался без проблем=)
Нравится или не нравится:
0 
0
Спасибо! Просто и доходчиво!
Нравится или не нравится:
0 
0
Хорошо, что есть люди, которые совершенно безвозмездно, т.б. даром делают доброе дело по просветлению умов:)
Нравится или не нравится:
0 
0
Спасибо!Пока все доступно для понимания.Присоединяюсь к мнению-обьем можно давать побольше.
Нравится или не нравится:
0 
0
Спасибо за урок! Всё доступно, просто и пот теме.
Нравится или не нравится:
0 
0
Очень классный урок!!! За один урок больше и не надо, сначала надо это выучить, так чтоб от зубов отлетала, а потом к следующему уроку переходить. Спешить не надо, а то будет – тут помню, а тут не помню!
На счёт параметра bgproperties=»fixed», я попробовала и в «Opera», «Google Chrome», «Internet Explorer» и «Mozilla FireFox» – работает во всех кроме «Mozilla FireFox» (может у меня старая версия), всё крутиться, как надо!!!
Нравится или не нравится:
0 
0
Ну хоть кто то пытаеться доходчиво объяснить! спасибо за урок ! жду с нетерпением следующего!
Нравится или не нравится:
0 
0
Спасибо, Андрей! Все просто и понятно. Теперь я абсолютно уверена в том, что скоро у меня будет свой простенький сайт.
Нравится или не нравится:
0 
0
Например, тег , кстати он закрывающего тега не требует, может указывать кодировку (charset=windows-1251) или сведения об авторе (name=”author” content=”Ф.И.О.”) , или слова для поисковой машины, тэг-Какую кодировку нужно указывать,какие слова для поисковой машины,и где их вставлять?
Нравится или не нравится:
0 
0
Пишите теги без < таких знаков, иначе я не понимаю о чем идет речь.
Нравится или не нравится:
0 
0
Пыталась разобраться,а здесь все понятно.
Нравится или не нравится:
0 
0
Очень интересно. Пока ничего сказать не могу.
Нравится или не нравится:
0 
0
03.
Что это на второй строчке после <!DOCTYPE? Про эту строчку нет никакого пояснения.
Нравится или не нравится:
0 
0
Это продолжение описание Doctype. Просто не уместилось в 1 строчку!
Нравится или не нравится:
0 
0
Понятно. Но почему именно эта строка получилась у вас как ссылка?
Нравится или не нравится:
0 
0
Урок доступен пониманию,но не считаю,что его надо делать большим.Действительно,его ещё надо «переварить» и выучить.
Спасибо,Андрей.Ждём-с дальше…
Нравится или не нравится:
0 
0
Спасибо за очень понятную информацию. Самим дойти было бы очень трудно. Жду продолжения
Нравится или не нравится:
0 
0
Спасибо,Андрей! Пока все понятно! Да и доходчиво объяснили! Спасибо! Жду следующих уроков. С уважением – Сергей.
Нравится или не нравится:
0 
0
Андрей! Искренне благодарю за твой труд по обучению «чайников» Простой человеческий язык нам очень нужен, особенно в начале пути!
Нравится или не нравится:
0 
0
В блокноте файл сохраняется как start.html.txt и после сохранения на локальном диске не запускается, пока не удалишь три последних буквы «txt» , тогда компьютер запрашивает разрешения изменить расширение, нажимаешь «ДА» , расширение меняется и тогда файл можно запустить
А вообще интересно доходить до всего своей головой. Спасибо!
Нравится или не нравится:
0 
0
Было бы здорово, если бы Ваш комментарий прочитали все новички! Потому что мне приходит тьма писем именно с этим вопросом.
Нравится или не нравится:
0 
0
Всё понятно кроме meta.Я этот тэг никак не запомню ,понять немогу вот и не запоминается.
Нравится или не нравится:
0 
0
Спасибо!!!Это интересно и вроде пока понятно:)
Нравится или не нравится:
0 
0
Большое спасибо! Так хочется многому научиться! Спасибо за Ваши знания, которыми Вы бескорыстно делитесь!
Успехов и процветания Вам!
Нравится или не нравится:
0 
0
Благодарю! Всегда хотелось всё это понять)
Нравится или не нравится:
0 
0
Благодарю Андрей! Всё очень понятно и хочется дальше обучаться…
Нравится или не нравится:
0 
0
Присоединяюсь ко всем коментариям. ОГРОМНОЕ СПАСИБО!!!
Нравится или не нравится:
0 
0
Отличный выпуск для новичков. Недавно начал изучать HTML самостоятельно, но все же когда есть опытные учителя процесс идет интенсивнее. Благодарю, Андрей!
Нравится или не нравится:
0 
0
Спасибо!
Нравится или не нравится:
0 
0
Большое спасибо Андрей! Всё понятно.
Нравится или не нравится:
0 
0
Все понятно, но оказывается нужно еще быть очень внимательным. Пропустил кавычки и черного фона нет.Не сразу и заметил в чем дело.
Нравится или не нравится:
0 
0
В разных браузерах гарнитура шрифта разная. В Опере Times New Roman, в IE Arial. Как сделать, чтобы шрифт был одинаковый? В тегах body не увидела параметр font.
Нравится или не нравится:
0 
0
Андрей спасибо за урок.Если есть Архив этого урока пришлите пожалуйста.С уважением к Вам Александр.
Нравится или не нравится:
0 
0
Более простого и понятного объяснения не возможно себе представить ! Большое спасибо за урок . С нетерпением буду ждать последующих .
Нравится или не нравится:
0 
0
БОЖЕ МОЙ! Я ЧААЙНИИИК !!!!!!!!! Всем все понятно, А МНЕ НЕТ !!!!!!! Спасибо за урок!!!! Но ЧАЙНИКАМ он наверное не поможет…! С УВАЖЕНИЕМ !!!
Нравится или не нравится:
0 
0
Не знаю в чем дело, но в файрфоксе не открывается.В гугл хроме нормально и в опере нормально.И в чем может быть причина не понимаю. А уроки классные.У меня дети по ним занимаются, младшей 9 лет и все получается!Спасибо вам!
Нравится или не нравится:
0 
0
Ой, а я вощеееее полный-полный чайник!!!!!!!!!!
Прочитала, вроде вё поняла. В блокноте текст набрала, сохранила. А дальше-то что????
В блокноте открывается, а куда его вставить-то надо, чтобы проверитьчто получилось??
На сайт что-ли прикрепить? Так я же не умею ещё этого делать Скажите что с этим start.html
дальше-то должно быть? А то следующие уроки и совсем не пойму.
С уважением!
Нравится или не нравится:
0 
0
В общем тут не обойтись без видео урока. В общем подождите немного видео версии урока. В нем я покажу, что ничего кроме описанного в уроке делать не нужно. Просто быть нужно немного внимательнее и набирать код, а не простым копирование брать его из урока.
Нравится или не нравится:
0 
0
Ждём продолжения….
Нравится или не нравится:
0 
0
Прочитал все, вроде понятно. Набрал в блокноте (не скопировал), сохранил файл. Ну, сохранился. А дальше что с ним делать? Чтобы черная страничка открылась? Тут уже был такой вопрос, ответ невнятный. Какой-то видео урок требуется ждать. А словами объяснить нельзя? И что-то непонятна цель этого урока: получить навык набора текста латиницей
Нравится или не нравится:
0 
0