Работа в интернет - Азы веб-дизайна

Рекомендуем Вам приобрести программу DreamWeaver версии 4 и выше. Эта
программа позволит Вам комфортно работать, и более лекго выучить язык
HTML, с помощью которого создаются интернет страницы и сайты.

      Если у Вас нет этой программы - не беда. Создавать интернет-страницы можно
      в любом текстовом редакторе, будь то это Wordpad, Notepad, или редактор
      встроенный в Ваш Norton Commander.
      Некоторые кстати любят пользоваться именно ими...не любят программы типа
      DreamWeaver. Как удобней работать Вам - каждый решает сам.
      Итак. Начали.

Запустите любой текстовый редактор, например Блокнот, входящий в Windows (
Пуск- Программы- Стандартные - Блокнот).

Теперь наберите в нем этот "текст" :

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

Теперь поясню что есть что.
 Команды в <> называются тегами. Теги бывают парные и не парные. Парные
 теги состоят из открывающего тега и закрывающего. Например тег <html> -
 открывающий тег, а </html> - закрывающий. Как видите разница в открывающем
 и закрывающем теге всего лишь в / .
 Не парные теги состоят только из открывающего тега. Например тег 
 <img>. Какие теги парные а какие не парные - следует запоминать.
 Большинство тегов все же парные.

идем дальше....

Между тегами <title> и </title> напишем название нашей странички или сайта
 . (Этот текст будет виден в названии окна Internet Explorer-а, как
 например сейчас написано - "Создание сайта. Стань вебмастером за 5 минут !
 " для окна которое вы читаете в данный момент.)Например вот так :
 <html>
 <head>
 <title> Моя первая интернет-страница. </title>
 </head>
 <body>
 </body>
 </html>

Теперь между тегами <body> и </body> напишем то что мы хотим разместить на
нашей странице....текст например :

<html>
 <head>
 <title> Моя первая интернет-страница. </title>
 </head>
 <body>
 Это моя первая интернет- страница. Немного о себе. Я живу в Москве. Мне 20
 лет. Я хочу заработать много денег. </body>
 </html>

Теперь сохраним набранное нами в виде файла с расширением htm или html,
например page1.html

Теперь запустите сохраненный Вами файл page1.html или откройте его в
Internet Explorer. У вас должно получиться как здесь

Поздравляем ! Вы только что создали свою первую интернет-страницу.

Теперь идем дальше. Давайте поменяем цвет фона на нашей страничке. Цвет
 фона задается в теге body, и записывается в 16-ричной системе., где каждая
 из цифр или букв означает "количество" основных цветов - RGB - Red Green
 Blue.
 Например <body bgcolor="#000000"> означает что цвет фона будет состоять из
 00-красного, 00-зеленого, и 00 - голубого. Таким образом мы получим черный
 цвет.
 Белый цвет фона кодируется так <body bgcolor="#FFFFFF">
 Красный цвет фона кодируется так <body bgcolor="#FF0000">
 Зеленый цвет фона кодируется так <body bgcolor="#00FF00">
 Синий цвет фона кодируется так <body bgcolor="#0000FF">
 Различные комбинации позволяют получить практически любой цвет фона.
 Например
 Такой цвет <body bgcolor="#00CC99">
 Такой цвет <body bgcolor="#FF9999">
 Ну и т.д. Думаю система понятна.
 Чтобы слова не расходились с делом - давайте и мы поменяем цвет фона нашей
 странички. Добавим параметр в тег Body, например вот так :

<html>
 <head>
 <title> Моя первая интернет-страница. </title>
 </head>
 <body bgcolor="#CC0000">
 Это моя первая интернет- страница. Немного о себе. Я живу в Москве. Мне 20
 лет. Я хочу заработать много денег. </body>
 </html>

      Сохраним нашу страничку и запустим ее опять в Internet Explorer, или
      нажмем кнопку "Обновить" в Internet Explorer.
      У вас должно получиться как здесь.
      Поэкспериментируйте с параметром bgcolor.

О переносе.
 Если Вы хотите разделить набранный Ваш текст на части...т.е. сделать на
 странице операцию подобную нажатию кнопки Enter в текстовом редакторе -
 для этого нужно использовать не парный тег 
 Разделим наш текст на несколько строк, например вот так :
 <html>
 <head>
 <title> Моя первая интернет-страница. </title>
 </head>
 <body bgcolor="#CC0000">
 Это моя первая интернет- страница. Немного о себе. Я живу в
 Москве. Мне 20 лет. Я хочу заработать много денег. </body>
 </html>

ну или чтобы это выглядело более читаемо вот так :

<html>
 <head>
 <title> Моя первая интернет-страница. </title>
 </head>
 <body bgcolor="#CC0000">
 Это моя первая интернет- страница. 
 Немного о себе. 
 Я живу в Москве. 
 Мне 20 лет. 
 Я хочу заработать много денег. 
 </body>
 </html>

Сохраните страничку и посмотрите ее в Internet Explorer. У вас должно
получиться как здесь.

Для того чтобы выровнять по центру содержимое нашей странички,
 используется парный тег center.
 Поставим октрывающий тег <center> перед содержимым нашей странички, а тег
 </center> после содержимого нашей странички, вот так :

<html>
 <head>
 <title> Моя первая интернет-страница. </title>
 </head>
 <body bgcolor="#CC0000">
 <center>
 Это моя первая интернет- страница. 
 Немного о себе. 
 Я живу в Москве. 
 Мне 20 лет. 
 Я хочу заработать много денег. 
 </center>
 </body>
 </html>

Сохраним наш файл, откроем его в Internet Explorer и посмотрим что у нас
получилось.

      Теперь установим цвет текста для нашей странички. Цвет текста задается в
      теге body , например вот так text="#FFFF00"
      Добавим этот параметр для нашей странички.

<html>
 <head>
 <title> Моя первая интернет-страница. </title>
 </head>
 <body bgcolor="#CC0000" text="#FFFF00">
 <center>
 Это моя первая интернет- страница. 
 Немного о себе. 
 Я живу в Москве. 
 Мне 20 лет. 
 Я хочу заработать много денег. 
 </center>
 </body>
 </html>

Сохраним наш файл, откроем его в Internet Explorer и посмотрим что у нас
получилось.

Теперь вставим какую нибудь картинку на нашу страницу. Например вот эту

      . Нажмите правую кнопку мышки и выберите "Сохранить рисунок как ..." для
      сохранения картинки. Выберите тот же каталог, где находится и файл
      интернет-страницы, и сохраните картинку под темже именем какое у нее есть
      - sea.jpg.

И вставляем вот этот код
<img src="sea.jpg"> в нашу страничку .

Сохраним наш файл, откроем его в Internet Explorer и посмотрим что у нас
получилось.

Как видите картинки вставляются в интернет-страничку с помощью тега img
где в параметре src указывается файл картинки.

      Теперь вставим ссылку, при нажатии на которую посетитель сайта пойдет на
      другую страничку Вашего сайта или вообще на другой сайт, т.е. гиперссылку.
      Добавим текст после нашей картинки, при нажатии на который будет совершен
      переход на другой сайт. Для вставки гиперссылок используетя парный тег .

Если например Вы хотите сделать чтобы и при нажатии на картинку
осуществлялся переход на другой сайт то сделайте так :