Главная | Обратная связь | Поможем написать вашу работу!

Заголовки: элементы H1, H2, H3, H4, H5, H6

Стр 1 из 7Следующая ⇒

Д.В. Валько

СБОРНИК ПРАКТИЧЕСКИХ И ЛАБОРАТОРНЫХ РАБОТ ПО дисциплине

«программное обеспечение компьютерных сетей»

ЧОУ СПО «Колледж права и экономики»

Д.В. Валько

СБОРНИК ПРАКТИЧЕСКИХ И ЛАБОРАТОРНЫХ РАБОТ

ПО ДИСЦИПЛИНЕ

«ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ КОМПЬЮТЕРНЫХ СЕТЕЙ»

Челябинск, 2014

УДК 001.891

ББК 72

Автор:

Д.В. Валько – преподаватель специальных дисциплин ЧОУ СПО «Колледж права и экономики».

Рецензенты:

В.М. Чухарев – преподаватель специальных дисциплин ГБОУ СПО (ССУЗ) «Южно-Уральский многопрофильный колледж».

Ю.Р. Мухина – кандидат педагогических наук, преподаватель кафедры «Информационных технологий и систем» ЧОУ ВПО «Южно-Уральский институт управления и экономики».

Одобрено:

Цикловой методической комиссией «ИТ-дисциплин»

Протокол заседания № от «» 2014 г.

____________ Д.В, Валько, председатель ЦМК

Валько, Д.В.

Сборник практических и лабораторных работ по дисциплине «Программное обеспечение компьютерных сетей» / Д.В. Валько. – КПиЭ, 2014. – 46 с.

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

Уральский институт управления и экономики», 2014.

Содержание

Раздел 1. HTML (HyperText Markup Language)

Лабораторная работа №1 «Структура HTML-документа». 5

Лабораторная работа №2 «Работа с отступами и шрифтами». 8

Лабораторная работа №3 «Работа со списками». 11

Лабораторная работа №4 «Работа со ссылками». 13

Лабораторная работа №5 «Графика и мультимедиа». 15

Раздел 2. CSS (Cascading Style Sheets)

Практическая работа №1 «Работа с каскадными таблицами стилей». 17

Практическая работа №2 «Экспорт стилей и валидация». 22

Раздел 3. JS (JavaScript, ECMAScript)

Лабораторная работа №1 «Знакомство с синтаксисом языка». 23

Лабораторная работа №2 «Знакомство с основными операторами». 25

Лабораторная работа №3 «Условный оператор». 27

Лабораторная работа №4 «Разработка калькулятора». 28

Раздел 4. PHP (PHP: Hypertext Preprocessor)

Практическая работа №1 «Обработка данных формы». 33

Практическая работа №2 «Создание счетчика посещений». 34

Практическая работа №3 «Вычисление значения функции». 36

Практическая работа №4 «Использование массивов». 37

Практическая работа №5 «Разработка базы данных». 43

Лабораторная работа №1

«Структура HTML-документа»

Цели:

1. ознакомиться с основными понятиями: элемент, атрибут;

2. ознакомиться со структурой HTML-документа;

3. создать простейшую HTML-страничку;

4. научиться использовать комментарии.

HTML содержит типы элементов, представляющих параграфы, гипертекстовые ссылки, списки, таблицы, изображения и т.д. Каждое объявление типа элемента обычно описывает три части: начальный тег, содержимое и конечный тег.

Название элемента появляется в начальном теге (<название-элемента>) и в конечном теге (</название-элемента>). Некоторые элементы HTML допускают отсутствие конечного тега. Некоторые типы элементов HTML не имеют содержимого. Такие пустые элементы никогда не имеют конечного тега. Названия элементов всегда нечувствительны к регистру. Элементы могут иметь ассоциированные свойства, называемые атрибутами, которые могут иметь значения (по умолчанию или устанавливаемые автором). Пары атрибут/значение появляются перед конечным символом ">" начального тега элемента. Любое количество (допустимое) пар значений атрибута, разделённых пробелами, может появляться в начальном теге элемента. Они могут появляться в любом порядке. По умолчанию требуется, чтобы все значения атрибутов были ограничены с использованием двойных или одинарных кавычек, однако в некоторых случаях можно устанавливать значение атрибута без использования кавычек, но рекомендуется использовать знак кавычек даже тогда, когда можно обойтись без него. Названия атрибутов всегда нечувствительны к регистру.

Комментарии HTML имеют следующий синтаксис:

Основные теги.

Элемент HTML

Описание: определяет начало и конец HTML-документ.

Начальный тег: не обязателен

Конечный тег: не обязателен

Пример:

<HTML> ...элементы head, body и т.п. идут здесь... </HTML>

Элемент HEAD

Описание: содержит информацию о текущем документе, такую как название, ключевые слова и другие данные, не являющиеся содержимым документа.

Начальный тег: не обязателен

Конечный тег: не обязателен

Элемент TITLE

Описание: определяет заголовок страницы или название окна. Каждый документ HTML обязан содержатьэлемент TITLE в разделе HEAD. Авторы должны использовать элемент TITLE для идентификации содержимого документа. Поскольку пользователи часто обращаются к документам вне контекста, авторы должны предоставлять осмысленные заголовки. Заголовок не может содержать разметку (в том числе и комментарии).

Начальный тег: необходим

Конечный тег: необходим

Пример:

