Лабораторные работы № 1-8 по курсу «Мировые информационные ресурсы и сетевая экономика», страница 5

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>

Например, для вывода стихотворений.

Принудительный пробел

&nbsp;

Перевод строки

<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