Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Магнитогорский государственный технический университет им. Г.И.Носова

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Web-разработки / Тема 2.docx

Скачиваний:

130

Добавлен:

25.03.2016

Размер:

4.77 Mб

Скачать

☆

<<< < Предыдущая 1 2 3 4 56 / 106 7 8 9 10 > Следующая >>>

2.8. Форматирование шрифтов в html

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

Изменение стилей шрифтов

Изменять стили написания шрифтов в HTML можно далеко не одним способом:

... и ... — выделяют текст полужирным шрифтом.

... и ... — выделяют текст курсивом.

... — выводит текст в верхнем индексе, например E = mc².

... — выводит текст в нижнем индексе, например H₂SO₄.

Все эти теги являются встроенными (inline, уровня строки), то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.

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

Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег , отображающий зачеркнутый текст. Эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Лучше использовать атрибут style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:

<тег style="text-decoration:underline">...</тег> — подчеркивает текст.

<тег style="text-decoration:overline">...</тег> — надчеркивает текст.

<тег style="text-decoration:line-through">...</тег> — зачеркивает текст.

Пример изменения стилей шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Изменение стилей шрифтов</title>

</head>

<body>

Жирный шрифт.Курсив.

Жирный курсив.

H2SO4 - формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст,

зачеркнутый жирный.

</body>

</html>

Результат в браузере

Style — это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. есть. Общий синтаксис атрибута style следующий:

<тег style="свойство CSS:значение">...</тег>

Тег или что делать, когда нет нужных тегов

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

Пример использования тега SPAN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Использование тега SPAN</title>

</head>

<body>

Обычный текст без изменений.

Еще обычный текст.

Подчеркнутый.

Зачеркнутый.

</body>

</html>

Результат в браузере

Меняем имя (гарнитуру) шрифта

Вот список самых распространенных шрифтов, которые практически наверняка есть на компьютере каждого пользователя:

Шрифты	Семейство
'Comic Sans MS'	cursive (рукописные)
Courier	monospace (моноширинные)
Arial, Helvetica, Verdana, Tahoma	sans-serif (рубленные, гротески)
Times, 'Times New Roman', Garamond	serif (с засечками, антиква)

По умолчанию практически все браузеры используют шрифт 'Times New Roman', а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега. Общий синтаксис указания следующий:

<тег style="font-family:имя шрифта, семейство">...</тег>

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

Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для отдельной части текста, то заключите его втег и примените атрибут к нему.

Пример изменения имени шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Изменение имени шрифтов</title>

</head>

Это шрифт Arial, если его нет, то Verdana, а если

и его нет, то любой другой из sans-serif.

Это Comic Sans MS илилюбой cursive.

Этоопять Arial, Verdana илилюбой sans-serif.

А это Courier или любой monospace.

</body>

</html>

Результат в браузере

Меняем размер шрифта

Язык HTML ограничен всего семью размерами шрифтов, что, согласитесь, очень мало для хорошего сайта. Поэтому для изменения размеров все давно используют CSS, и сейчас вы тоже этому научитесь.

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:

pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
% — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:

<тег style="font-size:размер">...</тег>

Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для фрагмента текста, то заключите его втег и примените атрибут к нему.

Пример изменения размера шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Изменение размера шрифта</title>

</head>

Этот размер шрифта составляет 90% от размера

в браузере по умолчанию.

Этот размер составляет 90% уже от размера в теге BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

</h5>

Это опять 90% от размера в браузере по умолчанию.

Размер этого шрифта 15 пунктов.

</body>

</html>

Результат в браузере

Если для всего параграфа нужен шрифт Arial с размером в 80%, то надо написать так:

Текст параграфа.

Или так.

Текст параграфа.

Или вообще вот так.

Текст параграфа.

Первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS:

Текст параграфа.

Гораздо проще. Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (" "), иначе применится только первый стиль, а остальные браузер проигнорирует.

Цвет шрифта и цвет знакоместа

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

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

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

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

<тег style="color:имя цвета">...</тег> — указание цвета текста по имени.

<тег style="color:#HEX-код">...</тег> — указание цвета текста по коду.

И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его втег и примените атрибут к нему.

Пример изменения цвета текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Изменение цвета текста</title>

</head>

<body>

<h5 style="color:#FF0000">Красный текст заголовка</h5>

Синий текст параграфа.

Зеленыйкурсив.

Красныйтекст.

</body>

</html>

Результат в браузере

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег style="background:имя цвета">...</тег> — указание цвета фона по имени.

<тег style="background:#HEX-код">...</тег> — указание цвета фона по коду.

Пример изменения цвета фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Изменение цвета фона</title>

</head>

<h5 style="background:#FFCCCC">Заголовок.</h5>

Параграф.

Жирныйтекст.

Обычныйтекст.

</body>

</html>

Результат в браузере

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

Теги выравнивания содержимого теста относительно страницы

Для того, чтобы выровнять содержимое HTML-элемента, необходимо атрибуту style присвоить одно из следующих значений:

text-align:center — Выравнивание каждой строки по центру элемента, например параграфа.
text-align:left — Каждая строка вплотную прижимается к левой стороне элемента (это значение по умолчанию).
text-align:right — Каждая строка прижимается к правой стороне.
text-align:justify — Выравнивание сразу по левой и правой сторонам элемента. Объясню. Обычно у элемента, например параграфа, одна сторона текста всегда ровная, а другая — «рваная», так как длины строк получаются немного разными. А когда мы используем значение text-align:justify, то каждая строка равномерно распределяется по ширине. В случае необходимости между словами браузер добавляет дополнительные пробелы, а первое и последнее слово строки всегда прижаты к соответствующим сторонам, поэтому получается ровный с обеих сторон блок.

Пример выравнивания содержимого тегов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Выравнивание содержимого тегов</title>

</head>

<body>

<h5 style="text-align:center">Заголовокпоцентру.</h5>

Текстпараграфаприжимаетсявправо.

Параграфпоцентру.

</body>

</html>

Результат в браузере

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

Теги, выделяюцие цитаты

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

Тег <BLOCKQUOTE> или выделяем длинные цитаты

Тег <BLOCKQUOTE>...</BLOCKQUOTE> используется в HTML для выделения так называемых «длинных цитат», например одного или нескольких параграфов. Этот тег является блочным и может содержать блочные теги, но не может содержать встроенные. Кроме этого он добавляет такие же как у параграфов внешние поля сверху и снизу, но еще добавляет и боковые поля, благодаря чему происходит визуальное выделение цитируемого текста.

Пример использования тега BLOCKQUOTE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Использование тега BLOCKQUOTE</title>

</head>

<body>

Для чего нужен тег BLOCKQUOTE? Вот что нам об этом говорит сайт Сеодон.ру:

Очень часто тег BLOCKQUOTE используют не по прямому назначению -

выделение цитируемого текста. А только ради боковых отступов, которые

он создает. В принципе, подобное применение этого тега не противоречит

синтаксису HTML, главное чтобы BLOCKQUOTE содержал блочные теги. Но все

же лучше подобным образом его не использовать, так как BLOCKQUOTE

предназначен именно для выделения длинных цитат.

</blockquote>

</body>

</html>

Результат в браузере

Тег <Q> или выделяем небольшие цитаты

А вот тег <Q>...</Q> используется для обозначения небольших цитат или слов в переносном смысле. Весь текст, который находится между тегов этого элемента, он ставит в кавычки. Кстати, <Q> — это самый обычный встроенный (уровня строки) тег, который может содержать только встроенные теги.

Пример выделения цитат

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Выделяем цитаты в тексте</title>

</head>

<body>

<q>Для изучения языка гораздо важнее свободная любознательность,

чем грозная необходимость.</q> Августин Аврелий.

<q>Чему бы ты ни учился, ты учишься для себя.</q> Петроний.

</body>

</html>

Результат в браузере

Тег или принудительный обрыв строки

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

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

Пример использования тега BR

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Тег BR, обрывстроки</title>

</head>

<body>

Цель творчества — самоотдача, А не шумиха, не успех.

Позорно, ничего не знача, Выть притчей на устах у всех.

Б. Пастернак.

</body>

</html>

Результат в браузере

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

Часто на сайтах можно увидеть, что используют лишь для того, чтобы создать несколько пустых строк. Да, если его указать подряд несколько раз ( ...), то можно сделать вертикальные отступы любых размеров. Но, хотя это и не противоречит синтаксису HTML, я не рекомендую вам так поступать, так как данный тег для этого не предназначен.

Спецсимволы HTML

Спецсимволы HTML — это условные кодовые обозначения, которые преобразуются браузером в различные текстовые знаки: буквы, цифры, знаки препинания, стрелки и так далее. Например, если мы напишем в HTML-странице вот такой код:

±

То браузер нам его не покажет, а отобразит в параграфе знак плюс-минус:

Спецсимволы HTML можно указывать двумя способами:

Код символа — В этом случае ставится амперсанд (&), за ним решетка (#), потом идут цифры и в конце ставится точка с запятой (;), как показано выше.
Мнемоника — Сначала также идет амперсанд, потом пишется ключевое слово и тоже в конце точка с запятой, например: ©

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

Обратите особое внимание на то, что спецсимволы-мнемоники чувствительны к регистру, то есть © и &COPY; — не одно и то же.

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

Для чего нужны спецсимволы HTML?

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

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

Довольно часто спецсимволы используются для отображения на странице HTML-разметки. И правда, ведь если мы захотим отобразить на странице какой-нибудь тег, то просто так у нас это сделать не получится, так как браузер его скроет, посчитав за разметку. Поэтому придется использовать спецсимволы заменяющие угловые скобки тегов (< и >) и кавычки атрибутов (")

Пример использования спецсимволов HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Использование спецсимволов HTML</title>

</head>

<body>

- Тег для создания параграфов.

® - Знак зарегистрированной торговой марки.

При написании статьи лучший вариант — это использование

между словами длинного тире и дефиса, а не только дефиса во всех случаях.

</body>

</html>

Результат в браузере

Создание горизонтальных линий в HTML

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

Как нарисовать горизонтальную линию?

Для создания горизонтальных линий в HTML существует специальный тег <HR>. Причем он является блочным тегом, то есть создает переносы строк до и после себя, поэтому линия всегда получается на отдельной строке. Соответственно и указывать его можно только внутри тегов, которые могут содержать блочные элементы, например <BODY> или <BLOCKQUOTE>. А вот сам <HR> не может иметь содержимого, так как у него попросту нет закрывающего тега, то есть он является пустым.

Пример рисования горизонтальных линий в HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Рисуем горизонтальные линии</title>

</head>

<body>

<hr>

Параграф.

<hr>

Параграф.

</body>

</html>

Результат в браузере

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

Как изменить цвет, толщину и ширину горизонтальных линий?

В старых версиях HTML у тега <HR> существовали специальные атрибуты, с помощью которых можно было изменить цвет, толщину и ширину горизонтальных линий. Это color, size и width, соответственно. Но в новых версиях от них отказались в пользу Каскадных таблиц стилей (CSS), поэтому, как вы уже догадались, мы опять будем использовать наш любимый атрибут style. Общий синтаксис такой:

<hr style="background:цвет"> — цвет линии (вернее ее фон).

<hr style="height:размер"> — толщина линии.

<hr style="width:размер"> — ширина линии.

<hr style="background:цвет; height:размер; width:размер"> — а можно указать сразу все параметры, только не забываем про точку с запятой (;).

Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#).

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

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

Только ширину линии можно указывать в процентах. Процентные размеры всегда зависят и высчитываются исходя из размеров родительского элемента-контейнера, внутри которого расположен тег <HR>. В этом случае размеры родителя берутся за 100%. Например, если мы разместим тег <hr style="width:50%"> внутри элемента <BLOCKQUOTE>, то как бы мы ни изменяли размеры окна браузера или разрешение монитора — ширина линии всегда будет составлять половину ширины блока <BLOCKQUOTE>.

Пример изменения цвета, толщины и ширины горизонтальных линий.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Меняем цвет, толщину и ширину горизонтальных линий.</title>

</head>

<body>

</body>

</html>

Результат в браузере

Изменение положения горизонтальных линий

Когда изменяешь ширину горизонтальной линии, то становится хорошо видно, что браузеры всегда располагают ее по центру. Если вы хотите изменить ее положение, то просто используйте внутри <HR> атрибут style со значениями для выравнивания содержимого тегов.

Как убрать рамку вокруг линии?

По умолчанию браузеры рисуют вокруг линий рамки, которые создают эффект трехмерности. Так вот, когда мы не увеличиваем толщину горизонтальных линий, браузеры нам показывают только эти рамки, так как толщина самой линии составляет 0px.

Чтобы убрать рамку вокруг линии, которая чаще только портит внешний вид, мы снова применим атрибут style. А пишется это так:

Группирование элементов

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

Тег <DIV> или сгруппированный блок

До сих пор все изученные нами элементы HTML могли содержать только один из типов тегов — либо встроенные (inline, уровня строки), либо блочные (block). А теперь позвольте вам представить тег <DIV>...</DIV>. Сам он является блочным, но вот содержать может как встроенные, так и блочные теги, ну и конечно же обычный текст. Но это еще не все, в отличие от других блочных тегов — <DIV> не добавляет абсолютно никаких внешних полей (отступов) пустого пространства вокруг себя, как это делает, например, тег .

Пример использования тега DIV

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Использование тега DIV</title>

</head>

<body>

<div style="color:#FF00CC; background:#00CCFF; font-size:150%; text-align:center">Менюсайта</div>

<div style="color:#CCFF00; background:#FF00CC; font-size:150%; text-align:center">Дополнительные разделы</div>

Параграф.

Параграф.

</div>

</body>

</html>

Результат в браузере

Тег или сгруппированная строка

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

Пример использования тега SPAN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Использование тега SPAN</title>

</head>

<body>

Обычный текст.

Жирный.

Курсив.

</body>

</html>

Результат в браузере

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

Комментарии в HTML

Xтобы проще ориентироваться в HTML-коде, придумали специальные комментарии. Выглядит это так:

Любая информация заключенная в HTML-комментарии не будет обработана браузером и выведена на страницу. Чаще всего их применяют для пояснения того или иного участка кода или для скрытия части самого кода от браузеров, например, при тестировании макета страницы.

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

Пример использования комментариев в HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Комментарии в HTML</title>

</head>

<div>

Параграф.

<!-- Параграф.

Параграф.

Параграф. -->

</div>

</body>

</html>

Ссылки и их разновидности

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

Тег <A> или как сделать ссылки в HTML?

Ссылки создаются при помощи тега <A>...</A>, он относится к уже хорошо известному вам типу — это обычный встроенный (уровня строки) элемент, который может содержать тоже только встроенные теги. Но, внимание, он не может содержать другие теги <A>, то есть нельзя одну ссылку располагать внутри другой.

Чтобы ссылка заработала, в теге <A> необходимо указать адрес документа, к которому она ведет. Это делается с помощью атрибута href, значением которого является URL — уникальный адрес каждого документа в интернете (как адрес вашей квартиры). Подобный адрес вы всегда видите в адресной строке браузера, например: http://seodon.ru/. Обратите внимание, что в интернет-адресах используются прямые слеши (/), а не обратные (\), как в Windows. Чтобы ссылку было видно на странице — внутри элемента <A> надо написать какой-нибудь текст.

Если вы хотите, чтобы при наведении курсора мыши на ссылку появлялась «всплывающая» подсказка, то используйте уже известный вам атрибут title.

Пример создания ссылок в HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Ссылкив HTML</title>

</head>

<body>

<a href="http://seodon.ru/" title="Сеодон.ру">Главнаястраница</a>

<div>

<a href="http://seodon.ru/html/">Учебник HTML</a>

</div>

</body>

</html>

Результат в браузере

Абсолютные и относительные ссылки

В зависимости от вида адреса, указанного в атрибуте href, ссылки могут быть абсолютными и относительными. Как правило, для связи HTML-документов внутри сайта, используются относительные ссылки, а для ссылок на другие ресурсы — абсолютные.

Абсолютные ссылки — это ссылки, которые содержат полный адрес страницы: имя протокола (http), имя домена-сайта (seodon.ru, www.seodon.ru) и месторасположение самого файла или папки на сайте. Плюсы таких ссылок в том, что они работают везде, где бы их ни указали (любой сайт или компьютер).

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

Как правило, все файлы сайта располагают в разных тематических папках. Как называть эти папки, впрочем, как и сами файлы, дело ваше, но обычно в названии присутствует суть содержимого. Например, папки с изображениями называют «image», «img», «pictures», «kartinki» и т.д. Самое главное всегда пишите названия папок и файлов (в том числе и HTML-страниц) строчными буквами.

Чтобы нам разобраться с относительными ссылками, давайте сделаем следующее: создайте папку «mysite», внутри нее создайте папки «1» и «2», а в них еще по одной папке, соответственно «1-1» и «2-2». В каждой папке создайте по одной HTML-странице, их названия должны соответствовать названиям папок, в которых они расположены: 1.html, 1-1.html и т.д., а в корневой папке сделайте два файла mysite1.html и mysite2.html

Файловая структура для обучения созданию ссылок.

Если исходный файл и тот на который ссылаются, находятся в одной папке, то в атрибуте href тега <A> указывается только имя файла.

Ссылка из файла mysite1.html на mysite2.html

<a href="mysite2.html">mysite2.html</a>

Если страница на которую ссылаются вложена в одну или несколько папок относительно исходной, то в ссылке перед именем файла указываются эти папки, через прямой слеш (/).

Ссылки из mysite1.html на 1.html и 2-2.html

Если оба файла находятся в разных папках, то сначала перед адресом указывается одна или несколько команд выхода из папки — «../» (две точки и прямой слеш), чтобы выйти в общую для обоих файлов папку. А затем все так же, как в предыдущем примере.

Ссылки из 1-1.html на 1.html и 2.html

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

Ссылки из любого файла на 2.html (только для сервера)

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

Ссылки посещенные, непосещенные, активные и под курсором

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

Ссылки, которые пользователь еще ни разу не активировал называются непосещенными, которые хоть раз активировались — посещенными. Ссылки в кратковременный момент нажатия называются активными, а ссылки при наведении на них курсора мыши так и называются — ссылки при наведении курсора мыши. Для чего я вам все это рассказал? Cкоро узнаете.

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

По умолчанию все браузеры открывают новые страницы в том же окне, но при помощи атрибута target тега <A> можно сделать так, чтобы документы открывались в новом окне. Но есть одно «НО». Этого атрибута нет в текущей версии HTML 4.01 и нет ему аналога в CSS. А все потому, что разработчики языка решили, что открытие новых окон без желания пользователя — это плохо, а если он захочет, то сможет сам открыть страницу в новом окне, кликнув по ссылке правой кнопкой мышки и выбрав нужный пункт меню.

Пример открытия страницы в новом окне.

Именно так, _blank, со знаком подчеркивания в начале.

Изменение цветов в ссылке

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

В старых версиях HTML существовали специальные атрибуты тега <BODY>, позволяющие изменять цвет ссылок на HTML-странице, это link, alink и vlink, но в современном HTML их нет. Поэтому мы опять будем использовать стили (CSS0. Для этого нам надо будет в «шапку» страницы (<HEAD>) вставить тег <STYLE type="text/css">...</STYLE>, а внутри него указать один или несколько следующих стилей:

a:link {color:цвет} /* цвет непосещенной ссылки */

a:visited {color:цвет} /* цвет посещенной ссылки */

a:hover {color:цвет} /* цвет ссылки при наведении курсора мыши */

a:active {color:цвет} /* цвет активной ссылки (в момент нажатия) */

</style>

Тег <STYLE> используется для внутренних стилей, которые будут действовать в пределах всей страницы. А его атрибут type как раз и говорит браузеру о том, что внутри находятся стили (CSS), а не обычный текст.

Что касается самих стилей, то сначала там идет имя тега, к которому применяется стиль (в нашем случае это <A>), затем после двоеточия указывается к какой именно ссылке применяется стиль (link, visited, hover, active). Ну а то, что находится в фигурных скобках { } вам должно быть уже хорошо известно по предыдущим урокам. И не забывайте про совет: лучше всегда задавать цвет в HEX-формате со знаком решетка (#) впереди, а не писать имя цвета.

Пример изменения цвета ссылок в HTML-странице

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Изменение цвета ссылок на странице</title>

a:link {color:#006699}

a:visited {color:#990066}

a:hover {color:#669900}

a:active {color:#FF0000}

</style>

</head>

<body>

<a href="http://seodon.ru/">Каксоздатьсайт</a>

<a href="http://spravka.seodon.ru/">Справочникипо HTML и CSS</a>

</body>

</html>

Результат в браузере

Изменяем цвет отдельных ссылок

Иногда вам может понадобиться, чтобы цвет определенной ссылки отличался от остальных. Тогда укажите внутри тега <A> атрибут style="color:цвет" и задайте нужный цвет.

Пример использования тегов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Изменение цвета ссылок на странице</title>

a:link {color:#006699}

a:visited {color:#990066}

a:hover {color:#669900}

a:active {color:#FF0000}

</style>

</head>

<body>

<a href="http://seodon.ru/">Сайт Seodon.ru</a>

Здесь вы можете найти

справочник по тегам HTML

</a>

</body>

</html>

Результат в браузере

Ссылки на электронную почту

Каждый уважающий себя сайт должен иметь обратную связь со своими посетителями. Один из способов этой связи — написать адрес электронной почты (e-mail), но гораздо лучше будет указать его в виде ссылки, при нажатии на которую автоматически откроется почтовая программа. Чтобы это сделать, достаточно создать в теге <A> такую конструкцию:

<a href="mailto:адрес почты">адрес почты</a>

Пример создания ссылки на электронную почту

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Ссылка на почтовый ящик</title>

</head>

<body>

<a href="mailto:mymail@site.bom" title="Почтадлясвязи">mymail@site.bom</a>

</body>

</html>

Результат в браузере

Как видите все очень просто, только не забывайте о том, что <A> является встроенным (inline, уровня строки) элементом и располагать его можно только внутри тегов, которые могут содержать этот тип.

Пример создания ссылки на несколько ящиков электронной почты

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Ссылка несколько почтовых ящиков</title>

</head>

<body>

<a href="mailto:mymail@site.bom?cc=mymail2@site.bom,mymail3@site.bom">mymail@site.bom</a>

</body>

</html>

Создаем закладки. Якоря

До сих пор мы с вами рассматривали ссылки, которые просто вели на другие документы в интернете. А в этом уроке вы научитесь создавать якоря. Якорь (анкор) в HTML — это специальная закладка, которая используется для перемещения пользователя к определенному участку страницы при нажатии на ссылку.

Для создания якоря вам необходимо в месте, к которому будет переход по ссылке, указать <A name="имя"></A>, где имя якоря — любое слово на английском языке. Как видите, у закладки совершенно не обязательно писать что-то между тегами, ведь она используется только в роли служебной метки. Самое главное не забывайте, что <A> — это встроенный (inline) тег и ставить его можно только внутри HTML-элементов, которые могут содержать данный тип. Впрочем таких элементов очень много.

А вот чтобы сделать ссылку на якорь надо написать <A href="#имя">любой текст</A>, именно так, со знаком решетка (#) впереди.

Обратите внимание, что имя якоря в обоих местах надо указывать в одном регистре, то есть нельзя написать в якоре имя, а в ссылке на него #ИМЯ. Кроме этого, на каждой HTML-странице не может быть два якоря с одинаковыми именами, иначе браузер не поймет к какому из них делать переход. А вот ссылок на один и тот же якорь может быть сколько угодно!

Пример создания якорей в HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Создание якорей (закладок)</title>

</head>

<body>

<a name="ontop"></a>Параграф.

Параграф. <a href="#ontop">В начало</a>

</body>

</html>

Результат в браузере

Ссылка на якорь другой HTML-страницы

Для создания ссылки из одной HTML-страницы на якоря других страниц необходимо в атрибуте href в конце адреса указать #имя нужного якоря.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Создание ссылки на якорь другой страницы</title>

</head>

<body>

О разведении кактусов вы можете прочитать в разделе

<a href="flowers.html#cactus">Кактусы</a>

статьи и цветоводстве.

</body>

</html>

<<< < Предыдущая 1 2 3 4 56 / 106 7 8 9 10 > Следующая >>>

Соседние файлы в папке Web-разработки

#
25.03.2016171.98 Кб73Практическая работа 1.docx
#
25.03.201633.02 Кб94Практическая работа 2.1.docx
#
25.03.201619.45 Кб98Практическая работа 3.docx
#
25.03.201622.2 Кб70Спавочник тегов.docx
#
25.03.20160 б68Текстовый документ.htm
#
25.03.20164.77 Mб130Тема 2.docx
#
25.03.20162.61 Mб94Тема 3.docx
#
25.03.201624.99 Кб83Тема I.docx