3. Создать каскадную таблицу стилей для html-файла, созданного в п. 2. Определите свои стили для абзацев, списков, заголовков, задайте фон.
Структура html-файла
<html>
<head> - настройки для страницы
<title> … </title> - заголовок страницы
<meta http-equiv=»Content-Type» content=»text/html; charset=Windows-1251»> - строка для кодировки
</head>
<body>
… - сам текст
</body>
</html>
Таблица 12
Назначение |
Структура |
Возможные значения |
||||||
Абзац |
<p>…</p> |
|||||||
Заголовок |
<h1>… </h1> |
|||||||
Подзаголовок |
<h2>…</h2> |
|||||||
Подподзаголовок |
<h3>…</h3> |
|||||||
Выравнивание |
<h1 align=”left”>…</h1> |
- right - center - justify |
||||||
Полужирное написание |
<b> </b> |
|||||||
Курсив |
<i> … </i> |
|||||||
Отступ |
<blockquote> … </blockquote> |
|||||||
Отформатированный текст (останутся пробелы текста, переводы строк и т.д.). |
<pre> …</pre> |
Например, для вывода стихотворений. |
||||||
Принудительный пробел |
|
|||||||
Перевод строки |
<BR> |
|||||||
Рисование линии на весь экран |
<HR> С параметрами <HR width=”50” align=”left” size=”3” color=”# …”> Цвет можно копировать из Photoshop (в заливке) |
width=”50” – длина линии 50px, если 50% - 50% от ширины окна |
||||||
Цвет шрифта |
<font color=”#...”>… </font> |
|||||||
Размер шрифта |
<font size=””> …</font> |
+1 ÷ +6 крупные шрифты, 1 ÷ 6 средние, -1 ÷ -6 мелкие |
||||||
Ненумерованный список |
<ul> список <li>… </li> пункт … </ul> |
|||||||
Тип списка |
<ul type=”…”> |
Circle – пустой кружок, Disc – закрашенный (по умолчанию), Square – квадрат |
||||||
Нумерованный список |
<ol> <li>… <ol type> |
|||||||
Тип списка |
<ol type=”…”> |
1 – арабские (по умолчанию), I – римские, A – А, B, C… a – a, b, c… |
||||||
Гиперссылка |
текст
<a href=”…”>…</a>
путь и название файла |
|||||||
Ссылка на другой сайт |
<a href=”URL”>…</a> |
Чтобы открывался в новом окне: <a href=”URL” target=”_blank”>… |
||||||
Вставка картинок |
<img src=”…” width=”” height=””> (ширина, высота ) <img alt=” ”> подпись картинки <image border=”1”> - бордюр в 1 px. <img hspace=” ” vspace=” ”> отступ от картинки до ближайших объектов по горизонтали и вертикали в px Обтекание: <img align=” ”> |
Размеры брать в Photoshop. Left, right |
||||||
Гиперссылка на картинке |
<a href=”description.html”><img src=”images/pic4.gif” width=”330” height=”133” alt=”Реклама” border=”0” align=”left” vspace=”40” hspace=”40”></a> |
|||||||
Таблицы |
<table> <tr> - строка <td>…</td> - колонка <td>…</td> - 2-я колонка </tr> <tr> <td>…</td> <td>…</td> </tr> </table> |
|||||||
Таблица с рамкой |
<table border=”1”> |
или 0 |
||||||
Свойства |
<table align=”” width=”” height=”” bgcolor=”#...” bordercolor=”#...”> Align – выравнивание внутри ячейки по горизонтали. Valid – по вертикали bgcolor - цвет фона bordercolor – цвет границы |
Align = Left, Right, Center Valid = Top, Middle, Bottom |
||||||
Объединение колонок: |
<table> <tr> <td>…</td> <td>…</td> </tr> <tr> <td colspan=”2”>…</td> </tr> </table> |
|
||||||
Объединение строк: |
<table> <tr> <td>…</td> <td rowspan=”2”>…</td> </tr> <tr> <td>…</td> </tr> </table> |
|
Не забывайте, что имена файлов при создании Web-страниц пишутся маленькими латинскими буквами!!!
Таблица 13
Уважаемый посетитель!
Чтобы распечатать файл, скачайте его (в формате Word).
Ссылка на скачивание - внизу страницы.