Урок 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 .
Сохранили. Теперь как обычно два раза кликаем левой кнопкой мыши по этому файлу и видим:

Рисунок 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-страницы.
Просмотров: 32946
Ваши уроки мне понравились, продолжайте в том же духе и дальше
Ваши уроки расчитаны на совсем новичков??? Расказывайте что-нибудь другое
учимся по тихоньку.Молодцы!!!
Это проще чем кажется, гдавное не отступать
Спасибо!Очень класно изложен материал, легко читаеться и воспринимаеться.
Так держать!
Спасибо огромное, я уже что-то понимаю и мне это нравится.Все очень доступно написано.
спасибо за правильную и понятную информацию!
Спасибо Андрей! Кажется я начинаю что-то понимать.
Спасибо!Знаю что в будущем на это уйдет много времени,ведь здесь столько символов!
Большой РЕСПЕКТ! пока все нравится и получается!
Спасибо! Я всегда завидовала людям, которые в этом разбираются и считала, что для меня это недоступно. Так приятно, когда начинаешь понимать. Я нашла нужные ответы. Это то, что мне очень нужно.
Не получается!При создании первой html,когда сохранила под именем index.html.При просмотре показывает несколько строчек разные знаки.Совсем не то,что я ввела,что дальше делать,я в отчаяние!
Нормально получается, только не ошибаться с тегами. Спасибо за уроки!
Уменя ваще открывается папка, и все......
Я очень заинтересовалась сайтостроением.Сначала,начала изучать тему в университете технологий Интуит,но быстро забросила это дело,так как ничегошеньки не поняла.Для меня все эти теги были такой абракадаброй,я даже не захотела себе этим голову забивать,так как запоминать всю эту бессмыслицу мне просто было не под силу.Ну,представьте:запоминать то,что ты вообще не понимаешь.Но тут настолько для тупых все прописано,что я теперь хочу заниматься именно этим делом.Спасибо Вам Андрей,огромное!!!!
Спасибо! Все понятно написано.
прикольно, проще чем кажется на первый взгляд. меня в общем-то другая область науки интересует, поглядим, может и создание сайтов понравирться!!! так держать! молодци!
Уроки классные. На сайте popup всплывает даже после подписки.Это только у меня так?Или так должно быть?
Да гордо звучит в коменты!!! =)
Спасибо Андрею за то, что я нашел себе полезные советы для создании сайта.
Прочитал, да и возвращаюсь каждый день к Вашим урокам. Вы делаете очень нужное дело, особенно для начинающих. Большое спасибо!!!
PS. Неплого бы сделать каталог тегов для начинающих.
фИГНЯ ВСЁ ЭТО)) СМОТРИТЕ МЕКСИКУ!!!!
Красноярская доска объявлений
Начал читать ваши уроки. Все понятно. Думаю освоить язык HTML.
Спасибо, все очень понятно. Большое спасибо!
Огромное Вам спасибо за уроки!!!
Спасибо за ваши уроки! Для начинающих, они очень понятны! А это - главное!!!
Спасибо за уроки! Но мне вот неопнятно как потом отредактировать уже созданный документ чтобы поправить код?
Сделал все как написано, при двойном клике выводит разнообразные сиволы но не текст который вводил. В чем проблема ?
Евгений. Однозначно сказать трудно, скорее всего Вы где то допустили ошибку в коде, потяли какой то знак, что то перепутали и т.д.
|