Курсовая работа (т): Создание Web-сайта
Создание Web-сайта
Создание Web-сайта
Введение
Интернет стал неотъемлемой частью нашей жизни. Сегодня можно не выходя из дома оплатить коммунальные услуги, заказать продукты питания, пополнить счет мобильного телефона, общаться с друзьями, дальними родственниками, коллегами, пересылать различные файлы, документы и многое другое.
Однако для работы в интернете нужны как минимум три вещи: браузер, доступ в интернет и начальные навыки построения и структуры Web-сайтов.
В этой работе я пытался создать свой сайт при помощи языка разметки гипертекста HTML. На первый взгляд этот язык может показаться довольно сложным, однако он является самым простым способом построения персонального сайта, на котором можно выложить любую информацию.
Цель курсовой работы - изучить принцип построения сайтов, выучить основные теги, применяемые при его создании, создать автономный web-сайт.
1.Создание HTML страницы
.1 Инструментарий
Для начала создадим на рабочем столе папку, в
которую будем складывать все файлы в процессе обучения. Для этого щелкаем
правой кнопкой мыши в любом месте рабочего стола, затем нажимаем «Создать» и из
выпавшего списка выберите «Папку» (Рис. 1) и даем имя папке, например - HTML.
Рисунок 1 - Создание папки
Теперь можно приступать к созданию страницы. Создать простую страницу HTML очень просто.
Открываем программу «Блокнот», «WordPad» или любой другой текстовый редактор, который есть на Вашем компьютере.
Заполняйте очень внимательно, важен каждый знак, каждая запятая, каждая кавычка, иначе может не получиться. Код можно писать как заглавными, так и маленькими буквами.
<HTML>
<HEAD>
<TITLE>Курсовая работа. Интернет-магазин одежды</TITLE>
</HEAD>
<BODY BGCOLOR="#CCCCFF"> Курсовая работа. Интернет-магазин одежды </BODY>
</HTML>
Этим кодом мы создали страницу сайта. Теперь
надо сохранить эту страницу в формате HTML. В меню текстового редактора
нажимаем «Файл» «Сохранить как..» в открывшемся окне выбираем место для
сохранения файла. У нас это рабочий стол, указываем папку в которой будет
лежать файл - это папка «HTML» нажимаем на кнопку «Открыть». Затем в строке Имя
файла пишем, например: page.html и нажимаем кнопку «Сохранить». В папке «HTML»,
в зависимости от браузера появится один из этих значков (Рис 2.)
Рисунок 2 - Ярлыки браузеров
В дальнейшем, когда будем добавлять или изменять код, в меню текстового редактора будем нажимать «Сохранить». Чтобы открыть и посмотреть на созданную страницу, нажмите на значок правой кнопкой мыши и в выпавшем списке выберите «Открыть». Страница откроется в браузере, правда пока она пустая или, если учитывать введенный текст, « Пробная страница для курсовой работы», этот текст и будет отображен на странице.
Если мы закрываем текстовый редактор в котором
писали код, чтобы открыть его вновь и продолжить работу, нажимаем на значок и в
выпавшем списке выбираем «Открыть с помощью» и из списка выберите «Блокнот».
1.2 Основные теги
Сайты создаются с помощью тегов. Открывает и закрывает страницу теги <HTML> и </HTML>, они ставятся в начале и конце страницы. Затем идут теги <HEAD> и </HEAD>, это служебные теги, между ними пишутся команды для браузера. Например, теги <TITLE> и </TITLE>, все, что написано межу этими тегами, будет отображаться при открытии страницы в самом верху браузера. Между тегами <BODY> и </BODY> помещается все содержимое страницы сайта, таблицы, тексты, картинки, в общем, все из чего состоит сайт.
Цвет страницы прописывается в теге <BODY>
атрибутом bgcolor="#CCCCFF". В кавычках обозначается код цвета, может
быть любым. Так же фоном страницы можно сделать картинку. Для этого в теге
<BODY> вместо атрибута BGCOLOR, применим атрибут BACKGROUND="images/имя
картинки"
1.3 Построение таблиц
Для форматирования сайтов применяются таблицы. Таблицы оформляются тегами <TABLE> и </TABLE>. Между ними теги <TR> и </TR>, а между тегами TR теги <TD> и </TD>. Между тегами <TD> и </TD>, помещается текст, вставляются картинки и все что будет видно на странице сайта.
Теги <TR> и </TR>, обозначают горизонтальную строку таблицы, а теги <TD> и </TD> - вертикальную колонку или ячейку.
Ниже показана строка таблицы, которая состоит из одной ячейки, в коде она будет располагаться так: <TR><TD> Строка из одной ячейки </TD></TR> (Рис.3).
Разделим эту строку на четыре ячейки (Рис. 4) и
код будет таким:
<TR>
<TD>1- ячейка</TD>
<TD>2- ячейка</TD>
<TD>3- ячейка</TD>
<TD>4-ячейка</TD>
</TR>
Рисунок 3 - Строка из одной ячейки
Рисунок 4 - Строка из нескольких ячеек
Внутри тега <TABLE> прописываются атрибуты; BORDER, CELLPADDING, CELLSPACING. В коде это будет так: <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
Рассмотрим значение этих атрибутов:
BORDER - указывает, будет ли рамка вокруг таблицы и ее размеры. Рамки можно задать любой цвет, делается это значением BORDERCOLOR="#CC6666";
CELLSPACING - указывает, будет ли пространство между ячейками таблицы и размеры этого пространства, или ячейки будут плотно прилегать друг к другу;
CELLPADDING - указывает, какой будет отступ от краев ячеек, для содержимого этих ячеек.
Таблице нужно указать размеры, ширину - WIDTH="" и высоту - HEIGHT="", а также цвет - BGCOLOR="#". Для каждой ячейки, можно задавать свой размер и цвет. Все эти значения прописываются внутри тега <TD>, так:
<TD width= 650 height=550 bgcolor="#00FFCC">
В следующем примере строку для содержимого страницы, разделим на две части, и в код этой строки между тегами <TR></TR> добавим теги <TD></TD> для левой колонки. Теперь шапка и строка для меню расположены над двумя колонками, вместо одной в первом примере, также строка низа расположена под двумя колонками, поэтому в теги этих строк добавим атрибут COLSAN=2.
Если страница будет из трех колонок, то между тегами <TR></TR>, в которых размещена средняя часть сайта, помещаем еще одну пару тегов <TD></TD>, для правой колонки, значение COLSPAN, будет равняться 3, вместо 2 в предыдущем примере, так как верх и низ сайта, расположены уже над и под тремя колонками.
В следующем коде, размеры и цвета указаны такие,
какие применялись к этой таблице. (Рис. 5)
<HTML>
<HEAD>
<TITLE>Курсовая работа: Интернет-магазин одежды</TITLE>
</HEAD>
<BODY>
<BODY>Курсовая работа: Интернет-магазин одежды</BODY>
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD WIDTH=1 HEIGHT=8 BGCOLOR=#FFFFCC rowspan=3> BACKGROUNDLEFT</TD>
<TD height=100 BGCOLOR=#CCCC99 colspan=2> Курсовая работа. Интернет-магазин одежды</TD>
<TD WIDTH=1 HEIGHT=80 BGCOLOR=#FFFFCC rowspan=3>BACKGROUNDRIGHT</TD>
</TR>
<TR>
<TD HEIGHT=250 BGCOLOR="#0000FE">Платья</TD>
<TD HEIGHT=250 BGCOLOR=#66CC66>Юбки</TD>
</TR>
<TR>
<TD HEIGHT=250 BGCOLOR=#FFFF66>джинсы</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Рисунок 5 - Отображение кода
Еще один вид таблицы, когда вертикальная ячейка
расположена вдоль нескольких или всех строк таблицы. Для такой ячейки
применяется атрибут ROWSPAN, он указывает, вдоль какого количество строк
располагается эта ячейка. В нашей таблице это 4 строки - для шапки, для меню,
центр страницы, и низ страницы, значит ROWSPAN=4.
1.4 Добавление изображений
Картинки вставляются с помощью тега <img> с атрибутом src, прописывается это так: Создаем в папке «Мои документы» новую папку и называем ее «Уроки». Внутри папки «Уроки» тоже создаем новую папку и даем ей имя, обычно папке с картинками дается имя «images», но можно назвать и по другому, в эту папку помещаем картинки, которые будем применять при создании сайта. Так же, в папку «Уроки» помещаем файлы сайта. В этом случае, код для вставки картинки пишется так: <img src="images/имя картинки"> Если у папки с картинками будет другое имя, то вместо images пишем ее имя. Так же для картинок применяются размеры, width и height, в коде будет так:
<img src="images/имя картинки" height=130> Если не указывать размер картинки, то по умолчанию она будет вставлена на сайт своего реального размера. Если картинка лежит в той же папке, где и файлы сайта, как на картинке слева, то в этом случае, код для вставки картинки пишется так:
<img src="имя картинки" height=130>
Для выравнивания картинок применяется атрибут ALIGN. Этот атрибут применяется со значениями:=right - картинка будет прижата к правому краю,а текст будет располагаться слева от картинки.=left - картинка будет располагаться слева, а текст будет справа от картинки.=top - текст будет располагаться сверху.=middle - текст будет располагаться посредине.=bottom - текс будет располагаться под картинкой.
Следующие атрибуты, которые применяются к картинкам это VSPACE и HSPACE VSPACE=5 - вертикальный отступ картинки от края=5 - горизонтальный отступ от края. И наконец, атрибут ALT - это подсказка, при наведении курсора к картинке.
Любую картинку или изображение можно сделать
фоном. Сейчас в нашей виртуальной страничке сайта, в ячейке для шапки, картинку
сделаем фоном. В отличии от картинки, на которой нельзя писать текст, он может
располагаться только по сторонам - справа, слева и т.д. На фоновой картинке можно
писать текст в любом месте (Рис.6).
<HTML>
<HEAD>
<TITLE>Курсовая работа:Интернет-магазин одежды</TITLE>
</HEAD>
<BODY>
<BODY>Курсовая работа:Интернет-магазин одежды</BODY>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>
<TD height=100 BGCOLOR=#CCCC99 colspan=2> Курсовая работа. Интернет-магазин одежды</TD>
<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>
</TR>
<TR>
<TD HEIGHT=250 BACKGROUND="imagesweb/platiya.jpg" align=center>Платья</TD>
<TD HEIGHT=250 BACKGROUND="imagesweb/ubki.jpg" alt="ЮБКИ" align=center>Юбки</TD>
</TR>
<TR>
<TD HEIGHT=250 BACKGROUND="imagesweb/maiki.jpg" align=left>Майки</TD>
<TD HEIGHT=250 BACKGROUND="imagesweb/jinsi.jpg" align=center>джинсы</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Рисунок 6 - Отображение главной страницы
1.5 Ссылки
Ссылки бывают, на внутренние страницы сайта, на определенное место, той же страницы сайта, на сайты в интернете и на e-mail. Ссылки прописываются тегами <a> и </a>, открывающий тег <а> пишется со значением href: <a href=" В этих кавычках пишется путь где лежит страница на которую ведет ссылка">Здесь пишется текст ссылки</a>.Чтобы задать ссылке нужный цвет, в теге<BODY> устанавливаем атрибут LINK="#FFFFFF" - цвет ссылки, атрибут VLINK="#FFFFFF" - цвет посещенной ссылки, атрибут ALINK="#63FFB7" - цвет ссылки при наведении на нее курсора мыши
Если страница лежит в той же папке, то путь прописывается, так как в нашем коде, если же страница лежит в другой папке, например у нас папка называется «Уроки» и в ней лежит несколько страниц сайта - «jinsi.html» , «maiki.html» , «platiya.html» и другие страницы «html» , также в этой папке может находится еще одна папка, допустим, называется «primer», в ней тоже лежат страницы, «1.html», «2.html» и т.д ссылка на эти страницы будет такая: <a href="primer/1.html">Текст ссылки</a>.
Пока что я создал только главную страницу своего сайта, сейчас аналогичным способом создам еще несколько страниц для каждой подкатегории. Так как создаваемый сайт торгового назначения, в данном случае будем продавать джинсы, майки, платья и юбки то создадим страницы для этих категорий:
Для платьев (Рис. 7);
<HTML>
<HEAD>
<TITLE>Курсовая работа:Интернет-магазин одежды</TITLE>
</HEAD>
<BODY>
<BODY link="#FFFFFF" alink="#FF6600" vlink="#FFFFFF">Курсовая работа:Интернет-магазин одежды</BODY>
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>
<TD height=100 BGCOLOR=#FFFFF colspan=2> Курсовая работа. Интернет-магазин одежды</TD>
<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>
</TR>
<TR>
<TD HEIGHT=250 BACKGROUND="imagesweb/platiya.jpg" align=center>
<a href="platiya.html">ПЛАТЬЯ</a></TD>
<TD HEIGHT=250 BACKGROUND="imagesweb/ubki.jpg" alt="ЮБКИ" align=center>
<a href="ubki.html">ЮБКИ</a></TD>
</TR>
<TR>
<TD HEIGHT=250 BACKGROUND="imagesweb/maiki.jpg" align=left>
<a href="maiki.html">МАЙКИ</a></TD>
<TD HEIGHT=250 BACKGROUND="imagesweb/jinsi.jpg" align=center>
<a href="jeans.html">джинсы</a></TD>
</TR>
</TABLE>
</HTML>
Рисунок 7 - Страница с платьями
<<HTML>
<HEAD>
<TITLE>Курсовая работа:Интернет-магазин одежды</TITLE>
</HEAD>
<BODY>
<BODY>Курсовая работа:Интернет-магазин одежды</BODY>
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>
<TD height=100 BGCOLOR=#FFFFF colspan=2> Курсовая работа. ДЖИНСЫ</TD>
<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>
</TR>
<TR>
<TD HEIGHT=420 BACKGROUND="images/jinsi1.jpg" align=left>CAMELOT</TD>
<TD HEIGHT=420 BACKGROUND="images/jinsi2.jpg" alt="ПЛАТЬЯ" align=center>WAGON</TD>
</TR>
<TR>
<TD HEIGHT=420 BACKGROUND="images/jinsi3.jpg" align=center>D&G</TD>
<TD HEIGHT=420 BACKGROUND="images/jinsi4.jpg" align=center>BABAYGA</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Рисунок 8 - Страница для джинс
<<HTML>
<HEAD>
<TITLE>Курсовая работа:Интернет-магазин одежды</TITLE>
</HEAD>
<BODY>
<BODY>Курсовая работа:Интернет-магазин одежды</BODY>
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>
<TD height=100 BGCOLOR=#FFFFF colspan=2> Курсовая работа. ЮБКИ</TD>
<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>
</TR>
<TR>
<TD HEIGHT=420 BACKGROUND="images/ubka1.jpg" align=center>CAMELOT</TD>
<TD HEIGHT=420 BACKGROUND="images/ubka2.jpg" alt="ЮБКИ" align=center>WAGON</TD>
</TR>
<TR>
<TD HEIGHT=420 BACKGROUND="images/ubka3.jpg" align=center>D&G</TD>
<TD HEIGHT=420 BACKGROUND="images/ubka4.jpg" align=center>BABAYGA</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Рисунок 9 - Страница для юбок
Теперь, когда готовы страницы, которые будут у
нас ссылками, мы соединим их с главной страницей так, чтобы при нажатии на
главной страницы ссылки, открывалась та страница, ссылку которой мы нажали. Для
этого дописываем в нашем коде дополнительные теги.
<HTML>
<HEAD>
<TITLE>Курсовая работа:Интернет-магазин одежды</TITLE>
</HEAD>
<BODY>
<BODY link="#FFFFFF" alink="#FF6600" vlink="#FFFFFF">Курсовая работа:Интернет-магазин одежды</BODY>
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>
<TD height=100 BGCOLOR=#FFFFF colspan=2> Курсовая работа. Интернет-магазин одежды</TD>
<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>
</TR>
<TR>
<TD HEIGHT=250 BACKGROUND="imagesweb/platiya.jpg" align=center>
<a href="platiya.html">ПЛАТЬЯ</a></TD>
<TD HEIGHT=250 BACKGROUND="imagesweb/ubki.jpg" alt="ЮБКИ" align=center>
</TR>
<TR>
<TD HEIGHT=250 BACKGROUND="imagesweb/maiki.jpg" align=left>