|
|
|
HTML с самого начала. Урок 1
HTML с самого начала от CompDocs. Урок 1
Ну что же, с целью мы ознакомились, пора в путь.
Так что же такое HTML? HTML (HyperText Markup Language - язык маркировки гипертекстов) - язык разметки гипертекстового документа. Говоря проще, это набор средств для описания визуальных свойств (позиция, размер, цвет и т.д.) различных элементов, в частности текста или графики. Чтобы не скакать от термина к термину, скажу лишь что под гипертекстовым документом подразумеваются документы с гипертекстовыми ссылками - указателями на другие гипертекстовые документы.
HTML документ в самом простом случае представляет собой один текстовый файл с разширением .htm или .html - никакой разницы между ними нету, можете использовать то, которое Вам больше нравится. Создавать HTML мы будем с вами при помощи текстового редактора. Сам я использую стандартный Блокнот - в нем делаю все, и ru-coding.com, и CompDocs, все 4 рассылки и т.д. - в общем все HTML документы я создаю в нем, поэтому и вы можете смело его использовать. Конечно, при желании, вы можете воспользоваться любым другим текстовым или HTML редактором. Только не стоит использовать программы, которые добавляют форматирование (например, Word). Это такие программы в которых можно, например выделить часть текста жирным фоном или вставить картинку - все это испортит наш файл, нам необходим чисто текстовый редактор.
Каждый HTML документ, составленый в соответствии синтаксису, содержит заголовок и тело. Вот пример простого HTML документа:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Если все это сохранить в отдельном файле и назвать его, например, primer.html и открыть браузером, вы увидите... ничего вы не увидите - белый экран :). Чуть позже мы разберемся что тут для чего. А пока нам нужно ознакомится с таким понятием, как тэги.
Разметка в HTML производится с помощью специального набора команд - тэгов. Честно говоря, я выучил HTML от и до без эдиной книги - просто открывал код обычных веб-страничек и изучал. По этому, мои термины - те, которые я не встречал в явном виде, могут немного отличаться от книжных, но это не столь важно, ведь главное - умение, а не знание. Так что я различаю два типа тегов: региональные и местные.
Если вы посмотрите на предыдущий пример HTML документа, то там можно выделить 3 разных тега, но все они одного типа. Итак, первый - тэг <HTML> - открывающий тэг и его закрывающий тэг </HTML>. Данные тэги в соответствии с синтаксисом HTML обозначают HTML документ. Однако, стоить отметить что они вовсе не обязательны - их роль чисто информационная - дать человеку, просматривающему HTML код понять что это HTML документ :). Т.е. в описании их действия можно было бы сказать что они выделяют HTML код - т.е. все что начинается после открывающего тэга <HTML>, вплоть до закрывающего тэга </HTML>, является HTML документом и его следует компилировать и отображать браузеру. Однако, как я уже говорил, назначение тэгов чисто информационное и они не имеют никакого действия на браузеры. Вобще, следует отметить, что HTML, в отличии от языков программирования, не требует каких-либо строгих или нестрогих норм синтаксиса. Синтаксис в HTML присутствует, однако, его вовсе не обязательно соблюдать. Ну это так, информация к размышлению, а нам то зачем заведомо учиться не по синтаксису? Темболее, что на самом деле это очень хорошая штука - вы с легкостью сможете читать HTML код любого сайта, не зависимо от того создан он тем-то или тем-то или даже сгенерирован.
Возможно, не все читатели знакомы со значением столь часто используемого мною слова, как синтаксис. Энцеклопедическое описание слова синтаксис [<гр. syntaxis - составление] - лингв. чать грамматики, изучающая сочетания слов в предложении неплохо подходит под наше понятие. В частности, под синтаксисом нужно понимать какое-то упорядоченое применение зарезервированных слов, в нашем случае - тэгов. Заразервированные слова, это слова синтаксиса, которые используются для описания структуры самого HTML кода. Например, тэг <HTML> является зарегистрированным словом в синтаксисе HTML (как вы уже знаете, он указывает на HTML документ). При этом, в процессе компиляции, все зарезервированные слова обрабатываются браузером, и, как правило, сами не отображаются в браузере. Вспомните первый пример - там аж 6 тэгов (3 открывающих и 3 закрывающих), при этом, в результате открытия файла браузером, мы не видим в нем ни тэгов, ни даже текста: компилятор обрабатывает зарегистрированные слова, в соответствии с синтаксисом. А чтобы отобразить зарезервированное стово <HTML> в том HTML документа, который вы сейчас читаете, в виде текста, я прибегнул к специальным методам, о которых мы поговорим в следующих уроках. Пожалуй, что сейчас еще следует отматить, так это термин компиляция. Под компилящией мы будем подразумивать процесс обработки браузером HTML файла с целью получения графического изображения - того что мы видим в экране браузера.
Вот и все с терминами, продолжим. Итак, в нашем первом примере еще осталось 2 неразсмотренных тэга: HEAD и BODY. В переводе с английского, эти два слова обозначают голова и тело, соответственно. Что следует писать внутри тэга HEAD, мы рассмотрим в следующих уроках, а пока остановимся на тэге BODY.
Именно в тэг BODY и записывается практически все HTML содержание странички. Для этого существует множество различных тэгов. Сегодня мы рассмотрим некоторые тэги форматирования текста, а имеено, тэги b, i, u. Все эти тэги являются региональными тэгами. А это значит что они существуют открывающие и закрывающие, и все что между открывающем и закрывающим тэгом, подпадает под его влияние. Давайте наберем следующий HTML код:
<HTML>
<HEAD>
</HEAD>
<BODY>
Это простой текст <b>,а этот текст выделен жирным</b>, <i>это уже курсив</i> <u>, ну и подчеркнутый текст.<u>
</BODY>
</HTML>
Сохраним его в каком-нибуть .html файле, например primer.html и откроем браузером. Вы должны увидеть примерно такое:
Это простой текст ,а этот текст выделен жирным, это уже курсив , ну и подчеркнутый текст.
Как выдно, тэг b делает текст жирным, тэг i оформляет его как курсив, а тэк u подчеркивает текст. Важно понимать, что на самом деле, в HTML коде текстовая информация является вот какая: "Это простой текст ,а этот текст выделен жирным,, это уже курсив , ну и подчеркнутый текст.", все остальные тэги лишь настраивают ее отображение. Заметьте, что текст начинается жирным сразу после открывающего тэга b и вплодь до закрывающего b. А что будет, если сделать, вот такое:
<HTML>
<HEAD>
</HEAD>
<BODY>
<b><i><u>Это жирный, курсивный и одновременно подчеркнутый текст!</u></i></b>
</BODY>
</HTML>
Да, правильно, будет во такое:
Это жирный, курсивный и одновременно подчеркнутый текст!
Стоит отметить что порядок закрытия тэгов не обзязательно должен соответствовать порядку их открытия - тэги это просто помеченые зоны, так же само, как вы можете пометить в Ворде участок текста, сделак честь его жирным, часть подчеркнутым и т.д. вот пример, демонстрирующий это:
<HTML>
<HEAD>
</HEAD>
<BODY>
<b><i>обратите внимание</b> как <u>отображение</u> тек<b>ста</b> <u>зависит</i> от тэгов его форматирования</u>
</BODY>
</HTML>
Сохраните его в HTML файле и сами посмотрите на результаты.
Вот и все на сегодня. Обязательно потренеруйтесь, напишите свои HTML странички с применением тэгов, которые мы сегодня рассматривали[/i]
|
| Категория: HTML | Добавил: vovan (10-Июл-2013)
|
| Просмотров: 348
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
|
|
