Создание Web-страниц. Изучение языка HTML. Язык HTML позволяет: 1) Создавать и редактировать Web-страницы, в том числе свою домашнюю Web-страницу, которую. - презентация

1 Создание Web-страниц. Изучение языка HTML. Язык HTML позволяет: 1) Создавать и редактировать Web-страницы, в том числе свою домашнюю Web-страницу, которую можно затем разместить в Интернете; 2) Редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.); 3) Создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты, благодаря гипертекстовым ссылкам и возможности вставлять в документ HTML рисунки, диаграммы, анимации, видеоклипы, музыкальное и речевое сопровождение, текстовые спецэффекты (например, бегущая строка).

2 Способы создания Web-страниц (или документов HTML): 1.Использование текстового редактора Блокнот (NotePad), встроенного в Windows, и просмотр результатов с помощью броузера. Этот самый простой способ рекомендуется начинающим 2.Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др. 3.Использование редактора Word, где создается текст документа, который затем конвертируется в HTML- формат.

3 Создание сайта с помощью блокнота (NotePad) 1. В редакторе Блокнот создается файл Web-страницы, который сохраняется с расширением *.htm. 2.Затем этот файл загружается и просматривается программой Internet Explorer. 3.Для вызова редактора Блокнот с целью редактирования файла Web-страницы во время ее просмотра в Internet Explorer, используется пункт меню Вид, Источник или В виде HTML. 4.После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer

4 Основные понятия языка HTML. 1.Элемент - это конструкция языка HTML, или контейнер, содержащий данные. Web- страница представляет собой набор элементов. 2. Тег - это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, например:. Конечный тег всегда снабжается косой чертой:. 3.Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки позволяют переходить от одного документа к другому. 4.Фрейм - область гипертекстового документа со своими полосами прокрутки. 5.Апплет - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы. 6.Скрипт - программа, включенная в состав Web-страницы для расширения ее возможностей. 7. Загрузка (DownLoad) - копирование документа с Web-сервера на компьютер клиента. 8.UpLoad - копирование документа c компьютера клиента на Web-сервер – используется при создании собственной Web-страницы (т.е. при ее опубликовании).

5 Общая структура простейшего HTML документа Комментарий Название документа Здесь расположен текст самого документа HTML.

6 Создание HTML документа (комментарии) или - Комментарий к документу. Он игнорируется броузером. Комментарий не является обязательным и может отсутствовать. - идентификатор всего блока HTML-команд. - идентификатор заголовка документа HTML. - идентификатор заголовка окна просмотра. - этот непарный тег применяется для указания подробной информации о документе. - идентификатор HTML-команд документа для просмотра. Три основных тега, и передают броузеру основную информацию для идентификации и организации документа. Все указанные теги - парные, то есть каждый из них заканчивается конечным тегом с косой чертой. Все команды можно писать как с маленькой буквы, так и с большой.

7 Теги форматирования текстового потока: - идентификатор конца абзаца. - идентификатор перевода строки. - идентификатор изображения горизонтальной линии. Эти теги одиночные, т.е. непарные, они не требуют тегов с косой чертой. - установка равноширинного шрифта. В конце нужен тег.

8 Парные теги форматирования заголовков и подзаголовков теги форматирования заголовков и подзаголовков документа:,,,,,. При этом заголовки будут выведены большими буквами, причем размер букв у тега будет самый большой, у меньше, у еще меньше и т.д

9 Парные теги форматирования символов текста: - идентификатор полужирного шрифта. - идентификатор выделенного шрифта. - идентификатор курсива. - идентификатор подчеркивания. - идентификатор перечеркивания. - идентификатор равноширинного шрифта (телетайпного или курьера). - задает увеличенный размер шрифта. - задает уменьшенный размер шрифта. - задает центрирование текста. - задает нижний индекс. Пример: x 1 +x 2 =x 3 - задает верхний индекс. Пример: Теорема Пифагора a 2 +b 2 =c 2

10 Теги форматирования абзацев: - выравнивание текста в абзаце по левому краю. - выравнивание текста в абзаце по правому краю. - выравнивание текста в абзаце по центру. - полное выравнивание по обоим краям экрана. align - атрибут выравнивания.

11 Теги списков. Они являются способом наглядного отображения структурированной информации. Упорядоченные списки служат для отображения последовательных операций или алгоритмов. Браузер автоматически генерирует номера для каждого пункта в списке. - идентификатор упорядоченного списка. В конце. Неупорядоченные списки служат для составления перечней, когда порядок следования пунктов несущественен. Перед каждым элементом будет стоять специальный списочный значок (точка). - идентификатор неупорядоченного списка. В конце. Отдельные элементы в упорядоченном и неупорядоченном списках помечают одиночным тегом, а элементы в списках определений тегами для термина и для значения термина. - идентификатор элемента в упорядоченном и неупорядоченном списке. Конечный тег может быть опущен. Списки определений обеспечивают специальное форматирование, как в словарях, для терминов и связанных с ними описаний.

12 Теги списков (продолжение) - идентификатор списка определений. В конце. - идентификатор термина в списке определений. - идентификатор значений термина в списке определений. Списки определений имеют вид: название термина 1 определение термина 1 другое определение термина Применение тегов списков изложено в Примерах 4 и 5.

13 Некоторые важнейшие теги HTML bgcolor= "цвет" задает цвет фона (bgcolor) и text=" цвет " - цвет текста (text), link=" цвет " цвет гипертекстовой ссылки (link). Задают еще alink=" и vlink="" -цвета активной и посещенной ссылки.

14 Оформление фона страницы - задает фоновый рисунок (обои) на Web-странице в файле back.jpg. - фоновый рисунок (обои)взят из файла tartan.bmp, причем указан путь этого файла. - задает цвет символов текста (атрибут color) и их размер (атрибут size). В конце нужен тег. - задает цвет горизонтальной линии. - атрибут size=N задает толщину линии в пикселах; атрибут width=M задает длину линиив пикселах; атрибут align=center (или left, или right) задает смещение линии (ее размещение в центре, или смещение влево, или вправо).

15 Вставка изображения в страницу - вставка графического изображения в виде файла lycos.gif. Есть и анимационные gif-файлы. Можно также использовать и графические файлы формата *.jpg (или *.jpeg), *.bmp. Пример графического файла lycos.gif, вставленного в документ HTML: - если при вставке изображения использованы атрибуты width и height, то при загрузке изображения браузер покажет сперва рамку, где должно быть изображение, а затем уже само изображение, поскольку оно загружается дольше.

16 Вставка рисунков - атрибут border задает рамку по периметру изображения толщиной 3 пиксела. Атрибут Alt дает текст на месте рамки, если изображения нет. Атрибут border=0 используется, чтобы убрать рамку вокруг рисунка. Это необходимо, например, при использовании анимированных *.gif на прозрачной основе. Здесь атрибут hspace=5 обеспечивает плавное обтекание рисунка текстом. Он задает ширину незаполненного пространства справа и слева от рисунка в пикселях. Атрибут align="left" обеспечивает размещение рисунка слева.

17 Вставка ссылок excite.htm - гипертекстовая ссылка, переход к файлу excite.htm. BOOK.INF - гипертекстовая ссылка, переход к файлу BOOK.INF. - гипертекстовая ссылка в виде текста, переход в Интернете к Web-странице. Пример:

18 Переходы по ссылкам Нажмите здесь: - гипертекстовая ссылка в виде изображения globe.gif, переход к просмотру изображения zinn.gif. - гиперссылка на адрес электронной почты. При нажатии происходит вызов почтовой программы и указанный адрес вводится в пункт Кому. Пример:

19 Вставка видеофайла - Вставка объекта в документ HTML. В данном случае это мультимедийный файл *.avi, причем при загрузке страницы происходит автозапуск этого файла, размеры которого на экране заданы атрибутами Width и Height. Просмотр примера с видеофайлом avi Если документ HTML большой, то внутри него делают переходы по метке (U01): Введение Введение

20 Создание бегущей текстовой строки (только для Internet Explorer): Интернет - это окно в мир! Если текстовая строка должна бежать влево, то вместо right должно быть слово left. Можно создать бегущую текстовую строку еще проще (то есть без атрибутов, и она будет бежать влево): Добро пожаловать в Интернет!

21 Вставка бегущей строки (продолжение) Если текстовая строка должна бежать то влево, то вправо, то в теге используется атрибут behavior="alternate". Пример: Как прекрасно жить на свете! Цвет символов бегущей строки задается тегом, а цвет фона строки тегом.

22 Воспроизведение звука Для воспроизведения звука (файл *.mid) после загрузки документа HTML в браузер Internet Explorer или Opera (т.е. в фоновом режиме), надо записать следующую команду: Можно также использовать файл формата *.wav. Число воспроизведений музыки loop можно увеличить с 1 до n.

23 Список цветов символов HTML (16 основных цветов) aqua - бирюзовый; black - черный; blue - синий; gray - серый; green - зеленый; lime - ярко- зеленый; maroon - темно-красный; white - белый; navy - темно-синий; olive - оливковый; purple - фиолетовый; red - красный; silver - светло-серый; teal - ярко-голубой; yellow - желтый; fuchsia - ярко-фиолетовый.

24 дополнительные цвета: Кроме указанных основных цветов, есть дополнительные цвета: brown - коричневый, orange - оранжевый, cyan - оттенок бирюзового, pink - розовый и др. Всего до 216 цветов для Netscape Navigator. Вместо указанных терминов для задания цвета можно использовать RGB-коды, например: #FFFFFF -белый (white), #FF0000 -красный (red). Меняя RGB-коды, можно подбирать желаемые цвета текста и фона.