Как сделать сайт в блокноте html с несколькими страницами

Сайт визитка

Многостраничный сайт содержит более одной страницы. Многостраничные сайты на чистом html+css называют сайтами-визитками. В которых несколько страниц: главная, портфолио, цены, контакты и тому подобное.

Рассмотрим простой пример многостраничного сайта-визитки.

Для начала нам нужно придумать макет (шаблон) сайта и чтобы он был адаптивным, то есть хорошо смотрелся как на мониторе, так и на смартфоне.

Связь между страницами сайта происходит через ссылки. В качестве примера создадим сайт из двух страниц (при необходимости страницы можно добавить), чтобы понять, как они взаимодействуют с друг другом.

В корневой папке создадим папку assets и поместим туда файлы logo.png и style.css.

Загаловок сайта

style.css

/* для блока — шапка */
header <
text-align: left; /* Выравнивание внутреннего контента по левому краю */
width: 95%; /* Ширина блока и общая ширина*/
height: 90px; /* Высота блока */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
padding: 10px; /* Внутренние поля вокруг содержимого */
background: #eeeeff; /* Цвет фона */
>
/* для контейнера */
#container <
width: 97%;/* Ширина слоя или ширина макета+20px */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
>
/* для блока — меню */
aside <
width: 27%; /* Ширина слоя */
float: left; /* Обтекание с соседним слоем */
padding: 5px; /* Внутренние поля вокруг содержимого */
background: #dddddd; /* Цвет фона */
right: 0px; /* Координата от правого края окна */
top: 0px; /* Координата от верхнего края окна */
>
/* для блока — контент */
article < /* Правая колонка*/
width: 70%;/* Ширина слоя */
float: left; /* Обтекание с соседним слоем */
padding: 10px; /* Внутренние поля вокруг содержимого */
background: #eeeeee; /* Цвет фона */
>
/* для блока — подвал */
footer <
width:95%; /* Ширина слоя */
clear:left; /* возвращаем блочность и располагаем слой слева */
padding: 10px; /* Внутренние поля вокруг содержимого */
background:#aaa;
color:#fff;
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
>
@media screen and (max-width: 768px) <
aside, article, footer, header, #container <
margin-left:0px;
margin-top:0px;
width:100%;
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
>
aside <
padding: 10px;
>
>

Как сделать сайт в блокноте html с несколькими страницами

Здравствуйте! Продолжаем создавать сайт в блокноте. В прошлом уроке мы с Вами добавили контент на главную страницу сайта. Теперь главная страница сайта у нас полностью готова.

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

Прежде чем приступить к созданию страниц, давайте отметим блоки, которые должны присутствовать на всех страницах сайта.

На всех страницах сайта, как правило, должны присутствовать – шапка сайта, меню сайта и футер сайта.

Перечисленные блоки актуальны для любой страницы.

Шапка сайта – это название сайта, его тематика.

Меню сайта должно присутствовать на всех страницах, так как с помощью меню, посетитель сайта, может оперативно переходить с одной страницы на другую, получая нужную информацию.

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

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

Создание страниц для сайта

Из сказанного выше, мы с Вами видим, что для создания новых страниц, лучше всего использовать полностью готовую страницу сайта. У нас полностью готова главная страница сайта.

То есть, процесс создания новых страниц, в нашем случае, становится достаточно простым:

1. Мы делаем копию файла готовой страницы

2. Далее, мы переименовываем файл копии

3. Затем, мы открываем файл новой страницы блокнотом, заменяем старый контент на новый, в соответствии с тематикой данной страницы.

Ну что же, приступим:

Итак, для того, чтобы создать новые страницы, делаем первый шаг – создаем копии файла главной страницы нашего сайта.

Мы с Вами планировали создать сайт, состоящий из трех страниц. Файл главной страницы – index.html, у нас уже есть.

Для того, чтобы сделать копии файла, я обычно выделяю файл, затем кликаю на нем правой кнопкой — появляется контекстное меню, где я выбираю «копировать».

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

Вторым шагом, нам необходимо переименовать полученные копии файлов. Делается это очень просто. Кликаем правой кнопкой на названии одного из файлов и в контекстном меню выбираем переименовать, затем – изменяем название копии файла на нужное нам название: «about.html». Соответственно вторую копию файла переименовываем в «news.html».

Итак, мы с Вами создали две новых страницы с именами файлов – about.html иnews.html. Теперь нам их нужно отредактировать, а именно – заменить контент.

В нашем случае, на страницу «О сайте», то есть в файл — about.html, мы добавим статью «О сайте», а на страницу «Новости», то есть в файл «news.html» мы добавим новостную статью о развитии языка HTML5. О содержимом данных статей, мы с Вами уже говорили в уроке Меню для сайта Часть 1.

Ну а как добавить и разметить статью на странице, мы с Вами проходили в уроке 18, который называется — Наполнение сайта контентом.

Ну что же, наполняем созданные страницы контентом. Теперь у нас есть три готовые страницы сайта!

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

Итак, мы создали и отредактировали в блокноте все страницы сайта. Давайте откроем наш сайт в браузере и проверим его работу, кликнув на все пункты меню. У нас должны открываться все страницы. Все должно работать без ошибок!

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

Наш сайт работает, но файлы сайта находятся на компьютере, то есть сайт работает локально, не в сети. Теперь наша задача, выложить созданный сайт в сеть Интернет!

Размещение сайта в Интернет – это отдельная тема, о которой мы поговорим в следующем уроке.

Делаем свой сайт html.

Данный урок является заключительным в курсе «html для начинающих». На сегодняшний день Вы уже обладаете базовыми знаниями языка html. Опираясь на полученную информацию из предыдущих 14 занятий, мы сейчас сделаем небольшой сайт.

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

Наш первый сайт будет состоять из файлов с которыми мы работали на прошлом уроке. Если у Вас не осталось всех файлов с 14-го урока, то скачайте их по ссылке.

После скачивания, во всех четырех файлах (index.html, audi.html, bmw.html, mercedes.html) удалите весь код, кроме тегов входящих в структуру html страницы. Папку image не трогайте, она остается без изменений.

Каркас страниц сайта.

Мы начнем создавать наш сайт с редактирования файла index.html, откройте его в Notepad.

Основной каркас страниц мы сделаем с помощью табличной верстки (урок 10, 11). В основе нашего сайта будет таблица с тремя строками. В первой строке таблицы будет писаться заголовок страницы. Во второй строке сделаем две ячейки, в одной из них будет меню, в другой фото. В третьей строке таблицы будет текст.

Каркас нашего сайта будет выглядеть так:

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

Пояснения к коду:
1) Для тега &lttable&gt мы задали атрибут border со значением 1, тем самым задав границы для таблицы. Атрибут cellspacing со значением 0, означает, что отступы между ячейками таблицы равны 0, то есть их нет. С помощью атрибута align и его значения center, мы выравниваем нашу таблицу по центру страницы. Атрибутом width со значением 750px мы задали ширину таблицы 750 пикселей. Высоту (атрибут height) можно не прописывать, так как у нас будет задана высота для каждой отдельной строки таблицы.

2) Теперь несколько слов о строении таблицы. Максимальное количество ячеек у нас в средней строке (2шт.) Это значит, что по правилам объединения, в каждой строке таблицы у нас должно быть по две ячейки (11 урок). Строение нашего сайта подразумевает, что в первой и третьей строках таблицы по одной ячейке. По этому для этих ячеек будет прописан атрибут colspan со значением 2. Благодаря этому атрибуту мы объединяем 2 ячейки в одну.

3) Для первой строки &lttr&gt мы задали высоту (height) 70px. В первой строке содержится одна ячейка &lttd&gt объединяющая в себе две ячейки. По этому для нее задан атрибут colspan со значением 2. Также для этой ячейки мы прописываем атрибут align и даем ему значение center, благодаря которому, текст написанный в этой ячейке будет выравниваться по центру. То есть заголовок который мы пишем, будет отображаться посередине ячейки.

4) Вторая строка содержит в себе 2 ячейки (меню и фото). В нашем сайте будут использованы фотографии, все они имеют размер 600×400 пикселей, по этому, чтобы все было ровно, мы задаем высоту нашей строки равную высоте фотографий, это значит 400px. Ширина всех фотографий 600px, по этому для второй ячейки &lttd&gt, где будет фото, мы задаем ширину 600px. Общая ширина таблицы у нас 750px, а ширина 2-ой ячейки средней строки 600px. Соответственно 1-ая ячейка средней строки будет иметь ширину 150px.

5) Для третьей строки &lttr&gt в которой будет текст, мы задали высоту 150px. Эта строка, как и первая строка, содержит в себе одну ячейку, которая объединила в себе две. По этому для этой ячейки &lttd&gt задан атрибут colspan со значением 2.

С составлением каркаса сайта мы закончили. Он будет одинаковый для каждой страницы сайта, по этому весь код со страницы index.html (в которой мы сейчас работали) мы копируем и вставляем в другие 3 файла нашего сайта (audi.html, bmw.html, mercedes.html).

Наполняем сайт контентом.

Структура сайта создана, теперь мы заполним контентом наши 4 страницы. Давайте начнем с audi.html.

1) Начнем мы с написания заголовка страницы. Заголовок прописывается с помощью тега &lth1&gt (6 урок).
На фото изображена только рассматриваемая часть кода страницы (1-ая строка &lttr&gt):

2) Теперь мы разместим меню в 1-ой ячейке 2-ой строки. Меню у нас будет состоять из 4 ссылок. Это ссылка на главную страницу (index.html) и 3 ссылки на страницы с марками авто.
На фото изображена только рассматриваемая часть кода страницы (1-ая ячейка &lttd&gt 2-ой строки &lttr&gt):

Для того, чтобы меню было расположено в столбик, после каждой ссылки в конце строки мы ставим тег &ltbr&gt отвечающий за перенос строки. Если Вы не поняли каким образом будут работать эти 4 ссылки, то перечитывайте 13 урок.

3) Сейчас мы вставим фотографию во 2-ую ячейку 2-ой строки. Мы редактируем страницу audi.html, соответственно добавляем фото автомобиля ауди. Если Вы забыли, то напомню, наши 4 фотографии лежат в папке image.
На фото изображена только рассматриваемая часть кода страницы (2-ая ячейка &lttd&gt 2-ой строки &lttr&gt):

4) Теперь у нас осталась одна не заполненная нижняя строка, в нее мы добавляем текстовое описание марки Audi. Текст который мы будем использовать в описании марок автомобилей, находится по этой ссылке .
На фото изображена только рассматриваемая часть кода страницы (3-я строка &lttr&gt):

Весь наш текст заключается в тег &ltp&gt. Если забыли, что это за тег, смотрите урок 6.

5) Страница почти готова. Для того чтобы наше творчество стало больше похоже на сайт, давайте зададим цвет фона страницы. Для этого тегу &ltbody&gt мы прописываем атрибут bgcolor и даем значение grey. Цвет фона стал серый. Теперь давайте зададим цвет фона нашей таблицы, для того чтобы она не сливалась с основным серым фоном страницы. Сделаем таблицу белой, для этого тегу &lttable&gt мы прописываем атрибут bgcolor и даем ему значение white.
На фото изображена только рассматриваемая часть кода страницы:

Если Вы все сделали верно, то при открытии через браузер, файл audi.html будет выглядеть так:

Теперь аналогичным образом пропишите код для страниц index.html, bmw.html, mercedes.html. На страницах будет меняться заголовок, фотография и текст . В результате должен получиться сайт из 4-ех страниц.

Если что-то не получилось, Вы можете скачать этот сайт по ссылке . Имея правильный вариант, Вы легко разберетесь в своих ошибках.

ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб сайтов под «ключ».

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

Веб-инструмент

Веб-мастерская

Веб-услуги

Веб-графика

Веб-ресурсы

Посмотрите в Google

Подписка

Подпишитесь на получение самых последних новостей и статей, с уведомлением по E-mail.

Опрос

Создание меню сайта. Создаем вторую и третью страницы сайта

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

Создание меню сайта

Приступаем к созданию меню. Пока наш сайт будет 3-х страничный: Главная страница, Услуги и страница Ссылок.

Пусть пункты меню сайта и называются соответственно: Главная, Услуги и Ссылки .

Для создания меню воспользуемся таблицей.

В данном случае для форматирования текста меню сайта применена таблица стилей CSS. Более подробно об этом изложено в разделе Основы CSS.

Вставим созданную таблицу в HTML-код нашей страницы.

<html>
<head>
<meta http — equiv= «Content — Type» content= «text/html; charset=windows — 1251» >
<title>Компания АВС</title>
</head>

<body>
<center>
<table border= «0» width= «1000» height= «600» >
<tr>
<td colspan= «2» bgcolor= » #00CC99″ width= «1000» height= «100» ><img src= «images/abc_top.g if » width= «1000» height= «100» ></td>
</tr>
<tr>
<td bgcolor= » #CCCCCC» height= «500» width= «200» background= «images/abc1.g if » valign= «top» align= «left» >
<table width= «200» >
<tr>
<td bgcolor= » #0000FF» ><span style= «color:#FFFFFF; font — weight:bold» >Меню</span></td>
</tr>
<tr>
<td style= «font — size:16px; font — family:sans — ser if ; color: #770000; font — weight:500″ >Главная</td>
</tr>
<tr>
<td style= «font — size:16px; font — family:sans — ser if ; color: #770000; font — weight:500″ >Услуги</td>
</tr>
<tr>
<td style= «font — size:16px; font — family:sans — ser if ; color: #770000; font — weight:500″ >Ссылки</td>
</tr>
</table>
</td>
<td width= «800» valign= «top» align= «left» >
<h1 align= «center» style= «color: #FF0000» >Компания АВС</h1>
<h2 align= «center» style= «color: #0000FF» >О компании</h2>
<p style= «font — size:large; color: #0000FF» ><a href= «abc_serv.html» ><img src= «images/abc.g if » border= «0» ></a> Компания АВС — поставки электронной техники ведущих мировых производителей.</p>
<p>В компании АВС вы всегда найдете:</p>
<ul>
<li> телевизоры
<li> видиомагнотофоны
<li> видеоплейеры
<li> музыкальные центры
<li> компьютеры
<li> принтеры и сканеры
<li> и другие товары.
</ul>
<p> Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта. </p>
<p>Компания оказывает <a href= «abc_serv.html» >услуги</a> по обслуживанию продаваемой электоники.</p>
<p><a href= «mailto:abc@mail.ru» >Пишите сюда</a></p>
</td>
</tr>
</table>
</center>
</body>
</html>

Теперь наша страница будет выглядеть ТАК.

Создание второй страницы сайта

Осталось сделать вторую и третью страницу сайта. Для того чтобы упростить работу сделаем так — сохраним нашу страницу index.html под другим именем servis.html , а затем подредактируем файл.

Выбираем в блокноте команду Файл->Сохранить как. , выбираем ту-же директорию где находиться файл index.html , пишем имя страницы под которой мы хотим сохранить файл servis.html и жмем ОК.

Т.е. на компьютере у вас должно быть 2 пока что одинаковых страницы — index.html и servis.html .

Теперь изменим название страницы (между тегами <title> и </title> ), и изменим текст страницы, например вот так:

<html>
<head>
<meta http — equiv= «Content — Type» content= «text/html; charset=windows — 1251» >
<title>Услуги компании АВС</title>
</head>

<body>
<center>
<table border= «0» width= «1000» height= «600» >
<tr>
<td colspan= «2» bgcolor= » #00CC99″ width= «1000» height= «100» ><img src= «images/abc_top.g if » width= «1000» height= «100» ></td>
</tr>
<tr>
<td bgcolor= » #CCCCCC» height= «500» width= «200» background= «images/abc1.g if » valign= «top» align= «left» >
<table width= «200» >
<tr>
<td bgcolor= » #0000FF» ><span style= «color:#FFFFFF; font — weight:bold» >Меню</span></td>
</tr>
<tr>
<td style= «font — size:16px; font — family:sans — ser if ; color: #770000; font — weight:600″ >Главная</td>
</tr>
<tr>
<td style= «font — size:16px; font — family:sans — ser if ; color: #770000; font — weight:600″ >Услуги</td>
</tr>
<tr>
<td style= «font — size:16px; font — family:sans — ser if ; color: #770000; font — weight:600″ >Ссылки</td>
</tr>
</table>
</td>
<td width= «800» valign= «top» align= «left» >
<H1 align= «center» style= «color: #0000FF» >Услуги компании</H1>
<p>Компания АВС оказывает следующие услуги потребителям нашей продукции:</p>
<UL>
<LI>Продажа электроники
<LI>Установка и настройка нового электронного оборудования
<LI>Продажа комплектующих на продоваемую электронику
<LI>Ремонт электронной техники </LI>
</UL>
</td>
</tr>
</table>
</center>
</body>
</html>

И сохраним. (Файл -> Сохранить).

Теперь наша страница будет выглядеть ТАК.

Создание третей страницы сайта

По такому же алгоритму создадим третью страницу сайта ssilki.html .

<html>
<head>
<meta http — equiv= «Content — Type» content= «text/html; charset=windows — 1251» >
<title>Ссылки сайта</title>
</head>

<body>
<center>
<table border= «0» width= «1000» height= «600» >
<tr>
<td colspan= «2» bgcolor= » #00CC99″ width= «1000» height= «100» ><img src= «images/abc_top.g if » width= «1000» height= «100» ></td>
</tr>
<tr>
<td bgcolor= » #CCCCCC» height= «500» width= «200» background= «images/abc1.g if » valign= «top» align= «left» >
<table width= «200» >
<tr>
<td bgcolor= » #0000FF» ><span style= «color:#FFFFFF; font — weight:bold» >Меню</span></td>
</tr>
<tr>
<td style= «font — size:16px; font — family:sans — ser if ; color: #770000; font — weight:600″ >Главная</td>
</tr>
<tr>
<td style= «font — size:16px; font — family:sans — ser if ; color: #770000; font — weight:600″ >Услуги</td>
</tr>
<tr>
<td style= «font — size:16px; font — family:sans — ser if ; color: #770000; font — weight:600″ >Ссылки</td>
</tr>
</table>
</td>
<td width= «800» valign= «top» align= «left» >
<H1 align= «center» style= «color: #0000FF» >Ссылки</H1>
<p>Компания поддерживает отношения со следующими Интернет — ресурсами:</p>
<ul>
<li><a href= «http: //sevidi.ru/» target= «_blank» >Веб — студией Sevidi</a></li>
<li><a href= «http: //sevidi.narod.ru/» >Сайтом о сайтах</a> </li>
</ul>
</td>
</tr>
</table>
</center>
</body>
</html>

Cохраним. (Файл -> Сохранить).

Теперь наша страница будет выглядеть ТАК.

Теперь осталось установить связь между созданными страницами. Для этого «оживим» созданное нами меню.

Откроем, используя редактор Блокнот, Главную страницу нашего сайта index.html и в разделе меню внесем следующие изменения в HTML-код:

<html>
<head>
<meta http — equiv= «Content — Type» content= «text/html; charset=windows — 1251» >
<title>Компания АВС</title>
</head>

<body>
<center>
<table border= «0» width= «1000» height= «600» >
<tr>
<td colspan= «2» bgcolor= » #00CC99″ width= «1000» height= «100» ><img src= «images/abc_top.g if » width= «1000» height= «100» ></td>
</tr>
<tr>
<td bgcolor= » #CCCCCC» height= «500» width= «200» background= «images/abc1.g if » valign= «top» align= «left» >
<table width= «200» >
<tr>
<td bgcolor= » #0000FF» ><span style= «color:#FFFFFF; font — weight:bold» >Меню</span></td>
</tr>
<tr>
<td style= «font — size:16px; font — family: sans — ser if ; color: #770000; font — weight:600″ ><a href= «index5.html» >Главная</a></td>
</tr>
<tr>
<td style= «font — size:16px; font — family:Arial; color: #770000; font — weight:600» ><a href= «servis.html» target= «_blank» >Услуги</a></td>
</tr>
<tr>
<td style= «font — size:16px; font — family:Arial; color: #770000; font — weight:600» ><a href= «ssilki.html» >Ссылки</a></td>
</tr>
</table>
</td>
<td width= «800» valign= «top» align= «left» >
<h1 align= «center» style= «color: #FF0000» >Компания АВС</h1>
<h2 align= «center» style= «color: #0000FF» >О компании</h2>
<p style= «font — size:large; color: #0000FF» ><a href= «abc_serv.html» ><img src= «images/abc.g if » border= «0» ></a> Компания АВС — поставки электронной техники ведущих мировых производителей.</p>
<p>В компании АВС вы всегда найдете:</p>
<ul>
<li> телевизоры
<li> видиомагнотофоны
<li> видеоплейеры
<li> музыкальные центры
<li> компьютеры
<li> принтеры и сканеры
<li> и другие товары.
</ul>
<p> Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта. </p>
<p>Компания оказывает <a href= «abc_serv.html» >услуги</a> по обслуживанию продаваемой электоники.</p>
<p><a href= «mailto:abc@mail.ru» >Пишите сюда</a></p>
</td>
</tr>
</table>
</center>
</body>
</html>

Cохраним. (Файл -> Сохранить).

Теперь наша страница будет выглядеть ТАК.

Внесем соответствующие изменения во вторую HTML-страницу сайта:

<html>
<head>
<meta http — equiv= «Content — Type» content= «text/html; charset=windows — 1251» >
<title>Услуги компании АВС</title>
</head>

<body>
<center>
<table border= «0» width= «1000» height= «600» >
<tr>
<td colspan= «2» bgcolor= » #00CC99″ width= «1000» height= «100» ><img src= «images/abc_top.g if » width= «1000» height= «100» ></td>
</tr>
<tr>
<td bgcolor= » #CCCCCC» height= «500» width= «200» background= «images/abc1.g if » valign= «top» align= «left» >
<table width= «200» >
<tr>
<td bgcolor= » #0000FF» ><span style= «color:#FFFFFF; font — weight:bold» >Меню</span></td>
</tr>
<tr>
<td style= «font — size:16px;font — family:sans — ser if ; color: #770000;font — weight:600″ ><a href= «index6.html» target= «_blank» >Главная</a></td>
</tr>
<tr>
<td style= «font — size:16px; font — family:sans — ser if ; color: #770000; font — weight:600″ ><a href= «servis1.html» >Услуги</a></td>
</tr>
<tr>
<td style= «font — size:16px; font — family:sans — ser if ; color: #770000; font — weight:600″ ><a href= «ssilki1.html» target= «_blank» >Ссылки</a></td>
</tr>
</table>
</td>
<td width= «800» valign= «top» align= «left» >
<H1 align= «center» style= «color: #0000FF» >Услуги компании</H1>
<p>Компания АВС оказывает следующие услуги потребителям нашей продукции:</p>
<UL>
<LI>Продажа электроники
<LI>Установка и настройка нового электронного оборудования
<LI>Продажа комплектующих на продоваемую электронику
<LI>Ремонт электронной техники </LI>
</UL></td>
</tr>
</table>
</center>
</body>
</html>

Cохраним. (Файл -> Сохранить).

Теперь наша страница будет выглядеть ТАК.

Внесем соответствующие изменения в третью HTML-страницу сайта:

<html>
<head>
<meta http — equiv= «Content — Type» content= «text/html; charset=windows — 1251» >
<title>Ссылки сайта</title>
</head>

<body>
<center>
<table border= «0» width= «1000» height= «600» >
<tr>
<td colspan= «2» bgcolor= » #00CC99″ width= «1000» height= «100» ><img src= «images/abc_top.g if » width= «1000» height= «100» ></td>
</tr>
<tr>
<td bgcolor= » #CCCCCC» height= «500» width= «200» background= «images/abc1.g if » valign= «top» align= «left» >
<table width= «200» >
<tr>
<td bgcolor= » #0000FF» ><span style= «color:#FFFFFF; font — weight:bold» >Меню</span></td>
</tr>
<tr>
<td style= «font — size:16px; font — family:sans — ser if ; color: #770000; font — weight:600″ ><a href= «index6.html» target= «_blank» >Главная</a></td>
</tr>
<tr>
<td style= «font — size:16px; font — family:sans — ser if ; color: #770000; font — weight:600″ ><a href= «servis1.html» target= «_blank» >Услуги</a></td>
</tr>
<tr>
<td style= «font — size:16px; font — family:sans — ser if ; color: #770000; font — weight:600″ ><a href= «ssilki1.html» >Ссылки</a></td>
</tr>
</table>
</td>
<td width= «800» valign= «top» align= «left» >
<H1 align= «center» style= «color: #0000FF» >Ссылки</H1>
<p>Компания поддерживает отношения со следующими Интернет — ресурсами:</p>
<ul>
<li><a href= «http: //www/» target= «_blank» >Веб — студией Sevidi</a></li>
<li><a href= «http: //localhost/» >Сайтом о сайтах</a> </li>
</ul>
</td>
</tr>
</table>
</center>
</body>
</html>

Cохраним. (Файл -> Сохранить).

Теперь наша страница будет выглядеть ТАК.

Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить в интернете.