Автор работы: Пользователь скрыл имя, 27 Октября 2013 в 19:38, реферат
Основа каждой странички — язык разметки гипертекста, или HTML (Hypertext Markup Language).
Документ, который написан на языке HTML, представляет собой простой текст, в который вставлены флаги разметки, или "тэги" (markup tags). Флаги разметки объясняют компьютеру, как должен быть расположен текст на экране, в каком месте должны находиться рисунки, хранящиеся в совсем других файлах и так далее. С помощью флагов разметки формируются связи с другими web-сайтами и ресурсами Интернет.
WEB-странички
WEB-странички
WEB-странички
WEB-странички
20
WEB-странички
Создание HTML-документов
Основа каждой странички — язык разметки гипертекста, или HTML (Hypertext Markup Language).
Документ, который написан на языке HTML, представляет собой простой текст, в который вставлены флаги разметки, или "тэги" (markup tags). Флаги разметки объясняют компьютеру, как должен быть расположен текст на экране, в каком месте должны находиться рисунки, хранящиеся в совсем других файлах и так далее. С помощью флагов разметки формируются связи с другими web-сайтами и ресурсами Интернет. Просмотреть файл, написанный на языке HTML, можно в программе просмотра (Microsoft Internet Explorer, Netscape Navigator). Флаги разметки — это определенные последовательности символов, заключенные между знаками < (больше) и > (меньше).
Прописные и строчные буквы в написании флагов значения не имеют. Компьютер одинаково отреагирует на записи <title> и <TITLE>.
Любой HTML-документ, состоит из двух частей: заголовка и тела.
Все, что заключено между флагами <HTML> и </HTML>, является документом HTML. Между этими двумя флагами располагается то, что будет выводиться на экран программой просмотра -— текст, картинки, видеофрагменты, тело странички, которое заключается между двумя флагами <BODY> и </BODY>.
Флаги бывают парные и непарные, открывающие и закрывающие. Отличительным признаком закрывающего флага является символ /. Область действия парного флага начинается с того места, где стоит открывающий флаг, а кончается, где встречается закрывающий. Так, например, текст будет выводиться на экран полужирным шрифтом, если стоит между тэгами <В> и </В>.
Все форматирующие флаги всегда следуют парами и для открывающего флага должен существовать закрывающий флаг.
Флаги могут быть и непарными. Например, для перехода на новую строку используется непарный флаг <br> (Line Break).
Заголовок и название
Информация о документе, которая не выводится на экран, называется заголовком. Он заключается между флагами <HEAD> и </HEAD>. В заголовке HTML - документа содержится название странички, которое появится в рамке окна программы просмотра. Название странички располагается между флагами <TITLE> и </TITLE>. Например: <TITLE> Моя страничка </ TITLE>
Попробуем создать самый простой HTML документ. Создайте директорию HTML (например, в папке с номером группы). В нём будут храниться все Ваши HTML-документы и
графические файлы. Наберите в текстовом редакторе следующее:
<HTML>
<HEAD> <TITLE> Моя страничка (заголовок) </TlTLE> </HEAD>
<BODY>
Привет! Это моя личная домашняя страничка!
</BODY>
</HTML>
Сохраните этот файл под названием ind.htm в директории HTML. Затем откройте Ваш файл в программе просмотра (например, Microsoft Internet Explorer).
Параграфы
Если Вы хотите разбить текст на параграфы, то нужно перед началом каждого нового параграфа поставить флаг <р> . Когда программа просмотра обнаружит этот флаг, то она сама вставит перед началом параграфа пустую строку.
Использованы материалы из книги Е.В.Якушиной «INTERNET для школьников и начинающих пользователей», Москва, Аквариум, 1997г.
Вместе с флагом параграфа можно задать параметры выравнивания (ALIGN): «
Флаг <р align = left> обеспечит выравнивание текста параграфа по левому краю. При этом правый край окажется неровным, «рваным».
Чтобы выровнять текст абзаца по правому краю, используйте флаг <р align = right>.
Такое выравнивание используют для оформления заголовков и эпиграфов. Такого расположения текста можно добиться с помощью флага <р align=center>. Его используют для оформления коротких заголовков. Еще один способ оформления текста: <CENTER> текст </CENTER>
Заголовки
Заголовки (Headings) служат для выделения логических частей текста. Они обозначаются прописной или строчной латинской буквой h. Цифра после буквы показывает уровень заголовка (всего их может быть шесть).
Как и любой текст, заголовки можно выравнивать по левому или правому полю, по центру. Например:
<hl align=center> Изучение иностранного языка </hl>
<h2 align=center> Английский язык </h2>
<h3 align=center> Разговорная речь </h3>
<h4 align=center> Грамматика </h4>
<h5 align=center> Времена глаголов </h5>
Усовершенствуем нашу страничку ind.htm, используя заголовки и параграфы:
<HTML>
<HEAD> <TITLE> Моя страничка </TITLE> </HEAD>
<BODY>
<H1 ALIGN=Center> Привет! Это моя личная домашняя страничка! </Н1> <BR>
<Н2> Мой город </Н2>
<р>Я живу в Оренбурге
<НЗ ALIGN = Left> Мой ВУЗ </НЗ>
<р ALIGN = Left> Я учусь в Оренбургском Государственном Педагогическом Университете
<Н4 ALIGN=Center> Мои увлечения </Н4>
<р align=center> Мои увлечения - музыка, спорт
<Н5 ALIGN = Right> Мои Друзья </Н5>
<р align=right> Мои друзья учатся со мной в одной группе </р> <br>
<HR> <Н6 ALIGN = Center> Design "МиИ" </Н6>
</BODY>
</HTML>
Сохраните этот файл. Затем откройте файл в программе просмотра.
Способы выделения слов
Фрагмент текста можно выделить полужирным шрифтом (Bold). Отдельные слова можно подчеркнуть (Underline). Часто для выделения используют курсивный шрифт (Italic).
Для выделения логических частей текста используют горизонтальные линии (Horizontal Rule). Размер и толщина линии задаются с помощью параметров Size и Width: <HR SIZE=2 WIDTH="10%">
Горизонтальную линию можно нарисовать с помощью любого графического редактора. Создайте широкую цветную линию в редакторе MS Photo Editor (Средства MS Office), используя следующие параметры Нового рисунка: Тип рисунка — 256 цветов; Единицы — пикселы; Ширина — 760; Высота — 20; Цвет...— любой. Полученное изображение запишите как графический файл 1.gif в тот же каталог, что и Ваш документ ind.htm. После того, как линия нарисована, нужно сообщить, что она является составной частью странички. Это делают так: <IMG SRC-"l.gif">
Размер шрифта
Размер шрифта измеряется в пунктах (один пункт равен 1/72 дюйма, или 0,353 мм). Он задается относительно размера, установленного в программе просмотра по умолчанию: <font size=+n> ТЕКСТ </font> <font size=-n> ТЕКСТ </font> где n — число пунктов, на которое Вы хотите увеличить или уменьшить размер шрифта. Шрифт текста, расположенного между флагами < font size=±n> и </font>, будет увеличен или уменьшен.
Отредактируйте файл ind.htm и затем откройте его в программе просмотра:
<HTML>
<HEAD> <TITLE> Моя страничка </TITLE> </HEAD> <BODY>
<H1 ALIGN=Center> Привет! Это моя личная домашняя страничка! </Н1> <hr>
<Н2> Мой город </Н2>
<р>Я живу в <FONT SIZE=+2> Оренбурге </FONT>
<НЗ ALlGN=Left> Мой ВУЗ </НЗ>
<р ALIGN=Left> Я учусь в Оренбургском Государственном Педагогическом Университете
<Н4> Мои увлечения </Н4>
<р> Мои увлечения - <В> музыка </В>, спорт.
<Н5> Мои Друзья </Н5>
<р> <U> Мои друзья </U> учатся со мной в <1>одной группе</1>.</р> <IMG SRC=" 1 .gif *>
<Н6 ALIGN=Center> Design "МиИ" </H6>
</BODY>
</HTML>
Отформатированный текст
В любом текстовом редакторе создайте еще один HTML - документ и назовите его pre.htm.
<HTML>
<HEAD>
<TITLE> Советы по изготовлению страничек </TITLE>
</HEAD>
<BODY>
<PRE>
Избегайте драматического эффекта! Тиканье, мерцание, перемещение,, прокрутка... Эти новые спецэффекты повсюду на Web.
</BODY>
</HTML>
Сравните написанный Вами текст (между флагами <PRE> и </PRE>) с изображением на экране, полученным с помощью программы просмотра.
Напишите любой текст и разместите его между флагами <PRE> и </PRE>. < Не забывайте, что всегда должны присутствовать парные флаги разметки HTML-страницы
WEB-странички
4
Списки
Очень важный элемент Web-страничек — списки. Различают: нумерованный и маркированный списки, список определений и вложенные списки (сочетающие в себе элементы различных списков).
В нумерованном списке (Ordered List) каждому элементу предшествует его порядковый номер. Чтобы программа просмотра правильно расставила номера, нужно использовать флаги разметки: <ol>
<li> Первый элемент <li> Второй элемент </ol>
Тэг <OL> может иметь параметры: <OL TYPE=A|a|I|i|1 START=n>, где:
TYPE - определяет вид счетчика:
А - большие латинские буквы (А,В,С...)
а - маленькие латинские буквы (а,Ь,с...)
I - большие римские цифры (1,П,Ш..
i - маленькие римские цифры (i,ii,iii...)
1 - обычные цифры (1,2,3...)
START=n - число, с которого начинается отсчет
Например: <OL TYPE=I START=15>
<LI> Программирование
<LI> Алгоритмизация
</OL>
В маркированном списке (Unordered List) каждому элементу списка предшествует символ bullet (пуля). Для создания маркированного списка используются следующие флаги:
<ul>
<li> Первый элемент <li> Второй элемент </ul>
Тэг <UL> может иметь параметр: <UL TYPE=disc|circle|square> Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square).
Например: <UL TYPE=square>
<LI> Программирование <LI> Алгоритмизация </UL>
Вложенный список (Nested lists) включает элементы различных списков:
<ol>
<li> Первый элемент нумерованного списка
<ul>
<li> Первый элемент маркированного списка
<li> Второй элемент маркированного списка
</ul>
<li> Второй элемент нумерованного списка
</ol>
Создайте страничку list.htm, в которой текст будет организован с помощью списков трех
видов.
<HTML>
<HEAD> <TITLE> Советы по изготовлению страничек </TITLE > </HEAD>
<BODY>
<Н2 ALIGN = Left> Советы по изготовлению страничек </Н2>
<ol>
<li> По возможности вовсе избегайте пиктограммы "В процессе производства"
<li> Используйте соответствующий язык
<li> Не перегружайте вашу страницу большими изображениями
</ol>
<ul>
<li> Избегайте драматического эффекта!
<li> Проверяйте как молено чаще ссылки на вашей странице
<li> Не забывайте обновлять свою страничку!
</ul>
<ol>
<li> Перед тем как положить готовую страничку на сервер надо:
<ul>
<li> Проверить грамматические ошибки
<li> Просмотреть свою страничку в различных программах просмотра.
</ul>
<li> Для рекламы странички надо:
</ol>
</BODY>
</HTML>
Откройте файл list.htm в программе просмотра.
Если Вы хотите поместить в страничку глоссарий (Definition List), то следует использовать флаги <dt> (текст располагается без отступа от левого поля странички) или <dd> (расположение текста с отступом от левого поля).
<dl>
<dt> Первый термин
<dd> Определение первого термина
<dt> Второй термин
<dd> Определение второго термина
</dl>
Создайте в текстовом редакторе файл list2.htm такого содержания:
<HTML>
<HEAD> <TITLE> Термины </ TITLE> </HEAD>
<BODY>
<dl>
<dt> Web server
<dd> <P> Web - сервер. Сервер, хранящий и пересылающий HTML-документы и другие информационные ресурсы Internet с использование протокола HTTP. Его называют также HTTP-сервером. </Р>
<dt> HOME PAGE
<dd> <Р> "Домашняя страница". Головная, начальная страница, локальный архив. Первая страница какого-либо Web-cepeepa или логически связанной группы HTML документов.
</Р>
</dl>
</BODY>
</HTML>
Используя файл ind.htm, создайте HTML-документ, в котором должны присутствовать:
Сохраните этот файл под именем mdex.htm и проверьте Ваш HTML-документ в программе просмотра.
Графика
Использование цвета
Вы научились делать простые HTML-документы. Теперь раскрасим их, добавим графику. Вам необходимо продумать каждую мельчайшую деталь оформления Вашей странички, подобрать цвет шрифта, фон и «обои». Рассмотрим простой способ изменения
цвета.
У флага <BODY> есть несколько параметров: BGCOLOR —цвет фона; TEXT — цвет текста; LINK — цвет гипертекстовой связи;
VLINK — цвет гипертекстовой связи, уже посещенной в прошлом; ALINK — цвет активной гипертекстовой связи. Цвет связи указывается шестнадцатеричным числом, имеющим следующую структуру: RED — GREEN — BLUE или RGB (красный - зеленый - синий). На каждый цвет отводится 256 значений обозначающих присутствие того или иного компонента в результирующем цвете. Например, максимум красного — FF (В шестнадцатеричной системе), остальные два цвета — 00. Результат — "#FF0000"
Установка значения цвета фона выглядит следующим образом: BGCOLOR="#Шестнадцатеричное значение". Так, чтобы установить красный цвет фона, нужно написать <BODY BGCOLOR ="FF0000">
Чтобы «покрасить» текст в зеленый цвет, нужно использовать команду <BODY TEXT ="00FF00">.