Иллюстрированный самоучитель по созданию сайтов :: Меню :: Главная [index.htm] 1. Как создают веб-страницы 1.1 Как создают веб-страницы 1.2. Как разместить веб-страничку на сервере 1.3. Как написать веб-страницу 1.4. Обзор программ для просмотра веб-страниц 1.5. Обзор программ для создания веб-страниц 1.6.(Часть-I) Создание веб-страниц при помощи программы Allaire Homesite/Cold Fusion 1.6.(Часть-II)Автоматизация ввода 2. Основные средства языка htmL 2.1. Простейшее форматирование текста 2.2. Самое главное на любой веб-странице — гиперссылки 2.3. Как создать списки на веб-странице 2.4. Создание таблиц 3. Графика на веб-странице 3.1.(Часть-I) Основные способы применения графики 3.1.(Часть-II)Изображение-карта 3.2. Графические форматы Интернета 3.3. Графические элементы оформления веб-страниц 3.4. Графические маркеры 3.5. Подготовка рисунков в программе Xara Webstyle 3.6.(Часть-I)Подготовка рисунков в программе Adobe Photoshop 3.6.(Часть-II)Украшение изображения мелкими деталями 4. Оформление веб-страницы с использованием стилей 4.1. Оформление с помощью атрибута STYLE 4.2. Определение стилей в специальной таблице 4.3. Обзор других возможностей стилевых таблиц 5. Использование звука на веб-странице 5.1. Добавление звукового оформления 5.2. Программы для сжатия звуковых фрагментов 5.3. Маленькие хитрости 6. Динамические веб-страницы на основе JavaScript 6.1. Простейшие примеры 6.2. Как писать собственные функции 6.3. Динамическое изменение внешнего вида страницы 6.4. Другие возможности языка JavaScript 7. Веб-страницы, реагирующие на действия пользователя 7.1. Ввод данных пользователем в формы htmL 7.2.(Часть-I)Страница, управляемая при помощи мыши 7.2.(Часть-II)Динамическое управление позиционированием элементов 7.3. Страница, управляемая с клавиатуры 7.4.(Часть-I)Динамическое отображение текста веб-страницы 7.4.(Часть-II)Использование других свойств при работе с текстом 7.5. Динамическое изменение графических элементов веб-страницы 8. Размещение элементов на веб-странице и навигация по сайту 8.1. Использование структуры фреймов 8.2. Управление расположением элементов веб-страницы с помощью таблиц 9. Дополнительные возможности формирования веб-страниц 9.1. Пример использования элемента управления Tabular Data 9.2. Пример простейшего серверного сценария Наш белый каталог сайтов | Добавить сайт Гостевая книга Контакты Добавить в избраное :: Друзья :: SiteUa - Створити свій сайт безкоштовно 1 ++ + разработка фирменного стиля, логотипа, торговой марки | паркетные работы :: Статистика :: - 1.3. Как написать веб-страницу Как же приступить к созданию веб-страницы? Вообще говоря, главное — придумать и представить себе то, что на этой странице должно содержаться. В этой книге мы больше не будем обращать ваше внимание на этот момент, однако стоит помнить, что приведенные примеры являются лишь иллюстрацией возможностей, а уж как эти возможности применять — решать только вам. В любом случае никогда не стоит применять тот или иной трюк только ради того, чтобы его применить. Всегда исходите из содержания, стиля оформления и удобства пользователя. Итак, начнем. В принципе, даже если написать простой текст в любом текстовом редакторе, то он уже может отображаться программой просмотра веб-стравиц. Например, воспользуйтесь программой Блокнот (Пуск > Программы > Стандартные > Блокнот) и напишите: Домашняя страница Сергея Сергеева. Сергей Сергеев - писатель юморист, автор 20 рассказов. В жизни большой любитель собак и компьютерных игр. Теперь сохраните этот файл с расширением имени .html . Рис. 1.2. Простой текст, загруженный в броузер Теги HTML Пользователь увидит эту страничку так, как показано на рис. 1.2. Это уже что-то, хотя и не слишком привлекательно: во-первых, исчезло форматирование текста (абзацы), во-вторых, — как-то скучно смотрится. Кроме того, есть такие строгие броузеры, которые вообще не отобразят этот текст, если не увидят в нем подтверждение того, что он написан на языке HTML (языке гипертекстовой разметки, на котором и пишутся веб-страницы). Расширение .html такой броузер может посчитать недостаточным подтверждением, поэтому придется написать несколько дополнительных строк: Домашняя страница Сергея Сергеева Сергей Сергеев - писатель-юморист, автор 20 рассказов. В жизни большой любитель собак и компьютерных игр. Слова, заключенные в угловые скобки, являются служебными словами языка HTML. Их принято называть тегами (tags). Теги никогда не отображаются при просмотре страницы — они служат для управления оформлением. Существуют разные транскрипции слова browser, означающего просто программу просмотра веб-странип. Некоторые пишут “броузер”, а другие — “браузер”. Мы будем придерживаться второго варианта. Тег , который вы видите в первой строке, означает, что наш текст действительно написан на языке HTML. Большинство тегов языка HTML — парные. Они обязательно требует присутствия закрывающего тега. Например, в этом примере в первой строке стоит открывающий тег , а в последней — закрывающий тег . Все, что расположено между ними, считается .HTML-документом. В языке HTML совершенно не имеет значения, строчными или прописными буквами записаны теги. Можно написать или — для броузера это одно и то же. Однако принято писать теги HTML прописными буквами, чтобы они лучше выделялись на фоне основного текста. В рассмотренном примере вы видите еще один тег — . Все, что расположено между ним и его закрывающим тегом ( ), считается “телом” документа и отображается на экране. HTML,-документы, помимо “тела”, обычно содержат еще и заголовок, в котором заключена различная служебная информация. Заголовок располагается между тегами и . Например, следующий код будет отображен в броузере так, как показано на рис. 1.3. <ТIТLЕ>Домашняя страница Сергея Сергеева Домашняя страница Сергея Сергеева. Сергей Сергеев - писатель-юморист, автор 20 рассказов. В жизни большой любитель собак и компьютерных игр. Рис. 1.3. Простейшая страничка: текст и заголовок Обратите внимание на то, что в заголовке окна броузера также появились слова “Домашняя страница Сергея Сергеева”. Это произошло потому, что в разделе заголовка мы поместили этот текст между тегами
и Теперь вспомним о том, что при отображении в броузере наш текст потерял форматирование. Это произошло потому, что броузер игнорирует перевод строки. Однако если вы все же хотите видеть свой текст с таким же разбиением на строки, какое было в редакторе Блокнот, нужно заключить его между тегами
и
: <ТIТLЕ>Домашняя страница Сергея Сергеева
Домашняя страница Сергея Сергеева Сергей Сергеев - писатель-юморист, автор 20 рассказов. В жизни большой любитель собак и компьютерных игр.
Результат показан на рис. 1.4. Уже лучше, не правда ли? Однако есть два момента, из-за которых мы не советовали бы без крайней необходимости употреблять тег
. Во-первых, как видно из рисунка, текст теперь отображается так называемым моноширинным шрифтом, похожим на шрифт пишущей машинки. Большинство броузеров отображают текст, Рис. 1.4. Страничка, отформатированная с помощью тега заключенный между тегами и
, именно так. Во-вторых (и это главное), в том, что броузер игнорирует разбиение текста на строки, есть свой глубокий смысл. Например, написанная строка может не поместиться в окне просмотра, и тогда, если бы не было тега , броузер автоматически перенес бы ее часть на следующую строку, чтобы пользователю было удобно читать весь текст. Тег не позволяет этого сделать, и если строка “вылезет” за пределы окна просмотра, то для ее чтения придется воспользоваться горизонтальной полосой прокрутки, что неудобно и обычно раздражает. Другими словами, если вы используете тег , вам придется специально заботиться о длине строк, а это затруднительно, поскольку никто заранее не знает, какой размер окна броузера будет у пользователя. Без тега броузер позаботится об удобстве просмотра сам (это будет проиллюстрировано далее на рис. 1.6). Для форматирования текста существует множество специальных тегов. Сейчас рассмотрим самый простой из них — тег
. В том месте, где он стоит, происходит принудительный переход на новую строку. (Причем в исходной записи можно продолжать текст на этой же строке — это не имеет значения.) Тег
не имеет закрывающего парного тега, он употребляется сам по себе. Вот как сохранить наше форматирование текста без использования тега <ТIТLЕ>Домашняя страница Сергея Сергеева. Домашняя страница Сергея Сергеева.
Сергей Сергеев - писатель-юморист, автор 20 рассказов.
В жизни большой любитель собак и компьютерных игр. Результат показан на рис. 1.5. Как видите, форматирование текста сохранено, шрифт остался пропорциональным и не превратился в моноширинный, а кроме того, если пользователь почему-либо будет просматривать страничку в очень узком окне, он все равно увидит весь текст (рис. 1.6). И, наконец, еще одна деталь: иногда броузеры или другие программы обработки требуют, чтобы в начале HTML-документа обязательно стоял служебный тег , в атрибутах которого должна быть указана версия языка и некоторая другая информация. Так что в корректном виде наша страничка будет выглядеть вот так: рuc. 1.5. Страничка с простейшим Рис. 1.6. Та же страничка в форматированием текста узком окне броузера <ТIТLЕ>Домашняя страница Сергея Сергеева Домашняя страница Сергея Сергеева
Сергей Сергеев - писатель-юморист, автор 20 рассказов.
В жизни большой любитель собак и компьютерных игр. В данном случае в первой строке стоит указание, что в документе использована версия 4.0 языка HTML. В дальнейшем мы будем ориентироваться именно на нее, хотя приведенный выше пример с таким же успехом мог бы быть написан и с использованием версии 3.2, и даже более ранней. Однако HTML 4.0 предоставляет такие возможности создания веб-страниц, которых не было в предыдущих версиях. И хотя некоторые старые программы просмотра не в силах адекватно отобразить страницы, написанные с использованием особенностей новой версии, все же подавляющее большинство читателей сегодня пользуются новыми броузерами. Мы будем ориентироваться именно на них. :: Наша кнопка :: Получить код: Поддержите наш ресурс - разместите нашу кнопку на своем сайте :: Реклама :: > Билеты купить билеты на поезд, касса электронные билеты ж д ; доставка автомобилей по жд | Цікаві статті | Інетреклама <+ < :: Ссылки :: - :: Рекомендуем :: - Copyright © Нескли.ком , 2008