Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Конспекты / Конспект урока на тему "Основы HTML"

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

Идёт приём заявок на самые массовые международные олимпиады проекта "Инфоурок"

Для учителей мы подготовили самые привлекательные условия в русскоязычном интернете:

1. Бесплатные наградные документы с указанием данных образовательной Лицензии и Свидeтельства СМИ;
2. Призовой фонд 1.500.000 рублей для самых активных учителей;
3. До 100 рублей за одного ученика остаётся у учителя (при орг.взносе 150 рублей);
4. Бесплатные путёвки в Турцию (на двоих, всё включено) - розыгрыш среди активных учителей;
5. Бесплатная подписка на месяц на видеоуроки от "Инфоурок" - активным учителям;
6. Благодарность учителю будет выслана на адрес руководителя школы.

Подайте заявку на олимпиаду сейчас - https://infourok.ru/konkurs

  • Информатика

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

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


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


Задачи:

  1. формировать умение создавать простейший HTML-документ, используя редактор текста;

  2. развивать внимание, творческие способности обучающихся;

  3. воспитывать умение работать самостоятельно.


План:

  • Орг. Момент, вступительное слово;

  • Основной этап: раскрытие темы;

  • Подведение итогов, заключение.

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

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

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

Орг-ый:

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

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

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

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

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


Основной

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

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

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

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

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

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

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

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

  1. начало документа;

  2. <head> начало страницы (голова программы);

  3. название страницы ;

  4. тело документа.






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



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=”имя.jpgALT=”имя”>

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

. gif , .bmp.

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

Например:

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

… …

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

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


2 урок

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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


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

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

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

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


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

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

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

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




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

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

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

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


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

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

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

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


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

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

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

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



записывают











































записывают


























































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

Завершающий

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



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

Самые низкие цены на курсы профессиональной переподготовки и повышения квалификации!

Предлагаем учителям воспользоваться 50% скидкой при обучении по программам профессиональной переподготовки.

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца (признаётся при прохождении аттестации по всей России).

Обучение проходит заочно прямо на сайте проекта "Инфоурок".

Начало обучения ближайших групп: 18 января и 25 января. Оплата возможна в беспроцентную рассрочку (20% в начале обучения и 80% в конце обучения)!

Подайте заявку на интересующий Вас курс сейчас: https://infourok.ru/kursy

Краткое описание документа:

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

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

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 19861991 годах в стенах ЦЕРНа в Женеве в Швейцарии. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста.

Автор
Дата добавления 26.04.2015
Раздел Информатика
Подраздел Конспекты
Просмотров437
Номер материала 497596
Получить свидетельство о публикации

УЖЕ ЧЕРЕЗ 10 МИНУТ ВЫ МОЖЕТЕ ПОЛУЧИТЬ ДИПЛОМ

от проекта "Инфоурок" с указанием данных образовательной лицензии, что важно при прохождении аттестации.

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

Список всех тестов можно посмотреть тут - https://infourok.ru/tests

Похожие материалы

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