УПРАЖНЕНИЯ ДЛЯ САМОСТОЯТЕЛЬНОЙ ПОДГОТОВКИ «ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА HTML»
Упражнения для самостоятельной подготовки разработаны на основании тем рабочей программы учебной дисциплины для студентов 1 курса по специальностям: 08.02.09 «Монтаж, наладка и эксплуатация электрооборудования промышленных и гражданских зданий», 15.02.01 «Монтаж и техническая эксплуатация промышленного оборудования (по отраслям)», 21.02.01 «Разработка и эксплуатация нефтяных и газовых месторождений», 21.02.02 «Бурение нефтяных и газовых скважин»
НЕФТЕЮГАНСКИЙ ИНДУСТРИАЛЬНЫЙ КОЛЛЕДЖ
(филиал) федерального государственного бюджетного образовательного учреждения высшего образования
«Югорский государственный университет»
УПРАЖНЕНИЯ ДЛЯ САМОСТОЯТЕЛЬНОЙ ПОДГОТОВКИ
ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА HTML
для специальностей 1 курса
08.02.09 «Монтаж, наладка и эксплуатация электрооборудования промышленных и гражданских зданий»,
15.02.01 «Монтаж и техническая эксплуатация промышленного оборудования (по отраслям)»,
21.02.01 «Разработка и эксплуатация нефтяных и газовых месторождений»,
21.02.02 «Бурение нефтяных и газовых скважин»
Упражнения для самостоятельной подготовки разработаны на основании тем рабочей программы учебной дисциплины для студентов 1 курса по специальностям: 08.02.09 «Монтаж, наладка и эксплуатация электрооборудования промышленных и гражданских зданий», 15.02.01 «Монтаж и техническая эксплуатация промышленного оборудования (по отраслям)», 21.02.01 «Разработка и эксплуатация нефтяных и газовых месторождений», 21.02.02 «Бурение нефтяных и газовых скважин»
Организация-разработчик: Нефтеюганский индустриальный колледж (филиал) федерального государственного бюджетного образовательного учреждения высшего образования «Югорский государственный университет»
Разработчик: Игнатенко Екатерина Сергеевна — преподаватель НИК (филиал) ФГБОУ ВО «ЮГУ»
Порядок выполнения работы
Упражнение № 1. Знакомство со структурой HTML-документа. Применение тегов логического и физического форматирования
Упражнение № 2. Создание HTML-списков
Упражнение № 3. Создание таблиц средствами html
Упражнение № 4. Создание гиперссылок. Встраивание изображений в html-документы
Упражнение № 5. Обработка графических объектов
Упражнение № 6. Создание Веб-страниц с фреймами и формами
Упражнение №7. Работа со свойствами графических и анимационных объектов
Упражнение№ 8. Создание анимационных объектов и интерактивных форм
Упражнение№ 9. Создание тестов
Пояснительная записка
Упражнения для самостоятельной подготовки для студентов 1 курса специальностей 08.02.09 «Монтаж, наладка и эксплуатация электрооборудования промышленных и гражданских зданий», 15.02.01 «Монтаж и техническая эксплуатация промышленного оборудования (по отраслям)», 21.02.01 «Разработка и эксплуатация нефтяных и газовых месторождений», 21.02.02 «Бурение нефтяных и газовых скважин» включают в себя требования, рекомендации и упражнения по созданию визуально-грамотного веб-сайта с точки зрения дизайна и программирования.
Сайт (веб-сайт англ. website , от web — паутина, и site — «место») — это место во всемирной сети (интернете), которое имеет свой адрес, собственного хозяина и состоит из отдельных веб-страниц, которые мы видим, как одно целое.
Разработка веб-сайта — трудоёмкая работа, которая должна содержать в себе идею, тематическую направленность, удобную навигацию, упорядоченность. Одним из важных составляющих разработки веб-сайта является язык HTML.
HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами.
Цель проведения работ является разработка отдельных страниц и полноценного веб-сайта полученных знаний в процессе освоения материала раздела дисциплины.
Задачами раздела «Язык разметки гипертекста HTML» являются:
знание основных определений, тегов, и других основных элементов, способствующих созданию удобного в использовании веб-сайта;
умение правильно сформулировать свои творческие идеи и применять их на практике;
развитие самостоятельного творческого подхода к веб-дизайну
В результате изучения раздела «Язык разметки гипертекста HTML» обучающийся должен знать:
правила построения простейших веб-страниц, и объединение их в веб-сайт;
основные действия и элементы, способствующие придать будущему веб-сайту декоративность и гармоничность.
В результате изучения раздела «Язык разметки гипертекста HTML» обучающийся должен уметь:
выполнять расчеты с использованием прикладных компьютерных программ;
использовать технологии сбора, размещения, хранения, накопления, преобразования и передачи данных в профессионально ориентированных информационных системах;
обрабатывать и анализировать информацию с применением программных средств и вычислительной техники;
усовершенствовать собственно разработанный сайт, добавляя новые приемы форматирования, изученные в последующих разделах дисциплины «Интернет и веб-дизайн»;
осуществлять выбор средств и методов для решения поставленных профессиональных задач.
Порядок выполнения работы
записать название работы, ее цель в тетрадь;
выполнить основные задания в соответствии с ходом работы;
выполнить дополнительные задания (при наличии).
Критерии оценки работ
Наличие оформленной цели выполняемой работы, выполнение количества заданий, указанных в критериях к каждой самостоятельной работе с указанием соответствующей оценки.
Этапы выполнения упражнений по HTML
В своей папке создать отдельную папку для файлов сайта.
Открыть программу Блокнот (Пуск – Все приложения – Стандартные Windows – Блокнот)
Написать в нем текст (код) программы
Сохранить код программы в своей папке (пример: p 1 z 1. html и т.п.)
Перейти в эту папку содержащую код программы.
Документ должен иметь значок формата браузера Internet Explorer или в формат любого другого браузера.
Открыть этот документ. (Откроется программа-браузер с готовым видом вашей программы).
Если нужно внести изменения в документ, то выполнить:
Перейти в папку содержащую код программы
Правой кнопкой мыши щелкнуть по странице, в которой вы планируете что-то изменить (Открыть с помощью – Блокнот)
Внести необходимые изменения и сохранить файл. Проверить результат
Упражнение № 1. Знакомство со структурой HTML -документа. Применение тегов логического и физического форматирования
Цель: научить применять теги логического и физического форматирования при создании Веб-страниц.
На оценку 3 необходимо выполнить задания с 1 по 8
На оценку 4 необходимо выполнить задания с 1 по 12
На оценку 5 необходимо выполнить задания с 1 по 14
Задание № 1. Создание простейшего HTML-документа
Это мой первый HTML-документ!
Задание № 2. Использование тега
< TITLE >Расшифровка аббревиатур с помощью тега ACRONYM
HTML один из наиболее популярных и распространенных на сегодня языков разметки текста, используемый для создания Веб-сайтов.
Задание № 3. Выделение текста курсивом
< BODY >Тег используется для <ЕМ>интонационного выделения определённого текстового фрагмента . Браузерами отображается курсивом.
Задание № 4. Использование тегов H 1>
Задание № 5. Использование тега
Для выделения фрагментов текста, на которых необходимо акцентировать внимание пользователя, используется тег STRONG.
Задание № 6. Использование параметра FACE тега FONT >
Задание № 7. Использование всех параметров тега FONT >
ЭтоттекстбудетпоказанОДНИМиз 3- хуказанныхшрифтов , чернымцветомиразмером «2»
Задание № 8. Одновременное использование нескольких тегов физического форматирования
< HEAD > < TITLE >Одновременное использование нескольких тегов физического форматирования
< FONT FACE , " Arial " COLOR SIZE ="3">В этом тексте использовано < U >три различных тега < B >физического форматирования.
Задание № 9. Использование различных типов выравнивания
<Р>При создании HTML-документа для обозначения абзаца используется специальный тег P, который разделяет фрагменты текста вертикальным отступом.
<Р ALIGN="CENTER">Такой тип выравнивания подходит для заголовков документов.
<Р ALIGN="RIGHT">Двойной перевод строки в данном случае не поможет: браузер, интерпретируя код, не воспримет двойной отступ как команду создания абзаца.
<Р ALIGN="JUSTIFY">Значение JUSTIFY стало поддерживаться браузерами сравнительно недавно, однако во многих случаях именно этот тип выравнивания подходит для работы с тестом.
Задание № 10. Использование тегов форматирования текста внутри тега
< FONT FACE SIZE ="3">При наборе текста в каком-нибудь текстовом редакторе (Microsoft Word , WordPerfect и др.) для обозначения абзаца мы используем клавишу <Enter>. Такое действие даёт программе команду обособить < U >один фрагмент текста от другого, задав < FONT COLOR > < BIG >«красную строку»
Задание № 11. Создание отступов
Принаборетекставкакого — нибудьтекстовомредакторе (Microsoft Word, WordPerfect др .) для обозначения абзаца мы используем клавишу <Enter>
Taкoe действие дает программе команду обособить один фрагмент текста от другого, задав «красную строку».
Задание № 12. Использование тега принудительного переноса строки BR >
< TITLE >Использование тега принудительного переноса строки
Что ищет он в стране далёкой?
Что кинул он в краю родном?
Задание №13. Повторите страницу по образцу
Задание №14. Повторите страницу по образцу
Упражнение№ 2. Создание HTML -списков
Цель: научить создавать списки посредством применения основных тегов.
На оценку 3 необходимо выполнить задания с 1 по 7
На оценку 4 необходимо выполнить задания с 1 по 8
На оценку 5 необходимо выполнить задания с 1 по 9
Задание № 1. Пример нумерованного списка
<НЗ>Пример нумерованного списка
< FONT FACE > < B >Классификация прикладных программных средств
Задание № 2. Пример нумерованного списка с разрывом последовательности
<НЗ>Пример нумерованного списка
<В>Классификация прикладных программных средств:
Задание № 3. Примеры использования разных типов нумерованного списка
< TITLE >Примеры использования разных типов нумерованного списка