Примеры меню для сайта

В первом уроке мы уже рассмотрели маленький пример создания html-страницы. Теперь создадим более сложную страничку. Хочу отметить, что я буду объяснять как это сделать без применения специальных программных средств. Все, что понадобится для работы — это обычный блокнот от Windows. Для более удобной работы рекомендую скачать Notepad++ (продвинутый блокнот с возможностью подсвечивания html-тегов). Итак, начнем.

Откройте блокнот и скопируйте в него следующее:

<html> <head> <title>Главная страница — страница обо мне</title> </head> <body> <center><h1>Информация обо мне</h1></center> Краткая биография обо мне Родился в 1985 году в городе Москва. Закончил в 2008 году МАИ. На данный момент работаю ведущим инженером в крупной авиакомпании.

Моя мечта стать ведущим по машине. Поскольку я люблю авиацию, то хотел бы поделиться несколькими интересными фотографиями на эту тему <br/><br/> <center><imgalt=»Два самолета» src=»https://rpilot62.ru/wp-content/uploads/2018/06/13916.jpg»> </center> <br/><br/> <fontstyle=»color:green»>Этот текст зеленый</font> <br/><br/> <b>Просто пример жирного текста</b> <br/><br/> Низ страницы <br/><br/> В данном примере мы рассмотрели кратко основные теги HTML, теперь можно пробовать создавать несколько связанных страниц через ссылки и выкладывать сайт в интернет. <hr> Этот материал был написан благодаря сайту <ahref=http://zarabotat-na-sajte.ru/> http://zarabotat-na-sajte.ru/</a> — за что я ему благодарен. <br/><br/> Спасибо. До новых встреч! </body> </html>

Далее нажмите «сохранить как», в поле тип файла выберите «все файлы», а в названии напишите index.html. Обязательно в конце названия должно быть расширение .html (не .txt), иначе браузеры не будут интерпретировать его как веб-документ.

Если по каким-то причинам у Вас не получается создать html страницу, то Вы можете скачать предыдущий пример по ссылке: index.rar.

Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.



Описание html тегов из примера

1.

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

Любая html страница имеет следующую структуру:

<html> <head> … Заголовочные теги … </head> <body> … Тело страницы … </body> </html>


2. <body></body> — между этими тегами заключается весь видимый контент страницы.


3. <head></head> — внутри этих тегов должны располагаться все заголовочные теги. Этот раздел можно опустить, но я не советую это делать, поскольку это важная часть документа, особенно для поисковых систем. Более подробно про <head></head> читайте в описание заголовочных тегов


4. <title></title> — между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег <title></title> часто сокращенно называют «тайтлом». Советую ознакомиться со статьей: как составить тег <title>

Теперь перейдем к тегам, которые находятся в теле html страницы (внутри <body> и </body>).


5. <center></center> — эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет — центр экрана. В будущем рекомендуется отказаться от использования этих тегов.


6. <h1></h1> — это один из класса тегов заголовочных тегов <h1>..<h6>, обычно в него заключают название страницы. Например, у этой странице заголовочный тег «Пример создания html страницы».

Примечание

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

При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег <h1>, а дальше могут идти уже <h2>, <h3> и т.д. Главное, чтобы не было сначала <h2>, потом <h1>, потом <h3> и т.п. Должна быть строгая иерархия. Заголовков <h2>, <h3> и т.п. может быть много.

Более подробно про эти теги читайте в уроке 14 HTML теги <h1>-<h6> — заголовочные теги внутри страницы


7. <br/> — это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.


8. <img alt=»подсказка» src=»https://rpilot62.ru/wp-content/uploads/2018/06/84973.jpg»> — это одиночный тег, который выводит изображение.

  • src — обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
    Примечание:
    • Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL;
    • Не забудьте указать расширение изображения. Например, .jpg, .gif, .jpeg.
  • alt или title — в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта, особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.

Более подробно про <img> читайте в специальном уроке: html тег <img>



9. <font></font> — эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.

Примечание: <span></span> — аналогичный тег.

Есть также свойство CSS font, в котором можно задавать все эти параметры.


10. <b></b> — выделить жирным. Все, что заключено между <b> и </b> будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является <strong></strong>.

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

Читайте также: как сделать жирный шрифт html


11.

<hr/> — одиночный тег, который выводит горизонтальную линию. Имеет несколько параметров, о которых будет сказано позднее.


12. <a href=»URL»>текст_ссылки</a> — тег для создания ссылок.

href=»URL» — этому параметру необходимо присвоить URL ссылки, на которую ведет ссылка. Является обязательным параметром.

Примечание

Если документ, на который Вы хотите перейти, находится в одной папке с Вашей html-страницей, то достаточно написать название этого документа. Например:

<ahref=»stranica_50.html»>stranica_50.html</a> Можно писать и полный адрес страницы <ahref=»http://САЙТ.РУ/КАТЕГОРИЯ/stranica_50.html»>http://САЙТ.РУ/КАТЕГОРИЯ/stranica_50.html</a>

Этому важному тегу посвящен специальный урок: HTML тег <a>.

Более подробное описание этих и других тегов читайте в следующих уроках.


Уважаемый читатель, теперь Вы уже умеете создавать элементарные страницы с изображениями и ссылками. Описанные выше теги встречаются довольно часто и у них есть много различных параметров, о которых Вы узнаете далее. Целью этого урока было ознакомление с простыми тегами html страниц. Теперь советую перейти к следующим урокам.

Следующий урок: Урок 3. Основные html теги

Читайте также:
• Основные html теги
• HTML тег <style> — подробное описание с примерами
• HTML тег <table> — подробное описание с примерами
• HTML тег <form> — подробное описание с примерами
• HTML тег <div> — подробное описание с примерами
• HTML редакторы
• Как создать сайт с нуля — пошаговая инструкция
• HTML тег <!— —> (комментарии)
• <!DOCTYPE> в html
• Что такое JavaScript

← Перейти в каталог html уроков и советов

.

Оформление главного меню сайта

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

Давай по порядку рассмотрим несколько основных пунктов, соблюдение которых поспособствует хорошему оформлению главного меню сайта:

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

    Исключение лишь может составить страница 404 ошибки.

  2. Меню не должно содержать в себе слишком много ссылок (оптимальный вариант — до 10). Десяти ссылок, как правило, вполне хватает для того, чтобы отобразить основные разделы сайта. В этом случае глаза посетителя не будут разбегаться по сторонам, ему будет легче сконцентрироваться на главном меню и разделах сайта. Основываясь на статистике, можно сделать вывод, что большинство горизонтальных меню на сайтах содержат 5-6 ссылок.
  3. Не перегружать меню лишними ссылками. Чтобы не перегружать главное меню, можно вынести ссылки на страницы с контактными данными, прайс-листом и т.д. на отдельное место (к примеру, разместить их под хедером). Также можно продублировать ссылки на эти страницы в футере. Времена, когда главное меню полностью дублировалось в подвале сайта давно прошли и в оба эти меню можно и нужно вставлять различные ссылки. Самое важное всегда должно быть на виду, а ссылки на второстепенные страницы можно разместить и в подвале сайта. Кому надо, все равно найдут, если будет желание.
  4. Не стоит использовать большое количество вложений (в выпадающем меню). Такое меню может быть горизонтальным и вертикальным. Однако в том и в другом случае принцип действия будет похожим – после наведения на один из пунктов будет выдвигаться дополнительное меню, которое визуально закроет часть страницы. На некоторых сайтах можно встретить сразу 3 или 4 уровня вложенности меню. Понятно, что пользователю в этом случае будет очень неудобно ориентироваться в содержимом сайта. Кроме того, нужно очень точно двигать указателем мыши по пунктам выпадающего меню. В противном случае оно может автоматически закрыться и вам придется начинать все с начала. Также есть риск того, что вы случайно ткнете по другому пункту.
  5. Используйте выделение ссылок разными цветами. Во-первых, в правилах CSS желательно прописать изменение цвета уже посещенных ссылок. В этом случае человек будет знать, что в данный раздел сайта он уже заходил и смотрел материалы, которые там размещены. Желательно, чтобы менялся также цвет ссылок на обычные страницы со статьями, а не только на страницы с разделами. Во-вторых, при помощи CSS сделайте подсветку того раздела сайта, в котором пользователь находится на данный момент. Так человек всегда сможет понять, где он находится, а затем перейти в какой-то другой раздел. Вместо или помимо подсветки также имеет смысл использовать отображение мини-пути до страницы, на которой находится пользователь, начиная с главной (хлебные крошки).
  6. При наличии большого числа подразделов сайта целесообразно делать не выпадающее вбок, а раскрывающееся вниз меню. В случае с вертикальным меню при нажатии на ссылку внизу открываются дополнительные пункты подразделов. В случае с горизонтальным меню под выбранным пунктом появляется еще одно горизонтальное меню с подразделами. В этом случае пользователю будет очень легко перемещаться по сайту и ориентироваться в его содержимом.

HTML-верстка, Дизайн

01.11.2015

1721

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

Закрыть меню