Сделано гражданином России



Читайте в рубрике "САЙТ!":

Делаем свой сайт в первый раз

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

  Виктор Коротченко, автор проекта dpsite.ru.

Наша задача на сегодня

Когда Вы открываете какую-либо страничку сайта, Вы видите заголовки, тексты, рисунки фотоснимки, видео ролики, кнопочки и ссылки, которые ведут на другие страницы. Возникает вопрос, а как самому-то сделать такой же сайт.

Читайте дальше эту статью, и Вы не только узнаете как «устроен» сайт, но и сами, уже через несколько минут, сделаете свой первый сайт. Да еще какой!

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

Нажмите кнопку "ДEMO" и посмотрите что должно получиться в итоге.
Конечно, текст Вы придумаете свой.

После просмотра демонстрационной странички Вы наверняка подумали, а зачем же Вам-то делать сайт про какого-то Коляну, а также размещать на своем сайте, совсем некстати и не по сезону, новогодние часы и новогоднее поздравление. Может быть у автора этой статьи мозги "сбрендили"?

Дело в том, что когда Вы приобретаете телевизор и смотрите в магазине деморолик, например, про египетские пирамиды, то Вы понимаете, что телевизор устроен так, что "ему все равно, что показывать". Какой канал включишь, то и будет показывать.

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

Обратите внимание, что с помощью всего двух строчек одного и того же очень простого кода (!) можно вставить на свой сайт не только новогодние часы, а целиком всю эту (или любую другую!) страничку сайта, видеоролик с Ютуб (YouTube), меню многостраничного сайта и много еще чего!
Более того, уже через несколько минут Вы сами сделаете такой сайт. Трудно в это поверить?

    Коляна Вас научит. Вы удивитесь, как просто это делается!

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

Разберемся как делается простой одностраничный сайт

Страничка простого сайта - это текстовый файл, написанный на языке HTML. Файл должен быть сохранен с расширением html или htm.
Такой файл называют HTML-файлом, а содержание файла называют HTML-кодом. Главная страница сайта обычно должна иметь имя index.html.

Веб-мастер пишет (или редактирует) HTML-код с помощью обычного текстового редактора, например, Notepad (Блокнот) или Notepad++.
Внимание.!!! Не используйте редактор Microsoft Word. Этот редактор добавляет в текст невидимые символы, недопустимые для HTML-кода.
Позже я расскажу как вставить тексты из Word'а в свой сайт.

Можно сказать, что HTML-код это описание странички сайта (инструкции и данные) на языке понятном компьютеру, а если точнее - браузеру.

Веб-мастер сначала делает и проверяет страничку сайта на своем (локальном) компьютере, а потом загружает HTML-файл на сервер для общего доступа пользователям интернета.

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

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

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

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

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

Ничего сложного! Поменяли код, посмотрели, что из этого получилось.
Не получилось! Бывет. Еще раз измените код. Вот и все дела.

Получите дополнительные материалы

Прежде чем начать делать свой сайт, скачайте дополнительные материалы – два файла.

Ссылки на скачивание дополнительных материалов:
http://yadi.sk/d/wpXGQz9O38a9k  файл Рамка.html
http://yadi.sk/d/8PnUJVEu38_zr     файл HTML-код новогодних часов.txt

Чтобы перейти на страницу загрузки файла, щелкните, поочередно, по указанным ниже ссылкам. В открывшемся окне нажмите кнопку "Скачать", далее – "Сохранить" и "OK".

Где искать загруженные файлы? Как правило, операционная система помещает загруженные файлы в папку "Мои документы/Загрузки". Скопируйте эти файлы в рабочую папку, т.е. в папку, в которой будут размещаться файлы вашего сайта. Если такой папки нет, то создайте новую папку с именем, например, «Мой личный сайт».

Файл Рамка.html будем использовать в качестве заготовки для своего будущего сайта. Обязательно сделайте и сохраните копию этого файла.

Первое знакомство с устройством сайта и HTML-кодом.

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

А сейчас, включите свою память, внимание и сообразительность, начнем знакомиться с HTML-кодом этой (пустой) странички - заготовки для будущего сайта.

Откройте файл Рамка.html текстовым редактором Блокнот, и Вы увидите вот такой HTML-код:

<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>Рамка сайта</title>
</head>
<body>

</body>
</html>

Эти "каракули" называются тегами. Теги, которые Вы сейчас видите, есть в любом сайте. Постарайтесь их запомнить. Пригодиться.

Браузер просматривает HTML-код построчно, каждую строку слева направо, также как мы обычно читаем текст.

Итак, смотрим открытый для редактирования файл Рамка.html и начнем разбираться с устройством сайта и с тегами.
Не пугайтесь. Ничего сложного.

