Title of the document

Заметьте, что в аттрибуте alt нужно писать ключевые слова, по которым оптимизируется сайт, можно с названием сайта, создавая бренд, а не надписи вроде “Логотип компании“. При таком подходе ваш логoтип также будет выдаваться в результатах поиска изображений по выбранным вами ключам или бренду. Пример можно посмотреть на сайте seogen.net – seo генератор.

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

.logo width:100px;
height:30px;
background:url(images/logo.jpg) no-repeat left top;
>

Примеры логотипов первого типа (ненавигационных).

Главная страница Google. Посмотрите, как офорлен их логотип в HTML коде.

На данной странице сайта ресторана сложно выделить логотип, он наложен на верхнюю галерею.

Навигационные логотипы

Логотипы этого вида можно оформить разными способами, например, так:

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

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

При этом, чтобы спрятать ключевые слова от глаз пользователя, достаточно в CSS использовать правило text-indent.

Опять же, следует заметить, что многие в логотипах в аттрибуте alt ставят ненужную никому информацию “Лого сайта”, “Домашняя страница” и т.д. (напр., www.photostart.info). Ставьте в alt нужные ключи, а если вы хотите уведомить пользователя при наведении мыши на логотип о том, что после клика он будет перенаправлен на главную страницу, используйте для этого аттрибут title для ссылки или изображения, который для этого и предназначен и не берется во внимание поисковиками.

Примеры навигационных логотипов:

Внутренняя страница Google.

Биржа ссылок Сапа

Выводы

Логотипы необходимо оформлять в коде так, чтобы с одной стороны оптимизировать HTML код, с другой – использовать нужные ключи для передачи ссылочного веса на главную страницу и с третьей – использовать аттрибут title для юзабилити. Подводя итог, формула идеального логотипа будет выглядеть следующим образом:

Источник

Урок 2 — Верстаем первую страничку

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

Из чего состоит страница сайта

        Content of the document.   

Каждая страница состоит из выше указаной структуры !DOCTYPE html — не обязателен, все будет работать и без этого, но желателен для браузера, чтобы он понимал, какой язык разметки используется. Дальше открывается тэг html , в котором и должно быть все содержимое страницы Первым и обязательным тегом является head, в который мы пишем заголовок страницы, указываем кодировку, подключаем стили

Тэг head закрывается и открывается body, тэг, в котором и хранится визуальная часть сайта

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

Hello world
Some text

• Мы добавили шапку тегом header (не путайте с head), в шапке у нас будет хранится логотип (прописали тегом img) и навигационное меню.
  • nav — это блок для списка ссылок
  • ul — указываем что сейчас будет начинаться список
  • li — строчка из списка
  • a — ссылка

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

  Если сейчас весь этот код поместить в jsfiddle и запустить, вы увидете не сгруппированный текст, который мало чем похож на сайт. Для этого и нужны стили

  Попробуем немного украсить наш сайт:

   body < margin: 0; padding: 0; max-width:700px; margin:0 auto; >header < border-bottom: 1px solid #ccc; overflow: hidden; margin-bottom: 20px; >header .logo < float:left; >header nav < float: right; >header nav li < display: inline-block; padding-right: 10px;; >section h3 < font-size: 35px; >section p < font-size: 20px; >footer

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

  Для начало мы указали тэгу body, никаких отступов, максимальная ширина 700 px и выровнить по центру. Все это мы проходили на прошлом уроке.

  Шапке мы указали следующее:

  • border-bottom: 1px solid #ccc — Линия снизу шириной в 1 px, сплошная, цвет #ccc
  • overflow: hidden — все что в этом блоке, остается в этом блоке, все что хочет вылезти за его границы, будет удалено.
  • margin-bottom: 20px; — Внешний отступ снизу 20 px

  Цвета могут задаваться следующим образом: #ccc или тот же цвет rgb(204, 204, 204)

  В каждом браузере есть консоль, в который вы можете просмотреть из чего состоит страница, ее стили, файлы, картинки и прочее. На windows, это кнопка f-12, чтобы выделить какой то определенный блок на сайте, жмите Ctrl + Shift + C. Можете кликнуть в любое место на сайте и вам сразу отобразятся стили и структура.

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

  header .logo — Это значит, что внутри тэга header тег с классом logo

  Тэгу div с классом logo присваеваем float:left;. Это значит что блок будет прижиматься к левому краю, а все рядом стоящие блоки будут его как бы обтекать

  Навигационной меню мы задаем float:right; чтобы он прижался к правому краю

  Переходим к нашему списку header nav li. Мы указываем что, у каждого элемента из списка, будет отступ справа в 10 px. А также задаем display: inline-block

  На данный момент, мы разберем 2 варианта:

  • display: block — блочный элемент, который растягивается на всю ширину, все последующие блоки, будут идти после него снизу
  • display: inline-block — Блок растягивается ровно на столько, на сколько широкие у него внутренности, все последующие inline блоки, будут выстраиваться рядом справа.

  Последнее что осталось разобрать из того что вы не знали, это background-color. Но как понятно из называние стиля, это цвет заднего фона.

  Если сейчас скопировать весь html и css и вставить в jsfiddle, то вы увидите уже что то похожее на сраничку

  

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

  Источник

  Create a Logo with CSS

  Today, we’re creating a simple logo with CSS. Since CSS3 became generally available in all browsers a few years ago, we can use a lot more builtin browser features where before Photoshop became necessary (I just say rounded corners!). Creating a simple logo with CSS is one of these situations where we can leverage recent CSS features such as transform and animation to create something visually appealing!

  Create a div container

  Create a container that will contain our logo

  Create a CSS Class

  We’re assigning a new font-size to verify that the class gets applied.

  Pick colors and configure display settings

  If you don’t already have a color scheme, go ahead and create one. I use https://coolors.co for that. With the new color scheme in place, let’s define a background and text color:

  After plugging in the colors you will notice that the expands over the site’s full width.

  This happens because is a block element. It automatically expands over the full page width.

  By default, a block-level element occupies the entire space of its parent element (container), thereby creating a “block.”

  https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

  In our case, we’d like the to occupy only as much space as it really needs. We can accomplish this by changing its display setting to inline-block .

  What you can see now is that its width has changed so that it only is as long as its content.

  With display we can change an HTML element’s way of rendering itself. The setting block ensures that it takes up the full width of its parent container, where inline on the other hand works like this:

  The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space

  https://developer.mozilla.org/en-US/docs/Web/CSS/display

  inline-block is a combination of inline and block :

  The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

  https://developer.mozilla.org/en-US/docs/Web/CSS/display

  Set a new font

  It’s time for a different font. Right now the logo text is rendered using the browser’s default font. We’d like to customize this a bit.
  Instead of the default font, we now use Courier. Add font-family: Courier to the class.

  Margin and Padding

  The next step is to add some margin and padding to improve optics. Add margin: 15px; and padding: 15px; to the class:

  Margin defines the space between the element’s outer borders and its parent conainer, where with padding we can control the space between the element’s inner border and its children.

  Time for Transformations

  Did you know that CSS can also animate and transform your HTML elements? Let’s get into it.
  First, we’ll do some rotation and skew.

  Add transform: rotate(-10deg) skew(-17deg); to the class:

  transform accepts a bunch of different values. In our case, we’re configuring a -10 degree rotation, followed by a skew. The skew ensures that the text looks a bit more natural. The logo now looks like this:

  Animate!

  In the last step we’re adding some animation as well. It’s possible to animate a lot of different properties. In our case, we’re focusing on the background color.

  We start with defining keyframes .

  These define the different states of the animation. We specify a color at 0%, 50% and 100% to ensure a gradient. Once the keyframes are in place, it’s time to use them on our logo class. We add animation: pulse 5s infinite; style for that:

  Let’s break down the animation style. We specify that we’d like to use the pulse keyframes in a five second interval. Also, the animation is supposed to run indefinitely. The browser takes care of everything else.

  And with this we’re done! You just created your first logo with CSS and animations!

  Make sure to checkout the source code for this example on Codepen!

  Источник