ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 02.04.2024

Просмотров: 400

Скачиваний: 0

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Уроки html'а. Урок # 1.

Уроки html'а. Урок # 2.

Заголовки

Набор текста

Разделители

Уроки html'а. Урок # 3.

Верхние и нижние индексы

Уроки html'а. Урок # 4.

Шрифты различного начертания

Управление цветом шрифта

Уроки html'а. Урок # 5.

Списки и таблицы

Что такое списки и таблицы

Как списки помогают организовать нам информацию

Как создать список на вашей странице

Нумерованный список

Списки определений

Списки в списках

Уроки html'а. Урок # 7.

Как построить таблицу

Объединение нескольких столбцов в одну ячейку

Включение списка в таблицу

Уроки html'а. Урок # 8.

Выравнивание текста в таблице

Цвета в таблице

Предварительное форматирование

Уроки html'а. Урок # 9.

Где вы сможете найти графику, изображения и рисунки

Создаем свое изображение

Как поместить изображение на страницу

Оптимальные размеры изображений

Миниатюра полное изображение

Алтернативный текст

Выравнивание изображений

Задание размера изображения

Пиктограммы

Линии и полосы

Фон страниц

Уроки html'а. Урок # 11.

Как браузеры работают с прозрачными изображениями

Создание прозрачных gif-изображений

Наложение изображений

Уроки html'а. Урок # 12.

Понятие гипертекстовой ссылки

Анатомия ссылки

Ссылки на любое место в www

Уроки html'а. Урок # 13.

Создание якоря и присвоение ему якоря

Ссылка на якорь

Компоновка ссылок в виде списков

Текст ссылок должен быть понятным

Уроки html'а. Урок # 14.

Изображения-карты

Как работают изображения-карты

Изображения-карты не являются новой технологией

Различия между серверными и клиентскими изображениями-картами

Разбиение изображения на фрагменты

Уроки html'а. Урок # 15.

Прямоугольники

Окружности

Многоугольники

Уроки html'а. Урок # 16.

Совершенствования веб-страницы

Развертывание веб-страницы в веб-узел

Зачем разделять веб-страницу

Правильно проектируйте свой узел

Подсчет числа посетителей домашней страницы

Задание размера изображения

Вы можете управлять не только способом выравнивания изображения, но и его высотой и шириной. Как правило, изображения выводятся в натуральную величину, но с помощью ключевых слов HEIGHT и WIDTH можно сжать или растянуть изображение, не изменяя самой картинки. Кроме того, ключевые слова HEIGHT и WIDTH позволяют отвести вполне определенное место под изображение и пустить текст вокруг него оборкой. В этом случае, пока загружаются изображения, остальная страница будет уже видна. Многие применяют ключевые слова HEIGHT и WIDTH именно по этой причине, даже если нет необходимости менять размер изображения.

Значения HEIGHT и WIDTH задаются в пикселах. Тем самым задается доля размеров картинки по отношению к размерам экрана.

Ключевые слова HEIGHT и WIDTH используются в теге <img> наряду с ключевыми словами выравнивания и альтернативного текста. Когда я ввел ключевое слово HEIGHT и WIDTH в тег картинки, получился следующий код:

<center> <img width="100" height="100" align="left" alt="Бабочка" src="http://cray.vision.krg.kz/~Sam/dlab/grcol/anim/dc72.gif"> <h3>-= Моя коллекция бабочек =-</h3> </center> Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.<br>

Посмотрите, что получится:

-= Моя коллекция бабочек =-

Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.

Теперь изображение бабочки на экране размерами в 100х100. HEIGHT - высота, WIDTH - ширина.

Пиктограммы

Кроме полноцветных изображений (подобной бабочке) и рисунков, на странице могут присутствовать пиктограммы всех видов. С технической точки зрения пиктограммы попадают в категорию "изображения" (они обычно хранятся в файлах формата GIF или JPeG), но обычно очень малы 0.5-5kb, и применяются на домашних страницах из соображений дизайна, эстетики, а также для "перелистывания" страниц.

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


Линии и полосы

Раньше мы говорили о применении тега <hr> для того, чтобы разделить веб-страницу на части линиями. Очень часто вместо тега <hr> используют линейную графику (простую графику в виде полос или линий).

Элементы линейной графики бывают различных форм, цветов и рисунков и существенно отличаются от результата работы тега <hr>. Например, на нашей странице необходимо нужно поставить красивый разделитель под названием DC16.GIF, который расположен на http://cray.vision.krg.kz/~Sam/dlab/grcol/divs (кстати, здесь полно разделителей):

<center> <img alt="Бабочка" src="http://cray.vision.krg.kz/~Sam/dlab/grcol/anim/dc72.gif"> <h3>-= Моя коллекция бабочек =-</h3> <img src="http://cray.vision.krg.kz/~Sam/dlab/grcol/divs/DC16.GIF"><br><br> </center> Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.<br><br>

Посмотрите, что получится:

-= Моя коллекция бабочек =-

Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.

Пиктограммы новинок

Пиктограммы перемещения

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

Обычно эти пиктограммы имеют вид стрелок, указывающих то или иное направление. Обычно это стрелки перехода на следующую страницу. Например, если вы читаете книгу на веб-узле, скорее всего, вы увидите на каждой странице три пиктограммы: стелка влево, стрелка вправо и пиктограмма "Начало". Стрелка влево вернет вас на предыдущую страницу, стрелка вправо - на следующую, а пиктограмма "Начало" - в самое начало книги. Это избавит вас от необходимости перемещаться с помощью кнопок Back (Назад) и Forward (Вперед) на панели инструментов браузера.


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


Фон страниц

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

Давным-давно людям было безразлично, какого цвета машина, на которой они ездят. Все ездили на Ford Model T, которые выпускались только черного цвета. Эта машина устраивала несколько поколений людей, пока их не осенило, что машины могут быть разных цветов и форм. Сегодня на дорогах можно увидеть машини всех цветов, от пурпурного до ярко-зеленого.

Веб-страницы эволюционировали аналогичным образом. Сначала фон всех веб-страниц был белым или серым, поскольку именно так их отображали древнии браузеры. Вскоре всем это надоело, и появилось уже знакомое нам ключевое слово BGCOLOR, способное изменять цвет фона Веб-страниц. У вас есть возможность выбора из 16'777'216 цветов. Гораздо быстрее можно задать один из 16 "именных" цветов.

Ключевое слово BGCOLOR может использоваться в теге <body>. Мы говорили уже об этом на первом уроке.

Вы можете задавать не только стандартные цвета, но и фоновые рисунки. При правильном применении эта графика дает интересный эффект. Фоновые узоры состоят из картинок, которые повторяясь создают эффект узоры (как обычные обои). Текст и изображение, естественно, распологаются поверх фона.

Допустим у нас есть фоновая картинка dc209.gif расположенная на http://cray.vision.krg.kz/~Sam/dlab/grcol/back. Посмотрите, как с помощью ключевого слова BACKGROUND="..." мы поставим эту картинку как фон в нашей странице:

<body background="http://cray.vision.krg.kz/~Sam/dlab/grcol/back/dc209.gif"> <center> <img alt="Бабочка" src="http://cray.vision.krg.kz/~Sam/dlab/grcol/anim/dc72.gif"> <h3>-= Моя коллекция бабочек =-</h3> <img src="http://cray.vision.krg.kz/~Sam/dlab/grcol/divs/DC16.GIF"><br><br> </center> Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.<br><br> </body>

Посмотрите, что получится:

-= Моя коллекция бабочек =-

Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.


Итог занятия

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

Уроки html'а. Урок # 11.

Прозрачные изображения в формате GIF

Я уже говорил о форматах GIF и JPeG как имеющие примерно равные возможности с точки зрения помещения графики на веб-страницы. Настала пора упомянуть об одном специфическом свойстве формата GIF, дающем ему преимущество при интеграции в веб-страницу - о прозрачности.

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

Прозрачные GIF-изображения - мощное средство разработки страниц. Чтобы создавать интересные рисунки для WWW, необходимо уметь использовать прозрачные GIF-изображения.

Понять, что такое прозрачные GIF-изображения и как они работают, девольно просто. Вспомните, как работает проектор. Просвечивая прозрачные пленки с нанесенными на них надписями, он отображает на экране только надписи. Прозрачные GIF-изображения выглядят на экране примерно так же. Формат GIF позволяет задать один из 256 доступных в GIF цветов, который при отображении на браузере будет игнорироваться, то есть выглядеть прозрачным.

Часто GIF-изображения применяются в рисунках с белым фоном. Если белый цвет задан в качестве прозрачного, браузер игнорирует все белые точки в рисунке, и изображение становится "плавающим". Оно лучше интегрируется в веб-страницу.

Давайте посмотрим как отличаются прозрачные картинки от непрозрачных.

-= Моя коллекция бабочек =-

Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски. Еще у меня есть различные графические инструменты: Adobe Photoshop Corel Draw PhotoPaint