Тег <html> и </html> - начало и конец страницы сайта.
Это двойной тег. В начале страницы надо вставить <html> (открывающий тег), а в конце страницы </html> (закрывающий тег). Как видите, ничего сложного.
А дальше аналогично.

Страница сайта разделена тегами на две секции.
Тег (двойной) <head> и </head> - начало и конец секции заголовка страницы сайта,
Тег <body> и </body> - начало и конец секции тела страницы сайта.

Рассмотрим секцию заголовка.
Между тегами <head> и </head> размещается служебная информация.
Тег (одинарный) <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> - указывает браузеру, что сайт написан в кодировке UTF-8.
Тег <title> и </title> - между этими тегами размещается заголовок сайта.
Замените в файле Рамка.html заголовок "Рамка сайта" на заголовок вашего сайта.

Рассмотрим секцию тела. Между тегами <body> и </body> размещается описание (HTML-код) содержания сайта. Результат интерпретации этого HTML-кода браузер выводит на экран монитора. Все теги из файла Рамка.html должны быть в каждой страничке сайта.

Вы веб-мастер. Наполняем свой сайт содержанием.

Уже не через несколько минут, а прямо сейчас пустой файл Рамка.html станет вашим первым сайтом. Читайте и делайте.

Итак, Вы веб-мастер. Вы уже знаете как устроен простой сайт. Вы понимаете, что содержание сайта надо вставлять между тегами <body> и </body> и что это делается с помощью текстового редактора.

Начнем.
Откройте (если еще не открыт) файл Рамка.html для редактирования.
Откройте текстовый файл с HTML-кодом новогодних часов (файл HTML-код новогодних часов.txt).
Вот этот код.

<iframe
	width="100%" height="220px" src="http://dpsite.ru/clock-min/code.html" 
	scrolling="no" frameborder="0" target="_self">
 </iframe>  
Вставьте этот код на свой сайт! В результате должно получиться.
<html>
<head>
	 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	 <title>Рамка сайта</title>
</head>
<body>
	 <iframe
		 width="100%" height="220px" src="http://dpsite.ru/clock-min/code.html"
		 scrolling="no" frameborder="0" target="_self">
	 </iframe>  
</body>
</html>

HTML-код можно писать в одной строке. Размещение тегов построчно и сдвиг тегов в строчках сделаны для лучшей читабельности HTML-кода.

Обязательно сохраните (после редактирования) файл Рамка.html, и, только после сохранения, закройте этот файл.

Теперь посмотрим, что получилось.
Откройте файл Рамка.html любым браузером, который установлен на вашем компьютере: Google Chrome, Opera, Mozilla Firefox, Internet Explorer. Можно просто кликнуть мышкой на пиктограмме файла, и файл откроется браузером по умолчанию.

Такие новогодние часы увидят посетители вашего сайта.


Ну как, у Вас получилось также? Отлично! Сколько осталось до Нового Года?

Не получилось?
Не знаете как скопировать текст из одного текстового файла в другой?
Не у кого спросить?
Свяжитесь со мной.
Воспользуйтесь кнопкой бесплатного звонка автору проекта dpsite.ru.
Расскажите о своей проблеме.
Я Вам обязательно помогу.

Более подробно о теге iframe

Тег iframe называют плавающим фреймом. Это название тег получил благодаря тому, что этот фрейм можно разместить в любом месте страницы сайта. На одной странице может быть несколько парных тегов iframe. О том как сделать разметку сайта, Вы узнаете из следующего выпуска dpsite.ru.

Когда браузер "видит" тег iframe, то выделяет на стрнице сайта окно заданного размера в том месте, где написан тег iframe. Размеры окна браузер берет из атрибутов width и height, где
width - ширина фрейма, а height - высота фрейма. Значения указываются либо в процентах (%), либо в пикселах (px).

Между тегами <iframe> и </iframe> можно поместить любой HTML-код.

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

Вставьте вот такой HTML-код,

<iframe
	width="640" height="360" src="http://www.youtube.com/embed/hyUrubNeCkY?feature=player_detailpage" 
	scrolling="no" frameborder="0" target="_self">
 </iframe>  
и на вашем сайте увидите видеоролик с видеосервиса Youtube.
Присмотритесь. Это точно тот же самый код, что и для вставки новогодних часов! Изменены только размеры окна (фрейма) и источник информации.

А вот еще один вариант использования тега iframe.

<iframe
	width="840" height="540" src="http://www.starjet.ru"
	frameborder="1" target="_self" allowfullscreen>
 </iframe>  
Потрясающе! На вашем сайте информация о продаже и заправки картриджей для принтеров и ксероксов. Даже меню сайта работает.
Цены на товары будут обновляться каждый раз, как только веб-мастер starjet.ru введет изменеиня в прайс лист на своем сайте.

Конечно информацию c других сайтов можно размещать на своем сайте, не нарушая авторских прав.
 

Вы владелец свего сайта и веб-мастер. Компьютер и интернет это инструменты в ваших руках. Веб-разработка - это творчество. Никаких шаблонов! Больше экспериментируйте. Попробуйте еще что-нибудь вставить с помощью тега iframe и других.
Изучайте сами HTML, и сразу же применяйте знания на практике. Накапливайте свои знания на своем сайте.

Вставляем в сайт текстовые строки и абзацы.

Теперь сделаем из файла Рамка.html настоящий одностраничный сайт - новогоднее поздравление вашим друзьям от вашего имени. Для этого вставим несколько текстов.
Вы увидите теги <p>, </p> и <br />. Это теги форматирования текста: начало абзаца, конец абзаца и перевод на новую строку. Ничего сложного. Запомните, пригодится в будущем.

Откройте файл Рамка.html редактором Блокнот.

Над часами (ниже открывающего тега <body>) пишем обращение и новогоднее поздравление.

<p>Дорогие мои дядя Ваня и тетя Маша!<br />
От всего сердца поздравляю всю вашу большую семью с наступающим Новым Годом!</p>

Ниже часов (после закрывающего тега </iframe> перед закрывающим тегом </body>) вставляем текст, например, пожелание.

<p>Передавайте привет вашим соседям и Люське Прянишниковой.<br />
Приезжайте к нам в гости.<br />
<p>Желаю всем хорошего здоровья и счастья в личной жизни!</p>
<p>Ваш внучатый племяш Коляна.</p>
В результате получится такой код:
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>Новогоднее поздравление</title>
</head>
<body>
	<p>Дорогие мои дядя Ваня и тетя Маша!<br />
	От всего сердца поздравляю всю вашу большую семью с наступающим Новым Годом!</p>
	<iframe
		 src="http://dpsite.ru/clock-min/code.html"
		 width="100%" height="220px" scrolling="no" frameborder="0" target="_self">
	</iframe>  
	<p>Передавайте привет вашим соседям и Люське Прянишниковой.<br />
	Приезжайте к нам в гости.<br />
	<p>Желаю всем хорошего здоровья и счастья в личной жизни!</p>
	<p>Ваш внучатый племяш Коляна.</p>
</body>
</html>
Вы, конечно, что-нибудь покруче напишите. Проверьте, что из всего этого получилось.

Заключительный шаг в создании своего первого сайта

Файл Рамка.html, наполненный содержанием вашего сайта, переименуйте в index.html.
ВНИМАНИЕ     В именах файлов сайта не используйте кирилические символы. Не вдаваясь в детали, скажу: будет меньше проблем после загрузки файлов на сервер.

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

Подкорректируйте тексты, которые Вы вставляли в сайт, и загрузите ваш сайт на сервер. Как это сделать? Читайте статью "Как выложить сайт в Интрнет" в этом журнале.

Разошлите по e-mail ссылку на ваш сайт всем своим друзьям и знакомым. Вот они удивятся.
В их глазах Вы будете выглядеть волшебником!

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

Вы получили первоначальное знакомство с устройством сайта, HTML-кодом, узнали некоторые теги, и, главное, узнали как просто можно в свой сайт вставить не только тексты, но даже такие сложные конструкции, как , например, новогодние часы, видеоролики с Youtub и др.

В следующий раз...

В следующей статье поговорим о том, как загрузить файлы сайта на сервер.
Но к этому дню Вы должны подготовиться. Что я имею в виду.
Обязательно зарегиструйтесь на хостинге. Это займет всего несколько минут, и ни копейки не стоит.

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

Откройте выпуск №1 бесплатного журнала "Компьютер! Интернет! Сайт! Магазин! Деньги!" и посмотрите как делается регистрация на хостинге. Разобрано все "по косточкам".

Коляна уже зарегистрировался на хостинге!

Мой совет, воспользуйтесь услугами хостинговой компании Hostinger. Не пожалеете!

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

До следующей встречи на страницах проекта dpsite.ru.

Вместе сделаем наш мир лучше!

С уважением

  Виктор Коротченко, автор проекта dpsite.ru.

P.S. Возможно у Вас возникли вопросы или проблемы. Пишите мне на e-mail: pion@orc.ru или через форму обратной связи на сайте. Обязательно отвечу.

DP-info: Здесь может быть ваша реклама! БЕСПЛАТНО!
© Copyright 2012-2016, Виктор Коротченко
Веб-студия dpsite.ru
с 16.10.2012 года

Анализ сайта