html и css
Я думаю уже ни для кого не секрет, что основами создания сайта являются знания таких элементарных языков как html и css, но как известно, чтобы что либо изучать нужно хотя бы иметь общее представление об этом, понимать суть, именно об этом далее и будет рассказано.
Что такое html
HTML – это язык гипертекстовой разметки страницы, это стандарт разметки страниц для интернета, считывая этот язык браузеры интерпретируют его и отображают уже как сформированный документ. Грубо говоря, этот язык помогает вам создать тот вид документа, который вы хотите увидеть и правильно отобразить его для всех в интернете.
Язык HTML придуман уже достаточно давно, его первая версия появилась примерно с 1986-1991 год, тогда этот язык был придуман для обмена научной и технической документацией, он содержал в себе не так уж и много дескрипторов, которые так же называются тегами. Благодаря этому несложному языку можно было делать хорошо структурированные и красиво отображающиеся документы.
Интернет развивался и развивался язык, усложняясь и приобретая все новые возможности. На данный момент самая последняя версия языка это HTML 5 хотя официально она ещё не законченная, но все же уже повсеместно используется и поддерживается всеми современными браузерами.
На самом деле язык html достаточно простой, и не стоит его бояться думая, что не каждый сможет понять или нечто подобное, все достаточно просто, и я на личном опыте в этом не раз убедился. Достаточно сделать хотя бы один сайт по четким инструкциям и вы все поймете и почувствуете как все доступно. Рекомендую изучать HTML5 так как он является на данный момент самым современным и его возможности намного шире чем у предыдущих версий, собственно все мои дальнейшие уроки будут именно на нем.
Что такое CSS
CSS – это каскадные таблицы стилей, это язык который направлен на описание внешнего вида документа, написанного на языке гипертекстовой разметки то есть html. По сути, это язык стилей, который имеет огромные возможности в плане формирования внешнего вида страниц. Так же этот язык непосредственно используется при верстке сайтов.
Основной задачей при разработке данного языка являлась разделение описания логической структуры, от описания внешнего вида этой страницы. Смысл тут в том, чтобы язык html не имел лишних дополнительных параметров и атрибутов, а являлся лишь для разметки, а вот все свойства и настройки всех тегов и элементов дизайна были выделены в отдельную таблицу стилей, что собственно у них и получилось.
Первая версия языка была разработана в 1996 году, она была достаточно скромной и охватывала лишь свойства текста, цвета, выравнивание, и отступы. Но в последующих версиях языка, функционал, безусловно, значительно вырос, и уже сейчас просто невозможно описать в нескольких строчках все его возможности. Актуальной версией языка на сегодняшний день является CSS3, и именно о нем будут все последующие уроки.
Данный язык, так же как и html достаточно несложный и с его освоением я думаю, ни у кого не возникнет проблем.
Почему HTML и CSS вместе?
На самом деле ответ достаточно прост, потому, что по-другому никак.
Во-первых, язык CSS без языка html просто не может существовать как самостоятельный язык, так как он и был создан в помощь html.
Во-вторых, если в старых версиях языка html еще можно было обойтись без css, то на данный момент просто ни как.
Они как одно целое, которое уже не разделишь, и вместе они создают одно целое которое на данный момент, уже содержит огромный функционал, не требующий подключения многих дополнительных языков типа Java. Поэтому и нет никакого смысла изучать их по отдельности, намного лучше научиться делать сайты комплексно изучая их вместе, это намного проще и эффективнее, что проверено опытом.
Надеюсь, в вашей голове сформировалось хоть небольшое представление о том, что вы хотите изучать, но если даже и нет, то ничего страшного при поэтапном изучении уроков, в вашей голове все разложится по полочкам и все вопросы, уйдут сами собой.
Дата публикации:2014-03-23
Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!
Язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript
Интерфейсы сайтов и веб-приложений разрабатываются с использованием всего трёх языков — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML-кодом, визуализация и оформление — содержанием таблицы стилей CSS, а поведение интерфейса — скриптами JavaScript.
Кроме HTML, CSS и JS в современной фронтэнд-разработке никаких других языков не используется. Специалист, который занимается разработкой на этих технологиях называется фронтендерами (frontend-developer), а разработчики, использующие только HTML и CSS (возможно, с минимумом готовых JS-скриптов), — просто верстальщиками.
HTML и CSS
HTML и CSS — это основа любого сайта. От их корректности зависит качество отображения сайта в различных браузерах (Internet Explorer, Google Chrome, Mozilla Firefox, Safari, Opera) и на различных устройствах (ПК, планшеты, смартфоны). Валидность и семантичность HTML кода также определяет качество сайта с точки зрения поисковых систем.
Говоря про HTML и CSS нельзя не упомянуть фреймворки, которые упрощают верстку — Twitter Bootstrap, Bulma, MaterialUI, Zubr Foundation, html5boilerplate и blueprint. Эти фреймворки содержат в себе сетку для макетов, хорошую типографику, готовые контролы (кнопки, элементы формы) и многое другое.
Для CSS существует несколько препроцессоров, расширяющих возможности языка, например, LESS и SASS. Благодаря им упрощается разработка и сопровождение больших проектов, так как возможности использования функций, переменных и примесей существенно снижают повторения в коде и позволяю повторно использовать многие участки кода.
JavaScript
Клиентский язык программирования JavaScript используется при разработке интерфейсов сайтов, делая их более отзывчивыми и динамичными. На JavaScript реализуется большая часть тех красивых эффектов, которые мы видим на современных сайтах (фотогалереи, слайдшоу, интерфейсы на вкладках и т.д.). Еще одним из популярных типов использования JS является AJAX — технология, позволяющая без перезагрузки страницы отправлять на сервер команды и/или получать оттуда данные и встраивать их в страницу.
Говоря про JavaScript нельзя не упомянуть популярную библиотеку написанную на нем — это jQuery. Её использование в проектах позволяет создавать интерактивные сценарии поведения интерфейса достаточно быстро и просто. Также на базе jQuery написано много готовых компонентов, позволяющих встроить нужный функционал путём копирования и вставки нескольких строк кода. Но при этом сложные интерфейсы на jQuery обычно очень тяжело сопровождать.
JS-разработка сложных интерфейсов обычно строится вокруг более продвинутых библиотек и фреймворков — React, Vue, Angular, MobX и Redux. Они позволяют создавать очень интерактивные интерфейсы так, что кодовая база остаётся сопровождаемой.
Браузеры поддерживают работу только с JavaScript, но существуют также языки, позволяющие писать код на них, а потом преобразовывать написанное в JS. Из них стоит отметить наиболее популярные — TypeScript, Dart и Kotlin.
Adobe Flash
Позволяет создавать эффектную анимацию и сложные интерактивные сервисы, но не всегда у пользователей установлен нужный плагин, на части устройств (iOS, например) Flash не поддерживается вовсе, поисковые системы также не понимают Flash. Именно поэтому на сегодняшний день Flash практически полностью вытеснен более современными решениями на JavaScript и HTML5.
Часть 1. Основы CSS
Данный урок является логическим продолжением урока «Основы HTML для начинающих», в котором я подробно объяснял, что такое язык разметки HTML, как он устроен и работает, базовые теги и правила верстки. В данном же уроке мы затронем стилизацию документа, созданного с использованием языка разметки, т.е. придание определенной формы, определенного цвета, последовательности, размеров различных элементов и текста на странице, рассмотрим наиболее эффективные приемы работы с каскадными таблицами стилей. Поняв основы, вы сможете самостоятельно правильно и эффективно стилизовать HTML документы.
Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.
1.1 Использование CSS в HTML документах
CSS довольно просто использовать в HTML документах. Его можно:
Прописать стили в самом документе, используя тег
Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.
Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.
Пример инлайнового вывода фонового изображения секции из админ. панели сайта:
1.2 CSS синтаксис
Как я уже говорил ранее, CSS имеет довольно простой синтаксис. Давайте разберем его.
Правила объявлений настолько просты, что их можно описать в одном предложении. Сначала пишется селектор, который выбирает конкретный элемент на странице, после фигурных скобок пишутся свойства со значениями после двоеточия, а сами свойства отделяются друг от друга точкой с запятой. Это всё.
Просто, не правда ли?
1.3 Каскадирование, наследование и приоритет
Понять принцип каскадирования несложно. Давайте взглянем на пример:
Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.
Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.
Стоит также отметить, что количество классов или идентификаторов, а также наличие дополнительных псевдоклассов и конструкций в селекторе повышают приоритет для стилизации:
И т.д. по логической цепочке.
И в завершение по приоритетам важно отметить, что стили, идущие в последующих объявлениях ниже по документу также имеют наибольший приоритет. Например:
В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.
Часть 2. CSS свойства
Я думаю нет смысла перечислять все CSS свойства, так как их очень много и практичней обратиться к справочнику всех CSS свойств. Я рекомендую изучить CSS свойства в справочнике на HTMLBook.
Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.
CSS Свойство
Частота использования
Описание
Часть 3. Медиа-запросы
В данном руководстве мы рассмотрим базовые возможности медиа-запросов, которые необходимы для адаптивной верстки сайтов и практически полезны.
Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:
Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:
Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.
Размещение свойств в медиа-запросе не дает никакого приоритета, поэтому логичней размещать медиа-запросы в конце CSS документа, либо загружать тегом link внешний CSS файл с медиа-запросами после загрузки основных стилей сайта для правильного переопределения последних на разных разрешениях или на различных устройствах.
Часть 4. Рекомендации
Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.
Премиум уроки от WebDesign Master
Создание сайта от А до Я. Комплексный курс
Создание современного интернет-магазина от А до Я