Выпуск №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.
Делаем инновационный дизайн сайта-портфолио с альтернативным UI/UX.
Умело выводим на новый уровень SEO посты блога WordPress.
Выбираем верный шрифт: практическое руководство по типографской разметке в Сети.
ВСЁ СУПЕР И ПОДРОБНО…
Нравится или не нравится:
0 
0
Пока все ясно и понятно…
Нравится или не нравится:
0 
0
Благодарю, теперь имею представление о предмете.
Нравится или не нравится:
0 
0
Привет! Спасибо, все получилось.
Нравится или не нравится:
0 
0
Хикари день добрый!У вас получилось с 1 уроком о тегах.Я все набрал сохранил,а что дальше,что должно произойти как увидетьчто сделать,нажать?
С Уважением Сергей Хабаровск.
Нравится или не нравится:
0 
0
сохрани в html формате. а потом запусти. если не запустится перетащи его в окно браузера.
Нравится или не нравится:
0 
0
Спасибо. Все просто и понятно. Посмотрим, что будет дальше.
Нравится или не нравится:
0 
0
ЕСТЬ С ЧЕГО НАЧАТЬ?
СПАСИБО ЗА ПОМОЩЬ.
НУ… ПРИСТУПИМ…
Нравится или не нравится:
0 
0
Я рада, что есть профессионал, который словом и практикой доступно изучение даной темы, Спасибо, будем учиться-это даже очень интересно
Нравится или не нравится:
0 
0
Спасибо,довольно подробно описано….Стоит попробывать.
Нравится или не нравится:
0 
0
Все очень хорошо и понятно написано только местами опечатки.
Нравится или не нравится:
0 
0
Спасибо Вам Андрей за эти замечательные уроки,вы умница!Желаю Вам дальнейших успехов и жду следующих уроков
Нравится или не нравится:
0 
0
Большое спасибо, Андрей, за подробный рассказ о проделываемых действиях в первом уроке. Пока все получается. Хочется чуть более подробного рассказа о применяемых тегах, а то получается, что я применяю их вслепую, не понимая, что именно я делаю. Еще раз благодарю за урок. С нетерпением ожидаю последующих уроков.
Нравится или не нравится:
0 
0
Пока все понятно. Спасибо.
Нравится или не нравится:
0 
0
Андрей, может, сами подучитесь (уроки Евгения Попова – не самый лучший источник знаний)?
Нравится или не нравится:
0 
0
Уроки Е.Попова без спору прекрасны, хороши и качественны. Но, направленность слегка другая. У меня есть подозрение, что Вы не покупали не диски Попова и не мои. На какой основе сравниваете?(Можете мне поверить я их все смотрел).
Нравится или не нравится:
0 
0
Странно. У меня получился черный текст на зеленом фоне.
Нравится или не нравится:
0 
0
Ага, в IE и Chrom черный текст на зеленом фоне, а в Opera и Firefox на белом. Вот и верь после этого людям
Нравится или не нравится:
0 
0
Если параметры указать без кавычек, то получается все нормально, в разных браузерах.
Нравится или не нравится:
0 
0
С кавычками тоже разобрался. Воощем теперь по идее все правильно. Надо в ковычки и все у всех будет работать и в разных браузерах.
Спасибо, всем за здоровую критику описок.
Нравится или не нравится:
0 
0
А у меня не получилось.
Текст, кторый мы увидим в своем браузере!!! Этот текст появляется на белом фоне. Браузер Мозила. Что я сделал не правильно? Набирал в блокноте, просто копировал, как на сайте. Результат тот же.
Нравится или не нравится:
0 
0
Все, я поправил код. Действительно была опечатка в коде. Теперь Вы только скопируйте его и все будет OK!
Нравится или не нравится:
0 
0
Спасибо теперь все получилось! А, где же была ошибка в коде? Я сравнивал, старую запись с новой но не смог найти. Но я верю, что у меня получится.
Нравится или не нравится:
0 
0
Да там, просто был пробел до <body….
Вот поэтому ты и не заметил.
Нравится или не нравится:
0 
0
У каждого своя голова на плечах. думать надо своей.
Уроки смотрел. парни молодцы, не все ровно. Но для старта когда «ноль» пойдет.
Респект и Уважуха, так держать!
Нравится или не нравится:
0 
0
Спасибо за добрые слова. Очень приятно.
Ребята давайте-ка веселее на сайте, по активнее.
Может форум создать?
Нравится или не нравится:
0 
0
Весьма интересно! Постараюсь освоить.
Нравится или не нравится:
0 
0
Спасибо!Все очень понятно.
Нравится или не нравится:
0 
0
Андрей СПАСИБО!!! Прекрасные уроки! Если читать текст внимательно о работе тегов, то опечаток не будет никаких. Опечатки дают ввозможность учиться HTML. Благодаря таким урокам возможно понять язык HTML. Все получается! СПАСИБО!!!
Нравится или не нравится:
0 
0
Вероятно, для того, чтобы понять всю эту примудрость, нужны какие-то базовые знания? Я – обычный пользователь и я НИЧЕГО не поняла! Ну и что делать?
Нравится или не нравится:
0 
0
все просто спасибо
Нравится или не нравится:
0 
0
Непонял как запустить итог после первого урока,как сделать чтоб то что в блакноте -заработало.
Нравится или не нравится:
0 
0
Спасибо за начало! Идей множeство, однако все упирается в отсутствие своего сайта. Есть возможность научить людей выигрывать в интернет-игры ( Online), передать «кучу» полезной информации, но нет сайта… Попробуем на пару, глядишь получиться.
Нравится или не нравится:
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
Для совсем зелененьких оч хорошо разжеванно как и в первом письме в отзыве, есть интересный ресурс который позволяет генерировать html документы по вашим запросам и не нужно все перепечатывать по сто раз
Нравится или не нравится:
0 
0
Дальше-сохраним файл под каким-либо именем, например start.html.или Ирина.html-уже проще некуда.Читайте внимательно!
Нравится или не нравится:
0 
0
У меня вот что получилось, что не так делаю? На черном фоне вот такое:
{\rtf1\ansi\ansicpg1252\deff0\deflang2055{\fonttbl{\f0\fswiss\fcharset0 Arial;}{\f1\fswiss\fcharset204{\*\fname Arial;}Arial CYR;}} {\*\generator Msftedit 5.41.21.2509;}\viewkind4\uc1\pard\f0\fs20 01.\par 03.\par 04.\par 05.\par 06.\par 07.\par 08.\par 09.\par 10.\par 11.\par 12.\par 13.\’d2\’e5\’ea\’f1\’f2, \’ea\’f2\’ee\’f0\’fb\’e9 \’ec\’fb \’f3\’e2\’e8\’e4\’e8\’ec \’e2 \’f1\’e2\’ee\’e5\’ec \’e1\’f0\’e0\’f3\’e7\’e5\’f0\’e5!!!\par 14.\par 15.\lang2055\f0\par } �
Связано ло это как-то с тем, что у меня Mozilla Firefox?
Нравится или не нравится:
0 
0
1. В первой строчке представленного вами текста я вижу число 1252. Это число говорит о том, что вы используете западноевропейскую
кодировку. Вам необходимо изменить ее на 1251. Это число находится в мета тегах (в верхней части вашего текста.
2. В настройках «кодировка» (правый клик по окну браузера) поменяйте с западноевропейской на кирилицу – виндовз.
3. Проверьте теги, какой то тег может быть не закрыт.
Нравится или не нравится:
0 
0
Здравствуйте, Андрей!
У меня есть один вопрос-замечание:
Почему текст урока на странице так неаккуратно выложен? Я имею ввиду разрывы в предложениях, то есть почему некоторые предложения с середины переносятся на следующую строку (по сути новый абзац ). Это смотрится нечитабильно.
А в остальном все неплохо. Для меня это не новости, так я знаю html, но по предыдущим комментам вижу, что людям нравится. Поэтому удачи Вам!!!
Нравится или не нравится:
0 
0
очень долго писать и не понятно это для меня очень сложно,но всё же спасибо за науку
Нравится или не нравится:
0 
0
Очень доступно и интересно!
Нравится или не нравится:
0 
0
Андрей, все доступно и ясно. Видно что для людей подготовлено. Смотрел некоторые бесплатные учебники. Ты прав: либо все очень поверхностно, либо как на форуме профи. Сегодня у тебя будет заказ.
Нравится или не нравится:
0 
0
Андрей,
Скопировал Ваш текст и у меня получилось на черном фоне белым текстом вот что:
{\rtf1\ansi\ansicpg1251\deff0\deflang1049{\fonttbl{\f0\fswiss\fcharset0 Arial;}{\f1\fswiss\fcharset204{\*\fname Arial;}Arial CYR;}} {\*\generator Msftedit 5.41.15.1507;}\viewkind4\uc1\pard\lang1033\f0\fs20 \par \par \par \par \par \par \par \par \par \par \par \’d2\’e5\’ea\’f1\’f2, \’ea\’f2\’ee\’f0\’fb\’e9 \’ec\’fb \’f3\’e2\’e8\’e4\’e8\’ec \’e2 \’f1\’e2\’ee\’e5\’ec \’e1\’f0\’e0\’f3\’e7\’e5\’f0\’e5!!!\par \par \par } �
Где ошибка???
Нравится или не нравится:
0 
0
Извините за глупый вопрос, но как в Windows7 через блокнот создать html-документ???
Нравится или не нравится:
0 
0
Создаете обычный текстовый документ. А потом в названии файла .txt меняете на .html
Нравится или не нравится:
0 
0
Когда написали всё что хотели в блокноте, нажимаете на кнопочку «файл» сверху справо, далее «сохранить как…» так где поле для имени файла, вместо «текстовый документ.txt» пишите «название.html».
Нравится или не нравится:
0 
0
У меня вопрос по тегу bodi 12 пункт.Почему открывающий тег пишется большими буквами,а закрывающий – маленькими.Почему нельзя закрывающий тег bodi написать в одну строчку,сразу после текста,как тег titlie пункт 10? В заголовке тоже,где- то заглавными буквами (кроме сокращений,это понятно),где-то маленькими.Есть определенные правила?
Нравится или не нравится:
0 
0
Сразу же начинается с абракадабры.
То что это такое и для чего примерно понятно. Но вот почему в разным источниках и примерах везде пишется по разному
например на этой же странице дальше в примере уже указывается следующее
01.
Нравится или не нравится:
0 
0
Я это знал ещё года четыре назад, а так респект
Нравится или не нравится:
0 
0
И для учителя информатики нашлось кое-что. Так просто о сложном. Спасибо.
Нравится или не нравится:
0 
0