Display logo in html

Урок 11. Установка логотипа через CSS

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

Для того, чтобы установить логотип через CSS, а не устанавливать его на каждой странице сайта вручную, нужно прописать этот самый логотип в нашем документе CSS. Делаем это так:
Открываем наш документ CSS и вписываем в него такую строчку:
div#logo < width:599; height:98px; background:url('http://dugward.ru/LM311.jpg'); top left no-repeat;>

— «div» -, как вы уже знаете, коробочный тег, который отграничивает элемент от соседних;
— слово «logo» — это собственное наименование нашей картинки логотипа.
— атрибуты «width:599; height:98px;» — это, как вы уже знаете, ширина и высота картинки (в данном случае, ширина и высота логотипа, который мы устанавливали в соответствующем уроке);
— «background:url(‘http://dugward.ru/LM311.jpg’);» — адрес картинки, который записывается именно таким образом (никаких вариаций не допускается, одинарные кавычки должны быть на своих местах);
— «top left no-repeat;» — картинка будет стоять слева, не размножаться.

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

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

Если мы разместим в нашем документе этот фрагмент, то код страницы будет выглядеть так:

Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.

Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. А здесь вы поставите свои баннеры, если захотите

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

Таким образом можно вставлять картинки в любое место страницы вашего сайта. Вы задаёте картинке название и прописываете её в документа стилей CSS, а потом вставляете соответствующий фрагмент в страницу сайта. Например, вы ставите картинку под названием «sw». В документе CSS это будет выглядеть так:

Зачем это нужно? Какая разница, ствить на страницу Но представьте: вы создали в фотошопе новый, более красивый логотип и хотите поставить его на сайт. А у вас на сайте 20, 40, 80 или более страниц. Поменять логотип вручную на каждой из ста страниц. На это же уйдёт уйма времени!
А так — вам достаточно поменять картинку в CSS и она автоматически поменяется на всех страницах.

Примечание: Помните, что стили CSS не допускают неточностей, документ стилей гораздо более «капризный», чем html. Поэтому старайтесь не допускать никаких собственных интерпретаций и если у вас что-то не пошло, внимательно посмотрите, не пропустили ли вы где-нибудь непарную кавычку, или поставили вместо непарной кавычки — парную.
Так же помните, что классы рисунков обозначаются только словами, а не цифрами, как в случае с заголовками. Нужно писать наименование класса прописываемого в CSS рисунка «logo» или «sw», или «net», а не «1», «2», или «3».
Урок окончен.

Источник

Логотип по стандартам HTML5 или Как поставить векторную картинку на веб-страницу

25 февраля 1993 года Марк Андрессен (Marc Andreessen) написал:
Предлагаю новый опциональный HTML-тег: IMG
При нем должен обязательно указываться аргумент SRC=«url».
Тег отсылает к файлу растрового изображения (bitmap или pixmap). Браузер будет запрашивать этот файл в Сети, распознавать как изображение и вставлять в текст сообразно месту тега в коде страницы .

Допустим, вы нарисовали в Corel Draw! логотип компании и собираетесь разместить его на сайте не как-нибудь, а формате HTML5. И, соответственно, размещать картинку не в растровом формате, а в .SVG

Зачем мне картинка в SVG?

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

По умолчанию экспорт из Corel Draw! в SVG формат даже при галочке «Только выделенные объекты» дает в результате картинку такого размера, как наш рабочий лист. То есть картинка будет на A4, если рабочий лист такого формата. Приходится делать отдельный лист точно такого размера в пикселах, какой нам нужен, делать наш логотип именно такого размера, центровать, а потом уже экспортировать.

А теперь вставляем на страницу

мы видим сразу волшебный результат в браузерах под Android 4 и на ipad’ах, но ничего не видим на компьютере в обычных браузерах. Firefox 13, IE 8, Opera 12, Chrome (версия 24)- все дружно предлагают скачать и сохранить SVG файл вместо того, чтобы просто показать его.
Попробуем другой способ вставки SVG —

— показывает совершенно аналогичный результат, Опера, правда, выдает «Нет плагина. Ознакомиться?».
Третий способ вставки SVG – с помощью тега

Вижу опять ту же картину – все мои браузеры не показывают SVG.
По таблице совместимости – все мои браузеры кроме IE8 просто обязаны показывать правильно. К тому же, напомню, планшеты под Android и IPad IOS отображают мою страницу верно.

MIME-Type

Оказывается, дело в том, что мой сервер (IBM Lotus Domino) не умеет корректно отдавать MIME-Type для SVG. И файл, лежащий в File Resources базы, не может быть корректно отдан! Прописываю строчку image/svg+xml в свойствах ресурса. И, о чудо! – все браузеры (кроме IE8) показывают все три варианта (img, embed, object) вставки картинки. Отлично, это меня устраивает, «костыли» для IE будут в gif. Еще раз удивляюсь тому факту, что даже без mime-type на планшетах все показывалось правильно.

Взглянем на логотип поближе

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

А как насчет защиты от несанкционированного копирования и воспроизведения?

Я не претендую на звание специалиста в этой области, наоборот, хотела бы задать вопрос. Просто не нашла ничьего мнения по данному вопросу. У SVG формата нет watermarks, равно как и других защитных атрибутов.
Обычно фирмы владеют файлами в векторах как исходниками. Делая брендбук, дизайн-студии отдают вектор, а везде используется уже растр.
А SVG, вообще-то, текстовый формат, точнее, XML-ный. И, будучи вставленным в любую программу для паблишинга, он будет воспроизведен без потери качества. Это надо учитывать, т.к. редактировать ваши файлы будет гораздо проще и, возможно, потом будет нечем доказать, что вы являетесь законным правообладателем.

Источник

How to add a Vector Logo to your Website using CSS3 and a Scalable Vector Graphic (SVG)

Your logo is the most important piece of your overall branding and is usually the first statement a website visitor will most likely identify with. You of course want your website’s logo to stand out and grab someone’s attention and you definitely want it to look clean and crisp across all devices. So how do you achieve this when so many of today’s devices utilize different display settings? The best current method is to use Scalable Vector Graphics (SVG) and apply them as background images to HTML elements using CSS3. In this tutorial we will teach you how to add a vector logo to your website using CSS3 and a Scalable Vector Graphic (SVG).

STEP 1: Create and save your SVG logo file

In Step 1, you will need to create and save your SVG logo file; this can be done using Adobe Illustrator. If you need help with this step, please reference the Adobe help link below:

Adobe Illustrator Help (Export SVG)

STEP 2: Create an HTML element for the logo

In Step 2, we will be creating an HTML element for the logo. We prefer to utilize the H1 tag for SEO purposes, but please note you can utilize any HTML element you want for this method. Another standard practice of ours is to link the logo to the homepage, if you choose not to link your logo you will need to modify the method below.

HTML

 
<h1 href="YOUR-WEBSITE-LINK">YOUR-WEBSITE-TITLE</a></h1>
 
 
Any HTML element can be utilized.
 
You can use either a CSS ID or CLASS on the logo element.
 
Any HTML element can be utilized.
 
You don’t have to link your logo but you will need to modify the code if you choose not to.
 
Change ‘YOUR-WEBSITE-LINK’ to your website’s homepage URL.
 
Change ‘YOUR-WEBSITE-TITLE’ to your website’s title or company name.
 
 
STEP 3: Use CSS3 to style and add the SVG file as a background to the logo element
 
In the final step we will use CSS to style and add the SVG file as a background to the logo element we created in Step 2.
 
CSS
 
 
Make sure that you are referencing the same CSS ID or CLASS placed on your HTML element.
 
Change ‘YOUR-LOGO-WIDTH’ to your logo’s width.
 
Change ‘YOUR-LOGO-HEIGHT’ to your logo’s height.
 
Change ‘YOUR-SVG-FILE-URL’ to the URL path where your logo SVG file is located.
 
You can adjust padding and margin as necessary but keep in mind padding will affect the overall size of the logo.
 
Setting ‘text-indent’ to -9000px will hide the text placed inside our HTML logo element.
 
Using ‘box-sizing’ helps to control overall sizing, if you do not know about ‘box-sizing’ we suggest that you look it up since it is very helpful with regards to responsive design.
 
 
Full Code
 
 
<h1 href="YOUR-WEBSITE-LINK">YOUR-WEBSITE-TITLE</a></h1>
 
Troubleshooting
 
If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.
  
Источник