внутри какого контейнера располагается код веб страницы

Простейший способ создать текстовую веб-страницу — это на­брать её код в каком-нибудь текстовом редакторе, который рабо­тает с простым текстом без оформления («только текст», англ. plain text) и сохранить в файле с расширением htm или html. В операционной системе для этих расширений, как правило, установлена связь (ассоциация) с браузером, так что при двойном щелчке на имени файла веб-страница открывается в браузере в режиме просмотра.

Для изменения страницы можно использовать любой тексто­вый редактор. После записи изменений на диск нужно обновить страницу в браузере <чаще всего для этого используется клави­ша F5).

Кроме того, существуют специальные редакторы, предназна­ченные для разработки веб-страниц. Многие из них поддержива­ют режим WYSIWYG (англ. What You See Is What You Get — что видишь, то и получишь), т. е. при редактировании документ вы­глядит так же, как при просмотре в браузере. Изменять содержа­ние и оформление веб-страницы можно точно так же, как и в тек­стовых процессорах (с помощью мыши, меню и командных кно­пок), при этом пользователю не нужно знать язык HTML — все необходимые команды (тэги) программа добавляет автоматиче­ски. В то же время профессиональные веб-дизайнеры редко ис­пользуют WYSIWYG-редакторы, потому что для точной вёрстки (размещения материала на странице) практически всегда прихо­дится вручную редактировать HTML-код.

Даже если редактор поддерживает режим WYSIWYG, очень полезно изучать код построенной в нём веб-страницы для того,чтобы в будущем вы смогли легко перейти к созданию динамиче­ских сайтов.

Первая веб-страница

Разберём теперь более сложный пример. Ниже мы веб-страницы, а на рис. 4.2 — её вид в браузере.

Источник

Стилизация контейнеров для содержимого веб-страниц

Содержимое веб-страниц должно быть размещено в некоем элементе, ширина которого, ограничивающая ширину содержимого, позволяет пользователям удобно работать с материалами сайта. Такие элементы называют «обёртками» (wrapper) или «контейнерами» (container). Стилизовать контейнеры средствами CSS можно по-разному. Некоторые способы работы с контейнерами ставят дизайнера перед необходимостью решать достаточно сложные задачи.

В этом материале я расскажу о контейнерах для содержимого веб-страниц: о том, как они работают, о том, как ими пользоваться, и о тех случаях, когда лучше обойтись без них. Обратите внимание на то, что я буду использовать здесь термины «обёртка» и «контейнер» как равнозначные.

Общие сведения

Но в современных условиях использование в качестве контейнера элемента может оказаться непрактичным. Контейнер позволяет не допустить выхода дочерних элементов за его границы.

Контейнер не даёт дочерним элементам выходить за его границы

Без использования элемента-обёртки дочерние элементы будут размещаться, ориентируясь на края экрана. Это может быть неудобным для пользователей. Особенно — для тех, которые работают на больших экранах.

Страница без элемента-контейнера, включающего в себя её содержимое

Здесь показано, как элементы, растягиваясь, занимают весь экран. Происходит это в том случае, если в макете страницы нет элемента-контейнера. Полагаю, не следует предлагать пользователям работать с подобными страницами. Позвольте мне объяснить эту мысль.

О необходимости использования контейнеров для содержимого веб-страниц

Использование контейнера для содержимого веб-страниц имеет множество сильных сторон, о которых стоит знать дизайнерам и разработчикам. Вот некоторые из этих сильных сторон:

Настройка элемента-контейнера средствами CSS

Теперь, когда мы поговорили об основах применения контейнеров, и о том, какие преимущества даёт их использование, давайте остановимся на том, как настраивать их средствами CSS.

▍Настройка ширины контейнера

Элемент-контейнер с настроенной шириной

Хотя это — вполне рабочий приём, можно полностью избавиться от свойства width и, как в следующем примере, пользоваться лишь свойством max-width :

Теперь, когда мы нашли подходящий механизм настройки ширины контейнера, давайте поговорим о том, как выровнять контейнер по центру страницы.

▍Выравнивание контейнера по центру страницы

Контейнер, выровненный по центру страницы

Для того чтобы выровнять контейнер по центру страницы, нужно, при настройке его внешних отступов, воспользоваться значением auto для левого и правого отступов:

Вот как, в соответствии со спецификацией CSS, ведут себя отступы, которым назначено значение auto :

Если margin-left и margin-right установлены в значение auto, то значения, которые будут использованы для этих отступов, будут одними и теми же. Это позволяет центрировать элемент по горизонтали относительно краёв содержащего его блока.

Если вас интересуют подробности об использовании ключевого слова auto в CSS — взгляните на эту мою статью.

▍Настройка левого и правого внутренних отступов

Горизонтальные (левый и правый) внутренние отступы

При проектировании контейнера важно уделить внимание настройке его левого и правого внутренних отступов. Когда размер области просмотра меньше максимальной ширины контейнера, это приведёт к тому, что края контейнера будут прижаты к границам области просмотра. Вот пример стилизации контейнера, в котором предусмотрены внутренние отступы:

Настроив внутренние отступы контейнера, мы можем быть уверены в том, что края контейнера, в любом случае, будут находиться как минимум в 16px от краёв области просмотра, даже в том случае, если ширина области просмотра окажется меньше максимальной ширины контейнера. Внутренние отступы — это нечто вроде защитного механизма, который не даёт границам контейнера прижиматься к границам области просмотра даже в том случае, когда область просмотра уже, чем максимальная ширина контейнера.

▍Использование процентных значений при настройке контейнеров

Использование процентных значений при настройке контейнеров и ситуации, когда значение max-width: 90% приводит к приемлемым и неприемлемым результатам

Хотя этот подход оказался вполне рабочим, выяснилось, что на больших экранах 90% ширины области просмотра — это слишком много. Но данную проблему можно решить, воспользовавшись медиа-запросом:

В результате оказывается, что, используя процентное значение, мы усложняем CSS-код. Для того чтобы избавить себя от необходимости применения медиа-запроса, мы можем использовать фиксированное значение для ширины. Ещё одно решение, предложенное в этом твите, заключается в применении комбинации свойств width: 90% и max-width: 1170px :

Это — интересный подход, но я предпочёл бы настраивать внутренние отступы самостоятельно, не полагаясь на процентные значения.

▍Свойство display элемента-контейнера

Я не рекомендую этого делать, так как это идёт вразрез с идеей разделения ответственностей. Элемент-контейнер, «обёртка», это сущность, предназначение которой заключается в том, чтобы «оборачивать» другие элементы. Если нужно разместить дочерние элементы контейнера в сетке, тогда стоит добавить в контейнер ещё один

Пусть имеется такой контейнер:

Задавать свойство display: grid подобного элемента не рекомендуется из-за того, что такой элемент может использоваться на разных страницах. Его особые настройки могут случайно привести к нарушению размещения элементов. Вот неудачный вариант настройки контейнера, о котором идёт речь:

Лучше будет использовать такой HTML-код:

Элемент с классом featured-news можно стилизовать так:

Обратите внимание на то, что в этом примере мы использовали отдельный элемент

в качестве ещё одной обёртки для содержимого страницы. На имена классов, использованных здесь, можете внимания не обращать. Для решения подобной задачи можно подобрать более удачные имена классов, которые подойдут для многократного использования на различных страницах сайта. Однако именование CSS-сущностей выходит за рамки данного материала.

▍Настройка внешних отступов, разделяющих элементы-контейнеры

Помните, как выше я не рекомендовал использование сокращённого способа настройки внешних отступов для центрирования элемента-контейнера? Речь шла о такой конструкции:

Хотя это — вполне рабочий стиль, в том случае, если на странице имеется несколько элементов-обёрток, и между ними должно быть некоторое расстояние, применение подобного стиля может привести к путанице. Если вы, по какой-то причине, решите уточнить стилизацию элемента-обёртки, применив дополнительный класс, то настройка внешних отступов с помощью этого класса не даст нужных результатов из-за особенностей расчёта значений специфичности CSS-правил.

Я имею в виду такую схему стилизации:

Теперь поговорим о настройке внешних отступов элементов. При работе над каждым своим проектом я готовлю набор вспомогательных классов для настройки внутренних и внешних отступов. Я использую их там, где они нужны. Взгляните на следующий рисунок.

Автономный контейнер и контейнер внутри элемента

Контейнер внутри полноэкранного элемента

В некоторых случаях бывает так, что есть элемент с фоном, занимающий 100% ширины области просмотра, а внутри этого элемента имеется элемент-контейнер. Эта схема похожа на ту, которую мы рассматривали в предыдущем разделе.

HTML-структура страницы в такой ситуации может выглядеть так:

Элемент занимает 100% ширины области просмотра. Этому элементу можно назначить фоновое изображение или фоновый цвет. Контейнер, находящийся внутри этого элемента, не даёт содержимому занимать всю ширину области просмотра.

Элемент занимает всю ширину области просмотра, контейнер ограничивает пространство, в котором выводится содержимое страницы

На этом рисунке у элемента задано фоновое изображение. Он занимает всю ширину области просмотра, а содержимое страницы, выводимое в контейнере, ограничено шириной контейнера.

Нужно ли заключать в контейнер содержимое верхнего блока страницы?

Нужен ли контейнер для оформления верхнего блока страницы, который часто называют «Hero Section»? Это зависит от каждой конкретной ситуации. Исследуем два самых распространённых подхода к оформлению верхних блоков страниц.

Первый подход предусматривает центровку содержимого блока и ограничение ширины содержимого.

Ширина содержимого верхнего блока страницы ограничена

Второй вариант предусматривает распределение содержимого в пределах верхнего блока.

Содержимое распределено в пределах верхнего блока страницы

Для того чтобы лучше разобраться в этих паттернах, предлагаю исследовать особенности их внутреннего устройства.

Верхний блок страницы, содержимое которого выровнено по центру

Возможно, разрабатывая верхний блок страницы, вам захочется разместить в соответствующем элементе некое содержимое и выровнять его по центру без использования элемента-контейнера.

При стилизации вышеприведённого HTML-кода выровнять его содержимое по центру можно, воспользовавшись свойством text-align :

При таком подходе всё будет выглядеть достойно до тех пор, пока не изменится ширина окна браузера. Вот разбор проблем, которые это может вызвать.

▍Проблема №1: содержимое раздела прижимается к краям области просмотра

Так как в данном примере не настроены правый и левый внутренние отступы, содержимое раздела будет размещено вплотную к границам этого раздела. Это создаёт неудобства для пользователей, так как им сложнее будет читать содержимое верхнего блока страницы.

Содержимое раздела прижато к его краям

▍Проблема №2: слишком большая длина строк текста на экранах большого размера

, может быть очень тяжело читать из-за того, что длина абзаца окажется слишком большой. В соответствии с этим документом, рекомендованное число символов в строке составляет 45-75. Выход длины строки за пределы этого диапазона усложняет чтение.

Длина строки слишком велика

▍Решение проблем

Для решения вышеозначенных проблем можно использовать контейнер. Он позволит и удержать длину строки в разумных пределах, и предотвратить плотное прилегание содержимого к границам раздела.

Как выравнивать контейнер: по центру, или по левому краю страницы?

Я не могу дать однозначного ответа на этот вопрос, однако я видел сайты, контейнеры, используемые на которых, выравниваются на экранах ноутбуков по центру, а на экранах настольных компьютеров — по левому краю страницы.

Примером такого сайта является Techcrunch. Обратите внимание на то, что на экране настольного компьютера содержимое сайта выровнено по левому краю страницы.

Выравнивание содержимого на экране ноутбука и на экране настольного компьютера

Мне нравится работать с сайтами, содержимое которых выровнено по центру. На страницах таких сайтов имеются симметричные отступы слева и справа. Но у того, что содержимое некоторых сайтов выравнивают по левому краю страницы, может быть какая-то причина, о которой я не знаю. Если вы знаете о том, почему это так, дайте мне знать.

Использование CSS-переменных для создания различных вариантов стилизации контейнеров

Редко бывает так, что все элементы-контейнеры, используемые в некоем проекте, имеют одну и ту же ширину. Ширина контейнера может меняться в зависимости от содержимого контейнера и от того, как именно он используется. Большую гибкость в работе с контейнерами даёт использование CSS-переменных. Это, кроме того, весьма современный подход к настройке контейнеров. Рассмотрим пример.

Вот HTML-код контейнера:

Благодаря этому подходу я смог создать особый контейнер, не прибегая при этом к следующим действиям:

Если вам не нравится этот подход из-за использования в нём встроенного стиля для переопределения значения CSS-переменной, вы вполне можете решить эту задачу и с помощью добавления к элементу нового класса. Например — так, как показано ниже.

Так выглядит стиль:

Здесь можно найти рабочий пример.

Использование display: contents

При реализации чего-то, напоминающего этот пример, может понадобиться сделать так, чтобы заголовочный раздел сайта мог бы растягиваться до полной ширины страницы, чтобы его ширина не ограничивалась бы свойствами контейнера.

Заголовочная часть сайта занимает, в ширину, всё доступное пространство

Отзывчивый фон и фиксированное содержимое

В книге CSS Secrets представлена интересная техника, которая может быть использована для стилизации разделов, имеющих отзывчивый фон (фон, способный занимать всю доступную ширину области просмотра) и элемент-контейнер для содержимого. Рассмотрим обычный способ создания макетов подобных разделов.

Здесь значения свойств margin-left: auto и margin-right: auto вычисляются путём взятия половины ширины области просмотра и вычитания из неё ширины содержимого. Того же самого можно добиться с использованием внутренних отступов.

Но дело пока ещё не сделано. На мобильных устройствах содержимое будет прижато к краям области просмотра. Решить эту проблему можно, например, так:

Как вы стилизуете элементы-контейнеры?

Источник

Контейнерный Web-дизайн

Освоим дополнительные атрибуты стилей, применяемых для задания параметров блочных контейнеров (их размеры и местоположение на Web-странице).

А в завершение получим от CSS средства управления переполнением.

Блочные контейнеры

В блочном контейнере могут быть размещены от одного до нескольких блочных элементов таких как заголовок, абзац, таблица и др.

Для создания блочного контейнера применяется парный тег

В этом блочном контейнере размещен заголовок и два абзаца.

Блочные контейнеры используются чаще, чем встроенные.

Web-дизайн прошедшего времени и его недостатки

Web-страница делится на четыре части: заголовок, полоса навигации, основной контент, сведения об авторе. Во всех страницах сайта все одинаково за исключением основного контента, которое должно быть уникальным.

Вот эту проблему текстовый Web-дизайн и не решает.

Страница сайта — набор фреймов. Некоторые участки содержимого выводились в отдельные Web-страницы, адреса которых прописывались в параметрах их фреймов. В других страницах размещался лишь основной материал. Преимущество фреймового контейнерного web-дизайна — повысилась скорость загрузки страницы. Но есть и минусы: фреймы не стандартизированы и нет возможности изменить их структуру. Позже появилась новая разновидность web-дизайна — табличный.

Табличный контейнерный Web-дизайн. При создании web-страницы применяется таблица. Заголовок, авторские права, полоса навигации размещались по отдельным ячейкам этой таблицы. В дальнейшем табличный web-дизайн стал более популярным, чем фреймовый.

— возможность одинакового отображения web-страниц во всех web-браузерах.

— форматирование таблиц и их ячеек стилями CSS.

— все страницы опять имели повторяющиеся части html-кода, что отразилось на снижении загрузки страницы.

— большой и сложный html-код.

Так давайте же перейдем к изучению новой разновидности web-дизайна.

Сущность контейнерного Web-дизайна

Контейнерный Web-дизайн для размещения отдельных фрагментов содержимого Web-страниц использует блочные контейнеры, с которыми мы познакомились в начале этой главы. Отдельные контейнеры создаются для заголовка Web-сайта, полосы навигации, основного содержимого и сведений об авторских правах. Если основное содержимое имеет сложную структуру и состоит из множества независимых частей, для каждой из них создают отдельный контейнер.

Для задания различных параметров блочных контейнеров предусмотрены специальные атрибуты стиля CSS. К таким параметрам относятся размеры (ширина и высота), местоположение контейнеров и их поведение при переполнении. Также мы можем задать для контейнеров цвет фона, создать отступы и рамки, чтобы их выделить (о параметрах отступов и рамок речь пойдет в главе 11).

И что, контейнерный Web-дизайн так уж хорош? Давайте рассмотрим недостатки трех старых принципов Web-дизайна и выясним, сможет ли он их решить.

— Непритязательный вид и линейное представление Web-страниц — у текстового Web-дизайна. Мы можем расположить контейнеры на Web-странице практически как угодно и поместить в них произвольное содержимое: текст, таблицы, изображения, аудио- и видеоролики и даже другие контейнеры. А CSS позволит нам задать для них практически любое представление.

— «Монолитность» Web-страниц — у текстового и табличного Web-дизайна. Современные Web-обозреватели позволяют с помощью специально созданного поведения загрузить в контейнер Web-страницу, сохраненную в отдельном файле, т. е. организовать подгружаемое содержимое. Мы займемся этим в главе 18.

— «Нестандартность» фреймов — у фреймового Web-дизайна. Контейнеры и соответствующие теги официально стандартизированы комитетом W3C и обрабатываются всеми Web-обозревателями одинаково.

— Громоздкость HTML-кода — у табличного Web-дизайна. HTML-код, формирующий контейнеры, исключительно компактен. Как мы уже знаем, блочный контейнер формируется всего одним парным тегом

— Медленная загрузка Web-страниц — у табличного Web-дизайна. Все Web-обозреватели отображают содержимое контейнеров прямо в процессе загрузки, так что Web-страницы визуально загружаются очень быстро.

И что, контейнерный Web-дизайн так хорош? И он совсем не имеет недостатков? Увы, ничего совершенного в мире нет.

Контейнерный Web-дизайн проигрывает табличному в возможности реализации сложного дизайна Web-страниц. Таблица позволяет создать на Web-странице множество колонок разной ширины, содержащих разное содержимое. Чтобы сделать это с помощью контейнеров, скорее всего, придется применять вложенные друг в друга контейнеры, сложные стили и, возможно, поведение, которое уже после окончания загрузки Web-страницы располагает контейнеры в нужных местах. Это, пожалуй, единственный недостаток контейнерного Web-дизайна.

Что ж, с контейнерным Web-дизайном все в основном ясно. Давайте попрактикуемся. Переделаем наши Web-страницы с применением контейнерного Web-дизайна — «легкого», простого, современного.

Представление для нашего Web-сайта

Сначала разработаем схему расположения на Web-страницах соответствующих контейнеров. Лучше всего нарисовать ее на бумаге или в программе графического редактора.

Классическая схема контейнерного Web-дизайна (и не только контейнерного) показана на рис. 10.1. Как видим, в самом верху располагается заголовок Web-сайта, ниже него в одну линию по горизонтали выстроились полоса навигации и основное содержимое, а под ними пристроились сведения об авторских правах. Давайте используем именно эту схему.

Откроем в Блокноте Web-страницу index.htm. Найдем в ее HTML-коде четыре важных фрагмента любой Web-страницы: заголовок Web-сайта, полосу навигации, ос новное содержимое и сведения об авторских правах. Поместим их в блочные контейнеры.

На рис. 10.1 показано, что заголовок Web-сайта предшествует полосе навигации, а не наоборот. Поэтому поменяем местами фрагменты HTML-кода, создающие эти контейнеры и их содержимое.

Впоследствии мы привяжем к созданным контейнерам стили, задающие их размеры и местоположение на Web-странице. Поскольку каждый из этих контейнеров присутствует на каждой Web-странице в единственном экземпляре, применим для этого именованные стили. Дадим им такие имена:

— cheader — стиль для контейнера с заголовком Web-сайта;

— cnav — стиль для контейнера с полосой навигации;

— cmain — стиль для контейнера с основным содержимым;

— ccopyright — стиль для контейнера со сведениями об авторских правах.

Здесь буква «c» обозначает «container» — контейнер. Так мы сразу поймем, что данные стили применяются именно к контейнерам.

Привязка именованного стиля к тегу выполняется путем указания имени этого стиля в качестве значения атрибута тега ID. Сделаем это для всех контейнеров.

Источник

Внутри какого контейнера располагается код веб страницы

Основными достоинствами Web-страниц являются:
— малый информационный объем;
— возможность просмотра в различных операционных системах.

Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.

Web-сайты. Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме. Государственные структуры и организации (правительство, дума, школа и т. д.) обычно создают официальные Web-сайты своих организаций, на которых размещают информацию о своей деятельности. Коммерческие фирмы на своих Web-сайтах размещают рекламу товаров или услуг и предлагают их приобрести в Интернет-магазине. Любой пользователь Интернета может создать свой тематический сайт, на котором может разместить информацию о своих разработках, увлечениях и т. д.

Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц. Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам.

Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета.

Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).

