Как создать сайт?

ЗАРАБОТОК В ИНТЕРНЕТЕ

Как создать сайт?

Итак… Сайт можно создать тремя способами.… Первый (самый не эффективный) – на некоторых сайтах есть конструктор страниц по шаблонам. Там вы только сможете раскидать свои ссылки и ничего более. Никакой красоты и функциональности. Не буду на этом зацикливать внимание. Сразу отпадает. Второй намного более эффективен и подходит для тех кто плохо знаком с языком HTML(совсем без него тоже нельзя!!!ниже приведу основные теги) . Этот способ заключается в создании сайта в MS Word. И наконец третий – писать полностью весь сайт в ручную в HTML. Но замечу, что создание сайта в MS Word не только более приятное занятие, но и ничем не уступает третьему способу. Здесь я опишу только создание в MS Word и выложу основные теги.

Начинаем

Открываем MS Word, и ищем в левом нижнем углу значок Веб-документ. Все… Теперьь можно творить… Ну обучать работе с MS Word я вас не буду. Просто скажу, что все можно просто сделать из таблиц(как у меня). Залить все фоном каким-нибудь (формат->фон), вставить рисунки(вставка->рисунок) ну и напечетать какой-нибудь текст естественно. Как то ознакомить ваших будущих рефералов с предстоящей работой.

Дальше пойдут основные HTML теги

С чего начинается HTML…

HTML (Hypertext Markup Language) был впервые разработан Тимом Бернерс-Ли (Tim Berners-Lee) в то время когда он работал в ЦЕРНе и приобрел популярность благодаря броузеру "Мозаика" разработанному в NCSA. Первая спецификация этого универсального и общедоступного языка разметки - HTML 0 была утверждена в 1991 году. Уже через два года W3C объявил о выходе HTML 3. Затем, почти сразу, последовала спецификация версии 3.2, с которой мы имеем дело сейчас на подавляющем большинстве Web-страниц. В HTML 4 произошла лишь переработка концепций, и не было добавлено ничего принципиально нового.

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

Однако, именно эта особенность языков разметки оставляет прекрасную возможность генерировать HTML-код другими программами (CGI-скриптами). Современные Web-страницы уже не обходятся одним только HTML. Его гармонично дополняют средства динамического HTML: скрипт языки JavaScript и/или VBScript, каскадные таблицы стилей(CSS), иногда присутствуют Java-апплеты.

Web-страничка – это обычный текстовый файл в соответствующей кодировке. В нем описывается вся страничка с помощью языка гипертекстовой разметки – HTML (HyperText Markup Language). Когда вы в своем браузере (Internet Explorer / Nestcape Navigator) загружаете web-страничку, то браузер выполняет команды, записанные на языке HTML, и, подчиняясь им, выводит на экран страничку.

Создавать HTML-файлы нужно в текстовых редакторах, которые умеют сохранять файлы в формате "Только текст" (расширение .txt). Если вы создадите такой файл в Word'e и сохраните в формате "Документ", а потом поменяете расширение .doc на .html, то у вас получится полная абракадабра, т.к. Word и сам не лыком шит и добавляет в свои "фирменные файлы" массу специальных команд форматирования, очень сильно отличающихся от тэгов HTML. Поэтому на первое время, чтобы не запутаться, идеальным редактором является "Блокнот" (Notepad) из стандартной поставки Windows.

Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки".

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тэга-контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывется тэгом <HTML> и им же закрывается.

Эти тэги сообщают браузеру, что текст между ними следует интерпритировать как HTML-текст. Поскольку документы HTML чисто текстовые, тэг говорит о том, что файл написан на языке HTML (HyperTextMarkupLanguage - Язык гипертекстовой разметки).

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

Начнем с пары тэгов <html></html>. Внутрь этого контейнера рядышком положим два "ящика" поменьше: <head></head> и <body></body> (именно в такой последовательности! не может же "голова" быть ниже "тела"!). Затем внутрь "ящика-головы" вложим "ящичек-название" - <title></title>, а внутрь "ящика-тела" - "ящички-блоки", рядышком, друг за другом: <h1></h1><p></p> и <img>. Ну а теперь можно наполнить наши коробки содержимым - обычным текстом.

Если приведенный выше пример пояснить схематически, получится следующее:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

</title>

</head>

</p>

</table>

</div>

</div>

</body>

</html>

Из схемы видно, что документ состоит из двух основных блоков - "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело - элементом BODY.

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

Правильно: Неправильно: Неправильно:

<div><p>Здесь все сверстано <div><p>А здесь допущена <div><p>А здесь тоже допущена

верно.</p></div> ошибка.</div></p> </div>ошибка.</p>

Особенно важно соблюдать вложенность основных тэгов страниц - <html>, <head>, <body>, <frameset>. Иначе может оказаться, что вы не увидите на экране вообще ничего. Особенно "придирчиво" относится к верной вложенности браузер Netscape Navigator, поэтому желательно всегда проверять созданные страницы в этом браузере.

Форматирование текста в HTML

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

<b></b>, при этом различные слова и фразы вашего документа будут отображены жирным шрифтом

<i></i> - позволяют отображать различные части вашего документа курсивным шрифтом

<u></u> - подчеркивают текст.

<s></s> - этот тег существует для перечёркивания какого-либо текта.

замечание: в настоящее время для форматирования рекомендуется использовать таблицы стилей (CSS)

В последних версиях HTML появилось еще два новых тега - теги нижнего и верхнего индексов. Вряд ли вы будете часто использовать эти теги, но они очень удобны, когда вам нужно отобразить в своей странице такую специфическую информацию как химические формулы (H2O) или математические формулы (a2=b c2).

Чтобы текст выводился в виде нижнего индекса, его следует пометить между тегами <sub> и </sub>, в виде верхниего - <sup> и </sup>. Например:

H₂0 (Код: - H<sub>2</sub>0)

a²=b c² (Код: a<sup>2</sup>=b c<sup>2</sup>)

Задания размера текста желательно выполнять через стили. Он позволяют произвольно задавать размер текста. Поместив текст между тегами <span style="font-size:Npx"></span>, где N - целое число, вы придадите ему нужный вам размер. Пример:

<span style="font-size:10px;">Это размер 10px</span>

<span style="font-size:12px;">Это размер 12px</span>

<span style="font-size:14px;">Это размер 14px</span>

<span style="font-size:16px;">Это размер 16px</span>

Результат

Это размер 10px

Это размер 12px

Это размер 14px

Это размер 16px

Задание шрифта производится с помощью тегов <span style="font-family:font name;"></span>.

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

<span style="font-family:Times New Roman">Times New Roman</span>

<span style="font-family:Arial">Arial</span>

<span style="font-family:Courier New">Courier New</span>

<span style="font-family:System">System</span>

Times New Roman

Arial

Courier New

Теги для таблицы

table соственное сама таблица

tr строка таблицы

td столбец таблицы

th заголовок к столбцам таблицы

caption определяет заголовок для таблицы TABLE

fieldset рисует рамку вокруг текста и других объектов

Теги для форм

<BUTTON> Создает на странице кнопку HTML

<FIELDSET> Рисует прямоугольник вокруг содержащихся в нем элементов

<FORM> Описывает форму на странице, которая может содержать другие компоненты и элементы управления помимо этой самой формы. Т.е. используется всегда.

<INPUT> Задает параметры элемента управления формы. Имя и т.д.

<LABEL> Определяет текст метки, проще говоря пишет текст

<LEGEND> Определяет текст, помещаемый в прямоугольник, созданный вышеописанным тегом <FIELDSET>

<OPTION> Определяет одну из альтернатив в элементе SELECT

<SELECT> Определяет выпадающий список. Очень красиво и модно.

<TEXTAREA> Определяет поле ввода, состоящее из нескольких строк. Memo, если это о чем-то говорит.

Теги ссылок

<A> Определяет гиперссылку. Обязательно задание атрибутов HREFили NAME, в которых пишем куда, собственно, ссылаемся.

<A HREF="url"> Определяет гиперссылку на элемент другого документа. В смысле указываем страницу куда идти

<A NAME="name"> Определяет гиперссылку на элемент этого же документа. Место указываем

Теги мультимедиа и графики

<APPLERT> Помещает апплерт Java или другой выполняемый элемент на страницу

<AREA> Определяет форму активного участка изображения-карты клиента

<BGSOUND> Определяет фоновое сопровождение страницы

<EMBED> Внедряет документы любого типа для просмотра соответствующим приложением. Типа ворды и т.д.

<IMG> Используется для вставки графического элемента или видеоклипа, имиджа в общем

<MAP> Создает коллекцию активных участков изображения-карты клиента. Можно выделять участки кружочками и т.д.

<MARQUEE> Определяет бегущую строку. Иногда полезно

<NOSCRIPT> Определяет, что будет показывать броузер, не поддерживающий сценарии. Типа без скриптов

<OBJECT> Встраивает объект или другой элемент управления, которого нет в HTML

<PARAM> Используется в теге <OBJECT>для установки свойств объекта

<SCRIPT> Определяет раздел страницы, который должен обрабатываться интерпретатором кода сценария. То бишь где скрипты пойдут.

Ну вот как будто бы и все. За дополнительной информацией пишите на форум или мне.

Удачной работы!!!

Гостевая книга

Форум

Чат

Переводчик

О себе…

Для начала…

Почта.com

Американский адрес

Советы

Платежные системы

WebMoney

E-Gold

AlertPay

Серфинг

Где?