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

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

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

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

Задачи:

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

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

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

План:

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

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

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

Этапы, время.	Деятельность учителя	Деятельность учеников
Орг-ый:	Здравствуйте ребята! Сегодня мы начнем изучать новый раздел – основы HTML. После того как мы все изучим по HTML будет самостоятельная работа. А сегодня мы разберем структуру HTML-документа.	Внимательно слушают
Основной	- Начнем с того что же такое HTML. HTML (Hyper Text Markup Languger) – язык гипертекстовой разметки, т.е. – это специальные инструкции к браузеру с помощью которых создаются веб-страницы. - Специальные программы к браузеру называются тегами (<тег>…. </тег>). Тэг – это команда языка HTML, которую выполняет браузер. - Тип файла (расширение) — .htm или .html. - Имя файла HTML-документа не должно содержать кириллицу (т.е. русские буквы), пробел (вместо пробела рекомендуется использовать либо тире, либо знак подчеркивания). - Теперь рассмотрим структуру документа. Запишите в тетрадях: Структура документа: 1. <html> начало документа; 2. <head> начало страницы (голова программы); 3. <title> название страницы </title>; 4. </head> 5. <body> тело документа. - Сейчас запишите структура <body>: <Body text=red bgcolor=blue Background=” имя рисунка”> Link= цвет гиперссылки Vlink= цвет активной гиперссылки Alink= цвет гиперссылки <BODY LINK= #FF8C00 VLINK=green> - Название цвета можно писать как по английски, так же можно использовать шестнадцатеричные коды. - При выборе картинки в качестве фона нужно учитывать, чтобы выбираемый цвет фона сочетался с текстом. - Существует всего 6 уровней заголовочного шрифта. Им соответствуют теги <H1>,<H2>, <H3>, <H4>, <H5>, <H6>. Первый уровень самый крупный. Если вы хотите выбрать другой уровень, то тег нужно закрыть </H1>. - Запишите след.заголовок: Тэги форматирования: <P> абзац <P align= Left (лево) > Center ( по центру) Right ( по правой стороне) Justify ( по ширине) <BR> принудительный разрыв строки <FONT size=7 color=цвет face=”название шрифта”> после чего нужно закрыть </ FONT> <B> жирный </B> <I> курсив </I> <U> подчеркнутый </U> <S> зачеркнутый </S> <center> центрированный </center> <sup> верхний индекс </sup> <sub> нижний индекс </sub> <HR> разделитель, горизонтальная линия идущая через весь экран. <HR WIDTH="60%" SIZE="3" ALIGN="right"> 20 сл. <MARQUEE>….</ MARQUEE> бегущая строка <BIG>….</BIG> текст будет отображаться шрифтом чуть большего размера, чем основной. <SMALL>….<SMALL> текст будет отображаться шрифтом чуть меньшего размера, чем основной. - И последний тег - вставка рисунков: <IMG SRC=”имя.jpg” ALT=”имя”> - Форматы картинок вставляются следующее: .jpg , . gif , .bmp. - Теги должны располагаться строго один внутри другого по принципу хорошо вам известной матрешки. Например: Верная запись Неверная <CENTER>… <CENTER>… <H2>… <H2>… </H2>… </CENTER>… </CENTER>… </H2>… - Для создания HTML-документа в виде HTML-кода всегда будем использовать текстовый редактор Блокнот. Запускаем Блокнот и составляем *структуру HTML-документа.* 2 урок - Садитесь за компьютеры и создайте HTML-документ. Для начала создайте свою папку. Затем откройте блокнот и сохраните его как HTML-документ. Чтобы просмотреть затем снова блокнот, нужно правой кнопкой мыши нажать и выбрав «открыть с помощью блокнота» или «просмотреть исходный код». После того как вы изменили текст, теги, нужно снова сохранить и обновить страницу. *Практическое задание* 1. Разбейте приведенное ниже стихотворение по строчкам. 2. Измените, цвет текста по строчкам стихотворения, а так же измените размер каждой строчки стихотворения. 3. Измените фон страницы. 4. Добавьте название стихотворения, а именно МИШКА. 5. Измените размер шрифта (заголовка) названия стихотворения МИШКА. 6. Используйте все теги форматирования и выравнивания. 7. Вставьте рисунки между столбцами. Раз морозною зимой Вдоль опушки лесной Шел медведь к себе домой В толстой шубе меховой. Шел он, шел к своей берлоге По проселочной дороге И, шагая через мост, Наступил лисе на хвост. Подняла лисица крик. Зашумел темный лес, И медведь с испуга вмиг На сосну большую влез. На сосне веселый дятел Белке домик конопатил. Промолвил: «Ты, медведь, Должен под ноги смотреть!» С той поры медведь решил, Что зимой надо спать, По тропинкам не гулять, На хвосты не наступать. Он в берлоге безмятежно Спит зимой под крышей снежной И доволен неспроста Что родился без хвоста.	записывают записывают Выполняют за компьютерами
Завершающий	Дома почитайте параграф 29. Всем спасибо. Досвиданья.

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

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

Скачать материал "Конспект урока на тему "Основы HTML""

Как учитель может зарабатывать на Инфоуроке?

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

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

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

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

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

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

6 650 964 материала в базе

Найти материалы

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

Другие материалы

zip

Mimio-презентация по информатике и ИКТ на тему "Кодирование графической информации"

26.04.2015
547
0

docx

Методические рекомендации к уроку по информатике и ИКТ с использованием интерактивной приставки Mimio

26.04.2015
836
5

docx

Конспект урока по информатике и ИКТ на тему "Сложные таблицы"

26.04.2015
834
3

docx

Конспект урока по информатике и ИКТ на тему "Кодирование информации"

26.04.2015
1463
6

docx

Конспект урока по информатике и ИКТ на тему "Игра «Битва умов»"

26.04.2015
893
1

pdf

Японский кроссворд-тренажер по теме "Системы счисления"

26.04.2015
1395
24

docx

Рабочая программа по внеурочной деятельности «Мир геометрии» 3 rkfcc

26.04.2015
749
2

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

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

Скачать материал
- 26.04.2015 3670
- DOCX 52 кбайт
- 62 скачивания
- Оцените материал:
Настоящий материал опубликован пользователем Аверкиева Дарья Сергеевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

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

Аверкиева Дарья Сергеевна
- На сайте: 8 лет и 11 месяцев
- Подписчики: 0
- Всего просмотров: 10883
- Всего материалов: 5