Программа спецкурса «Язык разметки гипертекста HTML».
ПРАКТИЧЕСКАЯ РАБОТА № 1
17.10.2014
Задание 1. Создание простейших файлов HTML
Чтобы создать свой файл HTML, сделайте следующее:
- Создайте папку HTML в папке Вашего класса D:\Uchebnaya\№_klassa\, в которой мы будем сохранять созданные Web-страницы.
- Запустите стандартную программу Блокнот (Notepad, Sublime Text 2, Bred0).
- Наберите в окне редактора простейший текст файла HTML:
<HTML>
<HEAD>
<TITLE>Познай Крым через HTML!</TITLE>
</HEAD>
<BODY>
Крым глазами путешественника!
</BODY>
</HTML>
- Сохраните файл под именем crimea.htm
- Для просмотра созданной Web-страницы загрузите браузер Microsoft Internet Explorer, Google Chrome или любой другой, установленный на вашем компьютере.
Убедитесь, что название Web-страницы (Познаём Крым через HTML!) отразилось в верхней статусной строке браузера, текст «Крым глазами путешественника!» отразился в рабочем поле браузера.
01.11.2014
Задание 2. Управление расположением текста на экране
Информация.
При отображении HTML-документов браузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущих подряд пробелов.
Откройте первоисточник Web-страницы – в программе Блокнот (Notepad, Sublime Text 2, или Bred 3.0), для редактирования в кодах HTML.
Внесите изменения в текст файла HTML, расположив слова «Расписание», «занятий», «на вторник» на разных строках:
<HTML>
<HEAD>
<TITLE> Познай Крым через HTML!</TITLE>
</HEAD>
<BODY>
Крым
глазами
путешественника!</BODY>
</HTML>
1. Сохраните внесённые изменения в файле crimea.htm
2. Просмотрите с помощью браузера новую полученную Web-страницу, используя клавишу F5 или с помощью команд Вид>>Обновить. Изменилось ли изображение текста на экране?
Примечание
В дальнейшем, после внесения изменений в Web-страницу, всегда выполняйте пункты 1-2 в следующих заданиях.
10.02.2015
Задание 3. Тэги перевода строки и абзаца
Информация.
Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, существует команда, которая запрещает программе браузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.
Тэг перевода строки <BR> отделяет строку от последующего текста или графики. Тэг абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзаца. Оба тэга являются одноэлементными.
1. Внесите изменения в текст файла HTML:
<HTML>
<HEAD>
<TITLE>Познай Крым через HTML!</TITLE>
</HEAD>
<BODY>
Познай <P>
Крым <BR>
через HTML!
</BODY>
</HTML>
- Сохраните внесённые изменения в файле crimea.htm
- Просмотрите с помощью браузера новую полученную Web-страницу. Как изменилось изображение текста на экране?
18.03.2015
Задание 4. Выделение фрагментов текста
Информация.
Тэги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тэга выделения фрагментов текста:
<B> … </B> для выделения полужирным,
<I> … </I> для выделения курсивом,
<U> …</U> для выделения подчеркиванием.
- Внесите изменения в файл crimea.htm:
<HTML>
<HEAD>
<TITLE>Познай Крым через HTML!</TITLE>
</HEAD>
<BODY>
<B> Крым </B><I> глазами </I> <U> путешественника!</U>
</BODY>
</HTML>
- Посмотрите новую полученную Web-страницу.
- Возможно использование комбинированных шрифтов:
<I><B>Расписание </B></I> <I>занятий</I> <U> на вторник</U>
Но при этом необходимо помнить следующее правило записи комбинированных тэгов:
<Тэг-1> <Тэг-2> … </Тэг-2> </Тэг-1> | правильная запись |
<Тэг-1> <Тэг-2> … </Тэг-1> </Тэг-2> | ошибочная запись |
11.05.2015
Задание 5. Использование стилей заголовка
Информация.
Существует два способа управления размером текста, изображаемого браузером:
- использование стилей заголовка,
- задание размера основного документа или размера текущего шрифта.
Используется шесть тэгов заголовков (от Н1 до Н6). Каждому тэгу соответствует конкретный стиль, заданный в параметрах настройки браузера. Стиль Н1 – самый крупный.
Внесите изменения в файл crimea.htm:
<HTML>
<HEAD>
<TITLE> Познай Крым через HTML!</TITLE>
</HEAD>
<BODY>
<H1> Крым </H1><I> глазами </I> <U> путешественника!</U>
</BODY>
</HTML>
Посмотрите новую полученную Web-страницу.
15.09.2015
Урок на тему: «Виды списков в HTML-документах. Тэги создания списков».
Цель:
учащиеся должны знать: понятие о гипертексте и правила работы с ним, понятие о языке разметки гипертекста, основные тэги для описания структуры HTML-файлов, основные тэги для оформления текстов в Web-страницах, способы создания HTML-файлов.
учащиеся должны понимать: назначение языка разметки гипертекста.
учащиеся должны уметь: запускать на выполнение программу-браузер, просматривать Web, создавать списки.
Оборудование урока: конспект, ПК.
- Приветствие, проверка наличия учеников.
- Опрос учащихся по предыдущей теме.
Вопросы:
Для чего необходим язык разметки гипертекста HTML?
Преимущество создания HTML-документа простейшими текстовыми редакторами
(например, Bred, Sublime Text 2, Notepad).
Что происходит, если вы допустили ошибку в написании тэга или забыли один из управляющих символов?
Какое расширение имеет HTML-документ?
Назовите программы для открытия HTМL-документов.
- Тема, задачи и цель урока.
- Ход урока
Если вам нужно разместить на странице нумерованный список (например, названий каких-то товаров), воспользуйтесь тэгом
<OL> …</OL>
Обрабатывая его, браузер будет автоматически управлять нумерацией списка, — естественно, по заранее составленному вами плану.
Исходный НТМL-код описания списка и его отображение в браузере представлены ниже:
Пример отображения:
Атрибуты и значения
Дескриптор <OL> может содержать параметр ТУРЕ, которым задается тип используемой нумерации.
А — большие латинские буквы.
а — маленькие латинские буквы.
I — большие римские цифры.
i — маленькие римские цифры.
1 — арабские цифры.
Для задания начального значения, с которого будет начинаться отсчет, предназначен параметр START.
Для ненумерованных списков (такие тоже бывают и называются маркированными) браузер для пометки элемента списка обычно использует специальные маркеры — это или небольшой кружочек (заштрихованный или не заштрихованный), или же заштрихованный квадратик.
Описание маркированного списка начинается открывающим дескриптором <UL> и завершается его парным дескриптором </UL>. Каждый элемент списка в этом случае также начинается с дескриптора <LI>. Пример описания ненумерованного (маркированного) списка и его представление в браузере приведены ниже.
Дескриптор <UL> может включать параметр ТУРЕ со значениями disc, circle или square, определяющими вид используемого маркера. По умолчанию маркер ставится в виде заштрихованного кружочка, т.е. используется значение disc. Если один список вкладывается в другой, то маркеры вложенного списка будут не заштрихованными.
В языке HTML существует еще один вариант списков — списки определений. Способ их описания с помощью дескрипторов <DL> </DL> и <DD>, а также вид этих списков в окне браузера приведены ниже.
5. Ответы на вопросы учеников.
6. Резюме. Итоги урока.
Из предыдущих тем и новой темы, рассмотренной сегодня, вы узнали, какие инструменты понадобятся начинающему Web-мастеру и зачем. Выполняя практическую работу, мы постарались создать простенький, но зато самый первый собственный НТМL-документ, и вы впервые увидели в окне браузера результаты проделанной работы. Далее обсуждались вопросы выбора и описания цвета фона Web-страницы, а также методы форматирования текста в НТМL-документах. В завершение были рассмотрены способы создания НТМL-списков и приведены примеры их различных вариантов.
7. Оценки за работу в классе:
8. Домашнее задание.
Следите за дальнейшими заданиями…
Спасибо за уроки!
Как первое знакомство с версткой веб-страниц очень полезно…
Уроки изложены грамотно, в логической последовательности, доступно в понимании, ни чего лишнего…