Выбранный для просмотра документ Основные теги.docx
Скачать материал "Урок "Web-страницы и web-сайты. Структура Web-страниц""
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ теги.txt
Скачать материал "Урок "Web-страницы и web-сайты. Структура Web-страниц""
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ текст.txt
Скачать материал "Урок "Web-страницы и web-сайты. Структура Web-страниц""
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ презентация к уроку.ppt
Скачать материал "Урок "Web-страницы и web-сайты. Структура Web-страниц""
Рабочие листы
к вашим урокам
Скачать
1 слайд
2 слайд
Всемирная паутина (WWW) - это сервис для получения доступа пользователей сети к информационным ресурсам, хранящимся на компьютерах в разных частях света.
3 слайд
<html>
<head>
<title></title>
</head>
<body ><p>
<h1><font color="red"></font></h1>
<p>
<p> <h3> </h1></p>
<img src="vo.gif"></p>
<h3><font color="brown"><strong><em>
</br>
</br>
</br><h3>
</body>
</html
4 слайд
5 слайд
Основой WWW являются Web-страницы и Web-сайты.
6 слайд
Web-страницы и web-сайты. Структура Web-страницы
7 слайд
8 слайд
9 слайд
<тег>
<html> </html>
<head> </head>
<title> </title>
<hr>
10 слайд
Информация о документе
Отображается в браузере
11 слайд
Размер шрифта для имеющихся в тексте заголовков задается тэгами от <Н1> (самый крупный)
до <Н6> (самый мелкий)
<Н1>Мы помним, мы гордимся</Н1>
Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN
Выравнивание по правой границе ALIGN="right"
а по центру — ALIGN="center"
<Н1 ALIGN= "right"> Мы помним, мы гордимся </Н1>
12 слайд
С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста
атрибут COLOR — цвет шрифта (например, COLOR="red")
<FONT COLOR="red"><Н1 ALIGN=“left">Мы помним, мы гордимся</Н1></FONT> Н1>
<Р></Р> тег «параграф», отделяет абзацы друг от друга. В соответствии с международным стандартом абзацы разделяются пустыми строками и не начинаются с красной строки
13 слайд
<em></em> используется для выделения из текста курсивом
<strong></strong> используется для выделения жирным шрифтом
</br> Следующее за этим тегом содержание HTML-файла будет просто начинаться с новой строки
14 слайд
Вставка изображений
Для вставки изображения используется тэг <IMG>
с атрибутом SRC
<IMG SRC="vo.gif">
vo.gif
15 слайд
Чтобы создать web-страницу,
необходимо :
создать текстовый файл с помощью языка HTML, например, в Блокноте;
сохранить с расширением .html
Просмотреть документ с помощью браузера
16 слайд
Практическая работа
Победа
Мы помним, мы гордимся
9 мая страна отмечает 70-летие Победы над фашистскими захватчиками в Великой Отечественной войне.
Изображение
Поклонимся великим тем годам,
Тем славным командирам и бойцам.
И маршалам страны, и рядовым.
Поклонимся и мёртвым, и живым.
Всем тем, которых забывать нельзя,
Поклонимся. поклонимся друзья!
<html>
<head>
<title></title>
</head>
<body ><p>
<h1><font color="red"></font></h1>
<p>
<p> <h3> </h3></p>
<img src="vo.gif"></p>
<h3><font color="brown"><strong><em>
</br>
</br>
</br><h3>
</body>
</html>
17 слайд
1.HTML это …
А. язык разметки гипертекста;
Б. протокол передачи Web-страниц;
В. протокол передачи файлов по сети Интернет;
Г. программа - браузер;
Д. разметочный знак гипертекста.
ТЕСТ Основы языка HTML"
А
18 слайд
2.Для того, чтобы отличить разметочный знак (тег) от обычного текста, он обрамляется символами …
А. !…!;
Б.@…@;
В. #…#;
Г. ^…^;
Д. <…>.
ТЕСТ Основы языка HTML"
Д
![ТЕСТ Основы языка HTML"
3. Для задания области действия разметочного знака и...](https://documents.infourok.ru/e70daef4-bb35-42d2-82ff-960f6cf60693/3/slide_19.jpg "ТЕСТ Основы языка HTML"
3. Для задания области действия разметочного знака и...")
19 слайд
ТЕСТ Основы языка HTML"
3. Для задания области действия разметочного знака используются парные знаки. Закрывающий тег отличается от открывающегося тем, что …
А. код тега записывается прописными буквами;
Б. код тега записывается строчными буквами;
В. перед кодом ставится символ / - косая черта;
Г. перед кодом ставится символ * - звездочка;
Д. ничем не отличается.
В
![ТЕСТ Основы языка HTML"
4. Заголовочная часть HTML -документа выделяется тег...](https://documents.infourok.ru/e70daef4-bb35-42d2-82ff-960f6cf60693/3/slide_20.jpg "ТЕСТ Основы языка HTML"
4. Заголовочная часть HTML -документа выделяется тег...")
20 слайд
ТЕСТ Основы языка HTML"
4. Заголовочная часть HTML -документа выделяется тегом …
А. HTML;
Б. HEAD;
В. BODY;
Д. TITLE;
Е. STRONG.
Б
![ТЕСТ Основы языка HTML"
5.Основной текст документа выделяется тегом …
А. HT...](https://documents.infourok.ru/e70daef4-bb35-42d2-82ff-960f6cf60693/3/slide_21.jpg "ТЕСТ Основы языка HTML"
5.Основной текст документа выделяется тегом …
А. HT...")
21 слайд
ТЕСТ Основы языка HTML"
5.Основной текст документа выделяется тегом …
А. HTML;
Б. HEAD;
В. BODY;
Г. TITLE;
Д. STRONG.
В
![ТЕСТ Основы языка HTML"
6.Для обозначения абзаца служит тег …
А. BR;
Б. H1;...](https://documents.infourok.ru/e70daef4-bb35-42d2-82ff-960f6cf60693/3/slide_22.jpg "ТЕСТ Основы языка HTML"
6.Для обозначения абзаца служит тег …
А. BR;
Б. H1;...")
22 слайд
ТЕСТ Основы языка HTML"
6.Для обозначения абзаца служит тег …
А. BR;
Б. H1;
В. P;
Г. HR;
Д. A.
В
23 слайд
Ответы
А Д В Б В В
24 слайд
Я научился…
Мне было интересно…
Мне было трудно…
Я понял, что …
Я могу…
Закончи фразу
25 слайд
26 слайд
Так мало их осталось ветеранов,
Освободивших мир наш от чумы.
Кровавыми, мозольными руками
Мать-Родину они спасли от нищеты.
Так мало их осталось ветеранов,
Так много не пришедших с той войны.
Друзья, не забывайте о деяньях,
О подвигах солдат своей страны!
Друзья, не забывайте близких,
В истории оставьте след,
Вы напишите на страничке
О подвигах героев давних лет!
moypolk.ru
27 слайд
Спасибо за урок!
Молодцы!
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ Тема урока.docx
Тема урока: Web-страницы и web-сайты. Структура web-страницы.
Класс 8
Цели урока:
Тип урока: урок освоения новых знаний
Цели урока:
Познавательная: изучить структуру web-страницы и ознакомиться со средствами ее создания.
Развивающая: развивать умения пользоваться программой-браузером.
Воспитательная: воспитание информационной культуры. Вызвать чувства причастности к великому подвигу воинов-освободителей Великой Отечественной войны.
Методы обучения: словесный, наглядно-иллюстративный, практический, контроль, проблемно-поисковый
Формы познавательной деятельности: фронтальная, индивидуальная, парная
Оборудование: компьютерный класс, проектор, экран, презентация, технологические карты для практического задания.
Ход урока.
1. Организационный момент.
Здравствуйте, ребята! Я……
Ребята, какой значок изображен на слайде? (сл.1)
Да. Это значок информации. Надеюсь, мы сегодня взаимно получим полезную информацию друг от друга.
2. Актуализация знаний. Мотивация.
Ребята, наверняка у вас у всех есть компьютеры, возможно ноутбуки. Планшеты…И каждый из вас каждый день совершает путешествие через компьютер куда? В Интернет. И точно таких же, как Вы миллионы людей в это же время тоже путешествуют по интернету. А Что такое Интернет? (сл.2) Правильно – это глобальная компьютерная сеть. Благодаря этой сети каждый из миллионов людей имеет доступ к информации, хранящейся в компьютере, находящемся в любой точке земного шара. Это так называемая Всемирная паутина.
Что мы с вами берем с собой собираясь в путешествие? А вот собираясь в путешествие по Интернету хорошо бы взять с собой такие инструменты. (сл.3) Ребята, а вы знаете для чего они используются? Надеюсь, в ходе нашей встречи мы узнаем, что это такое.
Ребята, как мы попадаем в Интернет?
Через браузер. Какие браузеры вы знаете? (сл.4)
Каждый из нас выходит в Интернет для поиска нужной информации. Ища эту информацию, мы посещаем различные сайты. (сл.5)
Например. Сайт школы или сайт военного училища. А вот еще один сайт. Это, ребята сайт «Бессмертный полк» - это сайт, куда записывают всех тех, кто ковал победу в ВОВ. Это ваши прадедушки и прабабушки, др. родственники… Если мы откроем регион Марий Эл, то к сожалению нет там нашего Сернурского района. На данный момент всего в этом полку 86485 человек.
Итак. Ребята, вы, наверное, догадались, что речь пойдет о … сайтах
Запишем тему урока (сл.6)
Открывая сайт и видим, что он состоит из множества страниц, как книга. И цель нашего урока… понять, как можно создать веб-странички. (сл.7)
Этап изучения нового материала.
Web-страницы. Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере.(сл.8)
Основными достоинствами Web-страниц
являются:
- малый информационный объем;
- возможность просмотра в различных операционных системах.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. "What You See Is What You Get" - "Что видишь, то и получишь").
Web-сайты. Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме. Государственные структуры и организации (правительство, дума, школа и т. д.) обычно создают официальные Web-сайты своих организаций, на которых размещают информацию о своей деятельности. Коммерческие фирмы на своих Web-сайтах размещают рекламу товаров или услуг и предлагают их приобрести в Интернет-магазине. Любой пользователь Интернета может создать свой тематический сайт, на котором может разместить информацию о своих разработках, увлечениях и т. д.
Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц. Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам.
Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета.
Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).
На партах у учащихся лежат листочки с расшифровками тегов.
HTML-код страницы помещается внутрь контейнера <HTML></HTML>. Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание.
Заголовок Web-страницы заключается в контейнер <HEAD></HEAD> и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения.
Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называется контейнером).
Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.
Название страницы помещается в контейнер <TITLE></TITLE> и при просмотре отображается в верхней строке окна браузера. (сл.10)
Отображаемое в браузере содержание страницы помещается в контейнер <HTML>
<BODY></BODY>
<HEAD>
<ТITLE>Компьютер</ТITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Рассказ по слайдам 11-15
Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, "Компьютер"), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.
Динамическая пауза
Практическая работа (сл.16)
Сопровождается песней «Поклонимся великим тем годам!»
Тестирование (сл.17-22)
Самооценка (сл.23)
3. Подведение итогов урока.
Сегодня на уроке мы хорошо поработали. В журнал будет выставлена средняя оценка.
4. Домашнее задание.
Записать, что означает каждый тег
5. Рефлексия (сл.24)
Закончите предложение.
· На уроке мне понравилось…..
· Я сегодня научился(лась)……
·
Самым
трудным на уроке для меня было …
В конце урока хочу вернуться к сайту «Бессмертный полк». (сл.25) Моя дочь записала своего деда (моего отца) в полк. Надеюсь, и вы вместе с вашими родителями увековечите память о ваших родственниках.
Так мало их осталось ветеранов,
Освободивших мир наш от чумы.
Кровавыми, мозольными руками
Мать-Родину они спасли от нищеты.
Так мало их осталось ветеранов,
Так много не пришедших с той войны.
Друзья, не забывайте о деяньях,
О подвигах солдат своей страны!
Друзья, не забывайте близких,
В истории оставьте след,
Вы напишите на страничке
О подвигах героев давних лет! (сл.26)
Спасибо за урок!
Рабочие листы
к вашим урокам
Скачать
Рабочие листы
к вашим урокам
Скачать
6 666 161 материал в базе
Настоящий материал опубликован пользователем Сидоркина Юлия Васильевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс повышения квалификации
36 ч. — 180 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Мини-курс
6 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.