Итак, мы с вами в предыдущей статье начали создавать сайт и дошли до форматирования шрифта текста и закончили его.
В этой статье мы разберем:
Как создать списки перечисления.
Как поставить ссылки на другие страницы( гипертекстовые ссылки)
Как вставлять таблицу.
Но начнем мы необычно.
Глава 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>
Если все правильно сделано УРА. ГЛАВА ЗАКОНЧЕНА. Сохраняйте последний документ и с помощью браузера смотрите, что у вас получилось.
Если вы связали между собой все три страницы, поздравляю.Вы создали, что-то похожее на сайт. С помощью первой главы вы можете создавать сколько угодно страниц. связывать их между собой с помощью гиперссылок.
Послесловие:
Вы научились создавать страницы. Теперь вам нужно увидеть свою страницу в интернете.
Об этом вы узнаете в следующей статье под номером три. Спасибо за внимание.Надеюсь у вас все получилось! ...