Как сделать категории в html
Выпадающий список HTML: учимся создавать и задавать стили с помощью CSS
Тег option HTML используется для создания выпадающего списка, с помощью которого пользователь может выбрать один вариант из заранее определенного набора значений.
Использование атрибута value
Как упоминалось ранее, значение атрибута value может отличаться от текста, выводимого на странице. Например, можно вывести для пользователей названия стран или цветов, а в атрибуте value использовать шорткоды.
В следующем примере мы создадим выпадающий список с атрибутом value :
Пример получения доступа к выбранному варианту в JavaScript
Теперь создадим пример получения доступа к значению выбранного варианта и выполнения некоторых действий. Тот же список, что и в приведенном выше примере, мы создаем с вариантами выбора цвета. После выбора нажмите кнопку, чтобы применить этот цвет к документу:
Для option value HTML используется следующий код:
Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript :
Пример получения значения в скрипте PHP
А вот как PHP-скрипт используется, чтобы получить значение HTML select option :
Определение стилей выпадающего списка с помощью CSS
Закругленные углы с помощью свойства border-radius
Использование нескольких атрибутов и стилей CSS
Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков
В приведенной демо-версии пользователь может выбрать два варианта из списка:
Демо-версия выпадающего списка с опцией поиска
Используя тот же плагин, можно предоставить пользователям возможность искать нужные варианты в списке HTML select option :
Как писать на HTML5 и какие у него возможности
Разбираемся, какие возможности есть у HTML5, чем он отличается от предыдущих версий и что почитать по теме HTML для самообучения.
Что такое HTML
HTML (HyperText Markup Language) — язык разметки гипертекста. Это формат документов, который изначально содержал:
Словарь HTML состоит из множества тегов. Все они записаны в стандарт, который поддерживает международная организация World Wide Web Consortium (Консорциум W3C). Последняя рекомендация W3C для языка HTML имеет номер версии 5.2. В документе перечислены все элементы, которые можно использовать в коде веб-страницы. Это большой словарь, к которому придётся часто обращаться.
Конечно, современные браузеры отлично покажут документ независимо от того, в каком стиле оформлен код HTML, но вам будет стыдно перед коллегами, которые заглянут в исходники. Курс «Frontend-разработчик» поможет не только освоить HTML, но и в разы обойти программистов-самоучек. А сейчас обратимся к самым азам.
Пишет про разработку в Skillbox. Работал главным редактором сайта «Хабрахабр», ведет корпоративные блоги.
Набор технологий HTML5
HTML5 — последняя и самая мощная версия стандарта HTML, с новыми элементами, атрибутами и поведением. Под термином HTML5 также подразумевают набор технологий для разработки сайтов и веб-приложений.
Термином HTML5 обозначаются свыше десяти отдельных стандартов. А некоторые из технологий HTML5 до сих пор не утверждены окончательно. Их поддерживают не все браузеры (или каждый браузер по-разному).
Когда мы говорим об интерактивных сайтах и AJAX, то почти всегда речь идёт о технологиях HTML5.
В HTML5 есть программные интерфейсы (API) для передачи видео и звука, для чатов, в том числе видеочатов через браузер, и многих других интересных интерактивных штук. На HTML5 даже создают браузерные игры. И всем известный YouTube сейчас работает через HTML5, хотя раньше обязательно требовал Flash.
Отличия HTML5 от предыдущих версий
Формально перейти с обычного HTML (HTML4) на HTML5 очень просто: достаточно написать в начале кода веб-страницы тег для указания типа документа.
Всё, теперь у нас документ по стандарту HTML5.
Однако здесь добавлено много новых технологий:
Как редактировать HTML?
Разметка HTML5 создаётся с помощью тех же приложений, что и разметка обычного HTML, начиная с «Блокнота» в Windows и заканчивая современными средствами разработки со встроенными шаблонами для быстрого создания документов HTML5 — например, Notepad++, Sublime Text.
Справочные ресурсы по HTML
Как научиться писать на HTML
Одной зубрёжкой тегов не обойтись. Изучайте основные элементы и экспериментируйте. Поставьте сами конкретную задачу (например, сделать сайт-визитку) или возьмите платное задание как фрилансер и пробуйте его реализовать.
Можно подсматривать в справочник, гуглить, спрашивать совета на форумах и сайтах с вопросами-ответами. Или найти максимально похожий сайт, открыть его код — и разбираться, как он работает. Можно изменить его для своих нужд, только не забудьте стереть копирайты и комментарии авторов.
Копипаст чужой работы — нормальное явление в программировании, здесь это называется Open Source, очень модное и продвинутое течение.
Некоторые разработчики не хотят открывать свой код, они шифруют (обфусцируют) скрипты на сайтах, но их тоже можно разобрать специальными инструментами.
Чтобы создавать интерактивные сайты с более сложной функциональностью, с современным и красивым дизайном, нужно дополнительно изучить CSS, JavaScript, веб-дизайн и некоторые другие предметы. Тут требуется более фундаментальная подготовка.
Погрузившись в обучение, вы научитесь создавать свои собственные
веб-проекты и сможете претендовать на позицию junior-разработчика.
Работа с классами в HTML и CSS. Урок 7.
Как вы наверное уже догадались, классы используются в том случае, когда нам нужно дать определённому абзацу свойства, которые присущи только одному ему. В html коде, чтобы какому-то тэгу назначить класс, нужно в атрибуте class прописать само название класса. К примеру class=’green’. По факту это будет выглядеть примерно вот так:
Но от того, что мы прописали элементу такой атрибут, сам текст зелёным от этого не стал. Потому что нужно задать ему CSS правило. А сделать это можно так:
Данное правило можно прочитать так: задай элементу p с классом green зелёный цвет. Теперь, если мы хотим добиться того, чтобы все абзацы, находящиеся у нас на странице были зелёного цвета, мы просто прописываем им соответствующий класс. И видим что те параграфы, которым мы дали данный атрибут, окрасились в зелёный цвет.
Для закрепления материала, можете другим абзацам назначить свои классы и прописать им собственные CSS правила.
С другими элементами абсолютно та же история. Вы можете точно так же, задать классы заголовку h1 или h2 и раскрасить их в иные цвета. Ну а вообще, сама суть не в самих цветах, а в том чтобы выделить те или иные элементы на странице с помощью классов. А правила вы им будете вольны задавать такие, какие вздумается.
Так же вы можете столкнуться с такой ситуацией, что вам понадобится сделать зелёным не только абзац, но и заголовок тоже. И тут у вас будет три варианта. Сделать так:
Прописать отдельно правила для заголовка и абзаца:
Использовать группировку селекторов:
Но можно сделать короче, указав так:
Здесь мы не указываем никаких селекторов, а даём понять, что работаем со всеми элементами, которые имеют указанный класс.
Кроме того, у нас так же есть возможность задать принадлежность элемента сразу к нескольким классам. Для этого достаточно указать у элемента второй класс через пробел. Например, вот так:
А уже в CSS для селектора big задать необходимые ему правила.
Где это может использоваться?
Ну к примеру, если вы хотите не только указать цвет вашему элементу, но так же ещё и установить размер шрифта. Но вы не хотите делать это для всех элементов с классом green, а хотите использовать данное правило только для определённого абзаца. Например, так:
На скриншоте видно, что определённому абзацу, среди остальных окрашенных зелёным цветом, я решил задать ещё больший размер шрифта. Но я не мог прописать правило font-size для селектора с классом green. Потому что в этом случае, у меня бы у всех абзацев, имеющих класс green, увеличился размер шрифта.
На сегодня пожалуй всё, потому что всё, что я хотел вам рассказать о классах, уже рассказал. До встречи в следующих уроках!
Многоуровневый список в HTML: как создать и настроить?
Дата публикации: 2016-08-16
От автора: всех приветствую. Наверняка большинству из вас нравятся красиво оформленные списки, так как это позволяет очень легко воспринимать информацию, которая в них записана. В этой статье мы создадим многоуровневый список в html, а также немного оформим его с помощью css. Приступим!
Базовая теория
Понятно, что для создания многоуровневого списка нужно хотя бы понимать, как создать простой список. Собственно, самих видов списков в html существует два: нумерованный и маркированный. Созданы они для разных целей. Нумерованный стоит применять тогда, когда, например, какоу-то перечисление действий нужно выполнять строго в указанном порядке. Соответственно, такой список подошел бы для планирования дня или записи рецепта.
В маркированном пункты просто стоят друг за другом, но при этом если их поменять местами, то ничего не поменяется, так как пункты не привязаны к какой-то строгой нумерации.
Это просто теория, о которой нужно знать, но на практике не случится ничего страшного, если вы будете использовать списки по-разному в разных ситуациях. Я особо не заморачиваюсь по поводу того, какой тип выбрать.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Собственно, тег ol создает нумерованный список, а тег ul – маркированный. Это понятно. Надеюсь, вы также имеете представление о том, как создавать простейший список, поэтому мы сразу перейдем к созданию многоуровневого.
Многоуровневый список: как его делать?
Собственно, тянуть резину долго не буду, вот разметка, можете вставить в свой html-файл.
Итак, если вы внимательно просмотрели разметку, то наверное уже уловили суть? Сначала мы открываем ol, это будет наш родительский список, в котором будут содержаться вложенные списки и все пункты. Пункты, как вы понимаете, создаются парным тегом li, внутри которого пишется содержимое.
Соответственно, вложенный список мы обязательно должны вложить в один из наших пунктов. То есть открыли тег li, написали в нем нужный контент, но после этого не закрываем тег. Закрывать будем только после того, как создадим внутри точно такой же список.
В нашем случае получается такой себе план на день. Не забудьте правильно закрыть все теги. Вообще минус многоуровневых списков, как и таблиц, это громоздкая разметка. Представьте, что мы были дописали сюда еще списки для 19-го и 20-го чисел, а пункты разбили на подпункты, которые вынесли бы в отдельные перечни, которые, в свою очередь, располагались бы уже внутри вложенных. То есть была бы уже вложенность 2-го уровня. Итого все это заняло бы 30-60 строк кода.
Кстати, вот так это выглядит:
Как видите, браузер автоматически проставляет отступы для вложенного списка, чтобы визуально было понятно, что он относится к первому пункту. Единственная проблема в том, что внутренний перечень получает такой же нумератор – числа, а это не совсем правильно.
Чтобы изменить нумератор, необходимо уже использовать css. Обратимся к вложенным спискам так:
15 ошибок или советов HTML и CSS
Ошибки и советы я написал по-своему опыту. Если найдутся ошибки типа «вредных советов», то буду рад услышать конструктивную критику. Пост предназначен для начинающих изучать HTML и CSS, но, возможно, специалистам тоже будет интересно ознакомиться с данным материалом.
1. W3C Validator
Рекомендуется проверять HTML и CSS сайта через сервис validator.w3.org. Данный сервис просканирует код и отобразит ошибки, например:
2. Вёрстка в формате UTF-8
При вёрстке страницы, надо убедиться, что кодировка файла установлена в UTF-8 (без BOM). Каждый текстовый редактор устанавливает кодировку по-своему.
Файл в формате UTF-8 позволяет использовать нестандартные символы (например, символы различных языков, знак валюты и другие).
Также надо сообщить браузерам, что страница открывается в кодировке UTF-8. Это делается через тег ниже:
3. Одинаковые id у нескольких элементов
Значение атрибута id в HTML-коде не должно повторяться.
4. Спрайты
Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.
Сейчас также популярно вместо спрайтов использовать шрифты с иконками. Т.е. вместо букв выводятся иконки шестерёнки, смайлика и других иконок. В качестве примера можно привести иконки glyphicons, которые используются в Twitter Bootstrap.
Преимущества шрифтов к спрайтам, это сохранение качества при изменении размера иконок и меньший размер. Но недостаток, нельзя использовать больше одного цвета в иконке.
5. Много селекторов
Не рекомендуется использовать больше трёх селекторов, т.к. это влияет на производительность сайта.
Если есть возможность, то выборку рекомендуется сокращать до одного селектора:
6. Стили в HTML
HTML предназначен для вывода информации (текст, картинки). Оформления контента (изменить размер, цвет, шрифт) происходит в CSS.
7. Неправильное названия классов
Чтобы избегать подобных ситуаций, не рекомендуется применять классы для смены цвета, выравнивания текста, изменения регистра. Надо называть сами элементы (шапка, подвал, сообщение), и применять к нему свои стили.
8. Пиксели в дробных значениях
Некоторые браузеры позволяют указывать пиксели в дробных значениях, например «1.5px». Но это неправильно, т.к. пиксель это неделимая единица. Вместо «1.5px» лучше использовать «1.5em».
9. Использование классов вместо id
Рекомендуется делать выборку по классам вместо id, т.к. селекторы с id имеют больший вес, чем у классов, и их сложно будет переопределить.
10. Меню
Меню должно быть оформлено как список.
11. Пропущенный alt у картинок
В тегах надо указывать атрибут alt (можно пустой).
12. Теги
. В основном, в этом теге находится название страницы.
13. Транскрипция
Названия всех элементов надо писать в английском переводе. Даже если не известно, как слово пишется по-английски, есть много бесплатных сервисов, которые могут перевести. Когда встречаются названия элементов транскрипцией, это выгладит непрофессионально.
14. Clearfix
Про clearfix сложно написать в двух словах, но укажу момент, которые многие верстальщики, по моему мнению, делают ошибку.
15. HTML — язык программирования
Ой, у вас баннер убежал!
Читают сейчас
Редакторский дайджест
Присылаем лучшие статьи раз в месяц
Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.
Похожие публикации
Аспекты HTML & CSS
Уровни владения HTML, CSS и Javascript: Часть 2. CSS
Уровни владения HTML, CSS и Javascript: Часть 1. HTML
Вакансии
AdBlock похитил этот баннер, но баннеры не зубы — отрастут
Минуточку внимания
Комментарии 50
Как понимать фразу «HTML не предназначен для оформления», если спецификацией предусмотрен атрибут style, и он поддерживается всеми браузерами? Каким ещё должен быть HTML, чтобы оказаться «предназначенным для оформления»?
Указание стилей в атрибуте style имеет свои недостатки (дублирование кода, сложность изменения, если стиль одинаковый для разных элементов, высокий приоритет правил — не переопределяешь через стили для всей страницы), но в мелких проектах его может быть совершенно достаточно, а иногда и совершенно необходимо (например, когда элемента становится видимым после каких-то действий пользователя — тогда прописать «display: none» в style при верстке гораздо нагляднее).
В будущем возможны сложности изменения вёрстки при использовании style=»». Особенно когда над сайтом будет работать другой верстальщик. Ему будет проще делать правки в CSS, а не искать нужный код в файлах.
В стандарте не указано, что в HTML нельзя оформлять страницы, но я думаю стоит разделять вывод информации (HTML) и её оформление (CSS).
Кстати html5 допускает на одной странице несколько h1 заголовков, каждый пределах «`html
Более того, он рекомендует это делать. w3c. В каждом section должен быть свой h1, что иногда заставляет попотеть и воспламеняет невероятные споры с СЕО-шниками, которых даже стандарты переубедить не могут.
Далее немного конструктивной критики
Почему-то мой комментарий значительно обрезался.
Попробую повторить:
Стили в HTML можно и нужно применять в виде тега style в заголовке для ускорения загрузки страницы, размещая в нем основные используемые классы, переместив ссылки на файлы остальных стилей в конец html-файла. Разница будет заметна прежде всего в CMS, где используется подгрузка всех стилей независимо от их наличия на конкретной странице. Тоже советует и Google Pagespeed.
Насчет пункта «неправильное название классов» — тут тоже неоднозначно, т.к. например при написании шаблона для CMS мы уже опираемся на константные значения цвета и определенное расположение элементов, которые меняться не будут. Использование в классе понятных имен типа цвета или расположения значительно ускоряет процесс написания и читаемости разметки, с последним например согласен Bootstrap, предоставляя нам набор готовых классов для размещения элементов.
В целом статья кажется незавершенной без комментариев автора относительно тех или иных утверждений, например, почему нужно обязательно использовать атрибут alt в тэгах img, или почему меню должно быть написано с использованием ul/li?
обычно так «кто так делает, горите в аду11. «.
/* предпочтительнее примера выше, если есть возможность */
.form-submit-link <>
исходит из предпочтений мнимой потери в производительности. То что на каждый чих увешиваться классами, увеличивать для парсера количества строк, а следовательно терять туже производительность — эт типа норм.
Чем меньше css тем лучше. Как для парсера, так и человека. Все эти игры «id быстрее класса» «два класса хуже чем один» просто из вакуума. Как будто кто-то видел эту разницу на практике.
ИМХО в 5 пункте лучше будет вот так:
Ведь по «плохой» версии видно, что пытаются стилизировать ссылку заголовка, а не все ссылки item`а. Ну или как написано дальше:
На этом чуть менее, чем полностью построен bootstrap 🙂
Вот эта ерунда https://gist.github.com/bryanwillis/279b0f89ef74c39d0aea7ba5037406e3 раньше по ходу была в самом бутстрапе (аутсорсер предоставил верстку с такими классами 🙂 )
Ту да же классы типа italic, fs-11, lh-20
Если не было в самом бутстрапе, то сорри, мне было не до этого, верстка уже была несемантическая.
Из-за оленей сложилось такое впечатление 🙂
>>Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.
Это если используется старый HTTP/1.1, сейчас пришло время HTTP/2, где это уже неактуально.
Одинаковые id у нескольких элементов
Спрайты, как и минификация css/js и SPA всё ещё имеют смысл. И, в общем-то, будут иметь смысл ещё наверное до тех пор, пока все ресурсы не будут загружаться одновременно.
Как и SVG на замену неказистым иконочным шрифтам.
Имхо, нерационально базировать свою верстку на багах десктопных браузеров. Рендеринг чуть ли не в каждом втором релизе меняют.
Ну а неправильную отрисовку svg в Safari починят только при следующем обновлении iOS.
А если у вас требуют pixel-perfect во всех известных науке браузерах, то могу только посочувствовать.
Если картинки используются в качестве декоративных элементов
Где-то я почти всё это видел… Вспомнил, в CHM-файле «HTML первые шаги» в 2000 году.
W3C Validator
Это пример самого настоящего инвалидского менеджмента, обычно только те, кто не понимает, что такое верстка в-принципе, только на него и опираются. Прогоните через него N любых ресурсов и вы увидите, что всем он параллелен. Раньше были даже картиночки 88*31. Тоже уехали в топку вместе с «Best viewed with». Стандарты давно плетутся за браузерами.
Совесть — лучший валидатор. При использовании любого html редактора у вас не будет картинок без alt и незакрытых тегов.
UTF-8
По мнению W3 BOM является валидным. Какие глюки из-за него происходят, помнят чуть менее, чем все.
Спрайты
Стоит упомянуть, что всякие модные сборщики и CSS фреймворки умеют их клеить сами
Много селекторов
До сих пор не доказано, насколько сильно влияет на производительность вложенность селекторов. Иногда HTML сложно или невозможно поменять
Стили в HTML
WYSIWYG-редакторы в бекенде — основной поставщик такой красоты в код страницы. Крайне редко в редактор вписываются наборы стилей текущей верстки, а поиграться со шрифтами заказчики всегда горазды
Clearfix
Использование display:table для :after таких элементов периодически подбрасывает смешные глюки. Например, выделенный текст выделяется не с ширину блока, а с ширину всей страницы. Так что overflow:hidden или вложение чего-то «чистящего» в конец обертки вполне юзабельно до сих пор.