Основы создания HTML и CSS документов в программе Aptana Studio 3. 2 страница
| Рис.17. Ввод данных в ячейки третьей строки таблицы. |
Третья строка содержит 2 ячейки с текстом 3 и 4. Это обычные ячейки, в которых нет объединения. Поэтому в третьей строке в первой ячейке прописываем текст 3, во второй – текст 4. Третью ячейку в третьей строке удаляем (Рис.17).
| Рис.18. Таблица без границ (не прописан атрибут border в теге table). |
Получилась таблица, у нее нет границ (Рис.18)
Требуется задать ширину и высоту в таблице. Прописываем в теге <table border="1" width="50%" height="50"> (Рис.19).
| Рис.19. Ввод атрибутов для задания границ у таблицы, ширины и высоты таблицы. |
4.11.3 Заголовок таблицы
На практике названия таблиц пишутся в них самих или выше на странице. Но HTML имеет собственный тег для подписи таблиц: caption. Этот тег чаще всего стоит в таблице сверху и может выравниваться атрибутом align во всех направлениях.
<table>
<caption>Название таблицы</caption>
<tr align="center">
4.11.4 Расстояние между ячейками
Когда создается таблица, содержимое автоматически прикрепляется к краю ячейки и ячейки прикреплены непосредственно друг к другу. Эти расстояния регулируют два HTML-атрибута:
cellspacing – расстояние между ячейками;
cellpadding – расстояние от содержимого до краев ячейки.
Пустые ячейки отражаются по стандарту рамками без области содержания. Чтобы этого избежать, нужно вставить неразрывный пробел
Цвет фона
Цвет фона таблицы, строк и ячеек задается с помощью атрибута bgcolor=" ".
5. CSS
CSS-Cascading Style Sheets (Каскадные таблицы стилей) – язык стилей, предназначенный для отображения HTML-документа. Синтаксис: сначала пишется команда потом, после двоеточия, значение, в конце ставится точкой с запятой:
Команда:Значение;
После одиночной или последней команды точка с запятой необязательна, но возможна. Если требуется прописать несколько команд подряд, то они обязательно должны отделяться друг от друга точкой с запятой.
Команда1:Значение; Команда2:Значение;
Есть три способа применить правила CSS к HTML-документу. Чаще используется способ с использованием внешней таблицы стилей.
Метод 1: Инлайн/In-line (атрибут style)
Можно применять CSS к HTML с помощью HTML-атрибута style. Размер шрифта абзаца можно установить с помощью атрибута style со значением команды font-size:1cm; (Рис.20):
| Рис.20. Размер шрифта абзаца с помощью атрибута style. |
Метод 2: Внутренний (тэг style)
| Рис.21. Размер шрифта абзаца с помощью тега style. |
Второй способ вставки CSS-кодов - HTML-тэг <style>. Например (Рис.21):
Метод 3: Внешний (ссылка на таблицу стилей)
Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. Документ таблицы стилей (внешняя таблица стилей) - это простой текстовый файл с расширением *.css., который содержит как минимум одно стилевое правило. Он не может содержать тегов HTML страниц сайта. Присутствие тегов в документе сайта может нарушить ход выполнения правил, игнорироваться полностью. Можно поместить таблицу стилей на web-сервер или на жёсткий диск, как и файлы сайта.
Комментарии в CSS выглядят следующим образом: /* Вот здесь между двумя чертами со звездочками находится комментарий.*/
Например, таблица стилей называется style.css и находится в папке с документом HTML, который требуется связать с данной таблицей стилей.
Чтобы создать ссылку из HTML-документа на таблицу стилей (style.css), необходимо вставить в разделе header HTML, то есть между тэгами <head> и </head> одну строчку HTML-кода:
<link rel="stylesheet" href="style/style.css"/>
| Рис.22. Ввод команды link для связи документа html и css. |
Для этого после закрывающего тега </title> нажимаем Enter, вводим link (Рис.22).
| Рис.23. Тег link с атрибутами rel и href. |
Нажимаем Ctrl+E, в атрибуте href мигает курсор (Рис.23).
Вводим значение атрибута href – название файла внешней таблицы стилей. Начинаем набирать первую букву s, Aptana Studio 3 должна предложить выпадающий список с имеющимися файлами таблиц стилей (Рис.24).
| Рис.25. Автоматическое добавление имени внешнего файла style.css в атрибуте href. |
| Рис.24. Ввод имени внешнего файла css в атрибут href. |
Если программа этого не сделала, значит файл таблицы стилей не находится в одной папке с документом HTML, тогда следует указать папку, где лежит данная таблица стилей. Нажимаем клавишу Enter, значение атрибута добавится автоматически (Рис.25).
Несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением большого количества HTML-документов.
Тег <link> устанавливает связь с внешним документом вроде файла со стилями style.css или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку. Закрывающий тег не требуется.
Атрибут rel — определяет отношение текущего документа как базового к документу определяемого ссылкой (rel="stylesheet" — ссылается на внешнюю таблицу стилей). В атрибуте href указывается URL документа таблицы стилей, в данном случае URL адреса относительный, значит файл style.css находится в корневом каталоге сайта.
5.1. Селекторы
Селектор – это способ применения стилей в CSS к определённым объектам HTML.
Слово "селектор" происходит от английского слова "select", что в переводе означает «выбирать». Чаще всего на практике применяются селекторы тегов, классов и идентификаторов. Например, нам нужно задать стили форматирования для тега абзацев <p>. Для этого перейдем в Aptana Studio 3и создадим файл внешней таблицы стилей style.css, в котором запишем следующие строки (Рис.26).
| Рис.26. Задание стиля для тега абзацев. |
При записи имени селекторов не допускается использование русских символов. Имена селекторов должны начинаться с латинских букв. Имена могут содержать арабские цифры, знаки дефиса (-) и подчеркивания (_)
Универсальный селектор
| Рис.27. html-страница с заголовком, абзацем и ссылкой. |
Универсальный селектор обозначается звездочкой (*). Он применяется, когда необходимо установить один стиль для всех элементов web-страницы. Рассмотрим универсальный селектор на следующем примере. Создадим HTML-страницу с заголовком (тег <h1>), абзацем (тег <p>) и ссылкой (тег <a>) (Рис. 27).
Подключим к ней файл style.css, в котором пропишем универсальный селектор (Рис.28)
| Рис.28. Задание стиля универсального селектора. |
| Рис.29. Отображение универсального селектора в окне браузера. |
Все элементы web-страницы (заголовок, абзац, ссылка) станут голубые (Рис.29). Такой же результат получим, если установим все эти свойства для тега <body>, т.е. в файле style.css вместо звездочки (*) укажем селектор тега <body>(body).
Селекторы тегов
В качестве селектора тегов может быть любой тег HTML, для которого можно установить определенные правила.
Синтаксис:
имя тега {свойство1; свойство2; ... свойствоN}
| Рис.30. Селектор тега h1. |
Например, сделаем заголовок зеленого цвета. Для этого в файле style.css запишем следующие строки (Рис.30):
Сохраним файл и обновим страничку в браузере (Рис.31)
| Рис.31. Отображение селектора тегов в окне браузера. |
Классы
Классы применяются тогда, когда нужно для конкретного элемента или группы элементов задать свой определенный стиль или же, когда одному и тому же тегу необходимо задать разные стилевые правила (свойства).
Переходим в файл style.css и записываем класс следующим образом: ставим точку, прописываем имя класса p2, открываем фигурные скобки и задаем нужные css-команды (Рис.32).
| Рис.32. Задание имени класса p2. |
Переходим в файл *.html. Задаем абзац и внутри него прописываем атрибут class со значением "p2" (class="p2")(Рис.33)
| Рис.33. Применение класса p2 атрибуте class для тега абзаца. |
Идентификаторы
Служат для описания конкретного элемента страницы, и может применяться только один раз. Идентификатор в файле *.css обозначается символом решетки (#). Как и при использовании классов, идентификаторы могут применяться для конкретного тега.
Переходим в файл style.css и записываем класс следующим образом: ставим символ решетки, прописываем имя идентификатора, открываем фигурные скобки и задаем нужные css-команды (Рис.34).
 |
| Рис.35. Применение идентификатора во втором абзаце с помощью атрибута id. |
Переходим в файл *.html. Задаем еще абзац и внутри него прописываем id="abzac2" (Рис.35).
Контекстные селекторы
На практике при создании web-страниц очень часто одни теги являются вложенными в другие. Контекстные селекторы позволяют задать отдельный стиль для тега, который расположен внутри другого. Рассмотрим пример. В документе *.html создадим вместо первого абзаца, т.е. тега <p>, блочный элемент тег <div>. Сделаем жирными первые слова раздела и абзаца при помощи тега <b> (Рис.36).
| Рис.36. Первые слова раздела и абзаца жирные при использовании тега b. |
| Рис.37. Задание контекстного селектора p b{}. |
Переходим в файл style.css и прописываем следующий стиль p b{} (Рис.37):
Контекстные селекторы могут содержать не только один вложенный тег. В зависимости от дизайна страницы контекстные селекторы могут содержать два и более последовательно вложенных друг в друга селекторов.
Наибольшие возможности контекстные селекторы дают при совместном использовании их вместе с классами и идентификаторами.
Соседние селекторы
Соседними селекторами называются селекторы, которые располагаются сразу друг за другом. Общий синтаксис соседних селекторов выглядит следующим образом
Синтакис:
Селектор1 + Селектор2 {Свойство1; Свойство2 ... СвойствоN}
При такой записи стилевые свойства применяются только ко второму селектору. Это иногда облегчает задание стилей без применения классов или идентификаторов.
Рассмотрим следующий пример, в котором теги <i> и <u> являются соседними, а теги <b> и <u> (тег u отвечает за подчеркивание текста) не являются соседними (Рис.38).
| Рис.38. Отображение соседних тегов i и u. |
Переходим в файл style.css и прописываем следующий стиль b+i {} (Рис.39):
| Рис.39. Задание стиля соседних селекторов b+i {}. |
| Рис.40. Отображение стиля соседних селекторов в окне браузера. |
Результат в браузере будет выглядеть следующим образом (Рис.40):
Дочерние селекторы
Дочерними называются такие селекторы, которые применяются к тегам, находящимися внутри своего родительского элемента.
Все селекторы, относящиеся к тегам, которые находятся внутри раздела <div>, будут являться дочерними по отношению к селектору тега <div>, т.е. селекторы тегов <i> и <u> и <b> будут дочерними.
Синтаксис:
селектор1 > селектор2 {свойство1, свойство2 ... свойствоN}
При такой записи селекторов свойства будут применяться только ко второму селектору.
r scCB19TMUgs29vFVALeNmqSLFo4tp2Pm4E+DDG0uzG45hwI2hMgW5oXHZosswIYQWcBnCoMfNSEt CA2kBaGBtCA0kBaEBg9pQZ+38w6GtJCfrWf1qIw+u+0JjGgBUggXsn2wDl7QfDHsGNFCeo8z82eo 2BAb0sILGNtb4DKS9RNUWkW8gLHZggvB5MhutgCsvSe5MZyY0MLxOQsmRkZTBjbEhmYLL2BKC3uK yPxRKjbEhvYWXsDM3sJaRZBMdxfYEBvSwgsY23IOGWyIDWnhBbymBW0tPIGHtKA3v73D8GsROX8B ojrUTuGVCLX/H/do7pUsBuq/AAAAAElFTkSuQmCCUEsBAi0AFAAGAAgAAAAhALGCZ7YKAQAAEwIA ABMAAAAAAAAAAAAAAAAAAAAAAFtDb250ZW50X1R5cGVzXS54bWxQSwECLQAUAAYACAAAACEAOP0h /9YAAACUAQAACwAAAAAAAAAAAAAAAAA7AQAAX3JlbHMvLnJlbHNQSwECLQAUAAYACAAAACEAiV/2 TGoEAAA2CgAADgAAAAAAAAAAAAAAAAA6AgAAZHJzL2Uyb0RvYy54bWxQSwECLQAUAAYACAAAACEA qiYOvrwAAAAhAQAAGQAAAAAAAAAAAAAAAADQBgAAZHJzL19yZWxzL2Uyb0RvYy54bWwucmVsc1BL AQItABQABgAIAAAAIQDVfq4W4AAAAAkBAAAPAAAAAAAAAAAAAAAAAMMHAABkcnMvZG93bnJldi54 bWxQSwECLQAKAAAAAAAAACEAWclVTNQRAADUEQAAFAAAAAAAAAAAAAAAAADQCAAAZHJzL21lZGlh L2ltYWdlMS5wbmdQSwUGAAAAAAYABgB8AQAA1hoAAAAA ">
| Рис.41. Селектор u – дочерний по отношению к div. |
Переходим в файл style.css и прописываем следующий стиль (Рис.41):
| Рис.42. Отображение стиля дочерних селекторов в окне браузера. |
Результат в браузере будет выглядеть следующим образом (Рис.42):
Псевдоклассы
Псевдоклассы задают стиль элементам страницы, которые изменяют свое состояние действиями пользователя. К примеру, у ссылки можно изменить цвет текста при наведении на нее курсором мыши с помощью псевдокласса hover.
| Рис.43. Псевдокласс hover для ссылки. |
Для этого в документе *.css нужно прописать следующий стиль (Рис.43).
Ссылка изменит свой цвет на зеленый, если мы наведем на нее мышкой.
5.2. Краткий перечень CSS-команд
Шрифт
1) Текст
1) text-align – задает горизонтальное выравнивание текста.
text-align: left (значение по умолчанию) – выравнивает текст по левому краю;
text-align: right – выравнивает текст по правому краю;
text-align: center – выравнивает текст по центру;
text-align: justify – выравнивает текст по ширине.
<p style="text-align: right"> Абзац текста с выравниванием по правому краю</p>
<p style="text-align: justify">Абзац текста с выравниванием по ширине</p>
2) text-decoration – задает специальное оформление текста.
text-decoration: none – отменяет любое специальное оформление (значение по умолчанию для большинства тегов);
text-decoration: underline – подчеркивает текст;
text-decoration: overline – «надчеркивает» текст;
text-decoration: line-through – зачеркивает текст;
3) font-size – задает размер шрифта, используемого в элементе страницы.
font-size: cm – размер шрифта в сантиметрах;
font-size: mm – размер шрифта в миллиметрах;
font-size: pt – размер шрифта в точках;
font-size: in – размер шрифта в дюймах;
font-size: pc – размер шрифта в пиках;
font-size: px – размер шрифта в пикселях;
4) text-indent – задает отступ красной строки.
Отступ может быть задан как абсолютной величиной, так и процентом от ширины родителя. Значение по умолчанию 0.
5) text-transform – задает преобразования регистра символов текста.
text-transform: none (значение по умолчанию) – отключает любые преобразования регистра символов;
text-transform: capitalize – преобразует первую букву каждого слова текста в верхний регистр;
text-transform: uppercase – преобразует все символы текста в верхний регистр;
text-transform: lowercace – преобразует все символы текста в нижний регистр;
6) color – задает цвет текста.
color: Цвет;
В качестве комбинаций цвета может использоваться:
- непосредственно написание цвета, то есть такие названия как red (красный), green (зеленый), blue (синий). Предлагается 60 стандартных названий цветов на английском языке. Есть еще много других названий цветов, которые поддерживают многие браузеры;
- RGB комбинации, где цвета следует записывать с цветовым значением, выраженным десятичными дробями следующим способом:
color: rgb(200,100,150);
Данный способ удобно применять, используя любой (даже самый простой) графический редактор (Paint), где можно зайти в палитру, выбрать любой нужный цвет и определить необходимые цифры.
- RGB-цвета в шестнадцатеричном написании
color: #FF0000;
color: #FF00;
7) font-family – задает имя шрифта, используемого в элементе страницы.
В качестве значения этого атрибута задается либо непосредственно имя нужного шрифта, либо одно из пяти предопределенных значений, задающих имя шрифтового семейства. Можно задавать одновременно несколько шрифтов, разделив их имена запятыми; в этом случае браузер сможет выбрать из них тот, который установлен на компьютере клиента. Если имя шрифта содержит пробелы, его следует взять в одинарные кавычки.
font-family: «Имя шрифта»;
font-family: serif;
font-family: san-serif, cursive, fantasy, monospace;
8) font-style – задает вид шрифта, используемого в элементе страницы.
font-style: normal (значение по умолчанию) – задает обычный вид шрифта;
font-style: italic – задает курсивное начертание;
font-style: oblique – задает наклонное начертание.
9) font-weight – задает полужирное начертание шрифта, используемого в элементе страницы.
font-weight: normal (значение по умолчанию) – задает обычный вид шрифта;
font-weight: bold – задает полужирное начертание шрифта
10) line-height– задает вертикальное расстояние между строками текста (междустрочный интервал).
Высота может быть задана как абсолютной величиной, так и процентом от высоты родителя. Значение по умолчанию normal.
line-height: 150%; - полуторный интервал между стоками.
11) background-image – задает фоновый рисунок Web-страницы или ее элемента.
background-image: url(Интернет-адрес файла рисунка)
url – uniform resource locator – адрес в Интернет.
background-image: none – отключает фоновый рисунок (значение по умолчанию).
<body style="background-image: URL(risunok1.jpg); ">
12) background-color – задает фоновый цвет Web-страницы или ее элемента.
background-color: цвет;
13) background – в данной команде можно прописывать цвет фона или задавать фоновый рисунок, или задавать и то и другое одновременно
14) width – задает ширину свободно позиционированного элемента.
15) height – задает высоту свободно позиционированного элемента.
Ширина и высота могут быть заданы как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto (значение по умолчанию) заставляет браузер устанавливать ширину или высоту элемента самостоятельно.
<p style="width: 30%;">Абзац текста заданного размера в процентах</p>
height: auto;
width: 300px;
16) border – общая команда для всех рамок, содержит стиль, ширину и цвет в любой последовательности
Border: dotted 5px red;
17) border-color – задает цвет всех границ элемента страницы.
Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое относится к верхней и нижней границам, а второе – к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе – к левой и правой, третье – к нижней.
18) border-style – задает стиль границ элемента.
border-style: none – (значение по умолчанию) – запрещает рисование границы;
border-style: dotted – рисует точечную линию;
border-style: dashed – рисует штриховую линию;
border-style: solid – рисует сплошную линию;
border-style: double – рисует двойную сплошную линию;
border-style: groove – с рельефом;
border-style: ridge – волнистая.
19) border-width – задает толщину всех границ элемента страницы.
Как и при задании цвета каждой границы по отдельности, можно задавать их ширину с помощью команд: border-top-width, border-right-width, border-bottom-width и border-left-width.
Рамка или граница также позволяет отформатировать каждую из четырех сторон отдельно. Для этого используются команды border-left, border-top, border-right, border-bottom. Эти команды комбинируются с цветом (color), стилем (style) рамки и ее шириной (width). Так, например, чтобы указать толщину правой стороны, используется команда border-right-width, цвет нижней границы задается командой border-bottom-color, стиль верхней границы задается командой border-top-style и т.д.
20) border-collapse –совпадение границ у таблицы.
Применяется только для тега <TABLE>
border-collapse: separate (значение по умолчанию) разделяет границу таблицы и границы ее ячеек
border-collapse: collapse по возможности объединяет их.
<table border="1" style="border-collapse:collapse;">
21) padding – задает отступ между элементом страницы и различными элементами.
Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам элемента. Если задано два значения, первое относится к верхней и нижней границам, а второе – к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе – к левой и правой, третье – к нижней. Значение по умолчанию 0, для <TD> 1.
<p style="border-color: blue green red; border-width: 2px; border-style:dotted; padding: 2em;">Текст в разноцветной рамке с заданным отступом</p>
Часть 2. Задания на лабораторные работы
1. Форматирование текста
Разберем пример задания на форматирование текста.
- Сделать заголовок второго уровня, цвет текста зеленый, выравнивание по центру, текст заголовка "Заголовок второго уровня".
- Задать первый абзац: выравнивание по ширине, цвет текста задать в RGB-палитре (150,20,210), размер шрифта равен 1 сантиметру, тип шрифта Comic Sans MS, выделить слово Это курсивом. Текст абзаца "Это первый абзац, выровненный по ширине, цвет текста в RGB-палитре (150,20,210), размер шрифта равен 1 сантиметру, тип шрифта Comic Sans MS, выделить слово Это курсивом "
- Задать второй абзац: выравнивание по правому краю, цвет текста задать в шестнадцатеричном написании ff33bb, размер шрифта равен 5 точкам, тип шрифта Arial, слово абзац сделать жирным. Текст абзаца "Это второй абзац, выровненный по правому краю, цвет текста в шестнадцатеричном написании ff33bb, размер шрифта равен 5 точкам, тип шрифта Arial, слово абзац сделать жирным "
Шаги выполнения работы:
Создать документ *.html (вместо звездочки написать любое имя).
В документе набрать html:5 и нажать ctrl+E, появится каркас web-страницы и между тегами <body></body> произвести форматирование текста.
Требуется ввести заголовок 2 уровня, прописываем h2 и нажимаем ctrl+E (Рис.44).
| Рис.44. Заголовок второго уровня. |
Далее сказано, что цвет заголовка зеленый, следовательно, в открывающем теге <h2> после цифры 2 устанавливаем курсор и начинаем вводить атрибут style. Набираем букву s и появляется выпадающий список с атрибутом style (Рис.45).
| Рис.45. Атрибут style в заголовке второго уровня. |
Нажать enter, атрибут style добавится автоматически.
После этого курсор будет находиться между кавычками атрибута style, начинаем набирать команду color, введя только первую английскую букву с появляется список css команд, выбираем в списке color (Рис.46).
| Рис.46. CSS-команда color, отвечающая за цвет текста. |
Нажимаем enter, команда color добавится автоматически и после двоеточия прописываем значение green, отвечающее за зеленый цвет текста. Далее ставим точку с запятой и начинаем набирать команду text-align, отвечающую за выравнивание текста, со значением center, которое выравнивает текст по центру (Рис.47). Между открывающим и закрывающим тегом <h2></h2> набираем текст заголовка "Заголовок второго уровня" (Рис.48).