Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Конспекты / Конспект урока "Создание web-страницы"
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 26 апреля.

Подать заявку на курс
  • Информатика

Конспект урока "Создание web-страницы"

библиотека
материалов

Министерство образования и науки Самарской области

Министерство имущественных отношений Самарской области

Государственное бюджетное образовательное учреждение
среднего профессионального образования

Тольяттинский индустриально-педагогический колледж (ГБОУ СПО ТИПК)

Методическая разработка урока

Информатика и ИКТ

Преподаватель Юдина Ю.Ю.



Тема урока: Создание Web-сайтов.

Тип урока: Комбинированный – урок изучение нового материала, урок закрепления знаний.

Цели: Образовательная – познакомить обучающихся с методами создания сайта, и основами языка HTML.

Развивающая – развивать знания в сфере информационных компьютерных технологий. Формирование навыков ИКТ – компетенций.

Воспитательная – воспитание информационной культуры.

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

Оборудование:

Персональный компьютер

Программное обеспечение (Office 2010, ActivStudio)

Интерактивная доска, проектор, колонки.

План урока 45 минут

Проверка посещаемости -3 мин,

Постановка цели урока – 2 мин,

Фронтальный опрос - 16 мин,

Видео- лекция – 20 мин,

Домашнее задание – 2 мин,

Подведение итогов урока – 2 мин.

Ход урока.

  1. Проверка посещаемости.

  2. Постановка целей урока. Объявление темы и целей урока.

  3. Фронтальный опрос с использованием программы Activ Studio.

Задание 1. Установите соответствие между определениями и изображением внутреннего устройства компьютера

hello_html_7295c179.png

hello_html_m9c3dc9d.png


Задание 2. Решите кроссворд

hello_html_m143210df.png


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

hello_html_2a3b6bf7.png


  1. Объяснение нового материала. Видео -лекция в программе PowerPoint 2010

Сегодня мы должны ответить на вопрос: «Можно ли создать web-страницу не зная языка программирования сайтов HTML?».


hello_html_m396f407d.png

Сайты можно создавать тремя различными способами:

1.С помощью обычного текстового редактора, например Блокнот. При этом web-страница полностью создается вручную, путем вставки в требуемый текст необходимых тегов – команд языка разметки web-документов HTML. Это самый трудоемкий и отнимающий много времени способ. Но благодаря этому способу вы сможете сделать любые странички и воплотить все свои фантазии.

hello_html_m25346b76.png

2.HTML- редакторы (например (1-stPage 2000) Это уже специальная программа с помощью которых создаются web-страницы. Обычно работа в них также производится с текстом HTML- документа, но предусматривает ряд инструментов, позволяющих автоматически вставлять в текст соответствующие теги. Такая программа- хороший помощник, намного ускоряющий создание страниц, но при работе с ней также необходимо знание основ языка HTML.

hello_html_646a3249.png

3.WYSIWYG – редакторы (например MicrosoftFrontPage) специальные программы для создания web-страниц и сайтов. WYSIWYG –редакторысокращениефразыWhatYouSeeIsWhatYouGet – Что видишь, то и получаешь. Позволяют создать web-страницы, даже не имея никого понятия о языке HTML. Однако если случится какой- либо сбой, найти ошибку, не зная основ HTML, очень сложно. Другим недостатком этих редакторов является громоздкость созданных с их помощью HTML-документов. В результате объем документа сильно увеличивается,и следовательно увеличивается время загрузки страницы.

hello_html_m14c01117.png

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

Запишите себе в тетрадь три способа создания сайтов.


hello_html_m644d13de.png

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


hello_html_m4bf86573.png

Хотелось бы дать некоторые советы:

  • Никогда не называйте файлы web-страниц русскими именами.

  • Желательно в именах файлов всегда использовать строчные буквы. Например, лучше назвать foto.jpg, а не FOTO.JPG или Foto.jpg.

  • Удобочитаемость текста зависит от: используемого шрифта, длины строки, контрастности цветов теста и фона, соотношение теста и пустого пространства на странице, а также от размера шрифта. Избегайте использование курсива при небольшом размере шрифта. Не пишите основной текст, а также заголовки прописными буквами. Если в тексте предусмотрены гиперссылки, старайтесь не использовать в тексте подчеркивание. Приспосабливайте текст для беглого просмотра и поиска информации: создавайте больше подзаголовков, формируйте наиболее важные идеи в начале параграфа и используйте маркированные списки.

hello_html_m35d3dc41.png

Любой web-документ желательно формировать из отдельных типов блоков (логотипа, заголовка, основного текста, меню, форм поиска и т.д.) Все такие блоки размещаются на странице с помощью таблиц или фреймов.

Фрейм – это обособленная область web-документа со своими полосами прокрутки. С помощью фреймов web-страница разделяется на несколько независимых областей.

Определение фрейма также запишите себе в тетрадь.

hello_html_2b32df6c.png

Слово «HTML» представляет собой сокращение от «HyperTextMarkurLanguage»- «язык разметки гипертекста» В основном HTML-документ является простым текстовым файлом, который содержит текст и текстовые же HTML-теги. Так что создавать web-страницы можно в любом текстовом редакторе.

hello_html_33776c66.png

Мы будем использовать стандартное приложение Блокнот. Для этого:

Открываем стандартное приложение Блокнот.

Сохраняем файл с расширением html.


hello_html_m3d58565a.png

Когда web-страница открывается в браузере, он просматривает HTML-код, находит в нем специальные команды, называемые тегами.

Для обозначения тегов используют «угловые скобки» из знаков «больше» («<») и «меньше» («>»).

Теги бывают парные (контейнеры), которые обрамляют некоторые фрагменты текста, и одиночные.

Контейнер всегда требует наличия закрывающего тега, перед записью которого в угловых скобках ставится слеш (например<B> ___ B>)

<B> Жирный шрифт в тексте B>

Контейнеры могут быть вложенными. При этом они не должны пересекаться, т.е. открывающий и закрывающий теги внутреннего контейнера должны располагаться внутри внешнего контейнера.

<B><I> Полужирный курсивный текст I>B>

hello_html_47becc4c.png

Запишем определение тегов в тетрадь: «Специальные команды в HTMLкоде называются тегами. Теги обозначаются угловыми скобками знаками больше и меньше. Теги бывают парные и одиночные».


hello_html_6f1207af.png

HTML-документ всегда должен начинаться с открывающего тега <HTML> и заканчиваться соответствующим закрывающим тегом HTML>

Внутри документа выделяются два основных раздела: раздел заголовков и тело документа.


hello_html_16bcece0.png

Раздел заголовков содержит информацию, описывающую документ в целом и не отображается на web-странице.

Раздел заголовков описывается тегом <head> ---- head>.

Заголовок web-страницы – это один из важнейших ее элементов. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера. По тексту заголовка пользователь получает дополнительную информацию о том, что это за сайт и как называется текущая страница. Большинство браузеров поддерживают возможность сохранения web-страницы на локальном компьютере, в этом случае имя сохранённого файла обычно совпадает с заголовком документа. При сохранении в разделе браузера Избранное адрес текущей страницы с ее заголовком помещается в список закладок. В результате поиска по ключевым словам поисковые системы также используют заголовки страниц для указания ссылок на соответствующие документы.

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

Для этого используют метатеги. В частности, поисковые серверы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Поэтому правильно написанные метатеги позволяют существенно улучшить рейтинг сайта в выдаваемых списках результатов поиска.

Специально для поисковых серверов предназначены два метатега: Description(описание) иKeywords (ключевые слова).

hello_html_c3c398a.png

Тело документа описывается парным тегом -----

Все что находится внутри тегов «body», отображается на web-странице. Тело включает в себя абзацы текста, рисунки, таблицы и многое другое.


hello_html_mc000b17.png

Структуру web-страницы зарисуйте в тетради.


hello_html_3272fdb0.png

После того как вы написали свой сайт его необходимо протестировать в нескольких браузерах. Браузеры имеют различные настройки, и вы должны убедиться, что ваш сайт выглядит так, как вы его задумали. Должны проверить, не съехали ли таблицы, в нужном ли месте расположен ваш текст, правильно отображены рисунки и т.д.

hello_html_4abef14a.png

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

Для публикации сайта можно воспользоваться платным или бесплатным хостингом. Однако в случае если вы будете размещать сайт на бесплатном хостинге Narod .Ru владельцы хостинга обязательно «повесят» какой –либо рекламный баннер. Это и есть плата за бесплатность.

hello_html_501260.png

И так сегодня мы с вами ответили на вопрос зачем нужно изучать язык программирования HTML. И выяснили что сайты можно создавать тремя различными способами. Узнали что такое фреймы. И что такое теги. Рассмотрели структуру web-страницы. Которая состоит из двух частей: видимой части и обозначается тегами «body» и невидимой части, которая обозначается тегами «head». Определили что написанный сайт необходимо протестировать в нескольких браузерах и получили некоторые полезные советы по созданию и оформлению сайта.

hello_html_4133e3b8.png

Ребята, какие есть вопросы по видео-лекции. Дополнительные объяснения по новой теме.

  1. Домашнее задание. На практических занятиях мы будем более подробно применять теги языка HTML, а так же каждый из вас создаст свой сайт. Но для этого вам необходимо определить тему сайта, и подобрать материал.

  2. Подведение итогов урока. Выставление оценок.












Автор
Дата добавления 15.03.2016
Раздел Информатика
Подраздел Конспекты
Просмотров800
Номер материала ДВ-528356
Получить свидетельство о публикации

"Инфоурок" приглашает всех педагогов и детей к участию в самой массовой интернет-олимпиаде «Весна 2017» с рекордно низкой оплатой за одного ученика - всего 45 рублей

В олимпиадах "Инфоурок" лучшие условия для учителей и учеников:

1. невероятно низкий размер орг.взноса — всего 58 рублей, из которых 13 рублей остаётся учителю на компенсацию расходов;
2. подходящие по сложности для большинства учеников задания;
3. призовой фонд 1.000.000 рублей для самых активных учителей;
4. официальные наградные документы для учителей бесплатно(от организатора - ООО "Инфоурок" - имеющего образовательную лицензию и свидетельство СМИ) - при участии от 10 учеников
5. бесплатный доступ ко всем видеоурокам проекта "Инфоурок";
6. легко подать заявку, не нужно отправлять ответы в бумажном виде;
7. родителям всех учеников - благодарственные письма от «Инфоурок».
и многое другое...

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


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ


Идёт приём заявок на международный конкурс по математике "Весенний марафон" для учеников 1-11 классов и дошкольников

Уникальность конкурса в преимуществах для учителей и учеников:

1. Задания подходят для учеников с любым уровнем знаний;
2. Бесплатные наградные документы для учителей;
3. Невероятно низкий орг.взнос - всего 38 рублей;
4. Публикация рейтинга классов по итогам конкурса;
и многое другое...

Подайте заявку сейчас - https://urokimatematiki.ru

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

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