Заголовки: элементы H1, H2, H3, H4, H5, H6
Д.В. Валько
СБОРНИК ПРАКТИЧЕСКИХ И ЛАБОРАТОРНЫХ РАБОТ ПО дисциплине
«программное обеспечение компьютерных сетей»
ЧОУ СПО «Колледж права и экономики»
Д.В. Валько
СБОРНИК ПРАКТИЧЕСКИХ И ЛАБОРАТОРНЫХ РАБОТ
ПО ДИСЦИПЛИНЕ
«ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ КОМПЬЮТЕРНЫХ СЕТЕЙ»
Челябинск, 2014
УДК 001.891
ББК 72
Автор:
Д.В. Валько – преподаватель специальных дисциплин ЧОУ СПО «Колледж права и экономики».
Рецензенты:
В.М. Чухарев – преподаватель специальных дисциплин ГБОУ СПО (ССУЗ) «Южно-Уральский многопрофильный колледж».
Ю.Р. Мухина – кандидат педагогических наук, преподаватель кафедры «Информационных технологий и систем» ЧОУ ВПО «Южно-Уральский институт управления и экономики».
Одобрено:
Цикловой методической комиссией «ИТ-дисциплин»
Протокол заседания № от « » 2014 г.
____________ Д.В, Валько, председатель ЦМК
Валько, Д.В.
Сборник практических и лабораторных работ по дисциплине «Программное обеспечение компьютерных сетей» / Д.В. Валько. – КПиЭ, 2014. – 46 с.
В сборнике представлены практические и лабораторные работы по основным современным сетевым технологиям. Работы охватывают широкий круг дисциплин среднего профессионального образования в сфере информационных технологий и систем, компьютерных сетей и коммуникационных технологий.
|
|
© Издательство ЧОУ ВПО «Южно-
Уральский институт управления и экономики», 2014.
© Валько Д.В., 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”>второй абзац. | Печатается второй абзац, выровненный по левому краю. |
Дата добавления: 2020-04-08; просмотров: 324; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!