В закладки
КонтактыО сайте

Красивые psd макеты. Журналы и газеты: выбор сетки и виды макетов

Для продвижения ресурса в интернете большое значение имеет его наполнение. Кроме наличия качественного и полезного контента, важно и его оформление. Оно должно быть не только правильным, но и красивым. Текст в html по праву является основным способом подачи информации. Html имеет множество разных инструментов для отображения текста. Рассмотрим основные теги и их влияние на SEO-продвижение веб-страницы.

Правильное оформление текста в html

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

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

Роль тегов «i», «b», «strong» и других в SEO

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

Основная задача этих тегов – выделение в статье главных (ключевых) фраз, чтобы читатель обратил на них внимание.

Теперь рассмотрим подробнее каждый из тегов выделяющих текст:

  • «strong» и «b» — выделяет слова жирным;
  • «i» — выделяет текст курсивом.

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

Тег «strong» же, наоборот, выделяя текст, указывает поисковикам, что он имеет логически важное значение. Поэтому рассматривая эти два тега с точки зрения SEO-оптимизации можно сделать вывод, что тег «b» не оказывает никакого влияния на продвижение сайта, тогда как «strong» напрямую влияет на продвижение.

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

Тег «i» используется, когда в статье имеются термины, слова на иностранном языке, мысли, какие-либо названия. Вставлять его в статью стоит в том случае, когда нет более подходящего варианта.

Говоря о значении тегов в оптимизации нельзя не сказать о теге «title». Именно его содержимое является важным фактором, который учитывается при оценивании релевантности страницы. Основной аспект оптимизации этого тега заключается в том, что каждая страница должна иметь свой title, причем он должен быть уникальным. Средняя длина title не должна иметь больше 80 символов, но текст заголовка, несмотря на ограниченный размер, должен быть максимально информативным и емким.

Тег «li» и использование списков

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

Существует целая группа тегов для формирования списков, одним из которых является тег «li». Его предназначение – создание пунктов (элементов) списка. Однако, сам по себе он бесполезен, его нужно использовать только в паре с тегами «ul» или «ol». Использование с «ul» поможет создать неупорядоченный (маркированный) список. Использование тега «li» совместно с «ol» поможет сделать упорядоченный (нумерованный) список.

Красивое оформление текста в html

Мало просто правильно оформить текст на странице. Залог успеха – это красивое оформление. Чем красивее оформлена статья, тем больше шансов, что пользователи будут задерживаться на странице.

Красиво оформленный текст в html может иметь:

  • Разный шрифт (размер, цвет);
  • Подчеркивания;
  • Выделения жирным;
  • Выделения курсивом или жирным курсивом;
  • Рамки;
  • Цветной фон.

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

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

Введение

Памятка призвана помочь начинающим web-разработчикам и блогерам. Предлагаемые инструменты — это тэги HTML (HyperText Markup Language или «язык гипертекстовой разметки», стандартный язык разметки документов в Интернет) и параметры форматирования CSS (каскадные таблицы стилей, формальный язык описания внешнего вида документа, написанного с использованием языка разметки). Параметры форматирования CSS страиваются в тэги HTML с помощью атрибута STYLE.

Если данной памятки для Вас не достаточно, рекомендуем воспользоваться справочниками HTML и CSS .

* В основу памятки легли материалы alex_inside .

Форматирование шрифта

Базовые тэги для работы с текстом:

Обычный абзац с отступом снизу.


* С тэгами можно использовать другие тэги, такие как , , и т.д.
* Внутри тэга

Можно использовать атрибуты для изменения свойств, такие align, style и т.д.

Текст, которому с помощью стиля можно менять свойства.

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

Форматирование текста:

Полужирный текст

Выделение текста курсивом

Подчёркнутый текст

Зачёркнутый текст

Маленький шрифт

Большой шрифт

Знак сноски сверху или индекс снизу от текста

Текст c подсказкой

Размеры шрифта:

Шрифт размером 13 пунктов

Шрифт размером 15 пунктов

Шрифт размером 9 пикселей

Шрифт размером 12 пикселей

Шрифт размером 15 пикселей

Шрифт 2-го размера (может быть от 1-го до 7-го)

Шрифт 4-го размера

Шрифт на 1 размер больше обычного

Заголовки:

Заголовок 1-го уровня

Заголовок 2-го уровня

Заголовок 3-го уровня

Заголовок 4-го уровня

Заголовок 5-го уровня

Заголовок 6-го уровня

Возможные варианты размеров шрифтов (визуальная оценка) доступны .

Оформление текста с помощью шрифтов:

Шрифт Comic Sans Ms

Шрифт Monotype Corsiva

Tahoma, 13 пикселей

Возможные варианты типов шрифтов (наименования и визуальная оценка) доступны .

Оформление текста с помощью цвета:

Синий текст
* Цифра #0000ff означает синий цвет в RGB палитре.

Красный текст
* Можно пользоваться стандартными словесными обозначениями цветов: Red, Green, Blue и т.д.

Голубой фон
* У фона тоже можно менять цвет. Обратите внимание, что атрибут style использует синтаксис CSS.

Синий текст, серый фон

Некоторые предопределённые цвета:

Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue
Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff

Некоторые цвета в шестнадцатиричном коде — интенсивность красного, зелёного и синего (RR GG BB ):

#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF

Возможные варианты палитры цветов и их кодов/наименований доступны .

Оформление текста с использованием тени/подсветки:

Свойство text-shadow имеет четыре параметра: X Y амплитуда цвет .
X — горизонтальное смещение тени/подсветки к тексту. Положительное значение — смещение вправо, отрицательное значение — смещение влево.
Y — вертикально смещение тени/подсветки к тексту. Положительное значение — смещение вниз, отрицательное значение — смещение вверх.
Амплитуда — чем выше значение, тем больше степень размытия.
Цвет — тёмные тона дадут тень, светлые тона — «подсветку».

Примеры использования:


Только тень


Tahoma с тенью


Tahoma с контуром


Tahoma вдавленный


Tahoma объёмный


Tahoma неоновый


Tahoma неоновый


Tahoma неоновый


Tahoma, много оттенков

Выравнивание текста и форматирование параграфов

Выравнивание текста:

Выравнивание текста по левой стороне

Выравнивание текста по центру

Отцентрированный текст

Выравнивание текста по правой стороне

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

Вариант выравнивания текстов по обеим сторонам с использованием параметра форматирования CSS

Оформление сносок (комментариев) с отступом абзаца:


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

Форматирование параграфов и областей:


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

ВНИМАНИЕ! Этот блок вставлен в текст перед (!) словом «Привет!»

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

Преформатированый текст сохраняет отступы слева и между словами и устанавливает те отступы, что вы укажите пробелами. Предупреждение! Тэг не делает переноса строки автоматом!




с выравниванием справа.


Текст с правого краю в две строчки,
с выравниванием слева.
< br clear="all" >


Бегущая влево строка.

Бегущая вправо строка.

Бегущая от края к краю строка.

Скролящийся вверх
текст с полезной
информацией.

Скролящийся вниз
текст с полезной
информацией.

Вертикальная перемотка большого текста:

Лорем ипсум долор сит амет, консектетур адиписицинг элит, сед до эиусмод темпор инцидидунт ут лаборе эт долоре магна аликуа. Ут эним ад миним вениам, кьюс ноструд эксерцитатьён ульламко лаборис ниси ут аликуип экс эа коммодо консекуат. Дьюс ауте ируре долор ин репрехендерит ин волуптате велит эссе киллум долоре эу фугиат нулла париатур. эксцептеур синт оккаекат купидатат нон пройдент, сунт ин кульпа куй оффициа десерунт моллит аним ид эст лаборум.

Вертикальная перемотка большого текста c HTML-кодом:


Текст без html, шириной в 55 символов и высотой в 5 строк.

Даже скролить можно, круто, да!? А html не работает.

Но лучше используйте div из предыдущего примера, если нужна просто прокрутка…

Интерлиньяж (межстрочный интервал) текста:




Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.

Отступы объектов

Границы областей в разделе сделаны видимыми (пунктиром) для оценки отступов.

Область с отступом сверху в 10 пикселей

Область с отступом слева в 20 пикселей

Область с отступом справа в 250 пикселей

Область с отступом снизу в 15 пикселей


  • Один из пунктов списка

  • Другой такой пункт

  • Ещё один пункт.


    • * Закрывающий тэг не обязателен для использования.

    Также можно выбирать разные виды списков через стиль:

  • Один из пунктов списка
  • Другой такой пункт
  • Ещё один пункт.


  • Один из пунктов списка

  • Другой такой пункт

  • Ещё один пункт.

    • Значения list-style-type для списков:
    circle — маркер в виде кружка
    disc — маркер в виде точки
    square — маркер в виде квадрата
    decimal — арабские числа (1, 2, 3, 4,…)
    decimal-leading-zero — арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,…)
    lower-alpha — строчные латинские буквы (a, b, c, d,…)
    upper-alpha — заглавные латинские буквы (A, B, C, D,…)
    lower-greek — строчные греческие буквы (α, β, γ, δ,…)
    lower-roman — римские числа в нижнем регистре (i, ii, iii, iv, v,…)
    upper-roman — римские числа в верхнем регистре (I, II, III, IV, V,…)
    none — отменяет маркеры для списка.

    Картинки

    - пример вставки картинки.

    width="200px" > - размер картинки по ширине.

    height="500px" > - размер картинки по высоте.

    Изображение со всплывающим текстом при наведении на него курсора:
    title="Этот текст появится при наведении курсора на картинку!" alt="А этот при её отсутствии" >

    Изображение слева, текст обтекает картинку справа и имеет горизонтальный отступ от неё в 6 пикселей:
    style="float: left ; margin:0 6px 6px 0 " > текст

    Пишем текст поверх картинки:

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

    Картинка в выделенной области, с прокруткой:


    Отображаемую ширину указываем внешнему div-контейнеру в атрибуте width в пикселях. Для вертикальной прокрутки, указываем высоту height . Ширина и высота должна быть меньше чем у картинки.

    Всплывающая подсказка , отображающаяся при наведении курсора на ссылку:

    Чтобы визуально оформить и выделить текст в html применяют такие элементы:

    STRONG

    Выделяет текст жирным шрифтом:

    Между этими тегами текст будет выделен жирным шрифтом EM (Emphasis)

    Выделяет текст, заключенный между открывающим и закрывающим тегами, курсивом:

    Этот текст будет выделен курсивом U (Underline)

    Отображает помещенный между открывающим и закрывающим тегами текст как подчеркнутый:

    Данный текст подчеркнутый SUB

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

    Формула пропана С 3 Н 8

    Результат: С 3 Н 8

    SUP

    Используется для создания верхнего индекса. Например:

    Будет выглядеть 2 5 = 32.

    FONT

    Используется для изменения цвета, шрифта и размеров и текста.
    Атрибуты:
    SIZE - с помощью него можно менять размер шрифта. Возможные значение - 1 , 2 , 3 , 4 , 5 , 6 , 7.
    COLOR - задает цвет текста.
    FACE - для определения шрифта (Times New Roman, Arial, Tahoma)

    Например:

    Этот текст без оформления

    Увеличенный желтый шрифт

    Красный текст 3 размера

    При просмотре в браузере увидим:

    SIZE="+2" это значит увеличенный шрифт на 2 единицы по сравнению со стандартным. Стандартный размер шрифта равен 3 .

    HR

    Применятся для вставки в текст горизонтальной линии. Отличительная особенность – нет закрывающего тега.
    Атрибуты:
    ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения:
    left – выравнивает по левому краю документа.
    right – выравнивает по правому краю.
    center – выравнивание по центру документа (используется по умолчанию).
    WIDTH – применяется для определения длины линии в пикселах или процентах от ширины страницы.
    SIZE – толщина линии в пикселах.
    NOSHADE – с помощью этого атрибута линия закрашивается как сплошная. Без него – линия выглядит объемной.
    COLOR – задаем цвет линии.

    Например:

    Текст до линии Текста после линии
    А это линия толщиной 3px без noshade
    А здесь линия c noshade закрашенная в красный цвет

    Результат:


    Следующая страница -

    Здравствуйте, дорогие читатели . Сегодня хочу рассказать Вам как сделать красивые теги (метки) только с помощью CSS3.

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

    А вот если они ещё и красивые, тогда вообще супер, так и хочется нажать на них:-)

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

    Хотелось бы добавить, что в исходниках есть три примера. Но на практике мы рассмотрим только один. Почему? Потому что в двух примерах изменён только цвет, там всё очень просто, и проблем с эти возникнуть не должно. Ну ладно, давайте уже будем делать.

    ι HTML

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

    Google Photoshop Twitter Вкладки Иконки Красивые сайты Модальное окно Новичку Подсветка кода Поисковики Полезные сайты Прозрачность Скачать Слайдер Создать блог

    Как видите мы сразу задали класс нашим будущим меткам — tagcloud. Теперь давайте сделаем красивый вид с помощью стилей.

    CSS .tagcloud { float:left; width:300px; margin-top:20px; margin-right:10px; } .tagcloud a { font-size:13px; color:#999; border-radius: 3px; background: #333; border-bottom:2px solid #888; margin:5px; padding:5px 5px 7px; float:left; -moz-transition: all 0.2s 0.01s ease-in; -o-transition: all 0.2s 0.01s ease-in; -webkit-transition: all 0.2s 0.01s ease-in; } .tagcloud a:hover { color:#fff; background-color:#FF6766; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); }

    Сам список сделан шириной в 300 пикселей. Естественно Вы можете сделать шире или уже для Вашего сайта. А также размер , отступы и т.д. всё можно настроить.

    Цвет можно изменить с помощью background: в данном случае цвет #333. Также можно настроить цвет при наведении в классе.tagcloud a:hover, в данном примере background-color:#FF6766;

    Теперь самое интересное — . Плавное изменение цвета и плавный наклон задаётся с помощью transition:

    Moz-transition: all 0.2s 0.01s ease-in; -o-transition: all 0.2s 0.01s ease-in; -webkit-transition: all 0.2s 0.01s ease-in;

    Эти параметры вы можете изменить в секундах, быстрее или медленнее.

    А сам наклон метки задаётся с помощью transform:

    Webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg);

    5deg — это 5 градусов вправо, а -5deg — это пять градусов влево. Естественно это значение Вы можете изменить на большее или меньшое.

    Хочу сказать, что данные метки не работают в ИЕ. И ничего с этим поделать нельзя.

    ι

    Вот и получились у нас метки простые и вроде как красивые. На этом всё. Друзья, если у Вас возникнут какие либо вопросы, я жду их в комментариях. До скорых встреч.

    HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

    Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

    Все HTML-элементы делятся на пять типов:

    • пустые элементы — , ,
      , , , , , ,
      Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию. Индикатор измерения в заданном диапазоне. Раздел документа, содержащий навигационные ссылки по сайту. Определяет секцию, не поддерживающую сценарий (скрипт). Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег . Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная. Контейнер с заголовком для группы элементов . Определяет вариант/опцию для выбора в раскрывающемся списке , или . Поле для вывода результата вычисления, рассчитанного с помощью скрипта.

      Параграфы в тексте. Определяет параметры для плагинов, встраиваемых с помощью элемента . Элемент-контейнер, содержащий один элемент и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение. Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д. Индикатор выполнения задачи любого рода. Определяет краткую цитату. Контейнер для Восточно-Азиатских символов и их расшифровки. Определяет вложенный в него текст как базовый компонент аннотации. Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом. Отмечает вложенный в него текст как дополнительную аннотацию. Выводит альтернативный текст в случае если браузер не поддерживает элемент . Отображает текст, не являющийся актуальным, перечеркнутым. Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом. Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src . Определяет логическую область (раздел) страницы, обычно с заголовком. Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в . Отображает текст шрифтом меньшего размера. Указывает местоположение и тип альтернативных медиаресурсов для элементов , , . Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов. Расставляет акценты в тексте, выделяя полужирным. Подключает встраиваемые таблицы стилей. Задает подстрочное написание символов, например, индекса элемента в химических формулах. Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка. Задает надстрочное написание символов.

      Таблица-шпаргалка с тегами

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

      1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд 5,00 / 3
      Главная →D-Link →Красивые psd макеты. Журналы и газеты: выбор сетки и виды макетов →
      Статьи по теме:
      Тег для создания таблицы.
      Определяет тело таблицы.
      Создает ячейку таблицы.
      Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
      Создает большие поля для ввода текста.
      Определяет нижний колонтитул таблицы.
      Создает заголовок ячейки таблицы.
      Определяет заголовок таблицы.
      Определяет дату/время.
      Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
      Создает строку таблицы.
      Добавляет субтитры для элементов и .
      Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
      		Создает маркированный список.
      Выделяет переменные из программ, отображая их курсивом.
      Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
      Указывает браузеру возможное место разрыва длинной строки.