1. В чем заключается преимущество Web-страниц перед обычными текстовыми документами?

2. Каким образом Web-страницы объединяются в Web-сайты?

Структура Web-страницы

Заголовок Web-страницы заключается в контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения.

Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называется контейнером).

Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.

Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера.

Отображаемое в браузере содержание страницы помещается в контейнер (рис. 6.26):

Компьютер

Компьютер и ПО

Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.

Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, «Компьютер»), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.

1. Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? Какова логическая структура Web-страницы?

6.10. Практическое задание. Создать заготовку Web-страницы «Компьютер» и просмотреть ее в браузере.

Форматирование текста на Web-странице

Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов молено задать различные параметры форматирования текста.

Заголовки. Размеры шрифтов заголовков задаются парами тэгов от (самый крупный) до (самый мелкий).

Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R=»blue»). Значение атрибута COLOR можно задать либо названием цвета (например, «red», «green», «blue» и т. д.), либо его шестнадцатеричным значением.

Выравнивание текста. Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALlGN=»left», выравнивание по правой границе: ALIGN=»right», выравнивание по центру: ALIGN= «center».

Таким-образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:

Домашняя страница сайта. На домашней странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на домашнюю страницу сайта «Компьютер» текст, разбитый на абзацы с различным выравниванием:

Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

Таким образом, домашняя страница сайта «Компьютер» будет содержать отцентрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев (рис. 6.27):

Компьютер и ПО

Ha этом сайте.
Терминологический словарь
.

1. Какие тэги (контейнеры) используются для ввода заголовков? Форматирования шрифта? Ввода абзацев?

6.11. Практическое задание. Создать Web-страницу «Компьютер» с отформатированным текстом и просмотреть ее в браузере.

Вставка изображений в Web-страницы

Вставка изображений. Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например:

Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:

Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет-адрес этого файла. Например:

Положение рисунка относительно текста. Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).

На домашней странице сайта «Компьютер» логично разместить изображение компьютера. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид (рис. 6.28):

Вставка альтернативного текста. Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст.

Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:

1. Какой тэг и его атрибуты используются для вставки изображений в Web-страницы?

6.12. Практическое задание. Вставить в Web-страницу «Компьютер» изображение и просмотреть ее в браузере.

Гиперссылки на Web-страницах

Гиперссылки. Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки.

Гиперссылка создается с помощью универсального тэга и его атрибута HREF, указывающего, в каком файле хранится загружаемая Web-страница:

Если загружаемая в браузер Web-страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например:

Если загружаемая в браузер Web-страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например:

Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст, обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок «рука». Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке.

Гиперссылки могут содержать адреса не только Web-страниц, но и файлов других типов. Активизация таких гиперссылок будет приводить:

Панель навигации по сайту. Создадим папку сайта «Компьютер» и добавим в сайт пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета». Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие «пустые» страницы должны иметь заголовки, но могут пока не иметь содержания:

На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.

Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами ( ). Такое размещение гиперссылок часто называют панелью навигации.

Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:

Теперь по щелчку по ссылке адреса электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке Кому будет указан заданный в ссылке адрес.

Итак, созданная домашняя страница Web-сайта «Компьютер» содержит заголовок, изображение компьютера, два абзаца текста, панель навигации и ссылку на адрес электронной почты (рис. 6.29).

1. Какой тэг и его атрибуты используются для создания гиперссылок?

6.13. Практическое задание. Создать Web-страницу «Компьютер», содержащую панель гиперссылок на другие страницы сайта, и просмотреть ее в браузере.

Списки на Web-страницах

Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:

Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного.

Системные программы
Прикладные программы
Системы программирования

текстовые редакторы;
графические редакторы;
электронные таблицы;
системы управления базами- данных.

На Web-страницу «Программы» поместим нумерованный список, содержащий перечень основных типов программного обеспечения компьютера.

Во второй элемент основного нумерованного списка вставим вложенный маркированный список (рис. 6.30).

Web-страницу «Словарь» мы представим в виде словаря компьютерных терминов (рис. 6.31):

Процессор
Центральное устройство компьютера, производящее обработку информации в двоичном коде.
Оперативная память
Устройство, в котором хранятся программы и данные.

1. Какие тэги используются для создания нумерованных списков? Маркированных списков?

Источник