Разработка образовательного сайта на тему “Основы создания Web-сайтов”

Автор: Пользователь скрыл имя, 17 Мая 2012 в 19:13, курсовая работа

Краткое описание

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

Оглавление

Введение 2
Глава 1. Современные интернет-технологии. 4
1.1 Web-дизайн и браузеры. 4
1.2. Язык разметки гипертекстовых страниц HTML 6
1.3. Представление текста на Web-страницах 10
1.4. Представление графики на Web-страницах 11
1.5 Инструментарий для создания Web-страниц. 12
1.5.1 HTML-редакторы. 12
1.5.2 Графические редакторы. 15
Глава 2. Разработка образовательного сайта на тему “Основы создания Web-сайтов” 18
Заключение 26
Список использованной литературы. 27

Скачать в ZIP (846.03 Кб) Сколько стоит заказать работу?
Файлы: 1 файл

курсовая 1.docx

— 878.31 Кб (Скачать)

 

        #button li #active {

                border-left: 10px solid #1c64d1;

                border-right: 10px solid #5ba3e0;

                background-color: #2586d7;

                color: #fff;

                }

 

    </style>   

   

  </head>

      

  <body bgcolor="#E3ECF3">

                    

    <div id="tabs5">   

      <table align="center">

        <tr><td> 

                 

            <ul>

              <li>

                <a href="index.html">

                  <span>Home

                  </span></a>

              </li>

              <li>

              <a href="css.html">

                <span>Css

                </span></a>

              </li>

              <li id="current">

              <a href="h1.html">

                <span>HTML

                </span></a>

              </li>

              <li>

              <a href="Book.html">

                <span>Книги

                </span></a>

              </li>

              <li>

              <a href="Stat.html">

                <span>Статьи

                </span></a>

              </li>

              <li>

              <a href="Znania.html">

                <span>Проверка знаний

                </span></a>

              </li>

              <li>

              <a href="Litra.html">

                <span>Литература

                </span></a>

              </li>  </ul>  </td>

        </tr>

      </table>                       

  </div>                  

<table align="left">

<col width=1130>

<tr>

<td>

<h1>Шаг 8. Якоря</h1>

<p>Якорем называется закладка с уникальным именем на определенном месте веб-страницы,

  для создания перехода к  ней по ссылке. Якоря удобно  применять для больших документов,

  чтобы можно было быстро  переходить к нужному разделу. </p>

<p>Для создания якоря следует вначале сделать закладку в соответствующем месте

  и дать ей имя при помощи параметра <span class="element">name</span> тега <span class="tag">&lt;А&gt;</span>

  (пример&nbsp;8.1).</p>

<p>Пример 8.1. Создание внутренней ссылки</p>

  &lt;html&gt;<br>

  &lt;head&gt;<br>

  &lt;meta content=&quot;text/html; charset=Windows-1251&quot; http-equiv=&quot;content-type&quot;&gt;<br>

  &lt;body&gt;</p>

  <p>&lt;a name=&quot;top&quot;&gt;&lt;/a&gt;</p>

  <p>...</p>

  &lt;a href=&quot;#top&quot;&gt;Наверх&lt;/a&gt;<br><br>

&lt;/body&gt;<br>

  &lt;/html&gt;</div>

<p>Между тегами>&lt;a name=&quot;top&quot;&gt; и &lt;/a&gt;

  текст не обязателен, так как требуется лишь указать местоположение перехода

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

  #, после чего идет имя  якоря, оно выбирается любое,  соответствующее тематике.</p>

<br>

<br>

<br>

</td>

</tr>

</table>                 

<table align="right">

<tr>

<td>

<div id="button">

                        <ul>

<li><a href="h1.html">основные понятия</a></li>

<li><a href="h2.html">создание HTML-документа</a></li>

<li><a href="h3.html">Особенности  HTML</a></li>

<li><a href="h4.html">Структура  HTML-кода</a></li>

<li><a href="h5.html">Теги HTML</a></li>

<li><a href="h6.html">работа с текстом</a></li>

<li><a href="h7.html">ссылки</a></li>

<li><a id="active" href="h8.html">Якоря</a></li>

<li><a href="h9.html">Изображения</a></li>

<li><a href="h10.html">Списки</a></li>

<li><a href="h11.html">Таблицы</a></li>

 

                        </ul>

</div> 

</td>

</tr>

</table>           

  </body>

</html>

Тестовые  задания на проверку пройденного  материала.

<!-- название теста -->

<center><h1>Основы HTML</h1></center>

 

 

<!-- список вопросов -->

<form charset="windows-1251" name=Q action="" method=post>

 

