2018-02-14
250Справочник
Основы языка HTML
Документ HTML состоит из инструкций, которые называются тегами (или тэгами, тагами, кому как нравится. По-английски - tag) и собственно текста, который вы видите на экране. Изображения тоже считаются текстом, как ни странно.
Ваш браузер считывает файл с сервера и начинает выполнять эти теги по порядку, даже не дожидаясь полной загрузки документа, сразу же создавая изображение на экране и внося по ходу дела коррективы. Наверняка обратили внимание, что частенько страница появляется кусками. Иногда появляется текст, потом - бах, возник фоновый рисунок, затем вылезла какая-то картинка. Но бывает и так, что в строке состояния браузера видно, что все загружено, а на экране ничего нет. Минута проходит, другая... Просто автор либо слишком намудрил что-то, либо некорректно составил документ, и браузер, скрипя винчестером, пытается его переварить.
Теги заключаются между '<' и '>'. Вот так: <tag>. Все, что написано между '<' и '>' считается тегом и браузер будет пытаться его как-то использовать. Если там ошибка - ничего страшного не произойдет, и неправильный тег будет пропущен. Писать можно хоть большими хоть маленькими буквами, хоть вперемешку - никто вам слова дурного не скажет.
Для большинства тегов, когда исчезает в них необходимость, нужно использовать закрывающий тег. Он выглядит так: </tag>. Общий вид получается следующий:
<tag> что-то здесь написано, наверное что-то интересное. </tag>
Можно написать открывающий тег на одной строчке, текст на другой, а закрывающий еще через десяток после инструкции, да и внутри тега, если он состоит из нескольких слов, делать то же самое. Дело в том, что браузеры воспринимают пробелы, переходы строк и знаки табуляции необычно на первый взгляд. И если Вы хотите, чтобы Вас правильно поняли, нужно действовать несколько по-другому, но об этом позже.
Пара тегов (открывающий+закрывающий) называется контейнер.
Можно вкладывать один тег в другой и даже разрешать им пересекаться. Например, так:
<tag1>...<tag2>...<tag3>...</tag2>...</tag3>...</tag1>
Но не все браузеры и не всегда сделают то, что вы хотите, так как нужно. В основном это зависит от особенностей браузера. Поэтому если нужно спользовать конструкцию типа
<tag1>...<tag2>...</tag1>...</tag2>
лучше подстраховаться и записать ее как
<tag1>...<tag2>...</tag2></tag1><tag2>...</tag2>
В этом случае любой зашедший к вам сможет увидеть страничку неискаженной и, возможно, захочет зайти еще раз. Наверняка вам случалось получать сообщения от браузера "Какая-то ошибка на странице. Отладить?".
Это как раз тот случай, когда создатель сделал страничку, которую правильно видит его браузер, а про остальных не подумал.
Ну и, естественно, если вы вкладываете друг в друга одинаковые теги, что бывает часто, особенно если ваш текст написан разноцветными буквами разного размера, тогда первым закрывается тот, который был открыт последним.
Многие теги имеют дополнительные параметры, так называемые атрибуты. К примеру, можно сказать " У меня есть компьютер ", а можно сказать и " У меня есть компьютер Pentium II, ОЗУ 256, HDD 16,4 VIDEO 32 " Использование их - дело добровольное. Но, как правило, атрибуты помогают браузеру быстрее вывести нужную информацию на экран. Записываются атрибуты внутри тех же скобок, что и сам тег и отделяются друг от друга пробелами (или переходом на другую строчку, или знаком табуляции).
<tag
att1="***"
...
attX="***">
Ну вот. Это были общие сведения, которые вы и так наверняка знали, а если не знали, то подозревали; но без них никак.
Структура документа
Весь текст каждого HTML-документа размещается между тегами
<html> и </html>
Другими словами, файл должен начинаться тегом <html> и заканчиваться </html>
Имя файла должно иметь расширение .htm или .html. Есть еще множество других расширений, но, если специфика содержащихся в документе инструкций не требует какого-то определенного типа файлов, старайтесь использовать.htm - опять-таки для того, чтобы любой зашедший к Вам мог увидеть Вашу страничку, а имя файла набирайте маленькими латинскими буквами, и не больше восьми. То есть желательное имя файлов странички -
Name.htm
где вместо name пишете любую комбинацию из цифр и латинских букв.
Главный файл обзовите index.htm. В этом случае Вам проще будет давать адрес Вашей странички - index.htm можно опускать, на него идут по умолчанию.
Документ состоит из заголовка и тела. Заголовок помещается в начале документа между тегами <head> и </head>. Тело размещается между тегами <body> и </body>. Таким образом каждый html-документ имеет вид
<html>
<head>
Заголовок документа
</head>
<body>
Собственно сам документ
</body>
</html>
В любом месте можно вставить комментарий. Он размещается между наборами знаков <!-- и --> и действует на весь текст, расположенный между ними. Например вот так
<!-- Комментарии можно писать
в несколько строк.
<tag> - не сработает, так как
он тоже комментарий -->
Заголовок документа
Театр начинается с вешалки а документ - с заголовка. Заголовок - это как титульный лист в книге, где написано название, кто автор, кто издатель, краткое описание и т. д. Но, если хотите, заголовок можно опустить.
Я приведу вам шаблон, а вы подгоняйте его под свой файл. Зеленый цвет - то что нужно писать, другой - мои пояснения. Там где есть кавычки - они нужны (вместо кавычек с чистой совестью можете использовать апострофы). Просто заменяйте то, что написано по-русски на свой текст.
Если страничка состоит из нескольких файлов, пишите заголовок для каждого файла, и старайтесь писать разные заголовки, даже если все файлы на одну тему - ваш сайт будет занесен в большее количество категорий. Но это уже вопрос раскрутки, а речь сейчас не о ней.
<head>
<title>Cобственно название документа. </title>
Оно расположено вверху браузера.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
здесь вставляете вместо windows-1251ту кодировку в которой писали документ.
<meta name="Author" content="Alexey Godovnik ">
ну тут понятно - Ваше имя
<meta name="GENERATOR" content="САМСЕБЕПРОГРАММИСТ">
Какая программа помогала писать документ, например FRONTPAGE, я обычно опускаю этот раздел.
<meta name="Classification" content="классификация документа">
Например job работа bussiness финансы. Все пишется через пробел.
<meta name="Description" content="краткое описание ">
В поисковиках выводится сразу после названия. Обычно видно только первые 200-300 символов.
<meta name="KeyWords" content="ключевые слова для поисковых машин писать как можно больше через пробел без знаков препинания">
</head>
Теги, составляющие заголовок, можно писать в любом порядке. Можно, конечно и вообще не писать, это уж как вам захочется. Есть еще и другие элементы, которые можно включить в заголовок, но они редко используются.
Если строка между кавычками получилась очень длинная, не обращайте внимания.
Основные параметры
Внутри тега <body> обычно описываются основные параметры, действующие на весь документ, например цвет текста, ссылок, параметры шрифта и т. д. В дальнейшем для отдельных участков документа эти параметры можно изменять. Выглядит это так
<body tag1... tagX>
документ
</body>
Можно и не задавать эти параметры. В этом случае действуют параметры страницы, используемые браузером по умолчанию, до тех пор, пока не будут изменены. Но это увеличивает время вывода страницы на экран. Случалось видеть, как при загрузке страницы она то и дело исчезает и начинает создаваться заново? Это как раз тот самый случай.
Для задания параметров всего документа после заголовка вместо <body> пишете
<body
text="color"
bgcolor="color"
link="color"
vlink="color"
alink="color"
background="рисунок.gif">
Где
- text - цвет текста
- bgcolor - цвет фона - он используется до тех пор пока не загрузится фоновый рисунок
- link - цвет ссылок
- vlink - цвет ссылок, указывающих на уже посещенные места
- alinк - цвет ссылок при наведении на них указателя мышки
- background - задание фонового рисунка
- вместо "рисунок.gif" пишете имя своего файла. При указании в документе других файлов, например фонового рисунка, или ссылок на другой Ваш файл, пишите имя файла так, как оно есть - большие буквы, значит большие буквы, маленькие - маленькие.
Цвета
Хочется сделать свой документ красивым, и для этого хотя бы писать разноцветными буквами. При задании цвета лучше заключать его в кавычки или апострофы. Можно использовать общепринятые, например black, white, navy, yellow и др. Можно поэкспериментировать и создать свой, записав его в шестнадцатеричном виде. Вот так: "#цвет".
Как определить шестнадцатеричный код цвета? Код состоит из 6 знаков - каждый из которых - один из 0123456789ABCDEF-последовательности. В любом современном графическом редакторе при выборе цвета указывается его значение по шкалам RED GREEN BLUE - красный зеленый синий. Допустим, какой-то цвет имеет параметры 255-0-107. Определяем шестнадцатеричное значение для каждой составляющей, считаем только в целых числах. 255/16=15, 15-й символ в последовательности 0123456789ABCDEF - это F (первый символ имеет порядковый номер 0 а не 1), второй знак кода (255-(15*16))=15, тоже F. Считаем вторую составляющую: 0/255=0, символ 0, (0-(0*16))=0, тоже 0. Для третьей составляющей: 107/16=6, символ 6, (107-(6*16))=11, символ B. Таким образом получили код "#FF006B", можете попробовать его использовать, а я даже не знаю, что это за цвет.
Можно поступить и по-другому. Если у вас проблемы с переводом десятичных чисел в шестнадцатеричные, запустите в Windows встроенный калькулятор (он обычно располагается в подменю ПРОГРАММЫ/ СТАНДАРТНЫЕ). В меню ВИД калькулятора выберите ИНЖЕНЕРНЫЕ РАСЧЕТЫ. Включите опцию DEC (decimal) и введите нужное число. Теперь переключите DEC на HEX и получите это число в шестнадцатеричном виде.
Вывод текста
Просто п и шете свой текст в теле документа и все.
Если хотите вывести текст с какими-либо свойствами, этот кусочек текста заключаете между соответствующими тегами. Чуть ниже приводится описание основных параметров, которые можно изменять, а пока немного об особенностях вывода текста.
Текст рассматривается как одна длинная строка, как бы вы там ни писали его в БЛОКНОТе. Несколько пробелов выводятся как один, знаки табуляции и переходы на другую строку выводятся так же, как и пробелы, то есть если их несколько, будет нарисован один пробел и все. Браузер располагает этот текст на экране на ширину окна, автоматически переводя строки, при изменении размеров окна соответствующим образом изменяя видимый текст. С одной стороны это удобно, с другой - ведь надо отделить одну мысль от другой, обозначить начало абзаца и т. п.
Как же с этим бороться?
Заголовок - что-то, отличающееся от остального текста. Например, в этом документе использован заголовoк "вывод текста". Делается это так:
<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h3>Заголовок</h3>
<h4>Заголовок</h4>
<h5>Заголовок</h5>
<h6>Заголовок</h6>
Чтобы выровнять заголовки, напишите что-то вроде этого:
<h1 align='***'>заголовок</h1>
где вместо *** используется
left - выравнивание по левому краю,
right - по правому, и
center - по центру.
Если тип выравнивания не задан, используется предыдущий, если и его нет, тогда используемый браузером по умолчанию, обычно left.
Чтобы выровнять основной текст по центру, напишите
<center>
по левому краю
</center>
Если нужно выровнять по правому - попробуйте
<div align="right">
или
<p align="right">
Вместо right можете написать left или center.
Напоминаем, что параметры, заключенные в кавычки, можно с тем же успехом заключать в апострофы.
Чтобы насильно заставить браузер начать вывод текста с новой строки, используется тег <br>.Чтобы вставить пустую строку, напишите этот тег дважды, две пустых строки - трижды и т.д. Закрывающий тег не нужен. Если вы решили использовать <br> несколько раз, то первые два можно заменить на <p> - это хоть немного, но сократит размер файла;-)
- Чтобы вывести
- текст в таком
- формате, напишите
<ul>
<li>Чтобы вывести</li>
<li>текст в таком</li>
<li>формате, напишите</li>
</ul>
1. Такой текст
2. получится, если
3. написать так
<ol>
<li>Такой текст</li>
<li>получится, если</li>
<li>написать так</li>
</ol>
Чтобы текст выравнивался не по самому краю, а немного отступив от него, напишите
<blockquote>
Текст
</blockquote>
Этот тег можете вкладывать сам в себя до тех пор, пока не добьетесь нужного отступа.
<b> Так пишется жирными буквами </b>
<i> Курсивом пишется так </i>
<b><i> Кстати, курсив тоже бывает жирным </i></b>
<b><i><u> И даже подчеркнутым </u></i></b>
<blink>А этот мигает, но не у всех</blink>
<strike>Зачеркнутый</strike>
<sub>нижний индекс</sub>
<sup>верхний индекс</sup>
Изменить параметры шрифта можно с помощью тега <font>
<font color='***' size=X face='***'>
Здесь какой-нибудь текст
</font>
Как выбрать цвет, рассказано выше, size - размер, указываете вместо Х либо какое-то число от 1 до 10, либо изменение относительно текущего (он по умолчанию равен 3), например, size=+1, или +5 или -2, все в Ваших руках. face - тип шрифта, например 'Arial Cyr' или 'Times New Roman Cyr'. Если Вы нашли какой-то экзотический шрифт, его может не оказаться у ваших посетителей. В этом случае напишите
<font face='экзотический шрифт','часто используемый шрифт'>
Текст
</font>.
Теперь, если у кого-то и не окажется того хитрого шрифта, он увидит текст, написанный тем, что у него есть.
Угловые скобки и некоторые символы не выводятся браузерами просто так. Написать-то Вы их сможете, но увидеть на экране - нет. Нужно использовать так называемые escape-последовательности. Это делается следующим образом:
< выводит <
> выводит >
& выводит &
" выводит "
© выводит ©
® выводит ®
Есть еще одна хитрая штука. Называется непрерывный пробел ( ). Если есть какое-то словосочетание, и вы хотите, чтобы оно было написано в одной строчке, между этими словами и вставляется непрерывный пробел. Он запрещает браузеру переводить строки в этом месте. Например, чтобы
ПРИМЕР 1
не выглядел как
ПРИМЕР
1,
надо написать
ПРИМЕР 1.
Точка с запятой в escape-последовательности нужна, так же обязательно писать их маленькими буквами.
Если очень уж хочется писать как-нибудь попроще, можете заключить текст между <pre> и </pre>. Тогда он будет выводиться так, как вы напишете: 10 пробелов - так десять пробелов, переход на новую строку - так переход. Вот только если такой текст не поместится по ширине на экране, чтобы увидеть его, придется двигать ползунок на броузере.
С текстом вроде бы разобрались, пошли к рисункам?
Работа с изображениями
Зачем нужны картинки? Ну мало ли. Поместить свою фотографию, использовать как кнопку для ссылки на интересный ресурс, да просто для украшения, в конце концов. Чтобы вставить картинку в документ, напишите
<img
srс='путь'
lowsrc='путь2'
alt='описание'
align='***'
name='имя'
height='***'
border='***'>
Напоминаем, что пробел и переход строки в документе рассматриваются браузерами одинаково, и то, что тут растянуто на несколько строк, можно записать в одной. Здесь это сделано просто для наглядности.
Border - ширина рамки вокруг картинки (в пикселях)
Путь - путь к картинке.
Если картинка расположена в том же каталоге, что и файл, ее использующий, можно просто указать имя файла с картинкой.
Остальные параметры можно опускать, но имейте в виду, что браузер начинает выводить текст, не дожидаясь загрузки картинки, и если не указать ее размер, то когда она будет загружена, весь документ будет заново преобразовываться. Если картинок много, такие эффекты могут раздражать.
Если ширина и высота места, отведенного для изображения, зафиксирована, картинка появится строго в определенной области. Причем если указанные вами параметры отличаются от реальных, картинка будет, как правило, соответствующим образом сжата или растянута.
Lowsrc - если ваша картинка очень большая, или это анимация, укажите путь к картинке такой же высоты и ширины, но занимающей намного меньший объем памяти. Она будет видна до тех пор, пока не загрузится основная.
alt - пояснение, пока картинка не появилась, оно будет написано на ее месте, а после загрузки картинки, если навести на нее мышку, это пояснение выскочит возле указателя. Зачем? Если у вас ссылки сделаны в виде рисованных кнопочек, то без пояснений те люди не поймут, куда ведет ссылка и, естественно, никуда не пойдут.
Name картинке вы назначаете сами. Это нужно для управления выводом изображений. Например, если вы делаете фотоальбом или фотогалерею, то чтобы не размещать каждый рисунок в отдельном файле, транжиря место на сервере и свое время, можно использовать простенький скрипт, который позволит разместить весь фотоальбом в одном документе, да и работать это будет быстрее.
Align - выравнивание относительно той строки, где картинка появилась.
left - слева от текста,
right - справа,
top - текст будет слева и справа от верха картики, а потом только после нее,
middle - строка слева и справа по центру изображения,
bottom - строка слева и справа от низа - если никакое выравнивание не задано, используется bottom.
Как вы, вероятно, догадались, все атрибуты тега <img> можно задавать в произвольном порядке, причем все (кроме SRC) можно и не задавать. В принципе, и SRC можно опустить, но тогда картинка не появится.
Как уже упоминалось, изображения - это тот же текст, поэтому вы можете выравнивать их, создавать из них списки и т. д. аналогично простому тексту.
Ссылки
Ну какая страничка без ссылок! Они делаются так:
<a href='URL'>описание ссылки</a>
URL - это полный путь к тому документу, куда вы хотите послать посетителя. В качестве описания можно использовать картинку (помните - она тоже текст). К примеру, делаете Вы галерею с предпросмотром, и нажав на маленькую картинку паршивого качества, посетитель должен попасть на полномасштабную фотографию. Например вот так:
<a href='URL'>
щелкни по картинке
<img src='путь к картинке'>
и тебе откроется истина
</a>
Тут все, что написано между <a> и </a> будет ссылкой.
Ссылки бывают внешние и внутренние. Внешние ведут на какой-нибудь другой файл, а внутренние перемещают нас по текущему документу. Например, почти все FAQ'и используют внутренние ссылки: вначале идет список вопросов, щелкая по которым мы переходим к ответам.
Чтобы организовать внутреннюю ссылку, сначала надо поставить метку в том месте, куда будет вести ссылка. Метка выглядит так: <a name="metka"></a>
Вместо metka вставляете любую комбинацию из латинских букв и цифр. Теперь ссылка для перехода на эту метку выглядит так: <a href="#metka">описание ссылки</a>
Внешние URL бывают абсолютные и относительные. абсолютные - это когда вы указываете URL полностью. Например http://account.narod.ru/index.html
А относительные намного короче. Например, вам нужно вставить ссылку на файл, находящийся в том же самом каталоге (в той же самой папке), что и текущий. Тогда можно просто указать его имя, без всяких http:// и т.д. Это очень удобно, когда вы создаете сайт дома на компьютере, а затем перекачиваете его на сервер. Используя относительные URL, вам не надо будет изменять их перед перекачкой.
Если файл находится во вложенном каталоге (папке), его относительный URL выглядит как
Имя_папки/Имя_файла
Если на один уровень выше, то
../Имя_файла
на два уровня выше -
../../Имя_файла
и т.д. Если в параллельной папке -
../Имя_папки/Имя_файла
Если вы вставляете ссылку на файл, в котором есть метки, можно делать ссылку сразу на эту метку. Вот так:
<a href="URL#metka">описание ссылки</a>
#metka пишется сразу после адреса, без пробела.
Есть еще необязательный атрибут атрибут target. Если указать target=_new, документ, на который указывает ссылка, откроется в новом окне броузера. Если указатьtarget=_blank, то тоже в новом окне, которое будет "упрощено" до предела.
К ссылкам можно делать комментарии, как к изображениям. Правда, понимает это только Internet Explorer. Делается это с помощью атрибута title. Причем, такой комментарий можно делать к любому слову или предложению, даже если они не являются ссылками.
<a title="комментарий">cлово</a>
<a href="URL" title="комментарий">cсылка</a>
Здесь "слово" и "ссылка" имеют комментарий. Можете посмотреть, как это выглядит.
Внимание! Имена файлов и меток пишутся так, как они есть, то есть большие и маленькие буквы рАзЛиЧаЮтСя!!!
Посетителям надо будет писать вам письма. Можно просто сообщить свой адрес и пусть выкручиваются как хотят. А можно вставить ссылку
<a href="mailto:e-mail">webmaster</a>
Вместо e-mail пишете свой адрес. Теперь, щелкнув по слову webmaster, или что вы там напишете, запустится программа для отправки писем и ваш адрес там уже будет указан.
Таблицы
Таблицы используются для упорядоченного представления информации. К тому же иногда бывает трудно добиться размещения картинки в нужном месте, тут без таблиц не обойтись.
Задание таблицы выглядит следующим образом:
<table
caption='название'
align='***'
border='***'
cellpadding='***'
cellspacing='***'
bgcolor='***'
background='***'
тело таблицы
</table>
Все элементы описания таблицы кроме <table></table> являются необязательными.
align - выравнивание таблицы на экране. Может быть left, right и center.
width - ширина. Можете указать в пикселях или в процентах от размера окна, например или
border - толщина рамки между ячейками в пикселях.
cellpadding - расстояние от текста до рамки в пикселях.
bgcolor - цвет фона.
background - фоновый рисунок.
cellspacing - Обычно примыкающие табличные ячейки разделены общей рамкой, а в HTML каждой ячейке назначается ее собственная рамка, которая отделяется от рамок вокруг соседних ячеек. Это разделение может быть установлено в пикселях с использованием атрибута CELLSPACING (например, CELLSPACING=10). Это же значение определяет расстояние между табличной рамкой и рамками самых крайних ячеек.
Строки таблицы задаются следующим образом:
<tr
nowrap
rowspan='***'
colspan='***'
align='***'
height='***'>
тело строки
</tr>
Все атрибуты, включая <tr></tr> являются необязательными.
nowrap - подавляет перенос строк. Эквивалентно использованию непрерывного пробела вместо обычных.
rowspan - целое число строк, перекрываемых ячейкой.
colspan - целое число столбцов, перекрываемых ячейкой.
align - горизонтальное выравнивание внутри ячеек - left, right или center.
valign - вертикальное выравнивание внутри ячеек. top - прижать к верху, middle - по центру, bottom - прижать книзу.
Ну и собственно ячейки строки задаются следующим образом:
<td>
данные ячейки
</td>
Атрибуты ячеек те же, что и у строк. Все атрибуты кроме <td> и </td> являются необязательными. Если не разбивать строку на ячейки, получим одну на всю ширину таблицы. Тот же эффект будет достигнут, если в строке задать одну-единственную ячейку. Но уж если Вы открыли ячейку тегом <tr>, то не забудьте ее и закрыть </tr>.
Здесь align, colspan, rowspan и valign используются аналогично параметрам строк. Нужны для того, чтобы сделать какую - либо ячейку отличной от своих соседок.
Для чего нужны атрибуты colspan и rowspan? Дело в том, что во-первых, все ячейки имеют ту же ширину, что и ячейки предыдущей строки, а во-вторых, все ячейки одной строки имеют одинаковую высоту.
Можно делить ячейки. Для этого внутри выбранной ячейки задаете новую строку. Можно создать подобную таблицу:
| Таблица | |||||||||||||||||||||||||||
|
|
| |||||||||||||||||||||||||
| text | text | text | |||||||||||||||||||||||||
В принципе, для каждой ячейки td также можно указывать атрибуты bgcolor и background, то бишь цвет фона и фоновый рисунок.
Вместо td можно указать th. Тогда текст внутри будет жирным.
Таблицы широко используются для того, чтобы вывести текст или изображения в нужном месте. Ведь стандартными средствами HTML 3.2 можно указать только положение относительно экрана: по центру, слева или справа. Это не очень удобно. Поэтому многие весь контент загоняют в таблицы (и я - не исключение). Один нюанс: атрибуты width и height, если ячейка не содержит данных, некоторыми броузерами игнорируются. Поэтому советую создать прозрачный GIF-файл размером 1х1 и использовать его для задания ширины и высоты ячеек. Например вот так
<td><img src="transparent.gif" height=1></td>
Теперь у нас есть ячейка шириной 100 пикселов, и все ячейки, расположенные под ней, будут иметь ту же ширину. Аналогично задается и высота ячеек.
Фреймы
Фреймы придают вашей страничке особый шарм, облегчают навигацию по сайту и вашу работу, если вы решите внести изменения в существующие файлы.
Считается хорошим тоном, когда каждый посетитель может в любой момент попасть в любой раздел вашего сайта. Но если файлов много, и нужно добавить еще один, придется добавить ссылки на него во все уже имеющиеся. Нудная работа. Гораздо проще иметь все ссылки в одном файле и держать его постоянно перед носом посетителя. В этом случае при добавлении нового файла достаточно добавить всего одну ссылку на него – и доступ обеспечен из любого раздела. Этого-то и можно добиться с помощью фреймов.
Ваш основной файл index.htm приобретает следующий вид:
<html>
<head>
Тут Ваш заголовок
</head>
<body>
<frameset
framespacing='0'
frameborder='1'
border='0'
cols="20%,*">
<frame name=leftframe src="файл - оглавление">
<frame name=mainframe src="начальная страница">
</frameset>
</body>
</html>
Страница делится на две части, в одну загружается файл, содержащий ссылки на все странички Вашего сайта, в другую - страничка, которую Вы хотите показывать первой. В приведенном примере страницы будут расположены рядом. Если написать вместо cols rows, они будут одна над другой.
В параметрах cols (rows) указываются размеры окон, отводимые под фреймы. Их можно указывать либо относительно окна браузера в процентах, либо в пикселях.
Вместо размеров можно поставить звездочку '*'. Это означает, что Вы разрешаете браузеру автоматически определить размер данного фрейма.
Принята явно указывать размеры одного окна (любого), а второе оставлять на растерзание браузеру. В принципе, количество открываемых фреймов не ограничено. Вы можете создать страничку из трех-четырех фреймов, один из которых, в свою очередь, тоже будет содержать фреймы, которые...
Вот вы все сделали как тут указано, и обнаружили, что, нажав на ссылку в фрейме-оглавлении, новый файл грузится вместо оглавления, и его там почти не видно.
Чтобы эту ошибку исправить, в файле - оглавлении в заголовке, то есть где-нибудь между <head> и </head> вставляете строчку
<base target="mainframe">
Теперь, нажав на ссылку в оглавлении, новая страничка будет грузиться в основной фрейм, что нам и надо.
Немного о правилах хорошего тона.
Пока вы водите посетителя по разным страничкам своего сайта, либо отправляете его туда, откуда он, скорее всего, вернется, все нормально. Новые документы открываются в основном фрейме и оглавление всегда на виду. Но если, нажав на какую-либо ссылку, предполагается, что вернется он не скоро, то чтобы ваше оглавление не мозолило зря глаза, вызывая бешенство, немножко измените эти ссылки и запишите их вот так
<a
target=_top
href="URL">
описание ссылки
</a>
Обратите внимание - перед top стоит знак "нижнее подчеркивание".
Теперь новые документы будут занимать все окно браузера, и ваши посетители останутся довольны.
Такое часто получается при посещении сайтов, использующих службу редиректа, либо расположенных на серверах, которые при выдаче документа добавляют к нему фрейм со своей рекламой. Если вы попадете в схожую ситуацию, чтобы выкарабкаться, не идите по ссылкам просто так - вдруг они вас не спасут, а щелкните по ним правой кнопкой и скопируйте адрес, а затем вставьте его в окно адреса браузера - и в путь. Еще нюанс. Если вы увидели отличную страничку и захотели добавить ее в избранное, а она состоит из фреймов, Вы скорее всего сохраните совсем не тот адрес, что вам нужен.
Язык разметки гипертекста HTML
Практическая работа №1
Ход работы:
Для подготовки html-файла можно использовать текстовый редактор Блокнот.
<HTML>
<HEAD>
<TITLE> Название окна Web-страницы </TITLE>
</HEAD>
<BODY ПАРАМЕТРЫ>
<!--Дальше идет текст, например, такой.-- >
Меня зовут Светлана. Мне 16 лет.
Я хочу стать Web-дизайнером.
Это моя первая Web-страница. Тут я могу писать любой текст, например, про меня и мои интересы. Я помещу файл на сервере, и мою страницу смогут увидеть в разных концах мира.
</BODY>
</HTML>
В середине пары тегов <BODY параметры>…</BODY> записывают (то есть программируют) то, что должно отображаться в окне броузера.
Задание 1. Создайте с помощью текстового редактора приведенный выше html-файл и сохраните его в своей папке с названием file_1.html. Тег <BODY> запишите так <BODY TEXT=”red”>. Откройте файл в броузере, т.е. перейдите в свою папку и дважды щелкните на файле file_1.html. Обратите внимание, что текст на экране расположен по другому, чем в файле: нет абзацев и абзацного отступа, текст выровнен по левому краю. Проэксперементируйте с разными значениями параметров BGCOLOR и TEXT. Для переключения между режимом просмотра WEB-страницы в браузере и текстом HTML-файла используйте меню ВИДð В виде HTML
Задание 2. Отформатируйте текст в файле file1.htm следующим образом и сохраните его в файле file2.htm:
<HTML>
<HEAD>
<TITLE> My Web-page </TITLE>
</HEAD>
<BODY BGCOLOR =”yellow” TEXT =”navy”>
<CENTER><H1>Привет! </H1>
<H2> Меня зовут Светлана. </H2> </CENTER>
<HR>
<H3> Мне 16 лет. </H3>
<H4> Я хочу стать Web-дизайнером. </H4>
<HR>
Это моя <B> вторая </B> попытка создать Web-страницу. Я уже умею пользоваться заголовками, формировать текстовые абзацы, вставлять линии. Позже я научусь вставлять <I> фотографии, картинки, звук </I> путем гиперссылок на соответствующие <U> графические, звуковые или видеофайлы </U>.<P>
Я сохраню этот файл на диске и открою его в броузере. <P>
Эту Web-страницу я буду усовершенствовать. Ее еще рано размещать на сервере. <HR>
</BODY>
</HTML>
Просмотрите этот файл с помощью броузера и проэксперементируйте с тегами форматирования текста. Проэксперементируйте с размерами окна, в котором демонстрируется документ и удостоверьтесь, что броузер автоматически заменяет расположение текста, чтобы его можно было просматривать без горизонтальной линии прокрутки (текстовые редакторы этого не делают).
