1. Web-страничка -- это текст, который Вы хотите увидеть на экране плюс специальные флажки, форматирующие его.
Язык разметки страничек называется HTML (HyperText Markup Language); Существует международный стандарт HTML3.2, полностью описывающий все возможные флажки и их допустимые сочетания. К счастью, программы просмотра терпимы к нарушениям стандарта и ошибкам в синтаксисе: если они встречают флажок, который им незнаком, они делают вид что этого флажка вообще не было.
Файл, содержащий HTML документ должен иметь расширение .htm или .html
Для компоновки Web-страничек можно использовать любой текстовый редактор, сохраняющий "только текст", т.е. текст без символов форматирования, установки шрифтов и т.д. Например редактор Norton Commander-а, edit в DOS, Notepad или Write в Windows или vi в UNIX.
Картинки и другие нетекстовые компоненты НЕ ВСТАВЛЯЮТСЯ в документ непосредственно и хранятся отдельно. Вместо этого в текст вставляется ссылка, указывающая программе просмотра имя файла, содержащего картинку. Стандартно поддерживаются только фораты картинок GIF и JPEG.
Для создания страничек совершенно не обязательно иметь доступ к сети. Все известные мне программы просмотра (Netscape, Mosaic, lynx и т.д.) могут открыть файл с документом, находящийся на Вашем жестком диске. (В Netscape, например, для этого из меню "File" надо выбрать пункт "open File").
2. Минимальный (пустой) документ имеет вид:
<HTML>
<HEAD>
<TITLE> здесь заголовок ОКНА Netscape </TITLE>
</HEAD>
<BODY>
здесь собственно документ
</BODY>
</HTML>
Почти все флажки -- парные (как открывающие и закрывающие скобки), закрывающий флажок предворяется символом "/". Например, если Вы хотите выделить слово жирным шрифтом, Вы пишете <B>слово</B>. Здесь <B> и </B> -- флажки, указывающие программе просмотра как надо изображать обрамленное ими слово.
Большие и маленькие буквы не различаются, например <BR>, <Br> и <br> совершенно равноправны и одинаково вызывают принудительный перевод строки в тексте. Часто действие флажков интуитивно понятно (для знающих английский):
- <B></B> -- Bold (жирный)
- <I></I> -- Italic (курсив)
- <P></P> -- Paragraph (параграф)
- <I></I> -- Italic (курсив)
Программа просмотра заменяет все последовательно идущие символы пробелов, табуляции и возврата каретки на единственный пробел.
3. Наиболее часто используемые флажки:
<P> </P> -- абзац
<BR> -- принудительный перевод строки
<H1> </H1>, <H2> </H2>, ... <H6> </H6> -- заголовки разных размеров
<IMG src="имя_файла.gif"> -- вставить картинку.
<A HREF="http://www.openweb.ru"> мастерская </A> -- сделать слово "мастерская" гипертекстовой ссылкой на сервер openWEB.
Последние два флажка иллюстрируют важный факт: кроме своего имени флажки могут содержать (и часто содержат) один или больше параметров. Например, чтобы вставить в документ картинку, я не просто указал флажок <IMG>, а еще и снабдил его параметром SRC="имя_файла.gif", (без которого флажок <IMG> особого смысла, надо полагать, не имеет). Часто параметры необязательны и служат для уточнения внешнего вида элемента:
<HR> изображается как горизонтальная канавка,
<HR NOSHADE> -- горизонтальная полоска,
<HR WIDTH=50%> -- горизонтальная канавка шириной в половину экрана.
Таким образом, создание гипертекстового документа -- простая и приятная работа:
- Вы создаете минимальный документ,
- Вставляете внутрь флажков <BODY></BODY> Ваш текст
- Размечаете текст (параграфы, заголовки и т.д)
- Вставляете ссылки на картинки
- Вставляете гипертекстовые связи
- Загружаете готовый документ в программу просмотра
Таблички
1. ОсновыТаблица -- конструкция HTML, связывающая текст и картинки в ряды, столбцы и ячейки. Таблица может содержать любые элементы HTML, включая multimedia и формы.
Таблица задается с помощью флажков <TABLE> и </TABLE>. Ряды данных задаются флажками <TR> </TR> Ячейки данных задаются флажками <TD> </TD> или <TH> </TH>
Полнокровная табличка получается в результате комбинации только этих трех флажков:
<table>
<tr><td> data1.1 </td> <td> data1.2 </td> </tr>
<tr><td> data2.1 </td> <td> data2.2 </td> </tr>
</table>
Выглядит эта конструкция так:
data1.1 data1.2 data2.1 data2.2 обратите внимание, что таблица состоит из рядов ячеек, то есть ячейка обязательно должна быть частью ряда и не выходить за его границы. Посмотрите на конструкцию внизу. Сколько Вы видите ошибок ?
<table>
<td> data0 </td>
<tr> <td> data 1.1 </td> <td> </tr> data 1.2 </td>
</table>
(Я вижу две)
2. Разберемся, однако, поподробнее!
- Что будет, если указать разное количество ячеек в разных рядах?
- Можно ли все-таки иметь разное число ячеек в разных рядах?
- Как выравниваются текст и картинки в ячейках таблицы?
- В чем разница между <td> и <th>?
- Как задаются размеры табличек?
- А что это за cellpadding и cellspacing?
- Что в таблицах плохого?
- Полный синтаксис всех табличных флажков.
Как выравниваются текст и картинки в ячейках таблицы?
cell 1.1 colspan = 2 cell 2.1 cell 2.2 rowspan = 2 cell 3.1
Двумя способами. Во-первых для выравнивания по вертикали можно использовать параметр valign флажка <table>. Этот параметр поддерживается только MS Internet Explorer и для совместимости с Netscape лучше использовать этот же параметр, но с флажками <td>, <tr> <th>.
Во-вторых по горизонтали с помощью параметра align флажков <td>,<th> и <tr>.
td valign = top baseline center bottom Baseline__
another lineAAyy __AAyy__ AAyy AAyy
tr align=left
***tr align=right
***tr align=center
***В чем разница между <td> и <th>?
Это почти одно и то же. Netscape и Mosaic могут специальным образом (жирный шрифт, выравнивание) изобразить ячейки, обозначенные <th> </th>, но другие программы могут этого и не делать. Все параметры <td> работают и для <th>.Как задаются размеры табличек?
Обычно программы просмотра автоматически определяют нужную ширину и высоту таблички. Для того чтобы управлять шириной таблицы и ее частей используется параметр width флажков <table> и <td>. ширина может быть указана в пикселах или в процентах: <table width=400> <th width = "40%"> (обратите внимание на кавычки во втором примере) Ширина, указанная в процентах, для флажка <table> определяется относительно границ окна программы просмотра, а для флажка <td> -- относительно ширины таблицы.А что это за cellpadding и cellspacing?
Эти параметры флажка <table> работают только в Netscape. по умолчанию cellpadding = 1 cellspacing = 2
Что в таблицах плохого?
lynx
Текстовая программа просмотра lynx полностью игнорирует табличные флажки. Поэтому для сохранения читабельности хорошо отделять содержимое отдельных ячеек флажками параграфов (<p>)Netscape
Старые версии Netscape (до 2-ой) содержат ошибку, вызывающую аварийное завершение программы при попытке изменить размер окна, содержащего конструкцию "таблица в таблице". Поэтому лучше эту конструкцию не использовать. Используя, необходимо обязательно указывать все закрывающие флажки (</td>,</tr>)"Все или ничего"
Обычно программы просмотра сначала принимают все компоненты таблички и только потом целиком отображают ее на экране. Поэтому большие тексты лучше разбивать на несколько таблиц.рамки
Некоторые создатели Web-страничек злоупотребляют возможностью заключить табличку в рамку. Наверное они считают это красивым. С моей точки зрения этого делать не нужно по двум причинам:
- Это совсем не красиво
- Это затрудняет восприятие информации -- рамки визуально отделяют содержимое ячеек друг от друга, а обычно соседние ячейки имеют непосредственное отношение друг к другу.
3. Полный синтаксис всех табличных флажков.(по книге Chuck Musicano & Bill Kennedy
HTML: The Definitive Guide. O'Reilly & Associates, Inc. 1996)
<TABLE>
фунция
определяет таблицу
параметры
align
bgcolor (только Internet Explorer и Netscape 3.0)
border
bordercolor (только Internet Explorer)
bordercolordark (только Internet Explorer)
cellpadding (только Netscape)
cellspacing (только Netscape)
hspace
valign (только Internet Explorer)
vspace
widthзакрывающий флажок
></table>, обязателен
<TR>
функция
Определяет ряд в талице
параметры
align
bgcolor (только Internet Explorer и Netscape 3.0)
bordercolor (только Internet Explorer)
bordercolorlight (только Internet Explorer)
bordercolordark (только Internet Explorer)
valignзакрывающий флажок
</tr>, может быть опущен
<TD> и <TH>
функция
Определяет ячейку в таблице
параметры
align
bgcolor (только Internet Explorer и Netscape 3.0)
bordercolor (только Internet Explorer)
bordercolorlight (только Internet Explorer)
bordercolordark (только Internet Explorer)
colspan
nowrap
rowspan
valign
widthзакрывающий флажок
</td> или </th>, может быть опущен.
<CAPTION>
функция
определяет заголовок таблицы
параметры
align
valign (только Internet Explorer)закрывающий флажок
</caption>, обязателен
Контекстная реклама: