Служба Wordl WIDE WEB Информационные сервисные услуги

Служба Wordl WIDE WEB

Информационные сервисные услуги (службы) Internet WWW (World Wide Web, web) (мультимедийная служба Всемирной паутины) Ø E-mail (Electronic mail) – электронная почта Ø FTP (File Transfer Protocol) (служба передачи файлов) Ø Ø Ø Ø Gopher, WAIS, Archie системы поиска информации на серверах и архивах Telnet – услуга доступ в виде терминального соединения Use. Net, BBS телеконференции, доски объявлений News – служба электронных новостей ICQ, IRC – службы быстрого обмена сообщениями сделки, покупки, просмотр статей, новостей, подписка

IP-телефония Ø IP-телефония это технология, позволяющая использовать Интернет или любую другую IP сеть в качестве средства организации телефонных разговоров.

Skype Ø Skype ( skaɪ p) — бесплатное проприетарное программное обеспечение с закрытым кодом, обеспечивающее шифрованную голосовую связь и видеосвязь через Интернет между компьютерами (Vo. IP). Skype имеет 663 миллиона пользователей по состоянию на сентябрь 2011 года.

Ø Ø Ø Компания Tele. Geography провела исследование, согласно которому Skype на сегодняшний день охватывает около трети международного телефонного трафика. И это является абсолютным рекордом для все сервисов интернет телефонии. Собранные аналитиками данные свидетельствуют о том, что за прошлый год общий объем телефонного трафика практически не изменился (вырос все лишь на 5 процентов) – составил 490 миллиардов минут. Однако объем внутреннего трафика Skype возрос за прошлый год аж на 44 процента, то есть около 167 миллиардов минут, что является немногим менее трети всего рынка.

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

Статические и динамические сайты Ø Web сайт, состоящий просто из набора HTML файлов, ссылающихся друг на друга, просто создать, он неприхотлив в обслуживании, надежен и не требует от сервера большой вычислительной мощности. Такие Web сайты называют статическими. Динамический Web сайт в ответ на запросы Web браузера пользователя может не просто выдавать заранее подготовленные страницы HTML, а создавать страницы «динамически» , на основе записей в базе данных. Такой подход к созданию сайта позволяет также отделить его содержимое от внешнего вида, появляется возможность быстро менять оформление сайта или даже предлагать пользователям несколько вариантов оформления на выбор.

Динамический сайт Ø Ø Динамический сайт — сайт, состоящий из динамичных PHP страниц (Hypertext Preprocessor )и прочего, в виде отдельных файлов. Страница сайта, показываемая в итоге , браузеру пользователя, формируется на стороне сервера динамически, по запросу, из страницы шаблона и отдельно хранимого содержимого (информации, скриптов и др. ). Как правило для отображения любого количества однотипных страниц используется одна страница шаблон, в которую подгружается соответствующее содержимое, это позволяет единомоментно корректировать внешний вид сайта (множество всех его страниц), редактируя всего лишь один шаблон. Редактирование собственно содержимого (как и страницы шаблона) может производиться как средствами самого сайта, так и с применением стороннего ПО. Возможность править все страницы предоставляется только определенной категории пользователей (например администраторам, или же зарегистрирванным пользователям).

ВЕБ УЗЕЛ, ВЕБ САЙТ Ø Несколько веб страниц, объединенных общей темой и дизайном, а также связанных между собой ссылками и обычно находящихся на одном ВЕБ сервере, образуют ВЕБ сайт.

Браузер Tallinna Teeninduskool - Teko 23. 09. 2012 Браузер — это программа, представляю щая в удобном для восприятия виде информацию, получаемую из Интернета. Это инструмент для просмотра ресурсов в Сети и, в меньшей степени, для взаимодействия с ними. (Web browser) —программное обеспечение для просмотра веб сайтов.

Ø Web-браузер – это независимое от платформы средство отображения Web страниц, написанных на языке HTML код пластичен – текст, если необходимо, перераспределяется в окне браузера, подстраиваясь под его размер. Ø Обращение браузера к серверу называется запросом, а ответ сервера браузеру – откликом.

Internet Explorer Windows Internet Explorer серия браузеров, разрабатываемая корпорацией Microsoft с 1995 года. Входит в комплект OC Windows. Занимает первое место по числу пользователей (рыночная доля в феврале 2012 — 52, 84 % (по данным Global. Stats))

Mozilla Firefox свободно распространяе мый браузер, входящий в набор программ Mozilla Application Suite, разработкой и распространением которого занимается Mozilla Corporation. Третий по популярности браузер в мире и второй среди свободного ПО — в мае 2012 года его рыночная доля составила 25, 55 %.

Safari браузер, разработанный корпорацией Apple и входящий в состав операционных систем Mac OS X и i. OS. Занимает четвёртое место по числу пользователей (рыночная доля в ноябре 2011 года — 6, 66 %)

Google Chrome браузер, разрабатывае мый компанией Google на основе свободного браузера Chromium. По данным Stat. Counter браузер находится на первом месте в мире по популярности, а его рыночная доля в мае 2012 года составляла 32, 43 %

Opera веб браузер и программный пакет для работы в Интернете. Разработан в 1994 году. Суммарная рыночная доля Opera на мировом рынке браузеров составляет по разным источникам от 5 до 10 %

Махthоn Maxthon бесплатный веб браузер для Microsoft Windows, созданный китайской компанией Maxthon International Limited. По состоянию на 16 апреля 2012 года с официального сайта программы было совершено более 650 миллионов загрузок

Internet Explore r Mozill a Firefox Oper a Floc k Браузер ы Махthоn Google Chrom e Safa ri

НИГМА

Quintura Отличие Quintura от традиционных поисковых систем раскрывается в концепции «Увидеть и Найти» — увидеть на карте и найти в интернете. Quintura позволяет визуально находить в Рунете документы на русском языке и картинки с учетом морфологии русского языка. Ø Особенность Quintura — визуальное «Облако» или «Карта» слов ассоциаций между картинками или документами, которая является удобным навигатором по ним. Используя принцип Quintura, когда поиск осуществляется одним щелчком мыши, пользователь видит слова на карте и щёлкает мышкой по ним, быстро находя необходимые картинки и документы. Ø Традиционные поисковые системы, как правило, «равнодушны» к предмету поиска пользователя в Интернете, включая поиск по картинкам. В отличие от них, Quintura предлагает слова ассоциации в виде визуального облака. Ø

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

Клиентские языки Ø Ø Ø Ø Программы на клиентских языках обрабатываются на стороне пользователя, как правило их выполняет браузер. Результат выполнения программы скрипта зависит от браузера пользователя. То есть если пользователь запретил выполнять клиентские программы, то они исполняться не будут, как бы ни желал этого программист. Кроме того, может произойти такое, что в разных браузерах или в разных версиях одного и того же браузера один и тот же скрипт будет выполняться по разному. Самыми распространенными клиентскими языками программирования являются: Java. Script VBScript Action. Script Java[1]

Серверные языки Когда пользователь дает запрос на какую либо страницу (переходит на неё по ссылке или вводит адрес в адресной строке своего браузера), то вызванная страница сначала обрабатывается на сервере, то есть выполняются все программы, связанные со страницей, и только потом возвращается к посетителю по сети в виде файла. Ø Этот файл может иметь расширения: HTML, PHP, ASPX, Perl, SSI, XML, DHTML, XHTML. Ø

К серверным языкам программирования можно отнести: Ø PHP, Perl, Python, Ruby, любой. NET язык программирования (технология ASP. NET), Java

Язык HTML (Hyper Text Markup Language) – язык разметки гипертекста, включает в себя способы оформления гипертекстовых документов. SGML (Standard Generalized Markup Language) стандартный язык обобщенной разметки. XML (Extended Markup Language) - расширяемый язык разметки.

Основные понятия Гипертекст – структура, позволяющая устанавливать смысловые связки между элементами текста и другими документами. Гиперссылка – фрагмент текста, который является указателем на другой файл или объект. Web-узел или Web-сайт – группа Web-страниц, принадлежащих одному автору или одному издателю, взаимосвязанных общими гиперссылками.

Фрейм (Frame) Этот термин имеет два значения: • Область документа со своими полосами прокрутки • Одиночное изображение в анимационном графическом файле (кадр)

Апплет (Applet) Программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы Браузер (Browser) Программа для просмотра Web-страницы

Скрипт или сценарий (Script) Программа, включенная в состав Webстраницы, для расширения ее возможностей CGI (Common Gateway Interface) – общее название программ, которые работая на сервере, позволяют расширить возможности Web –страничек.

Что могут содержать Web-страницы: 1). Тексты; 2). Таблицы; 3). Логотипы; 4). Эмблемы;

Что могут содержать Web-страницы: 5). Графику Графические файлы самые распространенные и выгодные в формате . jpg (jpig), менее распространенные gif , но могут содержать не более 256 цветов, редко . png, и . bmp т. к. они имеют большие размеры, а основное правило хорошо оформленной страницы, это быстрая загрузка!!! По этому правилу размер любого графического файла не должен превышать 70 Кбайт или 400 -500 пикселей со средним качеством. 8

9 Графические форматы Ø GIF - Graphic Interchange Format. При сохранении изображения в этом формате количество используемых цветов не должно превышать 256. Ø JPEG (JPG) - Joint Photography Experts Group. Этот формат допускает сохранение изображений, содержащих миллионы цветов.

10 Что могут содержать Web-страницы: 6). Банеры – анимированные и не анимированные, выполняют чаще рекламную роль и роль переключателей на другие страницы. Øбольшие имеют размер 468 х 60 пикселей, Øсредние 120 х 60, Øмаленькие 88 х 31. Собираются из файлов, созданных, например, в Foto. Shope. Это может быть текст, сменяющий другой или картинки. Могут быть анимированные кнопки. Gif- анимация – это, например, при наведении на кнопку появляется надпись

Что могут содержать Web-страницы: 7). Мультимедиа –файлы (содержащие музыку (. mid), речь (. wav), видео (. avi). avi-фрагменты это очень большие файлы, поэтому на Web-страницах они не должны превышать 100 Кбайт wav- файлы лучше упаковывать, для чего есть специальные программы, которые сжимают в 10 раз (например, 10 секунд звучания это примерно 250 Кбайт можно упаковать до 25 Кбайт) mid – файлы это в основном инструментальная музыка без голоса. Поддерживаются только браузером Internet Explorer. . mp 3 – файлы тоже можно использовать, но они очень большие(средний размер 5 -7 Мбайт, 3 мин 3 Мбайта. Эти файлы (avi, wav, mid, mp 3) практически не сжимаются. Из 3 Мбайт получается приблизительно 2, 8 Мбайт. Gif-файлы сжимаются на 20%.

Что могут содержать Web-страницы: 8) Скрипты – программы, которые расширяют возможности страниц, делают ее активной с обратной связью (формы, регистрационные листы, пишутся на языке Jawa и т. п. ). Можно делать самим (бегущая строка, падающие буквы и т. п. ), а можно брать готовые. 9). Апплеты – программы, которые загружаются с сайта на компьютер клиента при открытии страницы, создают различные видеоэффекты (перелистывание страниц, вихревое движение, эффект пламени, деформации изображения, пишутся на языке Jawa с расширением. class).

Что могут содержать Web-страницы: 10). Флэш-анимации – файлы сделанные по технологии макромедиа с расширением . swf. В этих файлах происходит действие, рекламные ролики. (Они быстро открываются, но для их открытия дополнительно к браузеру должна быть установлена специальная программа, позволяющая просматривать эти файлы, если программа не установлена, то как правило выдается запрос на ее загрузку из интернет). 11). Гиперссылки – ссылки на другие станицы. 12). Таблицы стилей –то файлы с расширением . css, в которых прописаны все изменения. Такое оформление придают страницам современный, эстетический стиль.

HTML - теги Язык разметки гипертекстовых документов HTML представляет собой совокупность команд, называемых тегами (от английского tag). Тег – начальный или конечный маркер элемента записывается в угловых скобках и состоит из имени, за которым может следовать список атрибутов (все атрибуты располагаются в начальном теге). Большинство тегов имеют два компонента: открывающий и закрывающий. Закрывающий компонент имеет то же название, но при записи перед названием ставится символ « / » .

Назначение HTML-тегов Ø Форматирования текста; Ø Описания кадров и форм; Ø Форматирования таблиц и списков; Ø Организации ссылок на другие ресурсы; Ø Вставки изображений и расширений HTML.

Структура HTML-документа <HTML> Начало разметки документа …. <HEAD> <BODY> …. </BODY> </HTML> </HEAD> содержание страницы Конец разметки документа

Между тегами <Title> и </Title> пишется название сайта Тег <meta> несет служебную информацию о сайте и не отображается на экране браузера: • Имя автора страницы; • Информация о кодировке; • Набор ключевых слов для поиска, отображающих содержание сайта.

Пример Web -страницы <HTML> <HEAD> <TITLE> О братьях наших меньших </TITLE> <META http-equiv=“Content-Type” content=“text/html; charset=windows-1251”> <META name=“Author” content=“Ivanov Ivan”> <META name = “Keywords” content=“Животные, природа, зоопарк, фауна”> </HEAD> <BODY> Здесь размещается содержимое страницы </BODY> </HTML>

Пример Web –страницы с метатегами <HTML> <HEAD> <TITLE> школа</TITLE> < META NAME=“keywords” CONTENT =“школа, класс, урок, обучение, образование, знание”> </HEAD> <BODY> Сайт, посвященный школе </BODY> </HTML>

Задание 1 Создание структуры страницы 1. Откройте текстовый редактор блокнот. 2. Наберите структуру приведенной ранее страницы 3. Между элементами <BODY></BODY> наберите Моя первая страница 4. Сохраните файл с именем index. htm в папке STRANICA 5. Просмотрите страницу в браузере.

Форматирования текста Форматировать текст можно традиционными способами: выделять курсивом, полужирным, выбирать шрифт, размер, цвет, выравнивать текстовые фрагменты. Все эти характеристики задаются при помощи соответствующих атрибутов в теге управления шрифтом текст Размер задается атрибутом SIZE, который может принимать значения от 1 до 7. Пример. тексту задан размер 3

COLOR – атрибут для определения цвета, название которого задается числом в шестнадцатеричной системе счисления или название на английском языке color=“#FF 0000” color=”red” RGB R-red G-green 00 -FF 0 -255 B - blue 00 -FF 0 -255 Пример. это шрифт синего цвета

Названия цветов и значения RGB

FACE – позволяет задавать тип шрифта или несколько шрифтов (через точку с запятой) Пример. Все атрибуты могут быть использованы совместно внутри тега Пример. Это шрифт arial размером 3 синего цвета

Форматирование шрифтов тест выделение шрифта полужирным шрифтом тест выделение шрифта курсивом тест подчеркнутый шрифт x2 верхний индекс (х2) x2 нижний индекс (х2)

Примеры со шрифтами Пример действия параметра FASE ШРИФТ РАЗНОГО НАЧЕРТАНИЯ

Примеры со шрифтами Пример действия параметра SIZE ШР ИФ Т РА ЗН ОГ О РА ЗМ ЕР>/FONT> А

Примеры со шрифтами Пример действия параметра COLOR ШРИФТ РАЗНОГО ЦВЕТА ЗАДАНИЕ Написать разными по цвету буквами: КАЖДЫЙ ОХОТНИК ЖЕЛАЕТ ЗНАТЬ ГДЕ СИДИТ ФАЗАН

Форматирование шрифтов <pre>т е с т </pre> -сохраняет исходный вид отформатированного текста с пробелами, разбивками на строки и т. п. (т е с т ) Пример <H 3 ALIGN=CENTER> ПУТЬ К МУДРОСТИ </H 3> <PRE> К мудрости путь – по ухабам ошибок; Иди же и носа не вешай: Ушибы, ушибы, и снова ушибы Но реже и реже, и реже… </PRE>

Форматирования заголовков Существует шесть уровней заголовков <h 1>тест</h 1> тест <h 2>тест</h 2> тест <h 3>тест</h 3> тест <h 4>тест</h 4> тест <h 5>тест</h 5> тест <h 6>тест</h 6> тест

Пример <H 1 ALIGN=CENTER> ОСНОВНОЙ ЗАГОЛОВОК (H 1) ПО ЦЕНТРУ</H 1> <H 2 ALIGN=RIGHT> ПОДЗАГОЛОВОК (Н 2) ПО ПРАВОМУ КРАЮ </H 2> <H 3 ALIGN=CENTER> ПОДЗАГОЛОВОК (Н 3), ВЫРАВНИВАНИЕИ ПО УМОЛЧАНИЮ </H 3> <H 4 ALIGN=CENTER> ПОДЗАГОЛОВОК (Н 4) ПО ЦЕНТРУ</H 4> <H 5 ALIGN=LEFT> ПОДЗАГОЛОВОК (Н 5) ПО ПРАВОМУ КРАЮ</H 5> <H 6 ALIGN=RIGHT> ПОДЗАГОЛОВОК (Н 6) ПО ПРАВОМУ КРАЮ</H 6>

36

Разбивка на абзацы 37 текст - новый абзац, можно использовать только начальный тег, т. к. следующий элемент обозначает не только начало следующего абзаца, но и конец предыдущего тест тест перенос текста на новую строку без абзацного отступа тест<HR>тест разделительная линия тест

Параметры тега HR Параметр тега HR Назначение ALIGN Выравнивание по краю или по центру. Имеет значение LEFT, CENTER, RIGHT WIDTH Устанавливает длину линии в пикселях или процентах к окну браузера. SIZE Устанавливает толщину линии в пикселях NOSHADE Отменяет рельефность линии COLOR Указывает цвет линии. Использует стандарт RGB или стандартное имя.

Примеры отлиновок 39 NOSHADE запрет выпуклости <H 2 ALIGN=CENTER> ПРИМЕРЫ ОТЛИНОВОК</H 2> <HR SIZE=2 WIDTH=80% ALIGN=CENTER> простая отлиновка толщиной 2 пикселя <HR SIZE=20 WIDTH=20% ALIGN=CENTER> толстая и короткая линия <HR SIZE=20 WIDTH=20% COLOR=RED NOSHADE ALIGN=CENTER> такая же линия красного цвета <HR SIZE=30 WIDTH=30 COLOR=BLACK NOSHADE ALIGN=CENTER>черный квадрат 30 х30 пикселей

40 Пример. Уронили мишку на пол, Оторвали мишке лапу, Все равно его не брошу, Потому, что он хороший На экране браузера увидим разбиение текста на четверостишие

41 Выравнивание абзацев Вместе с элементом абзац можно использовать атрибут выравнивания align Значение параметра ALIGN Действие LEFT Выравнивание текста по левой границе окна браузера. CENTER Выравнивание текста по центру окна браузера. RIGHT Выравнивание по правой границе окна браузера. JUSTIFY Выравнивание по двум сторонам.

Пример 42 По умолчанию выравнивание по левому краю Центрирование всех строк абзаца, в том числе включая принудительные разрывы Этот абзац выровнен по правому краю Этот абзац выровнен по левому краю, также, как и по умолчанию Этот абзац выровнен одновременно по левому и правому краям, но в старых версиях браузеров воспринимается как выравнивание по левому краю

адание 2 Форматирование текста на странице 1. Создайте новую страницу в редакторе блокнот. 2. В элемент <title> укажите «Практическая работа 2» и вашу фамилию. 3. 43 Отформатируйте текст по заданию: Домашние животные (заголовок H 1) Собаки (заголовок H 2, центральное выравнивание} Сторожевые (выравнивание слева, полужирный шрифт) Охотничьи (выравнивание справа, полужирный шрифт) Дрессировка (выравнивание по центру, полужирный курсивный шрифт) Клубы Выставки Площадки (выравнивание по центру, размер шрифта 14, цвет красный) Стихотворение (выравнивание по центру, синий шрифт) По жизни я скромен Оваций не надо! Но как же я классно Смотрюсь у снаряда! (Выравнивание по левому краю, размер шрифта 10)

дание 3 Форматирование текста на странице 1. Создайте новую страницу в редакторе блокнот. 2. В элемент <title> укажите «Практическая работа 3» и вашу фамилию. 3. Отформатируйте текст по заданию: <html> <head> <title>Практическая работа 3 Фамилия </title> </head> <body> Каждый охотник желает знать, где сидит фазан </body> </html> 44

Задание 4 Форматирование заголовков 45 1. Создайте новую страницу в редакторе блокнот. 2. В элемент <title> укажите «Практическая работа 4» и вашу фамилию. 3. Отформатируйте текст по заданию: <html> <head> <title>Практическая работа 4 Фамилия </title> </head> <body> <h 1> Роман</h 1> <h 2> Книга</h 2> <h 3> Том</h 3> <h 4> Часть</h 4> <h 5> Глава</h 5> <h 6> Параграф</h 6> </body> </html>

Задание 5 Форматирование абзацев 1. 46 Создайте новую страницу в редакторе блокнот. 2. В элемент <title> укажите «Практическая работа 5» и вашу фамилию. 3. Отформатируйте текст стихотворения тремя разными способами оформления: Уж небо осенью дышало. Все реже солнышко блистало. Короче становился день. Текст шрифта красный, размером 4, курсив

47 Пример 1 ответ к заданию 5 html> <head> <title> 1 способ форматирования </title> </head> <body> Уж небо осенью дышало. Все реже солнышко блистало. Короче становился день. </body> </html>

48 Пример 2 ответа к заданию 5 html> <head> <title>2 способ форматирования </title> </head> <body> Уж небо осенью дышало. Все реже солнышко блистало. Короче становился день. </b > </body> </html>

49 Пример 3 ответа к заданию 5 html> <head> <title>3 способ форматирования </title> </head> <body> <pre>< Уж небо осенью дышало. Все реже солнышко блистало. Короче становился день. > </pre> </body> </html>

Бегущая строка <MARQUEE>…</MARQUEE> 50 Параметры: BGCOLOR- фоновый цвет плашки WIDTH HEIGHT -ширина и высота плашки LOOP -количество повтороений (INFINITE непрерывно) SCROOLLAMOUNT-скорость прокручивания, на котором строка смещается при каждом шаге прокрутки в пикселях SCROOLLDELAY- задает задержку в миллисекундах между шагами прокрутки DIRECTION-указывает напрвление прокрутки BEHAVIOR=SCROOLL -напрвление слева направо BEHAVIOR=SLIDE - напрвление справа налево

Пример бегущей строки <MARQUEE BEHAVIOR=ALTERNATE DIRECTION=RIGHT LOOP=5 SCROOLLAMOUNT=3 SCROOLLDELAY=100 WIDTH=50% HEIGHT=150 BGCOLOR=“#F 0 F 000” HSPACE=10 VSPACE=10> <TABLE WIDTH=300 BORDER=1 BGCOLOR=“FFF 0 DE”> <TR> <TD ALIGN=CENTER VALIGN=MIDDLE WIDTH=100> </TD> <TD ALIGN=CENTER VALIGN=MIDDLE> НАЗВАНИЕ ФИРМЫ ПРИХОДИТЕ ПОЖАЛУЙСТА! </TD> </TR> </TABLE> </MARQUEE> Строка пять разпроплывает вправо влево, затем останавливается возле правого края желтой плашки

52

53 Маркированные списки <ul> <li>первый элемент</li> <li>второй элемент</li> </ul> Результат: · · первый элемент второй элемент

54 Нумерованные списки <ol> <li>первый элемент</li> <li>второй элемент</li> </ol> 1. первый элемент 2. второй элемент

55 Способы нумерации списков Способ нумерации задается за счет атрибута type Атрибут Вид нумерации type=“ 1” 1, 2, 3, 4… type=“i” i, iii, iv… Type=“I” I, III, IV… type=“a” a, b, c, d… type=“A” A, B, C, D…

Списки определений <dl> <dt>Термин</dt> <dd>Определение</dd> </dl> Результат: Термин Определение 56

ПРИМЕР <ol start=1 type=I> <li>введение </li> <li>назначение языка HTML</li> <li>команды теги HTML</li> <ol start=1 type=1> <li>форматирование текста </li> <ul type=disc> <li>жирность </li> <li>наклон </li> <li>подчеркивание </li> <li>индексы </li> <ul type=circle> <li>нижние </li> <li>верхние </li> <li>подчеркивание </li> </ul> <li> цвет </li> </ul> <li>работа с абзацами</li> </ol> <li>дизайн страницы</li> li>размещение сайта на сервере</li> </ol> 57

Задание 6 Создание списков 1. Создайте новую страницу в редакторе блокнот. 2. В элемент <title> укажите «Практическая работа 6» и вашу фамилию. 3. Отформатируйте текст по заданию: Солнце должно быть: (шрифт размером 7, красного цвета, выравнивание по центру) 1. Теплым. 2. Круглым. 3. Желтым. Снег должен быть: (выравнивание по центру, размер шрифта 7, синего цвета) А. Белым B. Холодным C. Пушистым (шрифт списков черный, размер 3) 58

Задание 6 -1 Создание списков Создайте страницы со следующими списками: Перечень покупок: • Говядина -1 кг • Масло сливочное -500 г • Хлеб - 2 батона • Молоко - 1 литр Алгоритм вычисления дробей: 1. очистить экран 2. ввести значения X и Y 3. если у=0, вернуться к пункту 2 4. вычислить z=x/y 5. вывести результат z 59

60

61 Задание фона страницы Для задания цвета фона на странице надо внутри начального элемента<BODY> указать атрибут bgcolor =“цвет”. Цвет задается также как и для шрифта названием или цифровым кодом. Пример <BODY BGCOLOR=“blue”>… </BODY> <BODY BGCOLOR=“ 00 FF 00”>… </BODY> <BODY BACKGROUND=“FON. JPG”>

62 Вставка рисунков IMG – тег для создания ссылки на графический файл. С его помощью также можно использовать изображение в гиперссылках, вставлять картинки в таблицы, использовать изображения для фона страницы. Не содержит конечного тега. Необходимым атрибутом является src- указатель пути к графическому файлу, alt – выводит текст, поясняющий загружаемый рисунок. Высоту и ширину рисунка задают с помощью атрибутов height и width. Рамка вокруг объекта задается атрибутом border. Пример. <IMG src=“boss. gif” border=2 height =121 width=76 alt=“мой портрет”> <BODY BACKGROUND=“WOOD. JPG”>

63 Примеры обтекания иллюстраций в документе <IMG src="pic. gif" > рисунок в центре, текст сверху и снизу <IMG src="pic. gif" align=left> рисунок слева <IMG src="pic. gif" align=right> рисунок справа

64 Задание 7 Размещение графики на Web - страницах 1. Создайте новую страницу в редакторе блокнот. 2. В элемент <title> укажите «Практическая работа 7» и вашу фамилию. 3. В элементе <BODY> задайте атрибут, чтобы цвет фона страницы был черным. 4. Сделайте надпись «Спокойной ночи» голубым цветом, 6 шрифтом, центральным выравниванием. 5. Вставьте горизонтальную линию красного цвета. 6. Сделайте надпись желтого цвета «Приятных сновидений» 8 шрифтом, центральным выравниванием. 7. Вставьте горизонтальную линию синего цвета толщиной 10 пикселей, длиной 50%, выровните по центру. 8. Рисунок

