Такой текст
Получится, если
Написать так
<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='***' width='***' 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='***'
width='***'
border='***'
cellpadding='***'
cellspacing='***'
bgcolor='***'
background='***'
тело таблицы
</table>
Все элементы описания таблицы кроме <table></table> являются необязательными. align - выравнивание таблицы на экране. Может быть left, right и center.
width - ширина. Можете указать в пикселях или в процентах от размера окна, например width='500' или width='90%'.
border - толщина рамки между ячейками в пикселях.
cellpadding - расстояние от текста до рамки в пикселях.
bgcolor - цвет фона.
background - фоновый рисунок.
cellspacing - Обычно примыкающие табличные ячейки разделены общей рамкой, а в HTML каждой ячейке назначается ее собственная рамка, которая отделяется от рамок вокруг соседних ячеек. Это разделение может быть установлено в пикселях с использованием атрибута CELLSPACING (например, CELLSPACING=10). Это же значение определяет расстояние между табличной рамкой и рамками самых крайних ячеек.
Строки таблицы задаются следующим образом:
<tr
nowrap
rowspan='***'
colspan='***'
align='***'
valign='***'
width='***'
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" width=100 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>
Просмотрите этот файл с помощью броузера и проэксперементируйте с тегами форматирования текста. Проэксперементируйте с размерами окна, в котором демонстрируется документ и удостоверьтесь, что броузер автоматически заменяет расположение текста, чтобы его можно было просматривать без горизонтальной линии прокрутки (текстовые редакторы этого не делают).