FAQ по HTML


Оглавление (нажмите, чтобы открыть):

Вопросы и ответы

Вопросы и Ответы

Создать сайт
Красивый дизайн и удобное управление для каждого сайта.

Создать интернет магазин
Современная торговля приносящая прибыль.

Продвинуть сайт
Продвижение в поисковых системах и социальных сетях.

Отдел Архитектурной визуализации

Отдел 3D и 2D анимации

  • Все вопросы (117)
  • Графический дизайн (6)
  • Web-дизайн и создание сайтов (30)
  • Система управления сайтом (CMS) (5)
  • Продвижение (18)
  • Анимация (6)
  • 3D-графика (3)
  • Программирование (3)
  • Хостинг (размещение сайтов в сети) (6)
  • Вакансии (6)
  • Создание контента для сайта (1)
  • FAQ по PHP (6)
  • FAQ по JavaScript (4)
  • FAQ по HTML и CSS (4)
  • Linux и управление сервером (7)
  • Создание мультимедийных презентаций (2)
  • Flash (7)
  • Видеомонтаж (3)

ВАШ ВОПРОС

ВОПРОСЫ И ОТВЕТЫ (FAQ). FAQ по HTML и CSS

Вопрос:

Подскажите как сделать чтоб курсор на элементе становился как на ссылке в виде руки. cursor: hand не работает в Opera.

Вопрос:

Скажите IE6 неверно отображает PNG как с этим бороться..

Вопрос:

Как сделать стрелочки вправо или влево чтобы они были символами а не картинками?

Вопрос:

Пытаюсь разместить DIV с текстом над Flash. Ничего не получается. Это вообще возможность?

Создать сайт
Красивый дизайн и удобное управление для каждого сайта.

Создать интернет магазин
Современная торговля приносящая прибыль.

Продвинуть сайт
Продвижение в поисковых системах и социальных сетях.

Основы HTML для начинающих

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

Для изучения урока, скачайте архив с необходимыми файлами.

HTML — это язык разметки документов. Правильное произношение — Эйч Ти Эм Эль.

Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

Ключевое слово здесь — документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае — в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.

HTML — это язык разметки документов для браузера. Word’ом здесь выступает браузер, а документом — HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя — с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.

Да, простой набор и форматирование текста в офисных приложениях не имеют ни чего общего с программированием. Но наблюдательный читатель заметит важную деталь — в текстовом процессоре мы набираем, редактируем и форматируем текст и картинки с помощью визуальных кнопочек и меню, но почему же HTML код пишется вручную? Зачем изучать так много технических деталей написания разметки для документа?

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

Этакий Word для HTML. Такие визуальные редакторы называются:


WYSIWYG редакторы — What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.

Я их называю «вузивуги». Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно — не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.

Но, как говорится, ни чего просто так не бывает. А если конкретнее — у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:

  • Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
  • HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки
      , редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
    • Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
    • Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
    • Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.

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

    Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.

    Структура документа HTML

    Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.

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

    Давайте создадим на компьютере первоначальный шаблон — файл index.html, откроем с помощью редактора и вставим в него следующий код:

    Обратите внимание, документы HTML имеют расширение .html.

    Итак, по порядку из примера.

    — тип документа (доктайп)

    Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.

    Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML — пятая и приведенный в примере доктайп является актуальным.

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

    — начало документа

    Первый тег, который мы встречаем после доктайпа, это .

    HTML тег — структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.

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

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

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

    Далее, мы видим тег , который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:

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

    Тег — заголовок документа

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

    Метатег

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

    Метатег — специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге . Метатеги не являются обязательными в структуре HTML документа.

    Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.

    Фавиконка (favicon)

    Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) — миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.

    CSS стили документа

    Подключает к документу CSS файл со стилями оформления HTML.

    CSSкаскадные стили оформления HTML документа. У каждого тега, который находится в теге , имеется набор свойств, такие как — цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция
    подключает внешние файлы к документу HTML, в том числе и стили CSS.

    Единый форум поддержки

    Меню навигации

    Пользовательские ссылки

    Информация о пользователе

    Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » FAQ по дизайну форума в CSS

    FAQ по дизайну форума в CSS

    Сообщений 1 страница 20 из 26

    Поделиться1Сб, 4 Ноя 2006 23:47:16

    • Автор: Zebra
    • Гуру идиотов
    • Зарегистрирован: Сб, 4 Ноя 2006
    • Сообщений: 942
    • Уважение: +1135
    • Позитив: +60
    • Пол: Женский

    • Последний визит:
      Ср, 22 Авг 2020 21:33:05

    Являясь администратором форума, мы можем полностью изменить всю его графическую разметку. Инитерфейс форума состоит из отдельных элементов — чаще всего таблиц и других объектов, лежащих внутри этих таблиц. Это не значит, что мы можем изменить СОДЕРЖАНИЕ этих элементов, по крайней мере черех CSS, однако пользуясь исклюсительно CSS кодами мы можем в абсолютной степени из менить все, что касается их дизайна и графического оформлание — ФОНЫ, ФОНОВЫЕ РИСУНКИ, ОБРАМЛЕНИЯ, ВЫРАВНИВАНИЕ ТЕКСТА, ВСЕ ПАРАМЕТРЫ ШРИФТОВ И МНОГОЕ ДРУГОЕ.

    Вся работа с дизайном форума через css коды будет представлять собой прописывание кодов для отдельных элементов. Вставлять данные коды необходимо в Администрирование — Настройки — HTML-верх.
    Так как речь идет о css кодах, то прежде чем начать прописывать css текст для каждого отдельного элемента форума необходимо будет проставить теги стиля , между которыми можно будет расположить css для отдельных элементов.

    Вписав в HTML-верх эти два тега между ними, вместо многоточия, можно будет вставлять все необходимые для нового дизайна css коды.
    Принципиальное правило которое нужно учитывать: вы можете прописать коды для всех элементов или только для одного, а также только для некоторых, но чтобы они работали, размещайте их всегда МЕЖДУ тегами

    Продолжение для Опытных уже пользователей:

    Поделиться2Сб, 4 Ноя 2006 23:47:41

    • Автор: Zebra
    • Гуру идиотов
    • Зарегистрирован: Сб, 4 Ноя 2006
    • Сообщений: 942
    • Уважение: +1135
    • Позитив: +60
    • Пол: Женский
    • Последний визит:
      Ср, 22 Авг 2020 21:33:05

    Для тех, кто имеет слабые или приблизительные представления о CSS .

    Как было сказано, менять дизайн всех элементов мы будем при помощи css кодов для этих элементов.
    Что проедставляет собой css код для какого либо элемента?
    Он состоит из СЕЛЕКТОРА, ПАРАМЕТРА и АРГУМЕНТА.
    Стандартный css код выглядит следующим образом.

    #element1 — это ИМЯ элемента, который мы собрались менять
    parameter — это любое СВОЙСТВО этого элемента. Например, фон, высота, ширина, цвет, поля и т.д.
    argument — это ЗНАЧЕНИЕ свойства. Наприимер, у свойства «фон» может быть значение голубой, оранжевый, прозрачный и т.д.

    Вот пример того, как выглядит код для меню навигации

    где #pun-navlinks — название элемента, background-color — свойство, ЦВЕТ ФОНА в даном случае, а #FF0000 — само название цвета.

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

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

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

    Далее следует список наиболее часто используемых ПАРАМЕТРОВ. Вы не обязаны прописывать их все для каждого элемента, а только те, которые собрались менять.

    Поделиться3Сб, 4 Ноя 2006 23:54:17

    • Автор: Zebra
    • Гуру идиотов
    • Зарегистрирован: Сб, 4 Ноя 2006
    • Сообщений: 942
    • Уважение: +1135
    • Позитив: +60
    • Пол: Женский
    • Последний визит:
      Ср, 22 Авг 2020 21:33:05

    ПРИМЕЧАНИЕ 1: для всех параметров, которые требуют указания цвета, например, ФОНА и ЦВЕТА ШРИФТА, необходимо указывать веб-название соотвествующего цвета. Их можно найти тут: ТАБЛИЦА ВЕБ-ЦВЕТОВ

    Например, вот так будет выголядеть код, если элементу1 мы хотим задать красный цвет фона

    ПРИМЕЧАНИЕ 2: для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения
    em — текущий кегль (высота шрифта);
    ех — высота буквы х для текущего кегля;
    рх — пикселы (относительно координат окна).
    in — дюймы;
    cm — сантиметры;
    mm — миллиметры;
    pt — пункты;
    ШИРИНУ ДОПУСТИМО ОБОЗНАЧАТЬ В ПРОЦЕНТАХ
    Например, вот так мы задаем ширину и высоту элемента

    background-color
    Цвет фона элемента. Значением может быть веб-название цвета.
    Пример: #element1

    background-attachment
    Определяет, будет ли прокручиваться фон.
    Значения:
    scroll — фон поддается прокрутке
    fixed — не поддается прокрутке.
    Пример: #element1

    background-image
    Фоновая картинка
    Значения:
    url («. «) — где в скобках адрес картинки
    none — никакой картинки
    Пример: #element1

    background-repeat
    Определяет, будет ли размножаться фоновая картинка
    Значения:
    no-repeat — Не размножается
    repeatx — размножается по горизонтлаи
    repeaty — размножанется по вертикали
    repeatxy — размножается в обоих направлениях.

    background-position
    Расположение фоновой картинки на странице
    Значения:
    Сначала указывается расположение по вертикальной оси: top, center или bottom , затем по горизонтальной: left, center или right
    Пимер: #element1

    border
    Все параметры рамки, например, толщина, цвет и т.д.
    Пример: #element1

    border-color
    Цвет рамки
    Пример: #element1

    border-width
    Толщина рамки
    Пример: #element1

    border-style
    Стиль оформления рамки всех сторон рамки
    Значения:
    none — указывает на то, что рамки нет.
    dotted — задает пунктирную рамку из точек
    dashed — задает штрих — пунктирную рамку
    solid — задает одинарную сплошную рамку
    double — задает двойную сплошную рамку
    groove — создает трехмерный эффект
    ridge — создает трехмерный эффект возвышающейся рамки
    inset — создает трехмерный эффект заглубленности фона
    outset — создает трехмерный эффект выпуклости фона
    Пример: #element1

    border-top
    Все параметры верхней рамки
    border-bottom
    Все параметры нижней рамки
    border-left
    Все параметры левой рамки
    border-right
    Все параметры правой рамки
    Пример: #element1

    color
    Цвет шрифта в элементе
    Пример: #element1

    float
    Отображение растекающегося объекта
    Значения:
    left — отображает растекающийся объект на левой стороне
    right — отображает растекающийся объект на правой стороне
    none отображает объект вставленным в страницу
    Пример: #element1

    font-size
    Размер шрифта
    Значения: См. Примечание 2.
    А также:
    xx-small, x-small, small, medium, large, x-large, xx-large.
    Пример: #element1


    font-style
    Начертание шрифта.
    Значения:
    normal — соответствует основному начертанию
    italic — курсив
    oblique — чуть менее наклонный, чем курсив
    Пример: #element1

    font-weight
    Толщина начертания
    Значения:
    normal — обычный шрифт
    bold — полужирный
    число от 100 (минимальная жирность) до 900 (максимальная)
    Пример: #element1

    font-family
    Семейство шрифта
    Пример: #element1

    font
    Все вышеперечисленные параметры шрифта вместе
    Пример: #element1

    display
    Способ отображения элемента
    Значения:
    none — элемент вообще не виден
    block — выдает элемент в рамке
    list-item — выдает элемнт как часть списка и присваивает ему маркер
    inline — выводит объект в одну строку.
    #element1

    height
    высота элемента
    width
    ширина элемента
    Значения: см. Примечание2.
    Пример: #element1

    padding и margin
    Это два на первый взгляд похожик параметра. Но между ними есть разница:
    padding — линия отбивки материнского объекта
    margin — линия отступа дочернего объекта.
    Для примера представьте себе окно Word. Само окно Word — материнский объект. А текст, который мы пишем — дочерний объект. Теперь, в данном случае линией отбивки для материнского объекта будет расстояние от края окна до краев листа. Потому что писать текст мы в любом случае можем только на листе. Поэтому padding — это некая граница, внутри которой в одном элементе могут распологаться другие элементы. Margin же в данном примере будут поля, которые мы установили для текста. Т.е. это простой отступ на котором располагается элемент, в данноом случае текст.

    padding-top
    Верхняя отбивка
    padding-bottom
    нижняя отбивка
    padding-left
    левая отбивка
    padding-right
    Правая отбивка.
    padding
    все стороны отбивки сразу.
    Значения: смотри Примечание 2.
    Пример: #element1

    margin-top
    Верхний отступ
    margin-bottom
    нижний отступ
    margin-left
    левый отсуп
    margin-right
    Правый отсуп
    margin
    все стороны отступа сразу.
    Значения: смотри Примечание 2. ДЛЯ ОТСТУПОВ ДОПУСТИМЫ ОТРИЦАТЕЛЬНЫЕ ЗНАЧЕНИЯ
    Пример: #element1

    text-align
    Выравнимание текста внутри элемента.
    Значения:
    left — по левому краю
    right — по правому краю
    justify — по ширине
    center — по центру
    Пример: #element1

    text-decoration
    Украшение текста
    Значения:
    underline — подчеркивание
    overline — верхнее подчеркивание
    none — никакого
    blink — мигание.
    Пример: #element1

    vertical-align
    выравнивание элемента по вертикали
    Значения:
    top — по верхнему краю
    bottom — по нижнему
    middle — посередине
    Пример: #element1

    Создаем скрипт вопрос ответ на PHP для сайта

    Дата публикации: 2011-04-30

    От автора: в этом уроке мы создадим с вами систему вопросов и ответов на PHP, используя также для этих целей возможности MySQL и jQuery. Такую систему чаще всего называют FAQ или ЧАВО и ее использование ограничено лишь Вашей фантазией — ведь это может быть не только система вопрос-ответ, но и, к примеру, пошаговая инструкция при выполнении каких-либо действий или что-либо еще.

    Результат, к которому мы будем стремиться показан в самом начале предлагаемого видео. Вкратце, мы будем показывать только вопросы, а ответы на эти вопросы будут скрыты. По клику на нужный вопрос — ответ на него будет плавно появляться (или выезжать — можно не ограничиваться одним эффектом). Как Вы уже, наверное, поняли — эффекты мы будем добавлять при помощи возможностей библиотеки jQuery, ну а информацию (вопрос-ответ) — будем хранить в БД и получать ее оттуда при помощи PHP. Приступим.

    Время ролика: 52:06

    Ссылка для скачивания исходников: Скачать исходники

    Ссылка для скачивания всего архива (видео+исходники): Скачать одним архивом. Размер: 126 mb.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Шаг 1. Создаем БД для системы вопрос-ответ

    Прежде всего, нам необходимо создать хранилище для информации — это, конечно же, удобнее это сделать, используя БД. Если у Вас будет небольшая по объему страница и для нее не нужна будет БД — этот шаг вполне можно пропустить. Также, если Вы не хотите создавать БД вручную, то можете воспользоваться дампом БД из дополнительных материалов и просто импортировать его (как это сделать я показываю в видео).

    Создадим необходимую нам БД. Об основах работы с БД я рассказывал в ряде предыдущих уроков, поэтому здесь буду объяснять предельно кратко. Если Вы используете пакет Денвер, то перейдите по ссылке http://localhost/Tools/phpMyAdmin/ и Вы попадете на страницу веб-приложения phpMyAdmin, предназначенного для администрирования MySQL. На этой же странице мы даем имя создаваемой БД — назовем ее «faq».

    После клика по кнопке «Create» создастся нужная нам БД. Вся информация в БД хранится в таблицах, поэтому нам нужно создать все необходимые таблицы в созданной БД. Создадим таблицу с тем же именем («faq») и количеством полей 3.

    После клика по кнопке «Go» мы попадем на страницу со структурой создаваемой таблицы. Здесь мы должны дать имена 3-м создаваемым полям и указать еще некоторую информацию:

    имя поля — «id», тип — INT, Index — PRIMARY, AUTO_INCREMENT;

    имя поля — «question», тип — VARCHAR, длина — 255;

    имя поля — «answer», тип — TEXT.

    Давайте вкратце разберем каждое из полей. С именами, думаю понятно — в первом поле «id» мы храним идентификатор пары вопрос-ответ. Во втором поле «question» — храним вопрос и в третьем «answer» — ответ на этот вопрос.

    Далее, тип поля. Для поля «id» мы указали тип INT — это целочисленный тип, т.е., в этом поле будут храниться только целые числа. Тип VARCHAR — это символьный (текстовый) тип, предназначенный для хранения небольших текстов, его длина — 255 символов. В поле типа TEXT можно хранить тексты больших объемов. Кроме того, для первого поля — «id» — мы указали Index — PRIMARY (в русскоязычной версии phpMyAdmin это «первичный ключ») и AUTO_INCREMENT. Эти два атрибута значат, что указанное поле мы не будем заполнять, его будет заполнять сервер. При этом все значения, заносимые в данное поле, будут уникальными, и каждое новое значение будет увеличено на единицу (автоинкремент). Если провести какую-нибудь знакомую аналогию, то это поле можно сравнить с номером по порядку в таблицах.M

    После сохранения структуры таблицы мы можем перейти во вкладку Insert и занести в таблицу необходимые данные (хотя обычно это делается через административную часть).

    Как я говорил, мы заполняем только поля «question» и «answer», поле «id» будет заполняться сервером. Я создам 3 пары вопрос-ответ, но у вас их может быть сколь угодно много.

    Отлично! Мы создали БД и нужную нам таблицу. Теперь пришло время получить информацию из нее с помощью PHP, и создать полноценное приложение вопросов и ответов.

    Шаг 2. Получение информации из БД, обработка её средствами PHP

    Для урока я нашел в сети бесплатный шаблон сайта, в котором создал страницу faq.php. Обратите внимание, что расширение страницы должно быть именно php, поскольку в ней будет присутствовать код PHP. Перед получением информации из БД, мы должны с ней соединиться. Обычно соединение с БД выносят в отдельный файл, который затем просто подключают к странице. Но наш проект учебный и, к тому же, совсем небольшой, поэтому мы все будем делать на одной странице. Итак, откроем в редакторе страницу faq.php и в самом верху страницы подключимся к БД. Делается это при помощи 2-х функций: mysql_connect(«имя сервера», «пользователь», «пароль») и mysql_select_db(«имя БД»). Первой функцией мы подключаемся к серверу БД (в скобках указаны параметры, с которыми работает функция), второй — выбираем нужную БД для работы (на сервере ведь может быть не одна БД):

    Так как я работаю на Денвере, то указываю имя сервера «localhost» (в Вашем случае, скорее всего, имя сервера будет таким же, даже если Вы работаете на сервере хостера… все данные по работе с сервером хостер предоставляет в инструкции). По умолчанию уже создан пользователь с именем «root», которое я и указал. Пароль для этого пользователя не создан, поэтому в качестве третьего параметра функции mysql_connect() я указал пустое значение. Также желательно дописывать при работе с сервером MySQL условие на тот случай, если при соединении с сервером произошла какая-либо ошибка. Это желательно делать по той простой причине, что если не удалось соединиться с сервером, значит не будет вытащена информация на страницу, а, значит, страница будет полупустой, кроме того, на ней еще и будут выведены всевозможные ошибки. Мы задали такое условие функцией die(), которая в случае ошибки прекратит выполнение программы и выведет сообщение, указанное в кавычках.

    Второй функцией мы выбираем нужную нам БД. Теперь мы можем сохранить файл и обновить страницу. Если все сделано верно, то страница должна загрузиться без всяких сообщений и ошибок. После успешного подключения мы можем получать информацию из нужной таблицы (таблиц также может быть несколько в выбранной БД). «Общение» с сервером MySQL происходит посредством запросов. Нам нужен всего один запрос, которым мы вытащим всю информацию из таблицы «faq». В запросе нам понадобится оператор SELECT, который, собственно, и обеспечивает выборку необходимой информации. Сам запрос отправляется в БД функцией mysql_query().

    Итак, в нужном месте блока page (там, где мы хотим выводить вопрос-ответ) открываем конструкцию PHP и пишем запрос:

    Для тех, кто знаком хоть немного с английским этот запрос будет практически полностью понятен. Затруднения может вызвать только символ звездочка («*»). Этот символ можно прочитать как «все» («all»). Сам же запрос можно прочитать так: «ВЫБРАТЬ все ИЗ таблицы faq «. Все выбранное мы поместим в переменную $res. Таким образом, мы получили в $res все содержимое таблицы (пока что 3 строки). Удобство работы с MySQL заключается не только в том, что мы можем хранить информацию в ней, но и в том, что этой информацией можно очень легко манипулировать. Мы можем вытащить только конкретный ряд (строку) или даже конкретное поле ряда. Кроме того, существуют функции для того, чтобы можно было легко манипулировать ВСЕЙ извлеченной информацией, как в нашем случае. Функция эта — mysql_fetch_assoc(). Данная функция обрабатывает каждый ряд результата запроса и возвращает ассоциативный массив. В нашем случае будет обработано 3 ряда.

    Что такое ассоциативный массив я уже рассказывал в нескольких предыдущих уроках. Это массив, ключами которого выступает строка (ассоциация). Ключами нашего массива будут выступать имена полей в таблице «faq». Как я упоминал, функция mysql_fetch_assoc() обрабатывает 1 ряд запроса. У нас таких рядов пока что 3. Для того, чтобы было обработано все 3 ряда — нам понадобится осуществить просто 3 однотипных действия — в этом нам помогут циклы, а именно — цикл while(). О работе с данным циклом я также довольно подробно уже рассказывал, а потому здесь скажу только пару слов. Само слово while можно перевести как «пока», т.е., пока будет выполняться некое условие (оно прописывается в скобках) — мы будем выполнять некий блок действий (они прописываются в операторных скобках).

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

    Весь код блока PHP, отвечающего за вывод информации вопрос-ответ будет таким:

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Как и говорилось, функция mysql_fetch_assoc() берет каждый ряд результата запроса из переменной $res и возвращает ассоциативный массив $row. Как только ряды закончатся — работа цикла завершится. В блоке действий мы при помощи функции (или, скорее, конструкции) echo выводим в блоках каждое конкретное значение элементов question и answer массива $row.

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

    Шаг 3. Пишем функционал jQuery

    Для использования фреймворка jQuery нам, прежде всего, понадобится сама библиотека. Текущую версию ее можно скачать на сайте http://jquery.com/

    Сохраненную библиотеку поместим в каталог scripts под именем jquery.js (можно и в любой другой каталог под любым именем). Теперь мы должны подключить эту библиотеку на нужной странице. Делается это очень просто — внутри тегов head пропишем такую строку кода:

    Теперь скажем несколько слов об основах работы с jQuery. Конечно же, в пределах одного урока невозможно научиться работе с данным фреймворком, но, на самом деле, ничего сложного здесь нет и всю работу с ним можно разделить на 3 этапа:

    отбор элементов и формирование «набора jQuery» (выборки);

    отслеживание событий, которые происходят с отобранными элементами;


    реакция на событие.

    Основа основ работы с jQuery как раз и заключена в первом пункте — отбор элементов, с которыми мы будем работать. Как же мы можем отобрать эти элементы. Все просто — для этого достаточно знаний CSS… Разработчики не стали выдумывать новый синтаксис для фреймворка и для формирования выборки использовали синтаксис CSS.

    Давайте для начала определимся немного с тем, что нам нужно сделать. Все ответы изначально будут скрыты. По клику (это как раз и будет событие) на вопрос — мы покажем (это уже реакция на событие) ответ на него. А в выборку мы, соответственно, должны взять все вопросы. Как говорилось, для того, чтобы взять все вопросы, — нам достаточно знаний CSS… Мы неспроста блокам вопросов присвоили >

    Как видите, используется синтаксис CSS, т.е., мы взяли все элементы с классом question. Далее мы будем просто отслеживать события по отобранным элементам.

    Перед тем, как мы продолжим с jQuery — опишем созданные классы question и answer в таблице стилей. Для этого либо прямо на странице пропишем нужные стили, либо сделаем это в файле стилей layout.css:

    Вкратце опишем то, что мы прописали в коде. Класс question:

    — курсор сделаем в виде руки, т.е., такой, какой мы видим при наведении на ссылку;
    — установим подчеркивание текста;
    — фоновый цвет;
    — рамка;
    — внешний отступ сверху;
    — внутренний отступ слева;
    Класс answer:
    — рамка;
    — внутренние отступы;
    — внешний отступ снизу;
    — и ключевое свойство — скрываем блок.

    После сохранения стилей — все ответы будут скрыты. Теперь пропишем весь код jQuery, а затем прокомментируем его:

    Прежде всего, мы прописали событие ready(), в которое поместили весь остальной код. Это сделано для того, чтобы этот код выполнялся только после того, как будет полностью сформировано DOM-дерево или, говоря проще — после того, как полностью будет загружена страница. Для знакомых с английским она интуитивно понятна — после того, как будет готов (ready — готово) документ — выполним все необходимое. Что же именно мы выполним? Мы отберем все элементы с классом question (в набор попадут все наши 3 блока с вопросами). А далее мы применим к элементам набора метод toggle(). Что делает этот метод? Этот метод организует своеобразный переключатель функций. Поскольку нам необходимо только 2 состояния блоков с классом answer — показывать/скрывать — в переключатель мы поместим 2 функции (на самом деле таких функций может быть гораздо больше). Говоря простым языком — мы создали обычный выключатель с двумя положениями — on|off. Метод toggle() будет отслеживать событие клика по отобранным элементам и применять функцию, при этом одному клику будет соответствовать вызов одной функции. Чтобы было понятнее с порядком работы прописанных нами 2-х функций возьмем пример клик (реакция):

    1-ый клик (вызов функции 1); 2-ой клик (вызов функции 2); ; 3-ий клик (вызов функции 1) и т.д.

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

    Что же мы прописали в функциях, вызываемых переключателем (по клику)? Мы должны по клику на конкретный вопрос вызвать блок с ответом именно на конкретный вопрос. Например, по клику на вопрос 2 — показать ответ 2. Для этого нам достаточно перейти к следующем элементы после того, по которому произошел клик. Сделать это можно при помощи следующей записи: $(this).next(). Опять же, для тех, кто знаком с английским, все должно быть интуитивно понятным.

    This (этот) — это указатель на текущий элемент, т.е., тот элемент, по которому был клик. Next (следующий) — это переход от текущего к следующему элементу. Поскольку следующим после вопроса будет ответ на него — как раз и будет выбран нужный нам элемент, к которому будет применен один из методов эффектов: slideDown (раскрывает элемент набора) или slideUp (скрывает элемент набора) — в зависимости от состояния переключателя.

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

    Заключение

    Вот таким вот не слишком сложным способом, мы реализовали нашу задумку и получили в итоге довольно неплохую систему вопросов и ответов на PHP, часто задаваемых вопросов — FAQ, ЧАВО. Как говорилось выше, использовать наше творение можно не только для создания страницы FAQ. Этот же принцип может быть использован и для, к примеру, формы обратной связи на странице. Для того, чтобы она не занимала много места на странице — мы можем ее скрывать и показывать только тогда, когда пользователь решит ее заполнить. Для этого нам достаточно поместить ссылку с текстом типа «Развернуть форму» и по клику на этот текст — показывать форму. На этом урок завершен. До новых встреч!

    Рад видеть ваши отзывы и вопрос в комментариях!

    Автор: Кудлай Андрей

    Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Разработка веб-приложения на PHP

    Создайте веб-приложение на PHP на примере приема платежей на сайте

    FAQ по HTML тэгам

    главное что тэги форматирования, такие как , тэг изменения свойств шрифта , и еще несколько (таблицы, iфреймы и т.д.) не работают.

    Плюс всетки просьба, не увлекаться с цветовой гаммой.

    Еси я не ошибаюсь, то там перед 16ричным значением первого цвета нуно поставить решетку. вроде как #39F5D3

    2 FenrIX_666 — серый кстати

    С решеткой, без решетки: один хрен. Только сейчас исправил, попробовал — то же самое. Напрашиваются печальные выводы.
    Единственное что есть (и было) различная интенсивность цвета. :(.
    P.S. Жаль еще линии не работают :(.

    я претпочитаю фиолетовый

    Не работает. ну и лана. Пользуйтесь стандартными именами (red, blue, green, yellow etc.)

    тут и нафиг не нужен. пиши просто кучу тире или подчеркиваний.

    Можно сделать всплывающий текст.

    Еще одна вещь, которую я попробую, это встроенный JavaScript. Не бейте, если что.

    З.Ы. Не работает большинство тэгов, радикально изменяющих вид форума (как уже говорилось, hr, table, center и др.).

    p.s. кто не понял — наведите курсор на надпись «фигня обыкновенная» и посмотрите что происходит с надписью «Щелкни по мне» Из поста Брама 😉

    ну.. если ты не заметил, то я специально использовал id Брама. Т.е. при наведении на мою фигню обыкновенную надо смотреть на Брамовскую надпись Щелкни по мне

    А то что произошло с надписью так-то — глупая ашипка.

    p.s. а сам раницы между Магентой, Пеплом и Виолетом не видешь?

    Про цвета риторический вопрос был, себе то есть, теперь видно разницу.

    Извини за глупый вопрос: а этот идэшник он только в этой теме работать будет?

    Правильнее сказать на этой странице. Соответственно только в этой теме.

    Для других тем придеться переписывать строку или придумывать что-то свое.

    2Аргон.
    Не знаю. Если бы я не знал основы ХТМЛя и CSS я бы не понял и половины написаного. Видимо придеться кой-чего в твоем тексте подправить и выложить более понятную версию.
    AQUA
    GOLD
    SILVER
    BRONZE
    #38f5a0 (икто тут говорил что цвета нельзя определить через rgb?)

    собственно так:
    событие=»язык: страница.объект.свойство.параметр1=’. ‘; страница.объект.свойство.параметр2=’. ‘; страница.обект.свойство.параметр3=’. ‘; . «

    среди событий. не помню все. Помню именно:
    onMouseOver — при наводе мышью
    onMouseOut — при убирании с надписи курсора
    onClick (!) — при кликаньи надписи
    onDoubleClick — при двойном щелчке.
    Остальные я не помню/не использую.

    Свойства — сейчас посмотрю и выложу.

    Мдя. со свойствами туговато. Везде какие-то урезанные списки. Видимо придеться искать мой старый учебник. Там и CSS (cascade style sheet) И стили через яваскрипт есть.
    Да и почти полная таблица цветов (названий им) есть.

    p.s. если вдруг форум решат прикрыть — обращайтесь на мыло или асю, что в профиле у меня.

    да. пока не забыл — text-decoration — это выделение текста. Возможны подчеркивание(undrline), перечеркивание (не помню), и подчеркивание, и перечеркивание одновременно(не помню) и отсутствие (скажем убрать для ссылок) — none.

    p.s. пока ссылку писал хотел что-то сказать. но забыл. Ах да. нуно будет проверить на работоспособность тегов [script] и [style].

    Вообщем-то переделываю мануал Аргона, и вот что пока получилось.

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


    1) Самые первые кнопки, которыми пользуються в Ворде: b, i и u. т.е. полужирное, наклонное и подчеркнутое

    Для полужирного начертания надо заключить фразу в теги (ключевые фразы) и
    Например чтобы написать «Полужирный» нужно прописать такую конструкцию:
    Полужирный

    Для наклонного начертания надо заключить фразу в теги и
    Например чтобы написать «Наклонный» нужно прописать такую конструкцию:
    Наклонный

    Чтобы написать почеркнутым надо заключить фразу в теги и
    Например чтобы написать «Подчеркнутый» нужно прописать такую конструкцию:
    Подчеркнутый
    Примечание: на форуме тэг то работает, то не работает.

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

    2) Немного не из той оперы, но всеже. Рассмотрим тут то, что вы чаше всего встречаои в интернете — ссылки. Иногда хочеться написать ссылку на другой ресурс, или на другую тему в форуме. Но ведь банальное написание http://www.playground.ru/forums/main/ ничего не скажет. Хочеться объяснить что это за тема.В этом случае получим некрасивое нагромождение текста. Да и другим будет просто приятнее один раз кликнуть, нежели копировать ссылку, вставлять ее в строку адреса в браузере и т.д. Вообщем ссылка пишеться так:
    Объяснение ссылки
    Например Форум Neverwinter Nights

    Что означают дополнительные параметры? Все просто:
    Параметр href=». « указывает на какую страницу перенесет ссылка.
    Примечание: не забывайте перед страницей указывать http://, иначе ссылка никуда не переведет.
    Параметр target=»new» — сделан ради удобства. Кликнув на такую ссылку страница автоматически откроется в новом окне. Если вы этого не хотите, то просто не указывайте этот параметр.

    3) Форматирование. Т.е. выстраивание текста по краю (правому, левому или центру).
    Оно вроде как не работает, хотя я не проверял.проверка

    4) Так любимые многими таблицы. К сожалению они тут не работают. И сделано это не из-за вредности админов, а по техничиским причинам.

    5) Выделение цветом. Просто через тег тут не подойдет. Сам тег не работает. Не стоит отчаиваться. Это возможно с помощью CSS (cascade style sheet). Они будут рассмотрены во второй части.

    6) Картинки. Можно вставить просто ссылку на картинку. Но ведь можно и саму картинку, чтобы она загружалась вместе с текстом. Это полезно когда хотите показать на скриншоте/картинке то, что хотели сказать.
    Вставляеться она тегом
    Например

    А что тут означают параметры? Тут тоже все просто:
    Параметр src=»https://forums.playground.ru/main/faq_po_html_tegam-38070/» определят какую картинку нужно показать.
    Примечание: Картинка ОБЯЗАТЕЛЬНО должна быть на каком-либо сайте, вставить картинку со своей машины НЕВОЗМОЖНО!
    Параметр alt=». « — добавляеться для удобства. Многие люди отключают картинки для экономии траффика/времени загрузки страницы. Эта надпись будет показана вместо картинки. если вставляете аросто смайлик, то тут ничего писать не надо, либо написать alt=»;)». А вот когда показываете действительно интересную картинку, будьте добры, напишите описание, что сможет заинтересовать таких «жадин» и заставить их загрузить ее.
    Параметр border= 0 или 1 — параметр, разрешающий или запрещающий показ рамки вокруг картинки. Воосновном используеться когда картинки используеться как описание ссылки (делаеться так: ) В этом случае не будет показана синяя рамка, которая смотриться не очень.

    7) А что с фреймами спросят меня знатоки HTMLя. А ничего — отвечу я. Теги и не работают (естественно). На счет я не проверял. Не люблю я эти специфичные штуки под IE. У меня Опера стоит, и плавающий фрейм не всегда корректно отображаеться.

    На сим закончу первую часть.
    Вторая часть будет посвящена CSS (Сascade Style Sheet, каскадные таблицы стилей), в которой рассмотряться многие параметры, такие как размер, шрифт, цвет текста, еще несколько интересных параметров и т.д.
    Третью посвящу скриптам как таковым и языку Javascript в частности.

    WebComplex – самостоятельное создание сайтов

    Все о самостоятельном создании сайта

    Интересный вариант FAQ страницы с помощью CSS3

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

    Если вы посещали FAQ страницу Facebook’а, то вы тоже заметили этот интересный эффект: показывать только часть ответа на вопрос, а при нажатии открывается полный ответ. Конечно, я сразу захотел сделать подобное только с помощью СSS3.

    Как обычно, начнем с начала:

    • На картинке выше я обернул вопрос в label. Но если вы привыкли к “более правильному” подходу, можете обернуть его в заголовок.
    • Использование label::before позволит нам создать правильную треугольную форму.

    Как это работает?

    Здесь не ракетостроение, все намного проще. Мы используем технику checkbox hack, которая опирается на переключение на с помощью .

    Ниже находиться список стилей. Я привел некоторые комментарии для лучшего понимания.

    Готово!

    Надеюсь вам понравилась эта статья, и она поможет вам в ваших проектах.

    Справочник по мета тегам

    Важно помнить, что существует масса мета тегов, и далеко не все они нужны на каждой конкретной странице. В вашем стремлении как можно выгоднее «подать» страницу поисковым машинам, главное не забываться и помнить, что современные поисковики вообще перестают обращать внимание на мета теги типа keywords и description. И правильно делают, ибо настоящая ценность страницы (в глазах робота конечно) состоит в имеющемся в ней тексте, а не в чем-то другом. Некоторые веб мастера вообще не используют или просто игнорируют мета теги, считая это ненужным занятием и лишней нагрузкой страницы.

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

    Очень важный тег. Подумайте, какие слова будет набирать серфер, при поиске информации содержащейся на вашей странице. Вот их то и вписывайте. Не пишите в этом теге одних и тех же слов — поисковые машины это страсть как не любят. Длина списка до 800 символов.

    Указание типа документа и его кодировки. В данном случае windows-1251. Будьте осторожны с этим тегом, так как возможны сбои кодировок из-за разногласия в этом вопросе клиента (броузера) и сервера. Если не уверены, то не используйте его вообще.

    Новости

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

    Робот будет переиндексировать вашу страницу каждые 10 дней. Переодичность можете выбрать сами.

    Если страница изменяться не будет, вставьте:

    Мета-тег от известного белорусского web-дизайнера Сергея Осипова:

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

    «Это важнейший meta-тег и чем любезнее ты попросишь пауков, тем больше рефферов они тебе пришлют. Разрешается писать до 500 символов! Приветствуется краткая автобиография и указание любимых сортов пива. Как только я придумал этот тег — в тот же месяц посещаемость повысилась в три раза. «.

    Вот пример, что можно написать в поле content:

    «Дорогие Пауки и Модераторы каталогов! Присылайте сюда побольше посетителей, пожалуйста!»

    Контроль кэширования для HTTP/1.0. Страницы с этими тегами не будут кешироваться браузерами. Незаменимы при выдаче результатов работы скриптов.

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

    Этот тег через 5 секунд загрузит страницу page.html в текущем окне браузера. Это то, что некоторые называют «редиректом».

    Ёще один тег с ключевыми словами.

    Не совсем понятный тег. Очевидно обозначает тему страницы.

    Тег отвечает за аудиторию, на которую направлен сайт. Например Web Masters.

    Этот тег отвечает за управление поисковыми роботами. Вот, какие могут быть значения CONTENT:

    index — индексировать эту страницу.

    follow — индексировать страницы на которые есть ссылки с этой странице.

    all — эквивалентно двум предыдущим через запятую.

    noindex — не индексировать страницу, но идти по ссылкам.


    nofollow — индексировать, но не идти по ссылкам.

    none — эквивалентно двум предыдущим через запятую.

    По умолчанию CONTENT=»index, follow».

    Тег, в который вы можете вписать своё имя, название студии, или ваш e-mail. Формат произвольный.

    Тег для указания адреса электронной почты автора.

    Описание авторских прав на документ. Формат произвольный.

    Специальные символы

    Некоторые символы не входят в базовую часть таблицы кодов ASCII. К ним относятся буквы алфавитов части европейских языков, математические и некоторые другие символы. Некоторые символы, введенные в HTML документ будут интерпретироваться не так, как задумал автор. Это, например, символы » «, используемые для указания тегов.

    В спецификации HTML указано большое количество спецсимволов, но только некоторые из них используются. Наиболее часто используемые спецсимволы приведены в таблице:

    Греческие буквы

    Имя Код Вид Описание
    « « « двойная кавычка
    & & & амперсанд
    > > знак ‘больше’
    неразрывный пробел
    ¡ ¡ ¡ перевернутый восклицательный знак
    ¢ ¢ ¢ цент
    £ £ £ фунт стерлингов
    ¤ ¤ ¤ денежная единица
    ¥ ¥ ¥ иена или юань
    ¦ ¦ ¦ разорванная вертикальная черта
    § § § параграф
    ¨ ¨ ¨ умляут
    © © © знак copyright
    ª ª ª женский порядковый числитель
    « « « левая двойная угловая скобка
    ¬ ¬ ¬ знак отрицания
    ­ ­ ­ место возможного переноса
    ® ® ® знак зарегистрированной торговой марки
    ¯ ¯ ¯ верхняя горизонтальная черта
    ° ° ° градус
    ± ± ± плюс-минус
    ² ² ² «в квадрате»
    ³ ³ ³ «в кубе»
    ´ ´ ´ знак ударения
    µ µ µ микро
    символ параграфа
    · · · точка
    ¸ ¸ ¸ седиль (орфографический знак)
    ¹ ¹ ¹ верхний индекс ‘один’
    º º º мужской порядковый числитель
    » » » правая двойная угловая скобка
    ¼ ¼ ¼ одна четвертая
    ½ ½ ½ одна вторая
    ¾ ¾ ¾ три четвертых
    ¿ ¿ ¿ перевернутый вопросительный знак
    À À À латинская заглавная А с тупым ударением
    Á Á Á латинская заглавная А с острым ударением
    Â Â Â латинская заглавная А с диакритическим знаком над гласной
    Ã Ã Ã латинская заглавная А с тильдой
    Ä Ä Ä латинская заглавная А с двумя точками
    Å Å Å латинская заглавная А с верхним кружком
    Æ Æ Æ латинские заглавные символы AE вместе
    Ç Ç Ç латинская заглавная C с седилем
    È È È латинская заглавная E с тупым ударением
    É É É латинская заглавная E с острым ударением
    Ê Ê Ê латинская заглавная E с диакритическим знаком над гласной
    Ë Ë Ë латинская заглавная E с двумя точками
    Ì Ì Ì латинская заглавная I с тупым ударением
    Í Í Í латинская заглавная I с острым ударением
    Î Î Î латинская заглавная I с диакритическим знаком над гласной
    Ï Ï Ï латинская заглавная I с двумя точками
    Ð Ð Ð латинская заглавная D с черточкой
    Ñ Ñ Ñ латинская заглавная N с тильдой
    Ò Ò Ò латинская заглавная O с тупым ударением
    Ó Ó Ó латинская заглавная O с острым ударением
    Ô Ô Ô латинская заглавная O с диакритическим знаком над гласной
    Õ Õ Õ латинская заглавная O с тильдой
    Ö Ö Ö латинская заглавная O с двумя точками
    × × × знак умножения
    Ø Ø Ø латинская заглавная O со штрихом
    Ù Ù Ù латинская заглавная U с тупым ударением
    Ú Ú Ú латинская заглавная U с острым ударением
    Û Û Û латинская заглавная U с диакритическим знаком
    Ü Ü Ü латинская заглавная U с двумя точками
    Ý Ý Ý латинская заглавная Y с острым ударением
    Þ Þ Þ латинская заглавная THORN
    à à à латинская строчная a с тупым ударением
    á &##225; á латинская строчная a с острым ударением
    â &##226; â латинская строчная a с диакритическим знаком
    ã ã ã латинская строчная a с тильдой
    ä ä ä латинская строчная a с двумя точками
    å å å латинская строчная a с верхним кружком
    æ æ æ латинская строчные буквы ae
    ç ç ç латинская строчная c с седилем
    è è è латинская строчная e с тупым ударением
    é é é латинская строчная e с острым ударением
    ê ê ê латинская строчная e с диакритическим знаком
    ë ë ë латинская строчная e с двумя точками
    ì ì ì латинская строчная I с тупым ударением
    í í í латинская строчная I с острым ударением
    î î î латинская строчная I с диакритическим знаком
    ï ï ï латинская строчная I с двумя точками
    ð ð ð латинская строчные символы eth
    ñ ñ ñ латинская строчная N с тильдой
    ò ò ò латинская строчная O с тупым ударением
    ó ó ó латинская строчная O с острым ударением
    ô ô ô латинская строчная O с диакритическим знаком
    õ õ õ латинская строчная I с тильдой
    ö ö ö латинская строчная I с двумя точками
    ÷ ÷ ÷ знак деления
    ø ø ø латинская строчная O со штрихом
    ù ù ù латинская строчная U с тупым ударением
    ú ú ú латинская строчная U с острым ударением
    û û û латинская строчная U с диакритическим знаком
    ü ü ü латинская строчная U с двумя точками
    ý ý ý латинская строчная Y с острым ударением
    þ þ þ латинская строчная thorn
    ÿ ÿ ÿ латинская строчная Y с двумя точками
    ƒ ƒ ƒ знак функции
    Α Α Α заглавная альфа
    Β Β Β заглавная бета
    Γ Γ Γ заглавная гамма
    Δ Δ Δ заглавная дельта
    Ε Ε Ε заглавная эпсилон
    Ζ Ζ Ζ заглавная дзета
    Η Η Η заглавная эта
    Θ Θ Θ заглавная тета
    Ι Ι Ι заглавная иота
    Κ Κ Κ заглавная каппа
    Λ Λ Λ заглавная лямбда
    Μ Μ Μ заглавная мю
    Ν Ν Ν заглавная ню
    Ξ Ξ Ξ заглавная кси
    Ο Ο Ο заглавная омикрон
    Π Π Π заглавная пи
    Ρ Ρ Ρ заглавная ро
    Σ Σ Σ заглавная сигма
    Τ Τ Τ заглавная тау
    Υ Υ Υ заглавная ипсилон
    Φ Φ Φ заглавная фи
    Χ Χ Χ заглавная хи
    Ψ Ψ Ψ заглавная пси
    Ω Ω Ω заглавная омега
    α α α строчная альфа
    β β β строчная бета
    γ γ γ строчная гамма
    δ δ δ строчная дельта
    ε ε ε строчная эпсилон
    ζ ζ ζ строчная дзета
    η η η строчная эта
    θ θ θ строчная тета
    ι ι ι строчная иота
    κ κ κ строчная каппа
    λ λ λ строчная лямбда
    μ μ μ строчная мю
    ν ν ν строчная ню
    ξ ξ ξ строчная кси
    ο ο ο строчная омикрон
    π π π строчная пи
    ρ ρ ρ строчная ро
    ς ς ς строчная сигма(final)
    σ σ σ строчная сигма
    τ τ τ строчная тау
    υ υ υ строчная ипсилон
    φ φ φ строчная фи
    χ χ χ строчная хи
    ψ ψ ψ строчная пси
    ω ω ω строчная омега

    Стрелки

    стрелка влево
    стрелка вверх
    стрелка вправо
    стрелка вниз
    стрелка влево-вправо

    Прочие символы

    знак масти ‘пики’
    знак масти ‘трефы’
    знак масти ‘червы’
    знак масти ‘бубны’
    ˆ ˆ ˆ диакритический знак над гласной
    ˜ ˜ ˜ тильда
    знак торговой марки

    Знаки пунктуации

    маленький черный кружок
    многоточие .
    одиночный штрих — минуты
    двойной штрих — секунды
    надчеркивание
    косая дробная черта

    Общая пунктуация

    тире
    длинное тире
    левая одиночная кавычка
    правая одиночная кавычка
    нижняя одиночная кавычка
    левая двойная кавычка
    правая двойная кавычка
    нижняя двойная кавычка

    Словарь по HTML для тех, кто собирается сделать свою первую страничку

    HTML-документ (страничка) — документ,написанный на языке разметки гипертекста (HTML).Заключается между флагами и .

    Web-сайт, Web-сервер — цепочка логическисвязанных документов, написанных на языке HTML.

    Значения флагов разметки документа

    Флаги разметки — специальные команды длярасположения на экране текста, графики, видео иаудио фрагментов, а также команды, служащие длясвязи с другими HTML-документами и рессурсамиИнтернет.

    Основные флаги разметки

    и . Между этими флагамирасполагается информация о документе.

    и . В эих флагахзаключается название странички, которое будетвыведено в рамке окна программы просмотра.

    и . «Тело» документа(текст, графика и т.д.) располагается между этимидвумя флагами.

    BGCOLOR — цвет фона ( )

    BACKGROUND — «обои» или бэкграунд

    TEXT — цвет текста

    LINK — цвет гипертекстовой связи (ссылки)

    VLINK — цвет ссылки, уже посещенной в прошлом

    ALINK — цвет активной сылки Флаги, служащие дляформатирования текста

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


    Флаг, служащий для переноса текста надругую строку. Может также служить для отделенияграфики от текста на интервал.

    Флаг, служащий для логическогоразделения текста горизонтальной линией.

    Между этими флагамирасполагается предварительно отформатированныйтекст. На экран он выводится шрифтом типа»курьер».

    Параметры выравнивания

    ALIGN=LEFT — выравнивание по левому полю

    ALIGN=RIGHT — выравнивание по правому полю

    ALIGN=CENTER — выравнивание по центру

    Ответы на часто задаваемые вопросы по XHTML и HTML

    Зачем нужен XHTML? Не достаточно ли HTML?

    HTML — возможно, самый популярный в мире язык разметки документов. С появлением XML было организовано обсуждение, нужна ли новая версия HTML в рамках XML. Участники ответили однозначно «да»: версия HTML, основанная на XML, позволит использовать элементы XHTML в других языках XML, а документы XHTML смогут использовать элементы других языков XML. Кроме того, будет возможным привести в порядок HTML, ликвидировав его самые «неопрятные» элементы и расширив его функциональность, например, улучшенной реализацией форм.

    В чем преимущества XHTML перед HTML?

    Если документ составляет простой XHTML 1.0 (без использования других языков разметки), то вы не заметите существенной разницы. Однако со временем доступными становятся все больше и больше инструментов, основанных на XML (таких как XSLT для преобразования документов) и вы рано или поздно заметите преимущества использования XHTML. Например, технология XForms позволит вам редактировать документы XHTML (и любые другие документы XML). Приложения Семантической Сети (Semantic Web) будут способны использовать преимущества XHTML.

    Если документ содержит нечто большее, чем XHTML 1.0, например, включения языков MathML, SMIL, SVG, то преимущества налицо: вы бы не смогли использовать эти технологии с HTML.
    Можно ли просто добавить объявление XML в начало существующего документа HTML? Можно ли смешивать код HTML 4.01 и XHTML?

    Нет. Формат HTML не основан на XML. Чтобы интерпретировать данные как XML, вы должны внести необходимые изменения, чтобы сделать код документа верным кодом XML.

    Как проще всего преобразовать документы HTML в XHTML?

    Программа HTML Tidy позволяет получить XHTML из кода HTML. Браузер и веб-редактор Amaya сохраняет HTML документы в формате XHTML.

    Почему разработчики браузеров так суетятся с XML? Не лучше ли для браузеров работать с HTML?

    XML вводит более строгие правила обработки документов. Браузеры HTML работают с любыми входными данными, коректными и некоректными, и пытаются их интерпретировать. Схема обработки ошибок очень усложняет разработку программ, особенно если учесть, что предполагается, что реакция всех браузеров на некоректные данные должна быть одинаковой. Кроме того, это означает, что огромное число документов HTML содержат ошибки, но нормально отображаются браузерами, и авторы не подозревают о том, что код HTML некорректен. Вот почему необычайно сложно создать новый пользовательский агент, пока документы, выдаваемые за HTML, часто очень плохи.


    Зачем мне беспокоиться о верности кода HTML? В моем браузере документ отображается верно.

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

    Как можно проверить корректность разметки в моем документе?

    W3C предоставляет для этого валидатор: http://validator.w3.org/. Браузер Amaya сообщает, верен ли код отображаемых документов.

    Почему вы не всегда используете термин «пользовательский агент» («user agent») вместо «браузер»?

    В то время как браузеры являются важными пользователями HTML и XHTML, существует много других программ и систем, которые используют (X)HTML документы. Поисковые машины, например, считывают документы, хотя и не относятся к браузерам. Используя термин «пользовательский агент», мы стараемся подчеркнуть разницу.

    Например, сделав запрос поисковику Google, в результатах поиска вместе со ссылкой можно увидеть текст «веб-страница использует фреймы, но ваш браузер не поддерживает их»; некоторые люди игнорируют такие ссылки. Создатели таких сайтов не представляют себе, что контент требуется не одним лишь браузерам, и что элемент должен содержать более предусмотрительный текст, не выглядящий столь глупо в глазах людей, использующих поиск.

    Для чего нужно использовать именные пространства (namespace) в XHTML?

    Во времена становления HTML различные группы и компании добавляли по своему желанию новые элементы и атрибуты в HTML. Это грозило путаницей с версиями HTML, не являющимися общепринятыми. XML («X» означает «расширенный», «Extensible») позволяет всем использовать элементы из различных языков, но браузер или другой пользовательский агент должен как-то определять, к какому языку относится тот или иной элемент. Для этого и требуются объявления именных пространств (namespace).

    Почему документы XHTML 1.0 не стоит отправлять как text/html?

    XHTML имеет формат XML; это означает, что тип данных документа XHTML должен соотноситься с XML (application/xhtml+xml, application/xml, либо text/xml). Однако XHTML 1.0 создавался таким образом, чтобы документы могли верно отображаться пользовательскими агентами HTML. Если вы последуете нескольким простым правилам, документы XHTML 1.0 будут подходить для браузеров HTML. Но так как последние работают только с типом данных text/html, вам необходимо передавать XHTML 1.0 как text/html, чтобы обеспечить совместимость с устаревшим программным обеспечением. Но знайте: документ с заголовоком text/html всегда будет обрабатываться как простой HTML, а не XHTML.

    Какие браузеры принимают тип данных application/xhtml+xml?

    Известные нам браузеры — все основанные на Mozilla (Mozilla, Netscape 5+, Galeon, Firefox), Opera, Amaya, Camino, Chimera, DocZilla, iCab, Safari, плюс все программное обеспечение для мобильных телефонов, работающих с WAP2. Фактически, любой современный браузер должен принимать тип данных application/xml. Обратитесь к тесту на тип данных XHTML за подробностями.

    В CSS есть правила, которые относятся только к HTML. Применяются ли эти правила к XHTML?

    Нет. Правила CSS, относящиеся только к HTML, применяются только к документам, переданным как text/html.

    Работает ли document.write в XHTML?

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

    Можно добиться того же эффекта, что и document.write, но для добавления и удаления элементов нужно использовать DOM.

    Почему нельзя передавать докуметы XHTML 1.1 в качестве text/html?

    XHTML 1.1 представляет собой обычный XML, предназначеный только для обработки в качестве XML. XHTML 1.1 нельзя передавать браузерам HTML. Поэтому документы XHTML 1.1 обязательно должны передаваться с типом данных, относящимся к XML, таким как application/xhtml+xml.

    Почему из XHTML 1.1 был ликвидирован атрибут target?

    Атрибут target не ликвидировался из XHTML 1.1. XHTML 1.0 подразделяется на три разные версии: strict, transitional и frameset. Все разновидности обеспечивают такую совместимость с HTML 4.01, которую только позволяет XML. XHTML 1.1 — обновленная версия XHTML 1.0 strict, а атрибута target не было ни в одной версии HTML strict. Другие версии, transitional и frameset, не были обновлены, так как в этом нет необходимости. Если вы хотите использовать атрибут target, используйте XHTML 1.0 transitional.

    Для чего используется модуляризация XHTML?

    Модуляризация XHTML (Modularization) предназначена для применения разработчиками языков, основанных на XHTML, но не пользователями языков. Компании и группы часто разрабатывают собственные версии HTML и XHTML, которые не совместимы между собой. Модуляризация разделяет XHTML на модули, которые могут по отдельности использоваться при определении нового языка; так, например, любая версия языка, использующая таблицы, будет работать с единым для XHTML определением таблиц. Кроме того, модуляризация разъясняет, в каких случаях можно добавлять новые элементы, а в каких — нет.

    Зачем нужен XHTML2? Не достаточно ли XHTML 1?

    HTML и XHTML выполнили возложенные на них задачи, но в этих языках есть множество элементов, которые нужно улучшить. В XHTML2 особое внимание уделено улучшению возможностей структурирования, удалению элементов, которые уже есть в XML, удобству использования (usability), доступности (accessibility), интернационализации, аппаратной независимости, улучшенному механизму форм, устранению необходимости в использовании скриптования.

    Почему XHTML2 не использует XLink?

    XLink и XHTML имеют различные требования для использования ссылок, и эти требования не совместимы.

    Почему в XHTML2 нет совместимости со старыми версиями XHTML?

    Совместимость есть, но она реализована иначе, чем прежде.

    Ранние версии HTML были языками для конкретной области применения (не соотносящимися с каким-то общим инструментом разметки), поэтому было важно поддерживать совместимость, так чтобы старые браузеры корректно воспринимали документы. Например, по этой причине элемент содержит данные в своем атрибуте, а не в качестве своего содержимого — так обеспечена совместимость с прежним программным обеспечением.

    Однако благодаря XML и таблицам стилей, такой строгий механизм совместимости больше не нужен, так как браузер XML (на момент написания этого текста 95% браузеров принимают XML) может обрабатывать новый язык без обновления. Многие возможности XHTML 2 уже доступны в современных браузерах, не создававшихся специально для XHTML2. Многое работает, но не все: когда формы и таблицы были добавлены в HTML, людям пришлось подождать появления новых браузеров; точно так же особые элементы XHTML 2, такие как XForms и XML Events, требуют от программного обеспечения понимания их функциональности.
    Почему xml:space установлен как ‘preserve’ для всех элементов XHTML2? Я не хочу видеть в выводе браузера дополнительные пробелы.

    Атрибут xml:space связан с вводом: он требуется, чтобы контролировать, будут ли пробелы представлены в DOM (т.е. во внутренней версии документа, с которой работает браузер); это не относится к конечному отображению документов. Вывод пробельных символов устанавливается свойтвом CSS ‘whitespace’. Присвойте ему значение ‘pre’, чтобы все пробельные символы DOM были видны при выводе; значение ‘normal’ скроет пробельные символы (CSS3 будет содержать более богатые средства контроля вывода).

    Именно поэтому для всех элементов XHTML установлено xml:space=»preserve»: иначе бы свойство ‘whitespace’ не имело дейсивия. Таблица стилей по умолчанию устанавливает ‘whitespace’ значение ‘normal’ для всех элементов, кроме

    , но вы можете это изменить в своих таблицах.

    ForumDesign TechSupport — Дизайн для форумов и техническая поддержка

    Меню навигации

    Пользовательские ссылки

    Объявление

    Акция! Дизайн «MyBB Technical Support»

    Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
    Стоимость при покупке эксклюзивно: 2000р 1200р
    Скидка 40%. В стоимость входит настройка и корректировка дизайна.

    Дизайн «Warlords of Draenor»

    Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
    Стоимость при покупке эксклюзивно: 6300р
    В стоимость входит настройка и корректировка дизайна под ваш проект.

    Светлый дизайн в фентези стиле с аниме-графикой

    Макет для светлого дизайна в фентези стиле с аниме-графикой.
    Стоимость: 2600р*
    Дизайн продается эксклюзивно (в одни руки).

    Дизайн для MyBB форума гильдии WoW Exodar

    Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
    Стоимость: 2150р*
    В стоимость входит настройка и корректировка дизайна.

    Поддержать проект

    Информация о пользователе

    Новый FAQ по дизайну и CSS на MyBB форуме

    Сообщений 1 страница 10 из 20

    Поделиться108.12.2010 06:42:37


    • Автор: Герда
    • Главный администратор
    • Уважение: +1863

    Новый FAQ по дизайну форума в CSS
    — дополнен и упрощен
    — исправлены ошибки
    — откорректированы скриншоты
    — исправлены расшифровки селекторов
    — добавлены расшифровки примеров
    — грамотно отформатировано
    — исправлены формулировки
    и т.п.
    Составлен на основе «FAQ по дизайну форума в CSS» от Zebra
    Копирование статьи разрешено только со ссылкой на эту страницу!
    При копировании статьи помимо ссылки на ForumDesign указывайте автора исходного текста — Zebra
    Представление о дизайне css
    О том, что такое дизайн css и как его применять.
    Что по сути есть изменение дизайна? Это изменение графической составляющей форума и интерфейса.
    Любые форумы и сайты — это таблицы с текстом и ссылками. А дизайн css позволяет этим таблицам принять вид удобный для чтения и восприятия информации. Например: на форумах визуально разделены разных «блоки» — разные посты отделяются визуальными границами, страница тем отделяется от общего фона сраницы, а информация об авторе стоит справа/слева от сообщений — все это заслуга CSS.
    Таким образом, у редактирования дизайна есть две миссии: улучшение интерфейса и наведение отличительной красоты. Однако, дизайн css не влияет на содержимое форума: текст сообщений, названия разделов, функционал форума через стиль не поправить.

    Вся работа с дизайном форума через css коды будет представлять собой прописывание кодов для отдельных элементов.
    Вставлять данные коды необходимо в Администрирование > Настройки > HTML-верх или можно редактировать стандартный дизайн-шаблон через Администрирование > Стиль

    Если речь идет о css кодах, то прежде, чем начать прописывать настройки для каждого отдельного элемента форума необходимо будет проставить теги стиля, между которыми можно будет расположить css для отдельных элементов.
    Код:

    Вписав в HTML-верх эти два тега, между ними можно будет вставлять все необходимые для нового дизайна css коды.
    Принципиальное правило которое нужно учитывать: размещайте их всегда МЕЖДУ тегами

    Общие понятия о css
    Расшифровка css-кодов и схема их написания.
    Что представляет собой css код для какого либо элемента?
    Он состоит из СЕЛЕКТОРА, ПАРАМЕТРА и АРГУМЕНТА.

    Селектор (от англ. select — выбирать; selector — «отборщик») — это «имя» элемента, который меняется. мы указываем (выбираем), что будет изменено. (например: категории форума, форма ответа, поля профиля и т.п.)
    Параметр — это свойство элемента. мы указываем, что в выбранном элементе надо поменять (например: фон, размер, границы и т.п.)
    Аргумент — это значение свойства. мы указываем, какие именно изменения произойдут с выбранным свойством. (например: указываем цвет, ссылку на фон, размер в пикселях или процентах и т.п.)

    Стандартный css код выглядит следующим образом:

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

    # селектор < параметр : аргумент ;
    параметр : аргумент ;
    параметр : аргумент ;
    параметр : аргумент ;
    параметр : аргумент ;
    .
    >

    Вот пример того, как выглядит код для меню навигации

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

    Например, мы придадим одинаковые фон, высоту и ширину меню навигации и меню пользовательских ссылок:

    Параметры и значения CSS
    О том, как производить изменения в выбранных селекторах.

    Цвета в CSS
    для всех параметров, которые требуют указания цвета, например, ФОНА и ЦВЕТА ШРИФТА, необходимо указывать веб-название соответствующего цвета.
    Веб-названия для различных цветов можно посмотреть тут: Таблица HTML цветов (обновленная)
    Например, вот так будет выглядит код для задания цвета:

    Размеры в CSS
    для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения

    em — высота шрифта (текущий кегль)
    ех — высота буквы х для текущего кегля;
    рх — пикселы (относительно координат окна).
    in — дюймы;
    cm — сантиметры;
    mm — миллиметры;
    pt — пункты;

    ШИРИНУ ДОПУСТИМО ОБОЗНАЧАТЬ В ПРОЦЕНТАХ

    Красным отмечены те единицы измерения, которые мы вам рекомендуем к применению.

    Например, так мы задаем ширину и высоту элемента

    Параметры CSS

    background-color
    Цвет фона элемента. Значением может быть веб-название цвета.

    background-attachment
    Определяет, будет ли прокручиваться фон.
    Значения:
    scroll — фон поддается прокрутке
    fixed — не поддается прокрутке.

    background-image
    Фоновая картинка
    Значения:
    url (» . «) — где в скобках адрес картинки
    none — никакой картинки

    background-repeat
    Определяет, будет ли размножаться фоновая картинка
    Значения:
    no-repeat — Не размножается
    repeat-x — размножается по горизонтлаи
    repeat-y — размножанется по вертикали
    repeat-xy — размножается в обоих направлениях.

    background-position
    Расположение фоновой картинки на странице
    Сначала указывается расположение по вертикальной оси: top (верх), center(центр) или bottom(низ), затем по горизонтальной: left(слева), center(центр) или right(справа)

    # селектор <
    background-color : # FF0000 ;
    background-image : url(«http://forum.mybb.ru/viewtopic.php?p >;
    background-attachment : fixed ;
    background-repeat : repeat-y ;
    background-position : top left ;
    >

    расшифровать это можно так:

    # элемент форума <
    цвет фона : # красный ; //(если картинка меньше, чем элемент форума, цвет будет такой)
    фоновая картинка : ссылка на картинку ;
    прокрутка фоновой картинки : не прокручивается, фон зафиксировали ;
    Повторение фона : Повторить по вертикали ;
    позиция фона : начинается сверху слева ;
    >

    border
    Все параметры рамки, например, толщина, цвет и т.д.

    border-color
    Цвет рамки

    border-width
    Толщина рамки

    border-style
    Стиль оформления рамки всех сторон рамки
    Значения:
    none — указывает на то, что рамки нет.
    dotted — задает пунктирную рамку из точек
    dashed — задает штрих — пунктирную рамку
    solid — задает одинарную сплошную рамку
    double — задает двойную сплошную рамку
    groove — создает трехмерный эффект впадающей рамки
    ridge — создает трехмерный эффект возвышающейся рамки
    inset — создает трехмерный эффект заглубленности фона
    outset — создает трехмерный эффект выпуклости фона

    border-top
    Все параметры верхней рамки
    border-bottom
    Все параметры нижней рамки
    border-left
    Все параметры левой рамки
    border-right
    Все параметры правой рамки

    Все границы элемента красные, пунктиром и шириной в 2 пикселя

    Все границы элемента красного цвета, шириной в 2 пикселя, левая граница пунктиром, а нижняя двойной линией

    # селектор < border-top : #FF0000 dashed 0px ;
    border-bottom : #FF0000 dashed 0px ;
    border-left : #FF0000 dashed 2px ;
    border-right : #FF0000 dashed 2px ;
    >

    Справа и слева границы есть — они красные, пунктиром и толщиной 2 пикселя, а сверху и снизу их нет.

    color
    Цвет шрифта в элементе

    font-size
    Размер шрифта.
    Размер может быть установлен несколькими способами. Допускается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др.
    Или можно использовать константы (стандартные размеры): xx-small, x-small, small, medium, large, x-large, xx-large.

    font-style
    Начертание шрифта.
    Значения:
    normal — соответствует основному начертанию
    italic — курсив
    oblique — чуть менее наклонный, чем курсив

    font-weight
    Толщина начертания
    Значения:
    bold — полужирное начертание
    bolder — жирное начертание
    lighter — светлое начертание
    normal — нормальное начертание
    число от 100 (минимальная жирность) до 900 (максимальная)
    Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

    font-family
    Семейство шрифта
    Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
    Как это работает: Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

    font
    Все вышеперечисленные параметры шрифта вместе

    Красный маленький жирный шрифт.

    Шрифт Georgia (если нет такого на компе пользователя, отобразится Times New Roman, если не будет таймс нью роман, отобразится Times, если нет всех вышеупомянутых, отобразится serif).

    text-align
    Выравнимание текста внутри элемента.
    Значения:
    left — по левому краю
    right — по правому краю
    justify — по ширине
    center — по центру

    text-decoration
    Украшение текста
    Значения:
    underline — подчеркивание
    overline — верхнее подчеркивание
    none — никакого
    blink — мигание

    Если вы хотите изменить внешний вид ссылок внутри какого-лиюбо элемента, достаточно в коде после названия элемента добавить букву «a» (латинскую . ).
    Пример:

    Можно также поставить разное оформление для ссылки в нормальном состоянии, после посещения и при наведении.
    a:link — для нормальной ссылки
    a:visited — для ссылки после посещения
    a:hover — для ссылки при наведении мышкой
    Пример:


    Этот код сделает ссылки в выбранном месте до и после посещения зелеными, а при наведении — красными.

    ВАЖНО! Забегая вперед, следует отметить, что если вы не хотите назначать разное оформление ссылок для каждого из возможных селекторов форума, то следует пользоваться универсальным кодом:
    цвет все ссылок в обычном состоянии:

    цвет всех ссылок при наведении:

    float
    Отображение растекающегося объекта
    Значения:
    left — отображает растекающийся объект на левой стороне
    right — отображает растекающийся объект на правой стороне
    none — отображает объект вставленным в страницу
    Пример (отображение слева):

    display
    Способ отображения элемента
    Значения:
    none — элемент вообще не виден
    block — выдает элемент в рамке
    list-item — выдает элемнт как часть списка и присваивает ему маркер
    inline — выводит объект в одну строку.
    Пример (не отображать):

    vertical-align
    выравнивание элемента по вертикали
    Значения:
    top — по верхнему краю
    bottom — по нижнему
    middle — посередине
    Пример (отображение по верхнему краю):

    height
    высота элемента
    width
    ширина элемента
    См. пункт » Размеры в CSS«.
    Пример (высота — 20 пикселей, ширина — 400 пикселей):

    padding и margin
    Это два на первый взгляд похожик параметра. Но между ними есть разница:
    padding — линия отбивки материнского объекта
    margin — линия отступа дочернего объекта
    Для примера представьте себе окно Word. Само окно Word — материнский объект. А текст, который мы пишем — дочерний объект. Теперь, в данном случае линией отбивки для материнского объекта будет расстояние от края окна до краев листа. Потому что писать текст мы в любом случае можем только на листе. Поэтому padding — это некая граница, внутри которой в одном элементе могут располагаться другие элементы. Margin же в данном примере будут поля, которые мы установили для текста. Т.е. это простой отступ на котором располагается элемент, в данноом случае текст.

    padding-top — верхняя отбивка
    padding-bottom — нижняя отбивка
    padding-left — левая отбивка
    padding-right — правая отбивка.
    padding — все стороны отбивки сразу.
    Значения — См. пункт «Размеры в CSS».
    Пример:

    margin-top — верхний отступ
    margin-bottom — нижний отступ
    margin-left — левый отсуп
    margin-right — правый отсуп
    margin — все стороны отступа сразу.
    Значения — См. пункт «Размеры в CSS».
    ДЛЯ ОТСТУПОВ ДОПУСТИМЫ ОТРИЦАТЕЛЬНЫЕ ЗНАЧЕНИЯ
    Пример:

    Теги: css, дизайн, faq, урок,Дизайн поддержка

    Отредактировано Герда (30.10.2012 19:53:08)

    WWW.REDKOSTI.OKIS.RU

    Работа с текстом / основные тэги управления стилем текста

    Мы будем учиться работать с текстом.

    У нас HTML код следующего содержания:

    Рассмотрим несколько наиболее популярных видов шрифтов.

    Жирный шрифт (bold)

    Для управления плотностью шрифта применяются теги:
    текст
    текст
    Отличие тэга от тэга в том, что тэг указывает браузеру выводить текст жирным шрифтом, а тэг указывает, что текст надо выделить. Как браузер будет выделять текст, жирным шрифтом, курсивом или жирным курсивом — зависит от конкретного браузера.

    Курсив (italic)

    Курсивный шрифт выводится с помощью тэгов:
    текст
    текст


    Пример: Курсив

    Подчеркнутый шрифт (underline)

    Выводится с помощью тэга:
    текст


    Пример: Подчеркнутый шрифт

    Надстрочный индекс (Superscript)

    Выводится с помощью тэга:
    текст
    Пример: основной текст надстрочный индекс
    2 3 =8

    Подстрочный индекс (Subscript)

    Выводится с помощью тэга:
    текст


    Пример: основной текст подстрочный индекс
    C2H5OH

    Имитация стиля печатной машинки (Teletype)

    текст


    Пример: Teletype

    Заголовки

    Выводятся с помощью тэгов:

    Самый большой заголовок

    Самый маленький заголовок

    H1

    H2

    H3

    H4

    H5
    H6

    Блок с отступом

    Выводится с помощью тэга:

    текст


    Пример:
    основной текст

    блок текста с отступом

    Тэги управления цветом и размером шрифта:

    Задание базового шрифта:

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


    color =(цвет).Цвет шрифта.
    size =(целое число от 1 до 7). Размер шрифта
    face =(список разделенных запятыми названий шрифтов).
    Пример:
    Устанавливаем размер базового шрифта равным двум.


    Управление размером шрифта с помощью тэга

    Размер шрифта меняется с помощью атрибута SIZE тэга
    Пример: HTML код:
    size=1
    size=2
    size=3
    size=4
    size=5
    size=6
    size=7

    Результат выполнения:
    size=1 size=2 size=3 size=4
    size=5 size=6 size=7

    В атрибуте SIZE можно указывать размер шрифта относительно текущего размера SIZE

    Пример: HTML код:
    size +1
    size +2
    size -3

    Результат выполнения:
    size +1
    size +2
    size -3

    Управление цветом шрифта с помощью тэга

    Цвет шрифта меняется с помощью атрибута COLOR тэга
    FONT COLOR=»#FF0000″
    FONT COLOR=»red»

    Результат выполнения:
    FONT COLOR=»#FF0000″
    FONT COLOR=»red»

    Задание шрифтов с помощью тэга

    Имя шрифта задается с помощью атрибута FACE тэга

    Задает имя шрифта. Можно задавать несколько шрифтов через запятую, в этом случае используется первый найденный шрифт.


    Пример: HTML код:


    текст будет выведен шрифтом «Impact» при наличии его на вашем компьютере.

    Результат выполнения:
    текст будет выведен шрифтом «Impact» при наличии его на вашем компьютере.

    Комментарии в HTML коде:

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

    Переход на следующую строку

    Принудительный перенос строки выполняется с помощью тэга

    Пример: HTML код:

    Выполняем
    переход на
    следующую строку
    Результат выполнения:
    Выполняем
    переход на
    следующую строку

    [Запрет переноса:]

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


    Управление выравниванием текста

    Выравнивание блока текста осуществляется с помощью атрибута ALIGN тэга


    ALIGN=»LE FT» — выравнивание по левому краю
    ALIGN=»RIGHT» — выравнивание по правому краю
    ALIGN=»CENTER» — выравнивание поцентру
    ALIGN=»JUSTIFY» — выравнивание по обоим краям


    Пример:HTML код:

    Текст, выравненный по центру

    Вообще, атрибут ALIGN можно применять во многих тэгах, например:

    текст

    — выравнивание абзаца
    текст — выравнивание текста в ячейке таблицы

    текст


    Горизонтальная разделительная линия

    Вывод горизонтальной линии осуществляется с помощью тэга
    В этом тэге можно применять атрибуты:
    ALIGN=LEF T, CENTER, RIGHT — выравнивание линии.
    NOSHADE — линия без тени.
    SIZE — толщина линии в пикселях.
    WIDTH — ширина линии.


    Пример:HTML код:


    Результат выполнения:
    обычная линия:


    линия шириной 5 пикселей, выравненная по центру, шириной 50 процентов от ширины страницы, без тени:



    [шаг 1. откройте обычный блокнот]

    [ шаг 2. выделите нижеприведённый код и вставте его в свой блокнот]

    [ шаг 3. сохраните скопированный код в файле с произвольным именем но с расширением HTML, например как template.html и кликните на нем мышкой. Запустится браузер, в окне которого на белом фоне, разными шрифтами будет отражаться контент страницы. Поэксперементируйте сначала с заменой текста, размерами, вставке линий, изменению заголовков:]


    Мастер Йода рекомендует:  14 умных способов создания авторитетного контента в любой нише (даже если вы не эксперт)
Добавить комментарий