Меню
Разработки
Разработки  /  Информатика  /  Уроки  /  8 класс  /  Конспект урока по информатике на тему "Форматирование текста на Web-странице"

Конспект урока по информатике на тему "Форматирование текста на Web-странице"

Урок поможет учащимся получить представление об форматировании текста на Web-страницах.
20.04.2014

Описание разработки

Цели урока:

помочь учащимся получить представление об форматировании текста на Web-страницах;

воспитание информационной культуры учащихся, внимательности, аккуратности, дисциплинированности, усидчивости;

развитие познавательных интересов, навыков работы на компьютере, самоконтроля, умения конспектировать.

Ход урока:

Орг. момент.

Приветствие, проверка присутствующих. Объяснение хода урока.

Проверка знаний.

Фронтальный опрос учащихся по материалу пройденному на прошлом уроке.

Теоретическая часть.

Заголовки. Размеры шрифтов заголовков задаются парами тэгов от <Н1>/Н1> (самый крупный) до <Н6>/Н6> (самый мелкий).

Шрифт. Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE=”Аriа1”), атрибут SIZE — размер шрифта (например, SIZE =4).

Атрибут COLOR позволяет задавать цвет шрифта (например, СОLОR=”blue”).

Выравнивание текста. Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALIGEN =“left”, выравнивание по правой границе: ALIGN =“right”, выравнивание по центру: ALIGN =“center”.

Горизонтальная линия. Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тега <НR>.

Абзацы. Разделение текста на абзацы производится с помощью контейнера <Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами, для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.

Форматирование текста

Существует два варианта разметки текста:

Документ не имеет форматирования, нет рисунков, ссылок и пр. Необходимые изменения добавляются по ходу: обозначение абзацев, выравнивание, форматирования текста, вставка рисунков, ссылок, таблиц.

Все форматирование указывается при наборе документа.

Размер текста, начертание, цвет

Не все теги имеются на Панели инструментов, но можно создать пользовательскую панель с часто используемыми тегами.

Поэтому необходимо знание основных, базовых тегов.

В QuantaPlus при самостоятельном наборе тегов (нужно всего лишь поставить открывающую угловую скобку «<») появляется список тегов, в котором, например, выберем FONT – тег форматирования шрифта (выбор производится клавишами «вверх», «вниз» и Enter). Затем нужно закрыть тег – «>», и если тег парный, а в данном случае это так, то закрывающий тег появится автоматически, а курсор встанет между тегами для ввода текста.

Поставим курсор после первого FONT,нажмем«пробел».

Появится список атрибутов для данного тега, рассмотрим некоторые из них:

color(цвет)выбираем из списка 1 из 16 цветов

Цвет будет записан зарезервированным словом, а также он может быть задан числом в шестнадцатеричной системе счисления.

Для вставки следующего атрибута нужно после значения (в кавычках) предыдущего поставить пробел и снова появится выбор, в котором выберем face.

face(шрифт)

название одного или В случае, если на компьютере не перечисление нескольких окажется шрифт TimesNewRoman, то шрифтов; текст будет отображаться следующим по списку шрифтом.

size(размер)

при вставке данного атрибута появляется выбор из восьми возможных размеров шрифта.

Другие значения не поддерживаются.

Например, если вы введете +5, то размер будет соответствовать +4.

Все рассмотренные атрибуты можно ввести с помощью Редактора атрибутов на Служебной панелиили вызвать окно свойств

тега комбинацией клавиш Ctrl + E.

Полную информацию смотрите в файле.

Содержимое разработки

Урок№9. Форматирование текста на Web-странице.

Цели урока:

  • помочь учащимся получить представление об форматировании текста на Web-страницах ;

  • воспитание информационной культуры учащихся, внимательности, аккуратности, дисциплинированности, усидчивости;

  • развитие познавательных интересов, навыков работы на компьютере, самоконтроля, умения конспектировать.

Оборудование:

доска, компьютер, компьютерная презентация.

План урока:

1. Орг. момент. (1 мин)

2. Проверка знаний. (5 мин)

3. Теоретическая часть. (15 мин)

4. Практическая часть. (15 мин)

5. Д/з (2 мин)

6. Вопросы учеников. (5 мин)

7. Итог урока. (2 мин)

Ход урока:

1. Орг. момент.

Приветствие, проверка присутствующих. Объяснение хода урока.

2. Проверка знаний.

Фронтальный опрос учащихся по материалу пройденному на прошлом уроке.

3. Теоретическая часть.

Заголовки. Размеры шрифтов заголовков задаются парами тэгов от /Н1 (самый крупный) до /Н6 (самый мелкий).
Шрифт. Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE=”Аriа1”), атрибут SIZE — размер шрифта (например, SIZE =4).
Атрибут COLOR позволяет задавать цвет шрифта (например, СОLОR=”blue”).

Выравнивание текста. Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALIGEN =“left”, выравнивание по правой границе: ALIGN =“right”, выравнивание по центру: ALIGN =“center”.
Горизонтальная линия. Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тега .
Абзацы. Разделение текста на абзацы производится с помощью контейнера . При просмотре в браузере абзацы отделяются друг от друга интервалами, для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.

Форматирование текста

Существует два варианта разметки текста:

1. Документ не имеет форматирования, нет рисунков, ссылок и пр. Необходимые изменения добавляются по ходу: обозначение абзацев, выравнивание, форматирования текста, вставка рисунков, ссылок, таблиц.

2. Все форматирование указывается при наборе документа.

Размер текста, начертание, цвет

Не все теги имеются на Панели инструментов, но можно создать пользовательскую панель с часто используемыми тегами .

Поэтому необходимо знание основных, базовых тегов.

В Quanta Plus при самостоятельном наборе тегов (нужно всего лишь поставить открывающую угловую скобку «», и если тег парный, а в данном случае это так, то закрывающий тег появится автоматически, а курсор встанет между тегами для ввода текста.


Поставим курсор после первого FONT, нажмем «пробел».

Появится список атрибутов для данного тега, рассмотрим некоторые из них:

• color (цвет) выбираем из списка 1 из 16 цветов

Цвет будет записан зарезервированным словом, а также он может быть задан числом в шестнадцатеричной системе счисления.

Для вставки следующего атрибута нужно после значения (в кавычках) предыдущего поставить пробел и снова появится выбор, в

котором выберем face.

• face (шрифт)внутри кавычек пишем Helvetica”



название одного или В случае, если на компьютере не перечисление нескольких окажется шрифт Times New Roman, то шрифтов; текст будет отображаться следующим по списку шрифтом.

• size (размер)

при вставке данного атрибута появляется выбор из восьми возможных размеров шрифта.

Другие значения не поддерживаются.

Например, если вы введете +5, то размер будет соответствовать +4.

Все рассмотренные атрибуты можно ввести с помощью Редактора атрибутов на Служебной панели или вызвать окно свойств

тега комбинацией клавиш Ctrl + E.

Веб-редактор также поддерживает вставку тегов:

• заголовка с первого до пятого уровня, уровень заголовка устанавливается числом после буквы H

• наклонное начертание текста (курсив, italic), в Quanta Plus используется тег

• полужирное начертание (bold), в Quanta Plus – тег

• подчеркивание (underline) uu

Замечание: на панели инструментов в Quanta Plus v.3.5.8 у тегов и при наведении курсора мыши на кнопки перепутаны подсказки.

При наборе текста вместе с тегами сначала выбирают нужный на панели инструментов (при этом курсор установится между открывающим и закрывающим тегами), а затем вводят текст. Если же текст уже готов, как в нашем случае, и нам надо разметить, т.е. указать его форматирование, то нужно выделить часть текста и нажать соответствующую кнопку на панели инструментов – теги расставятся автоматически.

Выравнивание

Существует четыре варианта выравнивания текста на странице, оно осуществляется с помощью атрибута align. На панели инструментов

все кнопки выравнивания присутствуют, причем выравнивание используется как атрибут элемента группировки DIV:

• по левому краю

• по центру div align=”center”div

• по правому краю

• по ширине (или выключка)

Выровняем текст по ширине (рис):




Абзац, новая строка, непрерывный пробел

Для деления текста на абзацы (или параграфы) используется тег

(от англ. paragraph). Параграф имеет атрибут выравнивания align, поэтому можно выравнивать текст абзаца, не применяя элемент DIV:

.

Параграф не может содержать в себе другие параграфы, а также тег . Однако может содержать в себе параграфы: с помощью него мы можем сгруппировать их, допустим, по правому краю .

Новая строка задается тегом
(от англ. break). Она нужна, например, для вставки одной или нескольких пустых строк, начала нового предложения с новой строки.

Бывают случаи, когда несколько слов должны находиться на одной строке. Например, имя и фамилия, название произведения и пр.

Для этого используют символы: « ». В браузере они будут отображаться как обычный пробел, а слова, между которыми стоят эти символы, находиться в одной строке.

4. Практическая часть.

Создать веб-страничку в Quanta Plus с информацией о себе (1.html). Использовать форматирование текста.

5. Д/з

1.Выучить конспект.

2. Угринович Н.Д. Информатика и ИТ. Учебник для 8 класса. § 3.7.3 Стр.115-116 .

3.Ответить на вопросы стр.115-116

6. Вопросы учеников.

Ответы на вопросы учащихся.

7. Итог урока.

Подведение итога урока. Выставление оценок.

8. В помощь учителю:

Презентации

http://www.uchportal.ru/

ЭОР на уроке

1.http://school-collection.edu.ru/

2. http://fcior.edu.ru/catalog

3. http://eorhelp.ru/



-80%
Курсы дополнительного образования

Создание динамических веб-страниц с помощью PHP и MySQL

Продолжительность 72 часа
Документ: Cвидетельство о прохождении курса
4000 руб.
800 руб.
Подробнее
Скачать разработку
Сохранить у себя:
Конспект урока по информатике на тему "Форматирование текста на Web-странице" (0.36 MB)

Комментарии 0

Чтобы добавить комментарий зарегистрируйтесь или на сайт

Пользовательское соглашение Политика обработки персональных данных Политика использования файлов cookie
Учителю!
Огромная база учебных материалов на каждый урок с возможностью удаленного управления
Тесты, видеоуроки, электронные тетради