Данная практическая работа является продолжением первой практической работы, которая называлась – «Мой первый сайт». Там было отмечено, что текстовую информацию можно просто печатать в теге <body> и не применять других тегов, но браузеры будут ее отображать одной длинной строкой без всякого оформления. Посетители сайтов, скорее всего, быстро покинут такие странички, ввиду их не привлекательности.
Для оформления текстовой информации, при написании кода сайта, следует применять специальные теги, которые позволят сделать сайт удобочитаемым, а значит и более привлекательным.
Вы уже знаете о суперспособностях современного учителя?
Тратить минимум сил на подготовку и проведение уроков.
Быстро и объективно проверять знания учащихся.
Сделать изучение нового материала максимально понятным.
Избавить себя от подбора заданий и их проверки после уроков.
Просмотр содержимого документа
«Работа со шрифтами в HTML »
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ КРАСНОДАРСКОГО КРАЯ
ГБПОУ КК «КОЛЛЕДЖ ЕЙСКИЙ»
Практическая работа
Мой первый сайт
Разработал
преподаватель информатики
Караваев Игорь Григорьевич
г. Ейск
2014 г.
Практическая работа №2
Работа со шрифтами в HTML
Цели работы:
Обучающая: способствовать формированию знаний учащихся по форматированию текстовой информации на страницах сайтов.
Воспитательная: формирование системного мышления, восприятия компьютера как инструмента информационной деятельности человека.
Развивающая: развитие познавательного интереса, творческой активности учащихся.
Задачи работы:
Рассмотреть основные технологические приемы по форматированию текстовой информации при помощи тегов языка HTML.
Оборудование: ПК, текстовый редактор «Блокнот» либо «Wordpad», любой действующий браузер.
Теоретическая часть практической работы
Данная практическая работа является продолжением первой практической работы, которая называлась – «Мой первый сайт». Там было отмечено, что текстовую информацию можно просто печатать в теге body и не применять других тегов, но браузеры будут ее отображать одной длинной строкой без всякого оформления. Посетители сайтов, скорее всего, быстро покинут такие странички, ввиду их не привлекательности.
Для оформления текстовой информации, при написании кода сайта, следует применять специальные теги, которые позволят сделать сайт удобочитаемым, а значит и более привлекательным.
Что бы удобнее было контролировать процесс создания сайта, напомним из первой работы, что надо открыть два окна:
Окно приложения WordPad и напечатать там первые теги, которые необходимы для задания структуры сайта. Сохранить этот документ с расширением – HTML
Второе окно браузера, в котором открыть сохраненный текст на предыдущем шаге.
Р азместить оба эти окна на экране, как показано на рисунке:
Если кто-то выполнял первую работу, то еще лучше сразу открыть ее в редакторе и браузере.
Поскольку первая работа завершилась на шаге №19, эта работа, как продолжение, начнется сразу с шага №20.
При выполнении работы, набирайте каждый тег, заданный в очередном задании, в отдельной строке текстового редактора, сохраняйте документ командой «Сохранить» и обновляйте страницу браузера. Это позволит вам видеть действие каждого тега.
Итак, начнем:
Ход работы
Задавать нужные параметры шрифта можно различными способами. Рассмотрим, как можно изменять шрифт при помощи тега FONT, который так и переводится – шрифт.В этом теге можно применять три параметра:
Color – что означает «цвет»
Size – этот параметр задает «размер»
Face – этот параметр задает «тип шрифта».
Создание на сайте строки с цветным шрифтом, например синим: ff0000" Добро пожаловать! br
Увеличение шрифта на три пикселя: А вот как можно увеличивать шрифт!
Применение в одном теге сразу двух параметров: Изменили и цвет и размер!
Для задания типа шрифта, необходимо знать как правильно записываются названия шрифтов. Попробуем применять самые основные типы: Arial, Times new roman, Calibri:
Типшрифта - Arial
Типшрифта - Times New Roman
Типшрифта - Calibri
А для того, что бы задать несколько типов шрифтов сразу, их нужно записать через запятую: в этом случае, если у посетителя не окажется шрифта Helvetica, то текст отобразится шрифтом Times, если же и шрифта Times тоже не окажется, то тогда отобразится с помощью Verdana.
Сделайте так, что бы на сайте отобразился полностью весь текст 23 пункта.
Применение в одном теге сразу трех параметров:
Сразу три параметра: Цвет, Размер и Тип шрифта - Calibri
Для задания нужных стилей к тексту, можно использовать теги:
Жирный стиль шрифта
bТо же жирный стиль шрифтаb
моноширинныйстиль шрифта
Наклонный – то есть курсив
подчеркнутый
зачеркнутый
в нижнем индексе
в верхнем индексе
Для выравнивания текста в строках применяют тег p - абзац. Иногда этот тег называют тегом параграфа. В сочетании с параметром ALIGN.
A LIGN - определяет способ горизонтального выравнивания параграфа. Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине. По умолчанию имеет значение left. Напечатайте в коде сайта теги, приведенные на картинке:
Параметр ALIGN можно применять для тегов заголовков. Проверьте самостоятельно.
Тег HR - служит для вставки в текст горизонтальной линии. Закрывающего тега нет! Атрибуты тега:
WIDTH – определяет длину линии в пикселях или процентах от ширины окна браузера.
SIZE – толщина линии в пикселях.
ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: left – выравнивание по левому краю документа. right – выравнивание по правому краю документа. center – выравнивание по центру документа (используется по умолчанию).
NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной.
COLOR – задает цвет линии.
Н аберите в коде сайта следующий пример:
Добавьте еще одну линию красного цвета, расположенную справа и толщиной 4 пикселя.
Самостоятельно по вариантам
Выведите на своей странице сайта следующую информацию: «При помощи тегов форматирования можно вывести на страницу сайта любой текст с заданными параметрами шрифта. Основными тегами можно задать размер, стиль, цвет и тип шрифта. Кроме того, через тег “Параграф”, можно легко задать нужные режимы выравнивания текста».
Задайте для напечатанного текста параметры вывода и подчеркните горизонтальной линией, как указано по вариантам:
Вариант
Текст: полужирный, красный, по центру, размер +3
Подчеркивающая линия: длинна 45% от размеров окна, цвет синий, толщина 4 пикселя, закрашенная, по центру
ля оформления текстовой информации, при написании кода сайта, следует применять специальные теги, которые позволят сделать сайт удобочитаемым, а значит и более привлекательным.
