Скачать презентацию Создание Web-страниц Структура Web-страницы Тег HTML Скачать презентацию Создание Web-страниц Структура Web-страницы Тег HTML

Создание Web-страниц.ppt

  • Количество слайдов: 29

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

Структура Web-страницы Структура Web-страницы

Тег <HTML> должен открывать программу, а тег </HTML> -- закрывать ее. Между этими двумя Тег должен открывать программу, а тег -- закрывать ее. Между этими двумя основными тегами располагается головная часть программы (заголовок программы) и ее тело: заголовок программы тело программы

Заголовок программы <HEAD> - начало заголовка </HEAD> - конец заголовка <TITLE> … </TITLE> название Заголовок программы - начало заголовка - конец заголовка название документа Стихотворение </titel> </head> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Тело программы <BODY> - начало тела команды </BODY> - конец тела <BODY> <H 1" src="https://present5.com/presentation/310217343_437435964/image-5.jpg" alt="Тело программы <BODY> - начало тела команды </BODY> - конец тела <BODY> <H 1" /> Тело программы <BODY> - начало тела команды </BODY> - конец тела <BODY> <H 1 align=center>Бармаглот</H 1> Угадай, откуда взяты эти стихи: <P> Варкалось. Хливкие шорьки<BR> Пырялись по наве, <BR> И хрюкотали зелюки, <BR> Как мюмзики в мове. <A href=doc 2. htm>Отгадка</A> </BODY> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Заголовки <Hn> текст заголовка </Hn> n – это числа от 1 до 6 <H" src="https://present5.com/presentation/310217343_437435964/image-6.jpg" alt="Заголовки <Hn> текст заголовка </Hn> n – это числа от 1 до 6 <H" /> Заголовки <Hn> текст заголовка </Hn> n – это числа от 1 до 6 <H 1> Пример </H 1> <H 2> Пример </H 2> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Абзац <P align=left> -- выравнивает абзац по левому краю <P align=right> -- выравнивает абзац" src="https://present5.com/presentation/310217343_437435964/image-7.jpg" alt="Абзац <P align=left> -- выравнивает абзац по левому краю <P align=right> -- выравнивает абзац" /> Абзац <P align=left> -- выравнивает абзац по левому краю <P align=right> -- выравнивает абзац по правому краю <P align=center> -- выравнивает абзац по центру <P align=justify> -- выравнивает абзац по ширине текста </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Форматирование шрифта Все, что находится между тегами <B> и </B>, будет написано жирным шрифтом." src="https://present5.com/presentation/310217343_437435964/image-8.jpg" alt="Форматирование шрифта Все, что находится между тегами <B> и </B>, будет написано жирным шрифтом." /> Форматирование шрифта Все, что находится между тегами <B> и </B>, будет написано жирным шрифтом. Текст между тегами <I> и </I> будет написан наклонным шрифтом (курсивом). . <В>Стихотворение</В> <I>Стихотворение</I>. . . Стихотворение </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Форматирование шрифта Текст между тегами <U> и </U>, будет написан с подчеркиванием. <SUB> и" src="https://present5.com/presentation/310217343_437435964/image-9.jpg" alt="Форматирование шрифта Текст между тегами <U> и </U>, будет написан с подчеркиванием. <SUB> и" /> Форматирование шрифта Текст между тегами <U> и </U>, будет написан с подчеркиванием. <SUB> и </SUB> - нижний индекс <SUP> и </SUP> - верхний индекс <BR> - принудительный разрыв строки. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Форматирование шрифта Для изменения шрифта используется тег <FONT> <FONT face=название шрифта size=размер шрифта color=цвет" src="https://present5.com/presentation/310217343_437435964/image-10.jpg" alt="Форматирование шрифта Для изменения шрифта используется тег <FONT> <FONT face=название шрифта size=размер шрифта color=цвет" /> Форматирование шрифта Для изменения шрифта используется тег <FONT> <FONT face=название шрифта size=размер шрифта color=цвет шрифта> </FONT> <FONT face=Arial size=22 color=0000 FF> </FONT> Цвет шрифта необходимо смотреть в таблице цветов. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Списки " src="https://present5.com/presentation/310217343_437435964/image-11.jpg" alt="Списки " /> Списки </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Маркированный список Задается следующей командой UL: " src="https://present5.com/presentation/310217343_437435964/image-12.jpg" alt="Маркированный список Задается следующей командой UL: " /> Маркированный список Задается следующей командой UL: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Нумерованный список Задается следующей командой ОL: " src="https://present5.com/presentation/310217343_437435964/image-13.jpg" alt="Нумерованный список Задается следующей командой ОL: " /> Нумерованный список Задается следующей командой ОL: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Цвет фона задается один раз для всей страницы в теге <BODY> <HTML> <HEAD>. ." src="https://present5.com/presentation/310217343_437435964/image-14.jpg" alt="Цвет фона задается один раз для всей страницы в теге <BODY> <HTML> <HEAD>. ." /> Цвет фона задается один раз для всей страницы в теге <BODY> <HTML> <HEAD>. . . </HEAD> <BODY bgcolor=silver >. . . </BODY> </HTML> Цвет фона можно задавать при помощи названия цвета или его шестнадцатеричного кода. Цвет необходимо смотреть в таблице кодов. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="" src="https://present5.com/presentation/310217343_437435964/image-15.jpg" alt="" /> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Использование текстур (рисунков) в качестве цвета фона web-страницы <BODY background=имя файла с картинкой> <BODY" src="https://present5.com/presentation/310217343_437435964/image-16.jpg" alt="Использование текстур (рисунков) в качестве цвета фона web-страницы <BODY background=имя файла с картинкой> <BODY" /> Использование текстур (рисунков) в качестве цвета фона web-страницы <BODY background=имя файла с картинкой> <BODY background=fon 1. jpg> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Гиперссылка - переход к другому документу Для этого записывается ссылка при помощи команды <A>" src="https://present5.com/presentation/310217343_437435964/image-17.jpg" alt="Гиперссылка - переход к другому документу Для этого записывается ссылка при помощи команды <A>" /> Гиперссылка - переход к другому документу Для этого записывается ссылка при помощи команды <A> с атрибутом href=имя_файла. (или имя страницы сайта) . . . <A href=имя_файла>текст или картинка </A>. . . Например: <A href=doc 2. htm>Отгадка</A> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Цвет гиперссылок Для того, чтобы при наведении на ссылку курсором и при клике она" src="https://present5.com/presentation/310217343_437435964/image-18.jpg" alt="Цвет гиперссылок Для того, чтобы при наведении на ссылку курсором и при клике она" /> Цвет гиперссылок Для того, чтобы при наведении на ссылку курсором и при клике она меняла свой цвет в теге <BODY> нужно добавить еще несколько параметров. <link=цвет> - цвет еще не посещенной гиперссылки <vlink=цвет> - цвет выделенной гиперссылки <alink=цвет> - цвет уже посещенной гиперссылки <BODY link=blue vlink=purple alink=red> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Картинка в тексте Для вставки картинки нужно воспользоваться командой <IMG>. Атрибуты тега IMG src" src="https://present5.com/presentation/310217343_437435964/image-19.jpg" alt="Картинка в тексте Для вставки картинки нужно воспользоваться командой <IMG>. Атрибуты тега IMG src" /> Картинка в тексте Для вставки картинки нужно воспользоваться командой <IMG>. Атрибуты тега IMG src - задает имя файла с картинкой; <IMG src=img. gif> Alt – задает всплывающий текст на картинке, если мы встанем на него мышкой. <IMG src=monstr. jpg alt="Страшный зверь"> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Атрибуты тега IMG width = n и height = m - задают ширину и" src="https://present5.com/presentation/310217343_437435964/image-20.jpg" alt="Атрибуты тега IMG width = n и height = m - задают ширину и" /> Атрибуты тега IMG width = n и height = m - задают ширину и высоту (в пикселях) прямоугольника, в который выводится картинка. <IMG src=img. gif width = 100 height = 100 > border = n - задает рамку иллюстрации толщиной в n пикселов. <IMG src=img. gif width = 100 height = 100 border = 10 > </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Атрибуты тега IMG hspace = m - интервал между графикой и обтекающим её текстом" src="https://present5.com/presentation/310217343_437435964/image-21.jpg" alt="Атрибуты тега IMG hspace = m - интервал между графикой и обтекающим её текстом" /> Атрибуты тега IMG hspace = m - интервал между графикой и обтекающим её текстом по горизонтали vspace = m - интервал между графикой и обтекающим её текстом по вертикали <IMG src=img. gif align=top border=0 hspace=5 vspace=5> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Атрибуты тега IMG align - позволяет определять положение иллюстрации по отношению к соседним элементам" src="https://present5.com/presentation/310217343_437435964/image-22.jpg" alt="Атрибуты тега IMG align - позволяет определять положение иллюстрации по отношению к соседним элементам" /> Атрибуты тега IMG align - позволяет определять положение иллюстрации по отношению к соседним элементам документа. align=top - вертикальное выравнивание по верхнему краю align=middle - вертикальное выравнивание по центру align=bottom - вертикальное выравнивание по нижнему краю align=left - горизонтальное выравнивание по левому краю align=right - горизонтальное выравнивание по правому краю <IMG src=img. gif align=right > </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="" src="https://present5.com/presentation/310217343_437435964/image-23.jpg" alt="" /> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Создание горизонтальной линии <HR> Атрибуты: Align = выравнивание по горизонтали (left, center, right) Noshade" src="https://present5.com/presentation/310217343_437435964/image-24.jpg" alt="Создание горизонтальной линии <HR> Атрибуты: Align = выравнивание по горизонтали (left, center, right) Noshade" /> Создание горизонтальной линии <HR> Атрибуты: Align = выравнивание по горизонтали (left, center, right) Noshade выключение теней (сплошная темная линия) Color=цвет линии Size=число толщина линии Width=число длина линии <hr align=center width=100 size=5 color=CC 0000> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Создание таблиц Таблица задается командой <TABLE>. . . <//TABLE>. Внутри этих тэгов задаются строки" src="https://present5.com/presentation/310217343_437435964/image-25.jpg" alt="Создание таблиц Таблица задается командой <TABLE>. . . <//TABLE>. Внутри этих тэгов задаются строки" /> Создание таблиц Таблица задается командой <TABLE>. . . <//TABLE>. Внутри этих тэгов задаются строки командами <TR>. . . </TR>. Внутри строк задаются клетки (ячейки) командами <TD>. . . </TD>. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Атрибуты <TABLE> Align=выравнивание (left, right, center) Bgcolor=цвет фона всей таблицы (цвет можно изменить для" src="https://present5.com/presentation/310217343_437435964/image-26.jpg" alt="Атрибуты <TABLE> Align=выравнивание (left, right, center) Bgcolor=цвет фона всей таблицы (цвет можно изменить для" /> Атрибуты <TABLE> Align=выравнивание (left, right, center) Bgcolor=цвет фона всей таблицы (цвет можно изменить для каждой ячейки) Bordercolor=цвет границы таблицы Border=число ширина рамки таблицы Colspan=число определяет, сколько столбцов в ширину будет занимать данная ячейка (для объединения ячеек) Rowspan=число определяет, сколько строк в высоту будет занимать данная ячейка (для объединения ячеек) </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Заголовок для таблицы Задается в тэге <caption>, после тэга <table>. <caption align=выравнивание valign=место расположения" src="https://present5.com/presentation/310217343_437435964/image-27.jpg" alt="Заголовок для таблицы Задается в тэге <caption>, после тэга <table>. <caption align=выравнивание valign=место расположения" /> Заголовок для таблицы Задается в тэге <caption>, после тэга <table>. <caption align=выравнивание valign=место расположения заголовка> заголовок </caption> Место расположения заголовка Top - над таблицей; Bottom - под таблицей. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Создание таблиц <TABLE > <TR> <TD>(1, 1)</TD> <TD>(1, 2)</TD> </TR> <TD>(2, 1)</TD> <TD>(2, 2)</TD>" src="https://present5.com/presentation/310217343_437435964/image-28.jpg" alt="Создание таблиц <TABLE > <TR> <TD>(1, 1)</TD> <TD>(1, 2)</TD> </TR> <TD>(2, 1)</TD> <TD>(2, 2)</TD>" /> Создание таблиц <TABLE > <TR> <TD>(1, 1)</TD> <TD>(1, 2)</TD> </TR> <TD>(2, 1)</TD> <TD>(2, 2)</TD> </TR> <TD>(3, 1)</TD> <TD>(3, 2)</TD> </TR> </TABLE> <!-- Первая строка --> <!-- Первая ячейка --> <!-- Вторая ячейка --> <!-- Третья строка --> <!-- Первая ячейка --> <!-- Вторая ячейка --> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="<HTML> <HEAD> <TITLE>Бармаглот Бармаглот

  1. Угадай, откуда взяты" src="https://present5.com/presentation/310217343_437435964/image-29.jpg" alt=" Бармаглот Бармаглот
    1. Угадай, откуда взяты" /> Бармаглот Бармаглот
      1. Угадай, откуда взяты эти стихи:

        Варкалось. Хливкие шорьки
        Пырялись по наве,
        И хрюкотали зелюки,
        Как мюмзики в мове.