Kodomo

Пользователь

Учебная страница курса биоинформатики,
год поступления 2014

Практикум 6. HTML: дополнительные главы

Цвета

На этом ресурсе можно легко подобрать нужный цвет и сразу увидеть его код в шестнадцатеричном формате (hex-код): Color Wheel.

В языке HTML много где (в цвете фона странички или ячейки таблицы, тэга шрифта, тэга горизонтальной черты <hr> и т.п.) можно менять цвет, и задавать его нужно именно hex-кодом. Первый символ в нем - #, а дальше идут интенсивности цветов в порядке RGB, то есть red (красный) - green (зеленый) - blue (синий).

Например: #FF0000 - чистый красный цвет (интенсивность красного 255, зеленого и синего - 0)

На этом сайте можно посмотреть разные интересные цвета и их возможные удачные сочетания: http://www.color-hex.com/

Интересные символы

Иногда хочется вставить на свою страничку символы, которых нет на клавиатуре: например, длинное тире или греческую букву. Для этого можно использовать код этого символа в формате HTML, который можно посмотреть, например, в большой таблице символов Юникода. Там есть поиск по тексту или по категориям.

Например: Если нужно вставить букву α, то введите в поиск слово "альфа" и получите массу разных вариантов написания буквы. HTML-код символа указан в розовой рамке (например, для стандартной буквы альфа он такой: 

&#945;

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

Кстати, если редактируете код в кодировке UTF-8, то некоторые специальные символы может быть удобнее вставлять как есть, юникод это позволяет. Это не относится к неразнывному пробелу и прочим сомволам, приведенным выше - их лучше писать кодами.

Картинки

Какие форматы нужно использовать: JPEG для фотографий, PNG для картинок. Под фотографией будем понимать изображение, пришедшее с фотоаппарата, сканера, веб-камеры, микроскопа и т.п., а под картинкой: скриншоты, изображения с текстом, графики, схемы и т.п. Если сохраните картинку в JPEG, то она станет "волосатой" из-за так называемых "артефактов" JPEG, а если фотографию сохраните в PNG, то файл раздуется до огромных размеров.

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

Переходы по странице

Чтобы сослаться на элемент внутри страницы, нужно сделать следующее:

CSS

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

Код CSS пишите в отдельном файле (пусть это будет style.css в папке public_html). Чтобы подключить его, добавьте следующий код в заголовочную часть HTML-файла, к которому вы хотите подключить: <link rel="stylesheet" type="text/css" charset="utf-8" media="all" href="/~ваш-логин/style.css" />

В качестве дополнительного самостоятельного задания: разберитесь, как писать CSS прямо в HTML-файле (тег style и атрибут style любого элемента).

Начнем с простого: мы хотим, чтобы фоновый цвет абсолютно всех таблиц был голубым. Тогда пишем в нашем CSS-файле следующее: 

td {
  background-color: blue;
}

Отлично! Td - это тег, отвечающий за ячейку, background-color (фоновый цвет) легко ищется в гугле, если искать что-нибудь вроде "css background color", а цвет blue - см. выше.

Посмотрим ещё раз, как пишутся правила в CSS-файле: сначала мы задаем множество элементов (это называется селектор), потом в фигурных скобках пишем одно или несколько правил, применяемых к выбранным элементам. Правило состоит из названия свойства CSS, двоеточия и значения, присваиваемого этому свойству. Селектор "td" отбирает все ячейки всех таблиц. К одному селектору может применяться несколько правил. В конце каждого правила пишется точка с запятой (см. выше). В качестве самостоятельного задания: найдите в сети более полную информацию о различных селекторах и полезных свойствах CSS. Что-то есть на htmlbook и w3schools.

Однако об одном селекторе всё-таки стоит упомянуть. Что если мы хотим изменить цвет ячеек не у кажой таблицы? Для этого нужно присвоить интересующим нас таблицам class=blue-table (название более или менее произвольное) и прописать следующее правило: 

.blue-table td {
  background-color: blue;
}

В качестве самостоятельного задания: разберитесь, как работает данный селетор (".blue-table td"), что значит точка перед blue-table, что значит, что td идёт после .blue-table.

В качестве самостоятельного задания: как задать цвет или артинку в качестве фона страницы или таблицы? Как замостить этой картинкой фон? Как растянуть фоновую картинку под размер таблицы?

Таблицы

Ячейкам таблицы также можно задавать ширину и высоту, как картинкам (см. выше). Можно задать высоту стазу целому столбцу. По умолчанию размеры ячеек подгоняются так, чтобы умещалось содержимое.

Ориентация содержимого внутри таблицы: атрибут align определяет выравнивание содержимого ячейки по горизонтали, атрибут valign определяет выравнивание содержимого ячейки по вертикали. В качестве самостоятельного задания: выпишите, какие значения могут принимать эти атрибуты и что они означают.

Атрибут rowspan служит для объединения нескольких ячеек таблицы по вертикали, а colspan - по горизонтали. Они принимают значение, равное количеству объединяемых ячеек.

Красивые рамочки таблиц можно задать с помощью CSS-свойства border-collapse. В качестве самостоятельного задания: выпишите остальные полезные CSS-свойста таблиц.