Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Урок 2. Как создать свою HTML-страничку?

Автор: Андрей Краснокутский

Дата: 2008-11-27

Урок 2. Как создать свою HTML-страничку?

Создаем свою первую web-страницу.

Практический совет: Существует множество визуальных редакторов значительно облегчающих и ускоряющих процесс создание HTML документов и сайтов, например: Front Page, Word , Dreamweaver, множество различных конструкторов сайтов и т.д. Но для начала, если Вы действительно хотите сами научиться разбираться в "сайтостроении", рекомендую все таки освоить написание кода. Почему? Вот несколько основных причин:

  • Если вдруг что-то случиться с вашим сайтом, Вы сможете самостоятельно, а главное оперативно (и еще бесплатно) устранить проблему и восстановить работоспособность сайта.

  • При необходимости Вы самостоятельно внесёте нужные коррективы в свой сайт (добавите или удалите дополнительные разделы, страницы, отредактируюте уже существующие материалы).

  • Практически все визуальные редакторы вносят в создаваемый web-документ избыточный код, что приводит к «утяжелению web-страниц» и как следствие увеличению времени загрузки, т.е. пользователь может просто не дождаться загрузки страницы и уйти на другой сайт.

Первый шаг к созданию web-страниц.

Не важно, чему посвящен ваш сайт: футболу, автомобилям или аквариумным рыбкам, без разницы на какую он тему. Неважно какой у вас сайт: статический или динамический. Механизм создания сайтов всегда одинаков. Сначала всегда пишется исходный код.

Итак, открываем программу Блокнот, уже установленную в операционную систему Windows (Пуск > Все программы > Стандартные > Блокнот) или Notepad++ (её Вы найдете в разделе Инструменты и набираем следующий код:

Листинг 1.

<html>
<head>
<title>Автомобили со всего мира</title>
</head>
<body>
Наш сайт посвящен автомобилям и все что с ними связано. Здесь Вы найдете много полезной и интересной информации.
</body>
</html>

Далее сохраняем этот файл на жестком диске под именем: index.html .

Обращаю ваше внимание: файл обязательно сохраняем с расширением: .html или .htm . Желательно завести отдельную папку, в которую Вы будете складывать все файл Вашего сайта). Когда Ваш сайт будет размещен в сети Интернете, то при наборе в адресной строке браузера адреса сайта, например: http://www.myinsite.ru (или другого доменного имени (об этом мы поговорим позже), по умолчанию ВСЕГДА открывается файл: index.html .

Сохранили. Теперь как обычно два раза кликаем левой кнопкой мыши по этому файлу и видим:

УРА!!! Мой первый HTML файл!!!

Рисунок 2.1

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

А теперь нам необходимо усвоить немного обязательной теории.

Слова, заключенные в угловые скобки, являются служебными словами языка HTML. Их называют тегами (tags). Теги никогда не отображаются в браузере (мы их не видим) при просмотре web-страницы — это служебные элементы и они служат только для управления оформления и внешнего вида web-документа.

Тег <html> , который Вы видите в первой строке, означает, что наш текст действительно написан на языке гиперразметки HTML. Большинство тегов языка HTML — парные. Они обязательно требует присутствия закрывающего тега. В этом примере в первой строке стоит открывающий тег <html> , а в последней — закрывающий тег </html>. Все, что расположено между ними, считается HTML-документом.

В языке HTML совершенно не имеет значения, строчными или прописными буквами записаны теги. Можно написать </HTML> или <html> — для браузера это одно и то же.

В рассмотренном примере вы видите еще один тег: <body> . Этот тег тоже парный. Всё, что расположено между ним и его закрывающим тегом </body>, называется "телом" web-документа и отображается на экране монитора (это то, что мы видим при открытии любого сайта).

Все HTML-документы, помимо "тела", еще содержат заголовок и другие служебные теги, в которых заключена различная служебная информация, необходимая для работы браузера. Заголовок располагается между тегами <head> и </head>.

Заголовок прописывают между тегами <title> и </title>, его мы видим в заголовке окна браузера. В данном случае у нас прописано: <title> Автомобили со всего мира</title>.

Но это еще не всё, для нормального отображения вашей web-странички (и не только Вашей, а любой), браузеру необходимо сообщить ещё некоторую служебную информацию. Которая также прописывается между тегами <head> и </head>. То, что мы сейчас пропишем необходимо только браузеру, посетитель Вашего сайта этих строк кода не увидит. Допишите Ваш код, как представлено в Листинге 2.

Теперь ваш код должен выглядеть вот так:

Листинг 2.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Автомобили со всего мира</title>
<meta name="keywords" content="автомобили, легковые, гараж, автопутешествия">
<meta name="description" content="Все, что вы хотите знать про автомобили">
</head>
<body>
Наш сайт посвящен автомобилям и все что с ними связано. Здесь Вы найдете много полезной и интересной информации.
</body>
</html>

Поясню, что же мы добавили в код web-страницы. Итак. Первая строка:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

"говорит" браузеру, что это HTML документ версии 4.01, наиболее стабильной на сегодняшний день (есть и другие версии HTML, они не очень сильно отличаются, все движется и развивается). Обратите внимание на следующую строку:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

эта строка "говорит" браузеру в какой кодировке отображать web-страницу (их тоже много), на сегодняшний день в русскоязычном интернете наиболее предпочтительная кодировка: windows-1251. Следующая строка:

<meta name="keywords" content="автомобили, легковые, гараж, автопутешествия">

Здесь в кавычках прописываются ключевые слова, по которым Ваш сайт будет отыскиваться поисковыми системами, такими как: Yandex, Google и т.д. Естественно пишите здесь свои слова, применительно к своему сайту.

<meta name="description" content="Все, что вы хотите знать про автомобили">

Это то же слубный тег, только здесь в кавычках указывают ключевые словосочетания и предложения, соотвтствующие описанию данной web-страницы вашего сайта, которое будет видно в "поисковиках". В настоящее время теги <meta name="keywords"> и <meta name="description"> не столь актуальны, как было ранее, но все же рекомендуется их прописывать. Эти теги являются одиночными т.е. их не нужно закрывать.

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

В следующем уроке мы добавим новый текст на данную web-страничку и начнем её форматировать, придавая вашей web-странице более, законченный и красивый вид. А для этого нам будет необходимо ознакомимся с тегами форматирования.

Обновлено: 24.09.2014 г.

 

Читайте также:

Что такое HTML? Введение.

Приступаем к форматированию текста.

Вставляем заголовки на web-страницу.

Форматируем текст web-страницы.

Правила написания коррекного кода web-страницы.

 

Просмотров: 26489


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Марина
Дата: 2007-09-02

Ваши уроки мне понравились, продолжайте в том же духе и дальше

Комментарии добавил(а): Петр
Дата: 2007-09-02

Ваши уроки расчитаны на совсем новичков??? Расказывайте что-нибудь другое

Комментарии добавил(а): Ашот
Дата: 2009-07-14

учимся по тихоньку.Молодцы!!!

Комментарии добавил(а): Андрей К
Дата: 2009-07-15

Это проще чем кажется, гдавное не отступать

Комментарии добавил(а): Анатолий
Дата: 2009-07-16

Спасибо!Очень класно изложен материал, легко читаеться и воспринимаеться. Так держать!

Комментарии добавил(а): Андрей К
Дата: 2009-07-16

Спасибо

Комментарии добавил(а): Ксения
Дата: 2009-09-29

Спасибо огромное, я уже что-то понимаю и мне это нравится.Все очень доступно написано.

Комментарии добавил(а): Тимур
Дата: 2009-10-23

спасибо за правильную и понятную информацию!

Комментарии добавил(а): Диана
Дата: 2009-10-28

Спасибо Андрей! Кажется я начинаю что-то понимать.

Комментарии добавил(а): Женя
Дата: 2009-11-08

Спасибо!Знаю что в будущем на это уйдет много времени,ведь здесь столько символов!

Комментарии добавил(а): valera
Дата: 2009-11-20

Спасибо за хорошие уроки

Комментарии добавил(а): palich
Дата: 2010-01-09

Большой РЕСПЕКТ! пока все нравится и получается!

Комментарии добавил(а): Natalee
Дата: 2010-02-18

Спасибо! Я всегда завидовала людям, которые в этом разбираются и считала, что для меня это недоступно. Так приятно, когда начинаешь понимать. Я нашла нужные ответы. Это то, что мне очень нужно.

Комментарии добавил(а): Лариса
Дата: 2010-02-19

Не получается!При создании первой html,когда сохранила под именем index.html.При просмотре показывает несколько строчек разные знаки.Совсем не то,что я ввела,что дальше делать,я в отчаяние!

Комментарии добавил(а): Andry
Дата: 2010-02-19

Нормально получается, только не ошибаться с тегами. Спасибо за уроки!

Комментарии добавил(а): Gall
Дата: 2010-02-20

Уменя ваще открывается папка, и все......

Комментарии добавил(а): Elena
Дата: 2010-02-26

Я очень заинтересовалась сайтостроением.Сначала,начала изучать тему в университете технологий Интуит,но быстро забросила это дело,так как ничегошеньки не поняла.Для меня все эти теги были такой абракадаброй,я даже не захотела себе этим голову забивать,так как запоминать всю эту бессмыслицу мне просто было не под силу.Ну,представьте:запоминать то,что ты вообще не понимаешь.Но тут настолько для тупых все прописано,что я теперь хочу заниматься именно этим делом.Спасибо Вам Андрей,огромное!!!!

Комментарии добавил(а): Артемий
Дата: 2010-03-10

Спасибо! Все понятно написано.

Комментарии добавил(а): Виталий
Дата: 2010-04-08

прикольно, проще чем кажется на первый взгляд. меня в общем-то другая область науки интересует, поглядим, может и создание сайтов понравирться!!! так держать! молодци!

Комментарии добавил(а): дима
Дата: 2010-07-08

Уроки классные. На сайте popup всплывает даже после подписки.Это только у меня так?Или так должно быть?

Комментарии добавил(а): Геннадий
Дата: 2011-02-19

Да гордо звучит в коменты!!! =) Спасибо Андрею за то, что я нашел себе полезные советы для создании сайта.

Комментарии добавил(а): Сергей Анатольевич.
Дата: 2011-02-27

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

Комментарии добавил(а): Даниил Певзнер
Дата: 2011-08-27

я доволен!

Комментарии добавил(а): Габи
Дата: 2011-11-15

фИГНЯ ВСЁ ЭТО)) СМОТРИТЕ МЕКСИКУ!!!!

Комментарии добавил(а): http://
Дата: 2011-12-15

Красноярская доска объявлений

Комментарии добавил(а): Геннадий Григорьевич
Дата: 2011-12-25

Все понятно, благодарю!

Комментарии добавил(а): Valdemar
Дата: 2012-03-02

Начал читать ваши уроки. Все понятно. Думаю освоить язык HTML.

Комментарии добавил(а): Ольга
Дата: 2012-04-27

Спасибо, все очень понятно. Большое спасибо!

Комментарии добавил(а): Ольга
Дата: 2012-10-16

Огромное Вам спасибо за уроки!!!

Комментарии добавил(а): Оксана
Дата: 2013-01-09

Спасибо за ваши уроки! Для начинающих, они очень понятны! А это - главное!!!

Комментарии добавил(а): Настя
Дата: 2013-03-25

Спасибо за уроки! Но мне вот неопнятно как потом отредактировать уже созданный документ чтобы поправить код?

Комментарии добавил(а): Евгений
Дата: 2014-03-21

Сделал все как написано, при двойном клике выводит разнообразные сиволы но не текст который вводил. В чем проблема ?

Комментарии добавил(а): АндрейК
Дата: 2014-03-22

Евгений. Однозначно сказать трудно, скорее всего Вы где то допустили ошибку в коде, потяли какой то знак, что то перепутали и т.д.

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Видео Курс по созданию
Информационного Бизнеса в Интернете
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT