Содержание и структура сайта.
реклама
Содержание и структура сайта Содержание и структура сайта. Информатика 9 класс Токар И.Н. Информатика ФГОСС Поиск информации. Проверка домашней работы: Учебник § ______ РТ: № ___, ___ Как мы сидим за компьтером Содержание и структура сайта Что такое WEB-сайт? • WEB сокращение от WWW (WorldWide Web) • WEB-сайт – совокупность гипертекстовых документов, объединенных общей тематикой, структурой и навигацией. Содержание и структура сайта Классификация WEB-сайтов • • • • личные страницы информационные WEB-сайты коммерческие сайты дистанционное обучение и консультирование • поисковые машины, каталоги Содержание и структура сайта Создаёт сайт WEB - дизайнер Web-дизайнер специалист, проектирующий структуру Web-сайта, подбирающий способы подачи информации и выполняющий художественное оформление Webпроекта. Содержание и структура сайта Содержание сайта должно отражать творческую жизнь участников объединения, привлекать внимание единомышленников. Структура (план) сайта - разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между Иерархическая структура сайта ними. Главная страница Новости и объявления Галерея Личные страницы Полезные ссылки Растровая графика Руководитель Векторная графика Ученик 1 Сканография Ученик 2 Содержание и структура сайта Структура Web-страницы • Пусть файл index.htm, содержит такой HTML-код: <html> <head> <title> Компьютер </title> </head> <body> Все о компьютере </body> </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 Структура страницы Заголовок сайта Фамилия, имя, класс Рассказ о себе Самое главное Гиперссылка – «активная» ссылка на другой документ. Гипертекст – текст, содержащий гиперссылки. Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой. WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа). Web-страница – текстовый файл, в котором описано размещение материала на экране. Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera). Язык HTML – языка разметки гипертекста. Тэг – команда языка HTML, которую выполняет браузер (может быть парным и непарным) Домашнее задание Продолжить работу над страницей: • добавить ячейки таблицы, • разместить в них информацию о себе (фотографии, хобби, планы на будущее…), • текст форматировать средствами HTML; Работу сдать за день до следующего урока. Информатика ФГОСС Поиск информации. Домашнее задание: § § ______ РТ: № ___, ___, ___
