Статья 2Цвет, шрифт, ссылки, изображения
Цвет
Юзеру будет скучно заходить на безликий черно-белый сайт, который не переливается цветами.
В HTML можно (и нужно!) использовать цвета из "веб-палитры", то есть цвета, которые поддерживают браузеры.
В наше время эта палитра имеет множество цветов и оттенков.
Приведу пример структуры из прошлой статьи:
<тэг атрибут="значение">
Содержимое
</тэг>
Вы заметили, что у тэга появился атрибут?
Атрибуты говорят тэгу каким должно быть его содержимое.
Я не зря написал про атрибуты, так как мы будем использовать их в этом уроке.
С помощью атрибутов мы будем задавать цвет текста.
В качестве тэга возьмем тэг <font>,о нем я расскажу позже.
Сейчас он без атрибутов, но мы сейчас их добавим:
<font color="red">
Текст внутри этого тэга красный!
</font>
Разберем содержимое атрибута:
color - это сам атрибут, а red - это его значение, оно может быть разным(В рамках атрибута, в данном случае можно писать только цвета)
Вот таблица основных цветов:
Цвет | Код |
Белый | white |
Синий | blue |
Красный | red |
Зеленый | green |
Желтый | yellow |
Морская лазурь | aqua |
Золотой | gold |
Черный | black |
Серебристый | silver |
Лаймовый | lime |
Пока-что цветов хватит)
Шрифт
В разном месте сайта, может быть разный шрифт, который может иметь свои параметры.
С помощь тэга <font> и его атрибутов, мы можем задать:
1)Шрифт
2)Цвет
3)Размер
4)И другое...
Попробуем задать шрифт для текста:
<font face="arial" size="+2">
Атрибут face указывает шрифт
<br>
Атрибут size указывает размер текста
</font>
Но одного цвета и шрифта мало, а если я захочу написать свой копирайт, что бы он был маленьким но заметным.
Решение такое - надо сделать шрифт жирным.
Это делает тэг < b>
Он не имеет атрибутов, но нуждается в закрывающем тэге.
Пример:
<font size="-1" font="arial">
< b>
Авторские права (С) мои
</ b>
</font>
Помимо тэга < b> есть еще тэги такого типа:
< b>
< i>
< u>
< strong>
Эти тэги нужно использовать также как и < b>
Пришло время заголовков.
Заголовок это настроенный по умолчанию шрифт.
Есть несколько типов заголовков:
<h1> - самый большой заголовок
<h2> - чуть меньше
<h3> - еще меньше
<h4> - ...
<h5> - ...
<h6> - ...
<h7> - самый маленький заголовок
Пример:
<h1>А</h1>
<br>
<h2>Б</h2>
<br>
<h3>В</h3>
<br>
<h4>Г</h4>
<br>
<h5>Д</h5>
<br>
<h6>И так</h6>
<br>
<h7>далее...</h7>
Пока для шрифта хватит... займемся ссылками.
Ссылки - это основное содержимое сайта!
Меню, баннеры, реклама - все это ссылки!
Есть тэг <a> с обязательным атрибутом href, который указывает на путь ссылки.
Например:
<a href="http://forum.hellroom.ru/">А здесь текст, который отображается</a>
Это очень просто, а как сделать так, что бы я нажимал на изображение, и переходил по ссылке?
Для начала освоим вставку изображения на страницу.
Для этого есть тэг <img> с обязательным атрибутом src.
src - указывает откуда брать изображение.
Например в папке есть страница index.html и в этой же папке есть фото myfoto.jpg.
Что писать в index.html:
<img src="myfoto.jpg">
А теперь сделаем так, что бы по клику на фото мы переходили по ссылке:
<a href="http://forum.hellroom.ru"><img src="myfoto.jpg"></a>
Тут очень просто, мы вместо текста вставили изображение.
Все конец этой статьи, завтра еще напишу

А пока писанины хватит)