Изучаем Java

Вы здесь: Главная >> Java-самоучитель >> Немного об HTML

Обучающие курсы:

Курс обучения профессии "Программист Java"

Немного об HTML


Немного об HTML

Далее мы начнем изучение языка JavaScript — языка программирования, предназначенного для написания так называемых сценариев, которые встраиваются в HTML- текст Web-страниц. Язык HTML — язык гипертекстовой разметки.

Что же представляет собой этот язык? С помощью него мы можем описать то, как будет выглядеть Web-страница на экране. И это все, что может данный язык.
Web-страница, написанная на языке HTML, будет только "как-то выглядеть".
Пользователь не сможет как-то ее изменить. Однако часто Web-страница не только отображается на экране, но и предлагает пользователю поработать с ней, ввести какие-то данные, нажать что-нибудь. Для выполнения данных операций HTML-язык не предназначен.

Как же быть? Для этого в HTML-текст Web-страницы встраиваются так называемые сценарии— небольшие программы, написанные на каком-то поддерживаемом браузером языке программирования, одним из которых и является JavaScript.
Кратко рассмотрим его историю.

Этот язык программирования был создан в 1995 году компанией Netscape под именем LiveScript и использовался как дополнение к браузеру Netscape Navigator 1.2. За свое сходство по синтаксису с Java он был переименован в JavaScript. Этот язык интерпретирующий, так как все тексты Web-страницы читаются браузером в процессе их выполнения. А программы, написанные на JavaScript, как уже было сказано, встраиваются в эти самые Web- страницы. Изучить язык JavaScript будет легко, так как он по синтаксису похож на Java.

Может быть, вы видели сценарии, написанные на VBScript, или слышали о них. VBScript— язык программирования, также предназначенный для написания сценариев, однако он создан на основе языка программирования Visual Basic. Язык VBScript создала компания Microsoft как альтернативу JavaScript (затем Microsoft выпустила еще один язык программирования сценариев JScript, очень схожий с JavaScript). Язык JavaScript поддерживают оба браузера: Netscape Navigator и Microsoft Internet Explorer.

 

А теперь попытаемся на практике изучить процесс создания Web-страниц. Подумайте сначала о том, где вы их будете создавать. Я предлагаю для этого использовать старый добрый редактор Notepad, он же редактор Блокнот. В нем вы будете набирать текст Web-страниц. А выполнять их придется в браузере, желательно водном из вышеперечисленных.
Все тексты, которые приводятся здесь, сохраняйте в текстовом файле, созданном в редакторе Блокнот, с расширением .html или .htm.

Несмотря на то, что здесь будут изложены основы HTML, для создания профессиональных страниц необходимо изучить соответствующую специальную литературу. Однако вы не будете чувствовать себя новичком в этом деле, если прочтете следующие разделы данной книги и проделаете все контрольные упражнения к ним.

 

Из чего состоит HTML-текст? Давайте сразу создадим нашу первую Web-страницу, чтобы на конкретном примере разобраться в ее строении (листинг 10.1).

Листинг 10.1.
Создание вашей первой Web-страницы   

<HTML> <HEAD>
<TITLE>Bama первая Web-страница</TITLE>
</HEAD>
<BODY>
<Н2>Ваш первый заголовок</Н2>
<U>A вот и первый текст. Его мы подчеркнули</ U >
</BODY>
</HTML>

Итак, мы создали Web-страницу под названием Ваша первая Web-страница, которая вывела заголовок и подчеркнутый текст (рис. 10.1).

Рис. 10.1. Ваша первая Web-страница

Из чего же состоит текст HTML-страницы? Как видите, многие слова заключены в парные угловые скобки (< >). Это дескрипторы. Они позволяют отформатировать текст. Все дескрипторы, приведенные в нашем примере, парные (хотя бывают и одинарные). Они бывают открывающими (например, дескриптор <Н1>) и закрывающими (например, дескриптор </Н1>).

Характерный признак закрывающего дескриптора — наличие знака обратной косой черты (" /"). Примеры непарных дескрипторов будут приведены далее. Парные дескрипторы могут быть вложенными. Если рассмотреть их по отношению друг к другу, внутренний будет дочерним, а внешний— родительским.

Иногда мы будем употреблять следующую фразу:

"Следующий текст помещен в дескрипторе <ИмяДескриптора>...</ИмяДескриптора>

Это означает, что текст помещен между парными дескрипторами <ИмяДескриптора> и </ИмяДескриптора>.

Теперь рассмотрим структуру HTML-документа. Он заключен между парными дескрипторами < HTML > и </HTML>. Далее документ делится на две части — заголовок и тело документа. Заголовок содержит разного рода системную информацию и располагается между дескрипторами <HEAD> и </HEAD>.
К такой информации относится название документа, которое потом будет содержаться в заголовке окна браузера и в списке истории Web- обозревателя. Оно располагается между дескрипторами <TITLE> И </TITLE>.
Заголовком этого HTML-документа будет "Ваша первая Web-страница".

Вторая часть — тело документа, располагающееся между дескрипторами <BODY> и </BODY>. Результат работы этой части будет отображаться в окне браузера. В теле документа мы располагаем еще два парных дескриптора. Первые парные дескрипторы — <Н2> и </Н2> — это заголовок второго уровня. Следующие два парных дескриптора — <U> и </ U >. Текст, располагающийся между ними, будет подчеркнутым.

Рассмотрим пример HTML-документа, который работает с текстом, а затем разберем его построчно (листинг 10.2).

Листинг 10.2
Пример HTML-документа, работающего с текстом

Сохраните этот файл под именем football. html и попробуйте загрузить его в браузере (рис. 10.2).

 

Рис 10-2.Итоги чемпионата мира по футболу 2002 года

 

Сейчас давайте разберемся.
<Р>30 июня 2002 года у нас появился новый <В>чемпион мира</В>. Этим чемпионом мира стала команда <i>Бразилии</i>. К большому сожалению всей Европы, команда <u>Германии</u> проиграла в финале 0:2. Команда <BIG>Турции</BIG> победила команду < SMALL >Южной Кореи</SMALL> 3:2 и заняла <В>3-е <i>место</i></В>. Поздравляем эти четыре команды с занятием достойных мест. <В>Бразилия</В> теперь пентакампеон. Странно, однако, что самые титулованные команды мира <u>впервые</u> встретились на чемпионате мира.<Р>

 

Можно просто писать текст в HTML-документе и не заключать его в указанные дескрипторы, но это будет не по правилам, хотя текст и будет отображаться на экране.
Далее можно увидеть дескрипторы <в> и </в>.
Между ними располагается текст, выделенный жирным шрифтом.

Между дескрипторами <i> и </i> располагается текст, выделенный курсивом. Между дескрипторами <u> и </u> располагается подчеркнутый текст. Также между дескрипторами <STRIKE> И </STRIKE> располагается зачеркнутый текст (но примера этих дескрипторов в данном HTML-документе нет). Между дескрипторами <BIG> и </BLG> располагается текст большего размера, чем стандартный. Между дескрипторами <SMALL> и </SMALL> располагается текст меньшего размера, чем стандартный.

 

Рассмотрим отдельно следующий фрагмент этого текста.

<В>3-е <i>место</i></В>
Здесь текст "3-е место" будет выделен жирным, а "место" не только жирным, но и курсивом. Дескрипторы <i> и </i> являются вложенными.

После этого до закрывающего дескриптора все должно быть понятно в предложенном тексте (за исключением тех читателей, которые не разбираются в футболе, — может быть, они не знают, что такое пентакампеон). В девятой строке мы размещаем заголовок второго уровня. Рассмотрим теперь десятую строку.

 

<Р ALIGN="right">Теперь давайте вспомним <FONT SIZE=12>Bce <FONT COLOR="blue">сенсации</FONT></FONT> прошедшего чемпионата мира. Прежде всего — о разочарованиях:</Р>

В этой строке тоже есть дескрипторы абзаца, однако в открывающем дескрипторе мы указываем параметр выравнивания.
Есть три значения параметра ALIGN: "left", "center" и "right". Указывая их, мы выравниваем этот абзац по левому или правому краям или по центру. Если не указывать данный параметр, то по умолчанию абзац выравнивается полевому краю.

Также есть дескрипторы <FONT> и </FONT>. Они управляют начертанием текста. Есть три параметра этих дескрипторов: FACE, SIZE И COLOR. Значение атрибута (параметра) FACE равно названию шрифта, например "Arial". Значение атрибута SIZE равно размеру шрифта. Значение атрибута COLOR равно либо коду цвета, либо названию цвета (например, "red").

 

Рассмотрим последующие семь строк: с одиннадцатой по семнадцатую.

<OL TYPE="1">
< LI >Франция. Чемпион мира не вышел из группы.</LI>
<LI>Аргентина. Главный фаворит не вышел из группы.</LI>
< LI >Португалия. Один из фаворитов не вышел из группы.</LI>
< LI >Италия. Эта команда споткнулась на Корее в 1/8 финала.</LI>
< LI >Испания. Эта команда также споткнулась на Корее в 1/4 финала.</LI>
</OL>
 

Между дескрипторами <OL> и </OL> располагается нумерованный список.
У открывающего дескриптора есть два параметра: TYPE (тип нумерации: А — большие латинские буквы; а — маленькие латинские буквы; I — большие римские буквы; i — малые римские  буквы; 1 — арабские цифры) и START (с какого номера нумеровать список).

Можно создавать просто маркированный список, используя вместо дескрипторов <OL> и </OL> дескрипторы <UL> и </UL>.
Внутри между дескрипторами <LI> и </Li> располагается отдельный элемент списка.
Тут 5 элементов с нумерацией арабскими цифрами.

Можно в значениях атрибута type у дескриптора <ul>...</ul> записать square, round и circle. Далее структура текста страницы должна быть понятна.

•          Создание абзаца с выравниванием его по центру.
•          Создание нумерованного списка с нумерацией большими римскими буквами.
•          Создание заголовка второго уровня красного цвета.
•          Создание большого "лирического абзаца" о сборной России с выравниванием по левому краю.
•          Затем создание маленького абзаца с выравниванием по правому краю.

 

Итак, мы рассмотрели довольно большой и, возможно, показавшийся вначале сложным HTML-документ.
Научимся теперь перемещаться по нашей странице. Переделайте ваш HTML-документ так, как показано в листинге 10.3.

Листинг 10.3.
HTML-документ     

Вот как это выглядит на экране (рис. 10.3).

 

Рис. 10.3. Файл football .html после внесенных изменений

 

Что же здесь изменилось? Вроде бы все похоже на предыдущую страничку. Однако, во-первых, мы добавили заголовок первого уровня, затем поместили пять новых строк, а затем изменили строки заголовков второго уровня.
Вот они, выделенные из текста HTML-документа.

<OL TYPE="1">
<LI><A HREF="#temal">Общие итоги</А></LI>
<LI><A HREF="#tema2" >Сенсации</А></LI>
<LI><A HREF="#tema3">Россия</А></LI>
</OL>

<H2><A NAME=" temal">Общие итоги</А></Н2>
<H2><A NAME=" tema2 " >Сенсации</А></Н2>
<H2><A NAME= " tema3 "><FONT COLOR= "red">Россия</ FONT ></А></Н2>

 

Мы создали нумерованный список с нумерацией арабскими цифрами, но содержимое трех пунктов этого списка, возможно, не совсем понятно. Рассмотрим поэтому следующие понятия. Гиперссылка— это дескриптор <А> и </А>, содержащий либо адрес HTML-документа, либо имя ссылки (якорь) в качестве значения атрибута HREF.

Якорем называют особую гиперссылку, на которую могут ссылаться другие гиперссылки, расположенные в других частях документа. Именем этой гиперссылки является значение атрибута NAME парного дескриптора <А> и </А>.

Мы создаем три якоря: temal, tema2 и tema3. И на эти якоря мы ссылаемся с помощью тех же дескрипторов с атрибутом HREF, правда, перед именем якоря надо ставить знак "#". При подведении курсора мыши к элементам нумерованного списка указатель мыши принимает форму указывающей руки. При щелчке на каком-либо элементе списка отображаемая часть страницы переходит к необходимому заголовку второго уровня.
Аналогичным образом можно переходить и на разные страницы.

Создадим еще одну страницу по имени MyHome.htm и наберем там следующий текст (листинг 10.4).
При этом немного изменим текст страницы football. htm, как показано в листинге 10.5.

Листинг 10.4
Страница MyHome.htm

Листинг 10.5.
Измененный текст страницы football.htm

Таким образом, мы создали два взаимосвязанных HTML-документа, которые можно продемонстрировать и в Интернет.
Аналогично рассмотренному ранее, можно перейти из другого документа сразу к какому- либо якорю на HTML-странице. Для этого параметр HREF надо установить в значение "Имя страницы#Имя Якоря". Например, задание значения атрибута HREF у дескриптора <А> в файле MyHome. htm как " football. htm#tema2" переведет нас сразу к якорю tema2.

 

Последнее, о чем мы поговорим в этом разделе, — комментарии.
Комментарии в языке Java мы уже обсуждали, а теперь рассмотрим комментарии в HTML.

Они тоже помещаются в специфическом дескрипторе, между <!-- и -->. Давайте прокомментируем файл MyHome. htm (листинг 10.6).

Листинг 10.6.
Использование комментариев в файле MyHome.htm

В этой главе мы познакомились с азами создания простых HTML-документов. Других вопросов HTML мы коснемся в главе 12. Там мы рассмотрим такие компоненты Web- страниц, как рисунки, фреймы и многое другое. А пока займемся изучением языка JavaScript.


Партнеры сайта