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

ВУЗ: Не указан

Категория: Курсовая работа

Дисциплина: Не указана

Добавлен: 18.06.2023

Просмотров: 24

Скачиваний: 2

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

MARGINWIPH - указывает на величину горизонтального отступа внутри рамки.

MARGINHEIGHT - указывает на величину вертикального отступа внутри рамки.соответствует примерно следующей раскладке рамок в области отображения:

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

<NOFRAMES>

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

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

ГЛАВА 2. РАЗРАБОТКА САЙТА ПОСРЕДСТВОМ HTML

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

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

Кнопки меню

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

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

Для части HEAD

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

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


2.2. Верстка

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

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

<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="images77-1024.jpg">

<TABLE width=100% height=3% cellspacing=0><tr><TD BACKGROUND="images60.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="imagesbackdrop01.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="images2.JPG"></A>

<A HREF="4.HTML"><IMG SRC="images3.JPG"></A>

<A HREF="5.HTML"><IMG SRC="images4.JPG"></A>

<A HREF="6.HTML"><IMG SRC="images5.JPG"></A>

<A HREF="7.HTML"><IMG SRC="images6.JPG"></A>

<A HREF="8.HTML"><IMG SRC="images7.JPG"></A>

<A HREF="9.HTML"><IMG SRC="images8.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="images800px-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="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>

<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="images77-1024.jpg">

<TABLE width=100% height=3% cellspacing=0><tr><TD BACKGROUND="images60.jpg">

<MARQUEE DIRECTION=CENTER SCROLLAMOUNT= align=center><font color=black>

<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">

<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="images2.JPG"></a></div>

<A HREF="4.HTML"><IMG SRC="images3.JPG"></A>

<A HREF="5.HTML"><IMG SRC="images4.JPG"></A>

<A HREF="6.HTML"><IMG SRC="images5.JPG"></A>

<A HREF="7.HTML"><IMG SRC="images6.JPG"></A>

<A HREF="8.HTML"><IMG SRC="images7.JPG"></A>

<A HREF="9.HTML"><IMG SRC="images8.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="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>

<META HTTP-EQUIV=Content-Type CONTENT="text/html; >

<meta name="robots" content="all">

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

<center>

<img src="images77-1024.jpg">

<TABLE width=100% height=3% cellspacing=0><tr><TD BACKGROUND="images60.jpg">

<MARQUEE DIRECTION=CENTER SCROLLAMOUNT= align=center><font color=black>

<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>

<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="images2.JPG"></A>

<A HREF="4.HTML"><IMG SRC="images3.JPG"></A>

<A HREF="5.HTML"><IMG SRC="images4.JPG"></A>

<A HREF="6.HTML"><IMG SRC="images5.JPG"></A>

<A HREF="7.HTML"><IMG SRC="images6.JPG"></A>

<A HREF="8.HTML"><IMG SRC="images7.JPG"></A>

<A HREF="9.HTML"><IMG SRC="images8.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="images166716 (1).jpg" >

<img src="images800px-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="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.

Список литературы

1) Айзекс А. Dynamic HTML BHV-Санкт-Петербург 2009

2) Ганчаров А. Самоучитель HTML. Питер 2015

3) Дарнелл Р. HTML 4 Энциклопедия пользователя ДиаСофт 2016

4) Денисов Internet Explorer 5 Справочник Питер 2005