Как создать простой сайт в блокноте. - Сайты. Сделай сам! Думаем, анализируем, разбираемся. - Каталог статей - Rаботница.
Четверг, 08.12.2016, 01:18
Главная Регистрация RSS
Приветствую Вас, Гость
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
...

Проверка ТИЦ
Главная » Статьи » Сайты. Сделай сам! Думаем, анализируем, разбираемся.

Как создать простой сайт в блокноте.
Итак, давайте попробуем сделать простой одностраничный сайт с помощью блокнота.
Если вы откроете любую страничку в интернете, и щелкните правой кнопкой мыши - просмотр
кода страницы - увидите набор знаков вперемешку с текстом. Так, вот, эти знаки именуются тэгами.
Они обычно заключаются в скобки. Тэг <html> - начало интернет страницы, тэг </html> показывает,
что страница закончена.
Далее пишется тэг <head> - голова или шапка. В следующей строке идет тэг <title> - название.
Далее - <body> - тело документа. В нем пишем всю интересующую нас информацию: фотографии,
текст, стихи.
Любой сайт имеет основу или каркас. Этот каркас будем создавать с помощью таблицы, которая
состоит из столбцов и строк. Например, вот такой сайт


Рассмотрим. Это табличный сайт, состоящий из трех строк (горизонтальные) и двух столбцов (вертикальные).
В первом столбце (картинки и текст) находится вложенная таблица.
Для создания таблицы применяют тэги <table></table>
Для создания строки тэги <tr></tr>.
Определение ячейки в таблице тэги<td></td>
Тэг <table width="#"> устанавливает ширину таблицы в пикселах или процентах от ширины документа.
Тэг <table height="#"> устанавливает высоту таблицы в пикселах или процентах от высоты документа.
rowspan- этот параметр задает объединение соседних ячеек столбца в одну большего размера. При этом соседние ячейки не уничтожаются, а лишь скрываются, пока соседняя ячейка использует их пространство.
<td rowspan=количество строк >
colspan- этот параметр задает объединение соседних ячеек строки в одну большего размера. При этом соседние ячейки не уничтожаются, а лишь скрываются, пока соседняя ячейка использует их пространство.
<TD colspan=количество колонок >
cellspacing="0" – определяет расстояние между ячейками таблиц, а также между границами ячеек и границей таблицы.
cellpadding="10" – пространство между границей ячейки и ее содержимым.
align="center" - выравнивание по центру.
Записываем все. У нас три строки, два столбца. Второй столбец объединяет две строки. Параметр rowspan
Вторая строка - один столбец. Третья строка - один столбец, объединящий три столбца. Парамерт colspan
Имеем: <html>

<head>
<title>Заголовок документа</title>
</head>

<body>

<table width="715" border="1"
align="center" cellspacing="0" cellpadding="10">

<tr bgcolor="# 777777">
<td width="70%" height="60">Санкт-Петербург</td>
<td rowspan="2">меню</td>
</tr>

<tr bgcolor="# 777777"">
<td height="200">Содержимое сайта
</td>
</tr>
<tr bgcolor="#00aabb">
<td colspan="2" height="30">мой сайт</td>
</tr>

</table>

</body>

</html>
Если никто ничего не понял, копируем этот текст в блокнот.
Дальше. Вставляем таблицу, состоящую из двух столбцов
и трех строк.
Код таблицы.

<table width="470" border="1"
align="center" cellspacing="0" cellpadding="10">

<tr>
<td width="100"><img src=" "></td>
<td>Текст</td>
</tr>

<tr>
<td width="100"><img src=" "></td>
<td>Текст</td>
</tr>

<tr>
<td width="100"><img src=" "></td>
<td>Текст</td>
</tr>

</table>
Полностью код страницы (сайта) выглядит так:
<html>

<head>
<title>Заголовок документа</title>
</head>

<body>

<table width="715" border="1"
align="center" cellspacing="0" cellpadding="10">

<tr bgcolor="# 777777">
<td width="70%" height="60"><center>Cанкт-Петербург </center></td>
<td rowspan="2">Меню </td>
</tr>

<tr bgcolor="# 777777">
<td height="200">

<table width="470" border="1"
align="center" cellspacing="0" cellpadding="10">

<tr>
<td width="100">"Картинка"</td>
<td>Текст </td>
</tr>

<tr>
<td width="100">"Картинка" </a> </td>
<td>Текст</td>
</tr>

<tr>
<td width="100">"Картинка" </a></td>
<td>Текст</td>
</tr>

</table>


</td>
</tr>
<tr bgcolor="#00aabb">
<td colspan="2" height="30">Мой сайт</td>
</tr>

</table>

</body>

</html>

Вместо "Картинка" пишете тэг <img src=" После кавычек идет ссылка на ваше изображение в интернете.
Изображение можно хранить на каком нибудь хостинге, который дает код изображения: Яндекс фотки, Пикаса, Радикал фото
и.т.д. Например. <img src="http://img-fotki.yandex.ru/get/4800/хххх.jpg" Другой способ. Изображение найдено в поиске по картинкам.
Щелкаем по картинке правой кнопкой мыши, выбираем Копировать URL картинки (в гугл хроме), копировать адрес изображения (в опера). Вставляем после <img src="
1. Прочитать статью.
2. Открыть блокнот.
3. Если не поняли, скопировать код и вставить свои картинки.
4. Написали код сайта, файл сохранить как index.html Тип файла- все файлы.
Кодировка ANSI.
5. Закрываем блокнот. Идем туда где сохранили, видим значок веб документа, браузера, который у вас установлен по умолчанию.
Щелкаем по нему два раза, или открыть с помощью другого обозревателя, видим свою созданную страницу. Выделенное красным цветом можно заменить.




Категория: Сайты. Сделай сам! Думаем, анализируем, разбираемся. | Добавил: letoirina (17.04.2011)
Просмотров: 18241 | Комментарии: 10 | Теги: картинка, таблица, HTML, сайт, тэги, код, блокнот
Всего комментариев: 10
10  
Судя по количеству тэгов, я понимаю, что создать сайт в блокноте не сложно. Для этого потребуется желание, время и самая простая cms для сайта, например на сайте prob2b.biz/.

9  
837245 http://tadalafilall.net/#3364 tadalafilall.net

8  
870436 http://paydayloansall.net/#190585 payday loan default texas

7  
409639 http://paydayloansall.net/#761484 payday advance in los angeles ca

6  
п»ї323509 http://cashforchristmas.pro/#910348 no fax guaranteed payday loan http://cashforchristmas.pro/#118076 - cashforchristmas.pro payday advance knoxville

5  
п»їg46n http://inspaydayloans.pro/#a16e rules of payday http://inspaydayloans.pro/#gy39 - instant approval payday loan lenders payday advance faxless

4  
http://www.sarvajal.com - viagra

3  
п»їdq73 http://bestdoxycycline.net/#nh91 how much does doxycycline cost http://bestdoxycycline.net/#om82 - buy doxycycline online doxycycline expired

2  
http://gfkdjghfkgjjkhj.com - gfkdjghfkgjjkh

1  
http://epidemz.biz

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]