Страницы сайта полностью состоят из различных тегов, имеющих разные свойства. Все теги в HTML обязательно должны быть заключены в угловые скобки, также для основной массы тегов обязательно должен быть закрывающий тег. Для примера возьмем самый главный тег, который указывает браузеру на начало HTML-документа HTML. Для этого тега обязательно должен быть закрывающий тег, который указывает на то, что документ закончен. Все остальные теги должны располагаться внутри этих тегов.
Code
<HTML><!-- Начало HTML документа (открывающий тег) --> <HEAD> <TITLE>Заголовок страницы</TITLE> </HEAD> <BODY> ...Тут располагается тело страницы... </BODY> </HTML><!-- Конец HTML документа (закрывающий тег) -->
Как вы видите в примере выше - у каждого тега есть закрывающий тег в котором используется слеш (косая черта). Слеш обязательно должен находится перед названием тега (не после).
Создаем простую HTML страницу.
Для удобства нам потребуется создать на компьютере отдельную папку. Название папки любое, например Site. Далее создадим в этой папке текстовый документ, и назовем его index.html Откройте index.html в блокноте, и вставьте в него следующие строки, как есть:
Code
<HTML> <HEAD> <TITLE>Новая страница</TITLE> </HEAD> <BODY> Это пример простейшей страницы с одной ссылкой. <br/> <a href="http://games-net.3dn.ru/">Название ссылки</a> </BODY> </HTML>
Сохраняем изменения и открываем index.html в браузере. Мы видим совершенно примитивную страницу, где немного текста и одна ссылка. Нажав в ссылку - вы попадете на главную страницу нашего сайта, т.к. в URL ссылки как вы уже наверное заметили прописан адрес http://games-net.3dn.ru/ .
Подключаем CSS
Теперь попробуем слегка изменить оформление нашей страницы с помощью CSS. В этой же папке создадим новый текстовый документ и назовем его style.css . Далее в index.html внутри тега HEAD нам потребуется прописать путь к файлу style.css . Пример:
Code
<HTML> <HEAD> <TITLE>Новая страница</TITLE> <LINK href="style.css" rel="stylesheet" type="text/css" /> </HEAD> <BODY> Это пример простейшей страницы с одной ссылкой. <br/> <a href="http://games-net.3dn.ru/">Название ссылки</a> </BODY> </HTML>
Откройте style.css в блокноте, и вставьте в него следующие строки, как есть:
Code
body{ text-align:center; /* выравниваем содержимое по центру */ background-color:#99FFCC; /* указываем цвет фона */ font-family:Georgia, Times, serif; /* указываем шрифт текста */ font-size:20px; /* указываем размер шрифта */ color:#996600; /* указываем цвет текста */ }
a { font-family:Verdana, Arial, Helvetica, sans-serif; /* указываем шрифт ссылки */ font-size:28px; /* указываем размер текста ссылки */ color:#999933; /* указываем цвет ссылки */ text-decoration:none; /* убираем подчеркивание */ }
a:hover{ text-decoration:underline; /* добавляем подчеркивание при наведении мыши */ }
- сохраняем оба файла и обновляем страницу браузера. Если вы все сделали правильно - увидите как сильно изменилась страница, если вы не видите изменений - значит гдето допустили ошибку, перепроверьте правильность кода.
Можете поэксперементировать, вставляя в страницу какие-нибудь теги, руководствуясь справочником HTML и CSS, который вам было предложено скачать (выше). Проверяйте изменения, обновляя страницу в браузере и не забывая предварительно сохранять изменения в index.html и style.css.