Конспект урока на тему Основы HTML

HTML это стандартный язык разметки документов во Всемирной паутине. Все веб- страницы создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, удобном длячеловека.Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без искажений воспроизводиться на оборудовании с различной технической оснащ...

Раздел	Информатика
Класс	-
Тип	Конспекты
Автор	Аверкиева Д.С.
Дата	15.03.2015
Формат	doc
Изображения	Есть

Поделитесь с коллегами:

Тема: Основы HTML.

Цель: Познакомить учащихся со структурой HTML-документа.

Задачи:

формировать умение создавать простейший HTML-документ, используя редактор текста;
развивать внимание, творческие способности обучающихся;
воспитывать умение работать самостоятельно.

План:

Орг. Момент, вступительное слово;
Основной этап: раскрытие темы;
Подведение итогов, заключение.

Этапы, время.

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

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

Орг-ый:

Здравствуйте ребята!

Сегодня мы начнем изучать новый раздел - основы HTML.

После того как мы все изучим по HTML будет самостоятельная работа. А сегодня мы разберем структуру

HTML-документа.

Внимательно слушают

Основной

- Начнем с того что же такое HTML.

HTML (Hyper Text Markup Languger) - язык гипертекстовой разметки, т.е. - это специальные инструкции к браузеру с помощью которых создаются

веб-страницы.

- Специальные программы к браузеру называются тегами

(<тег>…. тег>). Тэг - это команда языка HTML, которую выполняет браузер.

- Тип файла (расширение) - *.htm или *.html.

- Имя файла HTML-документа не должно содержать кириллицу (т.е. русские буквы), пробел (вместо пробела рекомендуется использовать либо тире, либо знак подчеркивания).

- Теперь рассмотрим структуру документа. Запишите в тетрадях: Структура документа:

начало документа;
<head> начало страницы (голова программы);
название страницы ;
тело документа.

- Сейчас запишите структура :

Background=" имя рисунка">

Link= цвет гиперссылки

Vlink= цвет активной гиперссылки

Alink= цвет гиперссылки

VLINK=green>

- Название цвета можно писать как по английски, так же можно использовать шестнадцатеричные коды.

- При выборе картинки в качестве фона нужно учитывать, чтобы выбираемый цвет фона сочетался с текстом.

- Существует всего 6 уровней заголовочного шрифта.

Им соответствуют теги <H1>,<H2>, <H3>, <H4>, <H5>,

<H6>. Первый уровень самый крупный. Если вы хотите выбрать другой уровень, то тег нужно закрыть H1>.

- Запишите след.заголовок: Тэги форматирования:абзац (лево) >

Center ( по центру)

Right ( по правой стороне)

Justify ( по ширине)

<BR> принудительный разрыв строки

цвет face="название шрифта">

после чего нужно закрыть FONT>

жирный

<I> курсив I>

<U> подчеркнутый U>

<S> зачеркнутый S>

<center> центрированный center>

<sup> верхний индекс sup>

<sub> нижний индекс sub>

<HR> разделитель, горизонтальная линия идущая через весь экран.

20 сл.

…. MARQUEE> бегущая строка

<BIG>….BIG> текст будет отображаться шрифтом чуть большего размера, чем основной.

<SMALL>….<SMALL> текст будет отображаться шрифтом чуть меньшего размера, чем основной.

- И последний тег - вставка рисунков:

<IMG SRC="имя.jpg" ALT="имя">

- Форматы картинок вставляются следующее: .jpg ,

. gif , .bmp.

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

Например:

Верная запись Неверная

…

… …

- Для создания HTML-документа в виде HTML-кода всегда будем использовать текстовый редактор Блокнот.

Запускаем Блокнот и составляем структуру HTML-документа.

2 урок

- Садитесь за компьютеры и создайте HTML-документ.

Для начала создайте свою папку. Затем откройте блокнот и сохраните его как HTML-документ. Чтобы просмотреть затем снова блокнот, нужно правой кнопкой мыши нажать и выбрав «открыть с помощью блокнота» или

«просмотреть исходный код». После того как вы изменили текст, теги, нужно снова сохранить и обновить страницу.

Практическое задание

1. Разбейте приведенное ниже стихотворение по строчкам.

2. Измените, цвет текста по строчкам стихотворения, а так же измените размер каждой строчки стихотворения.

3. Измените фон страницы.

4. Добавьте название стихотворения, а именно МИШКА.

5. Измените размер шрифта (заголовка) названия стихотворения МИШКА.

6. Используйте все теги форматирования и выравнивания.

7. Вставьте рисунки между столбцами.

Раз морозною зимой

Вдоль опушки лесной

Шел медведь к себе домой

В толстой шубе меховой.

Шел он, шел к своей берлоге

По проселочной дороге

И, шагая через мост,

Наступил лисе на хвост.

Подняла лисица крик.

Зашумел темный лес,

И медведь с испуга вмиг

На сосну большую влез.

На сосне веселый дятел

Белке домик конопатил.

Промолвил: «Ты, медведь,

Должен под ноги смотреть!»

С той поры медведь решил,

Что зимой надо спать,

По тропинкам не гулять,

На хвосты не наступать.

Он в берлоге безмятежно

Спит зимой под крышей снежной

И доволен неспроста

Что родился без хвоста.

записывают

Выполняют за компьютерами

Завершающий

Дома почитайте параграф 29. Всем спасибо. Досвиданья.

Подпись учителя______________

загрузить