Универсальный сайт о заработке в интернет

Добавить в избранное Добавить в избранное

 





Создание сайта - как?

 Чтобы научиться зарабатывать в сети и вообще если вам нужна работа в интернете - вам нужен сайт. Большой или маленький, простой или сложный - но нужен. И его можно сделать самому!

Первый вопрос чем? Для создания сайта существет множество полезных программ. Можно поделить эти программы на две группы:

  1) Программы HTM-редакторы;

  • Adobe GoLive
  • HomeSite

  2) Программы позволяющие визуально видеть сделанные изменения;

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

  • FrontPage
  • Macromedia Dreamweaver

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

 Наиболее популярной является Macromedia Dreamweaver. Это визуальный редактор. Что это значит? Что создание сайта происходит по принципу - вижу что делаю.


Основы для создания сайта

 

1. Азбука
2. Минимальный документ
3. Часто используемые флажки


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 (параграф)

Программа просмотра заменяет все последовательно идущие символы пробелов, табуляции и возврата каретки на единственный пробел.


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%> -- горизонтальная канавка шириной в половину экрана.


Таким образом, создание гипертекстового документа -- простая и приятная работа:

  1. Вы создаете минимальный документ,
  2. Вставляете внутрь флажков <BODY></BODY> Ваш текст
  3. Размечаете текст (параграфы, заголовки и т.д)
  4. Вставляете ссылки на картинки
  5. Вставляете гипертекстовые связи
  6. Загружаете готовый документ в программу просмотра

Таблички

HTML содержит мало средств верстки. Разместить рядом картинку и сопровождающий текст невозможно -- после перевода строки текст располагается ниже картинки. Сверстать текст в две колонки или отодвинуть блок текста от края окна -- чтобы сделать все это и не проявлять чудеса изворотливости есть простой путь -- таблички. Internet Explorer и Netscape Navigator 3.0 позволяют указывать цвет фона для всей таблицы, ее рядов и ячеек.

1. основы
2. подробности
3. синтаксис


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 line

AAyy __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

1

Что в таблицах плохого?
lynx
Текстовая программа просмотра lynx полностью игнорирует табличные флажки. Поэтому для сохранения читабельности хорошо отделять содержимое отдельных ячеек флажками параграфов (<p>)

Netscape
Старые версии Netscape (до 2-ой) содержат ошибку, вызывающую аварийное завершение программы при попытке изменить размер окна, содержащего конструкцию "таблица в таблице". Поэтому лучше эту конструкцию не использовать. Используя, необходимо обязательно указывать все закрывающие флажки (</td>,</tr>)

"Все или ничего"
Обычно программы просмотра сначала принимают все компоненты таблички и только потом целиком отображают ее на экране. Поэтому большие тексты лучше разбивать на несколько таблиц.

рамки
Некоторые создатели Web-страничек злоупотребляют возможностью заключить табличку в рамку. Наверное они считают это красивым. С моей точки зрения этого делать не нужно по двум причинам:

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


3. Полный синтаксис всех табличных флажков.

(по книге Chuck Musicano & Bill Kennedy
HTML: The Definitive Guide. O'Reilly & Associates, Inc. 1996)

<table>
<tr>
<td> и <th>
<caption>


<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>, обязателен




Контекстная реклама:

 


Календарь
Сайт управляется системой uCoz