Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

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

Оснащения врачебно-сестринской бригады.

История развития методов оптимизации: теорема Куна-Таккера, метод Лагранжа, роль выпуклости в оптимизации...

Интересное:

Уполаживание и террасирование склонов: Если глубина оврага более 5 м необходимо устройство берм. Варианты использования оврагов для градостроительных целей...

Национальное богатство страны и его составляющие: для оценки элементов национального богатства используются...

Подходы к решению темы фильма: Существует три основных типа исторического фильма, имеющих между собой много общего...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Домашняя страница Сергея Сергеева

2020-06-02

129

0.00 из 5.00 0 оценок

Заказать работу

Стр 1 из 2Следующая ⇒

Домашняя страница Сергея Сергеева

Сергей Сергеев - писатель-юморист, автор 20 рассказов.

В жизни большой любитель собак и компьютерных игр. </BODY>

</HTML>

Закройте документ, подтвердите его сохранение. А в окне браузера выполните команду меню

Вид/Обновить.

Слова, заключенные в угловые скобки, являются служебными словами языка HTML. Их принято называть тегами (tags). Теги никогда не отображаются при просмотре страницы — они служат для управления оформлением.

Существуют разные транскрипции слова browser, означающего просто программу просмотра веб-страниц.

Тег <HTML>, который вы видите в первой строке, означает, что наш текст действительно написан на языке HTML. Большинство тегов языка HTML — парные. Они обязательно требует присутствия закрывающего тега. Например, в этом примере в первой строке стоит открывающий тег <HTML>,а в последней—закрывающий тег </HTML>. Все,что расположено между ними,считается HTML-документом.

В языке HTML совершенно не имеет значения, строчными или прописными буквами записаны теги. Можно написать </HTML> или <html> — для броузера это одно и то же. Однако принято писать теги HTML прописными буквами, чтобы они лучше выделялись на фоне основного текста.

В рассмотренном примере вы видите еще один тег — <BODY>. Все, что расположено между ним и его закрывающим тегом (</BODY>), считается “телом” документа и отображается на экране. HTML,-документы, помимо “тела”, обычно содержат еще и заголовок, в котором заключена различная служебная информация.

Заголовок располагается между тегами <HEAD> и </HEAD>. Например, добавьте тег с заголовком <ТIТLЕ>Домашняя страница Сергея Сергеева </TITLE> внутри тега <HEAD> и </HEAD>. Просмотрите результат.

Обратите внимание на то, что в заголовке окна браузера также появились слова “Домашняя страница Сергея Сергеева”. Это произошло потому, что в разделе заголовка <HEAD> мы поместили этот текст между тегами <TITLE> и </TITLE>

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

Принудительно поставьте теги перехода на следующую строку в конце каждой строкитекста. Сохраните и перезапустите страницу.

Иногда браузеры или другие программы обработки требуют, чтобы в начале HTML-документа обязательно стоял служебный тег <!DOCTYPE>, в атрибутах которого должна быть указана версия языка и некоторая другая информация. Добавьте строчку в начало документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Сохраните и перезапустите страницу.

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

Параметры фона

Параметр		Функция	Примеры
BGCOLOR		Определение цвета фона	Задание белого фона
			<BODY BGCOLOR="white">
			<BODY BGCOLOR="#FFFFFF">
			<BODY BGCOLOR="255,255,255">
BACKGROUND		Указание фонового рисунка	<BODY BACKGROUND= "images/bg.gif">
BGPROPERTIES		Изменение свойств фона	<BODY BACKGROUND= "bg.gif"
		(например, фиксирование	BGPROPERTIES= "fixed">
		фонового рисунка)	прокручивая содержание документа,
		Поддерживается MS IE	фоновое изображение остается в
			зафиксированном виде.
Описанные	параметры не являются обязательными, однако использование BGCOLOR

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

Параметры границ документа

(значения задаются в пикселах)

Параметр	Функция	Примеры
TOPMARGIN	Определяет отступ от верхнего	<BODY TOPMARGIN="5"
	края документа.	BOTTOMMARGIN="5"
BOTTOMMARGIN	Определяет отступ от нижнего	LEFTMARGIN="10"
	края документа.	RIGHTMARGIM="10">
LEFTMARGIN	Определяет отступ от левого
	края документа.
RIGHTMARGIN	Определяет отступ от правого
	края документа.
MARGINWIDTH	Определяет горизонтальный	<BODY MARGINWIDTH="10"
	отступ	MARGINHEIGHT="5">
MARGINHEIGHT	Определяет вертикальный
	отступ

Первые четыре употребляются только в MS IE, последние два Netscape.

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

<BODY TOPMARGIN="5" BOTTOMMARGIN="5" LEFTMARGIN="10" RIGHTMARGIN="10" MARGINMARGINHEIGHT="5">

Параметр SCROLL, доступный только в MS IE устанавливает наличие или отсутствие полос прокрутки окна браузера.

тег < МЕТА >

<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1251">

Тег < МЕТА> пишется в области тега <HEAD> </HEAD> после заголовка <TITLE> и используется для ввода различной дополнительной информации: ключевых слов, описания веб-страницы, указания ее автора, программы-генератора и т. п. Но в данном случае этот тег используется для определения кодировки символов. Поскольку в тексте используются русские буквы, то есть, символы с ASCII-кодами, большими 128, необходимо указать, в какой кодировке эти символы нужно отображать. Большинство браузеров обычно это делают автоматически, и кроме того, имеют встроенную возможность выбора кодировки. Как правило, она находится в меню View (Вид). Однако иногда бывает полезно указать кодировку в явном виде.

В данном случае мы имеем дело с файлом в кодировке Windows, поэтому в качестве значение свойства charset указано " windows-1251 ". Кстати, если вы работаете в другой кодировке, например, KOI8, вам следует ввести другое значение — " koi8-r ", иначе эта страничка будет нечитаемой.

К сожалению, для явного указания кодировки приходится использовать столь длинный тег. Правда, многие браузеры сейчас начинают понимать и просто указание “без лишних слов”: <МЕТА CHARSET="windows-1251">. Однако этот метод не универсален,поэтому для лучшейсовместимости стоит всегда писать длинную строку, приведенную выше.

Самостоятельно выполните следующее:

· На основе изученного материала, самостоятельно измените созданную страницу так: o Заголовок, отображаемый в окне браузера, в котором отобразить ФИО

o Примените свой цвет фона

o Примените фоновую картинку (для этого предварительно, скопируйте любой графический файл на вашем компьютере в свою текущую папку)

o Отступы от краев станицы не менее 10 пикселей

o Возможность прокрутки страницы с фиксацией фонового рисунка

o В тексте страницы необходимо указать личные данные (ФИО, группа, специальность, дата рождения), уровень знакомства с основами технологии HTML, хобби.

o разбейте текст страницы на абзацы.

Оформление заголовков

Для того чтобы выделять заголовки, в HTML существуют так называемые теги заголовков. Это <Н1>, <Н2>, <НЗ>, <Н4>, <Н5> и <Н6> (и из закрывающие теги).Для самых крупныхзаголовков можно использовав тег <Н1>, для заголовков помельче — <Н2> и так далее. Например, так:

<Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВR> сказка</Н2>

Однако обратите внимание на то, что для выравнивания по центру нужно приложить дополнительные усилия, например поместить соответствующий тег внутрь тега заголовка (то есть в данном случае между тегами <Н2> и </Н2>):

<Н2><Р ALING="сеntег">ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВR> сказка</Р></Н2> Если этого не сделать, то заголовок будет выровнен по левому краю.

Самостоятельно отформатируйте заголовки рассказа тем <Н2>,названия литературныхэлементов - <H3>, эпиграфы - <H4>, а для заголовка всей странички — тег <Н1>. Примените разные цвета к заголовкам.

Горизонтальная линейка

Для создания горизонтальной черты достаточно в нужном месте поставить тег <HR> (он не имеет закрывающего тега). Однако в этом случае горизонтальная черта займет всю ширину страницы. Для определения ширины горизонтальной черты можно задать атрибут WIDTH=, например, так:

<HR WIDTH="75%">

В этом случае горизонтальная линия займет 75% от полной ширины экранной страницы. Можно также определять ширину линии и в пикселах (экранных точках). Например, запись <HR определит ширину линии в75пикселов(это получится очень короткая линия).Еслихотите, можете определить также толщину линии, установив атрибут SIZE=.

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

Управление шрифтом

Чтобы изменить размер шрифта, можно использовать тег  с атрибутом SIZE=. Вообще говоря, WWW-консорциум не особенно рекомендует использовать тег  в HTML 4.0.,

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

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

Возникает вопрос: а каков размер “обычного” шрифта? В языке HTML для тега  были определены семь основных размеров шрифта, измеряемых не в пунктах, а в некоторых условных единицах — от 1 до 7. Как правило, обычный шрифт имеет размер “З”, если не определено иное с помощью тега <BASEFONT> (например, так: <BASEFONT SIZE="6">). В последнее время такое определение размеров не рекомендуется, поскольку с помощью CSS можно определить размеры шрифта в любых привычных единицах.

Необходимо различать записи . В первом случае указывается относительный размер шрифта, а во втором — абсолютный. Соответственно, для временного уменьшения размера шрифта можно использовать запись . Можно использо- вать также значения "+2", "-2", "+3" и т. д. Кстати, для увеличения или уменьшения шрифта на одну единицу можно использовать также теги <BIG> и  (они используются с закрывающими тегами).

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

<Н2><Р АLIGN="center">ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВR> сказка</Р></Н2>

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

<В>Сергей Сергеев</В> - писатель-авангардист, автор 20 рассказов.

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

Иногда требуется также зачеркнуть отдельные слова в тексте (например, при снижении цен на товары обычно указывают старую цену в зачеркнутом виде). Для этого служит тег <STRIKE>:

Старая цена: <STRIKE>168 рублей </STRIKE> Новая цена: 102 рубля</FONТ>.

Самостоятельно оформите текст эпиграфов курсивом,а текст,помещенный в скобки,подчеркните.

Цветовое оформление

Для этого проще всего установить соответствующие атрибуты тега <BODY>. Атрибут ТЕХТ= определяет цвет текста на страничке,а атрибут BGCOLOR= — цвет фона.

Названия цветов можно вводить по названиям, например: " black " (черный), " white " (белый), " yellow " (желтый), " green " (зеленый), " fuchsia " (сиреневый) и т. д. Существует довольно много названий цветов, которые можно использовать в HTML, однако можно получить любой из цветов, введя его шестнадцатеричный номер. Причем это не так сложно, как может показаться.

Шестнадцатеричный номер цвета должен состоять из шести цифр. Первые две означают интенсивность красной составляющей, вторые две — зеленой и последние две — синей. Таким образом, красный цвет обозначается как FF0000, зеленый — 00FF00 и синий — 0000FF. Цвет с номером 000000 — черный (нет ни одной составляющей), a FFFFFF — белый. Если это понятно, то можно поэкспериментировать с интенсивностью каждой составляющей отдельно. Если FF0000 — это красный цвет, то 880000 — уже темно-красный, а 440000 — красно-коричневый; 220000 похож на коричневый, а 110000 — черный с красноватым оттенком. Точно так же 00FF00 — это яркий зеленый, 00АА00 — приятный лиственно-зеленый, 007700 — темно-зеленый, 003300 — очень темный зеленый и 001100 — черный с зеленоватым оттенком. Немного поэкспериментировав с интенсивностью каждой составляющей, можно попробовать смешивать цвета. Таким образом, можно научиться быстро вводить цвет в цифровом виде.

Перед шестнадцатеричным номером цвета необходимо поставить знак #. Например, для нашей странички цвета можно определить так:

<BODY BGCOLOR="#BABAAO" TEXT="#CC3300">

Это даст при просмотре одинаковый коричневатый оттенок и цвета, и фона, однако цвет фона будет более тяготеть к серебряно-белому, а цвет текста — к темно коричневому. Давайте посмотрим, что у нас получилось.

Самостоятельно примените свой цвет фона и текста кweb-странице.

Примечание. Тег <BODY> в кодеhtml-страницы пишется только один раз,а его параметры

перечисляются по порядку.

Гиперссылки.

Гиперссылки —контекстные связи между расположенными в Интернете материалами.Ониявляются основой построения World Wide Web.

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

В текст веб-страницы можно вставлять гиперссылки трех типов:

• ссылки в другие места той же страницы;

• ссылки на другие страницы этого же сайта или сервера;

• ссылки на страницы, расположенные на любом другом сервере в Интернете.

Локальные гиперссылки

Откройте web-страницу, созданную вами по рис.1. На нашей страничке,есть трираздела: вступительный текст, сказка и рассказ. Конечно, поскольку это только пример, то все тексты небольшие и, скорее всего, на экране эта страничка видна почти целиком. Однако представьте себе, что и вступительный текст, и рассказы занимают довольно большой объем (например, два экрана). В этом случае некорректно вынуждать пользователя перемещаться по странице только с помощью полос прокрутки. Кроме того, он может и не заметить, что помимо вступительного текста, на страничке есть еще что-то, если не дочитает текст до конца. В этом случае хорошим тоном будет прямо наверху странички поставить гиперссылки на оба рассказа.

Чтобы это сделать, надо сначала определить места, где эти рассказы начинаются, как “якоря” (места, к которым можно будет быстро переместиться). Для этого используют тег <А>. Это можно сделать, например, так:

<A NAME="skazka"> Иван- царевич и серый заяц</А>

Самостоятельно, этот измените тег в кодеhtml-страницы

<Н2><Р ALING="сеntег">ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВR> сказка</Р></Н2> На новый

<A NAME="skazka"> <Н2><Р ALING="сеntег">ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВR> сказка</Р></Н2></A>

В данном случае мы определяем атрибут NAME= — имя якоря. По этому имени мы и будем на него ссылаться. Установим закладку в месте, где начинается первый рассказ.

Для установки гиперссылки также используется тег <А>, но с установленным атрибутом HREF=. Значение этого атрибута определяет,что отобразится на экране,если пользователь щелкнеткнопкой мыши на гиперссылке. Чтобы сослаться на якорь, нужно просто указать в качестве значения HREF= имя этого якоря,перед которым расположен знак #.

Вверху страницы, сразу после заголовка, введите следующий тег:

<A HREF="#skazka"> Сказка про Ивана-царевича и серого зайца</А>

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

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

Внешние гиперссылки

Однако гиперссылки можно устанавливать не только на файлы, содержащиеся в своем

каталоге на сервере, но и на любые другие Интернет-ресурсы. В этом случае в качестве значения атрибута HREF= необходимо указать полный URL-aдpec ресурса, как показано ниже. Рассмотрим такой пример. Допустим, мы хотим сделать страничку, с которой можно легко попадать на излюбленные поисковые системы. Естественно, для этого необходимо указывать полные URL-адреса этих сайтов, например, вот так:

Поисковая машина <А HREF="http://www.altavista.com">"Altavista" </А>

Дополнительные параметры тега <А>

Помимо HREF, тег <А> может содержать еще и другие параметры, например, STYLE, CLASS, NAME, TITLE И TARGET. Первые два параметра используются для создания стилевых шаблоновгиперссылки, третий параметр предназначен для указания имени внутренней ссылки.

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

< А HREF="http://www.site.ru/" TITLE ="Описание документа"> Ссылка на документа /А>

Что касается параметра TARGET, то он определяет назначение перехода по ссылке. Например, нажав на гиперссылку, можно открыть документ в текущем или в отдельном (новом) окне. Это в ряде случаев является принципиальным моментом. Например, если вы не хотите уводить посетителя со своей Web-страницы, то стоит делать ссылки со следующей структурой:

<А HREF="http://www.site.ru/page.html" TARGET="_blank"> Ссылка на документ</А>

Если же TARGET=_SELF, то объект открывается в том же окне, что и документ, содержащий гиперссылку. Последний режим используется по умолчанию, так что указывать его специально не обязательно.

Основные параметры тега <А> приведены ниже

Параметр	Функция
HREF	Указание адреса перехода по гиперссылке
TARGET	Определение места назначения перехода (текущее/новое окно)
STYLE	Задание стилевого шаблона
CLASS	Указание класса стилевого шаблона
NAME	Именной идентификатор внутренней гиперссылки

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

наведении на ссылки и разное определение перехода. Вставьте внешнюю гиперссылку на эту веб-страницу из главной веб-страницы.

Домашняя страница Сергея Сергеева

12 Следующая ⇒

Поделиться с друзьями:

Своеобразие русской архитектуры: Основной материал – дерево – быстрота постройки, но недолговечность и необходимость деления...

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

История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...

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