Студопедия — Урок 8:Цвет фона и текста
Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Урок 8:Цвет фона и текста






Мы уже знаем, как менять цвет текста, но для этого нам нужно было заключать его в теги font, а это не всегда удобно. Также мы познакомились с тем, как задавать цвет фона или фоновое изображение таблиц, теперь проделать то же самое для всего документа не составит труда.

Вот необходимые атрибуты:

BACKGROUND – определяет изображение для " заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.

BGCOLOR – определяет цвет фона документа.

TEXT – определяет цвет текста в документе.

Все они прописываются для элемента BODY. Значения цветов задаются либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

Пример 1:

<! -- задаем фоновый цвет и цвет текста -->

< body bgcolor=" #FFF8D2" text=" red" >

< p> Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный < /p>

< font color=" green" >

< p> В этом абзаце текст будет зеленый, потому что мы заключили его в теги font и придали соответствующий цвет < /p>

< /font>

< p> Теперь текст снова будет красный < /p>

< /body>

Результат в браузере:


Пример 2:

<! -- задаем фоновое изображение и цвет текста -->

< body background=" fon.jpg" text=" red" >

< p> Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный < /p>

< p> Теперь тут тоже красное и только < font color=" green" > эти слова зеленые < /font> < /p>

< p> Тут как вы поняли текст тоже красный < /p>

< /body>

Результат в браузере:

Ничего сложного нет. Экспериментируйте, практикуйтесь и все получится!

Урок 9: Разберемся с таблицами в html

Html таблицы – полезная штука. Обычно их используют не только для отображения таблиц как таковых, но и для создания невидимого каркаса страницы, помогающего расположить текст и изображения должным образом. Раньше все сайты имели табличную структуру, сейчас все большую популярность приобретает структура на дивах (с помощью < div> и CSS). Вот классический пример табличной структуры:

Шапка сайта (логотип и все такое)
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
Ссылка 5

 

Основное содержание Реклама и все такое
Блок копирайта

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

TABLE – элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Сразу скажу, что здесь есть атрибут BORDER, который задает толщину рамки таблицы в пикселях.

TR (Table Row) – создает новый ряд таблицы. Закрывающий тег обязателен.

TD (Table Data) – начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.

Давайте попробуем создать таблицу из двух рядов и двух столбцов:

< table border=" 1" >

< tr>

< td> ряд 1 ячейка 1 < /td> < td> ряд 1 ячейка 2 < /td>

< /tr>

< tr>

< td> ряд 2 ячейка 1 < /td> < td> ряд 2 ячейка 2 < /td>

< /tr>

< /table>

Вот как это будет выглядеть в браузере:

ряд 1 ячейка 1 ряд 1 ячейка 2
ряд 2 ячейка 1 ряд 2 ячейка 2

Разобрались? Т.е. таблица начинается с < table>, затем идёт < tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки: < td> ряд 1 ячейка 1< /td> и < td> ряд 1 ячейка 2< /td>. Ряд закрывается < /tr>, и сразу начинается новый ряд < tr>. В новом ряду также две ячейки. Таблица закрывается < /table>. Все довольно логично.







Дата добавления: 2014-12-06; просмотров: 470. Нарушение авторских прав; Мы поможем в написании вашей работы!



Обзор компонентов Multisim Компоненты – это основа любой схемы, это все элементы, из которых она состоит. Multisim оперирует с двумя категориями...

Композиция из абстрактных геометрических фигур Данная композиция состоит из линий, штриховки, абстрактных геометрических форм...

Важнейшие способы обработки и анализа рядов динамики Не во всех случаях эмпирические данные рядов динамики позволяют определить тенденцию изменения явления во времени...

ТЕОРЕТИЧЕСКАЯ МЕХАНИКА Статика является частью теоретической механики, изучающей условия, при ко­торых тело находится под действием заданной системы сил...

Неисправности автосцепки, с которыми запрещается постановка вагонов в поезд. Причины саморасцепов ЗАПРЕЩАЕТСЯ: постановка в поезда и следование в них вагонов, у которых автосцепное устройство имеет хотя бы одну из следующих неисправностей: - трещину в корпусе автосцепки, излом деталей механизма...

Понятие метода в психологии. Классификация методов психологии и их характеристика Метод – это путь, способ познания, посредством которого познается предмет науки (С...

ЛЕКАРСТВЕННЫЕ ФОРМЫ ДЛЯ ИНЪЕКЦИЙ К лекарственным формам для инъекций относятся водные, спиртовые и масляные растворы, суспензии, эмульсии, ново­галеновые препараты, жидкие органопрепараты и жидкие экс­тракты, а также порошки и таблетки для имплантации...

Виды и жанры театрализованных представлений   Проживание бронируется и оплачивается слушателями самостоятельно...

Что происходит при встрече с близнецовым пламенем   Если встреча с родственной душой может произойти достаточно спокойно – то встреча с близнецовым пламенем всегда подобна вспышке...

Реостаты и резисторы силовой цепи. Реостаты и резисторы силовой цепи. Резисторы и реостаты предназначены для ограничения тока в электрических цепях. В зависимости от назначения различают пусковые...

Studopedia.info - Студопедия - 2014-2024 год . (0.008 сек.) русская версия | украинская версия