Что такое верстка: понятие и основные принципы

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

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

Основные принципы верстки включают следующее:

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

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

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

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

Верстка сайта: что это и какие принципы ей лежат в основу?

Основные принципы, которыми руководствуются при верстке сайта, это:

Адаптивность Сайт должен быть адаптивным, чтобы корректно отображаться на разных устройствах, будь то компьютеры, планшеты или мобильные телефоны. Это особенно важно с учетом того, что количество пользователей мобильных устройств постоянно увеличивается.
Доступность Сайт должен быть доступным для всех пользователей, включая людей с ограниченными возможностями. Правильная семантическая разметка и использование WAI-ARIA атрибутов помогают улучшить доступность веб-страницы для таких пользователей.
Семантичность Код сайта должен быть написан с использованием семантических тегов, чтобы понимание структуры страницы было понятно не только браузерам, но и поисковым системам. Это позволяет улучшить SEO-оптимизацию сайта и улучшить пользовательский опыт.
Правильный порядок чтения Порядок размещения элементов на странице должен соответствовать логике чтения с левого верхнего угла на правый нижний угол. Это поможет пользователям быстро ориентироваться на странице и находить необходимую информацию.
Эффективность Код сайта должен быть оптимизирован для быстрой загрузки страницы. Это включает в себя минификацию CSS и JavaScript файлов, оптимизацию изображений и использование кэширования. Быстрая загрузка страницы помогает улучшить пользовательский опыт и увеличить конверсию.

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

Определение и сущность верстки

Для выполнения верстки необходимо иметь навыки работы с HTML и CSS. HTML — это язык разметки, который определяет структуру и семантику веб-страницы. CSS — каскадные таблицы стилей, которые определяют внешний вид и оформление элементов на странице.

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

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

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

Понятие верстки и ее роль в создании веб-сайтов

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

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

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

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

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

Ключевые элементы верстки

При создании веб-сайта или веб-страницы используются несколько ключевых элементов верстки:

  • Теги HTML: Они определяют структуру и содержимое страницы. Например, <head> содержит информацию о заголовке и метаданные, а <body> содержит основное содержимое страницы.
  • Блоки: Использование блоков позволяет разбить страницу на отдельные секции или блоки. Например, <div> или <section> используются для создания отдельных блоков на странице.
  • Текст: Для отображения текста на странице используются различные теги. Например, <p> используется для параграфов, <h1> для заголовков первого уровня, а <span> для выделения отдельных слов или фраз.
  • Ссылки: Для создания ссылок на другие страницы или ресурсы используется тег <a>. Ссылки могут быть текстовыми или графическими.
  • Списки: Для создания упорядоченных или неупорядоченных списков используются теги <ul>, <ol> и <li>. Это позволяет организовать информацию в виде списков.
  • Изображения: Для отображения изображений на странице используется тег <img>. Элемент <img> имеет атрибуты, такие как источник изображения (src) и текстовое описание изображения (alt).
  • Таблицы: Используются для представления структурированной информации в виде сетки с ячейками. Для создания таблиц используются теги <table>, <tr> и <td>.

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

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

  • Структурированность и семантичность кода. Верстка должна быть построена на основе структурированных и семантических элементов HTML. Каждый блок кода должен выполнять конкретную функцию и иметь понятное название. Это облегчает понимание кода и его дальнейшую модификацию.
  • Адаптивность и отзывчивость. Сайт должен корректно отображаться на различных устройствах и экранах, включая мобильные устройства и планшеты. Это достигается с помощью использования адаптивного дизайна и медиазапросов, а также гибкой и резиновой верстки.
  • Кроссбраузерность. Веб-страница должна одинаково хорошо отображаться во всех популярных браузерах, включая Chrome, Firefox, Safari, Opera и Internet Explorer. Для этого необходимо тестировать и вносить правки в код, чтобы он работал корректно в любом браузере.
  • Эффективное использование CSS. Каскадные таблицы стилей (CSS) позволяют задавать внешний вид элементов веб-страницы. При верстке следует придерживаться принципов выбора правильных селекторов, использования классов и идентификаторов, а также минимизации объема CSS-кода.
  • Оптимизация загрузки страницы. Сайт должен загружаться быстро и эффективно. Для этого необходимо оптимизировать размер изображений, использовать сжатие и минификацию файлов, а также уменьшать количество запросов к серверу.
  • Доступность. Верстка должна быть доступной для пользователей с ограниченными возможностями. Для этого следует использовать семантические элементы HTML, добавлять атрибуты aria-label и tabindex, а также учитывать контрастность цветов и возможность увеличения текста.

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

Адаптивный дизайн и его значение

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

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

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

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

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

Семантическая разметка и структурирование контента

Для структурирования контента используются различные семантические теги, которые раскрывают суть содержимого и подчеркивают его важность. Например, для заголовков используются теги <h1> до <h6>, где <h1> обозначает наиболее важный заголовок, а <h6> — наименее важный.

Важным элементом семантической разметки является использование тегов <nav>, <header>, <main>, <article>, <section>, <aside>, <footer>. Теги <nav> и <header> позволяют выделить навигационную панель и верхнюю часть страницы соответственно. Главное содержание страницы обычно помещается внутрь тега <main>, а отдельные статьи или блоки содержания могут быть обернуты в тег <article>. Тег <section> используется для группировки связанных элементов, а <aside> — для боковой информации, которая не является главным содержанием. Внизу страницы можно разместить тег <footer>, содержащий информацию о авторстве и контактные данные.

Также для структурирования контента можно использовать различные теги, обозначающие списки, таблицы, абзацы и другие элементы. Теги <ul>, <ol> и <li> позволяют создавать маркированные и нумерованные списки. Тег <table> используется для создания таблиц, где каждая строка обозначается с помощью тега <tr>, а каждая ячейка — <td> или <th> для заголовков таблицы.

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

Использование внешних стилей и CSS-препроцессоров

Для создания стилей и оформления веб-страниц используется каскадные таблицы стилей (CSS). CSS позволяет разделить контент страницы от ее внешнего оформления, делая код более структурированным и облегчая поддержку и изменение дизайна.

Внешние стили предполагают размещение CSS-кода в отдельных файлах с расширением .css, которые подключаются к HTML-документу с помощью тега <link>. Такой подход позволяет использовать одни и те же стили для различных страниц, что значительно упрощает поддержку и сокращает объем кода.

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

  • Переменные позволяют объявлять и использовать значения, которые можно легко изменять в одном месте. Это удобно для работы с цветами, размерами текста и другими повторяющимися значениями.
  • Миксины представляют собой набор инструкций, которые можно многократно использовать. Например, можно создать миксин для оформления кнопок, чтобы не дублировать код каждый раз.
  • Вложенности позволяют описывать структуру HTML-элементов в CSS-коде, что делает его более понятным и упрощает навигацию. Например, можно задать стили для определенного класса элемента, который находится внутри другого элемента с определенным классом.

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

Разработка и использование сеток

Сетка может быть создана с использованием различных техник и инструментов. Одним из распространенных способов разработки сетки является использование CSS-фреймворков, таких как Bootstrap или Foundation. Эти фреймворки предоставляют набор готовых классов и стилей, которые позволяют легко создавать адаптивные сетки.

Создание сетки также можно осуществить с помощью CSS-свойств, таких как display: grid и display: flex. С помощью этих свойств можно определить количество колонок и строки, а также расположение элементов внутри сетки.

Использование сетки позволяет достичь ряда преимуществ:

1. Удобство чтения и восприятия информации. Равномерное размещение контента на странице делает его более удобным для чтения и восприятия пользователем.

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

3. Легкость сопровождения и масштабирования. Использование сетки упрощает дальнейшее добавление и изменение контента на странице, а также дает возможность легко масштабировать верстку при необходимости.

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

Кроссбраузерность и совместимость

Каждый браузер имеет свои особенности в интерпретации HTML, CSS и JavaScript. Некорректная верстка может привести к смещению элементов, неправильному отображению стилей или даже к неработоспособности функциональных элементов на разных браузерах.

Для обеспечения кроссбраузерности и совместимости необходимо следить за следующими принципами:

  • Использовать стандарты W3C (World Wide Web Consortium), чтобы верстка была одинаково понятной для всех браузеров.
  • Тестировать веб-страницу на разных браузерах и разных версиях этих браузеров.
  • Использовать универсальные методы и свойства CSS, которые поддерживаются всеми браузерами.
  • Избегать использования устаревших тегов и атрибутов, которые могут быть не поддержаны некоторыми браузерами.
  • Обратить внимание на особенности разных браузеров и написать особые стили для них, если это необходимо.

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

Оптимизация загрузки страницы и производительность

Для оптимизации загрузки страницы можно использовать несколько подходов. Во-первых, следует минимизировать размер файлов, отправляемых на сервер. Для этого можно использовать сжатие файлов с помощью сжимающих алгоритмов, таких как gzip. Также важно оптимизировать изображения, используя форматы с наименьшим размером, например, JPEG или WebP, а также устанавливать оптимальные размеры изображений.

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

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

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

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

Роль верстки в создании пользовательского опыта

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

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

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

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

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

Верстка включает в себя использование различных технологий и языков программирования, таких как HTML, CSS и JavaScript. Она также требует учета современных тенденций дизайна и уведомлений об изменениях в веб-стандартах.

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

Удобная навигация и доступность

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

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

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

Другим важным аспектом удобной навигации является наличие «хлебных крошек». Это навигационный инструмент, который визуально отображает текущее местоположение пользователя на сайте и позволяет ему легко вернуться на предыдущие страницы. Такой элемент управления особенно полезен на сайтах с большой структурой и множеством вложенных разделов.

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

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

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

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

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

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

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

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

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

Визуальная привлекательность

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

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

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

Работа с мультимедийным контентом

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

Для вставки изображений используется тег <img>. Атрибут src определяет путь к изображению, атрибут alt задает альтернативный текст, который отображается в случае ошибки загрузки изображения или для людей со слабым зрением.

Для вставки видеофайлов используются различные подходы, такие как использование тега <video> с атрибутами src для указания пути к видеофайлу и controls для добавления элементов управления видеоплеером. Также можно использовать внешние сервисы, например, YouTube, при помощи тега <iframe>.

Аудиозаписи можно вставлять при помощи тега <audio>, который аналогичен тегу <video>. Атрибуты src и controls также используются для указания пути к аудиозаписи и добавления элементов управления плеером.

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

Вопрос-ответ:

Что такое верстка?

Верстка — это процесс создания веб-страницы или приложения, при котором размещаются элементы контента и оформляется их внешний вид с помощью языков разметки и стилей.

Какие языки используются при верстке?

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

Какие принципы лежат в основе верстки?

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

Чем отличается фронтенд-верстка от бэкенд-верстки?

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

Читайте также:  Что происходит на 52 день после смерти: ответы и традиции
Поделиться с друзьями
FAQ
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: