Нужные основы html и css

Мы с вами будем наполнять сайты.

Сайты адекватно показывают только html-код, поэтому исходный материал, который даст нам заказчик, нам нужно будет переработать с использованием html (на самом деле, это не так страшно как кажется).

Есть специальные программы для обработки ("создания веб-страниц"), но мне они принципиально не нравятся, поскольку они делают довольно громоздкие страницы.

Мы будем использовать специальный скрипт: TinyMce (расположенный по адресу http://work-on-line.ru/node/79).

Отформатировать текст в нем проще, чем в Ворде.

HTML-код получаем, нажав на одноименную кнопку (она слева сверху).

При нажатии откроется окно, в котором будет готовый html-код.

Однако, несмотря на то что большинство работы можно выполнить в Преобразователе, часто нелишним бывает "отшлифовать" результат вручную

HTML — язык, управляющий разметкой элементов на странице. Точно также как вы изменяете внешний вид текста в редакторе MSWord (делаете текст большим, жирным; вставляете картинки), вы можете изменять внешний вид текста на странице сайта.

CSS — это "тюнинг" тегов html, более тонкая и универсальная настройка внешнего вида.

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

Нужные нам теги HTML

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

Обязательные:

Что делает	Тег	Пример	Результат примера
Новая строка	<br />	Привет<br />Как дела	Привет Как дела
Ссылка	<a .. ></a>	<a href="http://work-on-line.ru">Работа онлайн!</a>	Работа онлайн!
Картинка	<img ... />	<img src="images/logo.png" alt="Логотип сайта" />
Курсивный	<i>	<i>курсивный</i>	курсивный
Жирный	<b>	<b>текст</b>	жирный
Зачеркнутый	<s>	<s>зачеркнутый</s>	зачеркнутый
Заголовок	<h1> <h2> <h3> <h4> <h5> <h6>	<h1>Глава h1</h1> <h2>Глава h2</h2> <h3>Глава h3</h3> <h4>Глава h4</h4> <h5>Глава h5</h5> <h6>Глава h6</h6>	Глава h1 Глава h2 Глава h3 Глава h4 Глава h5 Глава h6
Горизонтальная линия	<hr />	<hr />
Абзац текста	<p>...</p>	<p>Привет</p><p>Как дела</p>	Привет Как дела
Надстрочный шрифт	<sup>...</sup>	текст<sup>над</sup>	текстнад
Подстрочный шрифт	<sub>...</sub>	текст<sub>под</sub>	текстпод
Назначить стили тексту (сам по себе не проявляется)	<span>...</span>	<span style="font-weight:bold; color:green"> жирный зеленый текст</span>	жирный зеленый текст

Таблицы:

Списки:

Дополнительные:

Нужные нам стили CSS

Как это комбинировать

Комбинировать теги и стили очень просто: для этого надо одним из параметров тега записать style="" и в кавычках перечислить стили, например запись

<span style="font-size:24px; font-weght:bold; color:red; text-decoration:underline">

даст

большой красный жирный подчеркнутый текст

Если у вас возникнут проблемы и непонятки (а они возникнут, особенно если вы новичек в этом), я посоветую вам вот что:

Попробуйте найти ответ на свой вопрос в гугле (http://google.ru). Запрос формулируйте прямо как есть: "html как сделать жирный шрифт" или "html как вставить картинку". html спереди стоит добавлять для конкретизации запроса

Отличный сайт, на котором я сам часто нахожу ответы на те или иные заморочки, касаемые html и css: http://htmlbook.ru/

Кстати, в гугле вы можете искать по этому сайту, нужно лишь добавить в начале "site:htmlbook.ru". Запрос будет примерно таким: "site:htmlbook.ru жирный шрифт"

Естественно! вы можете задать интересущий вас вопрос в комментариях или слева в миничате =)