Создание Web-сайта

Знакомство с основными принципами построения Web-сайтов. Рассмотрение этапов создания простой страницы HTML. Анализ способов форматирования сайтов. Общая характеристика видов списков: маркированные, нумерованные. Особенности таблиц каскадных стилей.

Рубрика Программирование, компьютеры и кибернетика
Вид курсовая работа
Язык русский
Дата добавления 18.07.2014
Размер файла 2,5 M

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Размещено на http://www.allbest.ru/

Создание Web-сайта

Введение

Интернет стал неотъемлемой частью нашей жизни. Сегодня можно не выходя из дома оплатить коммунальные услуги, заказать продукты питания, пополнить счет мобильного телефона, общаться с друзьями, дальними родственниками, коллегами, пересылать различные файлы, документы и многое другое.

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

В этой работе я пытался создать свой сайт при помощи языка разметки гипертекста HTML. На первый взгляд этот язык может показаться довольно сложным, однако он является самым простым способом построения персонального сайта, на котором можно выложить любую информацию.

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

1.Создание HTML страницы

1.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 width=400 height=100 BGCOLOR=#CCCC99 colspan=2> Курсовая работа. Интернет-магазин одежды</TD>

<TD WIDTH=1 HEIGHT=80 BGCOLOR=#FFFFCC rowspan=3>BACKGROUNDRIGHT</TD>

</TR>

<TR>

<TD WIDTH=300 HEIGHT=250 BGCOLOR="#0000FE">Платья</TD>

<TD WIDTH=300 HEIGHT=250 BGCOLOR=#66CC66>Юбки</TD>

</TR>

<TR>

<TD WIDTH=300 HEIGHT=250 BGCOLOR=#FF9999>Майки</TD>

<TD WIDTH=300 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/имя картинки" width=120 height=130> Если не указывать размер картинки, то по умолчанию она будет вставлена на сайт своего реального размера. Если картинка лежит в той же папке, где и файлы сайта, как на картинке слева, то в этом случае, код для вставки картинки пишется так:

<img src="имя картинки" width=120 height=130>

Для выравнивания картинок применяется атрибут ALIGN. Этот атрибут применяется со значениями:

ALIGN=right - картинка будет прижата к правому краю,а текст будет располагаться слева от картинки.

ALIGN=left - картинка будет располагаться слева, а текст будет справа от картинки.

ALIGN=top - текст будет располагаться сверху.

ALIGN=middle - текст будет располагаться посредине.

ALIGN=bottom - текс будет располагаться под картинкой.

Следующие атрибуты, которые применяются к картинкам это VSPACE и HSPACE VSPACE=5 - вертикальный отступ картинки от края

HSPACE=5 - горизонтальный отступ от края. И наконец, атрибут ALT - это подсказка, при наведении курсора к картинке.

Любую картинку или изображение можно сделать фоном. Сейчас в нашей виртуальной страничке сайта, в ячейке для шапки, картинку сделаем фоном. В отличии от картинки, на которой нельзя писать текст, он может располагаться только по сторонам - справа, слева и т.д. На фоновой картинке можно писать текст в любом месте (Рис.6).

<HTML>

<HEAD>

<TITLE>Курсовая работа:Интернет-магазин одежды</TITLE>

</HEAD>

<BODY>

<BODY>Курсовая работа:Интернет-магазин одежды</BODY>

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>

<TR>

<TD WIDTH=175 HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>

<TD width=400 height=100 BGCOLOR=#CCCC99 colspan=2> Курсовая работа. Интернет-магазин одежды</TD>

<TD WIDTH=175 HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>

</TR>

<TR>

<TD WIDTH=300 HEIGHT=250 BACKGROUND="imagesweb/platiya.jpg" align=center>Платья</TD>

<TD WIDTH=300 HEIGHT=250 BACKGROUND="imagesweb/ubki.jpg" alt="ЮБКИ" align=center>Юбки</TD>

</TR>

<TR>

<TD WIDTH=300 HEIGHT=250 BACKGROUND="imagesweb/maiki.jpg" align=left>Майки</TD>

<TD WIDTH=300 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 WIDTH=175 HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>

<TD width=400 height=100 BGCOLOR=#FFFFF colspan=2> Курсовая работа. Интернет-магазин одежды</TD>

<TD WIDTH=175 HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>

</TR>

<TR>

<TD WIDTH=300 HEIGHT=250 BACKGROUND="imagesweb/platiya.jpg" align=center>

<a href="platiya.html">ПЛАТЬЯ</a></TD>

<TD WIDTH=300 HEIGHT=250 BACKGROUND="imagesweb/ubki.jpg" alt="ЮБКИ" align=center>

<a href="ubki.html">ЮБКИ</a></TD>

</TR>

<TR>

<TD WIDTH=300 HEIGHT=250 BACKGROUND="imagesweb/maiki.jpg" align=left>

<a href="maiki.html">МАЙКИ</a></TD>

<TD WIDTH=300 HEIGHT=250 BACKGROUND="imagesweb/jinsi.jpg" align=center>

<a href="jeans.html">джинсы</a></TD>

</TR>

</TABLE>

</BODY>

</HTML>

Рисунок 7 - Страница с платьями

<<HTML>

<HEAD>

<TITLE>Курсовая работа:Интернет-магазин одежды</TITLE>

</HEAD>

<BODY>

<BODY>Курсовая работа:Интернет-магазин одежды</BODY>

<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0>

<TR>

<TD WIDTH=175 HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>

<TD width=400 height=100 BGCOLOR=#FFFFF colspan=2> Курсовая работа. ДЖИНСЫ</TD>

<TD WIDTH=175 HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>

</TR>

<TR>

<TD WIDTH=270 HEIGHT=420 BACKGROUND="images/jinsi1.jpg" align=left>CAMELOT</TD>

<TD WIDTH=270 HEIGHT=420 BACKGROUND="images/jinsi2.jpg" alt="ПЛАТЬЯ" align=center>WAGON</TD>

</TR>

<TR>

<TD WIDTH=270 HEIGHT=420 BACKGROUND="images/jinsi3.jpg" align=center>D&G</TD>

<TD WIDTH=270 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 WIDTH=175 HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>

<TD width=400 height=100 BGCOLOR=#FFFFF colspan=2> Курсовая работа. ЮБКИ</TD>

<TD WIDTH=175 HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>

</TR>

<TR>

<TD WIDTH=270 HEIGHT=420 BACKGROUND="images/ubka1.jpg" align=center>CAMELOT</TD>

<TD WIDTH=270 HEIGHT=420 BACKGROUND="images/ubka2.jpg" alt="ЮБКИ" align=center>WAGON</TD>

</TR>

<TR>

<TD WIDTH=270 HEIGHT=420 BACKGROUND="images/ubka3.jpg" align=center>D&G</TD>

<TD WIDTH=270 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 WIDTH=175 HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>

<TD width=400 height=100 BGCOLOR=#FFFFF colspan=2> Курсовая работа. Интернет-магазин одежды</TD>

<TD WIDTH=175 HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>

</TR>

<TR>

<TD WIDTH=300 HEIGHT=250 BACKGROUND="imagesweb/platiya.jpg" align=center>

<a href="platiya.html">ПЛАТЬЯ</a></TD>

<TD WIDTH=300 HEIGHT=250 BACKGROUND="imagesweb/ubki.jpg" alt="ЮБКИ" align=center>

<a href="ubki.html">ЮБКИ</a></TD>

</TR>

<TR>

<TD WIDTH=300 HEIGHT=250 BACKGROUND="imagesweb/maiki.jpg" align=left>

<a href="maiki.html">МАЙКИ</a></TD>

<TD WIDTH=300 HEIGHT=250 BACKGROUND="imagesweb/jinsi.jpg" align=center>

<a href="jeans.html">джинсы</a></TD>

</TR>

</TABLE>

</BODY>

</HTML>

Если нужно сослаться на какой то другой сайт в интернете, то ссылка прописывается так: <a href="http://www.beluys.com"> Перейти на сайт</a>.Текст заключенный между тегами <a></a> и будет ссылкой, нажав. на которую, перейдешь на другой сайт. Если надо открыть ссылку в новом окне, то прописывается так: <a href="http://www.beluys.com" target="_blank">Перейти на сайт</a>

Ссылкой может быть и картинка, прописывается так:

<a href="страница.html"><img srс="папка,где картинка/имя картинки"></a>.

Подведя курсор к картинке и нажав на нее, вы перейдете на указанную страницу.

Ссылка на почтовый ящик создается так:

<a href="mailto:paccbet@live.ru"> пишите на адрес</a>, щелкнув по этой ссылке, откроется почтовая программа, останется только написать текст письма и нажать кнопку «отправить».

1.6 Работа с текстом

Как видите, в тексте есть заголовок и есть подзаголовки. Если, мы будем просто набирать текст на клавиатуре, у нас получится мешанина, все предложения сольются друг с другом, Согласитесь, такой текст, читать невозможно, нужно выделить заголовок, да и абзацы должны быть в тексте.

В тегах <font> </font>, применяется и элемент FACE, задает имя шрифта (Рис. 10) например:

Рисунок 10 - Имя шрифта

Для создания заголовков в HTML, существуют теги <H> </H>, эти теги могут принимать значение от 1 до 6 (Рис. 11) например, размер шрифта, заключенный в теги :

Рисунок 11 - Жирный шрифт

Для придания размера шрифта, можно использовать теги<font> </font> со значением size (Рис. 12) но в отличии от тегов <H> </H>, шрифт не будет жирным, например:

Рисунок 12 - Размер шрифта

Так же в тегах <font> </font>, атрибутом COLOR, задается цвет шрифта, например:

<font color="#FF3300">Цвет текста будет такой</font>

<font color="#9933CC">Цвет текста будет такой</font>

<font color="#993333">Цвет текста будет такой</font>

Тегами <SPAN> </SPAN>, с элементом STYLE, задается цвет под конкретным текстом (Рис. 13) например:

Рисунок 13 - Цвет текста

Для переноса текста на другую строку применяется не парный тег <br>. Для создания абзацев существует теги <p> </p>, в которых можно задавать значения элемента ALIGN. Например:

<p align="center">Текст будет располагаться в центре страницы </p>

<p align="right"> Текст выровняется по правому краю страницы </p>

<p align="left"> Текст выровняется по левому краю страницы </p>

<p align="justify">Выровняет текст по обеим сторонам страницы </p>

Текст может быть простым, жирным, курсивом, подчеркнутым и зачеркнутым. Жирный текст заключается между тегами

<b>Жирный текст </b>.

Текст курсивом, между тегами <I>Текст жирный, курсивом </I>

Текст подчеркнутый между тегами <U>Текст жирный подчеркнутый</U>

Текст зачеркнутый между тегами <STRIKE> Текст зачеркнутый</STRIKE>

1.7 Списки

Списки бывают маркированные и нумерованные. Маркированные списки оформляются тегами <UL></UL>. Между этими тегами пишутся теги <LI></LI>, внутри которых, пишется элемент списка. К тегам <UL></UL> применяется атрибут TYPE=".." со значениями Square - квадратик, Circle - незакрашенный кружок, Disk - закрашенный кружок. Например, чтобы список был как на рисунке ( Рис. 14,а ) код будет таким:

<UL TYPE="square">

<li>Художественная литература</li>

<li>Техническая литература</li>

<li>Другая литература</li>

</UL>

Если изменим значение TYPE="circle", список будет выглядеть так (Рис. 14, б)

Значение TYPE="disk", маркировка списка будет такой (Рис. 14, в)

Нумерованные списки оформляются тегами <OL></OL> так же со значениями в атрибуте TYPE="..", в котором указывается, как будет пронумерован список, по умолчанию, нумерованный список оформляется арабскими цифрами (Рис. 14, г)

Если в код добавит атрибут со значением TYPE="A" (Рис. 14, д)

Соответственно, если поставить маленькую букву a, то нумерация всего списка будет маленькими буквами, если поставить <OL TYRE="I">, то список будет пронумерован римскими цифрами (Рис. 14, е)

Списки могут быть и вложенными, например (Рис. 14, ж)

Рисунок 14 - Виды списков

1.8 Таблица каскадных стилей

форматирование сайт таблица каскадный

Таблица каскадных стилей представляет собой набор правил для оформления различных элементов страницы. Применяя CSS можно для каждого элемента страницы прописать свой стиль, такие как цвет текста, размер и расположение шрифта, как будет выглядеть меню. Описание стилей размещается между тегами <HEAD> и </HEAD> в тегах <STYLE> и </STYLE>.

Описание стилей может располагаться как в самой странице сайта, так и в отдельном файле. Если сайт большой, в нем много страниц, описание стилей удобнее располагать в отдельной странице. Для этого открываем блокнот, сохраняем его в той же директории, где лежат файлы сайта, под именем "style.css" и начинаем прописывать элементы, например:

- html,body {margin:0px;padding:0px;} - чтобы не было промежутков между таблицей и границами экрана;

- td.menu {PADDINGLEFT:30px; PADDING-top: 30px;} - указывает отступ слева и сверху от края, для таблицы в которой расположено меню;

-.newText {PADDING-LEFT: 220px; PADDING-right: 220px; FONTWEIGHT:bold; FONT-SIZE: 16px; FONT-FAMILY:arial, verdana, sans-serif; color: black} - это описание стиля для бегущей строки, ее можете вставлять по желанию, если она не нужна удалите ее;

-p { padding-left:0px; padding-right: 15px; } - указывает границы текста помещенного в теги <p>;

-.Nav2 { COLOR: #000000; text-align:middle; font-weight: bold; } - Расположение и цвет текста класса Nav2,в данном примере цвет черный, текст жирный, располагается посредине;

-.Nav2 A:link { COLOR: #000000; text-decoration: none; font-weight: bold; }- Цвет ссылки, text-decoration: none: - означает, что ссылка не будет подчеркнутой, если вместо "none" написать "underline" ,ссылка будет подчеркнутой;

- .Nav2 A:visited { COLOR: #000 text-decoration: none; font-weight: bold; } - цвет и шрифт посещенной ссылки;

- .Nav2 A:hover { COLOR: #DC143C; text-decoration: none font-weight: bold;} - Цвет ссылки при наведении на нее курсора.

Теперь сохраняем файл style.css, а в странице сайта между тегами<HEAD> и </HEAD> добавляем ссылку на файл CSS, в коде страницы сайта это будет выглядеть так:

<HTML>

<HEAD>

<TITLE> </TITLE>

<LINK href="style.css" type=text/css rel="stylesheet">

</HEAD>

<BODY>

Если у вас одна или несколько страниц сайта, стили можно прописывать в самой странице сайта так:

<HTML>

<HEAD>

<TITLE> </TITLE>

<STYLE type="text/css">

<!--

Здесь будет само описание стилей

-->

</STYLE>

</HEAD>

<BODY>

1.9 Оптимизация структуры сайта

Структура сайта, это правильное формирование опубликованных материалов, разделение их на разделы и категории, расположение файлов сайта, создание удобного меню и др.

Если на вашем письменном столе нет выдвижных ящиков, куда можно складывать документы, то очень скоро, вы перестанете ориентироваться в них. То же самое и с компьютером, единственное отличие состоит в том, что компьютер обладает более гибкими возможностями. Например, вместимость выдвижных ящиков письменного стола ограничена, а «выдвижные ящики» компьютера могут быть расположены по Вашему усмотрению и в них поместятся все ваши документы.

Посмотрите на свой письменный стол, и вы убедитесь, что там хранятся разные вещи: письма, фотографии, деловые бумаги и многое другое. Если у вас на столе порядок, то все эти вещи разложены по папкам согласно установленным вами критериям, а папки в свою очередь, разложены по выдвижным ящикам.

Так же обстоит дело и с файлами на компьютере и с файлами сайта, которые должны быть перенесены на сервер в интернете, и если сразу не навести порядок то, по мере роста сайта, добавления материалов, картинок и др., уже самому будет трудно разобраться, где что лежит и наступает время, когда приходится этот порядок наводить. А ведь уже сформированы ссылки на материалы, которые нужно будет переделывать, также страницы уже проиндексированы поисковыми системами и при перемещении потребуется переиндексация, в результате можно потерять часть уже достигнутого трафика

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

Обычно в составе сайта есть картинки, видеофайлы, скрипты, файлы для скачивания и другие, все это нужно упорядочить. Для картинок создается отдельная папка images. Если картинок много, в папке images, создайте дополнительные папки, например, картинки для оформления дизайна сайта, можно сложить в саму папку images, другие картинки можно распределить либо по видам, например смайлы в одну папку, фотографии в другую и так далее. Главное не забывайте правильно прописывать путь к картинке. Если для картинки лежащей в самой папке images путь будет <img src="images/ппп.jpg>, то для картинки лежащей в отдельной папке внутри папки images, путь будет <img src="images/имя папки/ппп.jpg>.

Отдельные папки создайте для видеофайлов, для скриптов, если есть файлы для скачивания, для них тоже создайте папку download. Внутри папки download, тоже можно создать подпапки и распределить файлы по видам, например папка для книг, другая папка для скачивания видео и т.д.

Страницы сайта разделите на разделы, основные страницы поместите в корневой папке, второстепенные страницы, разместите в отдельные папки для каждой категории.

Создайте удобное меню, обязательно в меню на главной странице должны быть ссылки на страницы второго уровня, а в меню на страницах второго уровня, должны быть ссылки на страницы третьего уровня, и на всех страницах должна быть ссылка на главную страницу. Такой порядок обеспечит вам экономию времени и нервов, и будет удобен посетителям вашего сайта.

2.Размещение и регистрация сайта в интернете

2.1 Размещение сайта в интернете

Для доступности сайта всем пользователям интернета, его нужно разместить на сервере хостинг-провайдера, предоставляющем услугу хостинга. Существует физический и виртуальный хостинг. Физический хостинг отличается от виртуального отсутствием ограничений при использовании различных технологий и работы программ.

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

Невозможно знать возможности всех хостингов, качество их обслуживания, а так как от хостинга зависит качество работы сайта, то, при выборе, остается полагаться только на рекламные объявления или советы друзей и знакомых. Поэтому я решил разместить свой сайт на хостинге Джино.

Перед тем как начать регистрацию придумайте логин и пароль. Затем перейдите на сайт Джино, кликнув по картинке, в правом верхнем углу нажмите кнопку «Зарегистрироваться».

Далее в регистрационной форме заполняете свои данные, обязательно достоверные, потому что в дальнейшем могут возникнуть проблемы, например, не добросовестные люди взломают сайт и доказать что он принадлежит нам будет невозможно. И так, ставите галочку у строки «Я ознакомлен и согласен с условиями предоставления услуг» и нажимаете «Зарегистрироваться». Откроется окошко с сообщением , что Вы зарегистрированы и можете войти в контрольную панель своего аккаунта, зайдите и ознакомьтесь с интерфейсом своего аккаунта. Одновременно на свой почтовый адрес, указанный Вами при регистрации придет письмо с данными для доступа к сайту. Десять дней дается для тестового режима без оплаты, но это Вам ничего не даст, лишняя трата времени, поэтому лучше сразу оплачивать, регистрировать домен, а потом загружать файлы сайта .

Оплату можно произвести из своей контрольной панели, в разделе Услуги, перейдя по ссылке Оплата услуг. Нам предложат различные способы оплаты, и Яндекс деньги, и Webmoney, и пластиковые карты, и почтовые и банковские переводы на выбор.

После оплаты и поступления денег на счет Джино, а Вы увидете что сумма поступила, в своем аккаунте вверху, в разделе состояние счета, будет указана перечисленная Вами сумма, и регистрации домена, созданные файлы сайта можно загружать на сервер. Есть несколько способов загрузки файлов:

- через ftp-протокол в своем браузере;

- через свою контрольную панель;

- с помощью специальных программ.

Загрузка файлов через свою контрольную панель - заходим в свою контрольную панель на хостинге Джино в раздел «Управление/Файловый менеджер» (Рис. 15).

Рисунок 15 - Контрольная панель

На странице Файловый менеджер, заходите в папку Domains (левая картинка), в которой находится папка Ваш логин.jino.ru (правая картинка), открываете эту папку (Рис. 16).

Рисунок 16 - Файловый менеджер

Пока в папке логин.jino.ru пусто, в нее надо загрузить файлы созданного вами сайта, нажимаете кнопку «Обзор». В открывшемся окошке выбора файла, выбираете папку, где лежат подготовленные файлы вашего сайта, мышкой выделяете нужную папку. Затем нажимаете кнопку «Загрузить» начнется процесс загрузки, это займет некоторое время, в зависимости от скорости интернета. Когда закончится процесс загрузки, можно набирать адрес сайта в браузере.

2.2 Раскрутка и оптимизация сайта

После того как сайт создан, страницы его оптимизированы под поисковые запросы, сайт размещен в интернете, нужно заняться его раскруткой. Ведь пока о нем никто не знает, значит и посетителей нет. Ведь любой сайт создается для посетителей.

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

У вновь созданного сайта пока нет такой авторитетности, на него нет внешних ссылок и пока нет посещаемости. Напрашивается вопрос: Как же новичку, создавшему сайт, раскрутить его и добиться хорошей посещаемости?

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

Одним из эффективных способов привлечения на ресурс посетителей, является поисковое продвижение. Для осуществления анализа соответствия страниц, структуры и содержимого ресурса требованиям поисковиков, проводится аудит сайтов.

Составляющие поискового аудита:

Подбор и анализ набора ключевых запросов (семантического ядра), по которым приходят на ресурс посетители из поисковых систем. В дальнейшем по этим запросам осуществляется раскрутка сайта. Анализ позиций сайта. Позиции сайта определяются по каждому ключевому запросу, наиболее популярных поисковиков - Yandex, Google, Rambler.

Другой способ быстро добиться посещаемости сайта, создать рекламную компанию для сайта.

Создав сайт для заработка, Вы начали заниматься бизнесом в интернете. Да, это называется бизнес. Сайт с размещенной на нем рекламой, считается коммерческим, пусть, пока он и не приносит дохода. Любой бизнес требует вложений. Для бизнеса в интернете, вложения, по сравнению с бизнесом в реальной жизни, совсем незначительные, но без них не обойтись. Таков закон - деньги делают деньги.

На самом деле рекламная компания не так уж и страшно. Можно начать с 300 рублей в компаниях Яндекс.Директ, Вegun или Google AdWords.

Новому сайту, главное быстро привлечь посетителей, чтобы люди зашли на сайт, узнали о его существовании и если сайт интересный, с полезной информацией, многие люди пришедшие с рекламы, начнут посещать его многократно, попутно давая ссылки своим друзьям и знакомым.

Назначив в рекламной компании самую низкую стоимость за клик, например в компании Вegun по 10 копеек за клик, это даст Вам 3000 посетителей , пускай из них останется на вашем сайте 1/4 часть, то есть 750 человек , пусть даже 500, которые найдут сайт интересным и начнут его посещать многократно.

Из этих 500 человек, может 50 человек кликнет на объявления размещенные на Вашем сайте. В зависимости от темы сайта, стоимость объявлений может быть от 0,1$ и выше за клик, что может дать, уже в самом начале, заработок на контекстной рекламе в размере до 5$ в день. Таким образом, можно возместить затраты на рекламу своего сайта за несколько дней.

Заключение

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

Итак, поняв принцип построения Web-страницы, изучив возможности соединения в ней различных видов информации, можно смело сказать, что Web-страницы, с их потенциалом могут применятся для различных целей.

Web-страница - это лицо той фирмы, того учреждения, человека, который разместил ее в WWW. Именно поэтому сегодня Web-дизайну уделяется такое огромное внимание, ибо от него на прямую зависит популярность того или иного информационного ресурса Сети. Недаром сейчас профессия Web-дизайнера является одной из самых высокооплачиваемых.

Человек, создающий Web-страницу, соединяет свои знания и навыки со своим творческим потенциалом. Умение творить - вот что отличает настоящего Web-дизайнера. Для того чтобы создать Web-страницу, которая бы радовала глаз, нужно сочетать в себе качества художника и программиста.

Подводя итог всему выше сказанному, хочется отметить, что HTML стал тем форматом передачи данных, который наиболее полно и качественно удовлетворяет запросы современного общества. Несомненным фактом является и то, что будущее именно за HTML.

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

Список использованных источников

1. В. Печникова. Создание Web-сайтов без посторонней помощи. - М.: ИнфоАрт, 2006

2. Й. Якобсен. Концепция разработки Web-сайтов. - М.: ИНИОН РАН, 2006.

Размещено на Allbest


Подобные документы

  • Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.

    методичка [1,9 M], добавлен 06.07.2011

  • Изучение тегов для создания списков и таблиц в HTML, основных атрибутов тегов. Практические навыки создания списков и таблиц в HTML-документах. Нумерованные, маркированные и вложенные списки, список определений. Выравнивание данных в ячейках таблицы.

    контрольная работа [322,1 K], добавлен 09.08.2014

  • История появления первого в мире сайта info.cern.ch в 1991 году. Страницы сайтов как набор текстовых файлов, размеченных на языке HTML. Использование конструктора при разработке сайтов. Создание сайта "с нуля", разработка дизайна, верстка, оформление.

    реферат [21,5 K], добавлен 26.05.2015

  • Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.

    контрольная работа [126,9 K], добавлен 18.11.2010

  • Страницы сайтов как набор текстовых файлов, размеченных на языке HTML. Виды сайтов, их классификация. Характеристика сайта: статический или динамический. Проблема безопасности web-сайта. Исследование программного обеспечения и языков программирования.

    дипломная работа [850,3 K], добавлен 11.01.2015

  • Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.

    курсовая работа [2,9 M], добавлен 12.01.2016

  • Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.

    контрольная работа [16,0 K], добавлен 19.06.2014

  • История возникновения и применение Каскадных таблиц стилей (CSS) в web-дизайне, их преимущества и отличие от HTML. Сравнительная характеристика табличной и блочной верстки. Практика дизайна сайта: создание бокового меню, всплывающего модального окна.

    курсовая работа [1,2 M], добавлен 21.06.2011

  • Рассмотрение понятий и программного инструментария, применяемых для разработки и создания Web-сайтов. Методы и способы представления на Web-страницах различных видов информации. Создание структуры файлов проекта, главной страницы и страниц номеров отеля.

    курсовая работа [3,5 M], добавлен 13.11.2022

  • Создание тематического Web-сайта с использованием гипертекстового языка разметки HTML, каскадных листов стилей CSS и языка программирования Java Script. Описание используемых тегов при его создании. Особенности разработки навигации и интерфейса сайта.

    контрольная работа [2,8 M], добавлен 02.12.2009

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.