Слайд 1Web-сайты и Web-страницы
Подготовила:
Табашина О.Н.
Слайд 2Web-сайт
Публикации во Всемирной паутине Интернет реализуются в форме Web-сайтов.
Web-сайт напоминает журнал,
содержащий информацию, посвященную какой-либо теме или проблеме.
Web-сайт состоит из Web-страниц, объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты.
Слайд 3Web-сайт
Имеет титульную страницу (страницу с оглавлением), на которой имеются гипперссылки на
его основные разделы (Web-страницы).
Гиперссылки так же имеются на других Web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту.
Слайд 4Интерактивность
Интерактивность сайта обеспечивают различные формы, с помощью которых посетитель сайта может
регистрироваться на сайте, заполнить анкету и так далее.
Слайд 5Мультимедийность
Кроме текста Web-сайты могут содержать иллюстрации, анимацию, звуковую- и видеоинформацию.
Слайд 6Динамические объекты
Web-страницы могут содержать динамические объекты (исполнимые модули), созданные с использованием
сценариев на языках JavaScript и VBScript или элементов управления ActiveX.
Расположенные на сайте управляющие элементы (кнопки) позволяют пользователю запускать те или иные динамические объекты.
Слайд 7Создание сайтов
Для создания сайтов используется язык разметки гипертекстовых документов HTML.
Управляющие слова
языка HTML называются тегами.
Для создания сайтов используются простейшие текстовые редакторы (Блокнот).
Слайд 8Достоинства HTML-документов
Малый информационных объем
Возможность просмотра на ПК с различными ОС.
Слайд 9Основы языка HTML
Вид Web-страницы задается тегами, которые заключены в угловые скобки.
Теги
могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тегов (контейнера).
Закрывающийся тег содержит прямой слэш (/) перед обозначением.
Теги могут записываться как прописными, так и строчными буквами.
Слайд 10Основные теги
… - начало и конец программы.
… - содержит название документа
и справочною информацию о странице.
… - название страницы, которое отражается в строке заголовка окна.
… - содержание страницы, может включать текст, таблицы, бегущие строки, ссылки на графические изображения и звуковые файлы и т.д.
Слайд 11Программа на HTML
Компьютер
Все о
компьютере
index.html
Слайд 12Форматирование текста
… - заголовок первого уровня
… - заголовок второго уровня
… -
заголовок третьего уровня
…
- заголовок четвертого уровня
…
- заголовок пятого уровня
…
- заголовок шестого уровня
Слайд 13Атрибут align - выравнивание
center – по центру
right – по правому краю
left
– по левому краю
Слайд 14Тег FONT
С помощью этого тега можно задавать параметры форматирования шрифта любого
фрагмента текста.
Слайд 15Атрибуты
face – задает гарнитуру шрифта. Например:
face = “Arial”
size – задает
размер шрифта
size=4
color - задает цвет шрифта
color=“blue”
color=“#0000ff”
Слайд 16HR – горизонтальная линия
Заголовок принято отделять от остального содержания страницы горизонтальной
линией с помощью одиночного тега
.
Слайд 17Разделение текста на абзацы
Разделение текста на абзацы происходит с помощью тега
.
При просмотре в браузере абзацы отделяются друг от друга интервалами.
Для каждого абзаца можно задать определенный тип выравнивания.
Слайд 18Текст титульной страницы
На этом сайте вы сможете получить различную информацию
о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможите заполнить анкету.
Слайд 19Программа на HTML
Все о
компьютере
На этом сайте…
Терминологический словарь…
Слайд 20Вставка изображений
На Web-страницы обычно помещают изображения, чтобы сделать их визуально более
привлекательными.
На Web-страницах можно размещать графические файлы трех форматов – GIF, JPG, и PNG.
Слайд 21Вставка рисунка
Для вставки рисунка используется тег с атрибутом src, который
указывает место хранения файла на компьютере или в Интернете.
Если рисунок находится в той же папке, что и WEB-страница.

Если рисунок находится во вложенной папке каталога WEB-страницы.
Слайд 22Атрибуты alt и align
alt – поясняющий текст (название рисунка) появляется при
наведении на рисунок указателя мыши.
align – выравнивание может применять 5 значений:
Top - верх
Middel – середина
Bottom – низ
Left – слева
Right – справа
Слайд 23Программа на HTML
Все о
компьютере
На этом сайте…
Терминологический словарь…
Слайд 24Страницы сайта
Software.html – Программы
Glossary.html – Словарь
Hardware.html – Комплектующие
Anketa.html - Анкета
Слайд 25Гиперссылки на Web-страницах
Титульная страница сайта должна предоставлять возможность перехода к другим
его страницам.
Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимо создать заготовки Web-страниц.
Слайд 26Гиперссылки
Гиперссылка состоит из двух частей:
Указателя ссылки – то, что мы видим
на Web-странице (текст или рисунок), обычно выделена синим цветом и подчеркиванием. Активизация гиперссылки вызывает переход на другую страницу.
Адресной части ссылки представляет собой URL-адрес документа, на который указывает ссылка.
Слайд 27Гиперссылка
Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому
обеспечивает переход на Web-страницу, указанную в адресной части ссылки.
Слайд 28Панель навигации
Гиперссылки принято размещать в нижней или левой части страницы. Такое
размещение гиперссылок называется панелью навигации.
Нижняя панель навигации представляет собой абзац выровненный по центру, в котором указатели гиперссылок разделены непрерывными пробелами ( )
Слайд 29Гиперссылка на HTML
Указатель гиперссылки
Слайд 30Панель навигации 1 страницы
[Главная]
[Программы] [Словарь]
Слайд 31Панель навигации 2 страницы
[Главная]
[Программы]
[Словарь]
Слайд 32Панель навигации 3 страницы
[Главная]
[Программы] [Словарь]
Слайд 33Панель навигации 4 страницы
[Главная]
[Программы] [
href=“glossary.htm”>Словарь]
[Комплектующие]
Слайд 34Списки на Web-страницах
Виды списков:
Нумерованные
Маркированные
Вложенные
Слайд 35Нумерованные списки
Для их создания используется тег …
Элементы списка задаются тегом
Атрибут
type тега
задает вид номера
По умолчанию арабские цифры
type=“I” – Римские цифры
type=“a” – строчные буквы
Слайд 36Маркированные списки
Для их создания используется тег …
Элементы списка задаются тегом
Атрибут
type тега
задает вид маркера
Type=“disc” – диск
Type=“square” – квадрат
Type=“circle” – окружность
Слайд 37HTML-код 2 страницы
Программы
Программное обеспечение
Слайд 38Код 2 страницы
Системные программы
Прикладные программы
type=“square”>
Текстовые редакторы;
Графические редакторы;
Электронные таблицы;
Системы управления базами данных
Системы программирования
ссылки
Слайд 39Списки определений
Для их создания используются теги …
Для оформления термина используется тег
Для оформления определения тег
Слайд 40HTML-код 3 страницы
Словарь
Компьютерные термины
Слайд 41HTML-код 3 страницы
Процессор
Центральное устройство компьютера, производящее
обработку информации в двоичном коде.
Оперативная память
Устройство, в котором хранятся программы и данные.
ссылки
Слайд 42Литература
Угринович Н.Д., Информатика и информационные технологии. Учебник для 10-11 классов. М.:
БИНОМ. Лаборатория знаний, 2010.