<table width=100% border=0 cellpadding=0 cellspacing=0>

  <tr><td colspan=2><hr width=100% size=1></td></tr>

    <tr>

    <td>Как обозначается  тег?</td>

    <td>

                      <input type=radio name=rb1 value="1" checked>&lt;ТЕГ&gt;<br>

                      <input type=radio name=rb1 value="0" >/Тег/<br>

                      <input type=radio name=rb1 value="0" >{ТЕГ}<br>

 

          </td>

    </tr>

  <tr><td colspan=2><hr width=100% size=1></td></tr>

    <tr>

    <td>Какой тег  используется для задания текста  в верхнем индексе?</td>

    <td>

                      <input type=radio name=rb2 value="0" checked>Тег &lt;li&gt; Текст &lt;/li&gt;<br>

 

                      <input type=radio name=rb2 value="1" >Тег &lt;Sup&gt;Текст &lt;/Sup&gt;<br>

                      <input type=radio name=rb2 value="0" >Тег <Sub>Текст </Sub><br>

          </td>

    </tr>

  <tr><td colspan=2><hr width=100% size=1></td></tr>

    <tr>

 

    <td>Для какого  из тегов нужен закрывающий  тег?</td>

    <td>

                      <input type=radio name=rb3 value="0" checked>Для тега &lt;Br&gt;<br>

                      <input type=radio name=rb3 value="0" >Для тега &lt;td&gt;<br>

                      <input type=radio name=rb3 value="1" >Для тега <a><br>

          </td>

 

    </tr>

  <tr><td colspan=2><hr width=100% size=1></td></tr>

    <tr>

    <td>Какой тег  используется для создания нумерованного  списка?</td>

    <td>

                      <input type=radio name=rb4 value="0" checked>Тег &lt;p&gt;<br>

                      <input type=radio name=rb4 value="1" >Тег &lt;ol&gt;<br>

 

                      <input type=radio name=rb4 value="0" >Тег &lt;ul&gt;<br>

          </td>

    </tr>

  <tr><td colspan=2><hr width=100% size=1></td></tr>

    <tr>

    <td>Какой тег  используется для переноса текста  на новую стоку?</td>

    <td>

                      <input type=radio name=rb5 value="1" checked>Тег &lt;br&gt;<br>

 

                      <input type=radio name=rb5 value="0" >Тег &lt;p&gt;<br>

                      <input type=radio name=rb5 value="0" >Тег &lt;B&gt;<br>

          </td>

    </tr>

<tr><td colspan=2><hr width=100% size=1></td></tr>

</table>

</form>

 

<!-- невидимые формы -->

<form charset="windows-1251" name=L>

 

    <input type=hidden name=l1 value="0">

    <input type=hidden name=l2 value="2">

    <input type=hidden name=l3 value="3">

    <input type=hidden name=l4 value="4">

</form>

 

<form charset="windows-1251" name=H action="" method=post>

    <input type=hidden name=h1 value="2">

    <input type=hidden name=h2 value="3">

    <input type=hidden name=h3 value="4">

 

    <input type=hidden name=h4 value="5">

</form>

 

<form charset="windows-1251" name=D action="" method=post>

      <input type=hidden name=tDtxt1 value="Вы ничего не знаете">

      <input type=hidden name=tDtxt2 value="Вам нужно изучить  все с самого начала!">

      <input type=hidden name=tDtxt3 value="Неплохо, но есть ошибки!">

      <input type=hidden name=tDtxt4 value="Вы отлично справились!">

  </form>

<!-- /три невидимые формы  -->

 

<!-- скрипт расчета результатов  тестирования -->

<script>

<!--

 

function makeDiagnosis() {

 

  tQcnt = 5;

  tDcnt = 4;

 

  summa = 0;

    for( j=0; j<document.Q.rb1.length; j++ ) { if( document.Q.rb1[j].checked ) { summa += eval(document.Q.rb1[j].value); } }

    for( j=0; j<document.Q.rb2.length; j++ ) { if( document.Q.rb2[j].checked ) { summa += eval(document.Q.rb2[j].value); } }

    for( j=0; j<document.Q.rb3.length; j++ ) { if( document.Q.rb3[j].checked ) { summa += eval(document.Q.rb3[j].value); } }

    for( j=0; j<document.Q.rb4.length; j++ ) { if( document.Q.rb4[j].checked ) { summa += eval(document.Q.rb4[j].value); } }

    for( j=0; j<document.Q.rb5.length; j++ ) { if( document.Q.rb5[j].checked ) { summa += eval(document.Q.rb5[j].value); } }

 

  dx = -1;

  for( i=0; i<tDcnt; i++ ) {

    if( summa >= eval(document.L.elements[i].value) && summa <= eval(document.H.elements[i].value) ) { dx = i; break; }

  }

 

  document.C.tDiagnosis.value = document.D.elements[dx].value;

 

}

 

// -->

</script>

<!-- /скрипт расчета результатов  тестирования -->

 

<!-- форма вывода результатов  тестирования -->

<form charset="windows-1251" name=C>

    <center>

    <input type=button name=pbSubmit value="Результаты" onClick="makeDiagnosis()">

    <br><br>

    <textarea name=tDiagnosis rows=6 cols=80 wrap></textarea>

</form>

 

<hr width=100% size=1>

 

<!-- "подвал" -->

<table width=100% border=0><tr>

    <td align=left>

            </td>

    <td align=right>

    <a href="http://tests.pp.ru/">Тесты, тесты, тесты</a>

  </td>

</tr></table>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Заключение

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

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

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

Данный сайт был разработан при  помощи простого редактора Блокнот.

На сайте представлен материал по теме "Основы создания Web-сайтов". Сайт в данный момент находится в разработке, в на этом сайте будет размещен матерал и по другим темам.

В конце изучения курса можно  выполнить тест, что бы проверить  как хорошо были усвоены знания.

Подводя итог можно сказать, что  HTLM в последнее время заменяет не только книги, но и учебники.

 

 

 

 

 

 

 

 

 

 

 

 

Список использованной литературы.

1. HTML:наглядный курс Web-дизайна.» Крамер

2. «Web-дизайн. Руководство пользователя.» Леонтьев

3. Левин «Internet» - Москва 2000.

4. Хеслоп "HTML с самого начала", СПб: Санкт-Петербург, 2000

5.www.wikipedia.ru

6. Учебник по HTML, CSS, дизайну, графике и созданию сайтов www.htmlbook.ru

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Федеральное агентство по образованию

ГОУ ВПО «Омский Государственный Педагогический университет»

 

 

 

 

 

 

 

 

 

Курсовая  работа

Тема: Разработка учебного Web-сайта.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Выполнила студентка 4 курса

Факультета информатики

                          Сыпченко Кристина

Проверил Разгоняев В.К.

 

 

 

 

 

 

Омск 2010г.

 


Информация о работе Разработка образовательного сайта на тему “Основы создания Web-сайтов”