|
|
|
|
Урок 2. Как создать свою HTML-страничку? Автор: Андрей Краснокутский Дата: 2008-11-27 Урок 2. Как создать свою HTML-страничку?Создаем свою первую web-страницу.Практический совет: Существует множество визуальных редакторов значительно облегчающих и ускоряющих процесс создание HTML документов и сайтов, например: Front Page, Word , Dreamweaver, множество различных конструкторов сайтов и т.д. Но для начала, если Вы действительно хотите сами научиться разбираться в "сайтостроении", рекомендую все таки освоить написание кода. Почему? Вот несколько основных причин:
Первый шаг к созданию web-страниц.Не важно, чему посвящен ваш сайт: футболу, автомобилям или аквариумным рыбкам, без разницы на какую он тему. Неважно какой у вас сайт: статический или динамический. Механизм создания сайтов всегда одинаков. Сначала всегда пишется исходный код. Итак, открываем программу Блокнот, уже установленную в операционную систему Windows (Пуск > Все программы > Стандартные > Блокнот) или Notepad++ (её Вы найдете в разделе Инструменты и набираем следующий код: Листинг 1.
Далее сохраняем этот файл на жестком диске под именем: 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.
Поясню, что же мы добавили в код web-страницы. Итак. Первая строка:
"говорит" браузеру, что это HTML документ версии 4.01, наиболее стабильной на сегодняшний день (есть и другие версии HTML, они не очень сильно отличаются, все движется и развивается). Обратите внимание на следующую строку:
эта строка "говорит" браузеру в какой кодировке отображать web-страницу (их тоже много), на сегодняшний день в русскоязычном интернете наиболее предпочтительная кодировка: windows-1251. Следующая строка:
Здесь в кавычках прописываются ключевые слова, по которым Ваш сайт будет отыскиваться поисковыми системами, такими как: Yandex, Google и т.д. Естественно пишите здесь свои слова, применительно к своему сайту.
Это то же слубный тег, только здесь в кавычках указывают ключевые словосочетания и предложения, соотвтствующие описанию данной web-страницы вашего сайта, которое будет видно в "поисковиках". В настоящее время теги <meta name="keywords"> и <meta name="description"> не столь актуальны, как было ранее, но все же рекомендуется их прописывать. Эти теги являются одиночными т.е. их не нужно закрывать. Вот теперь исходный код вашей первой web-страницы полностью готов и будет корректно отображаться любым браузером. Если Вы обновите вашу страницу (клавиша F5), то увидите, что на экране монитора ничего не изменилось, но браузер "прочитал" всю служебную информацию, необходимую для нормальной работы. В следующем уроке мы добавим новый текст на данную web-страничку и начнем её форматировать, придавая вашей web-странице более, законченный и красивый вид. А для этого нам будет необходимо ознакомимся с тегами форматирования. Обновлено: 24.09.2014 г.
Читайте также: Приступаем к форматированию текста. Вставляем заголовки на web-страницу. Форматируем текст web-страницы. Правила написания коррекного кода web-страницы.
Просмотров: 30347 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Марина Ваши уроки мне понравились, продолжайте в том же духе и дальше Комментарии добавил(а): Петр Ваши уроки расчитаны на совсем новичков??? Расказывайте что-нибудь другое Комментарии добавил(а): Ашот учимся по тихоньку.Молодцы!!! Комментарии добавил(а): Андрей К Это проще чем кажется, гдавное не отступать Комментарии добавил(а): Анатолий Спасибо!Очень класно изложен материал, легко читаеться и воспринимаеться. Так держать! Комментарии добавил(а): Андрей К Спасибо Комментарии добавил(а): Ксения Спасибо огромное, я уже что-то понимаю и мне это нравится.Все очень доступно написано. Комментарии добавил(а): Тимур спасибо за правильную и понятную информацию! Комментарии добавил(а): Диана Спасибо Андрей! Кажется я начинаю что-то понимать. Комментарии добавил(а): Женя Спасибо!Знаю что в будущем на это уйдет много времени,ведь здесь столько символов! Комментарии добавил(а): valera Спасибо за хорошие уроки Комментарии добавил(а): palich Большой РЕСПЕКТ! пока все нравится и получается! Комментарии добавил(а): Natalee Спасибо! Я всегда завидовала людям, которые в этом разбираются и считала, что для меня это недоступно. Так приятно, когда начинаешь понимать. Я нашла нужные ответы. Это то, что мне очень нужно. Комментарии добавил(а): Лариса Не получается!При создании первой html,когда сохранила под именем index.html.При просмотре показывает несколько строчек разные знаки.Совсем не то,что я ввела,что дальше делать,я в отчаяние! Комментарии добавил(а): Andry Нормально получается, только не ошибаться с тегами. Спасибо за уроки! Комментарии добавил(а): Gall Уменя ваще открывается папка, и все...... Комментарии добавил(а): Elena Я очень заинтересовалась сайтостроением.Сначала,начала изучать тему в университете технологий Интуит,но быстро забросила это дело,так как ничегошеньки не поняла.Для меня все эти теги были такой абракадаброй,я даже не захотела себе этим голову забивать,так как запоминать всю эту бессмыслицу мне просто было не под силу.Ну,представьте:запоминать то,что ты вообще не понимаешь.Но тут настолько для тупых все прописано,что я теперь хочу заниматься именно этим делом.Спасибо Вам Андрей,огромное!!!! Комментарии добавил(а): Артемий Спасибо! Все понятно написано. Комментарии добавил(а): Виталий прикольно, проще чем кажется на первый взгляд. меня в общем-то другая область науки интересует, поглядим, может и создание сайтов понравирться!!! так держать! молодци! Комментарии добавил(а): дима Уроки классные. На сайте popup всплывает даже после подписки.Это только у меня так?Или так должно быть? Комментарии добавил(а): Геннадий Да гордо звучит в коменты!!! =) Спасибо Андрею за то, что я нашел себе полезные советы для создании сайта. Комментарии добавил(а): Сергей Анатольевич. Прочитал, да и возвращаюсь каждый день к Вашим урокам. Вы делаете очень нужное дело, особенно для начинающих. Большое спасибо!!! PS. Неплого бы сделать каталог тегов для начинающих. Комментарии добавил(а): Даниил Певзнер я доволен! Комментарии добавил(а): Габи фИГНЯ ВСЁ ЭТО)) СМОТРИТЕ МЕКСИКУ!!!! Комментарии добавил(а): http:// Красноярская доска объявлений Комментарии добавил(а): Геннадий Григорьевич Все понятно, благодарю! Комментарии добавил(а): Valdemar Начал читать ваши уроки. Все понятно. Думаю освоить язык HTML. Комментарии добавил(а): Ольга Спасибо, все очень понятно. Большое спасибо! Комментарии добавил(а): Ольга Огромное Вам спасибо за уроки!!! Комментарии добавил(а): Оксана Спасибо за ваши уроки! Для начинающих, они очень понятны! А это - главное!!! Комментарии добавил(а): Настя Спасибо за уроки! Но мне вот неопнятно как потом отредактировать уже созданный документ чтобы поправить код? Комментарии добавил(а): Евгений Сделал все как написано, при двойном клике выводит разнообразные сиволы но не текст который вводил. В чем проблема ? Комментарии добавил(а): АндрейК Евгений. Однозначно сказать трудно, скорее всего Вы где то допустили ошибку в коде, потяли какой то знак, что то перепутали и т.д. Добавить Ваш комментарий: |
Новости сайта Почтовая рассылка Новинка! Как реально заработатьв Интернете? "Обзор видов и способов заработка."
Специальный Отчет:  В подарок всем подписчикам! Полный список наших почтовых рассылок! Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |