Главная Учебники - Разные Лекции (разные) - часть 33
Министерство Образования Московской Области МОСКОВСКИЙ ОБЛАСТНОЙ ПРОМЫШЛЕННО-ЭКОНОМИЧЕСКИЙ КОЛЛЕДЖ
По предмету: «Web-Дизайн» На тему: Язык HTML Выполнил: Студент гр. ПР3 Соколов С.С. Проверил: Витальева .Т.Б. Дубна 2010 Оглавление
Введение Теоретическая часть Практическая часть Заключение Введение
Что такое
HTML
?
С появлением локальных сетей, подключением таких сетей к Интернет, созданием внутрикорпоративных, сетей, появляется возможность с любого рабочего места организации получить доступ к информационному ресурсу сети. Технология World Wide Web, в переводе Всемирная паутина получила столь широкое распространение из-за простоты своих пользовательских интерфейсов. Принцип жми на то, что интересно, лежащий в основе гипертекста, интуитивно понятен. В технологиях WWW все ключевые понятия просматриваемого документа: слова, картинки - имеют возможность раскрыться новым документом, развивающим это понятие. Такой способ представления информации называется гипертекстом, а документы, представленные в таком виде –гипертекстовыми документами. Для описания этих документов используется специальный язык - язык описания гипертекстовых документов или HTML (англ. вариант Hyper Text Markup Language). Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве(Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Для разработки данной информационной системы выбраны фирмы специализирующиеся на оказании услуг мобильной связи. Посредством данной системы пользователь может получить информацию о тарифных планах, роуминге, телефонах и аксессуарах к ним, а так же дополнительных услугах предоставляемых данными фирмами. верстка язык html Теоретическая часть
Еще одним способом разделения текста на части можно назвать горизонтальную линию
. Линия является элементом языка HTML и вставляется в текст посредством тега<HRпараметры>,где параметры могут быть следующими: Практическая часть
Разработка сайта посредством
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> <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> <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
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.
|