Цель пособия — используя средства HTML и JavaScript, научиться строить полезные компьютерные приложения, которые можно было бы запускать на локальном компьютере у себя дома, в школе, или на базе полученных знаний построить собственную диалоговую страничку в Интернете.
Сейчас вы читаете текст, который показывает браузер, выполняя программу, написанную на языке HTML. Некоторые слова в этом тексте выделены цветом и подчеркнуты. Указатель мыши, попадая на такие выделения, превращается из обычного курсора в указующий перст: это ссылка! Достаточно щелкнуть на ссылке мышкой, как текущий текст на экране заменится тем, на который ссылка запрограммирована.
Устройство простейшей
Вот текст HTML-программы, которая показывает эту страничку:
начало HTML-документа начало заголовка информация о документе название документа конец заголовка начало тела заголовок горизонтальная линия начало абзаца абзац конец абзаца конец тела конец HTML-документа |
Команды языка (теги) заключаются в угловые скобки. Как правило, теги парные. Первый тег открывает описание команды, определяет ее начало, второй, отличающийся от первого наличием косой черты “/” перед ключевым словом (именем тега), закрывает его.
Тег <HTML> должен открывать программу, а тег </HTML> — закрывать ее.
Между этими двумя основными тегами располагается головная часть программы (заголовок программы) и ее тело:
В этом блоке
Команда:
задает браузеру информацию о
кодировке, в которой написан текст
Между парой тегов <TITLE> и
</TITLE> располагается имя
Посмотреть документ “Упражнение”
В окошке браузера Microsoft Internet Explorer вы должны увидеть:
Заголовок окошка браузера Netscape Navigator выглядит так:
Между тегами <BODY> и </BODY> располагаются команды, следуя которым браузер выводит информацию в окно документа.
Наша простая программа использует следующие команды:
| <H1>...</H1> | — заголовок |
| <HR> | — горизонтальная линия |
| <P>...</P> | — абзац |
Заголовки являются важной частью документа. Они разделяют информацию на отдельные логические части и поэтому существенно улучшают ее восприятие.
Заголовки бывают разные по значению, или как говорят, по уровню. Учебник, например, имеет название — это заголовок первого уровня. Текст в учебнике разбит на главы; названия глав — это заголовки второго уровня. Главы содержат параграфы с заголовками третьего уровня. Параграфы — пункты, обозначенные заголовками четвертого уровня.
В HTML-документе поддерживаются заголовки шести уровней при помощи конструкции
<Hn>текст заголовка</Hn>
Здесь в качестве n следует использовать одну из цифр 1-6, обозначающую уровень заголовка.
Заголовки выделяются браузером при показе HTML-документа размером шрифта и жирностью:
Это заголовок 1 уровняЭто заголовок 2 уровняЭто заголовок 3 уровняЭто заголовок 4 уровняЭто заголовок 5 уровняЭто заголовок 6 уровня |
Использовать заголовки нужно очень аккуратно в соответствии с его логическим уровнем в структуре документа. Не следует использовать команды Hn для выделения обычного текста. Они применяются именно для заголовков.
История о том, как ребята пошли в лес за грибами, может иметь такую структуру (справа от заголовка проставлен его уровень):
|
Линия — простейший графический элемент, который умеет строить браузер. Горизонтальная линия задается тегом <HR>, и этот тег не имеет парного закрывающего. Браузер, выполняя эту команду, выведет на экран такую черту:
Горизонтальные линии удобно использовать для дополнительного выделения (или разделения) элементов документа на экране. Посмотрите еще раз, как линия выделяет заголовок в нашем примере “Упражнение 1”.
Человеку в отличие от компьютера трудно воспринимать однородную информацию, поэтому в книгах буквы не покрывают сплошь всю страницу, хотя это здорово сэкономило бы бумагу. Страница в угоду человеческой природе содержит много пустоты, а текст делится на порции — абзацы. Абзацы отделяются друг от друга “красными” и (или) пустыми строками. Красная строка — это первая строка абзаца с текстом, сдвинутым вправо. Конечно, разделять текст на абзацы стараются не как попало, а так, чтобы каждый фрагмент содержал законченную мысль.
Вот сейчас начат новый абзац, потому что закончено вступление, и разговор пойдет о том, как программируются абзацы на HTML. Как они выглядят, вы уже видите в этом тексте: как правило браузер использет не красную, а пустую строку для отделения одного абзаца от другого или абзаца от других элементов документа. Задается абзац тегами <P> и </P>, между которыми помещается текст. Фактически работа тега <P> сводится к выводу перед текстовым фрагментом пустой строки. А вот парный тег </P> игнорируется браузером, поэтому его можно и не писать.
Посмотрите в “Упражнение 1” и в тексте, который вы сейчас читаете, как выводятся абзацы на экран:
Браузер выполняя программу (интерпретируя
Важно понимать, что элементы отображаются на экран последовательно:
слева направо и сверху вниз в соответствие с
порядком следования тегов в
Когда рисуют на Бейсике или Си, есть возможность вывести элемент в
любое место экрана по своему усмотрению.
Программируя на HTML, нельзя ориентироваться на определенные размеры
окна документа. Браузер, выполняя программу, использует то окно,
которое предоставил ему пользователь. Значит, одна и та же
Окно нашего “Упражнения 1” может, выглядеть так:
Или так:
Проверьте это сами! Откройте документ по нижеприведенной ссылке. Переведите его из полноэкранного режима в оконный и, меняя размеры окна мышкой, посмотрите, что у вас будет получаться.
Открыть документ “Упражнение 1”
Вы видите, что линия укорачивается или удлиняется в зависимости от размеров окна.
Текст заголовка при маленьком окне вынужден занять 2 строки.
Абзац выводится так, чтобы поместиться в окне. При этом браузер не обращает внимание на то, как размещается абзац по строкам в HTML-тексте.
Все эти “причуды” браузера заставляют новичка на вопрос
“Как работает браузер?” ответить кратко: “Плохо!”.
Однако отмеченные минусы — это лишь плата за универсальность
Обозначенные ограничения оборачиваются положительной стороной HTML,
делая его независимым от компьютерной платформы (DOS, Windows, Unix,
MacOs...) и параметров видеовывода конкретного компьютера (CGA, EGA,
VGA, SVGA,...), в частности, от количества экранных точек. Это
означает, что ваш HTML-документ способны увидеть все люди, на
компьютерах которых установлена
В программе стихотворение написано, как ему и полагается на 4 строчках:
Браузер выводит стихи как единый абзац. Хотелось бы показать стихотворение по-человечески. Давайте попробуем сделать каждую строку отдельным абзацем:
Результат можно посмотреть здесь.
Получилось! Однако, пустые строки смотрятся не очень красиво.
Хорошо, не буду больше испытывать ваше терпение! HTML имеет средство для задания принудительного перехода на новую строку внутри абзаца.
Команда BR заставляет браузер продолжить вывод абзаца с новой строки. Тег <BR> не имеет парного.
Посмотрите, как теперь выглядят наши стихи.
Красиво! Это потому, что вывод стихов записан так:
Осталось написать только заголовок стихотворения и имя автора. Вот теперь стихи смотрятся, как в книге:
А вот текст
начало HTML-документа начало заголовка информация о документе название документа конец заголовка начало тела заголовок 1 уровня горизонтальная линия заголовок 2 уровня короткий абзац абзац с принудительными разрывами строк конец тела конец HTML-документа |
Нажмите кнопку “Сброс”, затем выберите верные ответы на вопросы.
![[содержание]](pic/home.gif "содержание"){kind=small}
![[урок 2]](pic/right.gif "урок 2"){kind=small}
