Партнерка на США и Канаду по недвижимости, выплаты в крипто

  • 30% recurring commission
  • Выплаты в USDT
  • Вывод каждую неделю
  • Комиссия до 5 лет за каждого referral

Создание сайта на HTML

Cоздавать сайты на HTML можно в Блокноте, Microsoft Word и других текстовых редакторах.

Не многие знают, что для создания простейшей страницы в интернете, не обязательно знать в совершенстве распространенные языки программирования (PHP, Perl, JavaScipt), нет необходимости изучать громоздское программное обеспечение (Dreamweaver, Frontpage), графические редакторы (Photoshop, CorelDraw), а вполне достаточно воспользоваться обычными текстовыми редакторами, программой Блокнот, Microsoft Word, Wordpad и чуточку подучить HTML.

Ниже будет разобрано, как можно создать простейший сайт на HTML в Блокноте, Microsoft Word, Wordpad и других текстовых редакторах.

На самом деле, принцип создания сайтов, с помощью HTML, в текстовых редакторах везде одинаков, поэтому для примера мы будем использовать стандартную программу Блокнот для Windows и Microsoft Word.

Широко используется при создании и редактировании сайта, конечно, Блокнот для Windows. Это незаменимый инструмент для любого вебмастера! Быстро отредактировать код, просмотреть содержимое страниц, открыть любые файлы на. php, .html, .css и др. Нас интересует в первую очередь вопрос о создании сайта на HTML через Блокнот.

Как создать сайт в Блокноте?

Чтобы создать сайт с помощью Блокнота можно выбрать 2 варианта. Мы можем воспользоваться при создании сайта стандартным Блокнотом для Windows, либо скачать более усовершенствованные Блокноты, такие как Notepad2, RapidPHP и др.

Блокнот Notepad2, например, является самым оптимальным и легким для работы с файлами. php, .html. Но мы будем использовать стандартный Блокнот. Он есть у всех и с этим проблем не возникает.

Открываем программу блокнот в Windows: «Пуск» — «Все программы» — «Стандартные» — Блокнот.

Схема такая:

1. Прописываем структуру документа на HTML. Простейшая структура выглядит так:

1

2

3

4

5

6

7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN”>

<HTML>

<HEAD><!-- Начало заголовка -->

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

</HEAD><!-- Конец заголовка -->

<BODY>Основной текст документа</BODY>

</HTML>

Где,

·  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN”> — 1-я строчка определяет версию языка HTML, оптимальная версия 4.01, поэтому эта строчка, как правило, у всех сайтов одинаковая.

·  <HTML></HTML> — 2-я и 7-я строчки, говорят браузеру об открытии и закрытии HTML документа.

·  <HEAD></HEAD>, <TITLE></TITLE> — с 3-я, 4-я, 5-я строчки определяют заголовок документа и тегами <TITLE></TITLE> указывается название сайта.

·  <BODY></BODY> — 6-я строчка это тело документа. Здесь прописывается весь текст сайта, меню и др.

Пока сильно вникать в создание сайта не надо, просто пропишите представленный код у себя в Блокноте и сохраните файл в формате .html. Для этого переходим в меню «Файл» — «Сохранить как». Тип файла выбираем «Все файлы» и имя файла прописываем, например index. html. Теперь открываем файл в браузере (Internet Explorer, Mozilla Firefox) и смотрим, что у нас получилось.

Как видите, создание сайта через Блокнот не такое уж и сложное занятие. Идем дальше…

2. Создаем структуру страницы, где у нас будет находиться шапка сайта, где меню, а где текст страницы.

Делается это с помощью блочной верстки, либо таблиц. Мы будем размещать компоненты сайта с помощью таблиц. Таблицы в HTML определяются тегом <TABLE></TABLE>, где строка прописывается тегом<tr></tr>, а столбец <td></td>. Давайте попробуем прописать нужную нам таблицу. Мы разобьем страницу на 3 части, первая будет отвечать за шапку сайта и будет находиться по центу, вторая за сайдбар (меню) и третья за основной текст на странице.

Код таблицы будет выглядеть, примерно, так:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN”>

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<table border="2" cellpadding="10">

<tr height="200">

<td colspan="2"></td>

</tr>

<tr>

<td width="200" height="500" valign="top"></td>

<td width="800" height="500" valign="top"></td>

</tr>

</table>

</BODY>

</HTML>

Где,

