№ этапа          

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

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

1

-Здравствуйте, ребята! Садитесь.

Здороваются, садятся.

Кто сегодня отсутствует на уроке?

Отвечает на вопрос учителя.

2

Начнем урок с повторения.

Какой язык называют HTML?

Назовите теги, обозначающие начало и конец  

web-страницы.

Назовите теги заголовка.

Назовите теги названия страницы.

Между какими тегами прописывается видимое  содержание web-страницы?

HTML-стандартный язык разметки документов во Всемирной паутине.

3

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

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

делается это так:

Где foto.jpg это название фотографии в данном случае, так как фото лежит рядом с html документом, путь к ней мы не указываем.

Помните, тег  не требует закрывающего тега!

Теперь приведу пример, где путь указывается:

 - Такая запись подразумевает, что в директории где расположен наш html документ есть папка myfoto в которой расположен файл foto.jpg
 

Атрибуты тега

Поговорим о расположении изображений относительно текста.

Как и другие теги  тоже имеет свои атрибуты.уже знакомый нам атрибут align "выравнивание" применим и к данному тегу

 - фото слева от текста
 - фото справа от текста
 - текст выше фото
 - текст ниже фото
 - ну и соответственно текст посередине

Помимо align тег  имеет еще ряд атрибутов, но сначала расскажу немного о пикселях. Пиксель -это элементарная неделимая единица изображения. Каждый пиксель имеет свои координаты, например, самый верхний левый пиксель на мониторе имеет координаты x=1, y=1, а самый нижний правый в зависимости от разрешения монитора x=800, y=600 - будет соответственно при разрешении 800 на 600 точек. Нужно усвоить, что все расстояния в графических изображениях измеряются пикселями, так картинка длинной 800 пикселей и шириной в 600 пикселей при указанном разрешении заполнит весь экран.

 - Атрибут vspace задаёт расстояние по вертикали от рисунка до текста, в данном случае мы задали расстояние в 15 пикселей
 - Расстояние по горизонтали соответственно 
 - Ширина непосредственно самого изображения 
 - Высота изображения. Если атрибуты width и height не использовать, то ширина и высота изображения по умолчанию будет равна реальным её размерам, без каких либо искажений.
- Бордюр, рамка вокруг изображения и её толщина в пикселях.
- bordercolor - это цвет рамки.
Еще изображение можно сделать фоном страницы. Для этого используем атрибут background "фон" открывающего тега

Вот так:

Выравнивание рисунка.

Теперь расскажу о том, как разместить фотографию в нужном месте страницы. Вспомните, на прошлом уроке  говорилось о том как можно выровнять текст. эти же теги применимы и к выравниванию изображения.

Используются теги

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

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

4

Ответьте на вопросы устно:

- Вызвала ли затруднения новая тема?

5

Записывают домашнее задание в дневник.

 - фото слева от текста
 - фото справа от текста
 - текст выше фото
 - текст ниже фото
текст посередине

 - Атрибут vspace задаёт расстояние по вертикали от рисунка до текста, в данном случае расстояние в 15 пикселей.
 - Расстояние по горизонтали
 - Ширина самого изображения 
 - Высота изображения.
- Бордюр, рамка вокруг изображения и её толщина в пикселях.
- bordercolor - это цвет рамки.
 -Атрибут alt - это описание изображения. Если навести курсор на наше фото и подержать его там несколько секунд, выскочит надпись -Это моя фотка!!!
 - альтернатива alt в данном случае.

 - фото слева от текста
 - фото справа от текста
 - текст выше фото
 - текст ниже фото
текст посередине

 - Атрибут vspace задаёт расстояние по вертикали от рисунка до текста, в данном случае расстояние в 15 пикселей.
 - Расстояние по горизонтали
 - Ширина самого изображения 
 - Высота изображения.
- Бордюр, рамка вокруг изображения и её толщина в пикселях.
- bordercolor - это цвет рамки.
 -Атрибут alt - это описание изображения. Если навести курсор на наше фото и подержать его там несколько секунд, выскочит надпись -Это моя фотка!!!
 - альтернатива alt в данном случае.

 - фото слева от текста
 - фото справа от текста
 - текст выше фото
 - текст ниже фото
