Сантехническая гидравлическая промывка труб в Нижнем Новгороде, пригороде.

Начнем с конца


Начнем с конца
Начнем с конца Представим себе, что наша веб-страничка (или сайт) уже готова и мы с умилением любуемся ею на экране своего компьютера. Как же теперь сделать так, чтобы и другие посетители Интерне...
Адрес в Интернете
Адрес в Интернете Подобно тому как любой телефон в телефонной сети имеет свой уникальный номер, любой компьютер, подключенный к Интернету, тоже имеет свой уникальный номер, который называется IP-...
Где найти сервер для публикации
Где найти сервер для публикации Не все имеют постоянное соединение с Интернетом. Тем, у кого соединение временное, гораздо проще разместить свою веб-страничку на каком-нибудь чужом компьютере, сп...
Как отправить материалы серверу
Как отправить материалы серверу Получив место на сервере, можно загрузить туда все файлы своей странички. Для этого удобнее всего воспользоваться так называемым FTP- соединением. При этом процесс...
Доменные имена
Доменные имена Хорошо, а как же будет “называться” наша страничка? Как пользователи Интернета смогут ее найти? Как мы уже говорили выше, любой компьютер в Интернете имеет свой уникальный IP-адрес...
Регистрация имен
Регистрация имен А как быть, если хочется сделать адрес странички более коротким, запоминающимся? Для этого существуют многочисленные службы переадресации, например: come.to, www.da.ru, attend.to...
Как написать вебстраницу
1.3. Как написать веб-страницу Как же приступить к созданию веб-страницы? Вообще говоря, главное — придумать и представить себе то, что на этой странице должно содержаться. В этой книге мы больше...
Простой текст загруженный в броузер
Рисунок 1.2. Простой текст, загруженный в броузер...
Теги HTML
Теги HTML Пользователь увидит эту страничку так, как показано на Рисунок 1.2. Это уже что-то, хотя и не слишком привлекательно: во-первых, исчезло форматирование текста (абзацы), во-вторых, — как...
Рисунок 1 3 Простейшая страничка текст и заголовок
Рисунок 1.3. Простейшая страничка: текст и заголовок Обратите внимание на то, что в заголовке окна броузера также появились слова “Домашняя страница Сергея Сергеева”. Это произошло потому, что в...
Страничка отформатированная с помощью тега
Рисунок 1.4. Страничка, отформатированная с помощью тега <PRE> заключенный между тегами <PRE> и </PRE> , именно так. Во-вторых (и это главное), в том, что броузер игнориру...
Та же страничка в форматированием текста узком окне броузера
Рисунок 1.6. Та же страничка в форматированием текста узком окне броузера <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <ТIТLЕ>...
Обзор программ для просмотра вебстраниц
1.4. Обзор программ для просмотра веб-страниц...
Различия между броузерами
Различия между броузерами Итак, прежде чем идти дальше, давайте окинем взглядом броузеры и посмотрим, что же они могут отображать, а что — нет. Действительно, ведь все, что мы напишем, пользовате...
Броузер Internet Explorer
Броузер Internet Explorer На сегодняшний день наиболее популярной программой просмотра веб-страниц является броузер Microsoft Internet Explorer, которым пользуется примерно половина всех бродящих...
Броузер Netscape Navigator
Броузер Netscape Navigator Вторым по популярности броузером в мире является Netscape Navigator. В отличие от MS Internet Explorer, эта программа реализована для многих платформ, включая OS/2 и UN...
Другие свойства просмотра
Другие свойства просмотра Несмотря на то что программами MS Internet Explorer и Netscape Navigator пользуется подавляющее большинство пользователей Интернета, существуют и другие броузеры, то и д...
Простейшие средства создания вебстраниц
Простейшие средства создания веб-страниц В предыдущем разделе мы рассмотрели программы, предназначенные для просмотра веб-страниц. Теперь, прежде чем приступить непосредственно к их созданию, дав...
Код HTML в текстовом редакторе Блокнот
Рисунок 1.7. Код HTML в текстовом редакторе Блокнот Однако в очень простых текстовых редакторах типа Блокнота весь HTML-текст приходится писать вручную, а многим хотелось бы какую-то часть работы...
Вебредактор TextPad
Веб-редактор TextPad Итак, начнем. Тем, кто предпочитает набирать код HTML вручную, но кому не хватает функциональности Блокнота и подобных ему программ, можно посоветовать программу под название...
Вебредактор Arachnophilia
Веб-редактор Arachnophilia Завершив краткий обзор возможностей программы TextPad, давайте рассмотрим другую программу для написания .HTML-кода — Arachnophilia, которую можно получить по адресу ww...
Вебредакторы типа WYSIWYG
Веб-редакторы типа WYSIWYG Мы рассмотрели программы, в которых основной упор при создании веб-страниц сделан на написание HTML-коца. вручную. Однако существуют программы, позволяющие редактироват...
Редактор Star Office
Редактор Star Office Более мощными средствами редактирования HTML-файлов располагает программа StarOffice. Здесь при открытии или создании HTML- файла соответственно меняется содержимое некоторых...
Netscape Composer
Netscape Composer Еще одна WYSIWYG-ориентированная программа для редактирования .HTML-файлов встроена в броузер Netscape. Она называется Netscape Composer гораздо меньше, чем в предыдущей, однако...
Создание вебстраниц при помощи программы Allaire Homesite/Cold Fusion
1.6. Создание веб-страниц при помощи программы Allaire Homesite/Cold Fusion Одним из самых замечательных программных продуктов, предназначенных для разработки веб-страниц, является программа Home...
Работа с файлами
Работа с файлами Первая вкладка — Files (Файлы) — самая очевидная в использовании. На ней представлен каталог файлов, имеющихся на компьютере. Двойной щелчок мыши на значке файла открывает его на...
Работа с проектами
Работа с проектами Вторая слева вкладка панели Resource Tab называется Projects (Проекты). Она очень похожа по внешнему виду на предыдущую, но позволяет собрать файлы, физически размещенные в раз...
Схема сайта
Схема сайта Средства третьей вкладки — Site View (Схема сайта) — предназначены для просмотра схемы разрабатываемого веб-сайта. Связи между HTML- документами, рисунками и прочими объектами на схем...
Прочие вкладки
Прочие вкладки Следующая вкладка. Snippets (Отрывки), предназначена для создания коротких шаблонных текстов для ваших веб-страниц, их каталогизации и быстрой вставки в документы. Затем идет вкла...
Панель редактирования
Панель редактирования Теперь давайте кратко рассмотрим основную часть окна программы — панель редактирования. Вкладки: Edit (Правка), Browse (Просмотр) и Design (Оформление). На первой HTML- док...
Автоматизация ввода
Автоматизация ввода Теперь давайте обратим внимание на панель инструментов для быстрого ввода тегов (Quick Bar), расположенную в правой верхней части окна программы. Элементы управления, представ...
Диалоговые окна редактирования тегов
Диалоговые окна редактирования тегов О том, что это все означает, мы поговорим в следующих главах, а пока что рассмотрим еще одно типичное диалоговое окно программы. Откройте вкладку Tables и наж...
Создание графических карт ссылок
Создание графических карт ссылок Для создания графической карты ссылок служит кнопка New Image Map (Создать изображение-карту) на верхней панели инструментов. Она открывает диалоговое окно, в кот...
Предварительный просмотр страницы
Предварительный просмотр страницы Вторая вкладка называется Browse (Просмотр). На ней страница отобража ется в том виде, в котором она будет видна в броузере. Собственно говоря, кроме как для про...
1 Как создают вебстраницы
1. Как создают веб-страницы...
От автора
1.1. От автора Меня часто спрашивают: “Легко ли создавать веб-страницы и как это делается? ” При этом выясняется, что под словом создавать разные люди понимают самые различные вещи: и как придума...
Самое главное на любой вебстранице — гиперссылки
2.2. Самое главное на любой веб-странице — гиперссылки В предыдущем разделе мы рассмотрели различные способы форматирования текста веб-страницы. Однако созданная нами в качестве примера “Домашняя...
Применение внутренних гиперссылок
Рисунок 2.7. Применение внутренних гиперссылок...
Гиперссылки в пределах сайта
Гиперссылки в пределах сайта Теперь рассмотрим другой случай. Обычно бывает целесообразно разместить разные логические фрагменты текста в разных файлах (особенно если они большие). Тогда время за...
Внешние гиперссылки
Внешние гиперссылки Однако гиперссылки можно устанавливать не только на файлы, содержа-щиеся в своем каталоге на сервере, но и на любые другие Интернет-ресурсы. В этом случае в качестве значения...
Применение гиперссылок для связей с удаленными серверами
Рисунок 2.8. Применение гиперссылок для связей с удаленными серверами Помимо значения "_blank", атрибут TARGET= может принимать еще значения "_self", "_top" и "...
Как создать списки на вебстранице
2.3. Как создать списки на веб-странице Иногда при создании веб-страниц бывает полезно (а порой даже необходимо) как-то упорядочить представленную на них информацию. В традиционном языке HTML для...
Маркированные и нумерованные списки
Маркированные и нумерованные списки Перечисление услуг хорошо смотрится в виде маркированного списка. Для его организации применяется тег <UL> . Все, что находится между ним и его открыва...
Применение маркированного и нумерованного списков
Рисунок 2.9. Применение маркированного и нумерованного списков Результат показан на Рисунок 2.9. Как видите, мы здесь не употребляли закрывающий тег </LI> . Броузер обычно все равно поним...
Применение вложенных списков
Рисунок 2.10. Применение вложенных списков щее место в словаре. Для этого каждая буква алфавита должна быть оформлена как гиперссылка, например: <A HREF="#BukvaV">B</A> а...
Использование списка терминов
Рисунок 2.11. Использование списка терминов соответствующий раздел словаря терминов, причем не куда-нибудь, а точно в то место, где этот термин поясняется. Если вы внимательно просмотрели послед...
Создание таблиц
2.4. Создание таблиц Для того чтобы двигаться дальше, давайте рассмотрим такой пример. Допустим, мы хотим поместить на свою страничку таблицу результатов хоккейного турнира. Поскольку для хорошег...
Рисунок 2 1
Рисунок 2.1 2 . Таблица, созданная простейшими средствами HTML Как же сделана эта таблица? Для того чтобы это понять, давайте рассмотрим сначала соответствующие средства HTML....
Формирование структуры таблицы
Формирование структуры таблицы Любая таблица определяется в HTML с помощью тега <TABLE> . Все, что расположено между тегами <TABLE> и </TABLE> , считается таблицей. О...
Основные атрибуты таблицы
Основные атрибуты таблицы Как видите, наша таблица получилась ровно такой ширины, какая нуж- ная, чтобы вместить написанную нами фразу, и ни на пиксел больше. С помощью атрибута WIDTH= можно...
Рисунок 2 1
Рисунок 2.1 3 . Таблица из одной ячейки то броузер отобразит таблицу шириной в 50 пикселов. При этом во фразе Это уже таблица! последнее слово, скорее всего, не поместится в длину таблицы и авт...
Рисунок 2 1
Рисунок 2.1 4 . Установка ширины таблицы А что делать, чтобы текст не “прилеплялся” так сильно к границе ячейки как показано на Рисунок 2.14 и 2.15? Для этого тоже существует специальный атрибу...
Рисунок 2 1
Рисунок 2.1 5. Применение атрибута CELLPADDING= Кроме того, имеется еще атрибут CELLSPACING=, который задает расстояние между ячейками таблицы. В данном случае мы можем увидеть действие э...
Рисунок 2 1
Рисунок 2.1 6 . Применение атрибута CELLSPACING= Кстати, рамка таблицы совершенно не обязана быть серой, по крайней мере в броузере Internet Explorer (версии 3 и выше). Для этого служит а...
Рисунок 2 1
Рисунок 2.1 7 . Окрашивание рамки таблицы Цвет фона таблицы можно задать с помощью атрибута BGCOLOR=. Он может отличаться от цвета общего фона всей страницы, определенного атрибутом BGCOL...
Рисунок 2 1
Рисунок 2.1 8 . Таблица из двух ячеек Теперь добавим в нашу таблицу вторую строку: <TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALI...
Рисунок 2
Рисунок 2. 19 . Пример таблицы с “недостающей” ячейкой...
Рисунок 2 2
Рисунок 2.2 0 . Пример таблицы с пустой ячейкой До сих пор мы рассматривали только атрибуты тега <TABLE> . Однако теги <TR> и <TD> тоже могут иметь собственные атриб...
Управление шириной столбцов
Управление шириной столбцов Если вы посмотрите на Рисунок 2.2 0 , то увидите, что ширина столбцов в нашей таблице разная. Это происходит потому, что броузер распределяет место в таблице в завис...
Объединение ячеек
Объединение ячеек Иногда в таблицах встречаются так называемые объединенные ячейки — когда несколько расположенных рядом ячеек сливаются в одну большую. Это можно сделать, установив атрибуты COL...
Пример объединения ячеек таблицы
Рисунок 2.22. Использование заголовка Результат показан на Рисунок 2.22. Осталось добавить, что использование обсуждавшегося выше атрибута RULES= со значением "groups" подразумевает име...
Анализ примера
Анализ примера Теперь, вооружившись полученными знаниями, давайте вернемся к таблице, представленной на Рисунок 2.13 и посмотрим, как же она сделана. В качестве основного цвета таблицы здесь выбр...
2 Основные средства языка HTML
2. Основные средства языка HTML...
Простейшее форматирование текста
2.1. Простейшее форматирование текста В разделе 1.2 мы начали знакомиться с тем, как пишется код веб-страницы, и увидели, что ничего принципиально сложного в этом нет. Давайте сейчас продолжим зн...
Управление выравниванием текста
Управление выравниванием текста В данном случае нам потребуется такой атрибут, как выравнивание (выключка) текста. Он может употребляться с разными тегами. Поскольку на нашей страничке и заголово...
Иллюстрация применения атрибута ALIGN
Рисунок 2.1. Иллюстрация применения атрибута ALIGN...
Оформление абзацев
Оформление абзацев Вообще говоря, для разделения абзацев вместо тега <BR> можно также использовать тег <Р> . Он, надо сказать, и был создан для этого. Но поскольку придумывали ег...
Оформление заголовков
Оформление заголовков Посмотрим еще раз на нашу страничку. Еще один ее недостаток заключается в том, что весь текст написан шрифтом одного размера. Вообще говоря заголовки выделяют более крупным...
Горизонтальная линейка
Горизонтальная линейка Более, на нашей страничке хотелось бы визуально отделить рассказы от вступительного текста. Это можно сделать с помощью горизонтальной черты. В принципе, для этого достаточ...
Применение заголовочных стилей
Рисунок 2.2. Применение заголовочных стилей тельный текст чуть крупней и выделить в нем некоторые моменты? Кроме того, текст эпиграфа обычно дается чуть более мелким шрифтом, а подзаголовки и под...
Управление шрифтом
Управление шрифтом Чтобы изменить размер шрифта, можно использовать тег <FONT> с атрибутом SIZE=. Вообще говоря, WWW-консорциум не особенно рекомендует использовать тег <FONT> в...
Применение зачеркнутого текста
Рисунок 2.3. Применение зачеркнутого текста Однако вернемся к нашему герою Сергею Сергееву. В таком виде страничка смотрится уже неплохо. Но вы, наверное, обратили внимание на то, что в Интернете...
Цветовое оформление
Цветовое оформление Для этого проще всего установить соответствующие атрибуты тега <BODY> . Атрибут ТЕХТ= определяет цвет текста на страничке, а атрибут BGCOLOR= — цвет фона. Названия цве...
Дополнительные варианты оформления
Дополнительные варианты оформления отображают текст, находящийся между тегами <CITY></CITY> курсивом. Например, если вы напишете следующее" А.С. Пушкин сам говорил, что он &...
Применение длинной цитаты
Рисунок 2.5. Применение длинной цитаты также отобразить и обычные типографские кавычки (“? ”) вместо машинописных (" "). Запись Книга &laquo; Путеводитель по Атлантиде &raquо; о...
Отображение исходного кода программ в броузере
Рисунок 2.6. Отображение исходного кода программ в броузере шрифтом, как код, а тег <ТТ> просто применяет к фрагменту моноширинный шрифт. Разница, прямо скажем, небольшая. Для отображен...
Графические форматы Интернета
3.2. Графические форматы Интернета В предыдущем разделе мы рассмотрели способы использования графических элементов на веб-странице. Но, как вы, вероятно, знаете, существует великое множество разл...
Формат GIF
Формат GIF Формат GIF предназначен в основном для “рисованных” изображений: чертежей, графиков и т. д. В нем используется так называемая индекси- рованная цветовая палитра. Максимальное количеств...
Страничка с круглой фотографией
Рисунок 3.6. Страничка с круглой фотографией Во-первых, GIF-рисунок может быть “прозрачным”. То есть, можно один цвет удалить из палитры GIF, определив его как прозрачный. Тогда при отображении,...
Общий вид программы WWW Gif Animator
Рисунок 3.7. Общий вид программы WWW Gif Animator...
Формат JPEG
Формат JPEG Теперь несколько слов о другом распространенном графическом формате — JPEG (файлы этого формата могут иметь расширение как .jpeg, так и .jpg). В отличие от GIF, этот формат предназнач...
Графические элементы оформления вебстраниц
3.3. Графические элементы оформления веб-страниц Тем, кто впервые начинают работать над созданием веб-страниц, обычно представляется, что использование графики здесь должно ограничиваться вставко...
Линейки и буквицы
Линейки и буквицы Какие же графические элементы возможно применять в качестве такого “украшения”? Здесь надо проявить фантазию. Если вы придумаете что-нибудь оригинальное, ваша веб-страница будет...
Графические маркеры
3.4. Графические маркеры Итак, в предыдущем разделе мы упомянули о возможности создания графических маркеров списков. Она настолько привлекла создателей веб-страниц, что для их удобства были созд...
Размещение блоков текста
Размещение блоков текста Вообще-то “Лентяй”, хоть и гипотетическая, но все же фирма, поэтому на ее сайте должны присутствовать несколько разделов, без которых корпоративный сайт уже не воспринима...
Как можно организовывать загрузку разделов
Как можно организовывать загрузку разделов. Обратите внимание на то, что для списка ссылок мы определили класс Ink. Пока что определения свойств этого класса у нас нет, но ясно, что блок ссылок д...
Добавим на страничку блок гиперссылок
Рисунок 4.5. Добавим на страничку блок гиперссылок .hdr { position: absolute; left: 50px; top: 10рх; } Мы немного отступили от края странички, хотя можно было указать, конечно, и нулевые значе...
Добавление фонового рисунка
Добавление фонового рисунка То, что у нас получилось, показано на Рисунок 4.6. Прежде чем мы займемся стилевым оформлением каждого блока, давайте вместо однотонового фона установим градиент. Пуст...
Позиционирование блока гиперссылок
Рисунок 4.6. Позиционирование блока гиперссылок Вот теперь получилось то, что нужно. Кстати, можно заставить фоновый рисунок повторяться только по горизонтали (repeat-x) или вообще не повторяться...
Оформление текста
Оформление текста Теперь давайте займемся информационным блоком. Чтобы информация хорошо читалась и воспринималась, он не должен особо страдать излишествами, однако, чтобы выделить заголовки спис...
Декоративное оформление текста
Декоративное оформление текста Для информационного блока оформление уже вполне закончено. Теперь займемся блоком гиперссылок. Вспомним, что мы для этого даже загото вили класс Ink. Чтобы наши раз...


- Начало -