Автор работы: Пользователь скрыл имя, 27 Октября 2013 в 19:38, реферат
Основа каждой странички — язык разметки гипертекста, или HTML (Hypertext Markup Language).
Документ, который написан на языке HTML, представляет собой простой текст, в который вставлены флаги разметки, или "тэги" (markup tags). Флаги разметки объясняют компьютеру, как должен быть расположен текст на экране, в каком месте должны находиться рисунки, хранящиеся в совсем других файлах и так далее. С помощью флагов разметки формируются связи с другими web-сайтами и ресурсами Интернет.
Таблицы цветов есть в графических редакторах, а также в некоторых Web-редакторах. Там же можно выбрать смешанные цвета, подобрать оттенки.
Создайте в текстовом редакторе HTML-файл picl.htm
<HTML>
<HEAD> <title> Моя страничка </title> </HEAD>
<BODY bgcolor="#00fffF» text="#ffi)000">
<p> На данной страничке текст и изображения будут располагаться на голубом фоне.
<р> Шрифт может быть
<FONT COLOR="#OOOOAO" size=+3> разного цвета и размера. </FONT>
</BODY>
</HTML>
Запустите программу просмотра и посмотрите, что у Вас получилось. Попробуйте поэкспериментировать со своей страничкой index.htm. Выберите понравившийся Вам цвет фона, попробуйте окрасить заголовки в тон к фону.
Наклеим обои
«Обои» представляют собой графический файл, обычно с расширением .GIF или .JPG. Это тот фон, на котором будет располагаться вся Ваша информация. В некоторых случаях они рисуются специально, с изображением логотипа или названием фирмы (коллекцию обоев можно, например, посмотреть на страничке F:\WORK\iNTERNET\OBOl\OBOl. HTM) ■
Чтобы взять любые понравившиеся Вам «обои» с какой-нибудь странички, щелкните по ним правой кнопкой мыши, выберите команду Сохранить рисунок как... и сохраните файл в каталоге, где хранятся все Ваши HTML-документы. Назовите его bg01.jpg.
Создайте файл pic2.htm следующего содержания:
<HTML>
<HEAD> <TITLE> Моя страничка </TITLE> </HEAD>
<BODY background ="bg01 ,jpg"> <FONT SIZE=+3>
<B> На данной страничке текст и изображения будут располагаться на фоне "обоев" </В>
</FONT>
</BODY>
<HTML>
Откройте файл pic2.htm в программе просмотра и посмотрите, что у Вас получилось. Обратите внимание на то, что размер шрифта увеличен специально для того, чтобы текст не сливался с фоном и хорошо читался. Иногда выделение текста делается с помощью контрастного цвета. Существуют также и другие способы.
Развесим картины
Простейший пример включения графического изображения в страничку Вы уже знаете:
<IMG SRC="l.gif»>
Чтобы программа просмотра смогла найти Ваш графический файл, необходимо указать его местонахождение. Файл может находиться на том же сервере и в том же каталоге, в котором расположен сам HTML - документ, может быть на том же сервере, но в другом каталоге, а может находиться на другом сервере.
Если графический файл «прописан» там же, где HTML - документ, то можно указать только имя этого файла:
<IMG SRC="l.gif»>
Если на том же сервере, но в другом каталоге, то указывается имя каталога и файла:
<IMG SRC="pics/l.gif»
В случае, когда файл с изображением находится на другом сервере, необходимо указать URL, то есть дать полный адрес:
<IMG SRC="http://www.belti.msk.ru/
Найдите любую картинку (например, по указанному выше адресу) и перепишите ее в каталог HTML. Затем разместите ее на «обоях», которые Вы использовали в предыдущем
HTML - документе. Расположите картинку по центру. Ваш файл должен выглядеть так:
<HTML>
<HEAD> <TITLE> Моя страничка </TITLE> </HEAD>
<BODY background-»bgO 1 .jpg">
<FONT SIZE=+3>
<B> На данной страничке текст и изображения будут располагаться на фоне "обоев" </В> </FONT>
<center> <img src-"http://www.belti.msk.ru/
</BODY>
</HTML>
Если вместо картинки на экране появляется только рамка, щелкните по ней правой кнопкой мыши и выберите команду Показать рисунок.
Дополнительные параметры
Графическое изображение может иметь несколько дополнительных параметров:
Если вы располагаете изображение внутри параграфа, то вы можете его выровнять
Многие программы просмотра, в том числе Netscape Navigator, перед началом отображения пытаются «спланировать» размещение текста, рисунков и таблиц на странице и не выводят изображение до тех пор, пока не узнают размеры. Если Вы хотите, чтобы программы просмотра сразу начинали выводить текст Вашего документа по мере его получения. Вам следует указать физические размеры рисунков и таблиц в пикселях. Для этого используются дополнительные параметры картинки WIDTH (ширина) и HEIGHT
(высота) в описаниях графических
изображений. Эти небольшие
Возьмите любую картинку (например, f:\WORK\INTERNET\PHOTO\SH_503.
Запишите изображение в директорию HTML и вставьте его в HTML-документ pic3.htm:
<HTML>
<HEAD> <TITLE> Моя страничка </TITLE> </IIEAD>
<BODY bgcolor ="#FFFFDD">
width (ширина) = 628 height (высота) = 416
<center> <img src="sh__503.jpg"> </center>
</BODY>
</HTML>
Просмотрите файл на эране программы просмотра.
А теперь уменьшим наш рисунок в два раза, причем строго пропорционально:
<HTML>
<HEAD> <TITLE> Моя страничка </TITLE> </HEAD>
<BODY bgcolor ="#FFFFDD">
<center> <img src="sh_503.jpg" width=314 height=208> </center>
Фотография пропорционально
</BODY>
</HTML>
Посмотрите, как теперь выглядит изображение на экране.
Горизонтальный и вертикальный отступ (Hspace, Vspace)
Текст, вплотную прилегающий к изображению, выглядит очень некрасиво. Гораздо лучше, когда между изображением и текстом имеется некоторый отступ, зазор.
Измените файл pic3.htm и проверьте его в программе просмотра:
<HTML>
<HEAD> <TITLE> Моя страничка </TITLE> </HEAD>
<BODY bgcolor ="#FFFFDD">
<h2 align=center> Ребята, приглашаем вас в наш Интернет-класс! </h2>
<IMG SRC-»sh_503.jpg" width=314 height=208 align-left hspace=15>
<p> Слово "Интернет" часто встречается в печати, по телевизору, радио. Про Интернет
говорят друзья, знакомые. Пришло время
и вам познакомиться с
<р> Мы расскажем вам о возникновении сети Интернет, развитии, назначении.
Вы узнаете, что надо иметь, чтобы подключиться к сети, кто такие "провайдеры".
<р> Вам представится
<р> Вы узнаете что такое Всемирная паутина World Wide Web (WWW), ее историю,
принцип действия. Вас ждут увлекательные путешествия по всему миру.
</BODY>
</HTML>
Альтернативный текст
Не очень-то приятно увидеть на месте картинки белое пятно. Чтобы избежать таких накладок, используют альтернативный текст, который выводится на том месте, где должен находиться пропавший рисунок.
Покажем на конкретном примере, как
создается альтернативный текст. На
страничке нужно расположить, например,
фотографию горного пейзажа (из коллекции
на странице F:\W0RK\INTERNET\PH0T0\SC.HTM)
Откройте в текстовом
Создание гиперссылок
Часть текста, название, участок изображения и пр. могут иметь ссылки на другой текст внутри этого же документа или на другой документ в сети Интернет. Это и называется гипертекстовой связью (Hypertext link), гипертекстовой ссылкой или гиперсвязью. Изображение или участок текста, слово, с которым ассоциированы гиперсвязи, называется якорем (anchor), горячим пятном (hot spot), линком (link) или ссылкой. На экране якорь выделяется каким-либо образом на фоне остального текста — подчеркиванием и особым цветом, который устанавливается по умолчанию.
Чтобы превратить обычный документ в гипертекстовый, в него нужно вставить гипертекстовые связи. Для этого используют парные флаги
<А HREF=" "> ... </А>
Параметр HREF определяет, адрес ссылки, на которую будет совершен переход, если щелкнуть мышью по объекту, находящемуся между флагами (в данном случае объект обозначен многоточием). А вот конкретный пример гиперсвязи:
<А HREF="http://www.vega.ru"> Международная Лаборатория Вега </А> До сих пор мы делали только отрывочные HTML-документы. Теперь мы сможем их связывать в логически построенный Web-сайт. Созданный index.htm будет началом заглавной страничкой Вашего собственного сайта.
Подумайте, какую часть информации Вы собираетесь оставить на первой страничке, какую — выделить в отдельные HTML-документы и связать с первой при помощи гиперсвязей. Они могут идти от списков, от выделенных в тексте слов, от графических изображений.
Проверьте работу гипертекстовой ссылки, создав следующую страничку linkl.htm:
<HTML>
<HEAD> <TITLE> Гиперссылки </TITLE> </HEAD>
<BODY>
<hl> Документ со ссылкой на локальный файл </hl>
Добро пожаловать на одну из моих страничек!
<р>А <А HREF="pic3.htm"> здесь </А> можно посмотреть еще одно моё творение!
</BODY>
</HTML>
Ссылки на точки внутри документа
Вы можете делать ссылки на различные разделы нескольких документов, или на участки одного и того же документа, используя специальный скрытый маркер. Это позволяет быстро переходить от раздела к разделу внутри документов.
Для создания такой ссылки необходимо выполнить следующие шаги:
<А NAME="www"> World Wide Web </A>
<А HREF="pic3 .htm#www"> здесь </А>
Эти теги можно использовать и для того, чтобы быстро находить фрагменты самого документа. Для этого достаточно добавить в нужное место метку <А NAМЕ="метка"> </А>, а затем в том же документе создать гиперссылку <А HREF="#имя"> ... </А> Например:
<ul>
<li> <а href="#ex 1 "> Раздел 1 </а> <li> <а href="#ex2"> Раздел 2 </а> </ul>
<а name-"ex 1 "> </а> ... Текст раздела 1 ...
<а name="ex2"> </а> ... Текст раздела 2 …
И еще несколько советов.
Не будьте бахвалами. Если Вы собираетесь показать себя, создайте предупреждающую страницу, говорящую посетителям, что, выбрав следующую ссылку, они узнают о Вас гораздо больше, чем им хочется знать.
Все еще в процессе изготовления. Ничто не говорит «сачок» так явно, как постоянный знак «В процессе производства». По возможности избегайте этой пиктограммы.
Перегрузки. Не перегружайте Вашу страницу большими изображениями, которые грузятся целую вечность.
Ссылки на другие серверы. Если Вы должны иметь лист ссылок, то используйте уникальные.
Сломанная стрела. Проверяйте как можно чаще правильность ссылок на Вашей странице.
Разбейте большой текст на отрывки. Организуйте ссылки к разным областям документа на открывающей странице, и дайте людям возможность перемещаться от порции к порции одним щелчком мыши.
Аудио и видео
Одним из преимуществ Web является ее способность включать различные типы media: графику, видео и звук — в дополнение к форматированному тексту.
Вы хотите разместить на Вашей страничке речь президента и сделать это так, чтобы Ваш посетитель услышал его голос? Добавьте простой текстовый флаг разметки:
<а href="President.wav"> Речь президента (90К) </а>
Обратите внимание, что указан размер звукового файла в килобайтах. По такому же принципу добавляется видеоизображение (файл с расширением .avi). Не злоупотребляйте звуковыми и видеофрагментами.
Проверьте работу гипертекстовых ссылок, создав следующую страничку link2.htm:
<HTML>
<HEAD> <TITLE> Адреса </TITLE> </HEAD>
<BODY>
<hl> Примеры адресов: </hl>
<h2>
|<p> <a href="http://www.yandex.m> Поисковый сервер Яndex </a>
<p> <a href=«7/c-server/net/litml"> Папка с файлами на С-сервере </а>
<р> <а href="//c-server/net/html/
<р> <а href="//f:/work/intemet/photo/
<р> <а href="pic2.htm"> А эта страничка на моем компьютере </а>
< h2>
</BODY>
</HTML>
В каталоге C-server/Net/Html находятся папки, соответствующие именам компьютеров в локальной сети. В свой папке, на сервере, Вы можете сохранить наиболее удачное своё творение (index.htm), чтобы затем его могли оценить и другие.
Организуйте адреса в файле link2.htm в виде какого-либо списка и проверьте работу гиперссылок в программе просмотра.
Таблицы
Таблицы являются стандартом HTML. В первом приближении таблица Web-страницы — это сетка для показа данных в строках и столбцах. Однако таблицы можно применять как средство обхода ограничений HTML. Например, в HTML нельзя точно разместить элементы по горизонтали, но, используя таблицы, можно добавлять столбцы для перемещения элементов.
Создание таблиц вручную — одна из наиболее сложных задач в HTML. Сначала Вы формируете таблицу, затем первую строку, затем каждую ячейку с ее содержимым. Каждый элемент требует открывающего и закрывающего флагов разметки документа. Если Вы забыли один - единственный текстовый маркер, то Вашу страницу никто не сможет прочитать. Некоторые Web-редакторы умеют создавать таблицу командами меню и способны изменить размер ячейки, ее ширину, размер края и выравнивание содержимого с помощью диалоговой панели свойств. Но мы будем отрабатывать элементы построения таблиц в текстовом редакторе, чтобы лучше усвоить все этапы.