<HTML>
<HEAD><TITLE>Колледж права и экономики</TITLE> ...другие элементы заголовка... </HEAD>	В заголовке браузера отображается надпись: Колледж права и экономики.
... </HTML>

Метаданные.

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

Элемент META

Описание: Элемент МЕТА можно использовать для идентификации свойств документа (напр., автора, конечной даты использования, списка ключевых слов и т.д.) и установки значений этих свойств. Каждый элемент МЕТА определяется в разделе HEAD и определяет пару свойство-значение. Атрибут name идентифицирует свойство, а атрибут content определяет значение свойства. Например, следующее объявление устанавливает значение для свойства Author(автор): <META name="Author" content="Студент группы …">. Обычно META специфицирует ключевые слова, которые используются поисковыми машинами для повышения качества и скорости поиска. Например, следующее объявление устанавливает значения для свойства keywords (ключевые слова): <META name="keywords" content="Chelaybinsk, КПиЭ">

Начальный тег: требуется

Конечный тег: запрещён

Определения атрибутов:

name = строка – устанавливает имя свойства

content = строка – определяет значение свойства

Пример:

<HTML><HEAD>
<TITLE> Колледж права и экономики </TITLE>	В заголовке браузера отображается надпись: Колледж права и экономики.
<META name="author" content="Студент">	Автором документа является «Студент»
<META name="keywords" content="Колледж, студент, Челябинск">	Ключевые слова: Колледж, студент, Челябинск
</HEAD>... </HTML>

Элемент BODY

Описание: тело документа. В теле документа находится содержимое документа.

Начальный тег: не обязателен

Конечный тег: не обязателен

Определения атрибутов:

background = "url" (url – это строка, задающая путь в структуре каталогов до файла) – установка фоновой картинки

text = color (значение цвета может быть или 16-ричным числом (предваряемым знаком # в следующем формате #RRGGBB, где RR – градация красного цвета, GG – зеленого, BB – синего), или одним из следующих 16 названий цвета) - устанавливает цвет текста (для визуальных браузеров).

Black (Черный) = "#000000"	Green (Зеленый) = "#008000"
Silver (Серебро)= "#C0C0C0"	Lime (Известь) = "#00FF00"
Gray (Серый) = "#808080"	Olive (Оливковый) = "#808000"
White (Белый) = "#FFFFFF"	Yellow (Желтый)= "#FFFF00"
Maroon (Темно-бордовый) = "#800000"	Navy (Темно-синий) = "#000080"
Red (Красный) = "#FF0000"	Blue (Синий) = "#0000FF"
Purple (Фиолетовый) = "#800080"	Teal (Чирок) = "#008080"
Fuchsia (Фуксия) = "#FF00FF"	Aqua (Аква) = "#00FFFF"

bgcolor = color – установка цвета фона документа

Пример:

<HTML><HEAD> <TITLE> Колледж права и экономики </TITLE></HEAD>
<BODY bgcolor="white" text="#000000">	Текст на странице будет отображаться черным цветом на белом фоне.
... тело документа... </BODY></HTML>

Задания:

1. На жестком диске создать папку с именем HTML.

2. Открыть текстовый редактор "Блокнот".

3. В окне блокнота создать документ, печатающий в качестве заголовка документа название Вашей специальности.

4. Сохранить документ под именем index. html, обязательно с расширением html (или htm) в папке HTML.

5. Запустить любой из браузеров, установленный в системе, например, Internet Explorer (Пуск – Программы - Internet Explorer).

6. Используя меню Файл – Открыть, открыть в окне браузера свой файл и убедиться, что в строке заголовка напечатано название Вашей специальности.

7. Перейти в окно редактора Блокнот и добавить вывод в окне браузера «Колледж права и экономики».

8. Сохраните изменения.

9. Перейти в окно браузера. Сейчас, что бы просмотреть внесенные изменения, необходимо нажать кнопку "Обновить".

10. Используя метаданные, определить автора документа и ключевые слова: название Вашей специальности и название Вашего колледжа.

11. Установить цвет фона документа на свой вкус.

12. Установить фоновую картинку, для этого:

12.1. на жестком диске найти файл с расширением jpg или gif;

12.2. скопировать найденный файл в свою папку;

12.3. установить фоновую картинку;

13. Изменить цвет текста документа на свой вкус.

14. Сохранить результаты, так как следующие задания опираются на результаты предыдущих.

Лабораторная работа №2

«Работа с отступами и шрифтами»

Цели:

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

Заголовки: элементы H1, H2, H3, H4, H5, H6

Описание: описывают шесть уровней заголовков: от H1 (самый верхний) до H6 (самый нижний).

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

align = left|center|right|justify – выравнивание текста: left – выравнивание по левому краю, center – по центру (по умолчанию), right – по правому краю, justify – выравнивание по правому и левому краям.

Примеры:

<h1>Заголовок первого уровня</h1>	Печатается заголовок первого уровня.
<h2 align=”center”>Заголовок второго уровня</h2>	Печатается заголовок второго уровня, выровненный по центру.

Параграфы: элемент P

Описание: представляет параграф

Начальный тег: необходим

Конечный тег: не обязателен

Определения атрибутов:

align = left|center|right|justify – выравнивание текста

Примеры:

<p> Первый абзац.	Печатается первый абзац.
<p align=”left”>второй абзац.	Печатается второй абзац, выровненный по левому краю.

12 3 4 5 6 7 Следующая ⇒

Воспользуйтесь поиском по сайту: