Поиск

Полнотекстовый поиск:
Где искать:
везде
только в названии
только в тексте
Выводить:
описание
слова в тексте
только заголовок

Рекомендуем ознакомиться

Информатика->Реферат
Одним из важнейших направлений информатизации современного общества является информатизация образования - процесс обеспечения сферы образования теорие...полностью>>
Информатика->Реферат
Сегодня IP видеонаблюдение для большинства специалистов это не очень зрелая, но безусловно перспективная технология. Разумно внимательно изучить её се...полностью>>
Информатика->Реферат
Мышь воспринимает своё перемещение в рабочей плоскости (обычно — на участке поверхности стола) и передаёт эту информацию компьютеру. Программа, работа...полностью>>
Информатика->Реферат
Согласно словарю Microsoft Computer Dictionary, реестр – это иерархически построенная, централизованная база данных в составе операционных систем Micr...полностью>>

Главная > Лекция >Информатика

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

1. ПОСТРОЕНИЕ

Название страницы

или

2. Выделение текста - физические и логические стили.

Физические стили.(единые)

- жирный шрифт;

- курсив;

- шрифт фиксированной ширины (как на пишущей машинке);

- подчеркнутый текст;

- перечеркнутый шрифт;

- тоже перечеркнутый шрифт;

- шрифт большего размера;

- шрифт меньшего размера.

Логические стили.(каждый браузер по-разному)

- служит для описания определений (это определение);

- служит для выделения текста (это выделенное слово);

- служит для выделения цитат (это цитата);

- служит для выделения программных кодов. Обычно выделяется шрифтом фиксированной ширины (это текст программы);

- используется для ввода с клавиатуры пользователя (Введите password );

- используется для вывода машинных сообщений (Segmentation fault: core dumped);

- служит для особого выделения текста, обычно выделяется жирным текстом (это очень важный текст);

- используется для символьных переменных (это переменная);

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

Различают относительные и абсолютные ссылки. Примеры относительной ссылки:

При этом слово "Ссылки" в тексте никак выделяться не будет. Теперь в тексте можем делать ссылку на анкер (и не один раз). Например, так:

Нажмите для возврата к началу урока

И получите:

Нажмите здесь для возврата к началу урока

Можете нажать - пример работает! К этому анкеру можно перейти и из другого файла (например, чтобы сделать ссылку к конкретному уроку 4, а не урокам HTML вообще). Тогда ссылка будет выглядеть так:

В окне браузера:

Пишите письма автору

А это то же самое (ссылка на почтовый ящик), но с использованием аттрибута TITLE. В тексте:

Пишите письма

В окне браузера:

Пишите письма автору

Попробуйте навести курсор на "автора".

Внимание! Браузеры чувствительны к регистру ссылок. Если вы вместо "http://webs.web.com" наберете "http://webs.Web.com", то получите нерабочую ссылку. Та же ситуация и с расширениями: если у вас ссылка на файл "index.htm", а там находится "index.html", то результат тот же - нерабочая ссылка.

Тема: рисунки.

В свою страничку можно вставить рисунок. Для этого нужен сам рисунок - обычно используют изображения в формате GIF (файлы с расширениями .gif) и JPEG (файлы с расширениями .jpg и .jpeg) и строчка HTML-тексте, указывающая браузеру, где этот рисунок находится:

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

У данного тэга могут быть следующие аттрибуты:

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 перечисленных выше аттрибутов по умолчанию равны нулю.

Рисунок может быть ссылкой. Для этого разместите между тэгами . Вокруг рисунка появится рамка, показывающая, что он является ссылкой. Если рамка портит внешний вид документа, то укажите в аттрибутах рисунка 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

Например, чтобы сделать цвет фона страницы фиолетовым, можно написать

, а можно и так:

.

Строго говоря, текстовых значений цвета значительно больше (SCARLET, VIOLET, BROWN и т.д. и т.п.), но не все браузеры их "знают". Применимы также значения LIGHTGREEN (светлозеленый), LIGHTYELLOW (светложелтый) и LIGHTBLUE (светлосиний).

Фоном может служить и какое-то изображение. При этом заданная область заполняется множественными копиями этого изображения (как кафельной плиткой). Для этого используется аттрибут BACKGROUND с указанием пути к рисунку. Например

Аттрибуты BGCOLOR и BACKGROUND могут находиться внутри метки , тогда цвет фона устанавливается для всей страницы, либо в метках , и
- устанавливается цвет фона во всей таблице, ее строке и ее ячейке соответсвенно (таблицы - тема следующего урока).

Для изменения цвета и размера шрифта используется метка . Ее аттрибуты:

COLOR="#hhhhhh" - цвет текста;

SIZE="n" - размер шрифта;

FACE="имя_шрифта" - смена шрифта, где имя_шрифта может быть arial, verdana, helvetica, sans-serif и другие.

Пример использования метки :

Крупный шрифт красного цвета без засечек

В окне браузера увидите Крупный шрифт красного цвета без засечек

Для размещения текста в верхнем или нижнем регистре используются соответственно метки .. (superscript) и .. (subscript). Пример их использования:

в тексте: в окне браузера:

E=mc2 E=mc2

2x+2=64 2x+2=64

H2O H3O

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

Также в тэге BODY можно определить каким цветом на вашей странице будут выделяться ссылки. Это аттрибуты:

LINK="#hhhhhh" - определяет цвет ссылки, по умолчанию голубой;

ALINK="#hhhhhh" - определяет цвет ссылки на документ, просмотренный ранее, по умолчанию фиолетовый;

VLINK="#hhhhhh" - опрделяет цвет активизированной ссылки, т.е. когда на нее наведен курсор и нажата кнопка мыши, по умолчанию красный.

Урок 7

Тема: таблицы.

Для чего нужны таблицы? Ответ на этот вопрос очевиден: для представления данных в табличном виде. Но не только.

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

В таблице может размещаться не только текст... ...но и

или картинки Таблицы позволяют достаточно точно контролировать расположение элементов на странице!

Чтобы разобраться в устройстве таблицы, расмотрим простой пример:

Таблица 1. Ячейка 1 Ячейка 2

Ячейка 3 Ячейка 4

Такая табличка реализуется следующим кодом:

Таблица 1.
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Таблица начинается с метки и заканчивается
. Метка может включать следующие аттрибуты:

WIDTH="n" - определяет ширину таблицы в пикселах или процентах, по умолчанию ширина таблицы определяется содержимым ячеек;

ALIGN=LEFT - определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа);

BORDER="n" - устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки;

BORDERCOLOR="#hhhhhh" - устанавливает цвет рамки, где #hhhhhh - шестнадцатиричное значение цвета;

CELLSPACING="n" - определяет расстояние между рамками ячеек таблицы в пикселах;

CELLPADDING="n" - определяет расстояние в пикселах между рамкой ячейки и текстом;

BGCOLOR="#hhhhhh" - устанавливает цвет фона для всей таблицы, где #hhhhhh - шестнадцатиричное число.

BACKGROUND="picture.gif" - заполняет фон таблицы изображением;

FRAME="значение" - управляет внешней рамкой таблицы, может принимать следующие значения:

VOID - рамки нет (значение по умолчанию);

ABOVE - рисуется только граница сверху;

BELOW - только граница снизу;

HSIDES - границы сверху и снизу;

VSIDES - только границы слева и справа;

LHS - только левая граница;

RHS - только правая граница;

BOX - рисуются все четыре стороны;

BORDER - также все четыре стороны.

RULES="значение" - управляет линиями, разделяющими ячейки таблицы. Возможные значения:

NONE - нет линий (значение по умолчанию);

GROUPS - линии будут только между группами рядов (THEAD, TFOOT, TBODY) и группами колонок (COLGROUP, COL) - о группах рассказано ниже;

ROWS - только между рядами;

COLS - только между колонками;

ALL - между всеми рядами и колонками.

Таблица может иметь заголовок - метки

. Располагаться он должен непосредственно после метки . Заголовок может иметь аттрибут ALIGN, определяющий положение заголовка относительно таблицы:</P> <P STYLE="margin-bottom: 0cm">TOP - значение по умолчанию, заголовок над таблицей по центру; </P> <P STYLE="margin-bottom: 0cm">LEFT - заголовок над таблицей слева; </P> <P STYLE="margin-bottom: 0cm">RIGHT - заголовок над таблицей справа; </P> <P STYLE="margin-bottom: 0cm">BOTTOM - заголовок под таблицей по центру. </P> <P STYLE="margin-bottom: 0cm">Строки таблицы начинаются тэгом <TR> и заканчиваются </TR>. Могут иметь аттрибуты: </P> <P STYLE="margin-bottom: 0cm">ALIGN=LEFT - устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо); </P> <P STYLE="margin-bottom: 0cm">VALIGN=CENTER - устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю); </P> <P STYLE="margin-bottom: 0cm">BGCOLOR="#hhhhhh" - устанавливает цвет фона для строки. </P> <P STYLE="margin-bottom: 0cm">BACKGROUND="picture.gif" - заполняет фон строки изображением. </P> <P STYLE="margin-bottom: 0cm">Каждая ячейка таблицы начинается меткой <TD> и заканчивается </TD>. Может иметь следующие ттрибуты: </P> <P STYLE="margin-bottom: 0cm">ALIGN=LEFT - устанавливает горизонтальное выравнивание текста в ячейке. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо); </P> <P STYLE="margin-bottom: 0cm">VALIGN=CENTER - устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю); </P> <P STYLE="margin-bottom: 0cm">WIDTH="n" - определяет ширину ячейки в n пикселов; </P> <P STYLE="margin-bottom: 0cm">HEIGHT="n" - определяет высоту ячейки в n пикселов; </P> <P STYLE="margin-bottom: 0cm">COLSPAN="n" - устанавливает "размах" ячейки по горизонтали. Т.е. COLSPAN="3", например, означает, что ячейка будет простираться на 3 колонки; </P> <P STYLE="margin-bottom: 0cm">ROWSPAN="n" - устанавливает "размах" ячейки по вертикали. ROWSPAN= "2" означает, что ячейка занимает две строки таблицы; </P> <P STYLE="margin-bottom: 0cm">NOWRAP - присутствие этого аттрибута показывает, что текст должен размещаться в одну строку; </P> <P STYLE="margin-bottom: 0cm">BGCOLOR="#hhhhhh" - устанавливает цвет фона ячейки; </P> <P STYLE="margin-bottom: 0cm">BACKGROUND="picture.gif" - заполняет фон ячейки изображением. </P> <P STYLE="margin-bottom: 0cm">Кроме того любая ячейка таблицы может быть определена не метками <TD></TD>, а метками <TH></TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри выделен полужирным шрифтом и отцентрирован.</P> <P STYLE="margin-bottom: 0cm">Ряды таблицы могут быть объединены в группы. Для этого служат следующие метки:</P> <P STYLE="margin-bottom: 0cm"><THEAD>...</THEAD> - здесь объединяются ячейки верхнего заголовка таблицы;</P> <P STYLE="margin-bottom: 0cm"><TFOOT>...</TFOOT> - ячейки нижнего заголовка таблицы;</P> <P STYLE="margin-bottom: 0cm"><TBODY>...</TBODY> - а здесь объединяются ряды собственно содержимого таблицы (может быть несколько групп TBODY).</P> <P STYLE="margin-bottom: 0cm">Каждая группа должна содержать хотя бы один ряд TR. Группа TFOOT должна находиться до TBODY, хотя на экране она будет располагаться внизу таблицы (Netscape не поддерживает это). Все гуппы должны содержать одинаковое количество столбцов. Использование групп рядов: в идеале они предназначены для просмотра (скроллинга) больших таблиц независимо от заголовков. К сожалению, большинство браузеров пока не поддерживают эту функцию. Можно использовать группы рядов для рисования линий только между ними (а не между всеми рядами), или выборочного форматирования частей таблицы (горизонтальное, вертикальное выравнивание содержимого ячеек).</P> <P STYLE="margin-bottom: 0cm">Столбцы таблицы также могут быть объединены в группы при помощи меток <COLGROUP> и <COL>. Метка COLGROUP позволяет объединить столбцы в группы, которые могут выделяться, например, использованием аттрибута RULES элемента TABLES. Метка COL позволяет применить какие-либо аттрибуты (выравнивание и т.п.) к нескольким столбцам не объединяя их в структурную группу.</P> <P STYLE="margin-bottom: 0cm"><COLGROUP> может содержать следующие аттрибуты:</P> <P STYLE="margin-bottom: 0cm">SPAN=n - в группе n столбцов (по умолчанию n=1). Браузер проигнорирует это значение, если между <COLGROUP> и <COL> есть хотя бы один элемент <COL>; </P> <P STYLE="margin-bottom: 0cm">WIDTH=n - ширина столбцов в группе. Значение n может задаваться в пикселах, процентах. Может быть задано относительным значением, а также иметь значение "0*", т.е. столбцы будут минимальной ширины, исходя из размеров содержимого ячеек; </P> <P STYLE="margin-bottom: 0cm">ALIGN, VALIGN - выравнивание содержимого ячеек. </P> <P STYLE="margin-bottom: 0cm"><COL> содержит те же аттрибуты, что и <COLGROUP>. Если ширина столбцов задана и в COL, и в COLGROUP, то выбирается значение метки COL. Метка <COL> непарная, т.е. закрывающего тэга у нее нет.</P> <P STYLE="margin-bottom: 0cm">Пример. Будет создана таблица шириной в 20 столбцов. Первый столбец будет 40 пикселов шириной с выравниванием влево. Второй - минимально возможной ширины с выравниванием по центру. Остальные 18 - шириной в 20 пикселов и выравниванием по центру.</P> <P LANG="en-US" STYLE="margin-bottom: 0cm"><TABLE></P> <P LANG="en-US" STYLE="margin-bottom: 0cm"><COLGROUP WIDTH="20" ALIGN="CENTER"></P> <P LANG="en-US" STYLE="margin-bottom: 0cm"><COL WIDTH="40" ALIGN="LEFT"></P> <P LANG="en-US" STYLE="margin-bottom: 0cm"><COL WIDTH="0*"></P> <P LANG="en-US" STYLE="margin-bottom: 0cm"><COL SPAN="18"></P> <P LANG="en-US" STYLE="margin-bottom: 0cm"></COLGROUP></P> <P LANG="en-US" STYLE="margin-bottom: 0cm"><TR></P> <P STYLE="margin-bottom: 0cm">.....Содержимое таблицы......</P> <P STYLE="margin-bottom: 0cm"></TABLE></P> <P STYLE="margin-bottom: 0cm">К сожалению, браузеры Netscape поддерживают далеко не все возможности таблиц. В результате таблица, которая отлично выглядит в Microsoft Explorer, в Netscape может оказаться вообще без рамок.</P> <P STYLE="margin-bottom: 0cm">Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект   (non-breaking space - неразр </div><div id="ad_c2"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block;height:300" data-ad-client="ca-pub-4310170390019457" data-ad-slot="6694811546" data-ad-format=""></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div align=center class="paging">Страницы: <a href="/view/JZrd7dbnQnk/2.html">следующая →</a><br><br><span>1</span> <a href="/view/JZrd7dbnQnk/2.html">2</a> <a href="/view/JZrd7dbnQnk/3.html">3</a> <a href="/view/JZrd7dbnQnk/4.html">4</a> <a alt="Смотреть все" href="/view/JZrd7dbnQnk/all.html" target="_self">Смотреть все</a></div><br><hr><div style="margin:20px; font-size:1.5em;"><a rel="nofollow" href="/download/JZrd7dbnQnk.zip" #target="_self"> Загрузить файл</a></div><hr><h3 class="bgd">Похожие страницы:</h3><div id='work-like'><ol start="1"><li><h3 style="margin-bottom:0px;"><a href="/view/QmHSv7p7YiE.html" target="_self"><strong>Курс</strong> <strong>лекций</strong> <strong>по</strong> <strong>Информатике</strong> (2)</a></h3><i>Лекция >> Информатика</i><div> ... такое современная <strong>информатика</strong>, сделал в 1978г. Междуна-родный конгресс <strong>по</strong> <strong>информатике</strong>: «Понятие <strong>информатики</strong> охватывает области ... -образовательного <strong>курса</strong> <strong>информатики</strong> в ряду других учебных предметов. Напомним, что <strong>по</strong> определению А.П.Ершова <strong>информатика</strong> – « ... </div></li><li><h3 style="margin-bottom:0px;"><a href="/view/Qzil_k7OTIk.html" target="_self"><strong>Курс</strong> <strong>лекции</strong> <strong>по</strong> <strong>Информатике</strong></a></h3><i>Конспект >> Информатика</i><div> ... университет Кафедра прикладной математики и <strong>информатики</strong> <strong>ИНФОРМАТИКА</strong> Конспект <strong>лекций</strong> для студентов Направления: 010500 - Прикладная ... требует от него определенных знаний <strong>по</strong> <strong>информатике</strong>. Понятие информации определяется как “знания ... </div></li><li><h3 style="margin-bottom:0px;"><a href="/view/4-VNSldyqV4.html" target="_self"><strong>Курс</strong> <strong>лекций</strong> <strong>по</strong> Коммерческой логистике</a></h3><i>Лекция >> Логика</i><div> ... _______ «____»________ 2003г. <strong>Курс</strong> <strong>лекций</strong> <strong>по</strong> дисциплине «Коммерческая логистика» для ... Романеева Е.В. Тольятти 2003 год <strong>Курс</strong> <strong>лекций</strong> <strong>по</strong> дисциплине «Коммерческая логистика» разработан ... взаимообусловливают друг друга. <strong>Информатика</strong> наиболее тесным образом связывает ... </div></li><li><h3 style="margin-bottom:0px;"><a href="/view/wymnSmtlVMU.html" target="_self"><strong>Курс</strong> <strong>лекций</strong> <strong>по</strong> Инновационному менеджменту</a></h3><i>Лекция >> Менеджмент</i><div> <strong>ЛЕКЦИИ</strong> <strong>ПО</strong> <strong>КУРСУ</strong> “ИННОВАЦИОННЫЙ МЕНЕДЖМЕНТ” ДЛЯ 5 <strong>КУРСА</strong> СПЕЦИАЛЬНОСТЕЙ 1204 И 1901 Тема 1: “Инновационный ... г.г.) опирается на достижения в области микроэлектроники, <strong>информатики</strong>, биотехнологии, генной инженерии, новых видов ... </div></li><li><h3 style="margin-bottom:0px;"><a href="/view/c4Po16OYZXY.html" target="_self"><strong>Лекции</strong> <strong>по</strong> <strong>информатики</strong> (2)</a></h3><i>Реферат >> Информатика</i><div> ... . Основная особенность <strong>курса</strong> <strong>информатики</strong> состоит в том, что все экзамены и зачеты <strong>по</strong> этому <strong>курсу</strong>, а также ... можно перепроверить свои знания <strong>по</strong> <strong>информатике</strong>. Данные тесты <strong>по</strong> <strong>информатике</strong> с 1997 года используются в систе­ме ... </div></li></ol><p style="font-size:12pt;"><a rel="nofollow" href="/search?query=Курс лекций по Информатике" target="_self">Хочу больше похожих работ...</a></p></div> </div> </div> <div class="clear"> </div> <div id="f1"></div> <div id="footer_col"> <div id="footer-link"> </div> </div> <div style="width:100%;height:5%"></div> </div> </div> <div style="font-size:8px;">Generated in 0.0063230991363525</div></body> </html>
и