 Пример создания сайта
Теги HTML
Таблицы HTML
Форматирование текста
Выравнивание данных
Цветовая гамма сайта
Вставка рисунка,фото
Ссылки на другие файлы
Бегущая строка
Создание списков
Анимация изображения
Создание фреймов
Вставка видео и музыки
Фоновая музыка
Ключевые слова
 Размещение сайта в Интернете
Продвижение сайта в Интернете
Заработок в Интернете
Программы для компьютера
Visual Basic 6.0 с примерами
VBScript
Руководство по C++
JavaScript
|
Простой и быстрый способ создания сайта-это создание при помощи CMS. CMS - "Content Management System" или "Система Управления Контентом". Это оболочка управления сайтом которая позволяет редактировать данные в большинстве своем без хорошего знания html, языков программирования.Более подробно вы можете ознакомиться здесь.Ввиду того,что у CMS есть плюсы но и существенные минусы мы рассмотрим создание сайта без CMS.
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
|
Начнем с создания простого сайта.Во первых необходимо создать папку к примеру в "Мои документы" и назвать например "мой первый сайт".В эту папку вы должны помещать все документы связанные с созданием сайта.
Для описания страницы применяются теги.В основном они парные,то есть один открывает тег например <html>, а другой закрывает </html>
Напишем необходимый минимальный набор тегов.Для этого можно использовать любой текстовый редактор,сохраняющий документ в формате HTML. |
<table Border=0 CellSpacing=0 CellPadding=0
Width="%" Align="" vAlign="">
<tr>
<td></td> <td></td> <td></td>
<tr>
<td></td> <td></td> <td></td>
<tr>
<td></td> <td></td> <td></td>
</tr>
</table>
|
Далее приступим к созданию таблицы.Составим таблицу, что бы разместить наши данные в тех частях страницы в которых мы хотим их видеть.Таблицы для того и служат чтобы представлять данные по всей странице.Сделаем таблицу из 3строк(</tr>) и 3 столбцов (</td>) всего 9 ячеек.:
Пишем код этой таблицы
|
Так таблица будет выглядеть:
<table width="100%" height="100%">
<tr bgcolor="#B3FDB2">
<td width="20%" height="10%"></td>
<td> </td>
<td width="20%" height="10%"></td>
</tr>
<tr bgcolor="#D0D2FF">
<td width="20%"height="8%"></td>
<td></td>
<td width="20%"height="8%"></td>
</tr>
<tr bgcolor="#FFF0F0">
<td width="20%"></td>
<td></td>
<td width="20%"></td>
</tr>
</table> |
Теперь приступим к точной разметке таблицы введя теги width и height в тег<td>таблицы.
Ширину width и высоту height таблицы можно задавать в пикселях или в процентах от размера монитора. В пикселях можно более точно установить размеры таблицы,но сейчас мы будем указывать в процентах,так как в дальнейшем не придется дополнительно описывать процедуру адаптации сайта под различное разрешение экрана у посещающих ваш сайт пользователей.
В теге <table> установим высоту и ширину=100%. В теге <td>указываем проценты от размера таблицы а также желательно сразу указать цвет строк,чтобы таблица была видна.
|
Вы можете увидеть таблицу здесь
<table width="100%" height="100%">
<tr bgcolor="#B3FDB2">
<td width="20%" height="10%"></td>
<td> <h2>Мой сайт о дизайне</h2></td>
<td width="20%" height="10%"></td>
</tr>
<tr bgcolor="#D0D2FF"> <td width="20%"height="8%"></td>
<td></td>
<td width="20%"height="8%"></td>
</tr>
<tr bgcolor="#FFF0F0"><td width="20%"></td>
<td> Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.
<</td>
<td width="20%"></td>
</tr>
</table>
|
Далее будем наполнять содержимым наш сайт
Напишем во 2 ячейке название страницы,сразу задайте размер шрифта <h2>Мой сайт о дизайне </h2>,в 5 ячейке<h3> Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.</h3>
|
А теперь добавим в наш сайт картинки дизайна.Чтобы вставить картинку или фото на сайт применяется тег<img src="имя.jpg">
<table width="100%" height="100%">
<tr bgcolor="#B3FDB2">
<td width="20%" height="10%"><img src="landshaft1.jpg"></td>
<td> Мой сайт о дизайне</td>
<td width="20%" height="10%"><img src="landshaft2.jpg"></td>
</tr>
<tr bgcolor="#D0D2FF"> <td width="20%"height="8%"></td>
<td></td>
<td width="20%"height="8%"></td>
</tr>
<tr bgcolor="#FFF0F0"><td width="20%">></td>
<td>Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.</td>
<td width="20%"></td>
</tr>
</table> |
Выделите эту таблицу и скопируйте между тегами <body>и</body> в минимальном наборе тегов,которые вы писали в самом начале.
Можно посмотреть как продвигается создание вашей страницы
<html>
<head>
<title> </title>
</head>
<body> <table width="100%" height="100%">
<tr bgcolor="#B3FDB2"> <td width="20%" height="10%"><img src="landshaft1.jpg"></td>
<td> Мой сайт о дизайне</td>
<td width="20%" height="10%"><img src="landshaft2.jpg"></td>
</tr>
<tr bgcolor="#D0D2FF"> <td width="20%"height="8%"><a href="site5.html"> Главная</a></td>
<td><a href="site5.html">Садовый дизайн</a></td>
<td width="20%"height="8%"><a href="site5.html">Дизайн интерьера</a></td>
</tr>
<tr bgcolor="#FFF0F0"><td width="20%">>< </td>
<td>Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.
</td><td width="20%"> <a href="site5.html">Дизайн для кухни
</a></td>
</tr>
</table>
</body>
</html> |
Приступим к дальнейшей вставке содержимого в сайт.Придумайте название сайта и впишите его в заголовок между тегами <TITLE> и </TITLE>Заголовок будет располагаться в самом верху за пределами рабочей области.
Седьмую ячейку отдадим под меню. Заполните ячейки содержимым сайта к примеру ,в 4 ячейке- Главная, в 5 ячейке-Садовый дизайн, в 6 ячейке-Внутренний дизайн, в 9 ячейке-Кухонный дизайн.
На 4,5,6,9 ячейку тоже создаются вторые страницы со ссылками на них |
Смотрим первую страницу сайта
Осталось немного,увеличить шрифт и расположить его в середине.
В Мой сайт о дизайне добавьте размер шрифта<h3> и измените шрифт основного текста значением<h2></h2> а также разместите эти надписи по центру <center></center>
<html>
<head>
<title> </title>
</head>
< body> <table width="100%" height="100%">
<tr bgcolor="#B3FDB2">
<td width="20%" height="10%"><img src="landshaft1.jpg"></td>
<td><center> <h3> Мой сайт о дизайне</h3></center></td>
<td width="20%" height="10%"><img src="landshaft2.jpg"></td>
</tr>
<tr bgcolor="#D0D2FF"> <td width="20%"height="8%"><center><a href="site1-2.html"> Главная</a></center></td>
<td><center><a href="site5.html">Садовый дизайн</a></center></td>
<td width="20%"height="8%"><center><a href="site5.html">Дизайн интерьера</a></center></td>
</tr>
<tr bgcolor="#FFF0F0"><td width="20%"> </td><td><center><h2>Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.</h2></center></td>
<td width="20%"> <center><a href="site5.html">Дизайн для кухни</center></a></center></td>
</tr>
</table>
</body>
</html> |
Вот теперь вы можете посмотреть первую страницу
Создайте вторую страницу сайта.Скопируйте минимальный набор тегов которые мы писали в самом начале создания сайта и вставьте в текстовый редактор. Сохраните его под именем site2.html.Это и будет вторая страница сайта на которую мы будем делать ссылку.Откройте site2.html в текстовом редакторе и напишите
Я покажу вам свои фотографииа также задайте цвет <font color="#FF0000"></font>и размер<h2></h2>
<html>
<head>
<title> </title>
</head>
<body font color="#FF0000"><h2>Я покажу вам свои фотографии</h2></font>
</body>
</html>
|
Вставьте на страницу фотографии
<img src="land1.jpg">
<img src="land2.jpg">
<html>
<head>
<title> </title>
</head>
<body><h2>Я покажу вам свои фотографии</h2>
<img src="land1.jpg"><span style="padding:0px 20px;"></span>
<img src="land2.jpg"> </body>
</html>
|
Смотрим на вторую страницу
Сделаем ссылку на эту страницу в первой странице.
Ссылки создаются тегом <a href="имя страницы.html">Ссылка</a>
Скопируйте тег <a href="site2.html">Мои фото</a> и вставьте его на первой странице в 7 ячейке таблицы
<html>
<head>
<title> </title>
</head>
<body>
<table width="100%" height="100%">
<tr bgcolor="#B3FDB2">
<td width="20%" height="10%"><img src="landshaft1.jpg"></td>
<td><center><h3>Мой сайт о дизайне</h3></center></td>
<td width="20%" height="10%"><img src="landshaft2.jpg"></td>
</tr>
<tr bgcolor="#D0D2FF">
<td width="20%"height="8%"><center><a href="site1-2.html">Главная</a></center></td>
<td><center><a href="site5.html">Садовый дизайн</a></center></td>
<tdwidth="20%"height="8%"><center><a href="site5.html">Дизайн интерьера</a></center>
</td> </tr>
<tr bgcolor="#FFF0F0">
<td width="20%"> <a href="site2.html">Мои фото<a></td>
<td><center><h2>Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.</h2></center></td>
<td width="20%"><a href="site5.html">Дизайн для кухни</a></center></td>
</tr>
</table>
</body>
</html> |
Для страниц со ссылок:
Садовый дизайн
Дизайн интерьера
Дизайн для кухни
создаются отдельные страницы.Я объединил эти ссылки в файл site5.html.
Вот мы и сделали сайт и вы его можете посмотреть здесь
В папке которую вы создали в начале урока должны быть файлы
tab1.html
tab3.html
landshaft1.jpg
landshaft2.jpg
site1-1.html
site1-2.html
site1-3.html
site2.html
site5.html
land1.jpg
land2.jpg
Важные советы
Когда будете делать свой сайт, главную или первую страницу сайта (у нас она называется site1-3.html) всегда сохраняйте под именем index.html При загрузке с сервера она будет загружаться первой, и возьмите себе за правилосразу ее так и называть, в дальнейшем вы не будете путаться при создании ссылок.Папка, в которой будете хранить файлы для сайта должна называться htdocs. Создавая сайт в одном браузере обязательно просмотрите его в других,потому что сайт созданный к примеру в OPERA может совсем по другому выглядеть к примеру в INTERNET EXPLORER
Удачи!
|
|