текст посередине

 - Атрибут vspace задаёт расстояние по вертикали от рисунка до текста, в данном случае расстояние в 15 пикселей.
 - Расстояние по горизонтали
 - Ширина самого изображения 
 - Высота изображения.
- Бордюр, рамка вокруг изображения и её толщина в пикселях.
- bordercolor - это цвет рамки.
 -Атрибут alt - это описание изображения. Если навести курсор на наше фото и подержать его там несколько секунд, выскочит надпись -Это моя фотка!!!
 - альтернатива alt в данном случае.

 - фото слева от текста
 - фото справа от текста
 - текст выше фото
 - текст ниже фото
текст посередине

 - Атрибут vspace задаёт расстояние по вертикали от рисунка до текста, в данном случае расстояние в 15 пикселей.
 - Расстояние по горизонтали
 - Ширина самого изображения 
 - Высота изображения.
- Бордюр, рамка вокруг изображения и её толщина в пикселях.
- bordercolor - это цвет рамки.
 -Атрибут alt - это описание изображения. Если навести курсор на наше фото и подержать его там несколько секунд, выскочит надпись -Это моя фотка!!!
 - альтернатива alt в данном случае.

 и 

 и 

 и 

 и 

№ этапа          

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

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

1

-Здравствуйте, ребята! Садитесь.

Здороваются, садятся.

Кто сегодня отсутствует на уроке?

Отвечает на вопрос учителя.

2

Начнем урок с повторения. Что такое глобальная компьютерная сеть Интернет?

С помощью каких программ осуществляется поиск в сети Интернет?

Что такое Web-страница?

Какие виды Web-страниц вы знаете?

3

Сегодня на уроке мы начнем изучать язык HTML,  познакомимся со структурой Web-страницы на языке HTML. Откройте тетради и запишите число и тему нашего урока: Язык HTML.

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. 

Давайте вспомним, что такое гипертекст?

 Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки
). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства.

Web-страницу можно создать в специальных программах (Dreamweaver CS6, Alaborn iStyle ) или в стандартном  блокноте.

В нашем кабинете на компьютерах установлен Линукс. Блокнот вы можете найти следующим образом:

Меню -> прочее ->…………………………….

Для начала рассмотрим простейшую структуру документа на языке HTML:

Любую web-страницу начинаем создавать с тега - начало web-страницы

Далее открываем заголовок - начало заголовка.

Прописываем название страницы (оно будет отображаться на вкладке) :

Почти все теги обязательно должны закрываться /.

Далее закрываем заголовок. Каким образом мы это сделаем?  

Далее прописывается видимое содержание web-страницы. Оно заключается между тегами и

Привет, мир!

- тег переноса на новую строку, его не нужно закрывать.

Меня зовут Катя, это моя первая страничка!

конец страницы.

Далее мы сохраняем документ под именем “index”, обязательно пишите имя документа английскими буквами, чтобы не происходило никаких непонятных ситуаций.

Далее задаем расширение документа .html, просто по умолчанию блокнот предлагает сохранить файл с расширением *.txt

Далее открываем этот файл при помощи Вашего браузера.. ну к примеру того же Internet Explorerа (правой кнопкой по нашему файлу.. "Открыть с помощью.." Internet Explorer

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

Сейчас я вам раздам карточки, в них записаны основные

Теги, которые помогут вам при редактировании текста. Их не теряйте, дома обязательно вклейте в тетради.

(приложение1)

Теперь сядем за компьютеры и в блокноте запишем полученную конструкцию на языке html. Те, кто справится с заданием раньше времени, попробует поработать с текстом, отредактировать его по своему вкусу.

4

Ответьте на вопросы устно:

Что такое язык  HTML?

Кто и когда его создал?

- Вызвала ли затруднения новая тема?

5

Домашним заданием будет знание нового материала. Практическое задание. Создать страничку со своей анкетой.

Обязательно сделать заголовки (минимум 3), например, моя биография, моя семья, мои увлечения (хобби). Каждый раздел должен содержать по 3-4 предложения. Полученный текс отформатировать по своему вкусу (обязательно применить тег цвета)

Записывают домашнее задание в дневник.