 |
Web-страница — текстовый файл.
|
|
|
|
Исходный текст Web-страницы написан на языке описания структуры страницы HTML (H yper T ext M arkup L anguage — язык гипертекстовой разметки). HTML позволяет форматировать обычный текст в абзацы, заголовки, списки и другие структуры, позволяет создавать ссылки на связанные страницы, т.е. позволяет определять назначение фрагментов текста. HTML есть попытка создать единый стандарт для Mac, PC и для Unix. Язык постоянно развивается, появляются новые стандарты, но не все нововведения могут использоваться, так как они реализованы в web-браузерах по-разному. Поэтому предпочтительно использовать базовые возможности языка HTML.
Код HTML-документа можно писать в любом текстовом редакторе и просматривать результат в web-браузере. При этом необходимо не забывать обновлять полученную web-страницу после внесения изменений в исходный код.
HTML-файл — текстовый файл с расширением htm (или html), в котором использованы инструкции по форматированию — теги (tags).
Тег — набор символов. Все теги заключаются в угловых скобках: символы "меньше" (<) и "больше" (>). После открывающей скобки идет ключевое слово, определяющее тег.
Каждый тег имеет специальное значение. Теги не чувствительны к регистру, но принято их набирать прописными буквами.
Существуют парные и одиночные теги. Парные теги воздействуют на фрагменты текста (открывающие создают эффект, закрывающие прекращают его действие), одиночные дают разовый эффект в месте их появления. Закрывающие теги начинаются с символа "слеш" (/).
| парные теги: | одиночные теги: |
| <HTML> </HTML> <B> </B> <HEAD> </HEAD> <H3> </H3> <ADDRESS> </ADDRESS> <LI> <LI> | <BR> <HR> <META> <BASEFONT> <FRAME> <INPUT> |
Струткура документа.
|
|
|
HTML-документ имеет строго заданную структуру. Он состоит из основного текста документа и тегов разметки, сам документ — это один контейнер с именем " HTML ":
<HTML> Содержание документа </HTML>
HTML-документ должен начинаться с тега <HTML> и заканчиваться закрывающем тегом </HTML>. Эта пара тегов сообщает браузеру, что данный документ — документ HTML.
Документ HTML состоит из раздела заголовка (HEAD) и тела документа (BODY). Раздел заголовка заключен между парными тегами и содержит информацию о документе в целом. Этот раздел должен содержать теги <TITLE> и </TITLE> — контейнер заголовка, текст которого отображается в строке заголовка окна браузера. Пропуск данного парного тега не вызывает ошибки в современных браузерах, но опускать его не рекомендуется. Пример структуры документа представлен ниже:
<HTML>
<HEAD>
<TITLE> Содержание заголовка </TITLE>
</HEAD>
<BODY>
Содержание тела документа
</BODY>
</HTML>
Язык HTML предназначен для описания функциональных разделов документов. В обычных документе основными функциональными разделами являются заголовки и абзацы При форматировании документа необходимо взять за правило не ставить лишние пробелы и пустые строки, так как они игнорируются. Тег тела документа <BODY> может содержать большое количество атрибутов. Они определяю внешний облик документа.
Большинство фоновых рисунков малы, и их копии заполняют все окно браузера. Можно использовать стандартные текстурные изображения, эмблемы или логотипы. Формат изображения долен быть одним из трех: GIF, JPEG или PNG [ Ошибка! Источник ссылки не найден. ].
Абзацы.
Для обозначения обычных абзацев используют парный тег <P> и </P>. Перед параграфом автоматически вставляется пустая строка. Закрывающий тег не обязателен, но желательно его не опускать.
|
|
|
Текст в абзаце может быть выровнен по левому краю, правому, по центру, по ширине. Для этого используется атрибут ALIGN тега <P>.
Заголовки.
Заголовки используются не для простого определения размера и начертания текста,а для создания структуры документа.
HTML поддерживает шесть уровней внутренних заголовков документа, помечаемых тегами от <H1> и </H1> до <H6> и </H6>. В окне браузера все заголовки отображаются шрифтами разного размера. Все они могут иметь атрибут выравнивания ALIGN.
Например, следующий фрагмент организует заголовки 1-го и 2-го уровней:
<HTML>
…
<BODY>
<H1> заголовок 1 уровня </H1>
<H2> заголовок 2 уровня </H2>
текст
…
</BODY>
</HTML>
Списки.
Списки - одна из разновидности оформления абзаца. Наиболее используемыми являются два варианта списков.
Ненумерованный список (u nordered l ist) создается двумя тегами: <UL> и <LI>. Парный тег <UL> сдвигает абзац вправо, а одиночный тег <LI> — ставит маркер (bullet).
Нумерованный список (o rdered l ist) задается тегами: <OL> и <LI>. Парный тег <OL> сдвигает абзац вправо, а одиночный тег <LI> — ставит номер.
Создать нумерованный список можно следующим образом:
<OL>
<LI> 1 элемент <BR>
<LI> 2 элемент <BR>
</OL>
| Тег OL атрибут TYPE | Тег UL атрибут TYPE | ||
| TYPE="1" | Обычная нумерация. | TYPE="DISK" | Маркером - жирная точка. |
| TYPE="I" | Нумерация большими римскими цифрами | TYPE="CIRCLE" | Маркер - кружок. |
| TYPE="i" | Нумерация малыми римскими цифрами | TYPE="SQUARE" | Маркер - квадратик. |
| TYPE="A" | Нумерация большими латинскими цифрами | ||
| TYPE="a" | Нумерация малыми латинскими цифрами | ||
Таблицы.
Таблицы — одно из основных средств верстки web-страницы и достижения эффектных результатов. Таблицы строятся их трех элементов: тег таблицы <TABLE> (1), теги строк <TR> (2), теги ячеек <TD> (3). Данные теги — парные, наличие закрывающих тегов обязательно [ Ошибка! Источник ссылки не найден. ]. Между тегами <TABLE> и </TABLE> может один раз встретиться пара тегов <CAPTION> и </CAPTION>, определяющая заголовок таблицы. Заголовок таблицы размещается над таблицей или под ней.
|
|
|
Внутри ячеек таблицы могут содержаться любые данные и любые теги. Ячейка таблицы может содержать вложенную таблицу.
Атрибуты и теги таблицы. Таблица 7.
| Атрибут | Назначение |
| Bgcolor="#FFCC33" | цвет фона таблицы (строки, ячейки). |
| Background="картинка.gif" | задает фоновый рисунок для таблицы (строки, ячейки). |
| width="50" или width="50%" | ширина таблицы (строки, ячейки) в пикселях или процентах. |
| height="45" или height="45%" | высота таблицы (строки, ячейки) в пикселях или процентах. |
| align="center" (right, left) | выравнивает содержимое ячейки относительно ее центра (правого или левого краев). |
| (top, bottom) | вертикальное выравнивание содержимого строки (ячейки) по середине (наверху или внизу). |
| colspan="2" | растянуть ячейку на несколько столбцов. |
| rowspan="2" | растянуть ячейку на несколько рядов. |
| cellspacing="5" | задает пространство между ячейками. |
| cellpadding="5" | задает пространство внутри ячейки между ее содержимым и границами. |
| border="3" | задает толщину рамки таблицы. |
| bordercolor="#000000" | задает цвет рамки таблицы. |
Гиперссылки.
В качестве гиперссылки могут выступать текст, рисунок. Для создания гиперссылки из текста необходимо его пометить парным тегом <A>(anchor – якорь).
Атрибуты гиперссылки. Таблица 8.
| Атрибут | Назначение |
| HREF="адрес" | Переход к файлу, путь которого указан либо относительно, либо URL файла (адрес файла в Сети – в случае ссылки на чужой сайт). Важно в пути заменить бэкслэш на слэш. |
| TARGET=new | После выбора ссылки, страница будет открыта в новом окне браузера. Таким образом без задержки можно вернуться к исходной странице –– не тратиться время на новое открытие исходной страницы в случае «отката». |
Например, тег
<A HREF="../main/index.html"> Содержание </A>
осуществляет переход к файлу index.html, расположенному в подкаталоге main надкаталога текущего каталога. Для связи с автором сайта используется тег
<A HREF="mailto:[email protected]"> Ждем писем! </A>
|
|
|
А следующий тег
<A HREF="mailto:[email protected]?subject=About solution"> Ждем писем! </A>
позволяет в поле темы вставить текст «About solution».
Метки.
С помощью меток можно перейти не только в начало страницы, но и перемещаться по тексту. Порядок создания меток и работы с ними таков:
1 шаг. Место, в которое должен происходить переход, помечается тегом
<A NAME=" Имя Метки "> текст </A>.
2 шаг. В гиперссылке на место перехода указывается имя метки.
В случае перехода внутри текущей страницы:
<A HREF="# Имя Метки "> текст </A>.
В случае перехода к метке в файле index.html:
<A HREF="index.html# Имя Метки "> (см. Оглавление) </A>.
Существует возможность одновременно и устанавливать ссылку куда–либо, и присваивать имя метке, например, в теге:
<A HREF="index.html#Literat" NAME="Part1"> (см. Литература) </A>.
А в случае нахождения в файле index.html гиперссылки с меткой
<A HREF="Glava1.html#Part1" NAME="Literat"> (вернуться в Главу 1) </A>.
можно вернуться обратно.
Тег <IMG>
Тег IMG служит для внедрения графики на страницы. На данный момент поддерживаются форматы файлов GIF, JPG, JPEG, PNG. Возможно использование анимированных картинок (GIF). Чтобы картинка была одновременно и ссылкой, то поместите тег IMG между <a href=...><img src="xakep.gif"></a>
Атрибуты
src Обязательный атрибут, указывающий URL рисунка
align Выравнивает изображение к одной из сторон документа
alt Выводит текст к картинке. Полезно, если браузер не отображает графику на странице
border Устанавливает толщину рамки вокруг изображения в пикселах. По умолчанию этот параметр для ускорения загрузки страницы браузером
hspace Определяет размер свободного места в пикселах слева и справа от изображения, улучшает внешний вид страницы, отделяя изображение от текста
vspace Определяет размер свободного места в пикселах сверху и снизу от изображения, улучшает внешний вид страницы, отделяя изображение от текста
width Ширина картинки в пикселах или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером
20.. Алгоритм – заранее заданное понятное и точное предписание возможному исполнителю совершить определенную последовательность действий для получения решения некоторой задачи.
Свойства алгоритмов:
1. понятность для использования – получив алгоритм исполнитель должен понимать как его выполнить;
2. дискретность – алгоритм должен представлять процесс решения задачи в виде конечного числа законченных действий;
3. определенность алгоритма – алгоритм должен всякий раз приводить к одному и тому же результату при одних и тех же исходных данных;
|
|
|
4. результативность – за конечное число шагов алгоритм должен либо приводить к решению задачи, либо останавливаться из-за невозможности получить решение и выдавать соответствующие сообщения;
5. массовость – алгоритм должен быть разработан для некоторого класса задач, различающихся исходными данными, а не для одной конкретной задачи. Набор исходных данных для которых применяется алгоритм называется областью применения алгоритма.
Используются следующие формы представления алгоритма:
1. словесная – запись на естественном разговорном языке;
2. графическая – действие изображается в виде графических символов, смысл которых заранее оговорен;
3. псевдокоды – условный алгоритмический язык, включающий в себя элементы естественного разговорного языка и элементы языков программирования;
4. программа на алгоритмическом языке программирования – будет использоваться для представления алгоритмической блок-схемы.
Исполнитель алгоритма – некоторая абстрактная или реальная система, способная выполнить действия, предписываемые алгоритмом.В информатике исполнитель алгоритмов – компьютер.
2)ветвления. Обеспечивает в зависимости от рез-та проверки условие выбора одного из альтернативных путей работы алгоритма. При этом оба пути ведут к одному общему выходу – стр-ра ветвления сущ-ет в 4-х вариантах
цикл. Обеспечивает многократное выполнение некоторых совокупных действий, называемых телом цикла.
|
|
|
