Тема: Содержание и структура сайта. Информатика 9 класс Токар И.Н.
advertisement
Тема: Содержание и структура сайта. Информатика 9 класс Токар И.Н. Информатика ФГОСС Проверка домашней работы: Учебник § ______ РТ: № ___, ___ Требования по технике безопасности (как мы сидим за компьютером) Что такое WEB-сайт? • WEB сокращение от WWW (World Wide Web) • WEB-сайт – совокупность гипертекстовых документов, объединенных общей тематикой, структурой и навигацией. Создаёт сайт WEB - дизайнер Web-дизайнер специалист, проектирующий структуру Web-сайта, подбирающий способы подачи информации и выполняющий художественное оформление Web-проекта. Содержание сайта должно отражать творческую жизнь участников объединения, привлекать внимание единомышленников. Структура (план) сайта - разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними. Иерархическая структура сайта Главная страница Новости и объявления Галерея Личные страницы Полезные ссылки Растровая графика Руководитель Векторная графика Ученик 1 Сканография Ученик 2 HTML - код <HTML> <HEAD> <TITLE> Персональная страница Иванова Ивана </TITLE> </HEAD> <BODY BACKGROUND="IMAGES/BG/foto 1.jpg" > <H1 ALIGN=CENTER>МБОУ СОШ №8 г. Химки имени В.И. Матвеева"</H1> <TABLE BORDER=1 > <CAPTION> • <FONT COLOR="white" SIZE=5 <FONT COLOR="white" SIZE=5 >Давайте знакомиться!</FONT> </CAPTION> <FONT COLOR="white" SIZE=5 >Давайте знакомиться!</FONT> • </CAPTION> <TR> <TD ><IMG SRC="IMAGES/FOTO/foto2.jpg"> </TD> <TD BGCOLOR="blue"> <FONT COLOR="white" SIZE=6 >Я Иванов Иван, <BR> ученик 9а класса !</FONT> </TD> </TR> <TR> <TD COLSPAN=2> Я радостный человек!</TD> </TR> </TABLE> </BODY> </HTML> Структура страницы Заголовок сайта Фамилия, имя, класс Рассказ о себе HTML-код (Web-страницы) • • • • HTML-код страницы помещается внутрь контейнера <html> </html>. Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Заголовок Web-страницы заключается в контейнер <head> </head> и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для её правильного отображения. Название Web-страницы содержится в контейнере <title> </title> и отображается в строке заголовка браузера пи просмотре страницы. Основное содержание страницы помещается в контейнер <body> </body> и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и звуковые файлы и т.д. Структура Web-страницы • Во время отображения страницы в браузере разработчик не может вносить никакие изменения в существующую страницу. Для редактирования страницы её нужно открыть в приложении БЛОКНОТ, используя контекстное меню (вызывается правой кнопкой мыши) Информатика ФГОСС Информатика ФГОСС Информатика ФГОСС Язык HTML ! HTML = Hypertext Markup Language (язык разметки гипертекста) HTML – это не язык программирования! HTML-страница – это текстовый файл (Блокнот): index.html <HTML> <HEAD> <TITLE>Моя страница</TITLE> </HEAD> <BODY> Привет! … </BODY> </HTML> images sail.jpg bee.wav man.jpg clock.avi sunset.jpg ball.swf 14 Тэги Тэг – это команда языка HTML, которую выполняет браузер: вставить • непарные тэги рисунок <IMG SRC = "vasya.jpg"> • парные тэги (контейнеры) открывающий <TABLE> ... </TABLE> область действия тэга: описание таблицы закрывающий 15 Простейшая Web-страница first.html шапка («голова») <HTML> <HEAD><HEAD> <TITLE>Моя <TITLE>Моя первая первая Web-страница</TITLE> Web-страница</TITLE> </HEAD> </HEAD> <BODY><BODY> Привет! Привет! </BODY> </BODY> </HTML> основная часть («тело») 16 Тэг FONT – свойства блока текста • цвет текста Привет! <FONT COLOR=red> Как дела? </FONT> • размер шрифта Привет! <FONT COLOR=red SIZE=6> Как дела? от 1 до 7 </FONT> (3 – нормальный) 17 Стили оформления текста жирный (bold) <B>Вася</B> Вася курсив (italic) <I>Вася</I> Вася подчеркивание (underline) <U>Вася</U> Вася зачеркивание (strike out) <S>Вася</S> Вася верхний индекс (superscript) Вася<SUP>2</SUP> Вася2 нижний индекс (subscript) Вася<SUB>2</SUB> Вася2 18 Абзацы • переход на новую строку Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. <BR> До самого вечера тело с варежками ... • абзац (с отступами) <P> Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. </P> <P> До самого вечера тело с варежками ... </P> 19 Выравнивание атрибут тэга <P> <P ALIGN="center"> Этот текст выровнен </P> <P ALIGN="justify"> Этот текст выровнен Этот текст выровнен Этот текст выровнен Этот текст выровнен </P> left right center justify по центру. по по по по ширине. ширине. ширине. ширине. по левой границе по правой границе по центру по ширине 20 Фон страницы <BODY BACKGROUND="back.jpg"> "images/back.jpg" "../images/back.jpg" "http://www.vasya.ru/images/back.jpg" ! Не должно быть "швов"! ! Фон не должен мешать! 21 Рисунки в документе из той же папки: image (изображение) source (источник) <IMG SRC="flag.jpg"> из другой папки: <IMG SRC="images/flag.jpg"> <IMG SRC="../images/flag.jpg"> 22 Простейшая таблица толщина рамки <TABLE BORDER="1"> <TR> <TD>Таблица из одной строки</TD> <TD>из трех столбцов</TD> <TD>без указания ширины таблицы и ячеек.</TD> </TR> </TABLE> TABLE TR = table row TD = table data TH = table header таблица строка таблицы данные таблицы заголовок (жирный, по центру) 23 Фон и цвет текста цвет фона <TABLE BORDER="1" BGCOLOR="green"> <TR HEIGHT=30 BGCOLOR="blue"> <TD><FONT COLOR="white">Привет!</FONT></TD> <TD BGCOLOR="red"></TD> </TR> фоновый рисунок <TR> <TD BACKGROUND="web.jpg">Таблица из двух строк</TD> <TD>и двух столбцов</TD> </TR> </TABLE> 24 Объединение ячеек <TABLE BORDER="1"> <TR> <TD COLSPAN="3">Привет!</TD> </TR> <TR> <TD>Вася,</TD> column span охват <TD>Петя,</TD> столбцов <TD>Маша!</TD> </TR> </TABLE> row span охват строк <TABLE BORDER="1"> <TR> <TD ROWSPAN="3">Привет!</TD> <TD>Вася,</TD> </TR> <TR><TD>Петя,</TD></TR> <TR><TD>Маша!</TD></TR> </TABLE> 25 Первичная проверка понимания изученного Ответить на вопросы из интерактивного теста или кроссворд на выбор. Сделать анализ получившихся баллов Домашнее задание: § § ______ РТ: № ___, ___, ___ Продолжить работу над страницей: • добавить ячейки таблицы, • разместить в них информацию о себе (фотографии, хобби, планы на будущее…), • текст форматировать средствами HTML; Работу сдать за день до следующего урока. Закрепление изученного материала Для предстоящий работы нам нужно разбиться на две группы. Сядьте, пожалуйста, по группам, выберите капитана, обратите внимание, что перед каждой группы есть сигнальные карточки. Вы получаете карточки, ваша задача: - если задание за компьютером выполнено верно, поставьте пять баллов, если есть одна ошибка – четыре балла, если 2 ошибки – три балл, и не одного балла, если ошибок больше, чем три. Давайте подведем итоги, какая команда набрала больше всех баллов. Все участники команды – победителя получают сегодня отличные оценки. У остальных ребят еще будет возможность заработать свои пятерки. Подведение итогов занятия «Что нового вы узнали сегодня на уроке?» Молодцы ребята, мы сегодня хорошо поработали. Давайте подведем итог урока. Сегодня мы с вами как размещаются сайты в сети Интернет. Мы закрепили умение создавать сайт в сети Интернет Рефлексия - анкета, которая позволяет осуществить самоанализ, дать качественную и количественную оценку уроку. Учащихся можно попросить аргументировать свой ответ, например: 1. На уроке я работал (активно - пассивно). 2.Своей работой на уроке я (доволен - не доволен). 3.Урок для меня показался (коротким - длинным). 4.За урок я (не устал – устал). 5.Материал урока мне был (понятен - не понятен, полезен – бесполезен). 6.Домашнее задание мне кажется (легким – трудным). Обсуждая результаты своих наблюдений, учащиеся смогут объективно оценить свою активность, качество работы.