Задание 8 Размещение графики на Web - страницах 1. Создайте новую страницу в редакторе блокнот. 2. В элемент <title> укажите «Практическая работа 8» и вашу фамилию. 3. Разместите на странице рисунок 4. Сделайте надпись к рисунку 5. Создайте рамку вокруг рисунка шириной 2 пикселя. 6. Над рисунком поместите заголовок (например «Мир футбола» ) самого большого размера и выровняйте его по центру. 7. Вставьте горизонтальную линию синего цвета толщиной 8 пикселей, выровняйте по левому краю по центру. 65

Задание 9 изменение размеров изображения 66 1. Создайте новую страницу в редакторе блокнот. 2. В элемент <title> укажите «Практическая работа 9» и вашу фамилию. 3. В элементе <BODY> задайте атрибут, чтобы цвет фона страницы зеленым. 4. Вставьте изображение. Задайте его размеры 100 x 100 пикселей. 5. Отредактируйте картинку в графическом редакторе так, чтобы рисунок был на прозрачном фоне и добавьте это изображение на вашу страничку.

67

68 Гиперссылки условно можно разделить на следующие виды: • Внутренние –связывающие документы внутри одного и того же узла; • Внешние – связывающие Web-страницу с документами, не принадлежащими данному узлу; • Гиперссылка на почтовый адрес; • Метки-якоря – позволяющие переходить посетителю на определенные разделы документа.

Гиперссылки 69 <A href = “адрес ссылки”> текст для щелчка мыши </A> <A href = “адрес ссылки”> <IMG src=“ссылка на рисунок”> </A> Внутри тега <BODY> используется атрибут, задающий цвет гиперссылок link – задает цвет исходных ссылок vlink – задает цвет посещенных ссылок alink – задает цвет активных ссылок (цвет при нажатии мыши) Для указания электронной почты и запуска электронной программы используется ссылка: <A href =“mailto: vvv@mail. ru”> Иванов Иван</A>

70 Примеры гиперссылок <A href=“#new” > Новые поступления</A> - переход к строке той же страницы, помеченной тегом <A name=“new”> <A href=“pag 2. htm#new 1” > примечания</A> - переход на страницу сайта pag 2 к строке, помеченной тегом <A name=“new 1”> подробности читайте<A href=“pag 2. htm” > вторая страница </A> - ссылка на другую страницу того же сайта

71 Примеры гиперссылок <A href=“pag 2. htm” > IMG src=log. gif alt=“о нашей фирме” </A> - ссылка на другую страницу того же сайта, но ссылкой является рисунок <A href=“myfile. exe” title=” файл 10 мегабайт”> Скачать программу</A> -ссылка с подсказкой title <A ref=“http: //home. ifmo. ru/index. html”>тест</A> - внешняя ссылка

72 Примеры гиперссылок <a href=“proba. htm”>первая страница</a> <a href=“http: //www. yandex. ru”> yandex</a> <a href=“mailto: Jakov 21@yandex. ru”> Почта </a>

Задание 10 Создание гиперссылок 73 1. Создайте две страницы с именами str 1. htm str 2. htm 2. В элемение. TITLTRE укажите название странички 3. Задайте фон первой страницы зеленого цвета, а второй Синего 4. На первой странице задайте ссылку на вторую страницу <A href=“str 2. htm”> На вторую страницу</a> 5. На второй странице задайте ссылку на 1 страницу <A href=“str 2. htm”> На вторую страницу</a> 6. Поместите на страницы две разные картинки и проверьте работу гиперссылок

Задание 11 Создание гиперссылок 1. Создайте к страницам прошлого задания с именами str 1. htm str 2. htm еще одну страницу str 3. htm 2. Добавьте на первых двух страницах ссылку на 3 страницу? А на третьей ссылки на две первые 3. В теге <BODY> определите текст гиперссылок: все гиперссылки белые активные гиперсылки красные посещенные гиперссылки серые 4. На третьей странице задайте ссылки на вторую и первую страницы в виде рисунка кнопки <A href=“str 2. htm”> IMG src=“kn. gif”></a> 5. Задайте бордюр для кнопок=2 6. Проверьте работу гиперссылок