МЕТОДИЧЕСКИЕ УКАЗАНИЯ К ПРАКТИЧЕСКИМ ЗАНЯТИЯМ Средства создания и сопровождения сайта образовательной организации на языке HTML. (ч.I, ч. II)

Государственное автономное профессиональное образовательное учреждение самарской области «Поволжский строительно-энергетический колледж им. П. Мачнева»



МЕТОДИЧЕСКИЕ УКАЗАНИЯ
ДЛЯ СТУДЕНТОВ ПО ВЫПОЛНЕНИЮ
ПРАКТИЧЕСКИХ ЗАНЯТИЙ

по информатике

Тема: Средства создания и сопровождения сайта образовательной организации на языке HTML. (ч.I, ч. II)


ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 1
13 REF содержание \h \* MERGEFORMAT 14 15
Тема: Средства создания и сопровождения сайта образовательной организации (на языке HTML) Часть 1.
Продолжительность: 2 часа.
Цель работы: изучение простейшего способа создания HTML-документа в Блокноте, знакомство с языком гипертекстовой разметки и его главными элементами: тегами, изучение структуры HTML-документа, подготовка графического файла с информацией для вывода на Web-странице.
Краткие теоретические, справочно-информационные и т.п. материалы по теме занятия
Каждая web-страница хранится в файле, расширение которого .html. Самый простой способ создать файл с расширением . html в Блокноте.
В поле Имя Файла надо прописать имя с нужным расширением через точку, как показано на рисунке:

Если файл с расширением .html открыть двойным щелчком, то он откроется не в Блокноте а в браузере.
Файл в браузере не редактируется, поэтому чтобы редактировать его необходимо открывать по правой кнопке: в контекстном меню выбрать команду Отрыть с помощью.
Web-страница, кроме текста, может содержать самую разную информацию: рисунок, звук, видео. Графические, видео, звуковые и тому подобные файлы хранятся в одной папке с запускающим файлом. Общепринято ему давать имя Index.html, по которому его узнают в папке среди других файлов.
То есть Web - страничка это не один файл, а целая папка, поэтому принято создавать папку, в которою потом сохраняют все файлы, необходимые для воспроизведения Web – странички в браузере.
Web – сайт – это несколько страниц объединённых не только тематически, но и гиперссылками. Среди всех страниц одна является главной: с неё по главному меню можно прейти ко всем остальным, а с остальных вернуться назад.
Для того чтобы информация в браузере отображалась на экранах красиво с эффектами и содержала рисунки звук, видео и т.п. используется язык гипертекстовой разметки Hiper Text Markup Language (HTML) . Главный элемент этого языка – теги.
Тег - это ключевое слово, обозначающее основную функцию тега, заключённое в пару угловых скобок <...>.
Большинство тегов являются парными. Открывающий тег начинает какое-нибудь действие, закрывающий прекращает его. В закрывающем теге перед ключевым словом добавляется знак /.
Применяемое оборудование и ПО: Блокнот, браузер
Задание 1: создайте файл Index.html с помощью Блокнота с текстом, как на рисунке, который мы будем использовать в качестве запускающего Web – страницу:

Для выполнения задания выполните действия:
Создайте папку МояСтр, в которой будут размещаться все необходимые файлы.
Откройте Блокнот и наберите текст.
Сохраните файл, задав ему нужное имя и расширение Index.html.
Закройте файл Index.html.
Просмотрите файл в браузере - для этого просто откройте его двойным щелчком, обратите внимание:
что текст нельзя редактировать.
что абзацы на соблюдаются и текст идет сплошной строкой
Откройте файл в Блокноте и замените «Это Я» на «Это МЫ». Сохраните.

Задание 2: изучение структуры HTML-документа и формирование структуры в документе Index.html.
Любой HTML-документ имеет одинаковую структуру.
Весь документ заключается в контейнер тегов
Текст, помещенный в , заменяет системную информацию в заголовке браузера<br /><br /><H1></Н1>, <H6></Н6><br />Заголовок в тексте от самого крупного <H1> до самого мелкого <H6><br /><br /><P></P><br />Оформление абзацев в тексте<br /><br /><IMG SRC=" "><br />Внесение в документ изображений. Обязательный атрибут – SRC (SouRCe – источник). В кавычках прописывается либо путь к графическому файлу, либо URL-адрес<br /><br /><marquee></marquee><br />Бегущая строка<br /><br />Действие тега детализируется с помощью атрибутов (свойства тега). Атрибуты размещают в открывающем теге. После атрибута ставят знак = и нужное значение в кавычках. Тег может иметь несколько атрибутов, которые записываются по порядку через пробел.  Например, чтобы оформить страничку желтым фоном используется атрибут bgcolor для тега body . Атрибуты размещают в открывающем теге.<br />Таблица 2: Примеры атрибутов (свойств) тегов<br />Атрибут<br /> Возможные значения<br />Действие атрибута<br />Пример использования<br /><br />align=" "<br />LEFT, CENTER, RIGHT<br />Горизонтальное выравнивание<br /><H1 align="center"> <br /><br />bgcolor=" "<br />GRAY (серый), AQUA (аквамарин), BLUE (синий), GREEN (зеленый), YELLOW (желтый) и т.п.<br />Задает цвет фона<br /><Body bgcolor="yellow"><br /><br />face=" " <br />ARIAL, COURIER и т. д. (по умолчанию используется VERDANA).<br />Задает вид шрифта<br /><Font face="arial"><br /><br />Применяемое оборудование и ПО: Блокнот, браузер<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Задание 1: Заполните таблицу (используя таблицы 1.и таблицу 2.)<br />№<br />Пошаговое оформление web-страницы<br />Используемый Тег<br />Используемый Атрибут<br /><br />Шаг 1<br />Оформление «Добро пожаловать!» в виде заголовка (второго уровня)<br /><br /><br /><br />Шаг 2<br />Оформление абзацев для фото и «Это Мы»<br /><br /><br /><br />Шаг 2<br />Оформление странички жёлтым цветом<br /><br /><br /><br />Шаг 3<br />Выравнивание объектов странички по центру<br /><br /><br /><br />Шаг 4<br />Вывод фотографии на стрничку<br /><br /><br /><br />Шаг 5<br />Вывод на закладку страницы титула ПСЭК г. Самара<br /><br /><br /><br />Шаг 6<br />Добавление бегущей строки<br /><br /><br /><br />Задание 2: Заготовленную в тетради структуру HTML-документа заполнить гипертекстом (текстом с разметкой тегами и их атрибутами)<br /><br />Сравнить с ПОДСКАЗКОЙ<br />Задание 3: наполните структуру документа Index.html гипертекстом, который позволит вашей web-страничке «жить», протестируйте полученный результат и откорректируйте.<br />Контрольные вопросы:<br />Какой тег используется для того, чтобы браузер отображал абзац в виде заголовка?<br />Какой тег используется для того, чтобы браузер отображал на экране абзацы?<br />Какой атрибут используется для выравнивания объектов ? с каким значение?<br />Какой тег используется для того, чтобы браузер отобразил вашу фотографию?<br />Какой тег используется для того, чтобы браузер отображал на закладке титульную запись?<br /><br />ПОДСКАЗКА:<br /><!DOCTYPE html> <html lang="ru-RU"> <head> <title>ПСЭК г.Самара



Добро пожаловать!



Это МЫ








Рисунок 15Root Entry