| Отчет по лабораторной работе №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" в тег ![]()
.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов
Уфимский государственный авиационный технический университет
Кафедра геоинформационных систем
Отчет
по лабораторной работе №1
по дисциплине «Webдизайн»
Изучение технологий HTML и CSS
Уфа — 2012
Цель работы:
Приобретение навыков создания статических веб-страниц с помощью HTML и CSS.
Создать сайт по варианту задания, состоящий из четырех веб-страниц и файла CSS.
Теоретическая часть:
HTML — язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки
). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге.
Список базовых тегов
Тег предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое тега не отображается напрямую на веб-странице, за исключением тега устанавливающего заголовок окна веб-страницы.
Определяет заголовок документа. Элемент не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера. Допускается использовать только один тег на документ и размещать его в контейнере .
Элемент предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера . К такой информации относится текст, изображения, теги, скрипты javascript и т.д.
Тег является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы. Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, UniversalResourceLocator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Пример...
Тег
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Элемент
. Внутри
В городе УФЕ за последнее время паводков не наблюдается!Рисунок 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-файла.
Не Пропустите:
|