4-02-2022, 09:08

Урок №6. Структура HTML приложения

Прежде чем создавать сайт, нужно продумать его структуру.

Существует несколько типов сайтов в зависимости от гиперсвязи между страницами.

Прежде чем создавать сайт, нужно продумать его структуру.

Лендинг

Самый простой сайт состоит всего из одной страницы. Такой сайт называется лендинг (сокращение от “лендинг пейдж”, что в переводе с английского (Landing Page) значит “целевая страница”).

Цепочка

Это тоже простая структура.Сайт состоит из нескольких страниц. Странички просматриваются последовательно. На каждой страничке предусмотрены ссылки на следующую страницу и на предыдущую страницу.

цепочка

Задание 1.

Создайте папку Цепочка. Скопируйте в неё две картинки со стрелками вправо и влево.

Создайте три HTML документа, отличающихся цветом фона.

Сохраните их под именами start.html, middle.html и finish.html соответственно.

Создайте гиперссылки с первого документа на второй, со второго — на первый и третий, с третьего — на второй.

Код для страниц.

<HTML>
<HEAD>
<TITLE>Синий цвет</TITLE>
</HEAD>
<BODY bgcolor="blue" text="yellow">
<H1>Станичка СТАРТ</h1>
<HR>
<IMG src="arrow-right.png" width=200>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Зеленый цвет</TITLE>
</HEAD>
<BODY bgcolor="green" text="yellow">
<H1>Станичка СЕРЕДИНКА</h1>
<HR>
<IMG src="arrow-right.png" width=200>

<HTML>
<HEAD>
<TITLE>Фиолетовый цвет</TITLE>
</HEAD>
<BODY bgcolor="purple" text="yellow">
<H1>Станичка ФИНИШ</h1>
<HR>
<IMG src="arrow-left.png" width=200>
</BODY>
</HTML>

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

Простое меню

В этой структуре на главной странице расположены гиперссылки на дополнительные страницы. С каждой из них можно перейти только
на главную страницу.

простое меню

Задание 2.

Создайте гипертекстовый документ по предложенной выше схеме. Для этого создайте новую папку «Школьное кафе», в которую скопируйте рисунки для оформления страничек.

Создайте следующие документы:

Меню на сегодня,
Супы,
Горячие блюда,
Булочки,
Сладости.

и свяжите их гипертекстовой связью

Образцы страничек:

Документ main.html.

<HTML>
<HEAD>
<TITLE>Школьное кафе</TITLE>
</HEAD>
<BODY background="fotofon.jpg">
<H1 align="center">Школьное кафе «Ласунак»</H1>
<HR>
<H2>Меню на сегодня:</H2>
<HR>
<OL>
<LI><A href="first.html">Супы</A></LI>
<LI><A href="second.html">Горячие блюда</A></LI>
<LI><A href="fastfood.html">Булочки</A></LI>
<LI><A href="other.html">Сладости</A></LI>
</OL>
</BODY>
</HTML>

Документ first.html.

<HTML>
<HEAD>
<TITLE>Школьное кафе</TITLE>
</HEAD>
<BODY background="fotofon1.jpg">
<H1 align="center">Супы</H1>
<HR>
<OL>
<LI> Борщ </LI>
<LI> Рассольник </LI>
<LI> Молочный с овощами </LI>
</OL>
<A href="main.html">На главную</A>
</BODY>
</HTML>

Остальные HTMLдокументы оформите самостоятельно.

Иерархия.

Это зависимость по подчинению или включению одних объектов в другие.

Задание 3.

Создайте небольшой HTML справочник по предложенной структуре.

Уважаемые читатели!

Все материалы с сайта можно скачивать абсолютно бесплатно. Все материалы проверены антивирусом и не содержат скрытых скриптов.

Материалы в архиве не помечены водяными знаками!

Если материал нарушает чьи-то авторские права, просьба написать нам по обратной связи, указав авторство материала. Мы обязуемся либо убрать материал, либо указать прямую ссылку на автора.

Сайт пополняется материалами на основе бесплатной работы авторов. Eсли вы хотите отблагодарить их за работу и поддержать наш проект, вы можете перевести любую, не обременительную для вас сумму на счет сайта.
Заранее Вам спасибо!!!

К списку новостей