Файл: Основы программирования на языке HTML (ГЛАВА 1. Основная структура HTML-документов).pdf

Что же происходит, если браузер не понимает рамок? Пользователь видит абсолютно чистый экран и не может добраться до нужной ему информации. Как сделать так, чтобы такая ситуация не возникала? Разработчики расширений предусмотрели такую ситуацию и придумали тег, содержимое которого никогда не отображается в браузере, понимающем рамки, тогда как ``глупый'' браузер, увидя незнакомый тег, честно отобразит его содержимое без применения каких-либо хитростей. Такой тег называется

Внутри него рекомендуется располагать ссылки на документы, не содержащие рамок.

Для организации связей между рамками разработчики предусмотрели параметр TARGET для тега <A>. Он также может применяться в тегах <BASE>, <AREA> и <FORM>.

ГЛАВА 2. РАЗРАБОТКА сайта посредством HTML

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

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

Кнопки меню

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

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

Для части HEAD

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

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

2.2. Верстка

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

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

<html>

<head >

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

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

</embed></head>

<body background="imagesbackdrop01.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"> Сайт разработан с чисто демонстрационными целями.

Почему именно <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="japan"> japan</a>

<A href="google">google</a>

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

<br> smoiloff_new@mail

</center>

</body>

</html>

Страница 2

<html>

<head>

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

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

<body background="imagesbackdrop01.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>

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

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

<br>Страна

<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="japan"> japan</a>

<A href="google">google</a>

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

<br> smoiloff_new@mail

</center>

</body>

</html>

Страница 3

<html>

<head>

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

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

<body background="imagesbackdrop01.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>

<A href="japan"> japan</a>

<A href="google">google</a>

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

<br> smoiloff_new@mail</ce

Заключение

На сегодняшний день перспективы HTML продолжают расти. Консорциум всемирной паутины разрабатывает HTML версии 5. Первый вариант спецификации языка появился в Интернете 20 ноября 2007 года. Параллельно ведётся работа по дальнейшему развитию HTML под названием XHTML (англ.Extensible Hypertext Markup Language— «расширяемый язык разметки гипертекста»). Пока XHTML по своим возможностям сопоставим с HTML, однако предъявляет более строгие требования к синтаксису. Как и HTML, XHTML является подмножеством языка SGML, однако XHTML, в отличие от предшественника, основан наXML. Вариант XHTML 1.0 был одобрен в качестве Рекомендации Консорциума всемирной паутины26 января2000 года.

Планируемая спецификация XHTML 2.0 разрывает совместимость со старыми версиями HTML и XHTML, что не очень устраивает некоторых веб-разработчиков и производителей браузеров. ГруппойWHATWG(англ.Web Hypertext Application Technology Working Group) разрабатывается спецификацияWeb Applications1.0, часто неофициально называемая «HTML 5», которая расширяет HTML (впрочем, имея и совместимый с XHTML 1.0 XML-синтаксис) для лучшего представления семантики различных типичных страниц, например форумов, сайтов аукционов, поисковых систем, онлайн-магазинов ит.д., которые не очень удачно вписываются в модель XHTML 2.