Добавлен: 29.06.2023
Просмотров: 59
Скачиваний: 3
MARGINWIPH - указывает на величину горизонтального отступа внутри рамки.
MARGINHEIGHT - указывает на величину вертикального отступа внутри рамки.соответствует примерно следующей раскладке рамок в области отображения:
Что же происходит, если браузер не понимает рамок? Пользователь видит абсолютно чистый экран и не может добраться до нужной ему информации. Как сделать так, чтобы такая ситуация не возникала? Разработчики расширений предусмотрели такую ситуацию и придумали тег, содержимое которого никогда не отображается в браузере, понимающем рамки, тогда как ``глупый'' браузер, увидя незнакомый тег, честно отобразит его содержимое без применения каких-либо хитростей. Такой тег называется
<NOFRAMES>
Внутри него рекомендуется располагать ссылки на документы, не содержащие рамок.
Для организации связей между рамками разработчики предусмотрели параметр TARGET для тега <A>. Он также может применяться в тегах <BASE>, <AREA> и <FORM>.
2. ПРАКТИЧЕСКАЯ ЧАСТЬ
Разработка сайта посредством HTML
Итак, в качестве практической части была выбрана работа по созданию сайта на тему: «Япония»
Создание графических объектов
В первую очередь перед началом верстки гипертекста нужно продумать общий дизайн страниц, их количество, структуру, а также создать элементы графической оболочки сайта. Лучше всего подойдет Adobe Photoshop CS5.
Кнопки меню
или 
(кому как нравится)
Для новостной ленты:
Для части HEAD
Макет страницы
Также важно продумать макет структуры сайта. Макет нашего сайта будет выглядеть примерно так:
Верстка
Теперь можно приступать к верстке. Делаем главную страницу:
Главная страница:
<html>
<head >
<META HTTP-ENQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=WINDOWS-1251">
<META NAME="AUTHOR" CONTENT="Руслан Смоилов">
<meta name="robots" content="all">
<title> Добро пожаловать в Японию </title>
<center>
<img src="images\77-1024.jpg">
<TABLE width=100% height=3% cellspacing=0><tr><TD BACKGROUND="images\60.jpg">
<MARQUEE DIRECTION=CENTER SCROLLAMOUNT= align=center><font color=black><B> Новостная строка</b></font></MARQUEE></td></tr></table>
<embed src="2.mp3" hidden=true>
</embed></head>
<body background="images\backdrop01.jpg" bgproperties="fixed" leftmargin="35"
rightmargin="35" text="yellow" link="lightgreen" alink="yellow" vlink="lightgreen">
<H2>
Добро пожаловать в Японию!</H2>
<TABLE ALIGN=CENTER WIDTH=100% HEIGHT=100% BORDER=0 cellspacing=0 CELLPADDING=16>
<TR HEIGHT=18%>
<TD WIDTH=19% ><br><FORM NAME="FORM1" ACTION="F:\программирование\Курсовая" METHOD="POST">
<INPUT type="text" value="Ваш логин">
<INPUT type="text" value="Ваш пароль">
<INPUT type="SUBMIT" VALUE="Войти"></FORM><a href="2.html"><h3 align=center>Регистрация</h3></a></TD>
<TD></TD>
<TD WIDTH=25% align=right><FORM NAME="FORM2" ACTION="F:\программирование\Курсовая" METHOD="POST">
<INPUT type="text">
<INPUT type="image" src="images\Без имени-2.jpg" width="93" ALIGN=RIGHT></FORM>
</TD>
</TR>
<TR heigh="32%">
<TD BGCOLOR=BLACK ALIGN=CENTER VALIGN=TOP><BR>
<A HREF="3.HTML"><IMG SRC="images\2.JPG"></A>
<A HREF="4.HTML"><IMG SRC="images\3.JPG"></A>
<A HREF="5.HTML"><IMG SRC="images\4.JPG"></A>
<A HREF="6.HTML"><IMG SRC="images\5.JPG"></A>
<A HREF="7.HTML"><IMG SRC="images\6.JPG"></A>
<A HREF="8.HTML"><IMG SRC="images\7.JPG"></A>
<A HREF="9.HTML"><IMG SRC="images\8.JPG"></A></TD>
<TD ROWSPAN="2" COLSPAN="2" bgcolor=black valign=top align=justify><h3 align=center> Информация о сайте</h3>
<P align=justify><font size="+1">    Сайт разработан с чисто демонстрационными целями.
Почему именно <I>Япония</i>? Незнаю.
Может быть потому что Япония является одной из передовых стран в области информационных технологий(как впрочем во всем).
<a href="4.HTML#SAPPORO"><IMG SRC="images\800px-Japan_Kyoto_Kinkakuji_DSC00117.jpg" ALIGN=CENTER WIDTH=100%></A>
<br><I>Япония</i> — развитая страна с очень высоким уровнем жизни (десятое место по индексу развития человеческого потенциала).
В Японии одна из самых высоких ожидаемых продолжительностей жизни, в 2009 году она составляла 82,12 года, и один из самых низких уровней младенческой смертности</font></p></TD>
</TR>
<TR>
<TD bgcolor="black" align=center valign=top>
<br>
<h2>Автомобиль какой японской марки вы предпочитаете?</h2>
<form>
<Select>
<option value="no">Выберите автобренд
<option value="Toyota">Toyota
<option value="Honda">Honda
<option value="Subaru">Subaru
<option value="Nissan">Nissan
<option value="Mitsubishi">Mitsubishi
</select>
<INPUT TYPE="submit" VALUE="Голосовать">
</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>
<META HTTP-ENQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=WINDOWS-1251">
<LINK href="css/style.css" rel="stylesheet" type="text/css">
<meta name="robots" content="all">
<title> Добро пожаловать в японию </title></head>
<center>
<img src="images\77-1024.jpg">
<TABLE width=100% height=3% cellspacing=0><tr><TD BACKGROUND="images\60.jpg">
<MARQUEE DIRECTION=CENTER SCROLLAMOUNT= align=center><font color=black>
<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">
<TABLE ALIGN=CENTER WIDTH=100% HEIGHT=100% BORDER=0 cellspacing=0 CELLPADDING=16>
<TR HEIGHT=18%>
<TD WIDTH=19% ><br><FORM NAME="FORM1" ACTION="F:\программирование\Курсовая" METHOD="POST">
<INPUT type="text" value="Ваш логин">
<INPUT type="text" value="Ваш пароль">
<INPUT type="SUBMIT" VALUE="Войти"></FORM><a href="2.html"><h3 align=center>Регистрация</h3></a></TD>
<TD></TD>
<TD WIDTH=25% align=right><FORM NAME="FORM2" ACTION="F:\программирование\Курсовая" METHOD="POST">
<INPUT type="text">
<INPUT type="image" src="images\Без имени-2.jpg" width="93" ALIGN=RIGHT></FORM>
</TD>
</TR>
<TR heigh="32%">
<TD BGCOLOR=BLACK ALIGN=CENTER VALIGN=TOP><BR>
<div class=english>
<A HREF="3.HTML"><IMG SRC="images\2.JPG"></a></div>
<A HREF="4.HTML"><IMG SRC="images\3.JPG"></A>
<A HREF="5.HTML"><IMG SRC="images\4.JPG"></A>
<A HREF="6.HTML"><IMG SRC="images\5.JPG"></A>
<A HREF="7.HTML"><IMG SRC="images\6.JPG"></A>
<A HREF="8.HTML"><IMG SRC="images\7.JPG"></A>
<A HREF="9.HTML"><IMG SRC="images\8.JPG"></A></TD>
<TD ROWSPAN="2" COLSPAN="2" bgcolor=black valign=top align=center>
<br><a href="index.html" align=right><h4><<На главную</h4></a>
<h3 align=center>Регистрация пользователей</h3>
<form action="f2" method="post"><br>
Фамилия<input type="text" size=35><br>
Имя         <input type="text" size=35><br>
Отчество<input type="text" size=35><br>
<br>Страна           
<Select>
<option>Выбрать страну
<option value="Россия">Россия
<option value="Беларусь">Беларусь
<option value="Сша">Сша
<option value="Франция">Франция
<option value="Япония">Япония
</select>
<INPUT TYPE="submit" VALUE="Сохранить">
</TD>
</TR>
<TR>
<TD bgcolor="black" align=center valign=top>
<br>
<h2>Автомобиль какой японской марки вы предпочитаете?</h2>
<form>
<Select>
<option value="no">Выберите автобренд
<option value="Toyota">Toyota
<option value="Honda">Honda
<option value="Subaru">Subaru
<option value="Nissan">Nissan
<option value="Mitsubishi">Mitsubishi
</select>
<INPUT TYPE="submit" VALUE="Голосовать">
</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>
Страница 3
<html>
<head>
<META HTTP-EQUIV=Content-Type CONTENT="text/html; >
<meta name="robots" content="all">
<title> Добро пожаловать в японию </title>
<center>
<img src="images\77-1024.jpg">
<TABLE width=100% height=3% cellspacing=0><tr><TD BACKGROUND="images\60.jpg">
<MARQUEE DIRECTION=CENTER SCROLLAMOUNT= align=center><font color=black>
<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>
<TABLE ALIGN=CENTER WIDTH=100% HEIGHT=100% BORDER=0 cellspacing=0 CELLPADDING=16>
<TR HEIGHT=18%>
<TD WIDTH=19% ><br><FORM NAME="FORM1" ACTION="F:\программирование\Курсовая" METHOD="POST">
<INPUT type="text" value="Ваш логин">
<INPUT type="text" value="Ваш пароль">
<INPUT type="SUBMIT" VALUE="Войти"></FORM><a href="2.html"><h3 align=center>Регистрация</h3></a></TD>
<TD></TD>
<TD WIDTH=25% align=right><FORM NAME="FORM2" ACTION="F:\программирование\Курсовая" METHOD="POST">
<INPUT type="text">
<INPUT type="image" src="images\Без имени-2.jpg" width="93" ALIGN=RIGHT></FORM>
</TD>
</TR>
<TR heigh="32%">
<TD BGCOLOR=BLACK ALIGN=CENTER VALIGN=TOP><BR>
<A HREF="3.HTML"><IMG SRC="images\2.JPG"></A>
<A HREF="4.HTML"><IMG SRC="images\3.JPG"></A>
<A HREF="5.HTML"><IMG SRC="images\4.JPG"></A>
<A HREF="6.HTML"><IMG SRC="images\5.JPG"></A>
<A HREF="7.HTML"><IMG SRC="images\6.JPG"></A>
<A HREF="8.HTML"><IMG SRC="images\7.JPG"></A>
<A HREF="9.HTML"><IMG SRC="images\8.JPG"></A></TD>
<TD rowSPAN="2" colspan="2" bgcolor=black valign=top align=justify><br>
<br><a href="index.html" align=right><h4><<На главную</h4></a>
<h2 align=center>Фотографии</h2>
<img src="images\166716 (1).jpg" >
<img src="images\800px-Skyscrapers_of_Shinjuku_2009_January.jpg" ></TD>
</TR>
<TR>
<TD bgcolor="black" align=center valign=top>
<br>
<h2>Автомобиль какой японской марки вы предпочитаете?</h2>
<form>
<Select>
<option value="no">Выберите автобренд
<option value="Toyota">Toyota
<option value="Honda">Honda
<option value="Subaru">Subaru
<option value="Nissan">Nissan
<option value="Mitsubishi">Mitsubishi
</select>
<INPUT TYPE="submit" VALUE="Голосовать">
</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></html>
ЗАКЛЮЧЕНИЕ
На сегодняшний день перспективы HTML продолжают расти. Консорциум всемирной паутины разрабатывает HTML версии 5. Первый вариант спецификации языка появился в Интернете 20 ноября 2007 года. Параллельно ведётся работа по дальнейшему развитию HTML под названием XHTML (англ.Extensible Hypertext MarkupLanguage — «расширяемый язык разметки гипертекста»). Пока XHTML по своим возможностям сопоставим с HTML, однако предъявляет более строгие требования к синтаксису. Как и HTML, XHTML является подмножеством языка SGML, однако XHTML, в отличие от предшественника, основан наXML. Вариант XHTML 1.0 был одобрен в качестве Рекомендации Консорциума всемирной паутины26 января2000 года.
Планируемая спецификация XHTML 2.0 разрывает совместимость со старыми версиями HTML и XHTML, что не очень устраивает некоторых веб-разработчиков и производителей браузеров. ГруппойWHATWG(англ.WebHypertext Application Technology Working Group ) разрабатывается спецификацияWeb Applications1.0, часто неофициально называемая «HTML 5», которая расширяет HTML (впрочем, имея и совместимый с XHTML 1.0 XML-синтаксис) для лучшего представления семантики различных типичных страниц, например форумов, сайтов аукционов, поисковых систем, онлайн-магазинов ит.д., которые не очень удачно вписываются в модель XHTML 2.
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ
1.Борисенко А.А. Web-дизайн. Просто как дважды два. – М.: Эксмо, 2008.- 320 с.
2. Бурлаков М. В. CorelDRAW 12. – СПб.; БХВ-Петербург, 2004. – 688 с.
3. Джамса Крис. Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS,JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. Пер с англ./Крис Джамса, Конрад Кинг, Энди Андерсон - М.: ООО "ДиаСофтЮП", 2005.- 672 с.