Автор работы: Пользователь скрыл имя, 17 Декабря 2010 в 20:36, курс лекций
Работа содержит лекции в виде уроков по предмету "Информатика".
1. ПОСТРОЕНИЕ
<HTML>
<HEAD>
<TITLE>Название страницы</TITLE>
<SCRIPT language=JavaScript
src="imageslide.js"></SCRIPT> или <SCRIPT language=JavaScript>……..</
</HEAD>
<BODY>
</BODY>
</HTML>
2. Выделение текста
- физические и логические стили.
Физические стили.(единые)
<B> - жирный шрифт;
<I> - курсив;
<TT> - шрифт фиксированной ширины (как на пишущей машинке);
<U> - подчеркнутый текст;
<STRIKE> - перечеркнутый шрифт;
<S> - тоже перечеркнутый шрифт;
<BIG> - шрифт большего размера;
<SMALL> - шрифт
меньшего размера.
Логические стили.(каждый браузер по-разному)
<DFN> - служит для описания определений (это определение);
<EM> - служит для выделения текста (это выделенное слово);
<CITE> - служит
для выделения цитат (это
<CODE> - служит для выделения программных кодов. Обычно выделяется шрифтом фиксированной ширины (это текст программы);
<KBD> - используется
для ввода с клавиатуры
<SAMP> - используется для вывода машинных сообщений (Segmentation fault: core dumped);
<STRONG> - служит
для особого выделения текста,
обычно выделяется жирным
<VAR> - используется для символьных переменных (это переменная);
<ABBR> - используется для аббревиатур (СНГ, КПСС, WWW);
<ACRONYM> - используется
для сокращений (стр., англ.).
3. Форматирование текста.
Отличаются заголовки от текста и между собой толщиной и высотой букв, в заголовке <H1> самые крупные символы. Тэги <H1>..</H1>, <H2>..</H2>, ... , <H6>..</H6>.
<P>Абзатц. При просмотре браузером абзацы отделяются друг от друга пустой строкой.
<P>Этот абзац расположен слева<P>
<P ALIGN=CENTER>Этот абзац по центру</P>
<P ALIGN=RIGHT>А
вот этот абзац справа</P>
Аналогично форматируются и заголовки: <H1 ALIGN=RIGHT>..</H1> и т.д.
<CENTER>..<CENTER>
<BR>пропуск строки
<HR> описывает
горизонтальную линию. Может
SIZE - толщина линии в пикселах;
WIDTH - длина линии в пикселах или процентах от ширины экрана;
ALIGN - выравнивание
линии, может принимать
COLOR - цвет линии;
NOSHADE - линия рисуется без тени.
Пример использования
тэгов <BR> и <HR>:
------------------------------
Метки <BLOCKQUOTE></BLOCKQUOTE> добавляют к выделенному ими тексту со всех четырех сторон поля (сверху и снизу - по пустой строке, слева и справа - шириной в 5 знаков). Пример - этот абзац.
Еще один способ форматирования текста - использование меток <PRE>..</PRE> (prefomatted text - предварительно форматированный текст). Обычно браузеры игнорируют множественные пробелы и символы конца строки. Однако с использованием тега <PRE> текст выводится в окне браузера точно в том виде, как он есть в исходном HTML-документе.
Пример. В тексте:
<PRE>
Чтобы стихотворение красиво
смотрелось в окне браузера,
вовсе необязательно
тэг <BR>!
</PRE>
В окне браузера:
Чтобы стихотворение красиво
смотрелось в окне браузера,
вовсе необязательно
тэг <BR>!
Урок 4
Тема: ссылки.
Ссылки - инструмент, позволяющий связывать между собой различные документы. Браузер обычно выделяет ссылку цветом и/или подчеркиванием. Описывается ссылка следующим образом:
<A HREF="путь/имя файла">Ссылка на документ</A>
Может содержать
аттрибут TITLE, описывающий ссылку. Если
пользователь наведет указатель
мыши на ссылку, то появится ее описание
- содержимое этого аттрибута.
Различают относительные
и абсолютные ссылки. Примеры относительной
ссылки:
<A HREF="filename.htm"> - на документ "filename.htm", находящийся в одном каталоге с текущим документом;
<A HREF="./filename.htm"> - в точности то же самое;
<A HREF="folder/filename.htm"> - переход на файл "filename.htm" в подкаталоге "folder" текущего каталога;
<A HREF="../folder/filename.htm">
- подняться вверх на один шаг
по дереву каталогов, перейти
в каталог "folder" и осуществить
переход на "filename.htm".
В абсолютной ссылке
указывается полный путь к файлу:
<A HREF="http://www.fortunecity.
Относительные
ссылки удобнее. Они не привязаны
к конкретной структуре каталогов,
т.е. вы можете создать свой сайт на
компьютере, тестировать и исправлять
ошибки не подключаясь к Интернет.
И лишь после полной готовности перенести
его на сервер, он будет работать так же.
Можно делать ссылки
внутри документа. Это удобно для
перехода к разным главам одной большой
статьи. Для этого необходимо создать
некую опорную точку - анкер (anchor
- якорь,англ.), на которую и будет
происходить переход. Разберем это
на примере. Допустим, нам надо перейти
на начало этого урока. Для чего создадим
такой анкер:
<A NAME=lesson4>Ссылки</A>
При этом слово
"Ссылки" в тексте никак выделяться
не будет. Теперь в тексте можем делать
ссылку на анкер (и не один раз). Например,
так:
Нажмите <A HREF="#lesson4">здесь</A> для возврата к началу урока
И получите:
Нажмите здесь
для возврата к началу урока
Можете нажать
- пример работает! К этому анкеру
можно перейти и из другого
файла (например, чтобы сделать ссылку
к конкретному уроку 4, а не урокам HTML вообще).
Тогда ссылка будет выглядеть так:
<A HREF="uroki.htm#lesson4">
До сих пор
мы рассматривали ссылки на HTML-документы.
Однако возможны ссылки и на другие
виды ресурсов:
<A HREF="ftp://servername/
Такая ссылка запустит
протокол передачи файлов и произведет
выгрузку файла "file.ext" из директории
"directory" сервера "servername" на жесткий
диск пользователя (download).
Еще один вид
ссылки - ссылка на почтовый ящик. Выглядит
в тексте:
Пишите письма <A
HREF="mailto:Has5@mail.ru">
В окне браузера:
Пишите письма
автору
А это то же самое
(ссылка на почтовый ящик), но с использованием
аттрибута TITLE. В тексте:
Пишите письма
<A HREF="mailto:Has5@mail.ru" TITLE="Ссылка
на почтовый ящик Администратора сайта">автору</A>
В окне браузера:
Пишите письма
автору
Попробуйте навести
курсор на "автора".
Внимание! Браузеры
чувствительны к регистру ссылок.
Если вы вместо "http://webs.web.com" наберете
"http://webs.Web.com", то получите нерабочую
ссылку. Та же ситуация и с расширениями:
если у вас ссылка на файл "index.htm",
а там находится "index.html", то результат
тот же - нерабочая ссылка.
Тема: рисунки.
В свою страничку
можно вставить рисунок. Для этого
нужен сам рисунок - обычно используют
изображения в формате GIF (файлы с расширениями
.gif) и JPEG (файлы с расширениями .jpg и .jpeg)
и строчка HTML-тексте, указывающая браузеру,
где этот рисунок находится:
<IMG SRC="picture.gif"> - рисунок "picture.gif" находится в том же каталоге, что и текущий документ;
<IMG SRC="images/picture.gif"> - перейти в подкаталог "images" текущего каталога и взять файл оттуда;
<IMG SRC="../images/picture.gif"> - подняться вверх на один шаг, перейти в каталог "images" и взять рисунок оттуда;
<IMG SRC="http://www.fortunecity.
У данного тэга
могут быть следующие аттрибуты:
ALT="какой-то
текст" - альтернативный текст.
Текст, который появляется
BORDER="n" - рамка вокруг рисунка, где n - ее толщина в пикселах. При n="0" рамка не рисуется.
WIDTH="n" - задается ширина изображения в пикселах или в процентах от ширины экрана браузера (тогда после n следует знак %).
HEIGHT="n" - высота изображения в пикселах или в процентах от высоты экрана.
HSPACE="n" - отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным).
VSPACE="n" - вертикальный отступ от картинки в пикселах.
ALIGN=CENTER - по умолчанию сопровождающий текст выравнивается по нижнему краю рисунка. Применяя аттрибут ALIGN можно выравнивать текст по верхнему краю (TOP) или по центру рисунка ( CENTER или MIDDLE). Чтобы текст обтекал рисунок, используется значение аттрибута LEFT или RIGHT, рисунок прижимается соответственно к левому или правому краю экрана.
Значения n перечисленных
выше аттрибутов по умолчанию равны
нулю.
Рисунок может
быть ссылкой. Для этого <IMG SRC="...">
разместите между тэгами <A HREF="...">
и </A>. Вокруг рисунка появится рамка,
показывающая, что он является ссылкой.
Если рамка портит внешний вид документа,
то укажите в аттрибутах рисунка BORDER="0".
Урок 6
Тема: цвет фона и текста, шрифты.
Цвет фона определяется
значением аттрибута BGCOLOR - шестнадцатиричным
числом вида #hhhhhh, где первая пара символов
является значением насыщенности для
красного цвета, вторая - для зеленого,
и третья пара - для синего цвета. #00 - минимальная
насыщенность, #FF - максимальная насыщенность
цвета. Можно использовать текстовое определение
цвета: BLUE, RED, FUCHSIA и т.п - одно из шестнадцати
допустимых значений.
BLACK #000000 GREEN #008000
SILVER #C0C0C0 LIME #00FF00
GRAY #808080 OLIVE #808000
WHITE #FFFFFF YELLOW #FFFF00
MAROON #800000 NAVY #000080
RED #FF0000 BLUE #0000FF
PURPLE #800080 TEAL #008080
FUCHSIA
#FF00FF AQUA #00FFFF
Например, чтобы сделать цвет фона страницы фиолетовым, можно написать
<BODY BGCOLOR="#FF00FF">, а можно и так:
<BODY BGCOLOR="PURPLE">.
Строго говоря,
текстовых значений цвета значительно
больше (SCARLET, VIOLET, BROWN и т.д. и т.п.),
но не все браузеры их "знают".
Применимы также значения LIGHTGREEN
(светлозеленый), LIGHTYELLOW (светложелтый)
и LIGHTBLUE (светлосиний).
Фоном может служить и какое-то изображение. При этом заданная область заполняется множественными копиями этого изображения (как кафельной плиткой). Для этого используется аттрибут BACKGROUND с указанием пути к рисунку. Например