Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 8. Изображения, списки и таблицы в html

Содержание курса

Картинки в html

Основные форматы картинок, которые поддерживают все браузеры - это GIF, JPG, PNG. Перед началом изучения темы картинок в html это следует запомнить.

Вставляется картинка в html код при помощи пустого элемента <img />, у которого есть два обязательных атрибута: src - в значении которого указывается расположение картинки. Второй обязательный атрибут - alt - альтернативный текст, который будет показываться в случае, если картинка не подгрузилась.

Еще два важных атрибута ширины и высоты картинки - width и height ускоряют загрузку картинок в браузере (картинок может быть много и они могут быть большими) и предотвращают "подскоки" текста при подгрузке картинок.

Картинка может быть ссылкой, в этом случае тег <img /> распологается внутри элемента <a>

<!DOCTYPE html>
	<html>
		<head>
			<title>Вставка картинок</title>
		</head>
		<body>
	/*Вставка картинки в код html*/
			<img src="/images/image001.jpg" alt="Схема проезда" 
			width="700" height="300" />
	/*Ссылка в виде картинки*/
			<a href="/adress.html" title="Наши адреса" >
				<img src="/images/image001.jpg"
				alt="Схема проезда" width="700" height="300" />
			</a>
		</body>
	</html>

Обратите внимание, что при указании расположения картинки также указывается ее расширение (в примере - это .jpg).

Цифры в width и height подразумеваются в пикселях.

title - это универсальный атрибут - всплывающая подсказка (наведите курсор мыши на атрибут title в примере, и вы увидите всплывающую подсказку). Таким образом, мы изучили уже 4 универсальных атрибута, которые могут быть у любого элемента html - это class, id, style и title. Удобно задавать атрибут title (не путайте с тегом <title>) ссылкам, чтобы объяснить пользователям, что это за ссылка.

Списки в html

Списки в html бывают нескольких типов.

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

Первый тип - неупорядоченный маркированный список. Задается тегами <ul></ul>. Пункты списка задаются элементом <li></li>, который должен находиться внутри <ul></ul>: <ul><li></li></ul>

<!DOCTYPE html>
	<html>
		<head>
			<title>Неупорядоченный маркированный список</title>
		</head>
		<body>
			<ul>
				<li>Пункт списка один</li>
				<li>Пункт списка два</li>
				<li>Пункт списка три</li>
			</ul>
		</body>
	</html>

Результат отображения в браузере будет таким:

Маркеры списка можно изменить, используя свойство CSS: list-style-type, у которого есть четыре возможных значения: disc (значение по умолчанию), circle (пустые кружочки), square (квадратные маркеры), none (без маркеров).
Пример: ul {list-style-type: square;}

Свойство list-style-position позволяет задать положение маркеров списка относительно текста. Значения: outside (маркеры располагаются вне текстового блока, значение по умолчанию), inside (маркеры располагаются в текстовом блоке).

Свойство list-style-image позволяет задать в виде маркера любую картинку на ваше усмотрение. В значении URL этого свойства необходимо указать в кавычках путь к картинке с указанием ее расширения:
ul {list-style-image: url("/images/marker.gif");}

Упорядоченный список

Второй тип списка в html - упорядоченный список, задается элементом <ol></ol>, внутри которого также располагаются пункты списка, задаваемые элементом <li></li>: <ol><li></li></ol>.

<!DOCTYPE html>
	<html>
		<head>
			<title>Упорядоченный список</title>
		</head>
		<body>
			<ol>
				<li>Пункт списка один</li>
				<li>Пункт списка два</li>
				<li>Пункт списка три</li>
				<li>Пункт списка четыре</li>
				<li>Пункт списка пять</li>
			</ol>
		</body>
	</html>

Вид в браузере:

У элемента <ol></ol> также есть свойство CSS list-style-type с возможными значениями: decimal (арабские цифры - значение по умолчанию), lower-alpha (строчные латинские буквы a, b, c...), upper-alpha (прописные латинские буквы A, B, C...), lower-roman (римские цифры в нижнем регистре), upper-roman (римские цифры в верхнем регистре), none (без цифр и букв).

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

Список определений (definition list) - более редкий вид списка, подходит для чего-то типа толкового словаря, когда идет слово и дальше некоторый текст определения.

Список определений задается тремя элементами: <:dl></dl> (задает начало и конец всего списка определений), <:dt></dt> (задает термины), <:dd></dd> (задает описание терминов). Обратите внимание в примере на вложенность этих элементов друг в друга.

<!DOCTYPE html>
	<html>
		<head>
			<title>Список определений</title>
		</head>
		<body>
			<dl>
				<dt>Первый термин списка</dt>
					<dd>Определение первого термина списка</dd>
				<dt>Второй термин списка</dt>
					<dd>Определение второго термина списка</dd>
				<dt>Третий термин списка</dt>
					<dd>Определение третьего термина списка</dd>
			</dl>
		</body>
	</html>

Вид в браузере:

Таблицы в html

Таблицу в html задают три элемента. Минимальная таблица - это таблица из одной ячейки.

Первый основной элемент, задающий начало и конец таблицы - это элемент <table></table>.

Горизонталь в таблице отрисовывает элемент <tr></tr>, вложенный в элемент <table></table>.

Ячейку в нужной горизонтали задает элемент <td></td>, вложенный в элемент <tr></tr>, в нем и находится содержимое ячейки, т.е. какие-то данные таблицы, которые мы пишем. Таким образом, структура тегов для таблицы такова:

						Таблица 1 × 1
		
<table>
	<tr>
		<td>Содержимое одной ячейки таблицы</td>
	</tr>
</table>

Давайте для более наглядного примера сделаем таблицу, скажем, 3 × 3:

<!DOCTYPE html>
	<html>
		<head>
			<title>Таблица 3 × 3</title>
		</head>
		<body>
		<table>
			<tr>
				<td>(1-1)</td><td>(1-2)</td><td>(1-3)</td>
			</tr>
			<tr>
				<td>(2-1)</td><td>(2-2)</td><td>(2-3)</td>
			</tr>
			<tr>
				<td>(3-1)</td><td>(3-2)</td><td>(3-3)</td>
			</tr>
		</table>
		</body>
	</html>

Вид в браузере:

Свойство border задает рамку для ячеек таблицы (подробнее об этом в уроке 11). Зададим рамку для нашей таблицы для более удобного представления табличных данных. Сделаем сплошную рамку 3 пикселя красного цвета для всей таблицы (в CSS обращение к элементу <table>), а для ячеек зададим сплошную рамку в 1 пиксель зеленого цвета (в CSS обращение к элементу <td>):

<!DOCTYPE html>
	<html>
		<head>
			<title>Таблица 3 × 3 с рамкой</title>
			<style>
				table {border: 3px solid red;}
				td {border: 1px solid green;}
			</style>
		</head>
		<body>
		<table>
			<tr>
				<td>(1-1)</td><td>(1-2)</td><td>(1-3)</td>
			</tr>
			<tr>
				<td>(2-1)</td><td>(2-2)222</td><td>(2-3)</td>
			</tr>
			<tr>
				<td>(3-1)</td><td>(3-2)</td><td>(3-3)</td>
			</tr>
		</table>
		</body>
	</html>

Вид в браузере:

Запомните, содержимое таблицы пишется только внутри элемента <td></td>, и только в нем!

Обратите внимание в примере, что ширина ячеек зависит от содержимого.

Размер ширины и высоты ячеек таблицы можно изменить, но невозможно сделать их меньше минимального размера, необходимого для вмещения всего содержимого ячейки.

Для изменения ширины и высоты ячеек в CSS обращаемся к элементу table и задаем свойства width (ширина) и height (высота). В значении этих свойств указываем величину - абсолютную или относительную единицу измерения (%, px, em, ex или др. см. "Единицы измерения в CSS")

Если вместо элемента <td></td> вставить элемент <th></th> (например, вместо первого элемента <td></td>), то мы получим "шапку" таблицы. Сейчас этот элемент используется редко. Текст в <th></th> отрисовывается жирным шрифтом по центру ячейки - это единственные отличия <th></th> от <td></td>.

Внутренние отступы текста от краев ячеек называются "пэдинги" и задаются свойством CSS padding, в значении которого указывается величина. Это свойство задается элементу td (не table!)

Свойство border-spacing задает расстояние между ячейками таблицы. В его значении также указывается любая допустимая величина (px, cm, mm, em, ex, % и др.). Если расстояние между ячейками таблицы вообще не нужно, то задается нулевое значение - 0.
Пример: table {border-spacing: 0;}. При этом рамки соседних ячеек соприкасаются вплотную и выглядят жирнее, чтобы это отменить есть свойство border-collapse с возможными значениями: separate (суммировать, значение по умолчанию), collapse (схлопывание).

Свойство empty-cells убирает рамочку у пустых ячеек (при условии, что эта рамочка есть). Значения: show (показывать, значение по умолчанию), hide (скрыть).

		Изученные в этом уроке свойства таблиц
		
border				величина начертание цвет
					(подробнее в уроке 11)
==========================================
width, height			значение
==========================================
padding				значение
==========================================
border-spacing		значение
==========================================
border-collapse		separate, collapse
==========================================
empty-cells			show, hide

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля