Как сделать главную страницу сайта в html

Подготовка главной страницы сайта – файл index.html

Всю работу по рождению нового сайта мы уже проделали – сайт зарегистрирован и выложен в сети. Набрав в адресной строке браузера URL сайта, мы увидим содержимое главной страницы сайта (в нашем случае – это http://v-mire-givotnyh.ru). Пришло время заняться главной страницей, и привести ее в надлежащий вид. Напомним, что содержание нашей главной страницы пока следующее:

Заголовок страницы TITLE

Это очень важный тег, т.к. в нем отражается суть всей страницы, а в нашем случае, поскольку речь идет о главной странице ВСЕГО САЙТА, то заголовок должен, ни много, ни мало, – отражать суть ВСЕГО САЙТА! То что написано в тайтле страницы индексируется поисковиками в первую очередь и имеет очень важный вес при ранжировании страницы. Поэтому, в теге TITLE надо в краткой форме (50-60 символов) отразить всю суть содержимого страницы, при этом обязательно надо использовать ключевые слова и фразы, которые встречаются в тексте самой страницы.

Здесь сделаю небольшое отступление. Зачем делаются сайты? В общем-то, для разных целей. Но, возьмем “нормальную” цель создания сайта – сайты делаются для людей. Т.е., для нас с вами – рядовых пользователей Интернета. Сайты несут определенную информацию, которую мы ищем в сети. А как мы ищем информацию в подавляющем большинстве случаев? Конечно же, через запрос в поисковой системе (обычно Яндекс или Google). Поисковая система получает запрос и выдает результат поиска по многим сайтам. При этом на первые места ставятся сайты, информация на которых (по мнению поисковика) наиболее полно удовлетворяет введенному нами запросу. Задача вебмастера сделать свой сайт таким, чтобы по профилирующим запросам сайт находился как можно выше в выдаче поисковой системы. Чем выше сайт, тем больше посетителей мы получим на свой сайт (т.к., львиная доля посетителей на сайт приходит именно с поисковых систем). Такие вот профилирующие запросы и составляют ключевые слова и фразы, по которым наш сайт должен быть как можно выше в результатах поиска. Чтобы более полно уловить суть вышесказанного, рекомендую ознакомиться с разделом Оптимизация сайта.

Вернемся к нашим “баранам”. Наш сайт называется “В мире животных”. Поэтому, вполне логично будет в тайтле прописать такое название для сайта: В мире животных – сайт о жизни животных и их повадках.

Мета-теги

Далее, за тайтлом следует расположить основные мета-теги. Их не очень много, но пренебрегать ими не следует.

Итого мы вписали 4 мета-тега:

  1. определение кодировки html-страницы;
  2. заголовок страницы;
  3. описание страницы;
  4. ключевые слова страницы.

Внешний лист стилей

После мета-тегов, в самом конце тега HEAD пропишем следующую строку:

Этой строкой мы подключили к данной странице внешний лист стилей, в котором содержится форматирование основных элементов страницы. В нашем случае внешний лист стилей находится в файле с именем style.css, и располагается в корне сайта. Пока мы сам файл еще не создали, но за этим дело не станет.

Теперь html-код главной страницы имеет следующий вид:

Оформление страницы

Пришло время подумать КАК будет выглядеть наш сайт. Вариантов множество. Остановимся на следующем:

  • В верхней части сайта будет располагаться “шапка” сайта;
  • Средняя часть сайта будет состоять из двух колонок: в правой будет навигация (она будет уже); в левой – основной контент сайта;
  • В нижней части сайта будет расположен “подвал”.

Верстать сайт будем с помощью таблиц, причем ширину таблиц сделаем фиксированной, таким образом, мы обезопасим себя от всяких неприятных сюрпризов верстки при смене разрешения экрана монитора. Поскольку 15 дюймовые мониторы практически уже вышли из употребления, то за минимальный размер экрана монитора возьмем стандартное разрешение 17 дюймового монитора – 1024*768. Исходя из этого, максимальная ширина таблицы при верстке не должна превышать 1024 пиксела. Ниже приведен код страницы с комментариями, для наглядности различные части страницы окрашены в разные цвета.

А вот как выглядит страница в браузере IE 8:

Содержание страницы

Теперь самое время наполнить страницу содержимым (контентом). При подготовке информационного материала следует придерживаться следующих “правил”:

  • контент страницы должен быть уникальным и полезным (не стоит копировать информацию с других сайтов – таким образом вы очень быстро попадете под штрафные санкции поисковых систем, в результате сайт будет находиться очень низко в поисковой выдаче и посетителей не будет);
  • текст на сайте должен быть составлен грамотно и без ошибок;
  • где это уместно, надо подготовить и разместить соответствующие графические материалы;
  • приветствуется наличие тематических ссылок на другие ресурсы Интернета, которые дополняют информацию на вашем сайте;
  • объем информации на странице не должен быть слишком маленьким, или слишком большим – примерно от 1000 до 4000 знаков (от 1/2 до 2 страниц печатного текста);
  • допускается размещение небольших цитат или выдержек с других сайтов (если это разрешается) с обязательной ссылкой на первоисточник.
Читать еще:  Как сделать домашний интернет

В начало страницы

В начало страницы

Урок 1. Как создать простую страницу на html?

В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.

Вы готовы? Тогда поехали!

Подключение к интернету для создания страницы на html нам НЕ нужно.

Нам понадобится

1) Выбираем текстовой редактор. На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как)

