Разработка Web-сайтов с использованием языка разметки гипертекста HTML (8-9 классы)

Презентация на тему: Разработка Web-сайтов с использованием языка разметки гипертекста HTML Выполнила ученица 8А класса Земелькина Екатерина

Web-страницы Web-страницы. Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере. Основными достоинствами 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-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).

Структура Web-страницы HTML-код страницы помещается внутрь контейнера <,HTML>,<,/HTML>,. Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание. Заголовок Web-страницы заключается в контейнер <,HEAD>,<,/HEAD>, и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения. Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называетсяконтейнером). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами. Название страницы помещается в контейнер <,TITLE>,<,/TITLE>, и при просмотре отображается в верхней строке окна браузера. Отображаемое в браузере содержание страницы помещается в контейнер <,BODY>,<,/BODY>, (рис. 6.26): <,HTML>, <,HEAD>, <,ТITLE>,Компьютер<,/ТITLE>, <,/HEAD>, <,BODY>, Компьютер и ПО <,/BODY>, <,/HTML>,

Сохранение Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке. Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, Компьютер), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.

Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов молено задать различные параметры форматирования текста. Заголовки. Размеры шрифтов заголовков задаются парами тэгов от <,Н1>,<,/Н1>, (самый крупный) до <,Н6>,<,/Н6>, (самый мелкий). Шрифт. Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE=Arial), атрибут SIZE - размер шрифта (например, SIZE=4). Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R=blue). Значение атрибута COLOR можно задать либо названием цвета (например, red, green, blue и т. д.), либо его шестнадцатеричным значением. Шестнадцатеричное представление цвета использует RGB-формат #RRGGBB, где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие - интенсивность зеленого (green) и две последние - интенсивность синего (blue) цвета. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная - FF. Например, синий цвет задается значением #0000FF.

Выравнивание текста Выравнивание текста. Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALlGN=left, выравнивание по правой границе: ALIGN=right, выравнивание по центру: ALIGN= center. Таким-образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом: <,FONT COLOR=blue>, <,Н1 ALIGN=center>,Компьютер и ПО<,/Н1>, <,/FONT>,

Горизонтальная линия. Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга <,HR>,. Абзацы. Разделение текста на абзацы производится с помощью контейнера <,Р>,<,/Р>,. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта. Домашняя страница сайта. На домашней странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на домашнюю страницу сайта Компьютер текст, разбитый на абзацы с различным выравниванием: <,Р ALIGN=left>,Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.<,/Р>,  <,Р ALIGN= right>,Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.<,/Р>, Таким образом, домашняя страница сайта Компьютер будет содержать отцентрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев (рис. 6.27): <,FONT COLOR=blue>, <,Н1 ALIGN=center>, Компьютер и ПО <,/Н1>, <,/FONT>, <,HR>, <,Р ALIGN=left>,Ha этом сайте...<,/Р>, <,Р ALIGN =right>, Терминологический словарь ...<,/Р>,

Вставка изображений в Web-страницы На Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов - GIF, JPEG и PNG. Вставка изображений. Для вставки изображения используется тэг <,IMG>, с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например: <,IMG SRC=computer.gif>, Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например: <,IMG SRC=C:\computer\computer.gif>, Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет-адрес этого файла. Например: <,IMG SRC=http://www.server.ru/coraputer.gif>,

Положение рисунка Положение рисунка относительно текста. Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа). На домашней странице сайта Компьютер логично разместить изображение компьютера. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид (рис. 6.28): <,IMG SRC=computer.gif ALIGN=right>,

Вставка Вставка альтернативного текста. Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст. Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке: <,IMG SRC=computer.gif ALIGN=right ALT=Компьютер>,

Гиперссылки на Web-страницах Гиперссылки. Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки. Гиперссылка создается с помощью универсального тэга <,А>, и его атрибута HREF, указывающего, в каком файле хранится загружаемая Web-страница: <,А HREF=Адрес>,Указатель ссылки<,/А>, Если загружаемая в браузер Web-страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например: <,А HREF=f ilename . htm>,Указатель ссылки<,/А>, Если загружаемая в браузер Web-страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например: <,А HREF=http://www.server.ru/Web-сайт/ filename. htm>,Указатель ссылки<,/А>,

Указатель Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст, обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок рука. Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке. Гиперссылки могут содержать адреса не только Web-страниц, но и файлов других типов. Активизация таких гиперссылок будет приводить: к просмотру изображения в браузере: <,А HREF=picture.jpg>,Изображение<,/A>, к запуску проигрывателя, встроенного в браузер и воспроизведению звукового файла: <,А HREF=sound.wav>,Звук<,/A>, к сохранению файла на локальном компьютере с использованием встроенного в браузер менеджера загрузки файлов: <,А HREF=Apxив.ziр>,Скачать файл<,/А>,

Панель навигации Панель навигации по сайту. Создадим папку сайта Компьютер и добавим в сайт пустые страницы Программы, Словарь, Комплектующие и Анкета. Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие пустые страницы должны иметь заголовки, но могут пока не иметь содержания: <,HTML>, <,HEAD>, <,ТITLЕ>,Заголовок страницы<,/ТITLЕ>, <,/HEAD>, <,BODY>, <,/BODY>, <,/HTML>, На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.

Размещение Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами ( ). Такое размещение гиперссылок часто называют панелью навигации. Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации: <,Р ALIGN=center>, [<,А HREF=software . htm>,Программы<,/A>,]    [<,A HREF=glossary.htm>,Словарь<,/A>,]    [<,A HREF=hardware.htm>,Комплектующие<,/А>,]   [<,A HREF=anketa.htm>,Aнкетa<,/A>,]  <,/P>,

Гиперссылка на адрес электронной почты. Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер <,ADDRESS>,<,/ADDRESS>,, который задает стиль абзаца, принятый для указания адреса: <,ADDRESS>, <,А HREF=mailto:username@server.ru>,E-mail: username@server.ru<,/A>, <,/ADDRESS>, Теперь по щелчку по ссылке адреса электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке Кому будет указан заданный в ссылке адрес. Итак, созданная домашняя страница Web-сайта Компьютер содержит заголовок, изображение компьютера, два абзаца текста, панель навигации и ссылку на адрес электронной почты (рис. 6.29).

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

Нумерованные списки. Нумерованный список располагается внутри контейнера <,OL>,<,/OL>,, а каждый элемент списка определяется тэгом <,LI>,. С помощью атрибута TYPE тэга <,OL>, можно задать тип нумерации: арабские цифры (по умолчанию), I (римские цифры), а (строчные буквы) и ДР.: <,OL>, <, LI >,Системные программы <, LI >,Прикладные программы <, LI >,Системы программирования <,/OL>,

Маркированные списки. Маркированный список располагается внутри контейнера <,UL>,<,/UL>,, а каждый элемент списка определяется тэгом <, LI >,. С помощью атрибута TYPE тэга <,UL>, можно задать вид маркера списка: disc (диск), square (квадрат) или circle (окружность): <,UL TYPE=square>, <, LI >,текстовые редакторы, <, LI >,графические редакторы, <, LI >,электронные таблицы, <, LI >,системы управления базами- данных. <,/UL>, На Web-страницу Программы поместим нумерованный список, содержащий перечень основных типов программного обеспечения компьютера. Во второй элемент основного нумерованного списка вставим вложенный маркированный список (рис. 6.30).

Список определений. Список определений располагается внутри контейнера <,DL>,/<,DL>,. Внутри него текст оформляется в виде терминов, которые выделяются одинарными тэгами <,DT>, и определений, которые следуют за одинарными тэгами <,DD>,. Web-страницу Словарь мы представим в виде словаря компьютерных терминов (рис. 6.31): <,DL>, <,DТ>,Процессор <,DD>,Центральное устройство компьютера, производящее обработку информации в двоичном коде. <,DТ>,Оперативная память <,DD>,Устройство, в котором хранятся программы и данные. <,/DL>,

Конец.