Файл: Основы программирования на языке HTML ..pdf

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

Рассмотрим наиболее распространенные команды для употребительных символов.

Символ Команда

" &quot

& &amp

< &lt

> &gt

знак пробела &nbsp

Браузер автоматически осуществляет перенос текста, если строка не помещается на экране. Тем не менее, случается так, что необходимо вывести текст одной строкой без разрыва. Для этого нужно поместить перед строкой текста одиночный дескриптор <NOBR>, который является расширением языка HTML фирмы Netscape. Какой длинной не была бы строка, браузер ее полностью выведет на экран без переноса.

Путешествуя по WWW в поисках страничек, посвященных музыке, можно часто найти документы, после загрузки которых на фоне работы браузера начинает играть музыка. Эта интересная возможность, которая хоть и требует продолжительное время для загрузки на медленных соединениях, придает любой музыкальной страничке некоторую привлекательность. Реализуется она таким образом:

<EMBED SRC=URL AUTOSTART=TRUE HIDDEN=TRUE>^{^[6]}

Дескриптор <EMBED> используется для работы с музыкальными файлами, атрибут SRC указывает на файл, который будет загружен. Атрибут AUTOSTART указывает браузеру, нужно ли проигрывать данный файл после загрузки или нет. Атрибут HIDDEN также как и атрибут AUTOSTART принимает логическое значение и сообщает браузеру, что на экран нельзя выводить кнопки управления процессом воспроизведения файла. Если же два последних атрибута принимают значения FALSE, то после загрузки музыкального файла броузер выведет на экран кнопки управления воспроизведением, и пользователь в любой момент может проиграть файл, остановить воспроизведение, заново воспроизвести файл.

Также находят свое применение в Web–страничках такие структуры данных, как таблицы. Они помогают в определенных случаях удобно организовать некоторые данные, скажем, некоторую сводку цифр, каких-то расчетов и т. д. На экране такие таблицы выглядят аналогично привычным нам таблицам на бумаге или в приложениях типа Microsoft Excel. Кроме представления табличных данных таблицы можно использовать, например, для оформления: произвольного расположения изображений и текста, на экране. Методы построения таблиц вследствие своего объема и некоторой сложности в данной работе не приводятся.

Те, кто хоть раз пользовался при навигации в World Wide Web для поиска информации поисковыми машинами, обязательно сталкивался с так называемыми формами. Это специфические, хотя и весьма популярные возможности языка HTML. Формы представляют собой поля ввода текста, флажки, радиокнопки, списки и др. формы интерактивного общения с пользователем. Данные, вводимые в формы, отсылаются на Web–сервер для дальнейшей обработки, после чего результаты обработки высылаются назад пользователю. Составление документов с использованием форм является признаком профессионализма дизайнера, так как требует кроме хорошего знания языка HTML также и умение работать с языками сценариев, что является неотъемлемой частью работы с формами. Средства описания форм в документах в данную работу не входят.

Глава 2 Практические аспекты программирования на языке HTML

В качестве практической части выбрана работа по созданию сайта на тему: «Япония»

Создание графических объектов

В первую очередь перед началом верстки гипертекста нужно продумать общий дизайн страниц, их количество, структуру, а также создать элементы графической оболочки сайта. Лучше всего подойдет Adobe Photoshop CS5^{^[7]}.

Кнопки меню

или (кому как нравится)

Для новостной ленты:

Для части HEAD

Макет страницы

Также важно продумать макет структуры сайта. Макет нашего сайта будет выглядеть примерно так:

Верстка

Теперь можно приступать к верстке. Делаем главную страницу:

Главная страница:

<html>

<head >

<title> Добро пожаловать в Японию </title>

<MARQUEE DIRECTION=CENTER SCROLLAMOUNT= align=center><font color=black><B> Новостная строка</b></font></MARQUEE></td></tr></table>

</embed></head>

<body background="images\backdrop01.jpg" bgproperties="fixed" leftmargin="35"

rightmargin="35" text="yellow" link="lightgreen" alink="yellow" vlink="lightgreen">

<H2>

Добро пожаловать в Японию!</H2>

<INPUT type="SUBMIT" VALUE="Войти"></FORM><a href="2.html"><h3 align=center>Регистрация</h3></a></TD>

</TD>

</TR>

<TD ROWSPAN="2" COLSPAN="2" bgcolor=black valign=top align=justify><h3 align=center> Информация о сайте</h3>

<P align=justify><font size="+1"> &nbsp&nbsp&nbspСайт разработан с чисто демонстрационными целями.

Почему именно <I>Япония</i>? Не знаю.

Может быть потому что Япония является одной из передовых стран в области информационных технологий(как впрочем во всем).

<br><I>Япония</i> -- развитая страна с очень высоким уровнем жизни (десятое место по индексу развития человеческого потенциала).

В Японии одна из самых высоких ожидаемых продолжительностей жизни, в 2009 году она составляла 82,12 года, и один из самых низких уровней младенческой смертности</font></p></TD>

</TR>

<TR>

<br>

<h2>Автомобиль какой японской марки вы предпочитаете?</h2>

<form>

<option value="no">Выберите автобренд

<option value="Toyota">Toyota

<option value="Honda">Honda

<option value="Subaru">Subaru

<option value="Nissan">Nissan

<option value="Mitsubishi">Mitsubishi

</select>

</form>

<bg><BR><bR> <strong>Итоги опроса:<table width=70% cellspacing=6 height=20% >

<tr><td>Toyota</td><td> 40%</td></tr>

<tr><td>Honda</td><td> 10%</td></tr>

<tr><td>Subaru</td><td> 20%</td></tr>

<tr><td>Nissan</td><td> 10%</td></tr>

<tr><td>Mitsubishi</td><td> 20%</td></tr></TABLE></strong>

</TD></TR></TABLE><br><br><br><br><br>

<A href="http://www.japan.com"> japan.com</a>

<A href="http://www.google">google.com</a>

<br><br><br><br><br><p align=right> Desined by Ruslan Smoilov<br>Dubna 2010

<br> smoiloff_new@mail.ru

</center>

</body>

</html>

Страница 2

<html>

<head>

<title> Добро пожаловать в японию </title></head>

<B> Новостная строка</b></font></MARQUEE></td></tr></table>

<body background="images\backdrop01.jpg" bgproperties="fixed" leftmargin="35"

rightmargin="35" text="yellow" link="lightgreen" alink="yellow" vlink="lightgreen">

<INPUT type="SUBMIT" VALUE="Войти"></FORM><a href="2.html"><h3 align=center>Регистрация</h3></a></TD>

</TD>

</TR>

<h3 align=center>Регистрация пользователей</h3>

Фамилия<input type="text" size=35><br>

Имя&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" size=35><br>

Отчество<input type="text" size=35><br>

<br>Страна&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

<option>Выбрать страну

<option value="Россия">Россия

<option value="Беларусь">Беларусь

<option value="Сша">Сша

<option value="Франция">Франция

<option value="Япония">Япония

</select>

</TD>

</TR>

<TR>

<br>

<h2>Автомобиль какой японской марки вы предпочитаете?</h2>

<form>

<option value="no">Выберите автобренд

<option value="Toyota">Toyota

<option value="Honda">Honda

<option value="Subaru">Subaru

<option value="Nissan">Nissan

<option value="Mitsubishi">Mitsubishi

</select>

</form>

<bg><BR><bR> <strong>Итоги опроса:<table width=70% cellspacing=6 height=20% >

<tr><td>Toyota</td><td> 40%</td></tr>

<tr><td>Honda</td><td> 10%</td></tr>

<tr><td>Subaru</td><td> 20%</td></tr>

<tr><td>Nissan</td><td> 10%</td></tr>

<tr><td>Mitsubishi</td><td> 20%</td></tr></TABLE></strong>

</TD></TR></TABLE>

<A href="http://www.japan.com"> japan.com</a>

<A href="http://www.google">google.com</a>

<br><br><br><br><br><p align=right> Desined by Ruslan Smoilov<br>Dubna 2010

<br> smoiloff_new@mail.ru

</center>

</body>

</html>

Страница 3

<html>

<head>

<title> Добро пожаловать в японию </title>

<B> Новостная строка</b></font></MARQUEE></td></tr></table>

<body background="images\backdrop01.jpg" bgproperties="fixed" leftmargin="35"

rightmargin="35" text="yellow" link="lightgreen" alink="yellow" vlink="lightgreen">

</body>

<INPUT type="SUBMIT" VALUE="Войти"></FORM><a href="2.html"><h3 align=center>Регистрация</h3></a></TD>

</TD>

</TR>

<h2 align=center>Фотографии</h2>

</TR>

<TR>

<br>

<h2>Автомобиль какой японской марки вы предпочитаете?</h2>

<form>

<option value="no">Выберите автобренд

<option value="Toyota">Toyota

<option value="Honda">Honda

<option value="Subaru">Subaru

<option value="Nissan">Nissan

<option value="Mitsubishi">Mitsubishi

</select>

</form>

<bg><BR><bR> <strong>Итоги опроса:<table width=70% cellspacing=6 height=20% >

<tr><td>Toyota</td><td> 40%</td></tr>

<tr><td>Honda</td><td> 10%</td></tr>

<tr><td>Subaru</td><td> 20%</td></tr>

<tr><td>Nissan</td><td> 10%</td></tr>

<tr><td>Mitsubishi</td><td> 20%</td></tr></TABLE></strong>

</TD></TR></TABLE><br><br><br><br><br>

Смотрите также файлы

Способы разработки серверных Web-приложений.pdf

Разработка маркетингового плана реально существующей организации (Организационно-экономическая характеристика предприятия ИП Пильнов).pdf

Проектирование БД для сотрудника салона сотовой связи(Аналитическая часть ).pdf

Процесс построения модели управленческого решения (Общая характеристика управленческих решений и процесса построения модели управленческих решений).pdf

Разработка опорного плана программного проекта.pdf

Файл: Основы программирования на языке HTML ..pdf

Глава 2 Практические аспекты программирования на языке HTML

Смотрите также файлы

Информация

Списки файлов

Дополнительно