Правила записиHtml-кода
Расположение тегов не обязательно должно быть на отдельной строке, теги можно располагать в одну строку. Два следующих варианта равносильны:
<html><body>Первый вариант</body></html>
И
<html>
<body>
Второй вариант
</body>
</html>
Второй вариант записи обычно выбирается для более удобного просмотра кода.
Пустые строки и лишние пробелы не учитываются.
Язык HTML не зависит от регистра букв,два следующих варианта равносильны:
<html><body></body></html>
И
<HTML><BODY></BODY></HTML>
Для добавления комментариев в HTMLнеобходимо использовать конструкцию:
<!--Это комментарий в стиле HTML-->
При добавлении комментариев следует помнить, что они будут доступны для просмотра любому пользователю, открывшему сайт в режиме просмотра HTML-кода!
Итог занятия:На этом занятии мы:• познакомились с технологиями HTML и CSS;• научились пользоваться справочником по HTML;• рассмотрели основные HTML-теги;• научились использовать подсветку кода.
1 См.Модуль 2. курса, занятие 4.
Занятие 3. "Технология верстки веб-страницы: изучениеCss"
На этом занятии мы более глубоко познакомимся с технологией CSS: -поработаем со справочником CSS; -узнаем как подключается CSS к веб-странице; -познакомимся с основными свойствами CSS.
Несколько слов оCss
На прошлом занятии мы вспомнили язык HTMLи лишь затронули использованиеCSS. Настало время более детально рассмотреть эту технологию. При помощи CSSможно задать свойства отображения элементов веб-страницы,создаваемых с помощью HTML. Некоторые свойства можно задать с помощью HTML– атрибутов. Пример из прошлого занятия:
Рис. 3.1
<img src="p.jpeg" width="259" height="194" border="0" />
В данном случае ширина и высота изображения указана с помощьюHTML-атрибутов:width, height. То же самое можно сделать при помощи CSS.Причем у CSS для решения подобных задач возможностей намного больше, чем у HTML.
Основы css
На прошлом занятии мы установили два справочника: по HTMLи CSS.Со справочником по HTML мы познакомились на прошлом занятии. На этом занятии нам понадобится второй справочник: css.chm.
CSS содержит в себе набор свойств или стилей, которые можно подключать к HTML-тегу для изменения его вида. С некоторыми свойствами мы уже познакомились на прошлом занятии:
Hello <span style="color:red;">HTML</span>
Напомним, свойствоcolor задает цвет текста HTMLвнутри тега span. Свойство (стиль)записываются в виде:
<название стиля>:<значение стиля>;
Сначала идет название стиля, далее двоеточие (:), значение стиля и в самом конце точка с запятой (;).Например,
color:red;
Стиль colorуказывает цвет, в данном случае красный. После применения такого свойства – текст обретает нужный цвет.
Важно!!!Не забывайте в конце стиля ставить точку с запятой (;)!!! В случае отсутствия точки с запятой (;) внешний вид страницы может отличаться от предполагаемого. Браузер в любом случае отобразит страницу! В отличие от программы на Java, программный код HTML/ CSS не контролируется перед запуском!
CSS содержит большое количество различных свойств. Но не все из них используются часто.Некоторые CSS свойства могут не поддерживаться различными видами браузеров!
Рассмотрим наиболее часто использующиеся свойства CSS1. Для этого откроем справочник поCSS–запустим файлcss.chm(см. рис. 1). В открывшемся справочнике найдем свойство color. Для этого слева выбираем закладку Содержание и разворачиваем раздел По алфавиту (см. рис. 3.2):
Рис. 3.2
Наше свойство начинается с буквы C –поэтому открываем раздел: C и в списке находим свойство color. На странице описания свойства находится информация о браузерах, которые его поддерживают, предназначение свойства,примеры его использования в программном коде. На начальном этапе использованияCSS будет достаточно пользоваться справочником по указанной схеме для просмотра нужного свойства. Поскольку технология CSS развивается, в справочнике можно увидеть таблицу, в которой указана версия CSS, поддерживающая данное свойство (см. рис. 3.3):
Рис. 3.3
"Галочка V" говорит о том,что свойство поддерживается в указанной версии CSS.
Примечание!!!В нашей работе мы будем использовать свойства, которые поддерживаются всеми версиями CSS.
Относительно версийCSS нужно знать следующее:
Свойства CSS, которые поддерживаются ранними версиями – как правило, поддерживаются и более поздними.
Чем современнее браузер –тем больше CSS версий он поддерживает.
Если браузер не поддерживает свойство CSS, то страница отобразится без использования данного свойства.
Каждая новая версия CSSпозволяет использовать больше свойств и больше возможностей. Но свойства последней версии CSS не будут работать в старом браузере!!! - Об этом нужно помнить при разработке веб-страниц.
Приступим к написанию кода CSS на нашей странице. На этом занятии мы будем использовать проект предыдущих двух занятий: test_php.
Запустим Денвер перед запуском среды разработки. Кроме пакета Денвер запустим Eclipse для PHPи переходим к нашей странице:index.php (см. рис.3.4):
Рис. 3.4
Удалим HTML-код внутри тега body,получится следующее:
<html>
<body>
</body>
</html>
Сохраним изменения в проекте, свернем среду разработки. Откроем браузер и введем в адресной строке: http://test_php,нажмем клавишу Enter. Отобразится пустая страница. Отобразим на странице текст "CSS"размером 50 px. Цвет текста пусть будет зеленым. Для этого добавим тег span с атрибутом style, получится следующее:
<html>
<body>
<span style="color: green; font-size: 50px;">CSS</span>
</body>
</html>