Инфоурок Другое КонспектыЯзыки HTML. Форматирование абзацев. Форматирование шрифта.

Языки HTML. Форматирование абзацев. Форматирование шрифта.

Скачать материал

Тема урока:  Языки HTML. Форматирование абзацев. Форматирование шрифта.

Цели урока: Иметь представление о структуре web – страницы, о форматировании шрифта и абзацев и вставки изображении.

 Задачи урока :

Образовательные

  • познакомить учащихся с   определением и основным назначением языка HTML, с основными объектами языка;
  • изучить с учащимися структуру Web-страницы;
  • отработать умение учащихся создавать Web-страницу с помощью приложения Блокнот;
  • научить учащихся вносить изменения в созданную Web-страницу.

Развивающие

·         Умение применять получения знания на практике для решения простейших задач

·         Умение самостоятельно добывать знания (работа с литературой)

Воспитательные:

·         Формирование системного мышления

·         формирование мировоззренческой позиции при описании объективной действительности

·         развитие логического мышления учащихся

Тип урока: урок получения и освоения новых знаний , умений и навыков

Вид урока:  лекция с практикой

Оборудование урока: Компьютер с установленной операционной системой Windows, с установленным браузером

Оформление доски: Вывод на доску с помощью проектора презентацию на данную тему конспекта

 

План урока:

1.      Организационный момент

2.      Актуализация знаний

3.      Теоретический материал урока

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

5.      Домашнее задание

6.      Подведение итогов урока

 

Этапы урока

 

Этапы

Цель

Деятельность учителя

Деятельность ученика

Время

(мин.)

1

Организационный момент

Настроить учащихся на учебный процесс

Проверка готовности к уроку, мотивация учащихся, проверка присутствующих

Учащиеся записывают в тетрадях дату и тему урока

 

3

 

 

2

Актуализация знаний

Повторить пройденный материал прошлого урока, связь прошлого материала с новым

Учитель дает тест, проверяет знания учащихся.

Учащиеся решают тест.

 

7

3

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

Изучение нового материала

Учитель показывает презентацию, рассказывает материал.

Учащиеся записывают определения в тетрадь.

20

4

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

Закрепление изученного материала

Учитель дает задание ученикам, рассказывает ход работы

Учащиеся выполняют задания

10

5

Подведение итогов

Вспомнить изученный материал на уроке

Учитель задает вопрос

Ученики дают ответ на данный вопрос

5

 

Ход урока.

1.Организационный момент

2. Актуализация знаний

Перед изучением новой темы повторим материал прошлого урока.

Учитель: Какова логическая структура Web- страницы?

Ученики: Web-страница разделяется на две логические части: заголовок и содержание.

Учитель: Какой тег из основных не является (обязательным)?

BODY, HTML, CAPTION, HEAD.

Ученики: CAPTION

 

Мы ответили на основные вопросы, предыдущей темы урока,  теперь приступим к изучению нового материала

 

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

 

План урока:

1.     Заголовки

2.     Выравнивание текста

3.     Шрифты

4.     Горизонтальная линия

5.     Абзацы

6.     Вставка изображения

 

Для форматирования текста существует много тегов. Одни их них используются часто, другие - редко. Здесь мы рассмотрим те, которые используются часто.

Заголовки.

Теги, делающие текст заголовками

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

Эти теги выделяют текст в виде заголовков. Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестого - самый маленький).

Эти теги могут использоваться с параметром горизонтального выравнивания align.

Возможные значения этого параметра:

 left - слева,

 right - справа,

center - по центру,

jastify - по ширине. 

Шрифт( атрибуты font, color). Тег font и его параметры

Теги <font></font> указывают параметры шрифта текста:

face - название шрифта. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден (вы же не знаете, какие шрифты установлены на компьютере пользователя), браузер станет использовать следующий по списку. size - размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.

 color - цвет текста (по умолчанию - черный).

Существуют два способа задания цвета: по имени и указанием шестнадцатеричного кода цвета. С именными цветами (их 156) все просто (например, color="blue").

 Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр.

Шестнадцатеричное представление цвета использует RGB-формат “#RRGGBB”, где две первые шестнадцатеричные цифры задают интенсивность красного (Red), две следующие интенсивность зеленого (Green) и две последние – интенсивность синего (Blue) цветов. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная – FF. Например, синий цвет задается значением “#0000FF

 

Горизонтальная линия.

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

Абзацы.

Теги разделения на абзацы и переноса строки.

Тег <br> - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.

Теги <p></p> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен. В отличии от тега <br> абзацы отделяются друг от друга пустой строкой.

 У тега <p> есть параметр align, который задает способ выравнивания текста внутри параграфа.

Возможные значения этого параметра:

left - слева,

right - справа,

 center - по центру,

jastify - по ширине.

Вставка рисунка.

Для вставки рисунка в web – страницу используется тег <img>, с его неотъемлемым атрибутом src, которому присваивается значение адреса рисунка, его названия и расширения. Если графический файл находится на локальном компьютере в той же папке, что и файл  web-страницы, то в качестве значения атрибута src достаточно указать только имя файла. Например:

<img SRC=’Мой файл.jpg’ > </img>

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

<img SRC=’C:Мои рисунки\Мой файл.jpg' > </img>

 

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

Н.Д. Угринович – информатика и ИКТ. Стр. 165. Практическая работа 3.8

Задание 1-5.

5. Домашнее задание

(§§3.7.3; 3.7.4;)

6. Подведение итогов

Вопрос учителя: Какие основные теги мы сегодня изучили?

Ответ ученика: h1, font,  face, size, color, hr, br, p, img.

Учитель отмечает наиболее активных учащихся. Ставит оценку за урок.

 

 

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал
Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

5 893 197 материалов в базе

Скачать материал

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 25.05.2016 550
    • DOCX 22.2 кбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Шуняев Михаил Сергеевич. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Шуняев Михаил Сергеевич
    Шуняев Михаил Сергеевич
    • На сайте: 6 лет и 2 месяца
    • Подписчики: 0
    • Всего просмотров: 6590
    • Всего материалов: 5

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой