Студопедия

КАТЕГОРИИ:

АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

Глава 2. Практическая часть. Главная страница

⇐ ПредыдущаяСтр 2 из 3Следующая ⇒

Первое что я сделал, это ввел в блокноте основные тэги:

<html>

<head>

<title> </title>

</head>

<body>

</body>

</html>

После ввода тэга, я сохранил блокнот в формате htm. Пример: главная.htm

Далее я создал таблицу, в которую вместил картинку (шапку сайта) с помощью следующих тегов. (Жирным шрифтом выделен путь к картинке, а курсивом выделен путь по короткому переходу страницы, т.е. гиперссылка.) Атрибут BORDER назначает толщину таблицы. Атрибуты WIDTH и HEIGHT назначают размер картинки (а также таблицы).

<center> <table height=200 border=0><tr><td>

<p><a href="1.htm"> <img height=300 src="1.jpg"></a></p> </td> </tr>

</center>

По центру я создал таблицу с фотографией, на которой находится информация о проходящих акциях.  

<center><table height=120 border=0> <tr><td> </center><center>

<img height=120 src="5.jpg"></center></td> </tr> </table>

Далее я так же создал таблицу и в ней вставил кнопки, которые сделал в Corel DRAW X4.

<center> <table height=65 border=0><tr><td></center>

<a href="женскаяодежда.htm"><img height=65 src="кнопка1.png"></a>

<a href="мужскаяодежда.htm"><img height=65 src="кнопка2.png"></a>

<a href="детскаяодежда.htm"><img height=65 src="кнопка3.png"></a>

<a href="картасайта.htm"><img height=65 src="кнопка5.png"></a></td>

</tr> </table>

Завершающим щагом я вставил скрипт в виде снежинок

<script type="text/javascript"> var imgsrc="flake1.gif"; var ie4=(document.all)?1:0; var ns6=(document.getElementById&&!document.all)?1:0;var height= (document.layers) ?window. innerHeight :window.document.body.scrollHeight; if (height <window .document. body.clientHeight) height= window.document.body.clientHeight; var width =(document .layers)?window. innerWidth:window.document.body.clientWidth; var col= Math.round (height/50) //количество снежинок amp=new Array(); x_pos=new Array(); y_pos=new Array(); stx=new Array(); sty=new Array(); deltax=new Array(); obj=new Array();

 

for (i=0; i<col; ++i) { amp[i]=Math.random()*19; x_pos[i]=Math.random()*(width-amp[i]-29); y_pos[i]=Math.random()*height;  stx[i]=0.03+Math.random()*0.25; sty[i]=2+Math.random();

deltax[i]=0; if (ie4||ns6) { document.write("<img id=\"sn"+ i +"\" style=\"position:absolute;" +

"z-index: "+ i +"; visibility:visible; top:-50px; left:-50px;\"" +  "src='"+imgsrc+"' border=0>");

 } obj[i] = document.getElementById("sn"+i)} function flake() { for (i=0; i<col; ++i) { y_pos[i]+=sty[i]; if (y_pos[i]>height-49) { x_pos[i]=Math.random()*(width-amp[i]-29); y_pos[i]=0}deltax[i]+=stx[i];obj[i].style.top=y_pos[i]+"px";obj[i].style.left=x_pos[i]+amp[i]*Math.sin(deltax[i])+"px";}setTimeout("flake()", 40);}flake();</script>

(смотрите: Приложение 1. Рис.6)

 

Глава 2.1 Практическая часть. Женская одежда

<center> <table height=200 border=2><tr><td><center><img height=200 src="10.jpg"><td><font face="Comic Sans MS" size=6 ><center> Кофточка 1499234 </center> <font face="Comic Sans MS" size=4><center> MY STYLE <br> Размер: XS, S, M, L, XL </center><br><font face="Comic Sans MS" size=5><center>999 рублей<td></center>

<center><a href="Обратная.htm"><img height=40 src="купить.jpg"></a> </center></tr</td></table> <center><table height=200 border=2><tr><td><center> <img height=200 src="11.jpg"><td><font face="Comic Sans MS" size=6 ><center>  Кофточка 1634234</center> <font face="Comic Sans MS" size=4><center>MY STYLE<br> Размер: XS, S, M, L, XL</center><br><font face="Comic Sans MS" size=5><center> 1199 рублей<td></center><center> <a href="Обратная.htm">

<img height=40 src="купить.jpg"></a></center></tr></td></table><center> <table height=200 border=2><tr><td><center> <img height=200 src="12.jpg"><td> <font face="Comic Sans MS" size=6 ><center> Кофточка 1578234</center> <font face="Comic Sans MS" size=4><center>MY SIZE<br>Размер: XS, S, M, L, XL </center><br><font face="Comic Sans MS" size=5><center>999 рублей<td></center> <center><a href="Обратная.htm"><img height=40 src="купить.jpg"></a> </center></tr></td></table><center><table height=200 border=2>   

 

<tr><td><center><img height=200 src="13.jpg"><td> <font face="Comic Sans MS" size=6 ><center> Жилет 1977912234</center> <font face="Comic Sans MS" size=4><center>MY SIZE<br>Размер: XS, S, M, L, XL </center><br><font face="Comic Sans MS" size=5><center>4999 рублей<td> </center><center><a href="Обратная.htm"><img height=40 src="купить.jpg"></a> </center></tr></td></table><center><table height=200 border=2><tr> <td><center><img height=200 src="14.jpg"><td> <font face="Comic Sans MS" size=6 ><center> Жилет 1287378234</center> <font face="Comic Sans MS" size=4><center>MY SIZE<br>Размер: XS, S, M, L, XL </center><br><font face="Comic Sans MS" size=5><center>3999 рублей<td></center> <center><a href="Обратная.htm"><img height=40 src="купить.jpg"></a> </center></tr></td></table><center><table height=200 border=2><tr>

<td><center><img height=200 src="15.jpg"><td> <font face="Comic Sans MS" size=6 ><center> Жилет 1454338234</center> <font face="Comic Sans MS" size=4><center>MY SIZE<br>Размер: XS, S, M, L, XL </center><br><font face="Comic Sans MS" size=5><center>5999 рублей<td></center> <center><a href="Обратная.htm"><img height=40 src="купить.jpg"></a> </center></tr></td></table>

(смотрите: Приложение 1. Рис.7)

Глава 2.2 Мужская одежда

<center><table height=200 border=2><tr><td><center> <img height=200 src="16.jpg"><td><font face="Comic Sans MS" size=6 ><center> Жилет 1488899234</center> <font face="Comic Sans MS" size=4><center>MY STYLE<br>Размер: XS, S, M, L,XL </center> <br><font face="Comic Sans MS" size=5><center>1999 рублей<td> </center> <center> <a href="Обратная.htm"><img height=40 src="купить.jpg"></a> </center> </tr> </td> </table>

<center><table height=200 border=2> <tr><td><center><img height=200 src="17.jpg"> <td> <font face="Comic Sans MS" size=6 > <center> Зимняя куртка 1634 </center> <font face="Comic Sans MS" size=4> <center>MY STYLE <br> Размер: XS, S, M, L, XL </center><font face="Comic Sans MS" size=5><center> 4199 рублей <td></center><center><a href="Обратная.htm"><img height=40 src="купить.jpg"> </a> </center> </tr> </td> </table>

<center><table height=200 border=2><tr><td><center><img height=200 src="18.jpg"><td><font face="Comic Sans MS" size=6 ><center> Зимняя куртка 1579 </center><font face="Comic Sans MS" size=4><center>MY SIZE<br> Размер: XS, S, M, L, XL </center><br> <font face="Comic Sans MS" size=5><center> 5999 рублей <td></center> <center><a href="Обратная.htm"> <img height=40 src="купить.jpg"></a> </center> </tr> </td> </table>

<center><table height=200 border=2><tr><td><center> <img height=200 src="19.jpg"><td><font face="Comic Sans MS" size=6 ><center> Кардиган 19779188 </center> <font face="Comic Sans MS" size=4><center> MY SIZE <br> Размер: XS, S, M, L, XL </center><br> <font face="Comic Sans MS" size=5><center> 1999 рублей <td></center> <center> <a href="Обратная.htm"> <img height=40 src="купить.jpg"></a> </center></tr> </td> </table>

<center><table height=200 border=2><tr> <td><center> <img height=200 src="20.jpg"> <td> <font face="Comic Sans MS" size=6 ><center> Кардиган 12873782 </center> <font face="Comic Sans MS" size=4><center> MY SIZE <br> Размер: XS, S, M, L, XL </center><br> <font face="Comic Sans MS" size=5><center> 1299 рублей <td></center> <center> <a href="Обратная.htm"><img height=40 src="купить.jpg"> </a> </center></tr> </td> </table>

<center> <table height=200 border=2> <tr><td><center> <img height=200 src="21.jpg"> <td> <font face="Comic Sans MS" size=6 ><center> Свитшот 14543382 </center> <font face="Comic Sans MS" size=4><center> MY SIZE <br> Размер: XS, S, M, L, XL </center><br> <font face="Comic Sans MS" size=5><center> 1999 рублей <td></center> <center> <a href="Обратная.htm"><img height=40 src="купить.jpg"> </a> </center></tr> </td> </table>

(смотрите: Приложение 1. Рис.8)

Глава 2.3 Детская одежда

<center><table height=200 border=2><tr><td><center><img height=200 src="22.jpg"><td><font face="Comic Sans MS" size=6 ><center> Зимняя парка 14884 </center><font face="Comic Sans MS" size=4><center> MY STYLE <br> Размер: XS, S, M, L, XL</center><br> <font face="Comic Sans MS" size=5><center> 1999 рублей <td></center> <center> <a href="Обратная.htm"><img height=40 src="купить.jpg"></a> </center></tr> </td> </table> <center> <table height=200 border=2>  <tr><td> <center><img height=200 src="27.jpg"> <td> <font face="Comic Sans MS" size=6> <center> Пижама 163479654 </center><font face="Comic Sans MS" size=4><center> MY STYLE <br> Размер: XS, S, M, L, XL </center> <font face="Comic Sans MS" size=5><center> 399 рублей <td></center> <center> <a href="Обратная.htm"><img height=40 src="купить.jpg"></a> </center></tr> </td> </table>

<center> <table height=200 border=2><tr><td><center><img height=200 src="26.jpg"> <td> <font face="Comic Sans MS" size=6 ><center> Толстовка 1877579 </center> <font face="Comic Sans MS" size=4><center> MY SIZE <br> Размер: XS, S, M, L, XL </center><br> <font face="Comic Sans MS" size=5><center> 299 рублей <td> </center> <center> <a href="Обратная.htm"><img height=40 src="купить.jpg"> </a> </center> </tr> </td> </table>

<center> <table height=200 border=2> <tr><td><center><img height=200 src="23.jpg"> <td> <font face="Comic Sans MS" size=6 ><center> Пижама 197791899 </center> <font face="Comic Sans MS" size=4><center> MY SIZE <br> Размер: XS, S, M, L, XL </center><br> <font face="Comic Sans MS" size=5><center> 699 рублей <td></center> <center> <a href="Обратная.htm"><img height=40 src="купить.jpg"></a> </center></tr> </td> </table>

<center> <table height=200 border=2><tr> <td><center> <img height=200 src="24.jpg"> <td> <font face="Comic Sans MS" size=6 ><center> Свитшот 128763782 </center> <font face="Comic Sans MS" size=4><center> MY SIZE <br> Размер: XS, S, M, L, XL </center><br> <font face="Comic Sans MS" size=5><center> 499 рублей <td></center><center><a href="Обратная.htm"><img height=40 src="купить.jpg"> </a> </center></tr> </td> </table>

<center> <table height=200 border=2> <tr> <td><center> <img height=200 src="25.jpg"> <td> <font face="Comic Sans MS" size=6 ><center> Толстовка 14543382 </center> <font face="Comic Sans MS" size=4><center> MY SIZE<br> Размер: XS, S, M, L, XL </center><br> <font face="Comic Sans MS" size=5><center> 999 рублей <td></center><center><a href="Обратная.htm"><img height=40 src="купить.jpg"> </a> </center></tr> </td> </table>

(смотрите: Приложение 1. Рис 9)

Глава 2.4 Карта сайта

<center><table height=120 border=0><tr><td></center>

<font face="Comic Sans MS" size=7> <a href="главная.htm">Главная</a><br>

<a href="женскаяодежда.htm">Женская одежда</a><br>

<a href="мужскаяодежда.htm">Мужская одежда</a><br>

<a href="детскаяодежда.htm">Детская одежда</a><br>

<a href="картасайта.htm">Карта сайта</a><br></center></td> </tr> </table>

(смотрите: Приложение 1. Рис.10)

 

 

 

Заключение

Цель моей работы - создание сайта на языке программирования HTML.

Можно работать на Web без знания языка HTML, так как тексты HTML могут создаваться различными специальными редакторами и конвертерами. Писать непосредственно на HTML нетрудно. Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или производят плохой HTML код, который не работает на различных платформах.

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML вероятнее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, Вы сможете создавать документы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, предоставляемый Netscape Navigator, Internet Explorer или некоторыми другими программами. Работа с HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только когда это действительно необходимо. HTML был написан вручную.

 




⇐ Предыдущая123Следующая ⇒






Последнее изменение этой страницы: 2018-06-01; просмотров: 200.

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