Структура HTML-документа
Между тегами <html></html> находится текст, определяющий содержимое HTML-страницы. Все, что между этими двумя тегами интерпретируется браузером в соответствии с правилами языка HTML. Исходный текст страницы делится на заголовок (Head) и тело (Body). Заголовок описывается двумя тегами <head></head>, но впрочем, если в нем нет необходимости, его можно не описывать, тогда исходный текст будет состоять только из тела. Некоторые теги могут располагаться только в заголовке, например <meta>, <title>. Наиболее часто используемый в заголовке тег - <title></title>. Этот тег определяет название страницы. Оно пишется в верхней части окна браузера. Также в заголовке подключается таблица стилей. Тело страницы описывается тегами <body></body>. В теле страницы располагается содержательная и видимая часть документа. Здесь могут присутствовать следующие элементы: · Форматированный текст; · Графические изображения; · Таблицы; · Гиперссылки; · Тег блока <div>; · Скрипты. В подключаемой таблице стилей «style.css» для всех элементов тела страницы определены свойства, такие как цвет текста, фон блоков и другие. Для форматирования текста используются следующие теги: · <p> - параграф; · <h1> - заголовок первого уровня; · <ul> - неупорядоченный (маркированный) список; · <li> - элемент списка; · <strong> – жирный текст. Для добавления изображений используется тег <img>. Некоторые атрибуты тега: · src - URL-адрес файла с изображением; · align - выравнивание изображение относительно текста или других элементов страницы; · vspace - размер отступа от изображения по вертикали; · hspace - размер отступа от изображения по горизонтали; · width - ширина изображения; · height - высота изображения; · border - толщину рамки вокруг изображения.
Таблицы формируются при помощи тега <table>. Тегом <tr> определяется строка таблицы, тег <td> определяет отдельную ячейку в таблице. Строки, столбцы таблицы должны быть вложенными в неё. Допускается вложение одной таблицы в другую, соединение нескольких строк или столбцов. Используемые атрибуты, применимые к таблицам: · align - выравнивание таблицы относительно документа; · width - ширина таблицы; · cellspacing - расстояние между ячейками таблицы; · cellpadding - расстояние между содержимым ячейки и ее рамкой; · 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); · margin: 0; · padding: 0; · text-align: center; · color: #000000; Параметры “margin: 0;” и “padding: 0;” в данном случае используются для сброса всевозможных отступов в документе. Это необходимо для того, чтобы избежать возможных проблем с отображением сайта в разных браузерах. Основные блоки страниц сайта, для которых были заданы специальные стили в таблице стилей: 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; · Содержит резюме автора; · Отражает отношение автора к интересной ему тематике (информация о гитарах, приёмах игры на гитаре, оборудовании, необходимом для игры на электрогитаре);
· Об авторе (about_me.html); · Резюме (rezume.html); · Немного о гитарах (hobby.html); · Приёмы игры на электрогитаре (priem.html); · Оборудование (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.
Популярное: Почему двоичная система счисления так распространена?: Каждая цифра должна быть как-то представлена на физическом носителе... Почему стероиды повышают давление?: Основных причин три... ©2015-2024 megaobuchalka.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. (245)
|
Почему 1285321 студент выбрали МегаОбучалку... Система поиска информации Мобильная версия сайта Удобная навигация Нет шокирующей рекламы |