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

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

Но начнем мы необычно.

Глава 1:
КАК ВСТАВИТЬ ИЗОБРАЖЕНИЕ
Для того чтобы вставить рисунок или изображения на наш сайт нам надо рисунок созданный в определенном  стандартном формате. Такие как GIF,JPG, PNG.
 Так как у меня нет сейчас ни одного графического файла и у вас тоже.
 Я ограничусь только конкретными советами, как, что и куда =)).
То есть теорией.

Теги:
<img>  (image)-используется для вставки изображения в web-документ.Он является одиночным.
src- определяет имя файла или его адрес в интернете.
Давайте назовем  графический рисунок "картинка" и попытаемся вставить его в нужное место в html-коде.

для этого: мы введем теги указанные выше в таком порядке:
<img src=картинка.GIF border=1>
Атрибут <border> является необязательным. Благодаря ему  рисунок  будет заключен в рамку.
<border> указывает толщину рамки.

Вставим:<img src=картинка.GIF border=1> после
<h1 align =center> Компания Ореон</h1>


<html>
<Head>
<h1 align =center> Компания Ореон</h1>
<img src=картинка.GIF border=1>
</head>
<body bgcolor = yellow text = blue>
<center><font size=5><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i></font></center>
</body>
</html>

. Теперь когда у вас будет готово графическое изображение вы сможете спокойно его увидеть на сайте.вставив его в то место, которое указано выше.

Теперь выровняем картинку по центру с помощью тега <center>.

<center><img src=картинка.GIF></center>

Теперь ваш html код  должен выглядеть так:

<html>
<Head>
<h1 align =center> Компания Ореон</h1>
<center><img src=картинка.GIF></center>
</head>
<body bgcolor = yellow text = blue>
<center><font size=5><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i></font></center>
</body>
</html>

Готово! По центру мы выровняли.

Теперь мы научимся устанавливать фоновый рисунок на страницу.
Для этого я опять придумал название нашего графического рисунка, который будет фоном:

осень.GIF

Для  того чтобы установить фон мы :
вместо этой строчки:
<body bgcolor = yellow text = blue>
введем  эту:
<body bgcolor = yellow text = blue осень=осень.GIF>

И наш документ станет выглядеть вот так:
<html>
<Head>
<h1 align =center> Компания Ореон</h1>
<center><img src=картинка.GIF></center>
</head>
<body bgcolor = yellow text = blue осень=осень.GIF>
<center><font size=5><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i></font></center>
</body>
</html>

Теперь мы научилис куда и зачем вставлять рисунок, как его выровнять и как установить фон web-страницы .

Глава закончена.

Глава 2.
Как создать списки перечисления.

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

Теперь оставьте ваш  созданный html-документ и создайте новый предварительно сохраните, то, что у вас уже получилось.(чтобы не удалить случайно)

Файл/Создать  :
введите Html-код который мы вводили в начале создания прошлого документа.
Я думаю, что вы уже помните какой. если нет, смотрим:

<html>
<Head>
<title></title>
<body>
</body>
</html
введите между  <title></title>
Название заголовка Услуги фирмы
Ниже тега <body>
введите
<h2> align=center>Услуги, которые предоставляет компания Ореон</h2>

Если вы сделали все правильно, то у вас должен появиться следующий html-код
<html>
<Head>
<title> Услуги фирмы</title>
<body>
<h2 align=center>Услуги, которые предоставляет компания Ореон</h2>
</body>
</html

Все правильно? продолжаем дальше:
Краткая справка:
<ul></ul> - используются для создания списка(маркированного)
<li>- с него должен начинаться каждый элемент списка

итак: ниже вот этой строки:
<h2 align=center>Услуги, которые предоставляет компания Ореон</h2>
давайте создадим список услуг фирмы Ореон.
<ul>
<li> Продажа компьютеров
<li> Ремонт компьютерной техники
<li>Телефонная консультация
<li> Сборка и доставка компьютеров на заказ
<li> Интернет обслуживание
</ul>
после этого давайте изменим цвет страницы для этого вместо тега
<body> вставим строку  <body bgcolor=blue text=red>
если у вас все правильно, то должно получиться так:

<Head>
<title> Услуги фирмы</title>
<body bgcolor=blue text=red>
<h2 align =center>Услуги, которые предоставляет компания Ореон</h2>
<ul>
<li> Продажа компьютеров
<li> Ремонт компьютерной техники
<li>Телефонная консультация
<li> Сборка и доставка компьютеров на заказ
<li> Интернет обслуживание
</ul>
</body>
</html>

Если все правильно давайте сохраним наш документ в папке Мой сайт.
под название список.html.
Для этого выберем.
Файл.сохранить  как: имя файла: список.html
Теперь запустим список.html из папки и если все есть а именно:

УСЛУГИ ФИРМЫ

Услуги, которые предоставляет компания Ореон

    * Продажа компьютеров
    * Ремонт компьютерной техники
    * Телефонная консультация
    * Сборка и доставка компьютеров на заказ
    * Интернет обслуживание
перейдем к следующей главе.
Глава 3.
Как поставить ссылки на другие страницы( гипертекстовые ссылки)

Для того чтобы это сделать нам надо.
Открыть блокнот.
Нажать файл/Открыть/ появиться  три поля:
Имя файла
Тип файлов
Кодировка
выберите папку: Мой сайт в которой у вас два html -документа они не отображаются
в типе файлов: поменяйте в типе документов строку текстовые документы на строку  Все файлы. Нажмите на файл oreon.html
В окне блокнота появится  html -код .

<html>
<Head>
<h1 align =center> Компания Ореон</h1>
</head>
<body bgcolor = yellow text = blue>
<center><font size=5><i>Компания Ореон. У нас самые лучшие компьютеры и компьютерные программы</i></font></center>
</body>
</html>

<a></a> - теги используемые для вставки ссылок на другие страницы.
href-атрибут ,который указывает имя документа, на который нам надо сослаться или электронный адрес в интернете.
Ниже тега body найдем  слово лучшие.
Заменим слово лучшие на:
<a href="список.html">лучшие</a>

<html>
<Head>
<h1 align =center> Компания Ореон</h1>
</head>
<body bgcolor = yellow text = blue>
<center><font size=5><i>Компания Ореон. У нас самые <a href="список.html">лучшие</a>
компьютеры и компьютерные программы</i></font></center>
</body>
</html>

Краткая справка:
link-позволяет определять цвет не просмотренной ссылки
vink-просмотренной ссылки.
Теперь сохраняем. И загружаем, чтобы посмотреть. Лучшие будет выделяться на фоне других и если вы нажмете на это слово вы очутитесь на странице Услуги фирмы.

Если все так давайте перейдем к следующей главе.

Глава 4. Таблица.
Она служит для того, чтобы мы могли размещать текст и рисунки относительно друг друга, в различных колонках.
Давайте создадим еще один документ в блокноте для этого:

Нажмем: Файл/Создать
Теперь введем основные теги:

<html>
<Head>
<title>таблица</title>
</head>
<body bgcolor = red text = blue>
</body>
</html>

Краткая справка:
<table> </table> таким тегом указывается таблица
<tr></tr>- каждая строка заключается между этими тегами
<td></td>-между ними можно помещать любой текст
<th></th>-определяет полужирное начертание содержимого ячеек.
Ниже тега <body bgcolor = red text = blue>  нужно ввести следующие элементы нашей с вами таблицы

<table>
<tr><td> Главная страница </td></tr>
<tr><td>О кампании </td></tr>
<tr><td>Услуги фирмы</td></tr>
</table>

теперь заменим все пары <td></td>
тегами <th></th>

<table>
<tr><th> Главная страница</th></tr>
<tr><th>О кампании</th> </tr>
<tr><th>Услуги фирмы</th></tr>
</table>
Если вы все сделали правильно у вас должно получиться вот так:

<html>
<Head>
<title>таблица</title>
</head>
<body bgcolor = red text = blue>
<table>
<tr><th> Главная страница</th> </tr>
<tr><th>О кампании</th> </tr>
<tr><th>Услуги фирмы</th></tr>
</table>
</body>
</html>


Теперь воспользуемся прошлой главой и сделаем ссылку на страницу: "О услугах фирмы" ,а также ссылку  на "главную страницу".
Для  этого: найдем в таблице слово: услуги и заменим на:
<a href="список.html">Услуги</a>

затем слово страница и  заменим на:
<a href="ореон.html">Страница</a>

Краткая  справка:
align- тег  потребуется вам для изменения горизонтального положения таблицы
center-центрирование  таблицы
<border>-можно указать толщину рамки вокруг ячеек.
<caption></caption>-можно указать заголовок таблицы. Ячейки могут содержать любые теги, и
даже в ячейки можно поместить другую таблицу.
Не это ли мы хотели?

Теперь когда мы знаем о этих тегах
заменим   <table> на html-строку  для центрирования таблицы:
<table border=3 align=center>

Если вы сделали все правильно, у вас должен получиться такой html-документ:

<html>
<Head>
<title>таблица</title>
</head>
<body bgcolor = yellow text = blue>
<table border=3 align=center>
<tr><th><a href="ореон.html">Главная</a>  Страница </th> </tr>
<tr><th>О кампании</th> </tr>
<tr><th><a href="список.html">Услуги</a> фирмы</th></tr>
<tr><th>Контакты </th></tr>
<tr><th> Гостевая книга </th></tr>
</table>
</body>
</html>

Если все правильно сделано  УРА. ГЛАВА ЗАКОНЧЕНА. Сохраняйте последний документ и с помощью браузера смотрите, что у вас получилось.
Если  вы связали между собой все три страницы, поздравляю.Вы создали, что-то похожее на сайт. С помощью первой главы вы можете создавать  сколько угодно страниц. связывать их между собой с помощью гиперссылок.

Послесловие:
Вы научились создавать страницы. Теперь вам нужно увидеть свою страницу в интернете.
Об этом вы узнаете в следующей статье под номером три. Спасибо за внимание.Надеюсь у вас все получилось! ...
Если вам понравилась статья пожалуйста  оставляйте рецензию.


Рецензии