Урок 1: Создание заголовка страницы и настройка фона
Это мой первый урок, поэтому не судите строго.
Сегодня я хотел бы рассказать Вам, дорогие читатели, о том как сделать красивый заголовок Вашему блогу и о том как правильно настроить фон.
Для начала начнем с заголовка. Прежде всего, за заголовок отвечает тег, который называется title. Из заголовка пользователи обычно узнают о чем страница, блог или сайт. Именно он выводится первым, когда вы щите что-нибудь в том же Google или Яндексе:
Этот тег располагается между открывающим и закрывающим тегом head:
<head>
<title>Заголовок</title>
</head>
Вы не замечали, что на многих сайтах в том месте, где заголовок, еще еще какая-нибудь картинка?!
Так вот это делается тоже очень легко и сразу после тега title:
<link rel="shortcut icon" href=" ссылка на картинку во складке ">
Так же Вы можете сделать анимацию к вашему заголовку, если вставить этот код после тега title:
<script><!--//
var tit = document.title;
var c = 0;
function writetitle() {
document.title = tit.substring(0, c);
if(c==tit.length)
{
c = 0;
setTimeout("writetitle() ", 3)
}
else {
c++;
setTimeout("writetitle() ", 200)
}
}
writetitle()
// -->
</script>
Ну а теперь перейдем ко второй части урока, а имеено в фону и его настройке.
Фон и его настройки задаются в стилевой таблице (CSS, на русском КСС), которую подробно мы рассмотрим в следующих уроках, в теге body. Сейчас мы разберем основные настройки этого тега:
1) background-color: здесь задается цвет текста, которым применяется ко всей странице;
2) background-image: url(" ссылка на картинку "); тут задается собственно картинка
3) opacity: 0.95 (от 0.01 до 0.99); это отвечает за прозрачность (очень красивый эффект)
4) background-attachment: fixed/scroll; тут задаются параметры фона - фиксированный или прокручивающийся вместе со страницей
5) background-repeat: no-repeat; повторение фона - no-repeat (без повтора), repeat (с повтором)
Пример кода:
body {
background-color: #FFCC66;
background-image: url(" ссылка на картинку");
background-repeat: no-repeat;
background-attachment: fixed;
}
На этом урок закончен. Надеюсь он будет Вам интересен и полезен.
Если понравился урок, то нажми лайк, а лучше сребложте, чтобы об этом узнало больше людей. Мне будет очень приятно осозновать, что я не просто так потратилсвое время.
Все свои вопросы пишите в комментарии или мне в личку в ВК.