·  <table></table> — 8-я и 19-я строчка определяет открытие и закрытие таблицы;

·  <tr width="100%"> — 10-я строчка открывает первую строку и 11-я строчка <td colspan="2"></td> открывает первый столбец. Атрибут colspan говорит о том, что первая строчка будет растянута на 2 столбца.

·  <tr> — 14-я строчка открывает вторую строку в таблице и 15-я строка открывает первый столбец во второй сточке. Соответственно 16-я строка открывает второй столбец во второй сточке. Атрибуты width и height, отвечают за ширину и высоту столбцов.

Посмотреть, что получится.

На самом деле, создание сайта с помощью Блокнота не сложно. Главное понять, какой столбец где и что куда вставлять.

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

Создаем отдельную папку для нашего проекта, например «mysite» и копируем туда файл index. html. Здесь будут храниться все файлы вашего сайта. Создаем здесь папку с названием «i» и копируем туда любую картинку, которая будет отображаться в качестве шапки вашего сайта. Название картинки должно быть 1.png.

Окончательный код создания сайта в Блокноте, будет выглядеть примерно так:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN”>

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<table border="2" cellpadding="10">

<tr height="200">

<td colspan="2"><p align="center"><img src="i/1.png"></p></td>

</tr>

<tr>

<td width="200" height="500"valign="top">

    <li><a href="index. html">Главная</a></li>

    <li><a href="1.html">Об авторе</a></li>

    <li><a href="http://sitese. ru/zagolovok-html-dokumenta. html">Заголовки в HTML</a></li>

    <li><a href="http://sitese. ru/rabota-so-ssylkami-i-izobrazheniyami-v-html. html">Форматированите в HTML</a></li>

    <li><a href="http://sitese. ru/rabota-so-spiskami-v-html. html">Списки в HTML</a></li>

    <li><a href="http://sitese. ru/rabota-s-tablicami-v-html. html">Таблицы в HTML</a></li>

    <li><a href="http://sitese. ru/frejmy-v-html. html">фреймы в HTML</a></li>

    <li><a href="http://sitese. ru/rabota-s-formami-v-html. html">Формы в HTML</a></li>

</td>

<td width="800" height="500" valign="top">

<p><h2>Язык HTML</h2></p>

<p>По данным Википедии язык HTML был разработан британским учёным Тимом Бернесом в 1989 г. Данный язык был придумал для обмена научной информацией (документацией) между людьми не являющимися специалистами в области верстки. С помощью простых "тегов” языка HTML стало возможным создание подобных документов. То есть, каждый научный сотрудник, при желании обладая простым набором "тегов” языка HTML, мог создавать собственные документы и форматировать их в удобном для чтения виде. Плюс появилась возможность использования "гипертекста” в документах, то есть ссылаться на другие страницы в сети и обмениваться опытом.</p>

<p>HTML (от англ. Hyper Next Markup Language – язык разметки гипертекста) – это стандартный язык разметки документов в интернете. Большинство веб-страниц создаются при помощи языка HTML (XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, удобного для чтения пользователей.</p>

<p>На сегодняшний день язык НTML далеко шагнул от первоначального его использования. Было разработано порядка 5 версий языка HTML, множество дополнений, появилась возможность использования мультимедиа и др.</p>

</td>

</tr>

</table>

</BODY>

</HTML>

Где,

·  <img src="i/1.png"> — 11-я строчка, тег <img> отвечает за отображение картинки в окне браузера. Соответственно в первой ячейки у нас отобразится картинка (шапка), которую мы заранее скопировали.

·  <li><a href="http://sitese. ru/zagolovok-html-dokumenta. html">Заголовки в HTML</a></li> - 18-я строчка, здесь мы прописываем пункты меню нашего сайта. Делается это в виде списка с помощью тегов <li></li> и тега ссылки <a></a> ведущего на саму страницу.

·  <p><h2>Язык HTML</h2></p> — 27-я строчка, где прописывается текст главной страницы. Этой строчкой мы прописали заголовок.

·  <p>На сегодняшний день язык НTML далеко шагнул от первоначального его использования. Было разработано порядка 5 версий языка HTML...</p> — 30-я строчка, прописывается непосредственно сам текст страницы. Тег <p> разделяет текст на абзацы.

Если следовать данным предписаниям, создать простейший сайт через Блокнот не составит труда. В итоге у нас должна получиться вот такая страница на HTML созданная исключительно в программе Блокнот: