banner-nano
banner_remont

Сайт с помощью блокнота

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

Кроме всевозможных CMS, сайт можно создать и «с нуля», в блокноте. Причем это будет самый лучший сайт, т.к. каждую часть кода вы прописываете собственноручно.

Чтобы создать первую пустую страницу, вам нужно с помощью блокнота прописать код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>XHTML 1.0 документ</title>
</head>
<body>

</body>
</html>

Посмотреть пример>>

После этот код сохранить файл как index.html в корневом каталоге вашего будущего сайта. И немного о значениях тегов:

  • <!DOCTYPE> указывает тип документа и его характеристики, к примеру, в данном случае определен XHTML 1.0 Transitional.
  • <html> и </html> показывает начало и конец документа.
  • <head>, </head> — служебная секция документа. Тут могут размещаться команды для браузеров, ссылки на отдаленные скрипты и файлы, а также инструкции для поисковых роботов.
  • <meta />. Тут могут быть инструкции для поисковых роботов и браузеров.
  • <title>, </title> — Заголовок документа, который не виден на странице, но виден на вкладке браузера.
  • <body>, </body> — видимая часть страницы.

index.html — это главная страница сайта. Потому такой файл может быть лишь один для одного сайта.

Начальное оформление страницы

В блокноте пропишем код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Название документа</title>
</head>
<body>
<h2>Заголовок второго уровня</h2>
<p>Параграф</p>
<p>Второй параграф.</p>
</body>
</html>

Посмотреть пример>>

Новые теги:

  • <h1> — </h6> заголовок с 1-го по 6-й уровень, где <h1> — самый большой, <h6> — самый маленький.
  • <p>, </p> — параграф.

Теги редактирования текста:

  • <b> </b> — жирный;
  •  <i> </i> — курсив;
  • <ins> </ins> — подчёркнутый;
  • align="center", align="left", align="right" — текст по центру, по левому или правому краю;
  • style=" " — стиль текста, стили задаются в файле style.css, но так же могут присутствовать на странице, если нужно задать стиль внутри тега <body> </body>;
  • color: — параметр цвета;
  • background-color: — параметр фона.
Гиперссылки

Для создания ссылки нам нужен будет документ, на которой будет вести данная ссылка. Назовём его page2.html. Сначала добавим ссылку в index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Название документа</title>
</head>
<body>
<h2>Заголовок второго уровня</h2>
<p>Параграф</p>
<p>Второй параграф.</p>
<p>Продолжение на <a href="page2.html" title="Ссылка на вторую страницу">второй странице</a>.</p>

</body>
</html>

Далее заполняем файл page2.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Вторая страница</title>
</head>
<body>
<h1 align="center">Вторая страница</h1>
<p>Первый параграф</p>
<p>Вернуться <a href="index.html" title="Ссылка на главную страницу">на главную</a></p>
</body>
</html>

Посмотреть пример>>

Новые теги:

  • <a> </a> — начало и конец гиперссылки;
  • href=" " — путь ссылки;
  • title=" " — подсказка, которая всплывает при наведении на ссылку.

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

Изображения

Копируем в общую папку нужное вам изображение и добавляем его в код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Изображение</title>
</head>
<body style="color:#eeee22; background-color:#3980bf">
<img src="cat.jpg" alt="Котёнок" hspace="50" vspace="40" />
<p>Автор изображения</p>
</body>
</html>

Посмотреть пример>>

Новые теги:

  • <img /> — определяет изображение;
  • alt=" " — альтернативный текст изображения;
  • src=" " — источник выводимого на страницу изображения;
  • vspace=" " и hspase=» «- отступы по вертикали и горизонтали от изображения, указываются в пикселях.
Таблицы

Теперь сделаем таблицу:

<body>
<table border="2" height="100" width="614">
<tr>
<td>Первый столбец первой строки</td>
<td>Второй столбец первой строки</td>
<td>Третий столбец первой строки</td>
</tr>
<tr>
<td>Первый столбец второй строки</td>
<td>Второй столбец второй строки</td>
<td>Третий столбец второй строки</td>
</tr>
</table>
</body>
</html>

Посмотреть пример>>

Новые теги:

  • <table>, </table> — тег таблицы;
  • <tr>, </tr> — строка;
  • <td>, </td> — столбец;
  • border=" " — рамка таблицы;
  • width=" " и height=" " — ширина и высота таблицы, может указываться в пикселях или в процентах.

Также можно использовать атрибуты как для тега <table>, так и для тегов <tr> и <td>:

  • cellpadding=" " — расстояние между текстом и границей ячейки;
  • cellspacing=" " — расстояние между ячейками (столбцами и строками);
  • теги style=" ", color:, background-color:, описанные выше для определения цвета ячеек, цвета шрифта, стиля теста.
Вёрстка сайта

Сверстаем страницу:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Сверстаем XHTML-страницу</title>
</head>
<body style="background-color:#ffffcc; color:#008800">
<br />
<h2 align="center">Первая XHTML-страница</h2>
<br />
<div align="center">
<img src="../images/kiss.jpg" width="400" height="250" alt="Картинка" vspace="20" />
</div>
<p align="center" style="font-size:17px">Текст1<br />
Текст2<br />
Текст3<br />
Текст4</p>
<p align="center"><i>Автор</i></p>
<br />
<hr />
</body>
</html>

Посмотреть пример>>

Новые теги:

  • <div>, </div> — секция(блок) документа, таких блоков может быть много;
  • <br / > — перенос строки;
  • <hr /> — Рисует горизонтальную линию, вид которой зависит от параметров,используемых вами, а также от браузера. Данный тег относится к блочным элементам, линия всегда начинается с новой строки, все элементы после данной линии отображаются с другой строки.

Стоит обратить внимание на тег src="../images/kiss.jpg". Данный тип записи тега понимает под собой, что документ лежит в отличной папке от изображения.

Вот, в принципе и всё. Несложный сайт уже создан. Таким образом можно написать огромное количество страниц. Конечно, этих знаний будет мало — это только базовые данные, которых хватит для создания простейшего сайта. Для более сложных проектов нужны будут более глубокие знания HTML, PHP и CSS.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники
Copy Protected by Chetan's WP-Copyprotect.