Если Вы сразу хотите начать программировать в специализированных текстовых редакторах, то обратите внимание на:
1) для Windows
NotePad++ ( скачать или здесь )
Intype ( скачать )

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

2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla, Google Chrome, Opera, Yandex и Mail браузеры и тд.

Приступим к созданию страницы HTML

1) создаём на рабочем столе папку html . Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.

2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как.

Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с .html на конце, например index.html

Выбираем в качестве директории (папки), куда сохранить, нашу html
Нажимаем сохранить. Готово!

Часто задают вопрос о том, что не видно расширения файла. Разберём по порядку

Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать) сменить не только расширение, но и следовательно тип файла (например, с txt на html)

так НЕ должно выглядеть: photo, текстовой документ, game
так Должно выглядеть: photo.jpg; текстовой документ.txt; game.exe

Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее:

Смотрим настройки файлов и папок:

Для Win XP Открываем любую папку – Сервис (сверху в панели) – Свойства папки – Вид – Скрывать расширения для зарегистрированных файлов (снять галочку) – Применить

Для Win 7 Открываем любую папку – Упорядочить – Параметры файлов и поиска -Вид – Скрывать расширения для зарегистрированных типов файлов (снять галочку) – Применить

Для Mac OS Щёлкаем мышью по рабочему столу – Finder – Preferences (Настройки) – Advanced (Дополнительно) – выставить флажок в Show all file extensions (Показывать расширения всех файлов) – Применить

3) вставляем в него Весь код (вместе с комментариями), указанный ниже:

4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.htmlОткрыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.

В итоге, открыв Интернет-Браузером получившийся index.html , Вы должны увидеть страничку такого вида:


Рисунок 1.

На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:

В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.

Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.

Тег title обозначает Название страницы. Это единственный тег, содержащийся в head, который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете

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

Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия).

В очередной раз напомню, что Важно не забывать писать закрывающие теги для всех остальных типов тегов, иначе Браузер не поймёт где именно Вы хотели закончить тот или иной элемент. Как снизу:

Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее

Читать еще:  Как сделать блок слизи в майнкрафт

Хочу выделить текст жирным, а этот уже курсивом

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

5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html – выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad), либо установленный Вами другой текстовой редактор.

В принципе азы объяснил. Пока html-страница выглядит достаточно просто, но в следующих уроках я подробно расскажу Вам об этих и других элемента и их назначении – будем вставлять изображения, делать ссылки и много другого интересного)

Создание и раскрутка сайта

Сайтостроение, WEB-дизайн, SEO-оптимизация

Главное меню

Навигация по статьям

Как сделать главную страницу сайта в html

Главная страница на сайте является его отправной точкой и лицом всего блога.

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

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

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

В связи с этим, при создании блога важно сделать главную html страницу сайта с учетом следующих моментов:

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

Как правильно создать главную

На какие моменты следует обратить внимание при ее создании:

  • выделение важных разделов сайта, которые будут служить отправной точкой к основным темам сайта;
  • на сайте должна быть реальная информация с конкретными примерами его содержания;
  • обновленные материалы главной страницы должны быть легкодоступными, чтобы пользователь мог легко найти те статьи, которые уже в архиве;
  • наличие блока «Поиск» на сайте – важная деталь любого веб сайта;
  • наличие раздела «О сайте» или «О компании» — один из способов предоставления полной информации для пользователей для того, чтобы вызвать у них доверие к вашему бизнесу;
  • заголовок (title), который будет виден поисковым системам, должен быть информативным. Не стоит его начинать такими фразами, как «Добро пожаловать» или «Главная». Для пользователя заголовок должен быть привлекающим внимание;
  • важно также уделить внимание составлению description (описанию) страницы. В нем должна быть полная информация о компании. Здесь надо проявить немного креатива и придать описанию рекламный характер;
  • подбирая ключевые фразы (keywords) для главной страницы сайта необходимо следить за тем, чтобы они описывали ее содержание и не повторялись. Не стоит использовать ключи, которые отсутствуют на странице;
  • чтобы облегчить поиск по сайту информации, которая находится в глубине сайта, ссылки надо начинать с наиболее важных ключей;
  • использование значимой графики позволит заинтересовать посетителя. Если есть возможность показать на главной странице примеры своих трудов, то лучше сделать это.

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

Как сделать оригинальную ссылку в html на другую страницу

Можно в строке браузера выделить адрес блога, который выглядит так http://seitostroenie.ru или http://www.seitostroenie.ru и скопировать в буфер обмена.

Если надо сделать ссылкой рисунок или какую-то надпись, то в коде надо добавить следующую запись:

Она и будет частью ссылки. Затем надо написать адрес сайта, вставив его из буфера обмена между кавычками.

Должна получиться следующая запись: .

Естественно, что ссылку надо поменять на адрес вашего сайта.
К надписи надо добавить: .Между символами “> .

Читать еще:  Дизайн квартиры 60 кв м сделать самому

Если в качестве ссылки надо использовать картинку, то вначале изображение загружают на сайт, а коде html пишут:

Чтобы превратить картинку в ссылку можно написать следующий код:

Если надо, чтобы ссылка открывалась в новом окне, то к коду надо добавить:

При наведении курсора на картинку появится надпись «Главная».

Если ссылка должна быть подчеркнута и выделена цветом (сделаем текст черным, а подчеркивание – белым), то добавляем в код следующую запись:

Заменив “white”, “black” и “Главная“ другими словами можно получить текст ссылки, который больше подходит по стилю вашему ресурсу.

Важно: редактировать страницы с использованием перечисленных тегов можно только в html режиме!

И напоследок, пара полезных советов:

  1. Когда создаете гиперссылку не забывайте проверять ее работоспособность. Даже, на первый взгляд, самая несущественная неточность кода html может полностью поменять его смысловое значение.
  2. Загружая на сайт картинки следите, чтобы их названия состояли из английских символов. Можно использовать цифры.

Как сделать главную страницу сайта в html : 10 комментариев

Спасибо. Очень хороший и полезный сайт.
Удачи и успеха вам.

Своим сайтом сейчас мало кого удивишь. Это раньше нужно было обладать недюжинными знаниями в области веб-программирования, чтобы была возможность создать свой сайт. Сейчас же, благодаря различным CMS, таким как WordPress и Joomla, сделать его под силу практически любому человеку. Однако, открытым остается вопрос о том, где его размещать, ведь от качества хостинга зависит и скорость работы самого сайта, так и сохранность данных на нем.

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

Многие владельцы качественных ресурсов с высокой посещаемостью не понаслышке знают, что такое зависть конкурентов. Она может проявляться не только в оставлении гневных комментариев и оскорблений, но и в виде DDOS-атаки, которая может «положить» даже самый стойкий сервер. Чтобы уберечь себя от подобных неприятностей, нужно заранее подготовиться.

Многие люди хотели бы создать свой блог, на котором они могли бы делиться своими мыслями, переживаниями, комментировать те или иные события и найти себе новых друзей. Однако, далеко не все обладают соответствующими знаниями, которые позволили бы им это сделать. Но для создания своего блога совсем не обязательно быть программистом, ведь есть сервисы, которые позволяют это сделать без особых усилий.

Сегодня у многих людей есть свой сайт. Однако, создав его, наверняка многие долго ожидали первого посетителя, но счетчик на сайте так и оставался на нулевой отметке. Чтобы о вашем сайте узнали люди и начали его посещать, нужно заниматься его продвижением, или, как говорят профессионалы, SEO-оптимизацией. Если у вас нет опыта и навыков в этом далеко не простом деле, то лучше его доверить специалистам, которые проведут необходимые работы.

Создание сайта — это сложная и ответственная задача, от которой зависит, понравится ли посетителям ваш сайт и вернется ли он. Однако, какой смысл от сайта, если о нем никто не знает? Поэтому не менее важной задачей является его раскрутка, или, как ее еще называют, поисковая оптимизация. Только опытный профессионал сможет улучшить позиции вашего сайта, не навредив ему.

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

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

Спасибо) очень полезная статья, обязательно попробую так сделать на своем сайте

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Заполняя форму для комментария вы соглашаетесь с Политикой конфиденциальности

Источники:

http://on-line-teaching.com/kak_sdelat_svoy_site_ot_a_do_ya/04_index.html

http://tradebenefit.ru/kak-sozdat-html-dokument

Как сделать главную страницу сайта в html

Ссылка на основную публикацию
Статьи на тему: