Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Я усердно изучаю построение WEB-страниц: - это первый абзац

⇐ ПредыдущаяСтр 5 из 7Следующая ⇒

</P>

<P>

<HR SIZE=2 WIDTH=80%>

Какое низкое коварство полуживого забавлять,<BR>

Ему подушку поправлять,<BR>

Вздыхать и думать про себя,<BR>

Когда же черт возьмет тебя!<BR>

<HR SIZE=4 WIDTH =100%>

</P>

</BODY>

</HTML>

Сохраните изменение документа под тем же именем, просмотрите созданную страницу.

Создание списков

При создании WEB - страниц используются три вида списка: упорядоченные (нумерованные), неупорядоченные (ненумерованные) и списки определений.

Можно создавать вложенные списки, используя различные теги списков или повторяя одни внутри других. Для этого просто необходимо разместить одну пару тегов (стартовый и завершающий) внутри другой. Будут ли элементы вложенного списка иметь те же маркеры, обозначающие элемент списка - зависит от броузера.

Теги <OL> и </OL> - создают упорядоченный список.

Теги <UL> и </ UL > - создают неупорядоченный список.

Тег <LI> - предназначен для расположения элементов списка.

Теги <OL>, <UL>, <LI> могут содержать атрибут TYPE=, значение которого указывает на способ пометки элементов списка.

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

Неупорядоченные списки помечаются маркерами в виде черного кружка (по умолчанию), белого кружка или квадратика.

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

Приведем пример вложенных списков:

<UL>

<LI> Крупные города России:

<UL>

<LI> Москва

<LI> Тула

<LI> Санкт-Петербург

</UL>

<LI> Крупные города Украины:

<UL>

<LI> Киев

<LI> Харьков

<LI> Одесса

</UL>

Задание 5. Создание списка

Отредактируйте созданную страницу:

Загрузите программу Блокнот.

Откройте файл Пример1.htm для редактирования.

Отредактируйте содержание страницы, вставив ниже следующий текст:

=> вставьте упорядоченный список

Я уже изучил:

1. Понятия языка разметки

2. Определение заголовка, абзаца

3. Форматирование абзаца

=> вставьте неупорядоченный список:

Я еще обязательно изучу:

§ Создание списков

§ Создание таблиц

<HTML>

<HEAD>

<TITLE>

Институт МИПП - группа 109

</TITLE>

</HEAD>

<BODY>

<marquee loop="infinite" behavior="alternate"

bgcolor="aqua" direction="left" height="30" width="550">

Страничка Светы Ивановой

</marquee>

<H1 ALIGN=CENTER> Создание списков </Н1>

<P>

<FONT SIZE=5 COLOR="GREEN"FACE="ARIAL">

Я старательно изучаю язык разметки HTML

</FONT>

</P>

<P ALIGN= RIGHT>

Я усердно изучаю построение WEB-страниц

</P>

<P>

<HR SIZE=2 WIDTH=80%>

<B>Какое низкое коварство полуживого забавлять,</B><BR>

<I>Ему подушку поправлять,</I><BR>

<U>Вздыхать и думать про себя,</U><BR>

<S>Когда же черт возьмет тебя!</S><BR>

<HR SIZE=4 WIDTH =100%>

</P>

<OL>

Я уже полностью изучил

<LI>Понятия языка разметки

<LI>Форматирование абзаца

</OL>

<UL>

Я еще обязательно изучу

<LI> Создание списка

<LI>Создание таблиц

</UL>

</BODY>

</HTML>

Сохраните изменение документа под тем же именем.

Просмотрите созданную страницу.

Список определений <DL>... </DL> несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:

<DL> <DT>HTML <DD>Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. <DT>HTML-документ <DD>Текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html). </DL>

Этот фрагмент будет выведен на экран следующим образом:

HTML

Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

HTML-документ

Текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html).

Обратите внимание: точно так же, как метки <LI>, метки <DT> и <DD> не имеют парных закрывающих меток.

Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <DL COMPACT>. Например, вот такой фрагмент HTML-текста:

<DL COMPACT> <DT>А <DD>Первая буква алфавита <DT>Б <DD>Вторая буква алфавита <DT>В <DD>Третья буква алфавита </DL>

будет выведен на экран примерно так:

Первая буква алфавита

Вторая буква алфавита

Третья буква алфавита

META-теги

Тег <META> вкладывается в тег <HEAD> и определяет метаинформацию, которая необходима браузеру для корректного интерпретирования WEB - странички. У этого тега отсутствует закрывающая часть и вся информация передается в его параметрах, которых всего три: CONTENT, HTTP-EQUIV, NAME.

CONTENT - является телом тега, он несет информативную нагрузку с помощью ключевых слов, которые позволяют ориентироваться при поиске информации на заданную тему. Кроме того этот тег может содержать имя автора и название приложения, в котором создана страница.

HTTP-EQUIV - определяет http- эквивалент к данному тегу.

NAME - тег аналогичен тегу HTTP-EQUIV с той лишь разницей, что он определяет эквивалент тегу не из области http - среды, а из общепринятых выражений.

Рассмотрим наиболее часто используемые варианты этого тега.

Пример:

<META HTTP-EQUIV = "CONTENT-TYPE" CONTENT = "TEXT/HTML; CHARSET=WINDOWS - 1251">.

Первый параметр HTTP-EQUIV="CONTENT-TYPE выбирает эквивалент из среды HTTP или, другими словами, тег <META> в нашем случае берет переменную из среды HTTP, указанную в параметре HTTP-EQUIV, и присваивает ей значение, указанное в параметре CONTENT.

Параметр CHARSET=WINDOWS-1251 принудительно переключает браузер в кодировку Windows -1251 (кириллица Windows).

Пример:

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

Переменная PRAGMA дает команду proxy-серверу не кэшировать данную страничку. Полезно вставлять такую команду в начальную страничку или в любую другую, которая содержит регулярно обновляемую информацию.

Следующий пример:

<meta name="Author" content="VIKTOR PETROV">

указывает автора этой страницы. Используется для статистики.

Еще один статистический пример:

<meta name="Generator" content="Notepad"> - указывает программу, в которой была разработана эта страничка.

Пример:

<meta http-equiv="Refresh" content="2; URL=http://viktor.al.ru">

Этот тег означает, что через 2 секунды после открытия документа браузер перейдет на страницу, указанную в URL.

4.4. СОЗДАНИЕ ТАБЛИЦ

Таблица - это один из наиболее удобных способов представления больших объёмов данных. Для создания таблиц используются теги <TABLE> и </TABLE>, которыеначинают и заканчивают таблицу (определяют тело таблицы).

Тег <TABLE> может включать атрибуты, вот некоторые из них:

ALIGN=LEFT - выравнивание влево;

ALIGN=CENTER - выравнивание по центру;

ALIGN=RIGHT - выравнивание вправо;

WIDTH= - устанавливает ширину таблицы в пикселях (WIDTH=300) или в % от ширины страницы (WIDTH=80%);

BORDER= - устанавливает ширину внешней рамки таблицы и ячеек в пикселях (BORDER=6).

Теги <CAPTION> и </ CAPTION >определяют заголовок таблицы, который размешается или в начале таблицы или в конце таблицы.

Тег <CAPTION> может включать атрибуты:

ALIGN=TOP - заголовок помещается над таблицей;

ALIGN=BOTTOM - заголовок помещается под таблицей.

Теги <TR> и </TR> определяют строки таблицы, причем закрывающий тег (метку) можно опустить, так как строка таблицы заканчивается перед началом следующей строки или вместе с таблицей. Тег <TR> может включать атрибуты:

ALIGN= - устанавливает горизонтальное выравнивание;

VALIGN= - устанавливает вертикальное выравнивание (= TOP - пo верхнему краю, = MIDDLE - по центру; = BOTTON - по нижнему краю).

Каждая строка таблицы состоит из ячеек.

Теги <ТН > и </ТН> помечают ячейки, содержащие заголовки столбцов и строк.

Теги <TD > и </TD> помечают ячейки, содержащие обычные данные.

Тег <TD> может включать атрибуты:

NOWRAP= - устанавливает горизонтальное выравнивание;

COLSPAN = - устанавливает «размах» ячейки по горизонтали (COLSPAN =3 устанавливает ячейку в 3 колонки);

ROWSPAN= - устанавливает «размах» ячейки по вертикали (ROWSPAN=2 устанавливает ячейку в 2 строки);

WIDTH= - устанавливает ширину ячейки;

НEIGТ= - устанавливает высоту ячейки.

Задание 6. Создание таблиц

Отредактupyйmе созданную страницу:

Загрузите программу Блокнот.

Откройте файл Пример1.htm для редактирования.

Отредактируйте содержание страницы.

Вставьте таблицу вида

Летняя сессия группы 109

Предмет	Форма сдачи	Дни сдачи
Информатика	экзамен	27.05.2012
Иностранный язык	06.06.2012
Менеджмент	зачет	23.05.2012
Математика	10.06.2012

<HTML>

<HEAD>

<TITLE> Институт МИПП - группа 109 </TITLE>

</HEAD>

<BODY>

<marquee loop="infinite" behavior="alternate"

bgcolor="aqua" direction="left" height="30" width="550">

Страничка Светы Ивановой

</marquee>

<HR SIZE=2 WIDTH=80%>

<TABLE WIDTH=90% BORDER=10 CELLPADDLNG=2 CELLSPACING=10>

<CAPТION>Летняя сессия группы 109</CAPTION>

<TR><TD ALIGN=CENTER><B> Предмет </В>

<TD ALIGN=CENTER><B> Форма сдачи </В>

<TD ALIGN=CENTER><B>Дни сдачи</В>

<TR><TD>Инфopмaтика

<TD ROWSPAN=2>Экзaмен<TD>27.05.2012

<TR><TD>Инocтpaный язык<TD>06.06.2012

<TR><TD>Mенеджмент

<TD ROWSPAN=2>3aчет<TD>23.05.2012

<TR><TD>Maтeмaтика<TD> 10.06.2012

</TАВLE>

</BODY>

</HTML>

Coxpaните документ под именем Пример2.htm.

Просмотрите созданную страницу, ее вид представлен ниже.

Летняя сессия группы 109 Предмет	Форма сдачи	Дни сдачи
Инфopмaтика	Экзaмен	27.05.2012
Инocтpaный язык	06.06.2012
Mенеджмент	3aчет	23.05.2012
Maтeмaтика	10.06.2012

СВЯЗЫВАНИЕ ТЕКСТОВ

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

В HTML переход от одного фрагмента текста к другому задается с помощью тега вида:

<A HREF="[адрес перехода]">выделенный фрагмент текста</A>

В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое - это задать имя другого HTML -документа, к которому нужно перейти. Например:

<A HREF="web.htm">Перейти к другому файлу web1.htm </A>

Такой фрагмент HTML -текста приведет к появлению в документе выделенного фрагмента Перейти к другому файлу web1.htm, при нажатии на который в текущее окно будет загружен документ web1 .htm .

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

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

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

Гиперссылки могут также использоваться для соединения с определенными разделами документов. Предположим, мы хотим соединить документ А с первой главой документа В, для чего нам необходимо создать именнованную гиперссылку в документе B.

Здесь вы можете увидеть <A NAME = "Глава 1">Главу 1</a>

Текст первой главы.

Теперь, описывая ссылку в документе A, надо включить не только имя файла "documentB.htm", но также и имя гиперссылки, отделяемое символом (#):

Здесь вы можете увидеть текст<A HREF = "documentB.htm #Глава1"> Главы 1 </A> документа B.

Теперь "кликнув" в слово "Глава 1" в документе А, вы переходите непосредственно на Главу 1 в документе B.

Техника соединения аналогична описанной выше, только опускается имя файла. Вот, например, связь с Главой 1 внутри того же самого файла (Документ B)

Это <A HREF = "#Глава1">Глава 1</A> текущего документа.

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

<A HREF="# ANKER_1">Переход к анкеру ANKER_1</A>

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

Во избежание недоразумений рекомендуется задавать имена анкеров латинскими буквами. Следите за написанием имен анкеров: большинство браузеров отличают большие буквы от маленьких. Если имя анкера определено как АНКЕР1 , ссылка на анкер АнкеР1 или АНкеР1 не выведет Вас на анкер АНКЕР1 , хотя документ, скорее всего, будет загружен корректно.

Кроме ссылок на HTML -документы возможны ссылки и на другие виды ресурсов:

<A HREF="ftp://server/directory/file.doc">Выгрузить файл</A>

Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file. doc , находящегося в каталоге directory на сервере server , на локальный диск пользователя.

Следующий пример:

<A HREF="mailto:user@mail.box">Послать письмо</A>

Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box .

Рассмотрим пример.

<HTML>

<HEAD> <TITLE>Пример ссылок</TITLE> </HEAD>

<BODY>

<H1>Связывание </H1>

<P>С помощью ссылок можно переходить к другим файлам (например, к <A HREF="web1.htm">к документу web1.htm </A>).</P>

<P>Можно выгружать файлы (например, <A HREF = "ftp://yi.com/home/IvanowVasja/html-primer.doc"> это примеры создания файлов </A>) по FTP.</P>

<P>Можно дать пользователю возможность послать почту (например, <A HREF="mailto:nonc@name1.com"> на деревню дедушке</A>) </P>

</BODY>

</HTML>

⇐ Предыдущая 1 2 3 456 7 Следующая ⇒

Читайте также:

Как правильно слушать собеседника

Типичные ошибки при выполнении бросков в баскетболе

Принятие христианства на Руси и его значение

Средства массовой информации США

Последнее изменение этой страницы: 2017-02-22; просмотров: 242; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.191.157.186 (0.088 с.)