Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Как создать свою HTML-страницу?

Viktor | 24.02.2014 | нет комментариев

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

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

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

Не важно, чему посвящен ваш сайт футболу, автомобилям или аквариумным рыбкам, без разницы на какую он тему, механизм всегда одинаков. Открывает программу Блокнот, входящую в 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). Теги никогда не отображаются при просмотре страницы — они служат для управления оформлением.

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

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

В рассмотренном примере вы видите еще один тег — <body> . Этот тег тоже парный. Все, что расположено между ним и его закрывающим тегом </body>, считается “телом” документа и отображается на экране это то что видно при открытии страницы. HTML-документы, помимо “тела”, обычно содержат еще и заголовок, в котором заключена различная служебная информация. Заголовок располагается между тегами <head> и </head>. Между этими тегами пишется служебная информация необходимая для работы браузера.

Между тегами <title> и </title> пишут то, что видно в заголовке окна браузера в данном случае у нас прописано <title> Автомобили со всего мира</title>.

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

Так должен выглядеть код HTML документа:

Листинг 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>

Коротко поясним что же мы добавили в код страницы. Первая строка:

<!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″>

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

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

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

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

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

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

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

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB