Приложение к элективному курсу "Основы web-программирования". Язык HTML.

сюда можно поместить рисунок или текст

сюда можно поместить рисунок или текст

сюда можно поместить рисунок или текст

сюда можно поместить рисунок или текст

Теги - задают строку таблицы

Теги - задают отдельную ячейку в строке

Пример:

Гиперссылки

Давайте рассмотрим, как организовать переход с одной странички на другую внутри одного сайта или на другой сайт. Так же можно организовать переход по ссылке внутри одного документа (странички).

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

Когда мы подведем указатель мыши к этому слову или картинке, то указатель будет выглядеть, как ладонь руки.

Такая связь одной странички с другой называется ссылкой.

Переход на другую страничку внутри одного сайта или на другой сайт можно организовать с помощью следующих тегов:

Моя личная страница

или

http://www.sabak.kz/"Интерактивные уроки

Меню для сайта можно организовать следующим образом:

index.htm"Главная

pg1.htm"Рисунок

pg2.htm"Акварель

pg3.htm"Гуашь

pg4.htm"Композиция

pg5.htm"Натюрморт

pg6.htm"Монотипия

pg7.htm"Геометрия

pg8.htm"Платок

pg9.htm"Сырмак

Мы можем установить ссылки не только на внешние объекты, но и внутри одного документа.

Например, нам необходимо оформить доклад на некоторую тему в виде странички.

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

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

Пример: Доклад «Вулканы».

Меню:

История помнит

В городе мертвых

Наука со стажем

Огненное ожерелье

В разном обличье

Исчез остров

Вулканы потухли навсегда?

Алгоритм работы:

Необходимо сначала сделать закладки на все "точки", отмеченные в меню.

История помнит

…

В ГОРОДЕ МЕРТВЫХ

...

Создать ссылки в меню на данные закладки.

…

#address2"В городе мертвых

…

Каскадные таблицы стилей

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

В целом, эта технология требует отдельного курса для изучения и носит название – Каскадные таблицы стилей(CSS). Мы ознакомимся с общими принципами этой технологии.

Давайте попробуем расшифровать следующий фрагмент разметки страницы:

Вулканы

p

{text-indent:30;

text-align:justify;

margin-left:30;

margin-right:10;

}

К какому разделу документа относиться данный фрагмент?

Это заголовок документа! Запомните – это важно для нашей темы.

Что здесь для вас необычно?

Кроме титульной надписи еще идет описание с использованием тега .

На что может указывать буква – p?

Это начало абзаца.

Параметры абзаца мы и хотим задать. И, самое главное – это и есть ключ нашей новой темы – мы хотим задать параметры на всю страницу. Один раз опишем в заголовке, а действовать будет на всю страницу.

В данном примере речь идет о следующих параметрах:

- отступ красной строки – 30 пикселей;

- выравнивание по левому и правому краю текста;

- отступ слева от края страницы – 30, справа – 10.

Оформление разметки:

задание стиля разметки

P разметка абзаца

{text-indent:30;

text-align:justify; параметры абзаца в фигурных скобках

margin-left:30;

margin-right:10;

}

Сюда можно было бы добавить – цвет шрифта, размер и др.

Font-size: 20;

Color: red;

Особенности использования каскадных таблиц:

Стиль можно переопределить в тексте документа -

Можно сохранить стили в отдельном файле и импортировать с помощью тега:

- расположенного в заголовке документа.

head

link rel="stylesheet" href="style.css"

/head

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

head

Мы рассмотрели только простейший пример использования каскадных таблиц.

Все возможности – этого "языка" разметки страниц – можно познать только в процессе непосредственной практики создания сайтов.

Создание и обработка форм

Язык HTML позволяет организовать интерактивное взаимодействие с пользователем. Для этого можно использовать заполняемые формы, определяемые с помощью тега FORM.

Расчет площади прямоугольника

P {

margin-left:20;

margin-right:20;

text-indent: 10;

text-align:justify;

}

НАХОЖДЕНИЕ НАИБОЛЬШЕГО ЧИСЛА