Страницы сайта полностью состоят из различных тегов, имеющих разные свойства. Все теги в HTML обязательно должны быть заключены в угловые скобки, также для основной массы тегов обязательно должен быть закрывающий тег.
Для примера возьмем самый главный тег, который указывает браузеру на начало HTML-документа HTML.
Для этого тега обязательно должен быть закрывающий тег, который указывает на то, что документ закончен.
Все остальные теги должны располагаться внутри этих тегов.
Пример:
Code <HTML><!-- Начало HTML документа (открывающий тег) -->
<HEAD>
<TITLE>Заголовок страницы</TITLE>
</HEAD>
<BODY>
...Тут располагается тело страницы...
</BODY>
</HTML><!-- Конец HTML документа (закрывающий тег) -->
Как вы видите в примере выше - у каждого тега есть закрывающий тег в котором используется слеш (косая черта). Слеш обязательно должен находится перед названием тега (не после).
Скачать полный список тегов имеющихся в HTML с их описанием а также справочник свойств CSS вы можете ЗДЕСЬ. Создаем простую HTML страницу. Для удобства нам потребуется создать на компьютере отдельную папку. Название папки любое, например Site.
Далее создадим в этой папке текстовый документ, и назовем его index.html
Откройте index.html в блокноте, и вставьте в него следующие строки, как есть:
Code <HTML> <HEAD> <TITLE>Новая страница</TITLE> </HEAD> <BODY> Это пример простейшей страницы с одной ссылкой. <br/> <a href="http://school-html-css.3dn.ru">Название ссылки</a> </BODY> </HTML>
Сохраняем изменения и открываем index.html в браузере.
Мы видим совершенно примитивную страницу, где немного текста и одна ссылка.
Нажав в ссылку - вы попадете на главную страницу нашего сайта, т.к. в URL ссылки как вы уже наверное заметили прописан адрес http://school-html-css.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://school-html-css.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.
|
