Теги логического форматирования

Выделение важного текста

Это очень важный текст

Программный код

if Var1 > 10 then Var2 = 54

Пример ввода текста в неизменном формате:

Этот текст введен

в неизменном

формате

А это ошибочный текст!!!!! Я не хотел этого писать!!!!

 

2. Создать вложенные списки:

Как сделать хороший HTML – документ

I. Структурировать материал

1. Разбить материал на главы, параграфы, пункты

2. Придумать заголовки частей

II. Продумать стиль оформления

o Выбрать цвета

а. Выбрать цвет фона

b. Выбрать цвет основного текста

c. Выбрать цвета для выделения отдельных элементов документа

o Зафиксировать способы оформления отдельных элементов

III. Написать программу

IV. Провести тестирование и отладку программы

 

3. Создать следующую таблицу:

Смайлики

Примеры смайликов (Вы можете их использовать при написании электронного письма)
Улыбка (смех)	: )	Огорчение	: (
: ))	: ( (
: )))	Зевает	: 0
Поцелуй	: -*	Злость	>: -(
Слезы	: `-(	Слезы радости	: `-)
Маленькая девочка	8: -)	Усатый	: -{)

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

Сделать ширину первого и третьего столбцов по 30% ширины окна браузера, а 3 и 4 – по 20%.

4. В папке создайте несколько HTML-страниц с именами: page1.html, page2.html …. В этих документах разместите произвольное содержимое (таблицы, изображения, текст, видео, аудио и т.д.)

В той же папке создайте файл index.htm, в котором разместите маркированный список, каждый пункт которого является гиперссылкой на соответствующий файл. Пример смотрите на рисунке 26.

С каждой страницы должен быть возврат на главную страницу index.htm. Сделайте так, чтобы пункт Глобальные русурсы ссылался на какой-либо веб-ресурс, размещенный в сети Интернет, например, Википедию.

Рисунок 26 – Организация гиперссылок в виде списка

Пункт Словарь терминов в файле index.htm должен содержать ссылку на файл glossary.htm. Это файл математических терминов. В файле glossary.htm буквы алфавита сделайте внутритекстовыми ссылками на нужные строки документа. В этом файле также организуйте возврат на главную страницу (index.htm).

5. Создайте следующие 3 формы на WEB-странице:

В последней форме в полях Фамилия, Имя, Отчество должны отображаться данные по умолчанию. В каждой форме должна быть кнопка, очищающая поля формы.

Тема 2. Каскадные таблицы стилей и новое в CSS3

Краткое описание:

В данном разделе будет рассмотрена технология каскадных таблиц стилей как уровень представления web – документа. Речь пойдет о способах добавления стилей, единицах измерения, используемых в CSS, правилах каскадности. Будут рассмотрены основные свойства, применяемые при разработке структуры и оформления web -документа.

В данной теме не будут рассматриваться свойства, связанные с анимацией и транформацией элементов на web-странице, так как их применение еще не является устоявшимся и правила использования меняются.

СТИЛИ CSS

Идея об отделении внешнего вида HTML-документа от его структуры возникла с самого момента создания языка HTML. Инструментом для создания представлений стал формальный язык описания внешнего вида документа, названный каскадными таблицами стилей (Саsсаding Stylе Shееts – CSS).

Стилем называется всё то, что определяет внешний вид web-страницы при ее просмотре в браузере. Главной идеей создания каскадных таблиц стилей стало отделение содержимого документа от его физического представления.

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

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

Новое в CSS3

В 1996 г., вышла первая официальная Рекомендация CSS Level 1, в которой описываются все основные механизмы использования инструкций, предназначенных для работы с цветами, шрифтами и интервалами на веб-странице.

Уже в 1998 году была выпущена Рекомендация CSS Level 2. Самыми важными изменениями в ней стало добавления свойств для позиционирования элементов на странице. Помимо этого были предложены единицы измерений, свойства для табличной верстки, сложные методы выбора элементов, акустические таблицы стилей и другие свойства.

В Рекомендации CSS Level 3 добавлена возможность поддержки вертикального расположения текста, улучшенная обработка таблиц, усовершенствованная интеграция с другими XML-технологиями: SVG (Scаlаblе Vесtоr Grарhiсs), МаthМL и SМIL (Synсhrоnizеd Multimеdiа Intеrchаngе Lаnguаgе).

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

Так, например, появились новые селекторы, которые упрощают выборку. Улучшились возможности по работе с фоном, благодаря которым теперь можно задать для одного элемента сразу несколько фонов, а также растягивать фон по ширине и высоте. Появилась возможность задать прозрачный цвет, закруглённые рамки, свой шрифт на сайте, добавлять тень к элементам, создавать линейные и сферические градиенты. Появились трансформации. Теперь очень легко можно, например, повернуть, например, целый блок на определённый угол, растянуть или сжать его на определённый процент, подвинуть. Особенно полезно это в совокупности с JavaScript. Появилась анимация. В некоторых случаях это помогает даже отказаться от того же jQuery, увеличить скорость загрузки страницы, что также хорошо скажется на поисковой оптимизации.

Преимущества CSS

Укажем основные преимущества использования каскадных таблиц стилей.

• Широкие возможности контроля шрифтового оформления и раскладки страницы.

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

• Уменьшение размера документов за счет удаления из документа стилевого HTML.

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

• CSS хорошо поддерживается. Почти каждый современный браузер поддерживает практически все компоненты спецификации CSS версии 2 и 2.1. Существует ряд тормозящих развитие задержек, связанных с недостаточной поддержкой CSS3 в браузерах, которые требуют создания обходных путей.

Задание стиля

Для задания правила стиля нужно указать две составяющих : селектор и определение.

Селектором является либо имя HTML- тега, либо класса, либо идентификатор.

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

То есть, правило выглядит примерно так:

Селектор_1 {свойство_1: значение_1;

свойство_2: значение_2; }

Селектор –это часть стилевого правила, в котором определяется элемент (или элементы), к которому применяются инструкции представления. Например, если вы хотите, чтобы все заголовки h1 в документе отображались зеленым цветом, напишите стилевое правило, указав h1 в качестве селектора.

В CSS существуют следующие типы селекторов, обеспечивающие гибкость и эффективность при создании таблиц стилей:

• селекторы тегов (элементов);

• контекстные селекторы (потомки, дочерние элементы и элементы-братья);

• селекторы классов и селекторы идентификаторов (id);

• селекторы атрибутов;

• псевдоклассы;

• псевдоэлементы.

Не все эти селекторы, созданные в расчете на будущее, поддерживаются современными браузерами.

В следующем примере определяются стили заголовков первого и второго уровней путем использования тега style:

< html> < head>

< style>

h1 { color: #fff;

font-size: 36pt; }

h2 { color: #00f;

font-size: 24pt; }

< /style>

< /head>

< body>

< h1> это - заголовок 1 уровня, цвет шрифта – черный< /h1>

< h2> это - заголовок 2 уровня, цвет шрифта – синий< /h2>

< p> В этом абзаце используется стиль по умолчанию < /p>

< /body> < /html>

Мы изменили стили h1 и h2, принятые по умолчанию: назначили размеры (36 и 24 пунктов) и цвета (черный и синий) для всех текстов, которые окажутся внутри этих тегов.

Обратите внимание на то, что внутри тега < style> указываются имена тегов, которые пишутся без угловых скобок.

Примечание. В CSS 2 появился универсальный селектор элементов (*), который соответствует любому элементу. Стилевое правило * {color: gray} делает все элементы документа серыми. Универсальный селектор приводит к проблемам с элементами управления форм в некоторых браузерах. Если ваша страница содержит поля ввода на форме, то безопаснее будет не использовать универсальный селектор.

⇐ Предыдущая567891011121314Следующая ⇒

Поделиться:

Популярное:

1. I. СИСТЕТЕХНИЧЕСКОЕ ПРЕДСТАВЛЕНИЕ ТЕХНОЛОГИЧЕСКОГО ПРОЦЕССА ПРОИЗВОДСТВА ЭЛЕКТРОННЫХ СРЕДСТВ
2. II. ОПРЕДЕЛЕНИЕ ВЕРТИКАЛЬНЫХ ГРАНИЦ МОРФОЛОГИЧЕСКОГО ПОЛЯ ЧЕЛОВЕКА
3. А кто наблюдает над всеми? Кто задает стратегию? Кто создает правила?
4. Анализ использования технологического оборудования
5. АНАЛИЗ ПОКАЗАТЕЛЕЙ ТЕХНОЛОГИЧЕСКОго ПРОЦЕССА
6. Анализ предполагаемого технологического процесса с точки зрения охраны окружающей среды и условий труда
7. Анализ природно-рекреационного потенциала для организации экологического тура на терриитории Республики Карелия
8. Анализ рынка и маркетинговая стратегия
9. Анализ стратегических альтернатив
10. Анализ технологического процесса
11. Анализ технологического процесса как объекта автоматизации
12. Анализ точности технологического процесса