Код главной страницы сайта

код html главной страницыПри разработке сайта с нуля, создается прежде всего главная страница. Файл главной, иначе называют – индексной страницей, в основном называется index.html (Так же могут быть и другие названия заглавной по умолчанию: index.php, main.php, default.php). Что бы задать файл индексной страницы по умолчанию, необходимо в корневом файле .htaccess задать строку:

1
DirectoryIndex name.html

Вместо name.html можно указать свой файл индексной страницы по умолчанию.

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

У каждой веб-странице есть свой заголовок, и задается он текстом между тегами <TITLE> </TITLE>.

Далее по пункту… При создании страницы и написании кириллических символов браузер может выдавать непонятный набор символов. Для того, чтобы этого не происходило нужно указывать тегом в <HEAD></HEAD> строку:

XHTML

1
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

в которой явно указать браузеру кодировку. Так же ее можно указать для всего сайта через файл .htaccess, прописав строку:

1
2
AddDefaultCharset UTF-8
AddDefaultCharset WINDOWS-1251

Еще совет! Чтобы не было проблем с кодировкой сайта используйте текстовые файлы в одной и тоже кодировке, укажите эту кодировку в настройках файла .htaccess, а также в коде самой странице.

В главной странице должны по максимуму быть прописаны стили оформления, для дальнейшего использования на других страницах. Для того, чтобы прописать стили оформления используют отдельный файл с расширением css, к примеру style.css. Чтобы загрузить стили на страницу, между тегам <HEAD> и </HEAD> прописывают строку:

XHTML

1
<link rel="Stylesheet" href="style.css" />

Где href=”" указывается путь к файлу со стилями.

Многие владельцы сайтов используют иконку для своего проекта. Обычно это иконка в формате ico размером 16х16. Название иконки по умолчанию favicon.ico. Достаточно загрузить в корневую директорию сайта иконку favicon.ico и со временем браузер автоматически будет ее отображать во вкладке. Если Вы хотите разместить иконку в специально созданной для этого папке, Вам необходимо подгрузить ее принудительно и указать браузеру путь до файла иконки. Делается это также путем вставки строчки кода между тегам <HEAD> и </HEAD>:

1
<link rel="shortcut icon" href="img/favicon.ico">

Где href=”" указываете путь до файла иконки.

При разработке некоторых элементов, которые требуют интерактивности, обычно применяют скрипты javascript. JavaScript код внутри страницы мешать нормально индексировать ее поисковыми система. Что бы этого избежать используйте внешние файлы для кода и подключайте их в требуемом месте, прописав следующую строку:

1
<script type="text/javascript" src="code.js"></script>

Где в src=”" указать путь до файла с листингом скрипта.

Поговорим немного об основных дополнительных тегах веб-страницы. Эти теги в основном сделаны для поисковых систем, а не для посетителя, к ним можно отнести такие теги как: описание страницы, ключевые слова страницы, авторство и другие.

1
2
<meta name="keywords" content="Ключевые слова для страницы"/>
<meta name="description" content="Описание страницы"/>

 

Примерный код веб-страницы для создания дизайна и контента:

 

XHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- Указываем тип документа -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <!-- HEAD служебная секция -->
<title>Название страницы</title>
<meta name="keywords" content="ключевые слова"/>
<meta name="description" content="описание страницы"/>
<!-- Указываем кодировку -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- Подключаем стилевое оформление -->
<link rel="Stylesheet" href="style.css" />
<!-- Указываем иконку для сайта -->
<link rel="shortcut icon" href="img/favicon.ico">
<!-- При необходимости подключаем скрипты-->
<script type="text/javascript" src="code.js"></script>
...
<!-- Также можно указать и другие различные теги -->
...
</head>
<body> <!-- Тело документа. Основная часть, которую видит посетитель-->
<!-- Содержится набор тегов и символов текста -->
</body>
</html>

Поделись страницей - поддержи автора!

Одна мысль про “Код главной страницы сайта

  • Iryna

    (05/04/2013 - 17:33)

    Интересно описано все на сайте.  Иногда сталкиваюсь с кодировкой особенно на shop scripte — чечная проблема править приходится 

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *