Рейтинг: 4.5/5.0 (1912 проголосовавших)Категория: Windows: Ведение дел
Простой в верстке и в дизайне одностраничный шаблон сайта с оригинальными графическими вставками зеленого цвета. Отличной подойдет для презентации 1 товара: книги или услуги. Четко разделенные блоки п.
Универсальный и довольно простой HTML шаблон сайта посадочной страницы для вашего бизнеса. Имеется 2 цветовые схемы: черная и серая. Имеется большое кол-вл блоков и место под формы.
Ну судите строго по первому взгляду, на самом деле это очень интересный шаблон, в которм реализован интересный многофункциональный слайдер с визуальными эффектами смены слайдов. Имеется страница портф.
Случайные записиДля SEO, 2012 год был довольно насыщенным годом. Было несколько важных обновлений, которые изменили поиск в целом.
Дорогие друзья, рад Вас приветствовать на нашем сайте. Как можно было понять из названия, www.html-templates.info, сайт абсолютно весь посвящен миру WEB, включая теговый язык разметки HTML, языки программирования PHP и Java script, jQuery, Ajax, и. пожалуй, самое главное: HTML шаблоны | HTML templates.
Исторически массово считается, что основной трафик на сайт должен идти именно с поисковых систем. И, по сути, так оно и есть – большая часть посетителей, причем вполне целевых при правильном продвижении, идет именно оттуда – с Яндекса, Гугла, Бинга и т. п.
Все успешные сайты благодарят своих посетителей за то, что они выбрали именно их ресурс. Благодарность – это самый лучший (и популярный) способ убедить клиентов в их значимости. Пользователи, вернувшиеся на сайт повторно, являются прямым доказательством того, что бренд выбрал правильную маркетинговую стратегию и общается со своими подписчиками.
Сегодня нельзя просто так взять и выкатить красивый сайт — нужно как минимум сделать для него адаптивную верстку. Удивительно, но многие владельцы сайтов забывают о пользователях, которые приходят к нему со смартфонов и планшетов. Они вынуждены щуриться и изворачиваться, чтобы рассмотреть содержимое сайта. Пользователей это раздражает. Да и не только это. Ниже - 8 самых распространенных ляпов в веб-дизайне, которые до сих пор, почему-то, никто не отменял.
Любой сайт состоит из страниц, поэтому рассмотрим из чего же состоит эта страница.
Итак определившись что с названием страницы создаем html файл. Например index.html.
Вот Вам и первая страница сайта. Открывший файл в любом редакторе, мы можем написать любой текст. Например: «Ура. Я сделал первую html страницу в своей жизни»
Браузер с удовольствием это проглотит, но ведь это совсем не то что мы привыкли видеть на экране монитора. Поэтому рассмотрим что-же представляет из себя html-страница.
1. Служебная информация для браузера.
2. Описание страницы.
3. Тело страницы.
Служебная информацияВ этой части документа прописывается тип и стандарты документа, что позволяет браузеру корректно его читать. Также указывается язык написания страницы. Указывает на корректное написание страницы учитывая стандарты написания страницы W3C.
</html>
Описание страницыОписание страницы лежит между тэгами <head> </head>
И является невидимой но очень важной частью сайта.
Рассмотрим что-же важного лежит между этими короткими тэгами.
Тэг <title> отображает название страницы в закладке браузера. На теперешнее время является очень важным тэгом при индексации страниц в поисковых системах. Не менее важным является тэг <meta. В нём прописывается: кодировка сайта, ключевые слова и снипет.
Следующий тэг <link> подключает таблицы стилей используемые на сайте, а также может подключать иконку сайта.
Тэг < script> подключает Java скрипты.
Вот пример правильного описания страницы
<title>Ура. Первая страница готова</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"
<meta name="keywords" content="Ключевые слова">
<meta name="description" content="Формирование снипета страницы в поисковой системе Яндекс ">
<script src="http://webmaster-pro.org/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D1%83/*.js"></script>
Тело страницыТело страницы начинается и заканчивается тэгами <body> </body >
- между этими тегами находится наполнение страницы. Именно эта часть кода отвечает за визуальное отображения материала. Конечно не имея чёткого представления о картинки которая должна отобразится в окне браузера трудно что-то написать. Поэтому начинающих web-программистов желательно заблаговременно нарисовать эскиз страницы.
Типичным эскизом является страница вида:
Конечно могут быть и другие, все это зависит от вашей фантазии и задач которые будет решать страница.
<table width="100%" border="1" cellspacing="10" cellpadding="10"> //объявление таблицы
<tr> //объявление строки
1. Шаблоны для сайтов
2. Как править
3. Где найти
Простые шаблоны для сайта. Скачать бесплатно с сайта html. При создании нескольких однотипных сайтов, или при необходимостисоздать сделать сайт быстро или когда нужен одностраничный сайт визитка, вам помогут бесплатные шаблоны для сайтов. которых в сети достаточно много,
Бесплатные шаблоны для сайта, можно найти на ресурсах посвящённых web дизайну, владельцы таких сайтов для привлечения посетителей выкладывают для всех желающих бесплатные шаблоны сайтов. Пользуйтесь, но не забывайте всё же править этот шаблоны. По запросу "скачать бесплатные шаблоны сайта" в поисковой строке Yandex-sa откроется огромное количество ссылок, рекомендую идти на 3-4 страницы для поиска шаблонов, так как основная масса желающих скачать шаблоны далее 2 страницы не углубляются.
Проще всего, при наличии нескольких похожих шаблонов скомбинировать из них различные графические решения. Можно использовать и не похожие бесплатные шаблоны. а лишь только части из их дизайна. Править шаблон лучше всего при помощи Macromedia Dreamweaver. Вы должны достаточно уверенно разбираться в коде страницы, в иметь хорошие навыки в работе с программой.
Скачать html шаблоны бесплатно - html шаблон | Простой
автор: MilovanovV | 5-04-2011, 00:55 | Просмотров: 38536
Скачать html шаблоны бесплатно – к этому часто прибегают многие web-мастера, чтобы на основе скаченного html шаблона, создать простой сайт и проверить свою идею.
Действительно, нет смысла начинать новый проект, тратя время и силы на разработку сложного html шаблона, если есть возможность протестировать идею нового сайта при помощи простого шаблона. Наверняка, Вы знакомы с данной ситуацией.
Однажды, мне для подобных целей, нужен был простой html шаблон. Я начал поиски в Интернет и как назло ничего походящего мне не удавалось найти.
Вроде бы, c качать html шаблоны бесплатно в Интернет не сложно, но меня, в найденных html шаблонах, что ни будь не устраивало. В одном шаблоне, присутствовало большое количество графики. В другом шаблоне, применялись таблицы стилей css, которые я не планировал использовать.
В общем, иногда такое бывает, из большого многообразия html шаблонов, я не смог ничего себе подобрать. Тогда я сделал свой простой html шаблон, такой, который на тот момент меня устраивал. И для создания экспериментального html сайта, использовал именно его.
Я решил этим html шаблоном поделиться с Вами. Представляю вам "Простой HTML шаблон". Несмотря на простоту, мне кажется, любой веб мастер найдет ему применение.
Этот HTML шаблон, подойдет для изучения работы HTML тегов. Так как его html код прост и нагляден. Но при желании, этот html шаблон, вполне можно использовать для создания полноценного html сайта.
Если на основе этого html шаблона, создать другие страницы, то вы можете создать себе, вполне приличный сайт, с классическим дизайном. Вам останется только наполнить новые страницы контентом.
Особенностью данного html шаблона является его простота. Ничего лишнего. Стандартная строгая шапка сайта, классическое вертикальное меню слева.
В этом html шаблоне используется минимум графики. Каждый пункт меню украшен небольшим рисунком - угловой скобкой. Справа от меню идет контент.
Нижний колонтитул шаблона простой. Копирайтинг, год и автор. При желании, в колонтитул, можно добавить название сайта.
Данный html шаблон, может стать хорошим плацдармом для начинающего web-мастера, так как шаблон легко отредактировать под свои нужды.
Скачать “Простой HTML шаблон”, можно здесь:
Невероятно, но факт. По статистике, если начинающий вэб-мастер начинает свой первый серьезный сайт с того, что первым делом устанавливает на свой сайт какую-нибудь очень продвинутую CMS, типа Joomla, Drupal, PHP-Nuke и т.п. то чаще всего на этом у него все создание своего серьезного проекта и заканчивается. И, наоборот, большинство самых успешных и раскрученных сайтов, как правило, начинались создаваться в блокноте с "голого" HTML без всяких CMS.
Я не имею ничего против CMS. Это полезная вещь, если нужно очень быстро создать небольшой сайт. И особенно полезная вещь, когда надо создать сайт на заказ для людей далеких от HTML, но которым требуется постоянно наполнять сайт своим контентом без Вашего участия.
Моя точка зрения состоит в том, что вэб-мастеру сначала необходимо освоить HTML, CSS, PHP и т.д. и научиться делать свои сайты "руками" без всяких конструкторов, без DreamWeaver и без CMS и только потом переходить к практическому освоению CMS. Так будет больше понимания, какая CMS лучше подойдет для какой-нибудь конкретной цели, в чем их действительные и мнимые преимущества и недостатки, и даже где их можно подправить для своих целей.
Но если у начинающего вэб-мастера есть понимание этого момента и он пытается честно делать свои сайты "руками", то часто такие сайты выглядят очень криво и своим дизайном проигрывают тем, кто не зная HTML творит с помощью каких-нибудь конструкторов.
Данная статья призвана помочь начинающим энтузиастам-кодировщикам сайтостоения. Здесь рассказывается о четырех самых простых классических дизайнерских шаблонах для начинающих. Они очень просты и поэтому легки для понимания любого, кто только начинает изучать HTML, CSS и PHP. В принципе, многие начинающие вэб-мастера сами додумываются до них. Эти же шаблоны можно встретить в некоторых учебниках по сайтостроению для начинающих. Правда я никогда не встречал их описание всех в одном месте. Поэтому я надеюсь, что материал данной статьи будет многим полезен и сэкономит массу времени.
Дизайны, которые рассматриваются здесь, это не дизайны для украшательства своего сайта. Если Вы хотите сделать просто красивый сайт, то покиньте эту страничку. Здесь для Вас ничего интересного нет. Здесь шаблоны сайтов рассматриваются и оцениваются не с точки зрения возможности сделать что-то красивое, такое, что все зайдут на Ваш и ахнут от удивления. Украшательские шаблоны здесь не рассматриваются вообще. Считается, что Вы делаете полезный сайт сам по себе, по его внутреннему содержанию. То есть на Ваш сайт будут приходить люди не потому что там, что-то удивительно красивое, а потому что у него полезное содержимое, которое постоянно пополняется и меняется. Поэтому дизайнерские шаблоны для начинающих тут рассматриваются, во-первых, с точки зрения раскрутки сайта в поисковиках, а, во-вторых, с точки зрения удобства наполнения сайта новым материалом и модификацией старого материала. Разумеется, что речь идет о наполнении сайта новым материалом и его модификацией исключительно самим вэб-мастером, который знает HTML. Другими словами, эти шаблоны не являются чем-то типа распространенных CMS, которые предназначенны для наполнения контентом и для его изменения людьми не знакомыми с HTML.
Рассмотрим четыре шаблона:Я намеренно не рассматриваю тут такие шаблоны, которые невозможно реализовать на бесплатных хостингах без поддержки PHP. Часто начинающие вэб-мастера размещают свои сайты на бесплатных хостингах. ибо в самом начале совершенно не понятно во что выльются их первые опыты в построении своего сайта, окупится ли удовольствие иметь сайт на платном хостинге. Все эти четыре шаблона могут быть с успехом применены на любых бесплатных хостингах. Все учебные примеры из этой статьи могут без проблем быть расположенными на каком-нибудь бесплатном хостинге, тапа Народ Хостинжер. Также я покажу как очень просто модифицировать эти шаблоны для хостинга с поддержкой PHP, чтобы на страницах Вашего сайта исполнялись серверные скрипты.
Но сначала несколько слов о вэб-дизайне.
Исторически сложилось так, что эта штука называется дизайном. Хотя любой профессиональный дизайнер из любой другой области скажет Вам, что то, что называеся вэб-дизайном, на самом деле никаким дизайном не является. Это скорее вэб-стилистика. И что на самом деле вэб-дизайнеры занимаются совсем не дизайном сайта, а его стилем. В самом деле, посмотрите на подавляющее большинство сайтов Интернета, полистайте их страницы. Сразу же бросается в глаза то, что все страницы одного и того же сайта оформлены в одном и том же стиле, на каждой странице одного и того же сайта встречаются одни и те же повторяющиеся геометрические и цветовые элементы. В результате мы можем по одному только внешнему виду новой вэб-страницы определить с этого она сайта или с другого, и все это даже не читая ее содержание, только по внешнему виду, по стилю оформления.
Этот эффект как раз и достигается применением ко всем страницам сайта одного и того же шаблона, в котором одни части используются для размещения контента, другие для размещения разного рода меню, баннеров, заголовков, голосований и т.п. В современных CMS, вообще, используется идеология полного отделения друг от друга контента, управления контентом и оформление. В том смысле, что Вы можете независимо от управления контентом менять и само содержание сайта и его оформление.
Геометрически структура страниц сайта может иметь разный вид. Вот некоторые примеры того, какие бывают разбивки страниц на блоки.
Все примеры в этой статье я буду приводить для классической структуры с тремя колонками в середине и плюс к этому есть верхняя и нижняя части, растянутые на всю ширину страницы.
Сайт на таблицахПример сайта с дизайном на таблице можно посмотреть на сайте table.free.nanoquant.ru. На этом сайте Вы найдете описание преимуществ и недостатков такого дизайна, поэтому здесь повторятся не будем. Разнообразие внешнего вида страниц создается разными границами блоков, отступом контента от границ, раскраской блоков, их шириной и высотой, фоновыми рисунками и т.д. На том же сайте вы найдете страницу с мини-справочником по тэгам и аттрибутам таблиц в HTML.
Для упрощения понимания, технология CSS мною намеренно не используется.
Там же в левой колонке Вы можете скачать пустые страницы-шаблоны для хостинга без поддержки PHP и для хостинга с поддержкой PHP. Обращаю Ваше внимание, что для случая хостинга с поддержкой PHP в файле .htaccess применяется технология подмены расширения файлов. На самом деле все файлы такого сайта имеют расширение php для того, чтобы в них без проблем выполнялись любые PHP-скрипты, но для посетителей сайта и для поисковых систем все страницы будут иметь расширение html, как будто бы это простые статические страницы. Поэтому, если Вы хотите сделать ссылку на какую-нибудь страницу Вашего сайта, то в ссылке надо указать страницу с расширением html, хотя открываться будет страница с тем же самым именем, но с расширением php. Значит, для корректной работы сайта, нельзя, чтобы на сайте были две страницы с одинаковым именем, но с двумя разными расширениями php и html. Делайте на таком сайте для однообразия все файлы с расширением php.
При просмотре html-шаблона и php-шаблона в разных окнах одного и того же браузера, Вы должны видеть совершенно одинаковые страницы (возможно с точностью до пустых строк). Пользователь при просмотре страниц этих шаблонов и их кодов через браузер не должен догадаться, какой из них создан на HTML, а какой на PHP.
Сайт на фреймахЧтобы посмотреть пример сайта с дизайном на фреймах перейдите на сайт frame.free.nanoquant.ru. Этот сайт также бес проблем может работать и на бесплатных хостингах. Тут Вы найдете описание преимуществ и недостатков такого дизайна, поэтому здесь также повторятся не будем. Разнообразие внешнего вида страниц также создается разными границами блоков, отступом контента от границ, раскраской блоков, их шириной и высотой, фоновыми рисунками и т.д. Чтобы не затуманивать сути, в учебном примере также не используется технология CSS. На том же сайте Вы найдете и страничку с мини-справочником по фреймам.
Сайты на фреймах были очень популярны в 90-х годах, когда поисковики еще не были столь всемогущими. Но потом, когда вэб-мастера осознали те проблемы, которые имеют фреймы с поисковиками, фреймы надолго отпугнули сайтостроителей и появилось даже такое мнение, что это очень архаичная умирающая технология.
На самом деле все не совсем так. Все зависит от того, что за сайт Вы стряпаете, от конкретных задач, стоящих перед вэб-мастером. Существует не мало таких задач, где фреймы являются самым естественным и даже очень изящным и быстрым решением. Нужно только видеть где именно.
Общие рекомендации по применению фреймов следующие.
Старайтесь не использовать фреймы там, где Вам очень важно, чтобы страницы были проиндексированы поисковыми системами. Например, не рекомендую использовать фреймы на главной странице сайта и на статичных страницах с важной постоянной информацией.
Используйте фреймы там, где идет маловажная информация технического характера. Например, если страница сайта посвящена какой-то узкоспециализированной области программирования, то можно коды выводить во фрейм, чтобы не загромождать основной текст.
Применяйте фреймы там, где у Вас выводится часто меняющаяся информация. Например, во фрейм можно выводить результат работы какого-нибудь скрипта или теста, который запускает на выполнение посетитель Вашего сайта. Во фрейм можно выводить не только содержимое файлов, находящихся на Вашем сайте, но и содержимое файлов, которые находятся на других сайтах, например, во фрейм можно подгружать новости с другого сайта.
Если все-таки по каким-то причинам возникла такая ситуация, когда Вам хочется расположить во фреймах информацию, которая нуждается в индексации поисковиками, то обязательно перелинкуйте такие страницы так, чтобы пользователь, который переходит на такие "вырванные" страницы, мог по таким ссылкам перейти на полноценные сборные страницы Вашего сайта.
В этом же случае, в таких файлах лучше делать обычную структуру html-файлов с традиционными разделами head и body. В учебном примере на сайте frame.free.nanoquant.ru я не стал создавать такую структуру у файлов с основным контентом (которые сливаются в центральную колонку) чисто для простоты, чтобы все было как можно проще и при этом работало. А надо бы сделать, конечно же, все по правилам написания html-файлов для файлов с основным контентом, которые могут оказаться в выдаче поисковой системы.
Сайт на плавающих фреймахПлавающие фреймы решают большинство проблем имеющиеся у простых фреймов, но овладеть ими порой не так-то просто. Снова читаем материал следующего сайта, расположенного по адресу: iframe.free.nanoquant.ru. Там также дается информация по преимуществам и недостаткам плавающих фреймов, есть мини-справочник по плавающим фреймам. Все примеры не содержат технологии CSS, чисто для упрощения демонстрации.
Обратите внимание, что в "голом" виде плавающие фреймы не применяются. В учебном примере каркасом для применения плавающих фреймов служит табличный дизайн.
Плавающие фреймы это единственное приемлимое решение для сайта на хостинге без поддержки PHP и SSI, когда у сайта десятки и даже сотни страниц и постоянно увеличивающиеся пункты меню или время от времени меняющаяся реклама на "сквозняке".
Сайт на Святом ГраалеЭто конечно шедевр дизайнерского искусства. Смотрим материал сайта holygrail.free.nanoquant.ru и наслаждаемся. Этот дизайн уже существенно опирается на использование технологии CSS, поэтому там дается небольшой мини-справочник, но только в пределах, необходимых для понимания Святого Грааля.
Там же можно скачать пустые страницы-шаблоны для хостинга без поддержки PHP и для хостинга с поддержкой PHP. Как и в случае табличного дизайна, для хостинга с поддержкой PHP приведен файл .htaccess для подмены расширений файлов с php на html. Поэтому все ссылки должны идти на файлы с расширением html, а реально эти файлы должны иметь расширение php, чтобы там могли выполняться любые PHP-скрипты, а поисковики принимали эти файлы за обычные статические html-файлы. Для корректной работы подмены расширений, не создавайте два файла с одним и тем же именем, но с двумя разными расширениями php и html, и будет Вам PHP-счастье. )
При просмотре html-шаблона и php-шаблона в разных окнах одного и того же браузера, Вы должны видеть совершенно одинаковые страницы. Посторонний пользователь при просмотре страниц этих шаблонов через браузер не должен догадаться, какой из них создан на HTML, а какой на PHP. Даже если он посмотрит на коды этих шаблонов через браузер, он все равно не сможет понять, написаны они чисто на HTML или же с применением PHP.
Святой Грааль - это оптимальный дизайн для поисковых систем. Поисковику до лампочки, как прикольно и красиво внешне выглядит Ваш сайт. Поисковик изучает внутренности страниц Вашего сайта. Если Вы уже врубились в эту тему, то Вы сразу же поймете, почему профессионалы не любят некоторые движки для сайта, например, PHP-Nuke. Если посмотреть на код страниц, которые создает PHP-Nuke, то можно увидеть, что он основан на табличном дизайне. (Более правильно надо сказать, что профессионалы применяют CMS типа PHPNuke только тогда, когда уверены, что раскрутка сайта пойдет не через SEO, не через поисковики. А такое, кстати, тоже встречается.)
А вот еще один камень в огород дизайна на таблицах. При приеме на работу в зарубежные студии вэб-дизайна (а сейчас уже и во многие российские) программистам часто дают задание переписать табличный код вэб-страницы через дивовый дизайн так, чтобы страница выглядела как первоначальная табличная (или как можно ближе к ней) в как можно большем числе браузеров и разрешений экрана. Это связано с двумя причинами. Во-первых, есть просто спрос на специалистов, которые умеют делать сайты на дивовом дизайне. Во-вторых, есть клиенты, которые хотят свои старые табличные сайты переписать на более подходящую структуру для поисковиков.
В заключение замечу, что тот шаблон, который Вы скачали (я надеюсь) с сайта holygrail.free.nanoquant.ru представляет собой простейшую реально рабочую реализацию Святого Грааля. Существуют и более сожные реализации. Все они также основаны на идее "листа Мебиуса". Но простота помогает понять основную идею не отвлекаясь на многочисленные мелочи и детали, которые могут загромоздить суть.
[0] Простые шаблоны сайтов
Простой сайт - программа, дающая возможность ведения корпоративной базы данных через браузер с любого компьютера, подключенного к Интернет, а также конфигурирования базы данных - создание новых таблиц, полей, связей, отчетов в онлайн. Кроме того, возможно публиковать часть информации для клиентов, ввести авторизацию клиентов и просмотр разрешенной им информации. По сути Простой сайт является веб-интерфейсом. Функционал программы обеспечивает 90% всех базовых возможностей, которые дают Windows-программы. Утилита устанавливается на один компьютер под веб-сервер IIS (Internet Information Services), после чего в систему можно заходить с любого компьютера сети предприятия через браузер. Для доступа с любого компьютера, подключенного к Интернет, компьютер должен иметь публичный IP-адрес.
Отзывы о Простой сайт 1.97Святослав про Простой сайт 1.87 [01-02-2014]
Обновите для винды 7,8. Очень хотелось посмотреть, но не установилась!
Mozilla Firefox
The Bat! Home
Virtual DJ
Pidgin (Gaim)
CheMax Rus
Русская Рыбалка
Process Explorer
FAR Manager
Готовый сайт. Шаблон "Prosto"
автор: Saah | 13-05-2012, 22:11 | Просмотров: 11191
Простой по своему исполнению шаблон сайта "Prosto". Может быть использован в разнообразных темах проектов. Выполнен с применением технологий блочной верстки на HTML, CSS, Java Script. Шаблон полностью готов к публикации в сети. Замене подлежит лишь русский текст и изображения.
Тема шаблона выбрана случайно для наглядности: строительство, ремонт, интерьер.
Для приобретении опыта можете выбрать любую тему. Допустим, случайно открыл для себя, что в Интернете большой посещаемостью пользуются сайты представляющие буклетницы - мобильные стойки для брошюр. Google располагает прекрасными изображениями буклетниц, можете взять их для оформления своих экспериментальных сайтов.
В исходном коде страниц шаблона присутствуют комментарии на русском языке для более удобной работы с кодом. Комментариями окутаны все основные блоки страниц.
Шаблон состоит из пяти страниц с ориентировочными темами: главная, о проекте, сервис, портфолио, контакты.
Страницы адаптированы для поисковых систем. необходимо лишь заполнить метатеги <head> данными своего сайта: title, описание, ключевые слова. При желании можете заменить charset=UTF-8 на charset=windows-1251.
Размещение содержимого и объектов сайта стандартное: html страницы и файл .css в корне сайта, в папке images картинки, фотографии, в папке js - java скрипты. Присутствуют необходимые PSD заготовки логотипы, кнопок, заголовка.
Параметры работы слайдера на главной странице регулируются.
Время задержки перелистования и скорость смены картинок редактируется в файле easySlider1.5.js, лежащего в папке js
Атрибуты: pause и speed соответственно.
Число указано в милисекундах, по умолчанию: 3000 и 800.
Если Вы не будете использовать поиск, то удалите все, что между комментариями:
<!-- Поиск -->
<!-- Конец поиск -->
И вставьте:
<!-- Поиск -->
<div class="search">
<img border="0" src="http://sitey.ru/images/im.jpg" width="360" height="60">
<!-- Конец поиск -->
Где im.jpg - Ваша картинка в шапку сайта. Размеры желательно соблюсти, особенно высоту (до 80 px)
Более подробные инструкции по редактированию и поисковой оптимизации шаблонов страниц, найдете в соответствующих разделах на этом сайте. Там же, все о загрузке файлов на хостинг и разные всякости для новичков вебстроя и сочувствующих.
В первом уроке мы уже рассмотрели маленький пример создания html-страницы. Теперь создадим более сложную страничку. Хочу отметить, что я буду объяснять как это сделать без применения специальных программных средств. Все, что понадобится - обычный блокнот от Windows. Можете скачать Notepad++, он будет подсвечивать теги. Итак, начнем.
Откройте блокнот и скопируйте в него следующее:
Далее нажмите "сохранить как", в поле тип файла выберите "все файлы", а в названии напишите index.html. Обязательно в конце названия должно быть .html, иначе это будет другой тип файла.
Если по каким-то причинам у Вас не получается создать html страницу, то Вы можете скачать предыдущий пример по ссылке: index.rar .
Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.
Описание тегов из примера
1. <html></html> - эти теги должны присутствовать на странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.
Вообще любая 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> и т.п. может быть много.
7. <br/> - это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.
8) <img alt="подсказка" src="http://zarabotat-na-sajte.ru/uroki-html/URL_%D0%98%D0%97%D0%9E%D0%91%D0%A0%D0%90%D0%96%D0%95%D0%9D%D0%98%D0%AF"> - это одиночный тег, который выводит изображение.
→ src - обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
Примечание.
→ alt или title - в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта. особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.
Более подробно про <img> читайте в специальном уроке: html тег <img>
9. <font></font> - эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.
Примечание: <span></span> - аналогичный тег.
10. <b></b> - выделить жирным. Все, что заключено между <b> и </b> будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является <strong></strong> .
Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам.
11. <hr/> - одиночный тег, который выводит горизонтальную линию. Имеет несколько параметров, о которых будет сказано позднее.
→ href - этому параметру необходимо присвоить URL ссылки, на которую ведет ссылка. Он не является обязательным параметром, однако если его нету, то какой толк от такой ссылки, которая никуда не ведет.
Примечание. если документ, на который Вы хотите перейти, находится в одной папке с Вашей html-страницей, то достаточно написать название этого документа.
Этому важному тегу посвящен специальный урок: Урок 5. HTML тег a .
Более подробное описание этих и других тегов читайте в следующих уроках.
Уважаемый читатель, теперь Вы уже умеете создавать элементарные страницы с изображениями и ссылками. Описанные выше теги встречаются довольно часто и у них есть много различных параметров, о которых Вы узнаете далее. Целью этого урока было ознакомление с простыми тегами html страниц. Теперь советую перейти к следующим урокам.
