МОСКОВСКИЙ НАЛОГОВЫЙ ИНСТИТУТ Кафедра гуманитарных дисциплин и управления

МОСКОВСКИЙ НАЛОГОВЫЙ ИНСТИТУТ Кафедра гуманитарных дисциплин и управления Современные средства ЭВМ и телекоммуникации Тема 6. Особенности создания и просмотра Web-объектов Учебные вопросы 1. Структура Web-страницы. 2. Оформление Web-страницы. Пантюшин Валерий Алексеевич кандидат технических наук http: //www. lingvolab. chat. ru/library/hypertext. htm http: //www. chem. msu. su/rus/wwwbook/toc. html http: //citforum. ru/nets/services 0310. shtml http: //postroika. ru/html/1 step 22. html

1. Структура Web-страницы. Язык гипертекстовой разметки документов HTML (Hyper. Text Markup Language) HTML - это язык разметки текстового документа, используемый для создания гипертекстовых ресурсов WWW. Размеченный текст позволяет представлять почту, документы, новости, результаты обработки запросов к базам данных, меню и графику на Web-сервер. Когда пользователь обращается к HTML-документу, используя программу просмотра (browser), эта программа считывает и интерпретирует каждую метку (тег) в документе и использует эту информацию для отображения документа на экране. Теги (tags) - это специальные конструкции, которые обозначают начало и конец заголовков, параграфов, списков и ссылок. Для создания HTML документов используют: ● Визуальные редакторы HTML: Microsoft Front Page, Macromedia Dreamweaver ● Текстовый редактор HTML (например Notepad) ● Графические редакторы для web дизайна (Corel DRAW, Adobe Illustrator, Adobe Flash, Adobe Photo. Shop)

Создание Web-страницы. Первый этап – сбор информации: – подготовить все данные, которые будут представлены на страницах будущего сайта – тексты, картинки, диаграммы, контактные сведения; – поделить собранные данные на группы, каждая их которых будет представлена собственной Web-страницей (информация одной страницы заполняет весь экран). Второй этап – ввод информации: – тексты вводятся с помощью программы текстового редактора; – наиболее значимая информация – в верхней части страницы; – каждая страница текста сохраняется в виде отдельного файладокумента и снабжается дескрипторами HTML для преобразования его в формат Web-страниц. Третий этап – добавление гиперссылок (графики): – гиперссылка позволяет пользователю переместиться к требуемой странице Web одним щелчком кнопки мыши; Четвертый этап – опубликование Web-страниц. Создав страницы, необходимо обратиться в компанию-провайдер, которая предоставляет услуги по опубликованию Web-страниц.

1. Структура Web-страницы. Создание странички начинается с открытия стандартного текстового редактора «Блокнот» и сохранения макета страницы следующим образом: Файл -> Сохранить Как (File -> Save as) Дальше вводится имя документа, например: index. html (а не просто index; указание *. html должно быть обязательно). Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ". txt" на ". html" недостаточно. Надо соблюсти "правило первой строки": Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE, которая обычно выглядит так: Инструмент разметки текста - теги. Теги прописываются как строчными, так и прописными буквами. Теги бывают парными и не парными. Например, парный тег – начало и конец HTML-документа. Непарный тег –

Структура HTML-документа Обязательные разделы документа HTML Любой HTML документ имеет теги: Порядок расположения разделов в HTML документе: ТЕЛО ВАШЕГО ДОКУМЕНТА Внутри конструкции могут располагаться Мета Теги.

Фон 2. Оформление Web-страницы. 1. В строку с тегом можно добавить параметр BGCOLOR и указать его значение – название цвета или его шестнадцатеричный вид. или 2. Вставка фоновой картинки или фрагмента: (графический файл должен быть расположен в одной папке с документом, иначе нужно указать к нему путь). 3. Тег может также иметь параметры отступов в документе (определяются числовым значением). leftmargin – отступ слева rightmargin – отступ справа topmargin – отступ сверху bottom margin – отступ снизу

Структура Web-страницы: – Сочетание текста и графики. – Особенность: 1) текст создается в текстовом редакторе (Блокнот) и содержится в файлах с расширением. html 2) вся графика содержится во внешних файлах, ссылки на которые содержатся в коде (тексте) HTML-файла. – Графические файлы должны быть минимальными по размеру: . gif или. jpeg (графика), . gif или. swf (анимация) – Наличие кнопок – гиперссылок. Создание фона Первый способ Создайте в текстовом редакторе HTML-файл и введите код где ”#******” – код цвета от #000000 (черный) до #ffffff (белый). Например, красный – #ff 0000, синий – #0000 ff, (Таблица цветов см: http: //fsweb. info/web/html_handbook/colors. html)

Основные HTML-элементы, размещаемые в разделе Основные элементы HTML-документа позволяют управлять физическими и логическими стилями внутри документа, улучшая визуальное восприятие документа. К основным элементам относятся: Headings - набор тегов для заголовков разных уровней важности; Paragraphs - теги, определяющие параграфы в тексте; Lists - теги, определяющие списки различного вида (нумерованный, ненумерованный и т. д. ); Tables - теги, определяющие табличное представление информации; Forms - теги, определяющие поля данных, которые заполняются пользователем. После заполнения внесенные данные отсылаются на сервер; Address - теги, определяющие адрес владельца страницы.

Заголовки - Headings Заголовки в языке HTML выделяются тегами: – (цифра обозначает самый большой по размеру шрифт) . . . Например, Профиль подготовки Стиль шрифта определяется тегом . Атрибуты тега : SIZE – размер текста (по умолчанию – 3). , где n – цифровое значение. FACE – тип шрифта (по умолчанию – Times New Roman). Courier COLOR – цвет текста (по умолчанию – черный). Цвет определяется как названием, например, red, blue и т. д, так и в шестнадцатиричном виде – #FF 0000 (красный) #0000 FF (синий). Красный Красный http: //www. uni-passau. de/~ramsch/iso 8859 -1. html

Абзацы - Paragraphs (параграфы) Абзац в HTML документе заключается в тег

текст

элементом ALIGN :

По левому краю

По центру

По правому краю

Списки- List Теги Вывод Параметры

• пункт 1
• пункт 2
• пункт 3

• Глава 1
  • Раздел 1
  • Раздел 2
• Глава 2
  • Раздел 1
  • Раздел 2
  • Глава 1 o Раздел 2 • Глава 2 o Раздел 1 o Раздел 2 Тэг
  может включать параметр TYPE со значениями disc, circle, square.
  • текст
  1. пункт 1
  2. пункт 2
  3. пункт 3
  1. пункт 1 2. пункт 2 3. пункт 3 OL TYPE="I" START="8">
  • Восемь VIII. Восемь • восемь Параметры Тэга
    : TYPE – вид счетчика: A – большие латинские буквы a – маленькие латинские буквы I – большие римские цифры i – маленькие римские цифры 1 – обычные цифры START=“ 5” – начало отсчета. Автор
    Год издания
    Тираж Автор Год издания Тираж

Линии Тег HR (Horisontal Rule) вставляет в текст горизонтальную разделительную линию. Атрибуты тега линии: WIDTH Определяет длину линии в пикселях или процентах от ширины окна Обозревателя. SIZE Определяет толщину линии в пикселях. Определяет выравнивание горизонтальной линии. Параметр может принимать следующие значения: ALIGN left – выравнивание по левому краю документа. right – выравнивание по правому краю документа. center – выравнивание по центру документа (по умолчанию). Определяет способ закраски линии как сплошной. Параметр не NOSHADE требует указания значения. Без данного параметра линия отображается объемной. COLOR Определяет цвет линии. Работает только в Internet Explorer.

. SRC" src="https://present5.com/presentation/1/-43160985_299858680.pdf-img/-43160985_299858680.pdf-13.jpg" alt="Вставка рисунков в HTML страницу Тэг . SRC" /> Вставка рисунков в HTML страницу Тэг . SRC Имя графического файла с расширением (или путь к нему). Выравнивание изображения в документе: left – по левому краю. right – по правому краю. ALIGN top или texttop – выравнивают изображение с верхней линией текста. absmiddle – выравнивает центр текстовой строки с центром изображения. absbottom – нижнюю линию изображения с нижней кромкой текстовой строки. BORDER Рамка вокруг рисунка. Значение по умолчанию – 0 (без рамки). WIDTH Ширина изображения в пикселях. HEIGHT Высота изображения в пикселях. ALT Это сообщение, которое выводится вместо картинки, если она не показывается. NAME Определяет имя изображения (если изображение связано с другим элементом) Имя графического файла с расширением с альтернативным изображением более низкого качества, чем изображение, указанное в параметре SRC. LOWSRC Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Не обязательный параметр.

Фреймы в HTML документе Фрейм – это рамка, в которую загружается другой HTML документ. – name – имя фрейма, – src – путь к загружаемому во фрейм файлу – width, height соответственно ширина и высота рамки – scrolling определяет полосы прокрутки во фрейме. Если этот параметр не прописан в HTML коде, то полосы прокрутки отображаются при необходимости, если он равен "no « – не отображаются, если – "yes", – отображаются. Параметры marginwidth и marginheight – отступы. Параметр name используется для задания конечной рамки по умолчанию – рамки в которую будут загружаться страницы при переходе по гиперссылкам HTML документа.

Название ссылки Параметры: HREF TARGET TITLE URL (унифицированный" src="https://present5.com/presentation/1/-43160985_299858680.pdf-img/-43160985_299858680.pdf-15.jpg" alt="Гиперссылки Тег . Название ссылки Параметры: HREF TARGET TITLE URL (унифицированный" /> Гиперссылки Тег . Название ссылки Параметры: HREF TARGET TITLE URL (унифицированный локатор ресурсов) – адрес любого файла в Интернете. Может быть абсолютными, то есть указывается полный адрес странички и относительным, когда указывается файл относительно текущего. _top – загружает гиперссылку на всем пространстве окна браузера (если до этого существовало разбиение на фреймы, то оно исчезнет). _blank – загружает гиперссылку в новом окне браузера. _self – загружает содержимое страницы, в окно, которое содержит эту ссылку _parent – загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов. Текст подсказки, который будет появляться при наведении мышки на гиперссылку. Графический файл в роли ссылки.