ПРАКТИКУМ ПО ОСНОВАМ ЯЗЫКА РАЗМЕТКИ ГИПЕРТЕКСТОВ HTML Составитель: учитель информатики и ИКТ ГБОУ СОШ 411 «Гармония» с углубленным изучением английского языка Петродворцового района Санкт-Петербурга Окулова Виктория Викторовна

Оглавление Занятие 1. Создание первого HTML-документа Занятие 2. Физическое форматирование (форматирование шрифта) Занятие 2. Физическое форматирование (форматирование шрифта) Занятие 3. Использование списков при оформлении текстов. Занятие 3. Использование списков при оформлении текстов. Занятие 4. Оформление таблиц в HTML- документе. Занятие 4. Оформление таблиц в HTML- документе. Занятие 5. Графика в HTML- документе. Занятие 5. Графика в HTML- документе. Занятие 6. Гиперссылки в HTML- документе. Занятие 6. Гиперссылки в HTML- документе. 2 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие 1. Создание первого HTML-документа Знакомство со структурой HTML-документа. HTML-документ заключается в теги и. Между этими тегами два блока: - блок заголовка - содержит описание параметров, используемых при отображении документов, но не отображающихся в окне обозревателя. Например: Название страницы. - тело документа - содержит текст, предназначенный для отображения обозревателем, и теги, указывающие на способ форматирования текста, определяющие графическое оформление, задающие параметры гиперссылок. Задание: а) создать HTML-документ: Название страницы Пример страницы б) Сохранить документ в файле с именем index.html в рабочей папке. в) Просмотреть HTML-документ в обозревателе Internet Explorer. 3 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие 1. Создание первого HTML-документа Логическое форматирование. а) Оформление заголовков: n - целое число от 1 до 6, определяет уровень заголовка (1 - высокий уровень, 6 - низкий уровень). При оформлении заголовков можно использовать атрибут выравнивания - - выравнивание по левому краю - выравнивание по центру - выравнивание по правому краю б) Оформление параграфа (абзаца): или с выравниванием в) Перевод на новую строку: Задание: а) внести изменения в файл index.html так, чтобы на экране обозревателя были отображены образцы 6 уровней заголовков, три абзаца, выровненные тремя способами, четверостишие, оформленное с помощью тега перевода на новую строку. б) Сохранить новый документ в файле с именем index1.html в рабочей папке. в) Просмотреть HTML-документ в обозревателе Internet Explorer. 4 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие 2. Физическое форматирование (форматирование шрифта) а) ( )полужирное начертание ( ) курсивное начертание подчеркнутый шрифт - задание параметров шрифта. атрибут size – размер шрифта, целое число от 1 до 7, по умолчанию 3 атрибут color – цвет шрифта, название цвета по-английски или 16-ричный код (например: #FF00FF) атрибут face – название типа шрифта Атрибуты можно использовать в любом сочетании. Горизонтальный разделитель: - горизонтальная линия, разделяющая части документа, можно использовать без атрибутов или с атрибутами в любом сочетании, size – толщина линии в пикселях, width – ширина линии в пикселях, color – цвет линии (название или код цвета). 5 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие 2. Физическое форматирование (форматирование шрифта) Задание: а) создать HTML-документ (на основе файла index.html), в котором будут заданы параметры форматирования текста (например, небольшой текст на тему краеведения). б) Сохранить документ в файле с именем index2.html в рабочей папке. в) Просмотреть HTML-документ в обозревателе Internet Explorer. Пример текста: Вокзал и Bell-vue У пристани, на берегу моря, устроен с 1849 года красивый вокзал, где желающие могут иметь удобное помещение в особых комнатах. Отдельные комнаты можно иметь и в строении Bell-vue на берегу моря, вблизи вокзала. Вид на море с балконов Bell-vue вполне оправдывает это название. В продолжение летнего сезона в вокзале и Bell-vue помещается кафе-ресторан. В обширной, светлой зале вокзала устраиваются петергофскими жителями летом балы, в саду вокзала играет оркестр. 6 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие 3. Использование списков при оформлении текстов Текст с перечислением – список. Выделяют два основных вида списков – маркированный и нумерованный. Маркированный список используют, если порядок перечисления не важен, нумерованный – если порядок перечисления важен. а) Оформление маркированного списка: элемент списка элемент списка элемент списка атрибут type – вид маркера (вводится в теге ) type=circle - маркер в виде небольшой окружности type=disc- маркер в виде закрашенной окружности type=square- маркер в виде закрашенного квадратика 7 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие 3. Использование списков при оформлении текстов б) Оформление нумерованного списка: элемент списка элемент списка элемент списка атрибут type – вид нумерации (вводится в теге ) type=1 - арабская нумерация (1,2,3 …) type=I- римская нумерация заглавными буквами (I, II, III, IV) type=I- римская нумерация строчными буквами (i, ii, iii, iv ) type=A - нумерация латинскими заглавными буквами (A,B,C,D…) type=a- нумерация латинскими строчными буквами (a,b,c,d…) атрибут start=число в выбранной системе нумерации (стартовое число) Атрибуты записываются в открывающиеся теги или. 8 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие 3. Использование списков при оформлении текстов Задание: а) оформить HTML-документ (на основе файла index.html), содержащий 6 списков (см. след. слайд, расположить друг под другом) б) Сохранить документ в файле с именем index3.html в рабочей папке. в) Просмотреть HTML-документ в обозревателе Internet Explorer. 9 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Дни недели: 1.Понедельник 2.Вторник 3.Среда 4.Четверг 5.Пятница 6.Суббота 7.Воскресенье Времена года: I.Зима II.Весна III.Лето IV.Осень Летние месяцы: a.Июнь b.Июль c.Август Занятие 3. Использование списков при оформлении текстов Виды информации, воспринимаемой человеком: o Зрительная o Слуховая o Осязательная o Обонятельная o Вкусовая Виды информации, воспринимаемой компьютером: Числовая Символьная Графическая Звуковая Видео Виды компьютерных сетей: Локальные Корпоративные Региональные Глобальные 10 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие 4. Оформление таблиц в HTML-документе В практическом HTML-программировании таблицы совершенно незаменимы выравнивания элементов на экране, многоколонной верстки, наложения картинок друг на друга, для отображения на экране табличного материала. Таблица представляет собой прямоугольник, расчерченный на клетки, образующие столбцы и строки. Таблица задается командой …. Внутри этих тегов задаются строки командами …, внутри строк задаются ячейки командами …. Таким образом, по строкам задается вся структура таблицы: Атрибуты для тегов,, : border=число- толщина линии bordercolor= цвет- цвет линии bgcolor=цвет- цвет заливки фона Атрибут width=число (или %) – ширина таблицы или ячейки в пикселях 11 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие 4. Оформление таблиц в HTML-документе Задание: а) создать HTML-документ (на основе файла index.html), содержащий таблицу; б) Сохранить документ в файле с именем index4.html в рабочей папке. в) Просмотреть HTML-документ в обозревателе Internet Explorer. 12 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие 5. Графика в HTML- документе Браузеры «понимают» три графических формата – gif, jpg, png. Формат gif. Картинки в этом формате поддерживают 256 цветов. Этот формат имеет дополнительные возможности: мультипликация. Используя анимационный GIF- редактор, легко собрать простой мультик (нарисовать отдельные кадры, настроить время задержки и последовательность показа, «зациклить» кино или показывать кадры только один раз). Когда анимация готова, она записывается на диск как обычный gif- файл. В HTML нет различия в выводе на экран простого gif-файла или анимационного. Прозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательно. Прозрачный цвет задается в редакторе (GIF-редактор или FOTOSHOP) при записи файла на диск. Формат jpg. Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества. Но это отражается на увеличении объема файлов. Графические файлы желательно хранить в отдельной папке. Оформление фона: атрибут background=имя файла – для тегов,, ) Вставка рисунков: - имя файла – путь к файлу с рисунком, width – ширина рисунка в пикселях, height – высота рисунка в пикселях. 13 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие 5. Графика в HTML- документе Задание: а) Создать папку для рисунков Image; б) Скопировать в папку Image файлы с понравившимися рисунками и фонами; в) Создать html-документ следующего содержания: оформить фон страницы; в ячейки, помеченные *, вставить рисунки, указав размеры рисунка; в ячейки, помеченные +, вставить текст пояснения к соответствующим рисункам и оформить фон ячейки. г) Сохранить файл с именем index5.html в рабочей папке; д) Просмотреть результат в обозревателе Internet Explorer. 14 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие 6. Гиперссылки в HTML- документе Гипертекст – документ, содержащий ссылки на другие документы. Информация, подготовленная в виде гипертекста, это электронная информация, и работать с ней можно только на компьютере. Чаще ссылка выделяется на фоне экрана монитора с помощью изменения цвета и подчеркивания. Это гиперссылка или гиперсвязь. Гиперссылка – это выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши. Гипертекст связывает множество документов с помощью гиперссылок. На занятие будут рассмотрены способы создания гиперссылок на документы локального компьютера. Гиперссылка с одного файла на другой. Для того, чтобы броузер загрузил в свое окно новый html-документ (файл), нужно записать ссылку при помощи тега с атрибутом href=имя_файла: текст или рисунок Задание перехода к новому документу. Гиперссылка внутри одного файла. Для задания гипертекстового перехода внутри документа используют два тега. Первая команда с атрибутом href является источником перехода, а вторая с атрибутом name – приемником: текст или рисунок Задание перехода по метке. На экран выводится ссылка. Метка. Сюда броузер переходит по ссылке. На экране ничего не отображается. Метка – набор символов (латинских букв и (или) цифр). Рисунок как гиперссылка: Текст как гиперссылка: текст 15 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие 6. Гиперссылки в HTML- документе Задание: Скопировать в рабочую папку html-файлы с текстами (avia.html, avto.html, flot.html, geldor.html – см. Приложение). Создать в рабочей папке паку для изображений images. Скопировать в папку images файлы с изображениями автомобиля, самолета, корабля, паровоза (из локальной сети класса или сети Internet). Создать html-документ, состоящий из четырех картинок-ссылок на текстовые файлы, картинки расположены в таблице по две картинки в два ряда. Документ сохранить под именем index6.html в рабочей папке. В файлах-текстах создать ссылки с конца документа на начало этого же документа, а также ссылки на основной html-документ. Сохранить обновленные файлы с текстами в рабочей папке. Просмотреть результат работы в обозревателе Internet Explorer. Отформатировать файлы с текстами, используя изученные на предыдущих уроках приемы оформления шрифта и фона. 16 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Список использованных источников - самоучитель по сайтостроению видеоуроки по HTML и CSS 17 Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова