• Форматированный текст;

• Графические изображения;

• Таблицы;

• Гиперссылки;

• Тег блока ;

• Скрипты.

В подключаемой таблице стилей «style.css» для всех элементов тела страницы определены свойства, такие как цвет текста, фон блоков и другие.

Для форматирования текста используются следующие теги:

• <p> - параграф;

• - заголовок первого уровня;

  - неупорядоченный (маркированный) список;
  • - элемент списка;

  • <strong> – жирный текст.

  Для добавления изображений используется тег <img>.

  Некоторые атрибуты тега:

  • src - URL-адрес файла с изображением;

  • align - выравнивание изображение относительно текста или других элементов страницы;

  • vspace - размер отступа от изображения по вертикали;

  • hspace - размер отступа от изображения по горизонтали;

  • width - ширина изображения;

  • height - высота изображения;

  • border - толщину рамки вокруг изображения.

  Таблицы формируются при помощи тега <table>. Тегом <tr> определяется строка таблицы, тег <td> определяет отдельную ячейку в таблице. Строки, столбцы таблицы должны быть вложенными в неё. Допускается вложение одной таблицы в другую, соединение нескольких строк или столбцов.

  Используемые атрибуты, применимые к таблицам:

  • align - выравнивание таблицы относительно документа;

  • width - ширина таблицы;

  • cellspacing - расстояние между ячейками таблицы;

  • cell; background: #ffffff; line-height: 150%"> border - ширина рамки в пикселах;

  • border-color – цвет рамки таблицы;

  • valign - выравнивание текста в ячейке по вертикали;

  • colspan - соединение нескольких ячеек.

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

  Гиперссылка — фрагмент HTML-документа и его базовый элемент, указывающий на другой файл, который может быть расположен в Интернет и содержащая полный путь (URL) к этому файлу. Гиперссылка — для пользователя — графическое изображение или текст на сайте, в письме электронной почты или в каком-либо электронном документе, устанавливающие связь и позволяющие переходить к другим объектам Интернет.

  Для определения ссылки используется тег <a…>a>. Ссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указателем ссылки может быть слово, группа слов или изображение. Адресной частью ссылки является адрес Web-страницы, которая будет загружена при щелчке кнопкой мыши на указателе.

  Тег <div> является элементом уровня блока, служащим для выделения фрагмента документа. Целью этого выделения является управление параметрами данного фрагмента, которое выполняется с помощью стилей.

  
  

  5 Таблица стилей

  
  

  Для сайта разработан CSS-файл, так называемая таблица стилей. В нём описаны стили для каждого из блока HTML-страниц. В самом начале задаются общие параметры для всех элементов документа:

  body {

  font: 100% Verdana, Arial, Helvetica, sans-serif;

  background: url(img/bg.jpg);

  ;

  ;

  text-align: center;

  color: #000000;

  Параметры “;” и “;” в данном случае используются для сброса всевозможных отступов в документе. Это необходимо для того, чтобы избежать возможных проблем с отображением сайта в разных браузерах.

  Основные блоки страниц сайта, для которых были заданы специальные стили в таблице стилей: container, header, sidebar1, coolmenu, mainContent, footer. Для разных элементов основных блоков (заголовков, параграфов и т.д.) также заданы собственные стили.

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

  6 JavaScript

  
  

  На сайте реализованы два сценария на языке JavaScript: отключение правой кнопки мыши и часы. Сценарии реализованы в отдельных файлах с расширением “.js” и подключаются к страницам в теге <script>script> посредством использования атрибута src, значением которого является URL-адрес подключаемых файлов.

  В левом блоке сайта над блоком меню выведены цифровые часы. За вывод часов отвечает скрипт, описанный в файле timer.js:

  function timer()

  {

  var v_time=new Date()

  var hour=v_time.getHours()

  var min=v_time.getMinutes()

  var sec=v_time.getSeconds()

  var temp=""+hour

  temp+=((min<10)?":0":":")+min

  temp+=((sec<10)?":0":":")+sec

  f.time.value=temp

  setTimeout("timer()",1000)

  }

  
  

  На страницах «резюме» и «об авторе» отключена правая кнопка мыши с помощью скрипта, описанного в файле right_button.js:

  function click(){

  if(event.button==2){

  alert('Правая кномка мыши отключена для этой страницы!');

  }

  }

  document.onmousedown=click

  Заключение

  
  

  Результатом данной работы является создание сайта по заданной тематике и размещение его на сервере математического факультета КемГУ. Сайт соответствует следующим требованиям:

  • Содержит форматированный текст, таблицу, прочие основные элементы языка HTML;

  • Содержит резюме автора;

  • Отражает отношение автора к интересной ему тематике (информация о гитарах, приёмах игры на гитаре, оборудовании, необходимом для игры на электрогитаре);

  • Содержит 6 HTML-страниц:

  1. Главная (index.html);

  2. Об авторе (about_me.html);

  3. Резюме (rezume.html);

  4. Немного о гитарах (hobby.html);

  5. Приёмы игры на электрогитаре (priem.html);

  6. Оборудование (oborud.html);

  • Содержит понятную систему навигации.

  Для работы с кодом использовались программы Adobe Dreamweaver CS3 и Windows Notepad 6.1.

  Для редактирования изображений была использована программа Adobe Photoshop CS3.

  Тестирование сайта производилось в браузерах: Internet Explorer 9 beta, Internet Explorer 7.0 (portable), Mozilla Firefox 3.6.10, Google Chrome 6.0.472.63, Opera 10.63.

  
  

  Список литературы

  
  

  1. Попов Е. – Уроки по созданию сайтов http://ruseller.com/ [электронный ресурс].

  2. Морковин А. – Видеоуроки «Блочная div-вёрстка сайта» http://www.sdelaysite.com/ [электронный ресурс].

  3. Морковин А. – Видеоуроки «Основы Java Script» http://www.sdelaysite.com/ [электронный ресурс].

  4. Учебник по HTML http://www.postroika.ru/html/ [электронный ресурс].