Выпуск №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
Что же тут сложного? Вспомните как вы учили алфавит в школе и тренеруйтесь в блокноте, чтобы запомнить как создается структура html документа. Как минимум научитесь создавать статические сайты. Созданный вами файл назовите например start.html как предлагается в уроке. Тогда сможете открыть данный файл в браузере и посмотреть что у вас получилось.
Вот коротенький пример:
Моя первая страница
Любой мой текст, пишу что хочу.
Нравится или не нравится:
0 
0
К сожалению у меня не отобразилась структура html документа, т.к. у меня нет для этого прав. Но в уроке все наглядно описано.
Нравится или не нравится:
0 
0
Прав не тот, кто прав, а тот, у кого больше прав.
Не останавливайтесь на достигнутом, юноша. С правами разбираться не так уж и сложно, как кажется. Также не так страшен чёрт, как его малюют (или как его малютки).
ЗЫ Нудная вещь, этот html, однако ничего лучше на этом уровне пока что не придумано.
Нравится или не нравится:
0 
0
Спасибо Андрей.Все просто и понятно.
Нравится или не нравится:
0 
0
не совсем понятно, что обозначает первая строчка
!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”
А именно что обозначает и для чего служит каждый атрибут этой строчки.
Еще раз написал так как пропала интересующая строчка.
Нравится или не нравится:
0 
0
Где ты нашел !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”? В уроке написано <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Нравится или не нравится:
0 
0
Vasily. Извини, это я дебил. DOCTYPE – это тип документа. Который говорит твоему браузеру как расшифровывать (выводить для просмотра) тот или иной тег. Поскольку иногда бывает токое, что для разных типов документов один и тот же тег может толковаться по разному, то для избежания этого сразу же в начале документа оговаривается его тип.
Нравится или не нравится:
0 
0
Интересно, почему до сих пор не создали аналогичный язык разметки, а так же язык программирования, на понятном для нас русском языке? Что, компьютеры только по английски «понимают»?
Нравится или не нравится:
0 
0
Говорят, что рыба гниёт с головы!
Почему у Русских торпеды самые быстрые? Почему подводные лодки движутся быстрее торпед, которые должны их поражать?
Так вот, когда аналогичный вопрос поднимался в СССР насчёт компов, так руководство не захотело тратиться на разработки, а дали указание на копирование аналогов. Так СССР и в последующем Россия загубили всё на корню. А теперь стараются семимильными шагами догонять. Однако поезд уже ушёл.
Хотя кто его знает, может быть нынешняя молодёжь переломит ход событий? Дерзайте. Всё в ваших руках. И не бойтесь трудностей. Пускай трудности вас боятся.
Нравится или не нравится:
0 
0
Зря вы наговариваете на СССР. В СССР никогда не применялись зарубежные компьютеры ни в промышленности, ни в авиации, ни в космонавтике, ни в ВС. Только свое – так надежнее и никакой бомбы замедленного действия. Именно поэтому когда америкосы устроили переполох перед наступлением 2000 года по поводу возможных сбоев компьютеров из-за вероятности неправильной работы календарей на ПК (у них вечно какие-то ограничения: то в календарях, то в BIOS-ах, то в памяти, ….), имелось в виду атомные электростанции и вся военная техника (пусковые установки, подлодки, корабли, спутники и т.д.), правительство СССР ответило, что у нас такой проблемы не существует, так как мы не используем ихние РС для таких целей. Это первое. Второе: еще в 80 годах прошлого столетия у СССР на вооружении стояли компьютеры, которые по архитектуре и быстродействию, забугорными изготовителями начали реализовываться только в середине 90-х. Правда у них миниатюризация была крайне слабая. А после полета нашего «БУРАНА» американцы сами в прессе признали наших программистов самыми лучшими в мире (их за язык ни кто не тянул). Так что до прихода к власти г-на Горбачева в СССР на разработки Информационных технологий тоже тратилось не мало. Вот только не по хозяйски всеми разработками распорядились. Поэтому теперь весь мир создает огромное количество товаров по нашим технологиям, а мы у них покупаем. Извините за длинное отступление. Были у нас разработки и компов и операционных чисто на русском например «МИР-1″ и «МИР-2″, но разваленцы все загубили и все развалили и СССР в том числе.
Нравится или не нравится:
0 
0
СССР катастрофически не везло с руководством. После того, как уморили Сталина,
развернулась подковерная борьба за КРЕСЛО в Кремле. Кто пришел к Власти ?
Никита Хрущев. (Бывший шахтер- необразованный мужик. но с амбициями…)
А как может мыслить на государственном посту тот, кто из грязи в КНЯЗИ…
Для Хруща Кибирнетика была ругательным словом. Поэтому и отношение к
этой науке было при Хрущеве соответственно его «Интеллекту»
Потом его сменил Брежнев, потом Черненко. Потом Андровов. Ну, у этого
хоть с Интеллектом было более менее нормально, но проработал всего 1,5 года.
Затем во власть пришел бывший камбайнер Мих Горбачев со своим комбайнерским
м-Ы-шлением… Потом разрушитель СССР – Ельцин. – бывший прораб.
Но как оказалось строить сложнее, чем разрушать…О последующих персонах
все и так знают.
Нравится или не нравится:
0 
0
Александр, Конст
присоединяюсь к вашим коментариям из руководителей России высшее образоввание имели: цари, ленин (и то заочник), гобачев(кобайнер + высшая парт школа) Ельцин бывший «комсомолец» дорвавшийся до «руля» был у них такой лозунг «Партия дай порулить» ну а нашим не до того им «зарабатывать» надоть, свои аккаунты в твиттере открывать. Где уж и когда HTML на русский переводить? Так что ДА это придется делать молодым и опять самим без помощи «гусударства» Сколково тут не при делах. Грустно как-то получилось но «селяви»
Нравится или не нравится:
0 
0
Спасибо! Андрей! Твои уроки ясны и понятны.
Нравится или не нравится:
0 
0
Мною набранный код выглядит иначе, чем Ваш.
Вы пользуетесь другим редактором – не Блокнот, не WordPad?
Нравится или не нравится:
0 
0
Можно набирать хоть в обычном блокноте – разницы нет никакой…
Нравится или не нравится:
0 
0
Если я сохраню его в редакторе Word, я смогу его скорректировать.
Нравится или не нравится:
0 
0
Ты красавец! Я имею в виду умница! материал объяснен чудесно..
может есть курсы и «для продолжающих» ?
Нравится или не нравится:
0 
0
Да есть:
Нравится или не нравится:
0 
0
Материал известный, но мне полезный, благодарю. Николай
Нравится или не нравится:
0 
0
Вроде бы действительно все понятно. Отобразилось как надо в Exeplorere, а в Opere не открывается вообще, пишет «Невозможно открыть файл», возможно неверный адрес. Когда скопировала адрес адресной строки Exeplorer в адресную строку Opera, то отобразилось как надо. Почему так получается? что-то неправильно в настройках Оперы?
Нравится или не нравится:
0 
0
Когда открываете документ в любом браузере, нажимаете вкладку Файл, открыть документ (или открыть файл, открыть новый файл)-в разных браузерах по-разному, но функция одна…Открывается окно, в котором вы выбираете файл, который нужно открыть, потом подтверждаете и браузер его открывает.:)
Нравится или не нравится:
0 
0
Урок просто классный . Впервые вижу такой подробный урок .
Нравится или не нравится:
0 
0
Спасибо, Андрей. Всё очень доходчиво. Жду продолжения.
Нравится или не нравится:
0 
0
Спасибо! Я думаю, для всех все понятно.
Очень подробно и просто все изложено.
Еще раз спасибо!
Нравится или не нравится:
0 
0
я тракторист с трудом но доходит учу как первоклассник азбуку .СПАСИБО .Анатолий 21 11 2010 в08 20
Нравится или не нравится:
0 
0
Круто! 15 минут, и спасибо ! Иду читать выпуск 2!
Нравится или не нравится:
0 
0
Спасибо, Андрей!!! У меня все получилось!
Нравится или не нравится:
0 
0
СПАСИБО ЗА УРОК
Нравится или не нравится:
0 
0
сСпасибо.Вполне доходчиво! То что нужно!
Нравится или не нравится:
0 
0
Добрый день Андрей! Наконец-то разобрался с первым уроком, честно скажу не сразу, что скорее всего из-за личной не внимательности но в итоге все получилось. Спасибо огромное…
Нравится или не нравится:
0 
0
Большое спасибо))Все подробно рассказано, мне очень понравилось.
Нравится или не нравится:
0 
0
Андрей, спасибо большое! Я вообще не дока в компьютере, даже в простейших операциях, но, с вашей помощью, все-таки мне открылись страницы гугл-хром- черного цвета, а в эксплорер- синего. Может я делала что-либо не так. В общем, я записала все коды в блокноте, сохранила в моем компе, в документах. Там сохранился один с иконкой документа, а другой со значком гугла, которые я потом открыла. Но в моем сайте вообще ничего нет, хотя я в блокноте, в тексте написала адрес сайта. Но,я думаю, в последующих уроках найду причину. Пока их еще не изучала. Мне вообще-то 67 лет и вот решила добить эту науку, на благо себе и детям. А им все некогда, хотя им, конечно, было бы легче. А вообще- мои достижения: открыла самостоятельно 2 кошелька вебмани, 2 бесплатных сайта и 1 платный с платным хостингом, которые пока пусты, т.к. не знаю, как их заполнять. Еще хотела вас спроаить, на бесплатном сайте надо покупать хостинг? Извините, за такое длинное письмо, с уважением, Салима, г. Караганда.
Нравится или не нравится:
0 
0
Уважаемая Салима, видимо ребятам некогда бывло Вам ответить. А может быть они Вам ответили, но на мэил.
Я добавлю, если интересно. Сайт и хост это вообще-то разные понятия. Но если что Вас интересует, то обращайтесь, может быть что-то дельное и посоветую. Вы не намного старше меня.
Нравится или не нравится:
0 
0
А для чего в мэта тэгах указывать name=”author” content=”Ф.И.О.”?
Это что-то дает в плане оригинальности текста или зачем?
Нравится или не нравится:
0 
0
Эту строку можете вовсе не прописывать! Считаю, что она не нужна, на рвботе вашей странички отсутствие этой строки ни как не скажется.
Нравится или не нравится:
0 
0
Фу-у-ух! Со второго раза получилось. Действительно надо просматривать видео урок. Я также застряла на сточке,где идет ссылка на сайт и т.д может в текстовой части убрать эту ссылку или сразу написать ссылку на ваш сайт.Вам виднее.
В общем у меня получилось! Ура! Спасибо,Андрей!
Приступаю к следующему уроку.
Нравится или не нравится:
0 
0
Здравствуйте Татьяна!
Я подписалась на рассылку Андрея из-за уроков по CSS, но решила повторить и HTML.
Андрей расказывает правильно, но вот, если бы я начала учиться у него, то вряд ли
быстро освоила бы сайтостроение.
Лучшей подачи материала я не встречала, чем у Ольги Александровой. Я купила её первую книгу «Как заработать в Интернете лентяю?» и
вторую «Что нам стоит сайт пострроить». Очень советую и Вам начать с этих книг.
Об этих книгах Вы всё узнаете на моём сайте, который я сделала самостоятельно, именно благодаря этим книгам:
Загляните обязательно в раздел БЕСПЛАТНО!
С уважением, Марина
P.S. Посмотрите ещё и эти мои сайты:
Нравится или не нравится:
0 
0
Кукушка хвалит Петуха,за то,что…. можно осовременить – тот платит ей деньги.
Очень в лоб ваша реклама.
Автору – спасибо, все очень наглядно, понятно. Я «чайник» и то, поняла,что надо просто делать все, как написано,показано и оно получится.Любое нарушение и все летит.
Внимательность нужна и усидчивость. А вообще – здорово, что маленькими частями дается такой материал.
Спасибо, за ваше время, желание давать и пусть вам возвращается с утроенным количеством
Нравится или не нравится:
0 
0
Добрый день!
Поясните в чем разница между и . Для чего нужна «/» в конце тега? Далее этот тег будет рассматриваться?
Нравится или не нравится:
0 
0
Алена, «/» называется слэш. Он ставится как правило ПЕРЕД тегом, когда этот тег закрывающий. Закрывающие теги имеют парные теги, например: , ,. Есть еще непарные теги, например тег < который отвечает в html за принудительный перенос текста на новую строку. Вот в нем ставят слэш после тега: , хотя это и не обязательно, можно писать просто . Но без слэша не во всех браузерах работает перенос, поэтому слэш лучше писать в непарном теге. Удачи:)
Нравится или не нравится:
0 
0
Обалдеть, Андрей! Мне всё очень понятно, всё получилось и появился очень большой азарт изучать дальше. Спасибо. Раньше думала, что это для меня будет как китайская азбука
Нравится или не нравится:
0 
0
Ужасно злит обилие ненужных ( не несущих информации) слов и фраз. Возможно, кого-то подкупают своей искренностью слова типа: » Ой… что я наделал?.. надо не так…» и дальше предлагается правильный вариант. В видео уроке должно быть всё лаконично. Чем он короче ( чем меньше «мусора»), тем лучше. Не понял с первого раза – посмотри урок ещё 10 раз.
Нравится или не нравится:
0 
0
Благодарю! Все работает, легко! Едем дальше! Всем успехов!
Нравится или не нравится:
0 
0
Большое спасибо ! Учимся дальше .Поехали.
Нравится или не нравится:
0 
0
Тоже интересно А для чего в мэта тэгах указывать name=”author” content=”Ф.И.О.”?
Нравится или не нравится:
0 
0
Что бы у каждой страницы был свой автор. В принципе можно не указывать.
Нравится или не нравится:
0 
0
А что означает вторая строчка html документа:
«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
???
Нравится или не нравится:
0 
0
Это продолжение первой строки (!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»). То есть на самом деле это одна строка. Просто для удобства отображения и лучшей читаемости перенесено на вторую строку.
Нравится или не нравится:
0 
0
Спасибо. Начнем изучать.
Нравится или не нравится:
0 
0
спасибо за урок, все понятно до слез. будем продолжать учиться
Нравится или не нравится:
0 
0
Огромное спасибо за первый урок. Все предельно понятно и ясно.
С уважением, Александр
Нравится или не нравится:
0 
0
Не знаю, почему, когда добавила краски в BODY – в браузере ничего не получилось. Фон белый, а текст – черный. Удалила. Набрала снова уже с цветом и все вышло! Огромное спасибо! Очень доступно и понятно!
Нравится или не нравится:
0 
0
Ребята! Вот такие комменты, как Марина Сорока от 20.12.2010 с её рекламой своих vir-сайтов – к едрени-фени!
У меня от них Мозила зависла и F-player кракнул!
Нравится или не нравится:
0 
0
Спасибо Андрей, на этот раз вы затронули самое главное-видео объяснение. Все понятно!
Нравится или не нравится:
0 
0
Спасибо Андрей! Только видеоурок затянут, на мой взгляд. Для «трактористов» и иных боящихся…..Язык HTML- самый простой и понятный из языков программирования. Немного усидчивости и всё у Вас получится. Мне 60, и я не боюсь.Просто зачпстую лень меня побеждает, но это врождённое!
Нравится или не нравится:
0 
0
Хотелось бы увидеть уроки по WP как верстать с нуля шаблон, с html и css я знаком очень даже хорошо.
В ваших видео уроках рассказывается как переделывать с уже имеющихся шаблонов но, вы не делаете всего этого с использованием внутренних команд WP
Верстать умею, а вот с WP командами и где и как их применять у меня еще довольно сложное положение
ЗЫ буду очень благодарен если посоветуете видео материал для обучения, если таковой имеется
Нравится или не нравится:
0 
0
Спасибо, Андрей, за прекрасный урок! Я ещё новичок и не знакома с http и ccs и надеюсь после этих уроков хоть немного разбираться в этом! )
Нравится или не нравится:
0 
0
Андрей, спасибо!
Все ясно и понятно! Я конечно уже сталкивалась с кодом и знаю, где и что надо менять, чтобы и поисковики находили по словам, и название сайта свое писать. Но теперь, с наставником, все становиться более понятно, без лишних вопросов, это все равно что ездить по правилам, чувствуешь себя уверенно.
Нравится или не нравится:
0 
0
Андрей, спасибо за урок. Изложено доходчиво и понятно.
Нравится или не нравится:
0 
0
На самом деле, очень дельно и как раз в меру. Когда сразу всё – мало что запоминается. Я благодарен людям, которые делают эту работу. Спасибо вам.
Нравится или не нравится:
0 
0
Материал понятный и очень полезный. Большое спасибо за видео!
Нравится или не нравится:
0 
0
Я всё понял,очень интерестно,жду следующих уроков.. Благодарю
Нравится или не нравится:
0 
0
спасибо урок очень понятный освоила жду следующий
Нравится или не нравится:
0 
0
Здравствуйте Андрей!
Первый урок я освоила.
Всё доступно и понятно.
Спасибо.
Нравится или не нравится:
0 
0
Андрей, благоварю за урок. Изложено просто, доходчиво и понятно. Всех Вам благ желаем.
Нравится или не нравится:
0 
0