Веб-страницы
<<  Структура web-страницы Создание веб-страниц  >>
Создание web-страниц
Создание web-страниц
Способы создания web-страниц
Способы создания web-страниц
Создание сайта
Создание сайта
Основные понятия языка HTML
Основные понятия языка HTML
Общая структура
Общая структура
Создание
Создание
Теги форматирования текстового потока
Теги форматирования текстового потока
Парные теги
Парные теги
Парные теги форматирования символов текста
Парные теги форматирования символов текста
Теги форматирования абзацев
Теги форматирования абзацев
Теги списков
Теги списков
Идентификатор списка определений
Идентификатор списка определений
Цвет
Цвет
Оформление фона страницы
Оформление фона страницы
Вставка изображения в страницу
Вставка изображения в страницу
Вставка рисунков
Вставка рисунков
Вставка ссылок
Вставка ссылок
Переходы по ссылкам
Переходы по ссылкам
Вставка видеофайла
Вставка видеофайла
Создание бегущей текстовой строки
Создание бегущей текстовой строки
Вставка бегущей строки
Вставка бегущей строки
Воспроизведение звука
Воспроизведение звука
Список цветов
Список цветов
Дополнительные цвета
Дополнительные цвета
Презентация «Web-страницы». Размер 40 КБ. Автор: Наталья.

Загрузка...

Web-страницы

содержание презентации «Web-страницы.ppt»
СлайдТекст
1 Создание web-страниц

Создание web-страниц

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

2 Способы создания web-страниц

Способы создания web-страниц

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

3 Создание сайта

Создание сайта

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

4 Основные понятия языка HTML

Основные понятия языка HTML

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

5 Общая структура

Общая структура

Общая структура простейшего HTML документа. <COMMENT>Комментарий</COMMENT> <HTML> <HEAD> <TITLE>Название документа</TITLE> </HEAD> <BODY> Здесь расположен текст самого документа HTML. </BODY> </HTML>

6 Создание

Создание

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

7 Теги форматирования текстового потока

Теги форматирования текстового потока

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

8 Парные теги

Парные теги

Парные теги форматирования заголовков и подзаголовков. теги форматирования заголовков и подзаголовков документа: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. При этом заголовки будут выведены большими буквами, причем размер букв у тега <H1> будет самый большой, у <H2> меньше, у <H3> еще меньше и т.д.

9 Парные теги форматирования символов текста

Парные теги форматирования символов текста

Парные теги форматирования символов текста: <B> - идентификатор полужирного шрифта. <strong> - идентификатор выделенного шрифта. <i> - идентификатор курсива. <U> - идентификатор подчеркивания. <s> - идентификатор перечеркивания. <tt> - идентификатор равноширинного шрифта (телетайпного или курьера). <big> - задает увеличенный размер шрифта. <small> - задает уменьшенный размер шрифта. <CENTER> - задает центрирование текста. <sub> - задает нижний индекс. Пример: x<sub>1</sub>+x<sub>2</sub>=x<sub>3</sub> <sup> - задает верхний индекс. Пример: Теорема Пифагора a<sup>2</sup>+b<sup>2</sup>=c<sup>2.

10 Теги форматирования абзацев

Теги форматирования абзацев

Теги форматирования абзацев: <P align=left> - выравнивание текста в абзаце по левому краю. <P align=right> - выравнивание текста в абзаце по правому краю. <P align=center> - выравнивание текста в абзаце по центру. <P align=justify> - полное выравнивание по обоим краям экрана. Align - атрибут выравнивания.

11 Теги списков

Теги списков

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

12 Идентификатор списка определений

Идентификатор списка определений

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

13 Цвет

Цвет

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

14 Оформление фона страницы

Оформление фона страницы

Оформление фона страницы. <BODY background="back.jpg"> - задает фоновый рисунок (обои) на Web-странице в файле back.jpg. <BODY background="/windows/tartan.bmp"> - фоновый рисунок (обои)взят из файла tartan.bmp, причем указан путь этого файла. <font color="yellow" size=5> - задает цвет символов текста (атрибут color) и их размер (атрибут size). В конце нужен тег </font>. <hr color="lime"> - задает цвет горизонтальной линии. <hr color="red" size=3 width=220 align=center> - атрибут size=N задает толщину линии в пикселах; атрибут width=M задает длину линиив пикселах; атрибут align=center (или left, или right) задает смещение линии (ее размещение в центре, или смещение влево, или вправо).

