Создать web-страничку блочным способом
Конечный результат вашей работы изображен на рисунке 4.
Рисунок 4 – Результат выполнения лабораторной работы
Откройте Notepad ++, в меню Language выберите HTML. Перед тем, как начать работу необходимо указать тип документа. Если Вы собираетесь работать по всем правилам разработки веб-страниц, то обязательным элементом начала страницы должен являться DOCTYPE. Такое начало страницы необходимо для корректного считывания браузером. Стоит заметить, что сейчас практически все обозреватели обходятся без DOCTYPE. Но в связи с введением множества спецификаций и ужесточения правил в скором времени страницы, не содержащие такого начала просто не смогут быть считаны браузером. Для эффективности примера мы используем DOCTYPE, который носит название Strict 1.0. В общем случае код будет выглядеть так:
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" " http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
Как Вы уже заметили, правило действует – тэги без пары заканчиваются стандартным пробелом и слешем. Но вместе с тем Вы не могли не заметить, что и сама структура DOCTYPE похожа на тэг, но не заканчивается комбинацией слеш-пробел. Это единичное исключение из общих правил.
Тэг html После начала впишем еще одну строчку в наш код:
< html xmlns=" http: //www.w3.org/1999/xhtml" lang=" ru" xml: lang=" ru" >
В данном участке года фигурируют lang и ru, это явно указывает на принадлежность странички к языку. Многие путают эту строку с кодировкой документа, но это совсем разные вещи. А теперь непосредственно начнем создавать документ:
< html>
Тэг head играет большое значение. Именно тут размещается вся служебная информация. Имя страницы, ключи для поисковых роботов, способ кодировки и другая информация. Для этого предназначен тэг meta. Попробуем дописать сюда несколько строк:
< head> < meta name=" description" content=" Сайт о деньгах, Что такое деньги?, Для чего нужны деньги, как их заработать? " /> < meta name=" keywords" content=" деньги, что такое деньги? " /> < link rel=" stylesheet" href=" style.css" type=" text/css" />
Немного проясним ситуацию с кодом: Начальный мета-тэг обозначает способ, которым кодируется сайт. Настоятельно рекомендуется использовать Windows 1251, если пользоваться другими, то вполне возможно некорректный вывод информации на экран. Во втором мета-тэге обозначается общее описания разрабатываемого сайта или страницы. Она является важной, именно она отобразится, когда Вы зададите в поиск ключевые слова, а поисковик найдет их. Третий тэг понятен, сюда вписываются ключевые слова, по которым поисковая система и будет искать Ваш сайт или страницу. CSS обозначает ссылку на лист стилей, созданием которого мы займемся немногим позже. Если оставить эту строчку без изменений, то лист стилей смогут прочитать все средства, предназначенные для вывода информации. Если же есть необходимость указания отдельного устройства, для которого предназначена страница, то нужно указать атрибут media (заполняется после type). Он может иметь следующие значения: print, handheld и screen, для принтера, покета и монитора соответственно. К примеру, если кому-то интересен только текст, то ему не придется распечатывать баннеры рекламы, графику и т.д. Для реализации такой функции необходимо прописать лист стилей.
Тэг title В этот тэг вносится информация, которая буде показываться в самом верху веб-страницы. < title> Что такое деньги? | Главная< /title>
Само собой подразумевается, что именно в это поле необходимо внести название страницы. Туда ни в коем случае не стоит забивать какие-то лишние слова. Поисковые системы довольно остро воспринимают этот вопрос. Для того чтобы окончательно закончить добавление служебных данных, необходимо закрыть тэг - < /head>. Строго исполняйте правило и именно такую последовательность: < head> < title> < /title> < /head> Если Вы попытаетесь заменить правильный вариант на другую комбинацию, например, < head> < title> < /head> < /title>, то работать ничего не будет, будьте уверены.
Тэг body Этот тэг обозначает непосредственно начало тела страницы. Для того, чтобы не забыть, следует дописать код странички. А несколько позже он заполнится.
< body>
Сразу же после этого стоит сохранить страницу. Правильное название - index.html. Такое название связано с алгоритмом работы серверов, они всегда ищу страницу именно с таким названием. Она является базовой и основной.
CSS
Теория По мере увеличения количества документов, расположенных на сервере WWW, становится труднее заниматься его сопровождением. Особенно это касается оформления html-документов. Ручная обработка множества документов HTML с целью приведения их внешнего вида к некоторому стандарту может отнять немало времени. Для решения этой проблемы можно использовать так называемые каскадные таблицы стилей Cascading Style Sheets (CSS), разработанные консорциумом World Wide Web Consortium (W3C). Каскадные таблицы стилей призваны разрешить противоречие между точностью определения размеров картинок и приложений, с одной стороны, и точностью определения размеров блоков текста и его начертания – с другой. Таблицы стилей также позволяют определить цвет и начертание текстового фрагмента, изменять эти параметры внутри текстового блока, выполнять выравнивание текстового блока относительно других блоков и компонентов таблицы. Предусмотрено три различных способа использования стилей. В зависимости от потребностей, можно применять все или только некоторые из них.
Рисунок 5 – три различных способа использования стилей Способ 1. Общие таблицы стилей для нескольких документов HTML Наиболее интересное применение таблиц стилей - это их использование для оформления документов HTML, расположенных на сервере. При этом выполняется подключение (linking) файлов таблиц стилей к документам HTML. Имя файла таблицы стилей должно иметь вид *.css. Изменяя содержимое файлов таблиц стилей, можно без прямого редактирования изменить внешний вид всех документов HTML, к которым подключены эти файлы. Общие таблицы стилей могут использоваться одновременно не только на одном, но и на нескольких серверах WWW, так как можно подключать файлы таблиц стилей, указывая их стандартный адрес URL. Это позволяет централизованно создавать и изменять корпоративные таблицы стилей. Файлы таблиц стилей содержат определения стилей, которые могут быть использованы для оформления многих документов HTML, расположенных на одном или нескольких серверах WWW. Использование файла таблицы стилей лучше изучать на конкретном примере. : Пример 1. Создадим файл style.css, в котором опишем стили для тегов < H1>, < H2> и < P>.
Листинг файла styles.css H1 { font-size: 24; font-weigt: bold; color: red; margin-left: 10% } H2 { font-size: 20; font-weigt: bold; color: black; font-family: Courier } P.italic { font-style: italic } P.red { color: red }
Поясним содержимое данного файла. Здесь определены стили H1, H2, P.italic и P.red. Определение стиля начинается с имени класса (например, H1), вслед за которым в фигурных скобках перечисляются параметры стиля. Для стиля с классом H1 указан размер шрифта, равный 24 пунктам, задано утолщение, красный цвет и отступ с левой стороны на 10 процентов от ширины экрана. Отдельные параметры стилевого оформления задаются своими именами, после которых через символ двоеточия следует значение параметра. Параметры отделяются символом точка с запятой. Для того чтобы документ HTML был оформлен с использованием файла таблицы стилей, в разделе заголовка документа необходимо разместить тэг < LINK>. Пример ссылки на файл таблицы стилей продемонстрирован в листинге файла пример1.html Листинг файла пример1.html < HTML> < HEAD> < TITLE> Команды логического форматирования < /TITLE> < LINK REL=STYLESHEET HREF=" styles.css" TYPE=" text/css" > < /HEAD> < BODY BGCOLOR=#FFFFFF> < H1> Заголовок первого уровня< /H1> < P> Обычный текст < H2> Заголовок второго уровня< /H2> < P CLASS=italic> Наклонный текст < P CLASS=red> Текст красного цвета < /BODY> < /HTML>
Пояснение данного листинга. Параметры тэга < LINK> необходимо задавать, как указано в этом примере. В параметре HREF должен быть указан адрес URL файла таблицы стилей. Этот файл может находиться на любом сервере WWW, а не только на том, где размещен данный документ HTML.
Как пользоваться стилями из файла таблицы стилей? Если в файле определены параметры для операторов языка HTML, предназначенных для оформления текста (например, для операторов < H1> или < H2>, как в нашем примере), необходимо просто указать эти операторы без изменений: < H1> Заголовок первого уровня< /H1> < P> Обычный текст < H2> Заголовок второго уровня< /H2> Однако при определении стиля можно не только переопределить параметры форматирования операторов, но и создать новые классы для этих операторов. Например, ниже определены классы italic и red для тэга < P>: P.italic { font-style: italic } P.red { color: red } Для того чтобы задействовать созданные классы, необходимо указать имя нужного класса в параметре CLASS тэга < P> (или другого оператора форматирования текста), как это показано ниже: < P CLASS=italic> Наклонный текст < P CLASS=red> Текст красного цвета Внешний вид документа, оформленного с использованием описанного файла таблицы стилей, показан на рис. 6.
Рисунок 6 - Внешний вид документа, оформленного с использованием файла таблицы стилей Способ 2. Встраивание таблиц стилей в документы HTML Если отдельные документы HTML должны быть оформлены особым образом, отличным от того, который задан в общих таблицах стилей, можно встроить таблицы стилей непосредственно в текст документа HTML. Такие таблицы называются встроенными (embedded) таблицами стилей. Может получиться так, что стили, встроенные в документ HTML, будут конфликтовать с общими таблицами стилей. В этом случае навигатор отдаст преимущество встроенным таблицам стилей. Для реализации данного способа нужно использовать тэг < STYLE>;. Этот тэг применяется в паре с закрывающим тэгом < /STYLE>;. Между тэгами < STYLE> и < /STYLE> находится таблица стилей.
: Пример 2. Используем второй способ для примера, рассмотренного в предыдущем практическом задании. < HTML> < HEAD> < TITLE> Встроенная таблица стилей< /TITLE> < STYLE TYPE=" text.css" > <! -- H1 { font-size: 24; font-weigt: bold; color: red; margin-left: 10% } H2 { font-size: 20; font-weigt: bold; color: black; font-family: Courier } P.italic { font-style: italic } P.red { color: red } --> < /STYLE> < /HEAD> < BODY BGCOLOR=#FFFFFF> < H1> Заголовок первого уровня< /H1> < P> Обычный текст < H2> Заголовок второго уровня< /H2> < P CLASS=italic> Наклонный текст < P CLASS=red> Текст красного цвета < /BODY> < /HTML>
Внешний вид этого документа при просмотре в навигаторе Microsoft Internet Explorer аналогичен, показанному на рис. 6. Необходимо обратить внимание на использование оператора комментария <! -- -->. Когда документ просматривается навигатором, не распознающим стилевое оформление, то такой навигатор проигнорирует как оператор < STYLE>, так и таблицу стилей. Если убрать оператор комментария, таблица стилей появится в окне навигатора, что, очевидно, нежелательно. Способ 3. Встраивание стилей в операторы HTML Последний способ предполагает встраивание стилей непосредственно в операторы языка HTML и применение стилей для оформления отдельных фрагментов документа HTML. В случае конфликта с таблицами стилей, встроенными в документ HTML, навигатор отдает предпочтение стилям, встроенным в операторы HTML. Поэтому можно таким образом выполнить локальное переопределение стилей. Указывая в операторах оформления текста параметр STYLE, можно непосредственно задавать параметры стилевого оформления. : Пример 3. Пример, рассмотренный в предыдущих практических заданиях, реализуем третьим способом. < HTML> < HEAD> < TITLE> Встроенные стили< /TITLE> < /HEAD> < BODY BGCOLOR=#FFFFFF> < H1 STYLE=" font-size: 24; font-weigt: bold; color: red; margin-left: 10%" > Заголовок первого уровня< /H1> < P> Обычный текст < H2 STYLE=" font-size: 20; font-weigt: bold; color: black; font-family: Courier" > Заголовок второго уровня< /H2> < P STYLE=" font-style: italic" > Наклонный текст < P STYLE=" color: red" > Текст красного цвета < /BODY> < /HTML>
Здесь определены те же самые параметры стилевого оформления, что и в двух предыдущих случаях. Однако эти параметры указываются не в файле таблицы стилей и не в таблице стилей, расположенной в заголовке документа, а непосредственно в месте их “употребления” - в операторах оформления текста.
|
