Будь умным!

У вас вопросы?
У нас ответы:) SamZan.net

Основные понятия структура файла фон Webстраницы 2

Работа добавлена на сайт samzan.net:

Поможем написать учебную работу

Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.

Предоплата всего

от 25%

Подписываем

договор

Выберите тип работы:

Скидка 25% при заказе до 9.11.2024


           Введение

           1. Основные понятия, структура файла, фон Web-страницы
           2. Написание текста: работа со шрифтом, команда ALIGN
           3. Написание текста: списки, цитата
           4. Вставка графики: горизонтальная линия, рисунок
           5. Вставка таблицы
           6. Ссылки: на другой документ, на закладку, на E-mail
           7. Фреймы

           Заключение
           Тест

           Приложение 1: фоны
           Приложение 2: картинки
           Полезные ссылки
           Алфавитный указатель

К читателю.

Перед Вами пособие, цель которого изложить основные концепции HTML, необходимые для понимания принципов разработки документов для Интернета.

Данное пособие рассчитано на учеников старших классов средней школы и студентов ВУЗов, где может быть использовано как на учебных занятиях, так и в качестве основы факультатива или специального курса.

Пособие по созданию Web-страниц построено по визуальному принципу. Каждый урок представляет собой законченную тему, сопровождаемую примерами, иллюстрациями. А для закрепления нового материала в конце урока даются упражнения и задания.

Примеры написаны в одном стиле:

в левой части экрана Вы увидите текст (листинг) HTML-программы, а в правой - картинку с изображением того, что получится при написании такой программы, при нажатии на эту картинку появится окно с созданным HTML-файлом.

Теперь, давайте подумаем, что нам понадобится для работы.

1. Во-первых, основную работу Вы будете делать в текстовом редакторе Блокнот (NotePad).

Как запустить Блокнот?

Запустить Блокнот можно из главного меню. Для этого проделайте следующее:

1) Поместите курсор на кнопку Пуск, расположенную в левой части панели задач, и щелкните один раз левой кнопкой мыши - на экране появится главное меню.

2) Подведите курсор к пункту Программы и щелкните - откроется подменю Программы.

3) Поместите курсор на пункт Стандартные (этот пункт идет первым в подменю Программы). Откроется новое подменю со списком программ, входящих в Стандартные.

4) Переместите курсор в область подменю Стандартные и выберите Блокнот (или NotePad).

После запуска этой программы на экране появится ее окно. Размеры окон можно менять. Раскройте окно данного пособия на весь экран, окно Блокнота расположите как на рисунке:

Переход из Урока в Блокнот и наоборот осуществляйте с помощью кнопок на панели задач.

2. Во-вторых, Вы научитесь вставлять в свой Web-документ картинки и фоновые картинки.

Где можно взять картинку?

1) Картинку Вы можете нарисовать сами, используя графические редакторы, например Paint, PhotoShop и другие.

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

3) Наконец, Вы можете просто взять готовую картинку в Приложениях или в Интернете, например, по следующим ссылкам:

http://www.risunki.h1.ru 

http://gif.al.ru 

http://img.al.ru 

http://www.fon.da.ru 

3. В-третьих, Вы будете писать несколько страничек, поэтому заранее создайте папку, в которой будете хранить все свои странички, картинки, фоны. Эту папку Вы можете назвать своим именем (фамилией). Например, D:\IVANOVA. 

ВВЕДЕНИЕ

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

Публикации во "всемирной паутине" реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.

  1.  Основные понятия

Язык HTML. Структура HTML-программы. Фон страницы.

Язык HTML.

Для того, чтобы публиковать информацию для повсеместного распространения, необходимо иметь язык, понятный всем компьютерам. Издательский язык, используемый на World Wide Web, называется HTML (от английского Hyper Text Markup Language - язык разметки гипертекста).

HTML - язык разметки гипертекстов

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

Файл HTML - это текстовый файл с расширением .HTM

 

Базисные теги языка HTML. 

Команды языка HTML задаются между специальными символами < ... >, и называются тегами (tag).

Теги позволяют управлять представлением информации на экране при отображении HTML-документов специальными программами - браузерами. (Например, Microsoft Internet Explorer или Netscape Navigator)

Браузеры, или обозреватели (от англ. browse - просмотр) - это специальные программы просмотра файлов в Интернет.

Приняв информацию, браузер компонует элементы документа в соответствии с тем, что задано командами HTML, и показывает результат на экране с учетом предварительных настроек, касающихся размеров окна браузера, используемой цветовой схемы, установленных цветов и т.д.

Тег - это инструкция браузеру, указывающая способ отображения текста.

Теги могут быть двух видов:

1) одноэлементный тег: <...>; его достаточно просто вставить в текст для того, чтобы совершить какое-либо действие;

2) парный тег: <...>...</...>; он влияет на текст, с того места, где употреблен, до того места, где указан признак окончания его действия. Признаком завершения команды служит тот же самый тег, только начинающийся с символа слэш " / ":

<...> - открывающийся тег, </...> - закрывающийся тег.

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

 

<HTML> 

<HEAD> 

описание заголовка 

</HEAD> 

<BODY> 

текст документа 

</BODY> 

</HTML>

<HTML>...</HTML> - границы HTML-программы

Любой HTML-документ должен начинаться (и заканчиваться) тегом <HTML>...</HTML>. Этот тег указывает на то, что данный документ содержит в себе HTML-текст.

Web-документ разбивается на две логические части: заголовок и содержание.

<HEAD> ... </HEAD> - заголовок HTML-программы

Заголовок также называют головной частью программы, он содержит справочную информацию о странице, которая не отображается браузером, а также название документа.

<BODY> ... </BODY> - содержание HTML-программы

Основное содержание страницы помещается в тег <BODY> ... </BODY>. Его также называют телом программы.

Замечание: HTML не чувствителен к регистру, т.е. все равно какими буквами писать: прописными или строчными (например BODY эквивалентно body или Body).

 

Основные теги заголовка HTML-программы.

В головной части программы обычно пишется

Тег TITLE - имя окна, содержащего Вашу страничку (не более 64 символов). Показывается в заголовке окна браузера.

Пример:

 

<HTML>

<HEAD>

<TITLE>Страничка Микки</TITLE> 

</HEAD>

<BODY>

</BODY>

</HTML>



Задание. Создайте простейший HTML-файл. Для этого:

1. Создайте на диске отдельную директорию (папку) для своей будущей страницы. Вы можете назвать ее своим именем (фамилией). Например, D:\IVANOVA. 

2. Запустите Блокнот (как запустить Блокнот).

3. Наберите текст HTML, в который включите все теги, что мы разобрали. Между тегами <BODY> и </BODY> напишите несколько слов о себе.

4. В меню Файл (File) выполните команду Сохранить как. В диалоговом окне Сохранения файла найдите созданную папку, укажите тип файла Все файлы и сохраните файл, назвав его своим именем (фамилией), и указав расширение HTM. Например, D:\IVANOVA\Ivanova.HTM 

5. Закройте Блокнот.

  Поздравляю! Вы уже создали реальный электронный документ. Можете посмотреть, что у Вас получилось. Для этого:

6. Загрузите браузер Microsoft Internet Explorer или Netscape Navigator.

7. В меню Файл (File) выполните команду Открыть. Используя кнопку Обзор, найдите свой документ D:\IVANOVA\Ivanova.HTM и загрузите его.

 Заметьте, что если вы не забыли указать название в теге TITLE, то оно отразилось в верхней строке браузера.

 

Основные командные слова в теге BODY.

Все, что мы будем изучать далее (кроме фреймов) пишется в теге BODY.

Фон странички.

Значение цвета в атрибутах HTML-языка может задаваться несколькими способами:

названием, например "red";

кодом RGB, например "#FFFFFF" ;

в десятичном виде, например "255, 0, 0" ;

в процентах, например "30%, 40%, 30%";

Код RGB - это три шестнадцатеричных числа в диапазоне 00 - FF. 1-ое, 2-ое и 3-е число, соответственно, представляют собой количество красного, зеленого и синего тонов в цвете. Например, #000000 - это черный цвет (отсутствие цвета), #FF0000 - ярко-красный, #00FF00 - ярко-зеленый, #0000FF - ярко-синий, а #FFFFFF - белый (все цвета присутствуют полностью).

 

Таблица 16-и стандартных цветов

Название

Код RGB

Имя

Цвет

Название

Код RGB

Имя

Цвет

черный

#000000

black

 

серебряный

#C0C0C0

silver

 

темно-бордовый

#800000

maroon

 

красный

#FF0000

red

 

зеленый

#008000

green

 

известь

#00FF00

lime

 

оливковый

#808000

olive

 

желтый

#FFFF00

yellow

 

темно-синий

#000080

navy

 

синий

#0000FF

blue

 

фиолетовый

#800080

purple

 

фуксия

#FF00FF

fuchsia

 

чирок

#008080

teal

 

аква

#00FFFF

aqva

 

серый

#808080

gray

 

белый

#FFFFFF

white

 

 

Цвет фона задает слово BGCOLOR.

Пример:

<HTML>

<HEAD>

<TITLE>Страничка Микки</TITLE>

</HEAD>

<BODY BGCOLOR= #FFFF00> Прежде всего, позвольте представиться. Я – веселый мышонок по имени Микки.

</BODY>

</HTML>

 



Задание: 

1. При необходимости выполните пункты 6, 7 упражнения 1.

2. В меню Вид откройте команду Источник (или В виде HTML). На экране появится Блокнот с Вашей HTML-программой.

3. Внесите изменения в программу: с помощью команды BGCOLOR задайте цвет фона Вашей странички.

a) сделайте его зеленым;

b) теперь залейте цветом purple;

c) выберите свой цвет.

4. В меню Файл выберите команду Сохранить и закройте Блокнот.

5. В меню Вид укажите команду Обновить. Можно также использовать клавишу F5.

   

Фоновая картинка

Фоном также можно сделать картинку. Командное слово BACKGROUND подключает эту картинку в качестве фона и указывает на то, где лежит фоновая картинка. (Фоновой картинкой может служить любой файл с расширением GIF или JPG.)

Пример:

<HTML>

<HEAD>

<TITLE>Страничка Микки</TITLE>

</HEAD>

<BODY BACKGROUND="Приложение1\15.jpg"> Прежде всего, позвольте представиться. Я – веселый мышонок по имени Микки.

</BODY>

</HTML>

 



Задание. Определите фон Вашей странички, используя свою картинку:

1. Сохраните картинку, которую вы хотите использовать в качестве фона, в созданной папке. Например, D:\IVANOVA\fon.jpg (Где можно взять картинку)

2. В теге BODY пропишите атрибут BACKGROUND="fon.jpg"

3. Допишите текст.

Заметьте, что фон двигается вместе с фоном (просмотрите пример, щелкнув на нем кнопкой мыши):



Если Вы хотите, чтоб фоновая картинка не прокручивалась вместе с текстом, то вставьте команду BGPROPERTIES=FIXED.

Пример:

<HTML>

<HEAD>

<TITLE>Страничка Микки</TITLE>

</HEAD>

<BODY BACKGROUND="Приложение1\15.jpg" BGPROPERTIES=FIXED> Прежде всего, позвольте представиться. Я – веселый мышонок по имени Микки. Живу я в огромной сказочной стране Диснейленде. Вместе со мной живут мои друзья: братья Билли, Вилли, Дилли с их дядюшкой Дональдом, забавный медвежонок Винни, славный олененок Бэмби, озорной щенок Плуто и многие-многие другие. Так вот, к чему это я. Дело в том, что в прошлом году исполнилось 100 лет человеку, без которого сегодня трудно представить нашу (а значит, и вашу) жизнь. Этот человек – наш создатель Уолт Элиас Дисней. Без лишней скромности могу сказать, что я, Микки Маус – пожалуй, самый знаменитый персонаж Диснея. И я на своей домашней страничке решил поделиться с вами тем, что знаю о жизни своего "родителя". Читайте дальше…

</BODY>

</HTML>



 

Контрольные вопросы:
  1.  Как называются программы просмотра файлов в Интернет? Какие программы просмотра файлов в Интернет Вы знаете?
  2.  Как реализуется создание Web-документа с использованием HTML?
  3.  Какие теги должны присутствовать в HTML-файле обязательно? Какова логическая структура Web-документа?

На этом уроке Вы должны были:

  1.  создать Web-страницу, указав ее заголовок;
  2.  задать фон страницы (с помощью цвета или картинки);
  3.  написать текст своей первой страницы.
  1.  Написание текста: работа со шрифтами.

Теги абзаца и перевода строки.

На первом уроке Вы уже набрали небольшой текст и, наверное, заметили, что при отображении HTML-документов браузеры автоматически размещают текст на экране, не реагируя на встречающиеся в файле символы перевода строк и идущие подряд символы пробелов.

<P> - новый абзац. 

<BR> - переход на новую строку. 

Тег перевода строки отделяет строку от последующего текста или графики.

Тег абзаца тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац.

Оба тега являются одноэлементными.

 

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" BGPROPERTIES=FIXED> 

<P>Рад приветствовать Вас на своей домашней страничке 

<P>Прежде всего, позвольте представиться.<BR> 

Я – веселый мышонок по имени Микки.
</BODY>
</HTML>



Задание: расставьте в уже написанном тексте своей страницы теги <P> и <BR>. 

 

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

Теги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов.

I пишет текст курсивом

B - полужирный шрифт 

U - подчеркнутый шрифт 

SUP - верхний индекс 

SUB - нижний индекс 

Возможно использование комбинированных выделений:

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" BGPROPERTIES=FIXED> 

<P><B><I>Рад приветствовать Вас на своей домашней страничке</I></B> 

<P>Прежде всего, позвольте представиться.<BR> 

Я – веселый мышонок по имени Микки.
</BODY>
</HTML>

 



Запомните правило записи комбинированных тегов:

<Тег1><Тег2>...</Тег2></Тег1> - правильно <Тег1><Тег2>...</Тег1></Тег2> - неправильно 

Задание: выделите приветствие с помощью рассмотренных тегов.

Размер текста.

Существует два способа управления размером текстом:

1) использование стилей заголовка,

2) задание размера шрифта основного документа или размера текущего щрифта.

1) Уровни заголовков <Hx>. 

Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Обычно браузер выделяет заголовки жирным шрифтом. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером.

<Hx> Заголовок x-го уровня </Hx>

где x - цифра от 1 до 6, определяющая уровень заголовка, чем больше цифра тем меньше размер:

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" BGPROPERTIES=FIXED> 

<P><H2><I>Рад приветствовать Вас на своей домашней страничке</I></H2> 

<P><H4>Прежде всего, позвольте представиться.<BR> 

Я – веселый мышонок по имени Микки. </H4>
</BODY>
</HTML>

 



Задание: выделите приветствие с помощью стилей заголовка.

Заголовки предназначены для выделения небольшой части текста (строки, фразы), но как быть, если вы хотите выделить большой фрагмент текста ?

2) Атрибут SIZE в теге BASEFONT задает базовый (основной) размер шрифта Web-документа. Величина атрибута может лежать в пределах от 1 до 7. По умолчанию используется величина 3.

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P><I>Рад приветствовать Вас на своей домашней страничке</I> 

<P>Прежде всего, позвольте представиться.<BR> 

Я – веселый мышонок по имени Микки.
</BODY>
</HTML>



Тег FONT позволяет задавать размер текущего шрифта в отдельных места текста в диапазоне от 1 до 7, для этого также используется атрибут SIZE. Шрифты могут быть заданы относительно базового: size=+число size=-число.

Замечание: сумма базового размера шрифта и размера текущего шрифта должна быть не меньше1и не более7. Например для основного шрифта, равного 3, размер текущего шрифта может находиться в пределах от -2 до +4.

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P><Font size=+2><I>Рад приветствовать Вас на своей домашней страничке</I></Font> 

<P>Прежде всего, позвольте представиться.<BR> 

Я – веселый мышонок по имени Микки.
</BODY>
</HTML>



Тег BIG выводит текст шрифтом на один размер больше текущего. Тег SMALL выводит текст шрифтом на один размер меньше текущего.

Пример: Выделим "Микки" шрифтом на размер больше:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P><Font size=+2><I>Рад приветствовать Вас на своей домашней страничке</I></Font> 

<P>Прежде всего, позвольте представиться.<BR> 

Я – веселый мышонок по имени <BIG>Микки.</BIG>
</BODY>
</HTML>



Задание: выделите приветствие и некоторые слова, используя теги BASEFONT и FONT.

 

Цвет и стиль написания шрифта.

За цвет всего текста отвечает атрибут TEXT в теге BODY.

Пример: 

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P><Font size=+2><I>Рад приветствовать Вас на своей домашней страничке</I></Font> 

<P>Прежде всего, позвольте представиться.<BR> 

Я – веселый мышонок по имени <BIG>Микки.</BIG>
</BODY>
</HTML>



<>

Изменить цвет текста только в конкретной части документа можно атрибутом COLOR в уже знакомом вам теге FONT.

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P><Font size=+2 COLOR=#FF0000><I>Рад приветствовать Вас на своей домашней страничке</I></Font> 

<P>Прежде всего, позвольте представиться.<BR> 

Я – веселый мышонок по имени <BIG>Микки.</BIG>
</BODY>
</HTML>



Задание: задайте цвет всего текста и выделите приветствие с помощью цвета, отличного от основного.

 

 

С помощью атрибута FACE тега FONT можно менять стиль написания (гарнитуру) шрифта,

например: <FONT FACE="Times New Roman">

Замечание: Если на компьютере посетителя Вашей Web-страницы не установлен шрифт с указанным Вами названием, то браузер использует свой стандартный шрифт. Вы можете задать несколько возможных цветов, тогда в случае отсутствия первого шрифта браузер будет использовать второй, если нет второго, то третий и т.д. Пример: <FONT FACE="Comic Sans MS, Courier New, Courier">

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P><Font size=+1 COLOR=#FF0000 FACE="Arial"><I>Рад приветствовать Вас на своей домашней страничке</I></Font> 

<P>Прежде всего, позвольте представиться.<BR> 

Я – веселый мышонок по имени <BIG>Микки.</BIG>
</BODY>
</HTML>



 

Выравнивание текста по горизонтали.

Команда ALIGN располагает текст справа (RIGHT), слева (LEFT) и по центру (CENTER).

По умолчанию текст выравнивается по левому краю и имеет неровное правое поле.

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P ALIGN=CENTER><Font size=+1 COLOR=#FF0000 FACE="Arial"><I>Рад приветствовать Вас на своей домашней страничке</I></Font> 

<P>Прежде всего, позвольте представиться.<BR> 

Я – веселый мышонок по имени <BIG>Микки.</BIG>
</BODY>
</HTML>



Задание: отцентруйте приветствие на своей страничке.

 

Контрольные вопросы:
  1.  Чем отличается действие на текст тегов BR и P?
  2.  Какие способы управления размером текста существуют?
  3.  Как задается цвет текста?

На этом уроке Вы должны были:

  1.  разбить текст на абзацы;
  2.  задать цвет основного текста;
  3.  выделить заголовок:
    •  расположив его по центру страницы
    •  задав цвет и размер отличные от основных
  1.  Дополнительные возможности форматирования текста

Списки.

Часто для оформления текста используют списки. Списки бывают нумерованные и ненумерованные (маркированные):

Пронумерованные списки

Пронумерованный список пишется в теге OL.

Тегом LI определяется элемент списка.

В пронумерованном списке нумерация происходит автоматически.

Атрибуты тега OL:

TYPE - вид счетчика:

A - большие латинские буквы,

a - маленькие латинские буквы,

I - большие римские цифры,

i - маленькие римские цифры,

1- обычные цифры.

START=n - число, с которого начинается отсчет.

Пример: Создадим новую страничку menu.htm. 

<HTML>
<HEAD>
<TITLE>Содержание</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 2> 

<OL TYPE=I> 

<LI>Микки Маус</LI> 

<LI>Уолт Дисней</LI> 

<LI>Мои друзья</LI> 

</OL> 

</BODY>
</HTML> 



Непронумерованные списки

Непронумерованный список пишется в теге UL.

Тег LI - элемент списка.

Для пометки элемента списка используются маркеры.

Параметр TYPE тега UL определяет внешний вид маркера: DISK, CIRCLE, SQUARE. По умолчанию используется маркер вида DISK.

Пример: Добавим в содержание несколько пунктов:

<HTML>
<HEAD>
<TITLE>Содержание</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg"

BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 2> 

<OL TYPE=I> 

<LI>Микки Маус</LI> 

<LI>Уолт Дисней</LI> 

<UL> 

<LI>Детство и юность</LI> 

<LI>Покорение Голливуда</LI> 

<LI>Смерть</LI> 

</UL> 

<LI>Мои друзья</LI> 

</OL> 

</BODY>
</HTML> 



Задание: создайте подобную страничку menu.htm, в которой напишите содержание своего будующего сайта.

 

Обозначение цитаты.

Teг BLOCKQUOTE предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный этим тегом, отступает от левого края документа на 8 пробелов.

Пример: Вставим цитату в страницу Disney.htm.

<HTML>
<HEAD>
<TITLE>Немного о жизни великого Диснея.</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = blue 

BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P><Font size=+1 COLOR=#FF0000 FACE="Arial"><I>Немного о жизни великого Диснея.</I></Font> 

<BLOCKQUOTE>"Я не снимаю фильмы для того, чтобы делать деньги, я делаю деньги, чтобы снимать больше хороших фильмов"</BLOCKQUOTE> 

</BODY>
</HTML>



В настоящее время используют и другие написания этого тега: BQ, CITE.

Задание: Самостоятельно испробуйте действие на текст тегов BQ, CITE и вставьте в свою страничку цитату с помощью любого из этих трех тегов.

 

Контрольные вопросы:
  1.  Можно ли использовать вложенные списки?
  2.  Чем отличается действие на текст тегов BLOCKQUOTE, BQ, CITE?

На этом уроке Вы должны были:

  1.  создать страницу с содержанием вашего сайта;
  2.  содержание оформите в виде списка;
  3.  вставьте цитату в какую-нибудь свою страничку.

Размещение графики.

Горизонтальная линия.

Тег HR рисует горизонтальную линию.Тег HR не требует закрывающего тега.

Пример: В странице Disney.HTM подчеркнем линией цитату Диснея.

<HTML>
<HEAD>
<TITLE>Немного о жизни великого Диснея.</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P ALIGN=CENTER><Font size=+1 COLOR=#FF0000 ><I>Немного о жизни великого Диснея.</I></Font> 

<BLOCKQUOTE>"Я не снимаю фильмы для того, чтобы делать деньги, я делаю деньги, чтобы снимать больше хороших фильмов"</BLOCKQUOTE> 

<HR> 

</BODY>
</HTML>



Команда SIZE - управляет толщиной линии, а команда WIDTH - длиной. Длину можно задавать как в пикселях, так и в процентах относительно ширины окна. По умолчанию толщина линии 2 пикселя и длина, равная ширине окна.

Пример:

<HTML>
<HEAD>
<TITLE>Немного о жизни великого Диснея.</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P ALIGN=CENTER><Font size=+1 COLOR=#FF0000 ><I>Немного о жизни великого Диснея.</I></Font> 

<BLOCKQUOTE>"Я не снимаю фильмы для того, чтобы делать деньги, я делаю деньги, чтобы снимать больше хороших фильмов"</BLOCKQUOTE> 

<HR SIZE=1 WIDTH=50%> 

</BODY>
</HTML>



Вы можете задать цвет линии с помощью команды COLOR, но эта команда действует только в Internet Explorer.

Пример: Если Вы сейчас работаете с Netscape Navigator, то никаких изменений в примере не увидете.

<HTML>
<HEAD>
<TITLE>Немного о жизни великого Диснея.</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P ALIGN=CENTER><Font size=+1 COLOR=#FF0000 ><I>Немного о жизни великого Диснея.</I></Font> 

<BLOCKQUOTE>"Я не снимаю фильмы для того, чтобы делать деньги, я делаю деньги, чтобы снимать больше хороших фильмов"</BLOCKQUOTE> 

<HR SIZE=1 WIDTH=50% COLOR=#FF0000> 

</BODY>
</HTML>



Помните команду ALIGN? Используя эту команду, Вы можете расположить линию слева (LEFT), по центру (CENTER), справа (RIGHT), .

Пример:

<HTML>
<HEAD>
<TITLE>Немного о жизни великого Диснея.</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P ALIGN=CENTER><Font size=+1 COLOR=#FF0000 ><I>Немного о жизни великого Диснея.</I></Font> 

<BLOCKQUOTE>"Я не снимаю фильмы для того, чтобы делать деньги, я делаю деньги, чтобы снимать больше хороших фильмов"</BLOCKQUOTE> 

<HR SIZE=1 WIDTH=50% COLOR=#FF0000 ALIGN=LEFT> 

</BODY>
</HTML>



Задание: аналогичным образом подчеркните цитату в своей странице.

 

 

Вставка картинки.

Использование рисунков делает Ваши страницы более интересными.

Как мы уже говорили, картинка - это файл с расширением GIF или JPG (JPEG)

Замечание: каждая картинка требует времени на ее обработку и замедляет загрузку документа, поэтому не стоит включать в документ большое количество иллюстраций или иллюстрации большого размера.

Вставить картинку можно с помощью тега IMG. Тег IMG не требует закрывающего тега.

В нем используются следующие команды:

SRC - это имя файла вашей картинки.

 

Пример: Вставим фотографию Диснея в страницу Dysney.HTM 

<HTML>
<HEAD>
<TITLE>Немного о жизни великого Диснея.</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P ALIGN=CENTER><Font size=+1 COLOR=#FF0000><I>Немного о жизни великого Диснея.</I></Font> 

<P><IMG SRC="Disney.jpg" > 

<BLOCKQUOTE>"Я не снимаю фильмы для того, чтобы делать деньги, я делаю деньги, чтобы снимать больше хороших фильмов"</BLOCKQUOTE> 

<HR SIZE=1 WIDTH=50% COLOR=#FF0000> 

</BODY>
</HTML>



Задание:

1. Сохраните картинку в созданной папке. Например, D:\IVANOVA\image.gif (Где можно взять картинку?)

2. Вставьте в страницу о себе свою фотографию, для этого добавьте в HTML-программу строчку <IMG SRC="image.gif" > 

 

Картинка получилась слишком большой (или маленькой)? Укажите атрибуты:

HEIGHT - используется для указания высоты рисунка в пикселах. По умолчанию используется оригинальная высота рисунка.

WIDTH - используется для указания ширины рисунка. Задается либо в пикселах, либо в процентах относительно высоты.

Пример: Вставим фотографию Микки Мауса в страницу Mikky.HTM

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P ALIGN=CENTER><Font size=+1 COLOR=#FF0000 FACE="Arial"><I>Рад приветствовать Вас на своей домашней страничке</I></Font> 

<P><IMG SRC="Mikky.jpg" HEIGHT=140 WIDTH=130 > 

Прежде всего, позвольте представиться.<BR> 

Я – веселый мышонок по имени <BIG>Микки.</BIG> 

Живу я в огромной сказочной стране
Диснейленде. Вместе со мной живут
мои друзья: братья Билли, Вилли,
Дилли с их дядюшкой Дональдом,
забавный медвежонок Винни, славный
олененок Бэмби, озорной щенок Плуто
и многие-многие другие.
</BODY>
</HTML>



ALT - альтернативный текст, которой помещается вместо изображения, если браузер не может отобразить картинку. Также командой ALT можно задать краткое описание картинки, которое выскочит, если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд.

Кроме того, картинку можно взять в рамку. Для этого надо просто вставить команду BORDER. Задается в пикселях. По умолчанию рамка не рисуется.

Пример: Наша картинка будет взята в рамочку, а если вы наведете на картинку курсор, то выскочит надпись - "Микки Маус-самый знаменитый персонаж Диснея".

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P ALIGN=CENTER><Font size=+1 COLOR=#FF0000 FACE="Arial"><I>Рад приветствовать Вас на своей домашней страничке</I></Font> 

<p><IMG SRC="Mikky.jpg" HEIGHT=140 WIDTH=130 ALT="Микки Маус-самый знаменитый персонаж Диснея" BORDER=1> 

Прежде всего, позвольте представиться.<BR>
Я – веселый мышонок по имени <BIG>Микки.</BIG>
Живу я в огромной сказочной стране
Диснейленде. Вместе со мной живут
мои друзья: братья Билли, Вилли,
Дилли с их дядюшкой Дональдом,
забавный медвежонок Винни, славный
олененок Бэмби, озорной щенок Плуто
и многие-многие другие. 

</BODY>
</HTML>



Задание: укажите размеры своей картинки, задайте краткое описание и возьмите картинку в рамку.

С помощью команды ALIGN Вы можете расположить картинку слева (LEFT), по центру (CENTER), справа (RIGHT).

Пример: Пусть фотография Диснея в странице Disney.HTM будет расположена по центру экрана.

<HTML>
<HEAD>
<TITLE>Немного о жизни великого Диснея.</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P ALIGN=CENTER><Font size=+1 COLOR=#FF0000 ><I>Немного о жизни великого Диснея.</I></Font> 

<P><IMG SRC="Disney.jpg" ALIGN=CENTER> 

<BLOCKQUOTE>"Я не снимаю фильмы для того, чтобы делать деньги, я делаю деньги, чтобы снимать больше хороших фильмов"</BLOCKQUOTE> 

<HR SIZE=1 WIDTH=50% COLOR=#FF0000> 

</BODY>
</HTML>



Также с помощью команды ALIGN Вы можете расположить картинку слева (LEFT), по центру (CENTER), справа (RIGHT) относительно текста, также можете выравнить картинку: по верхнему краю (TOP), посередине (MIDDLE), по нижнему краю (BOTTOM) текста

Пример: Пусть картинка с Микки будет прижата к правому краю экрана, а текст будет обтекать ее слева.

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P ALIGN=CENTER><Font size=+1 COLOR=#FF0000 FACE="Arial"><I>Рад приветствовать Вас на своей домашней страничке</I></Font> 

<P><IMG SRC="Mikky.jpg" HEIGHT=140 WIDTH=130 ALT="Микки Маус-самый знаменитый персонаж Диснея" BORDER=1 ALIGN=RIGHT> 

Прежде всего, позвольте представиться.<BR>
Я – веселый мышонок по имени <BIG>Микки.</BIG>
Живу я в огромной сказочной стране
Диснейленде. Вместе со мной живут
мои друзья: братья Билли, Вилли,
Дилли с их дядюшкой Дональдом,
забавный медвежонок Винни, славный
олененок Бэмби, озорной щенок Плуто
и многие-многие другие.
</BODY>
</HTML>



Команды HSPACE и VSPACE определяют расстояние от картинки до текста.

Пример: Наша картинка прижата к правому краю экрана, текст обтекает ее слева, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 4> 

<P ALIGN=CENTER><Font size=+1 COLOR=#FF0000 FACE="Arial"><I>Рад приветствовать Вас на своей домашней страничке</I></Font> 

<p><IMG SRC="Mikky.jpg" HEIGHT=140 WIDTH=130 ALT="Микки Маус-самый знаменитый персонаж Диснея" BORDER=1 ALIGN=RIGHT HSPACE=15 VSPACE=5> 

Прежде всего, позвольте представиться.<BR>
Я – веселый мышонок по имени <BIG>Микки.</BIG>
Живу я в огромной сказочной стране
Диснейленде. Вместе со мной живут
мои друзья: братья Билли, Вилли,
Дилли с их дядюшкой Дональдом,
забавный медвежонок Винни, славный
олененок Бэмби, озорной щенок Плуто
и многие-многие другие.
</BODY>
</HTML>



Задание: добейтесь того, чтобы Ваша картинка была прижата к левому краю, текст обтекал ее справа, расстояние до текста по горизонтали будет 30 пикселей, по вертикали - 5 пикселей

 

Контрольные вопросы:
  1.  Изображения из графических файлов каких типов могут быть размещены на Web-страницах?

На этом уроке Вы должны были: 

вставить в свои странички:

  1.  горизонтальную линию;
  2.  свою фотографию, расположив ее относительно текста.

Таблица.

Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм. Кроме того, любая ячейка таблицы может содержать в себе другую таблицу.

Ячейки таблицы могут содержать любые HTML-элементы.

Основные теги таблицы:

<TABLE>...</TABLE> - объявление таблицы. Все элементы таблицы должны находиться внутри этого тега.

<TR>...</TR> - тег строки таблицы.

Строки содержат в себе

Ячейки данных, которые объявляются тегом TD.

 

Пример:

<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = BLUE > 

<TABLE>
<TR>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Вот какая таблица получится при написании этих тегов:

? Упражнение:

Создайте таблицу из трех строк и трех столбцов:

 

По умолчанию таблица не имеет обрамления. Обрамление добавляется атрибутом тега TABLE BORDER. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.

Пример: 

<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = BLUE> 

<TABLE BORDER=3>
<TR>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Вот какая таблица получится при написании этих тегов:

Замечание: Вокруг пустой ячейки рамка не рисуется. Если рамка нужна, то в ячейку можно ввести символьный объект &nbsp (non-breaking space — неразрывающий пробел).

? Упражнение:

Сделайте рамку шириной 3 пикселя:

 

Фон задается параметром BGCOLOR. Фон может задаваться для таблицы в целом, для отдельной строки, и даже длая отдельной ячейки.

Пример: Зададим цвет фона в таблице

<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = BLUE> 

<TABLE BORDER=3 BGCOLOR=#FFFF00>
<TR>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Вот какая таблица получится при написании этих тегов:

Пример: Зададим цвет фона лишь в двух ячейках

<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = BLUE> 

<TABLE BORDER=3 BGCOLOR=#FFFF00>
<TR>
<TD BGCOLOR=lime>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD BGCOLOR=lime>D</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Вот какая таблица получится при написании этих тегов:

  ? Упражнение: 

Задайте фон для таблицы и другой фон для отдельных ячеек, чтобы у Вас получилась такая картинка:

 

CELLSPACING - расстояние между ячейками.

CELLPADDING - расстояние от рамки до содержимого ячейки.

Пример:

<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = BLUE> 

<TABLE BORDER=3 BGCOLOR=#FFFF00 CELLSPACING=10 CELLPADDING=5>
<TR>
<TD BGCOLOR=lime>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD BGCOLOR=lime>D</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Вот какая таблица получится при написании этих тегов:

Теперь вспомним о параметрах HEIGHT и WIDTH - их можно задавать как для всей таблицы, так и для конкретной ячейки (столбца). Вспомним, что высота и ширина могут задаваться как в пикселях, так и процентах.

Пример: В нашем случае мы зададим ширину для всей таблицы (в процентах относительно ширины окна) и высоту в пикселях для столбцов (ячеек).

<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = BLUE> 

<TABLE BORDER=3 width=50%>
<TR>
<TD BGCOLOR=lime>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD BGCOLOR=lime>D</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Вот так будет расположена таблица:

 

Атрибут ALIGN определяет горизонтальное размещение таблицы. Может принимать значения LEFT (слева), RIGHT (справа) или CENTER (по центру).

Пример:

<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = BLUE> 

<TABLE BORDER=3 width=50% ALIGN=CENTER>
<TR>
<TD BGCOLOR=lime>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD BGCOLOR=lime>D</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Вот так будет расположена таблица:

Атрибут ALIGN также определяет горизонтальное размещение данных в ячейках.

Пример:

<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = BLUE> 

<TABLE BORDER=3 width=50% ALIGN=CENTER>
<TR>
<TD BGCOLOR=lime ALIGN=RIGHT>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD BGCOLOR=lime ALIGN=RIGHT>D</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Вот так будет расположен текст в ячейках:

? Упражнение: Внесите изменения в таблицу с месяцами:

1. Задайте ширину таблицы 230 пикселей, высоту 100 пикселей

2. Расположите таблицу по центру экрана.

3. Расположите данные в ячейках по центру и выделите их жирным шрифтом.

 

Для чего нужны таблицы?

В личных страничках редко можно увидеть таблицы в явном виде, но таблицы часто используют для оформления документа.

  •  С помощью таблицы Вы можете расположить текст в несколько колонок.

Для этого достаточно просто обнулить атрибут BORDER и установить CELLSPACING равным желаемому просвету между ячейками. BORDER=0 можно не писать - таблица по умолчанию обрамления не имеет.

<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = BLUE> 

<TABLE BORDER=0 CELLSPACING=20 WIDTH=50>
<TR>
<TD>Текст первой колонки</TD>
<TD>Текст второй колонки</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Вот так Вы получите текст, написанный в две колонки:

 

  •  С помощью таблицы Вы можете выделить текст рамкой.

Для этого Вы должны создать таблицу, содержащую всего одну ячейку, и задать ширину обрамления атрибутом BORDER.

<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = BLUE> 

<TABLE BORDER=5 WIDTH=50>
<TR>
<TD>Текст, который Вы хотите обвести рамкой</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Вот так Вы можете выделить текст рамкой:

  •  С помощью таблицы Вы можете вставить в свою Web-страницу вертикальную линию.

Вы можете в качестве вертикальной разделительной линии использовать ячейку таблицы, определив нужный цвет фона этой ячейки и необходимую Вам ширину линии.

<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = BLUE> 

<TABLE BORDER=0 CELLSPACING=20 WIDTH=50>
<TR>
<TD>Текст первой колонки</TD> 

<TD BGCOLOR="Blue" WIDTH=1></TD>
<TD>Текст второй колонки</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Вот такую вертикальную линию мы получили:

  •  С помощью таблицы Вы можете вставить в свою Web-страницу цветную горизонтальную линию.

Помните мы говорили о том, что команда COLOR для горизонтальной линии действует только в Interner Explorer? С помощью таблицы Вы можете вставить в свою Web-страницу цветную горизонтальную линию, причем увидеть цвет линии смогут и пользователи Netscape Navigator:

<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = BLUE> 

<TABLE WIDTH=50% ALIGN=CENTER>
<TR>
<TD BGCOLOR=#FF0000 WIDTH=1></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Вот такую горизонтальную линию мы получили:

 

Мы будем использовать таблицу для того, чтобы красиво расположить фотографии.

Пример: создадим страничку Photo.HTM, в которую поместим фотографии.

<HTML>
<HEAD>
<TITLE>Я и мои друзья</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = BLUE BGPROPERTIES=FIXED> 

<TABLE BORDER=0 CELLSPACING=10 ALIGN=CENTER>
<TR>
<TD><IMG SRC="Mikky.jpg" BORDER=3 WIDTH=227 HEIGHT=268></TD>
<TD><font color="#0000FF" size="4"><I><B>Микки Маус - пожалуй, самый знаменитый персонаж Диснея</I></B></font></TD>
</TR>
<TR> 

<TD><IMG SRC="101.jpg" BORDER=3 WIDTH=227 HEIGHT=282></TD><TD><font color="#0000FF" size="4"><I><B>После этого мультфильма далматинцы стали одной из самых популярных пород собак</I></B></font></TD>
</TR> 

<TR> 

<TD><IMG SRC="Donald.JPG.jpg" BORDER=3 WIDTH=227 HEIGHT=149></TD><TD><font color="#0000FF" size="4"><I><B>"Дядюшка! Мы слышали тебя едва не забрали в армию?"</I></B></font></TD>
</TR>
<TR> 

<TD><IMG SRC="Vinny.JPG.jpg" BORDER=3 WIDTH=227 HEIGHT=124></TD> 

<TD><font color="#0000FF" size="4"><I><B>Бессмертные
образы: Винни и Кролик</I></B></font></TD>
</TR>
</TABLE>

</BODY>
</HTML>



 

Задание: расположите аналогичным образом свои фотографии в странице photo.HTM

 

Контрольные вопросы:
  1.  Можно ли использовать вложенные таблицы?
  2.  Для чего можно использовать таблицы?

На этом уроке Вы должны были: 

  1.  создать страницу photo.HTM;
  2.  расположить фотографии и текст с помощью таблицы.

Ссылки в HTML - программах.

Главное преимущество HTML состоит в возможности включения в документ ссылок на другие документы.

Ссылки позволяют при помощи нажатия кнопки мыши быстро переходить от одного документа к другому не задумываясь, где находится этот документ.

В качестве ссылки можно использовать текст или графику.

Браузер выделяет (обычно цветом и/или подчеркиванием) слова, являющиеся ссылками. Цвет выделения ссылок устанавливается в теге BODY:

LINK - устанавливает цвет выделения ссылок.

VLINK - устанавливает цвет выделения ссылок на которых уже побывали.

ALINK - устанавливает цвет активной ссылки. 

Возможны ссылки:

  •  на удаленный HTML-файл;
  •  на некоторую точку в этом же документе;
  •  на любой файл, не являющийся HTML-документом.

Тег <A>...</A> создает гиперссылку.

Атрибуты:

HREF - имя документа (URL-адрес), к которому осуществляется переход.

TITLE задает текст, который выскочит, если задержать курсор мыши на указателе

TARGET указывает, куда должна загружаться вызываемая страничка. Если указать TARGET=_blank, то браузер загрузит вызываемую страничку в новое окно. Если этот атрибут опустить, то новая страничка загрузится в текущее окно.

Ссылка на другой документ.

Описывается ссылка на другой документ следующим образом:

<A HREF="имя файла"> Текст, который будет служить как обращение к другому документу</A>.

URL-адрес может быть абсолютным и относительным.

Абсолютный адрес полностью определяет компьютер, каталог и файл, в котором находится документ

Абсолютный адрес документа, находящегося на локальном компьютере, будет включать в себя путь файла и имя файла, например:

HREF="file://D:\IVANOVA\Ivanova.HTM"

Абсолютный адрес документа, находящегося на удаленном компьютере в Интернете, будет включать имя сервера интернета, путь файла и имя файла, например:

HREF="http://omsu.omskreg.ru" 

Относительный URL-адрес файла указывает на местонахождение документа относительно того документа, в котором находится ссылка. Например, если файл вызываемого документа находится в том же каталоге, что и файл из которого он вызывается, то можно указывать только имя файла:

HREF="Ivanova.HTM"

Пример: В страницу "menu.htm" вставим гиперссылки на другие страницы:

<HTML>
<HEAD>
<TITLE>Содержание</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" BGPROPERTIES=FIXED> 

<OL TYPE=I> 

<LI><A HREF="mikky.htm">Микки Маус</A></LI> 

<LI><A HREF="disney.htm">Уолт Дисней</A></LI> 

<UL> 

<LI>Детство и юность</LI> 

<LI>Покорение Голливуда</LI> 

<LI>Смерть</LI> 

</UL> 

<LI><A HREF="Photo.htm">Мои друзья</A></LI> 

</OL> 

</BODY>
</HTML> 



Задание: в свою страницу menu.HTM ссылки на соответствуюшие файлы.

Ссылки в пределах одного документа.

Ссылки в пределах одного документа требуют наличия двух частей: метки и ссылки.

Метка определяет точку, на которую происходит переход по ссылке.

Такие ссылки описываются также как и ссылки на другой документ, с тем лишь отличием, что ссылка использует имя метки, определенной заранее.

Атрибут NAME - задает имя метки.

Перед именем метки ставится символ #.

 

Пример. Вернемся к страничке Disney.HTM:

определим метки в тексте;

определим ссылки на сайты о Диснее в Интернете.

<HTML>
<HEAD>
<TITLE>Немного о жизни великого Диснея.</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = blue BGPROPERTIES=FIXED> 

<BASEFONT SIZE = 3>

<P ALIGN=CENTER><Font size=+1 COLOR=#FF0000 ><I>Немного о жизни великого Диснея.</I></Font>

<P><IMG SRC="Disney.jpg" ALIGN=CENTER>

<BLOCKQUOTE>"Я не снимаю фильмы для того, чтобы делать деньги, я делаю деньги, чтобы снимать больше хороших фильмов"</BLOCKQUOTE>

<HR SIZE=1 WIDTH=50% COLOR=#FF0000>

<P ALIGN=CENTER><A NAME="детство"><b>Детство и юность</b></a> 

<P>Родился Уолт Дисней 5 декабря 1901года в Чикаго. Через четыре года после его рождения семья Диснея переехала на ферму недалеко от миссурийского города Марселин. Там малыш впервые увидел коров, лошадей, свиней и начал… рисовать их. 

<P ALIGN=CENTER><A NAME="Голливуд"><b>Покорение Голливуда.</b></a> 

<P>Следующим популярным персонажем Диснея стал Кролик Освальд. К сожалению, автор забыл запатентовать героя, и того самым наглым образом у него украли 

<P ALIGN=CENTER><A NAME="Голливуд"><b>Смерть великого американца.</b></a> 

<P>Утром 15 декабря 1966 года Уолт Дисней, всю жизнь дымивший, как паровоз, умер от рака легких в больнице через дорогу от своей любимой студии. Смерть застала его в самый разгар работы над мюзиклом “Счастливейший из миллионеров” и мультфильмом “Книга джунглей”. 

<P>Если Вы хотите почитать еще кое-что о Диснее, то могу предложить Вам пройтись по следующим ссылкам:<BR>

<A HREF="http://www.yustdisney.com/WaltDisney100/"> http://www.yustdisney.com/WaltDisney100/</A><BR> 

<A HREF="http://www.buhgal.narod.ru/PEOPLE/disney.htm"> http://www.buhgal.narod.ru/PEOPLE/disney.htm</A><BR> 

<A HREF="http://www.neapolis.ru/country/USA/15.htm"> http://www.neapolis.ru/country/USA/15.htm</A> 

</BODY>
</HTML>

 

Адрес может быть относительный: имя файла в пределах данного компьютера плюс имя метки в пределах данного файла;

или абсолютный адрес: полное имя файла с диска данного компьютера плюс имя метки в пределах данного файла.

Пример. Определим в menu.HTM ссылки на установленные в Disney.HTM метки.

<HTML>
<HEAD>
<TITLE>Содержание</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" BGPROPERTIES=FIXED> 

<OL TYPE=I> 

<LI><A HREF="mikky.htm">Микки Маус</A></LI> 

<LI><A HREF="disney.htm">Уолт Дисней</A></LI> 

<UL> 

<LI><A HREF="disney.htm#детство">Детство и юность</A></LI> 

<LI><A HREF="disney.htm#Голливуд">Покорение Голливуда</A></LI> 

<LI><A HREF="disney.htm#смерть">Смерть</A></LI> 

</UL> 

<LI><A HREF="Photo.htm">Мои друзья</A></LI> 

</OL> 

</BODY>
</HTML> 



Задание:

1. Установите метки в какой-либо своей странице;

2. В документе menu.HTM определите ссылки на эти метки.

 

Ссылка на E-mail.

Cсылка на почтовый ящик (E-mail) прописывается следующим образом:

<A HREF="mailto:pochta@mail.ru">Напишите мне письмо</A>

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" TEXT = blue BGPROPERTIES=FIXED>

<BASEFONT SIZE = 4>

<P ALIGN=CENTER><Font size=2 COLOR=#FF0000 FACE="Arial"><I>Рад приветствовать Вас на своей домашней страничке</I></Font>

<P><IMG SRC="Mikky.jpg" HEIGHT=140 WIDTH=130 ALT="Микки Маус-самый знаменитый персонаж Диснея" BORDER=1 ALIGN=RIGHT HSPACE=15 VSPACE=5> 

Прежде всего, позвольте представиться.<BR>
Я – веселый мышонок по имени <BIG>Микки.</BIG>
Живу я в огромной сказочной стране
Диснейленде. Вместе со мной живут
мои друзья: братья Билли, Вилли,
Дилли с их дядюшкой Дональдом,
забавный медвежонок Винни, славный
олененок Бэмби, озорной щенок Плуто
и многие-многие другие. 

<P>Так вот, к чему это я. Дело в том, что в прошлом году исполнилось 100 лет человеку, без которого сегодня трудно представить нашу (а значит, и вашу) жизнь. Этот человек – наш создатель Уолт Элиас Дисней.

<P>Без лишней скромности могу сказать, что я, Микки Маус – пожалуй, самый знаменитый персонаж Диснея. И я на своей домашней страничке решил поделиться с вами тем, что знаю о жизни своего "родителя". Читайте дальше… 

<P ALIGN=CENTER><A HREF="mailto:mikky@mail.ru">Напишите мне письмо</A>
</BODY>
</HTML>



Задание: вставьте в страничку о себе ссылку на свой E-mail.

 

Гиперссылка-картинка.

В качестве ссылки можно использовать не только текст, но и графику.

Для того, чтобы использовать в качестве , достаточно заключить тег IMG в тег A. Например, <a href="File.htm"><img src="../files/136/image.jpg" width="96" height="67"></a> 

Задание: вставьте на каждую страницу картинку-гиперссылку, при нажатии на которую посетитель вашего сайта перейдет на первую страницу сайта.

Картинку с надписью "назад", "домой", "вернуться" Вы можете взять из приложения 2.

Контрольные вопросы:
  1.  На какие документы возможны гиперссылки?
  2.  Как прописывается ссылка на E-mail?

На этом уроке Вы должны были: 

  1.  В страницу с содержанием вставить гиперссылки, включая ссылки на метки;
  2.  В странице о себе указать ссылку на свой E-mail;
  3.  На каждую страницу вставить картинку-гиперссылку.

Фреймы.

К этому уроку Вы должны были создать: 

  1.  Страницу о себе;
  2.  Страницу о своих друзьях;
  3.  Страницу с фотографиями;
  4.  Страницу с содержанием всего сайта, в которой должны быть установлены ссылки на соответствующие документы;

 

В HTML существует возможность разделить основное окно, в котором отображаются Web-странички, на несколько частей - фреймов. Фрейм, по сути, представляет собой окно, в которое загружается отдельная страничка. В результате - в окнеокне браузера отображается сразу несколько страничек.

Фрейм - подокно, в которое загружается отдельная страничка.

Для того чтобы понять принцип работы с фреймами, выполняйте все предложенные упражнения.

? Упражнение 1. Создайте в своей папке новую папку FRAMES (например, D:\IVANOVA\FRAMES) и все следующие упражнения выполняйте в ней.

Разбиение окна браузера на фреймы реализуется следующим образом :

  •  создаются отдельные html странички для каждого фрейма.

? Упражнение 2. Создайте три страницы, в которых будет написано всего по одному слову: 

name.htm, в которой напишите слово "name"; 

menu.htm, в которой напишите слово "menu"; 

content.htm, в которой напишите слово "content"; 

  •  создается HTML-файл (обычно это первая страничка сервера по имени index.htm)

? Упражнение 3. Создайте документ index.htm 

<HTML> 

<HEAD> 

Cтраничка с фреймами 

</HEAD> 

</HTML>

 

Обратите внимание на то, что тег BODY отсутствует, вместо него используется тег FRAMESET, содержащий описание внутренних фреймов:

Структура HTML-страницы с фреймами: 

 

<HTML> 

<HEAD> 

описание заголовка 

</HEAD> 

<FRAMESET> 

<FRAME>первый фрейм</FRAME> 

<FRAME>второй фрейм</FRAME> 

</FRAMESET> 

</HTML>

  •  В документе index.htm указываеся сколько документов откроется одновременно в окне броузера, сколько места будет занимать каждый, каким образом они будут располагаться: можно разделить экран на несколько вертикальных или несколько горизонтальных фреймов.

Например, в документе index.htm документы name.htm, menu.htm, content.htm могут быть расположены:

Атрибуты тега FRAMESET: Cols и Rows

COLS - подразделяет экран на определенное количество вертикальных колонок.

ROWS - подразделяет экран на определенное количество горизонтальных колонок.

Размеры колонок перечисляются через запятую (сколько колонок, столько и размеров) и могут быть выражены:

- в пикселах,

- в процентах относительно размера окна,

- в ( * ) долях между собой (символ * указывает на то, что все оставшееся место будет принадлежать данному фрейму; если указывается два или более фрэйма с описанием * (например COLS=*, 30%, *), то оставшееся пространство делится поровну между этими фрэймами).

 

Атрибут тега FRAME SRC описывает адрес документа, который будет отображен внутри данного фрейма. Если этот атрибут отсутствует, то отображается пустой фрейм.

Пример. Создадим первый вариант:

<HTML> 

<HEAD>
<TITLE>Cтраничка с фреймами</TITLE>
</HEAD>
<FRAMESET ROWS="25%,*,25%">
<FRAME SRC="name.htm">
<FRAME SRC="menu.htm">
<FRAME SRC="content.htm">
</FRAMESET> 

</HTML> 



Пример. Создадим второй вариант:

<HTML> 

<HEAD>
<TITLE>Cтраничка с фреймами</TITLE>
</HEAD>
<FRAMESET COLS="100,*,50%">
<FRAME SRC="name.htm">
<FRAME SRC="menu.htm">
<FRAME SRC="content.htm">
</FRAMESET> 

</HTML> 



BORDER устанавливает ширину рамок между фреймами. Если значение отсутствует, то фреймы отделяются друг от друга тонкими линиями заданного цвета.

В предыдущих примерах мы делили окно на вертикальные (колонки) и горизонтальные фреймы(ряды). Как же расположить наши документы в окне так, как указано в третьем варианте? Оказывается ряд в свою очередь можно разбить на несколько колонок, а колонку на несколько рядов.

Пример. Создадим третий вариант: сначала разделим окно на колонки, вторая колонка будет содержать в себе документ content.htm, а первую колонку мы разобьем на два ряда, и поместим в них документы name.htm и menu.htm.

<HTML> 

<HEAD>
<TITLE>Cтраничка с фреймами</TITLE>
</HEAD>
<FRAMESET COLS="*,50%"> 

<FRAMESET ROWS="100,*">
<FRAME SRC="name.htm">
<FRAME SRC="menu.htm"> 

</FRAMESET>
<FRAME SRC="content.htm">
</FRAMESET> 

</HTML> 



? Упражнение 4. Пусть Ваш документ index.htm выглядит как вариант 4. 

Атрибут тега FRAME NAME задает имя данного фрейма.

Имя необходимо для того, чтобы в последствии указать к какому фрейму использовать ссылку. Например, Вы хотите, чтобы нажимая на ссылку в одном фрейме содержимое файла ссылки показывалось в другом фрейме

Вернемся к документу menu.htm и добавим в ссылки команду TARGET="frame2" для того, чтобы при нажатии на ссылку в этом документе открывался файл в фрейме с именем "frame2":

<HTML>
<HEAD>
<TITLE>Содержание</TITLE>
</HEAD>
<BODY BACKGROUND="fon.jpg" >

<OL TYPE=I>

<LI><A HREF="mikky.htm" TARGET="frame2">Микки Маус</A></LI> 

<LI><A HREF="disney.htm" TARGET="frame2">Уолт Дисней</A></LI> 

<UL>

<LI><A HREF="disney.htm#детство" TARGET="frame2">Детство и юность</A></LI> 

<LI><A HREF="disney.htm#Голливуд" TARGET="frame2">Покорение Голливуда</A></LI> 

<LI><A HREF="disney.htm#смерть" TARGET="frame2">Смерть</A></LI> 

</UL>

<LI><A HREF="Photo.htm" TARGET="frame2">Мои друзья</A></LI>

</OL>

</BODY>
</HTML>

 

Пример странички с фреймами: пусть в левом окне откроется документ menu.htm, а в правом - Mikky.htm

<HTML> 

<HEAD>
<TITLE>Страничка Микки </TITLE>
</HEAD>
<FRAMESET cols="*,72%">
<FRAME SRC="menu.htm" NAME="frame1">
<FRAME SRC="Mikky.htm" NAME="frame2">
</FRAMESET>

</HTML> 



 

Контрольные вопросы:
  1.  Что такое фреймы? Для чего они используются?

На этом уроке Вы должны были: 

  1.  создать страницу, состоящую из двух фреймов:
  2.  в левом фрейме должен быть файл с содержанием, при нажатии на ссылку в котором в правом фрейме должна открыться соответствующая страница.

ЗАКЛЮЧЕНИЕ

Команды HTML - это лишь "верхушка айсберга" богатейших возможностей языка HTML.

Создавать Web-страницы можно не только с помощью обычного текстового редактора, вставляя достаточно простые команды в текст документа. Существует множество HTML-редакторов, позволяющих достаточно легко создавать Web-страницы: CorelWebDesinger, FrontPage Express, HomeSite, HotDog Webmaster, HotMetal, MicroSoft Word.

Знакомство с языком HTML. Создание Web-документов.

Начало формы

  1.  Web-страница (документ HTML) представляет собой:

Текстовый файл с расширением txt или doc
Текстовый файл с расширением htm или html
Двоичный файл с расширением com или exe
Графический файл с расширением gif или jpg

  1.  Для просмотра Web-страниц в Интернете используются программы:

MicroSoft Word или Word Pad
MicroSoft Access или MicroSoft Works
Internet Explorer или NetScape Navigator
HTMLPad или Front Page

  1.  Тег - это:

Инструкция браузеру, указывающая способ отображения текста
Текст, в котором используются спецсимволы
Указатель на другой файл или объект
Фрагмент программы, включённой в состав Web-страницы

  1.  Тег <BODY> - это:

Идентификатор заголовка окна просмотра
Идентификатор заголовка документа HTML
Идентификатор перевода строки
Идентификатор HTML-команд документа для просмотра

  1.  Для вставки изображения в документ HTML используется команда:

<img src="../files/136/ris.jpg">
<body background="ris.jpg">
<a href="ris.jpg">
<input="ris.jpg">

  1.  Гиперссылка задается тегом:

<font color="file.htm">
<img src="../files/136/http://www.chat.ru">
<a href="file.htm">текст</a>
<embed="http://www.da.ru">

  1.  Гиперссылки на Web - странице могут обеспечить переход...

только в пределах данной web - страницы
только на web - страницы данного сервера
на любую web - страницу данного региона
на любую web - страницу любого сервера Интернет

  1.  Ссылка на адрес электронной почты задается тегом:

kompas@email.ru
<a href="mailto:svetlana@narod.ru">текст</a>
<a href="marina@mail.ru">текст</a>
<piter@mailru.com>

  1.  Гипертекст - это:

Текст очень большого размера
Текст, в котором используется шрифт большого размера
Структурированный текст, где возможны переходы по выделенным меткам
Текст, в который вставлены объекты с большим объемом информации

  1.  Для создания Web-страниц используются программы:

FrontPage Express и MicroSoft Word 97
Turbo Pascal и QBasic
Visual Basic и ACDSee
ScanDisk и Defrag

Здесь собраны ссылки на подобные сайты:

http://wwwwin.mark-itt.ru/Collection/Wguide/ - Введение в WWW
http://www.arcus.lv/dimas - учебник HTML с примерами, справочник по созданию Web-сайтов
http://my.km.ru/html/default.htm - Краткий учебник по HTML.
http://fed.hut.ru/ - Краткий учебник по HTML.
http://kadet.net.ru - Краткий учебник по HTML.

A
      HREF
      LINK (ALINK, VLINK)
      TARGET
      TITLE
ALIGN
B
BASEFONT
      SIZE
BIG
BLOCKQUOTE (BQ, CITE)
BODY
      BACKGROUND
      BGCOLOR
      BGPROPERTIES
      TEXT
FONT
      COLOR
      FACE
      SIZE
FRAME
      BORDER
      NAME
      SRC

FRAMESET
      COLS
      ROWS
H1, H2, H3, H4, H5, H6
HEAD
HTML
HR
      ALIGN
      COLOR
      SIZE
      WIDTH
I
IMG
      ALIGN
      ALT
      BORDER
      HEIGHT
      HSPACE
      VSPACE
      WIDTH
OL
      LI
      TYPE
      START

SMALL
SUB
SUP
TABLE
      ALIGN
      BGCOLOR
      BORDER
      CELLSPACING
      CELLPADDING
      HEIGHT
      WIDTH
TITLE
TD
TR
U
UL
      LI
      TYPE 

Конец формы




1.  Форма и порядок составления акта
2. Аниськова ОН 1 67 2
3. Романский стиль
4. Увеличить план до 1-25 на миллиметровой бумаге
5. Сумське автотранспортне підприємство 15954
6. года появления таких институциональных инвесторов как частные пенсионные фонды
7. Основы маркетинга
8. Тема проекта- Безопасность на дорогах Название проекта- Красный жёлтый зелёный Тип- творческоинфор
9. Золотий спокій Соціальноекономічні передумови визвольної війни Після розгрому селянськокозацьких по
10. Соціальне партнерство в охороні праці
11. Введение; Аналитическая часть Описание и постановка задачи Назначение и цель создания.html
12. ТЕМА- ДЕНЕЖНАЯ СИСТЕМА И ЕЕ ТИПЫ ПОНЯТИЕ И СОДЕРЖАНИЕ ДЕНЕЖНОЙ СИСТЕМЫ По своему содержанию ден
13. реферат дисертації на здобуття наукового ступеня кандидата юридичних наук Київ ~
14. Статья 1. Основные понятия используемые в настоящем Законе СанктПетербурга Для целей настоящего Закона
15. Доклад- Авогадро Амедео
16. тематической физики и широко используется в приложениях
17. собственность на результаты интеллектуальной деятельности интеллектуальный продукт входящий в совокупно
18. соцпакета Выплаты по уходу за нетрудоспособными гражданами Дополнительное ежемесячное материально
19. Юридические функции права
20. Лабораторная работа 11 Создание и оформление презентации

Материалы собраны группой SamZan и находятся в свободном доступе