15 Вставка изображения в страницу

Вставка изображения в страницу

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

16 Вставка рисунков

Вставка рисунков

Вставка рисунков. <img src="scene.jpg" border=3 alt="Картина"> - атрибут border задает рамку по периметру изображения толщиной 3 пиксела. Атрибут Alt дает текст на месте рамки, если изображения нет. Атрибут border=0 используется, чтобы убрать рамку вокруг рисунка. Это необходимо, например, при использовании анимированных *.gif на прозрачной основе. <img src="flower.jpg" border=0 width="85" height="130" align="left" hspace=5 alt="Цветок"> Здесь атрибут hspace=5 обеспечивает плавное обтекание рисунка текстом. Он задает ширину незаполненного пространства справа и слева от рисунка в пикселях. Атрибут align="left" обеспечивает размещение рисунка слева.

17 Вставка ссылок

Вставка ссылок

Вставка ссылок. <a href="excite.htm">excite.htm</a> - гипертекстовая ссылка, переход к файлу excite.htm. <a href="C:\book\book.inf"> BOOK.INF </a> - гипертекстовая ссылка, переход к файлу BOOK.INF. <a href="http://www.da.ru">http://www.da.ru</a> - гипертекстовая ссылка в виде текста, переход в Интернете к Web-странице. Пример: http://www.da.ru/.

18 Переходы по ссылкам

Переходы по ссылкам

Переходы по ссылкам. Нажмите здесь: <a href="zinn.gif"> <img src="globe.gif" border="3"></a> - гипертекстовая ссылка в виде изображения globe.gif, переход к просмотру изображения zinn.gif. <a href="mailto: int@mtu-net.ru">int@mtu-net.ru</a> - гиперссылка на адрес электронной почты. При нажатии происходит вызов почтовой программы и указанный адрес вводится в пункт Кому. Пример: E-mail: int@mtu-net.ru.

19 Вставка видеофайла

Вставка видеофайла

Вставка видеофайла. <EMBED SRC="Welcome.avi" Width=280 Height=140 autostart=true> - Вставка объекта в документ HTML. В данном случае это мультимедийный файл *.avi, причем при загрузке страницы происходит автозапуск этого файла, размеры которого на экране заданы атрибутами Width и Height. Просмотр примера с видеофайлом avi Если документ HTML большой, то внутри него делают переходы по метке (U01): <P><a href="#U01">Введение</a></P> ......................................... <a name="U01">Введение</a>

20 Создание бегущей текстовой строки

Создание бегущей текстовой строки

Создание бегущей текстовой строки. (только для Internet Explorer): <marquee behavior="scroll" direction="right" loop="-1"> Интернет - это окно в мир!</marquee> Если текстовая строка должна бежать влево, то вместо right должно быть слово left. Можно создать бегущую текстовую строку еще проще (то есть без атрибутов, и она будет бежать влево): <marquee>Добро пожаловать в Интернет!</marquee>

21 Вставка бегущей строки

Вставка бегущей строки

Вставка бегущей строки (продолжение). Если текстовая строка должна бежать то влево, то вправо, то в теге <marquee> используется атрибут behavior="alternate". Пример: <h2><i><b><font color="green"><marquee behavior="alternate"> Как прекрасно жить на свете!</marquee></font></h2></i></b> Цвет символов бегущей строки задается тегом <font color="">, а цвет фона строки тегом <body bgcolor="">.

22 Воспроизведение звука

Воспроизведение звука

Воспроизведение звука. Для воспроизведения звука (файл *.mid) после загрузки документа HTML в браузер Internet Explorer или Opera (т.е. в фоновом режиме), надо записать следующую команду: <bgsound src="/windows/canyon.mid" loop=1> Можно также использовать файл формата *.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-коды, можно подбирать желаемые цвета текста и фона.

«Web-страницы»
Загрузка...
Сайт

5informatika.net

115 тем
5informatika.net > Веб-страницы > Web-страницы.ppt