Выпуск №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.
Спасибо за урок!
Нравится или не нравится:
1 
0
Спасибо за нормальние обиснение, я уже изучал HTML от Евгения Попова, но хочу закрепит)
P.S.:Дайте, пожалуста, оценку маему сайту
Нравится или не нравится:
0 
0
Спасибо вам за урок.
Нравится или не нравится:
0 
0
Всё доступно изложено. Спасибо за урок.
Нравится или не нравится:
0 
0
Спасибо Андрей! У Вас все очень доходчиво получается-талант. Осваиваю CMS-ки, приходится редактировать шаблоны методом тыка, и понимаю , что без этих знаний все равно не обойтись.
Нравится или не нравится:
0 
0
Благодарю за урок. Пока всё понятно.
Нравится или не нравится:
0 
0
Спасибо за урок. Все сделала. Теперь буду ждать с нетерпением второго.
Нравится или не нравится:
0 
0
Hidden due to low comment rating. Click here to see.
Poorly-rated. Like or Dislike:
0 
3
В КОМЕНТАРИЯХ не все видно что прописываю
Нравится или не нравится:
0 
0
Что конкретно не видно?
Нравится или не нравится:
0 
0
Вообще-то, все программы (включая и на HTML) хранятся в памяти в линейном виде, поскольку память имеет такую структуру.
Соответственно и извлекаются они из памяти таким же образом. Поэтому в этом смысле для браузера нет понятий «верха» и «низа», а есть только понятия «перед» и «зад».
Таким образом, код интерпретируется брузерами последовательно по мере его скачивания с сайта. А верх и низ, лево и право появляются при интерпретации браузером тегов языка и отображении соответствующих им указаний только на экране монитора.
Так что ваша фраза:
«Потому что браузер загружает страницу и «считывает код» сверху вниз, слева направо. (Впрочем, как мы и читаем книги).»
неточна
Нравится или не нравится:
0 
1
Конечно вы правы. на смысл остается один и тот же. А новичок быстрей поймет мое пояснения «на пальцах», чем заумные высказывания про память.
Нравится или не нравится:
1 
0
Я как новичок это подтверждаю; – действительно – сразу понял!
= Баночкин С. =
Нравится или не нравится:
0 
0
однозначно!
Нравится или не нравится:
0 
0
Далее читаем:
«Между тегами и располагается информация, не отображаемая на странице.»
Тоже некоторая точность.
На самом деле нужно произвести две оговорки типа «кроме», поскольку отображаются:
1. Заголовок страницы из контейнера … (о чем вы говорите чуть нииже).
2. Фавикон (favicon), если между тегами и есть на то соответствующие указания.
Нравится или не нравится:
0 
0
Цитата:
«Однако, если умело расположить все элементы и блоки на странице и применить стиль, то все будет одинаково хорошо работать во всех браузерах с нужным .»
По-моему, СКАЗАНО СЛИШКОМ ОПТИМИСТИЧНО для сегодняшнего состояния интернет-браузеров.
Нравится или не нравится:
0 
0
Урок для настоящих новичков!
Нравится или не нравится:
0 
0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
02.
А зачем 2 строчка точно такая же как первая?
Я это принимал за ошибку, когда пытался в Worde, что то похожее сделать; СТОЛЬКО было до тега HTML !!!
Итогда решил сам формировать кодовые страницы…
= Баночкин С. =
Нравится или не нравится:
0 
0
То что нужно – для новичка!
Нравится или не нравится:
0 
0
Спасибо большое за урок.Мне все понравилось, все понятно и все получилось.
Нравится или не нравится:
0 
0
Спасибо за объяснения. Даже мне стало понятно
Нравится или не нравится:
0 
0
Очень хороший и понятный урок!
Я тоже долго разбирался и мне стало
всё понятно.С нетерпением буду ждать
следующих уроков.
Нравится или не нравится:
0 
0
Андрей,я делаю блог на вордпрессе,нужны ли для этого знания по HTML? Спасибо!
Нравится или не нравится:
0 
0
оказывается, все ТАК просто!!!
это невероятно!!!!
спасибо огро-о-о-омное!!!!!
я поверила в себя…..ведь это была моя «несбыточная» мечта…
спасибо;)))))
Нравится или не нравится:
0 
0
Мне понравилось,доступно и понятно
Нравится или не нравится:
0 
0
Здраствуйте.
У меня совсем другая проблема.С Notepad, когда переключаю на русскую клавиатуру,то какие то непонятные знаки. Пишу русский текст Worde ,вставляю в документ.Всё нормально,работает.А вот в вашем примере не срабатывает.Показывает какие то непонятные знаки вместо Текст, который мы видим в своём браузере.Почему так получается.И может Вы сталкивались с такой проблемой как у меня.Кодировка у меня стоит кодировать в UTF-8(без ВОМ).
Нравится или не нравится:
0 
0
Снова Вам пишу.Поменяла верхнюю часть до и всё встало на свои места.Может быть у кого тоже такие проблемы.
Документ без названия
Нравится или не нравится:
0 
0
Такое возможно из-за не верных кавычек. Были люди с такой проблемой. Все решалось заменой кавычек.
Нравится или не нравится:
0 
0