Отчет по лабораторной работе №1 по дисциплине «Webдизайн» Изучение технологий HTML и CSS
Автор: drug | Категория: Технические науки / Автоматизация | Просмотров: | Комментирии: 0 | 02-01-2013 16:40
ФГБОУ ВПО
Уфимский государственный авиационный технический университет






Кафедра геоинформационных систем












Отчет
по лабораторной работе №1
по дисциплине «Webдизайн»

Изучение технологий HTML и CSS










Уфа — 2012
Цель работы:
Приобретение навыков создания статических веб-страниц с помощью HTML и CSS.
Создать сайт по варианту задания, состоящий из четырех веб-страниц и файла CSS.

Теоретическая часть:
HTML — язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки
). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге.
Список базовых тегов
Тег предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое тега не отображается напрямую на веб-странице, за исключением тега устанавливающего заголовок окна веб-страницы.
Определяет заголовок документа. Элемент не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера. Допускается использовать только один тег на документ и размещать его в контейнере .
Элемент предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера . К такой информации относится текст, изображения, теги, скрипты javascript и т.д.
Тег является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы. Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, UniversalResourceLocator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Пример
...
Тег предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный атрибут src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег в контейнер . При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег .
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов и
. Внутри допустимо использовать следующие элементы: , , , , и .
служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега , который в свою очередь располагается внутри тега
,
,
,
Предназначен для создания одной ячейки таблицы
Тег
или .
Тег
предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег должен размещаться внутри контейнера
.

CSS (англ. CascadingStyleSheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Существует три способа включения правил CSS в страницы HTML.
1. В разделе HEAD веб-страницы может быть указан адрес отдельного файла (или нескольких файлов), содержащего правила CSS, с помощью тега LINK:

2. Правила CSS могут быть размещены непосредственно в тексте веб-страницы в разделе HEAD в парном теге style:


3. Блок объявлений без фигурных скобок может быть помещен непосредственно в значение атрибута style любого тега HTML.

Практическая часть:
Для создания и редактирования содержимого html-файла будет использована свободно распространяемая программа notepad++, а для тестирования сайта – браузер GoogleChrome 21.0.1180.89. Тема сайта – «Паводки».

Пример кода страницы index.html:

Паводки

















В городе УФЕ за последнее время паводков не наблюдается!




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











Рисунок 1 – Главная страница сайта

Все стили внутри страниц определены в одном файле, который хранится в папке “css”. Каскадные таблицы стилей позволяют хранить стили страниц централизованно, что упрощает редактирование стилей и сводит на нет необходимость редактирования каждой страницы. Содержание css файла приведено ниже.

#top_images{border:3px solid pink; width:80%; margin:0% auto; height:"241";}
#middle{ border:3px dotted orange; width:90%; margin:0% auto; }
#links{border:2px solid #9400D3; margin:0% auto; width:70%; text-align:center;}
#opis{text-align:justify;}
#site2_op{width:90% ; text-align:justify; margin:0% auto; }
h1{background-color: #9400D3; color:White; text-align:center; }
body{background-color:PowderBlue;}
p{font-family:"Times New Roman";font-size:18px; text-indent:50px;}
h2{background-color:yellow; color:red; }
h3{background-color:#9400D3; color:white; }
#pavgis{width:95%; margin:0% auto; text-align:justify;}
#hei{background-color:#00CED1; width:90%; margin:0% auto; text-align:center;}


Рисунок 2 – Паводковая ГИС




Вывод: я разработал сайт по теме «Паводки» используя html-код и каскадные таблицы стилей. При разработке сайта я старался применить различные стили. Результаты лабораторной работы приведены на рисунках, а также приведены листинг страницы и содержимое css-файла.Сочинения курсовыеСочинения курсовые