Предварительно отформатированный текст
Если Вы обратили внимание, а если не обратили то знайте, что в браузерах текст набранный с помощью текстовых редакторов проходит "обработку" перед выводом его на экран компьютера. Так в набранном Вами тексте удаляются все переносы строк и лишние пробелы, пробелов между словами или просто символами может быть не более одного.
Проводится данная "обработка", для того чтобы на мониторах с разным расширением экрана текст переносился на следующую строку в тех местах где это действительно необходимо, а не там где были раннее расставлены пробелы и переносы строк.
Однако такая политика браузеров, в ряде случаев, не всегда оправданна.. Как например, написать стихи? Нет можно конечно после каждой строчки писать тег <br>, но есть вариант куда проще..
Знакомимся тег <pre>, текст заключённый в данный тег выводится браузерами на экран в том виде в котором он был набран, т.е. со всеми пробелами и переносами строк
Пример:
<html>
<head>
<title>Пробелы и перенос строки</title>
</head>
<body>
<pre>
</pre>
</body>
</html>
Такие вот дела..
Полезные советы:
· Писать странички в блокноте конечно можно, но я Вам настоятельно рекомендую воспользоваться полноценным HTML редактором, благо их на рынке программного обеспечения великое множество. Я не буду давать их подробное описание, скажу лишь что они, как правило, несут в себе одинаковые стандартные наборы инструментов и отличаются друг от друга пожалуй только интерфейсом.. сравнивать их не берусь, так как они носят исключительно характер привычки пользования веб мастером тем или иным редактором html кода.
Расскажу про основные плюсы использования подобного редактора.
o Как правило, html редакторы имеют два окна, в одном Вы пишите код, а во втором сразу видите результат написанного! То есть теперь Вам не придётся постоянно сохранять текущий результат, чтобы открыть его браузером и оценить написанное.
o Как правило, они содержат в себе стандартные наборы шаблонов кода, в который Вы просто подставляете свою информацию, избавляя себя от прописывания тегов.
o Ну и "общие" удобства - сохранить, открыть, редактировать сразу несколько страниц сайта перелистывая их… много короче разных полезных штук.. одна подсветка синтаксиса чего стоит!
P.S. Однако, дальше буду писать эту книгу подразумевая, что Вы тренируетесь в стандартном блокноте… иначе мы друг друга не поймём.
· Немного об этике и здоровье глаз..
Если создаваемый Вами сайт его дизайн и назначение не требуют обратного, то советую избегать следующих вещей: Использовать яркие контрастные цвета фона и шрифта. Поверьте, когда у человека начинают слезиться глаза от чтения такой страницы, он резко теряет к ней интерес. Это же касается и размеров текста. Не стоит использовать огромные заголовки, впрочем, как и содержание малюсенькими буквами - это напрягает, ищите золотую середину..
Глава 3
Рисунки.
В этой главе я расскажу о том как добавить на нашу страничку графические изображения фотографию например, или рисунок, а также о том, что можно с ними вытворять используя предложенный набор тегов html языка.
Путь к файлу
Итак, допустим Вы пишете сайт о себе любимом и хотите вставить в него свою фотографию, чтобы люди зашедшие на страничку смогли не только читать Ваши рукописи, но и вдоволь полюбоваться Вашим портретом.
Есть у Вас значит фотография, которая где-то лежит на Вашем жёстком диске.. копируем ёе и вставляем в ту папку (директорию) где уже лежит заготовка будущей страницы, ну то есть туда же, куда сохраняете блокнотом html документ. Так, вот для того чтобы теперь вставить её в нашу страничку к ней нужно указать путь.
делается это так:
<img src="foto.jpg">
Где foto.jpg это название Вашей фотографии в данном случае, так как фото лежит рядом с html документом, путь к ней мы не указываем.
Да, помните, тег <img> не требует закрывающего тега!
Теперь приведу ряд примеров где путь указывается:
<img src="myfoto/foto.jpg"> - Такая запись подразумевает, что в директории где расположен наш html документ есть папка myfoto в которой расположен файл foto.jpg
<img src="myfoto/graphics/foto.jpg"> - Значит рядом с документом расположена папка myfoto, в ней еще одна папка с названием graphics, и уже в ней нужная нам фотография foto.jpg которую нужно выложить для всеобщего обозрения.
<img src="../foto.jpg"> - А это значит, что фото размещено на уровень выше от документа
<img src="../../foto.jpg"> - Так соответственно на два уровня выше, сколько поставите../ настолько и поднимитесь.
Так же можно указывая место фотографии, ссылаться на тот или иной интернет ресурс
<img src="http://www.site.ru/foto/foto.jpg">
Ну что, давайте попробуем выложить фото.
Вот мой пример:
<html>
<head>
<title>Моя первая страничка с фото</title>
</head>
<body text="#484800" bgcolor="#e8e8e8">
<center>
<h2> <font color="#008000"> Привет мир!!!</font> </h2>
</center>
<p align="justify">
<font size="+1">
<img src="graphics/foto.jpg">
Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2" color="#ff0000">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
</font>
</p>
</body>
</html>
Как видно из этого примера фотография появилась, но вместе со своим появлением сдвинула текст, а не хотелось бы..
Атрибуты тега <img>
Поговорим о расположении изображений относительно текста.
Как и другие теги <img> тоже имеет свои атрибуты.. уже знакомый нам атрибут align "выравнивание" применим и к данному тегу
<img src="foto.jpg" align="left"> - фото слева от текста
<img src="foto.jpg" align="right"> - фото справа от текста
<img src="foto.jpg" align="top"> - текст выше фото
<img src="foto.jpg" align="bottom"> - текст ниже фото
<img src="foto.jpg" align="middle"> - ну и соответственно текст посередине
Помимо align тег<img>имеет еще ряд атрибутов, но сначала расскажу немного о пикселях. Пиксель (точка), наверное Вы не раз слышали это слово и думаю основная масса народа которая держала мышку в руках знает что это такое, но всё же.. Пиксель -это элементарная неделимая единица изображения. Каждый пиксель имеет свои координаты, например, самый верхний левый пиксель на мониторе имеет координаты x=1, y=1, а самый нижний правый в зависимости от разрешения монитора.. x=800, y=600 - будет соответственно при разрешении 800 на 600 точек. Впрочем, эта информация пригодится нам потом, а сейчас нужно усвоить, что все расстояния в графических изображениях меряются пикселями.. так картинка длинной 800 пикселей и шириной в 600 пикселей при указанном разрешении заполнит весь экран.
Теперь продолжим..
<img src="foto.jpg" vspace="15"> - Атрибут vspace задаёт расстояние по вертикали от рисунка до текста, в данном случае мы задали расстояние в 15 пикселей
<img src="foto.jpg" hspace="25"> - Расстояние по горизонтали соответственно
<img src="foto.jpg" width="180"> - Ширина непосредственно самого изображения
<img src="foto.jpg" height="240"> - Высота изображения. Если атрибуты width и height не использовать, то ширина и высота изображения по умолчанию будет равна реальным её размерам, без каких либо искажений.
<img src="foto.jpg" border="5">- Бордюр, рамка вокруг изображения и её толщина в пикселях.
<img src="foto.jpg" border="5" bordercolor="#008000 "> - bordercolor - это цвет рамки.
<img src="foto.jpg" alt="Это моя фотка!!!"> -Атрибут alt - это описание изображения. Если навести курсор на наше фото и подержать его там несколько секунд, выскочит надпись -Это моя фотка!!!
<img src="foto.jpg" title="Это моя фотка!!!"> - альтернатива alt в данном случае.
А еще изображение можно сделать фоном страницы.. для этого используем атрибут background "фон" открывающего тега <body>
Вот так:
<body background="foto.jpg">
Выравнивание рисунка.
Теперь расскажу о том как разместить нашу фотографию в нужном месте страницы. На самом деле об этом я уже рассказывал.. вспомните вторую главу, где говорилось о том как можно выровнять текст.. эти же теги применимы и к выравниванию изображения… так что, пожалуй, повторятся не буду, просто приведу пример, а Вы уж самими подумайте почему одно и тоже фото очутилось в том или ином месте..
Пример:
<html>
<head>
<title>Расположение изображения</title>
</head>
<body>
<img src="foto.jpg ">
<center><img src="foto.jpg "></center>
<div align="left"><img src="foto.jpg"></div>
<br>
<div align="right"><img src="foto.jpg"></div>
<br>
<div align="center"><img src="foto.jpg"></div>
</body>
</html>
Советую Вам самостоятельно поупражняется с размещением фотографии на своей странице. Меняйте размеры, положения, используйте различные сочетания с текстом, отступы, рамки.. Тренируйтесь!
Итог главы:
<html>
<head>
<title>Моя первая страничка с фото</title>
</head>
<body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg">
<center>
<img src="graphics/privet.png" width="400" height="80" alt="Привет мир!!!">
</center>
<p align="justify">
<img src="graphics/foto.jpg" align="left" hspace="15" width="140" height="120" alt="Это моя фотка!!!">
<font size="+1">
Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2" color="#ff0000">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
</font>
</p>
</body>
</html>
Единственное, что Вам в этом примере не знакомо так это надпись - - это есть так называемый спецсимвол в данном случае - пробел.. о спецсимволах и их назначении я расскажу более подробно в 6 главе.
Честно говоря, мне мой пример не сильно по вкусу, неряшливо как-то.. Но цель показать, что можно делать с изображениями думаю достигнута..
Полезные советы:
· Используя графику, будьте осторожны.. не стоит размещать на своей странице большие весом мегабайтные изображения, пожалейте время и деньги посетителей страницы. Большой объём графики при низкой скорости интернета может привести к тому, что посетитель закроет Вашу страницу ещё до того момента как она загрузится.
· Помните, что есть пользователи, которые умышленно в своём браузере отключают загрузку рисунков, дабы сэкономить на трафике, а по сему рекомендую соблюдать следующие советы:
· Если рисунки выполняют роль кнопок (см. Глава 5), обязательно подписывайте их (атрибут alt) к примеру: "Перейти на главную страницу" или "Скачать" дабы человек с отключенной графикой мог хоть как-то ориентироваться на Вашей странице.
· Используя картинку в качестве фона документа дублируйте ёё заливкой фона каким либо подходящим для фона страницы цветом (атрибут bgcolor тега <body>)
вот так например:
<body bgcolor="#008000" background="fon.jpg">
Это будет значить, что если к примеру не загрузится Ваша изысканная зелёная текстура, фон будет просто зелёным - что лучше, нежели чем белый цвет в общем дизайнерском решении сайта.
Глава 4
Таблицы
Помимо прочих объектов в свой сайт Вы можете вставить таблицы.. и сразу забегая вперёд скажу о том что они имеют не малую значимость при создании сайта. С помощью таблицы можно не только выложить ту или иную информацию, тарифную сетку или график дежурств к примеру, но и взяв ёе за основу полностью построить на ней свой сайт, таблицы порой незаменимы при верстке страницы, но об этом позже. А сейчас давайте научимся её рисовать..
Рисуем таблицу
Тег <table> задаёт начало и конец таблицы, любая таблица, как известно, состоит из строк и столбцов, для этого есть ещё два тега:
<tr> - строка таблицы
<td> - столбец таблицы
Вместе эти теги пишутся так:
<table>
<tr>
<td>ячейка</td>
</tr>
</table>
Такая запись это самая маленькая таблица, в ней всего одна строка, содержащая один столбец - ячейку
Поставим перед собой задачу нарисовать таблицу из трёх строк и трёх столбцов, а заодно вспомним атрибут border "рамка", который добавит нам наглядности.
<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<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>
Разобрались? Если да, идем дальше..
Объединение ячеек.
Часто при работе с таблицами возникает необходимость объединить те или иные ячейки в одну.
На самом деле слово "объединить" здесь неуместно, использовал я его лишь для того, что бы вызвать ассоциации в Вашей голове. Вспомните тот же Word, добавив там таблицу Вы выделяете нужные ячейки и нажимаете кнопку "объединить".. здесь всё происходит не совсем так, и правильнее было бы говорить не "объединить" а "растянуть".
Эту задачу решают атрибуты colspan и rowspan
· colspan - определяет какое количество столбцов будет занимать данная ячейка
· rowspan - количество рядов занимаемое ячейкой
Предположим что в нашем примере нам необходимо "объединить" в третьей строке вторую и третью ячейку, для этого атрибуту colspan присваиваем значение 2 (растянуть на два столбца) и вставляем его в нужное место.
<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<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 colspan="2">строка3 ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</body>
</html>
Как видите ячейка растянулась на два столбца, но при этом сдвинула третью ячейку, которая собственно нам теперь не нужна, а по сему мы её просто напросто удаляем. Специально допустил эту оплошность, чтобы Вы поняли принцип данного действия.
Исправленный пример:
<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<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 colspan="2">строка3 ячейка2</td>
</tr>
</table>
</body>
</html>
Теперь попробуем объединить весь первый столбец в одну ячейку, используя атрибут rowspan, ну точнее растянем ячейку первой строчки первого столбца на три строки и на сей раз сразу уберём лишнее.
<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3">строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td colspan="2">строка3 ячейка2</td>
</tr>
</table>
</body>
</html>
Всё просто.. главное быть внимательным!
Размеры таблицы.
Если Вы самостоятельно тренировались с рисованием таблицы то наверняка обратили внимание на то, что размеры таблицы и ячеек по умолчанию ограничены вставленным в неё текстом.. и "ползают" себе как хотят. Вспомните про атрибуты width - ширина и height - высота, которые мы использовали для растягивания рисунков, они так же применимы к тегам <table>, <tr>и <td>. С этими атрибутами Вы знакомы, так что рассусоливать не буду.. просто приведу пример. В нём заданы размеры таблицы и отдельных её ячеек, а заодно и вся таблица выровнена по центру знакомым тегом <center>
Пример:
<html>
<head>
<title>Таблица</title>
</head>
<body>
<center>
<table border="1" width="640" height="480">
<tr>
<td rowspan="3" width="150">строка1 ячейка1</td>
<tdheight="30">строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td height="30">строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td colspan="2" >строка3 ячейка2</td>
</tr>
</table>
</center>
</body>
</html>
Обратите внимание на то, что длина и ширина заданы не для всех ячеек. А зачем? Если и так таблица будет выровнена по самым широким и длинным ячейкам.. на то она и таблица..
Еще не всё рассказал..
Значения атрибутов width и height в таблице могут указываться не только в пикселях, но и в процентах
Вот пример:
<html>
<head>
<title>Таблица</title>
</head>
<body>
<center>
<table border="1" width="640" height="480">
<tr height="25%">
<td width="15%"> строка1 ячейка1</td>
<td width="25%">строка1 ячейка2</td>
<td width="60%">строка1 ячейка3</td>
</tr>
<tr height="50%">
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr height="25%">
<td>строка3 ячейка1</td>
<td>строка3 ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</center>
</body>
</html>
В этом примере от общей ширины таблицы в 640 пикселей мы отдали 15% первой ячейке, 25% второй и 60% третьей. А по высоте из 480 пикселей по 25% первой и третьей строчке, а добрую половину места второй.. Короче справедливости в мире нет.. Ну до это Вам решать, сколько кому места отчуждать, главное, чтобы в сумме было 100%, иначе неразбериха будет.. смутное время.. революция..