Разное

Учебник по html и css для начинающих: Учебник HTML и CSS для новичков

Содержание

Учебник HTML и CSS для новичков

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

Языки HTML и CSS предназначены для верстки сайтов (верстка - это размещение элементов сайта по нужным местам). Язык PHP нужен для программирования сайта (с его помощью можно, к примеру, сделать регистрацию пользователей). Язык JavaScript нужен для того, чтобы 'оживить' сайт: к примеру, сделать меняющиеся картинки (слайдер).

Язык HTML

Язык HTML - это основа web сайтов, с его помощью создается каркас страницы, которую вы видите в браузере.

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

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

Что такое HTML теги?

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

Теги строятся по такому принципу: уголок <, потом имя тега, а потом уголок >, вот так: <имя тега>. Имя тега может состоять из английских букв и цифр. Примеры тегов: <h2>, <p>, <b>.

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

К примеру, <p> - так я открыл тег p, а так - </p> - я его закрыл. Все, что попадает между открывающим и закрывающим тегами, подпадает под воздействие нашего тега.

Бывают теги, которые не нужно закрывать, например, <br> или <img>.

Атрибуты

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

Атрибуты размещаются внутри открывающего тега в таком формате: <тег атрибут1="значение" атрибут2="значение">.

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

Язык CSS

Язык CSS расширяет возможности языка HTML. Он позволяет менять цвета, шрифты, фон, в общем заниматься красотой сайта. А HTML, соответственно, отвечает за структуру сайта.

Итак, приступим

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

Подборка материалов по HTML и CSS

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

 

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

Представляя собой исчерпывающий гайд по современным веб-стандартам. Эта книга будет полезна веб-разработчику любого уровня.

 

 

Поистине, незаменимое издание, которое должно быть настольной книгой всех современных веб-дизайнеров.

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

 

 

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

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

 

Одно из новейших изданий (книга опубликована 12 января 2017 года), освещающее все основные аспекты, необходимые для овладения инновационными технологиями веб-разработки.

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

 

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

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

Подборка видеоуроков по jQuery — js-библиотеке, фокусирующейся на взаимодействии JavaScript с HTML5. Благодаря возможности jQuery получать доступ к любому элементу DOM, его содержимому и атрибутам, стало возможным программировать сложные манипуляции элементами и контентом веб-страницы. В данной серии уроков подробно рассматриваются такие примеры, как адаптивное меню, вкладки, всплывающие подсказки и др.

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

Краткий видеокурс по основам компонентов технологии HTML5. Введение, работа с DOM, псевдоклассы и использование импортов.

Объемный курс видеолекций по Bootstrap — простому и легко настраиваемому HTML, CSS и JS фреймворку, предназначенному для удобной веб-разработки.

10 вещей в HTML, о которых вы вряд ли знали

Почему CSS Grid лучше, чем фреймворк Bootstrap?

Учебники | MDN

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

HTML учебники

Вводный уровень

Введение в HTML
Что такое HTML, что он делает, его краткая история, и что представляет собой структура HTML документа. В последующих статьях мы подробнее рассмотрим отдельные части HTML.
Базовая структура веб-страницы (SitePoint)
Узнайте как HTML элементы сочетаются в общую картину.
MDN HTML Element Reference
Комплексный справочник для HTML элементов, и, как различные браузеры поддерживают их.
HTML Challenges (Wikiversity)
Используйте эти задачки, чтобы отточить свои HTML навыки (для примера, "Какой элемент нужно использовать -  <h3>  или <STRONG>?"), фокусируясь на смысле разметки.

Продвинутый уровень

Tips for Authoring Fast-Loading HTML Pages
Оптимизация веб-страниц, для большей адаптивности сайта и снижения нагрузки на веб-сервера и подключение к Интернету
HTML5 Tutorials (HTML5 Rocks)
Совершите экскурсию в код, который использует возможности HTML5.
Semantics in HTML5 (A List Apart)
Изучите рабочую разметку, обеспечивающую обратную совместимость, расширяемую и поддерживающую будущие изменения (совместимость вперед).
Canvas Tutorial
Узнайте, как рисовать с помощью скриптов, используя элемент canvas.
HTML5 Doctor
Статьи о том, как  используется HTML5 прямо сейчас.
The Joy of HTML5 Audio (Elated)
Узнайте как использовать HTML аудио элемент для того, чтобы вставлять звуки в ваши веб-страницы. В учебнике представлено много примеров кода.

Javascript учебники

Вводный уровень

JavaScript First Steps
JavaScript руководство, написанное как часть MDN Learning Area.
Codecademy (Codecademy)
Codecademy это простой способ изучить JavaScript. Он интерактивный, и вы можете делать это вместе с друзьями
Getting Started with JavaScript
Что такое JavaScript и как он может пригодиться вам?
JavaScript Best Practices (WebPlatform.org)
Узнайте о некоторых из очевидных (и не очень очевидных) лучших практиках для написания кода на  JavaScript.

Средний уровень

A Re-Introduction to JavaScript
Повторение языка программирования JavaScript для разработчиков среднего уровня.
Eloquent JavaScript
Полное руководство по "средним" и "продвинутым" методикам JavaScript.
Essential JavaScript Design Patterns (Addy Osmani)
Введение в основы шаблонов проектирования JavaScript.
The JavaScript Programming Language (YUI Blog)
Douglas Crockford исследует язык, какой он есть сегодня, и как он пришел, чтобы быть.
Introduction to Object-Oriented JavaScript
Узнайте об ООП в JavaScript.
Speaking JavaScript (Dr. Axel Rauschmayer)
Для тех программистов, кто хочет быстро и хорошо выучить  JavaScript, а так же для тех, кто хочет углубить свои навыки или же изучить какие-то специфические темы.

Продвинутый уровень

JavaScript Guide
Полное, регулярно обновляемое руководство по JavaScript для всех уровней обучения от начального до продвинутого.
Learning Advanced JavaScript (John Resig)
Гид по "продвинутому" JavaScript от John Resig.
Introducing the JavaScript DOM (Elated)
Что такое Document Object Model, и зачем она нужна? Эта статья дает вам постепенное введение в эту мощную способность JavaScript.
An Inconvenient API: The Theory of the DOM (YUI Blog)
Douglas Crockford объясняет Document Object Model.
Advanced JavaScript (YUI Blog)
Douglas Crockford пристально следит за шаблоном кода, который JavaScript программисты могут выбрать в авторстве своих приложений.
JavaScript Garden
Документация из самых необычных частей JavaScript
Which JavaScript Framework? (StackOverflow)
Советы по выбору основы JavaScript..
Non-Blocking JavaScript Downloads (YUI Blog)
Советы по улучшению производительности скачивания страниц, содержащих JavaScript
JavaScript Patterns
Шаблоны и антишаблоны проектирования JavaScript, которые охватывают функциональные шаблоны, шаблоны JQuery, шаблоны плагинов JQuery, шаблоны проектирования, основные шаблоны, literal patterns и шаблоны конструирования, шаблоны создания объекта, переиспользуемый шаблонный код, DOM.
How Browsers Work
Статья с подробным исследованием, описывающая различные современные браузеры, их движки, рендеринг страниц и пр.
Exploring ES6 (Dr. Axel Rauschmayer)
Надежная и подробная информация об ECMAScript 2015.
JavaScript Videos (GitHub)
Видео о JavaScript.

CSS учебники

Вводный уровень

CSS Getting Started
Этот учебник познакомит вас с каскадными таблицами стилей (CSS). Он проведет вас через основные особенности CSS и предложит практические примеры, которые можно попробовать на вашем компьютере.
CSS Selector Classes (Wikiversity)
Что такое классы в CSS?
External CSS (Wikiversity)
Использование CSS из внешних источников.
Adding a Touch of Style (W3C)
Краткое руководство для начинающих по стилизации веб-страниц с помощью CSS.
Common CSS Questions
Общие вопросы и ответы для начинающих.
CSS Selectors
Введение в CSS селекторы.

Средний уровень

CSS Reference
Полный справочник по CSS, с информацией о поддержке в Firefox и других браузерах.
CSS Challenges (Wikiversity)
Улучшите ваши навыки CSS, и обратите внимание на то, где вам нужно больше практики.
Intermediate CSS Concepts (HTML.net)
Группировка, псевдо-классы и многое другое.
CSS Positioning 101 (A List Apart)
Использование позиционирования в соотвествии со стандартами, без использования таблиц.
Progressive Enhancement with CSS (A List Apart)
Прогрессивное улучшение в веб-страницы с помощью CSS.
Fluid Grids (A List Apart)
Дизайн верстки, который плавно изменяется вместе с размерами окна, основанный на сетке.

Продвинутый уровень

Using CSS Transforms
Как применять поворот, наклон, масштабирование и перемещение при помощи CSS
CSS Transitions
CSS переходы, спецификация CSS3 по этой теме, как анимировать изменения стилей в CSS, вместо того, чтобы делать их "сразу".
Quick Guide to Implement Web Fonts with @font-face (HTML5 Rocks)
Возможности @font-face в CSS3, создание собственных шрифтов и работа с ними.
Starting to Write CSS (David Walsh)
Введение в инструменты и методологии для разработки более краткого, масштабируемого и поддерживаемого CSS.

Книги и учебные материалы по HTML и CSS, а также инструменты вёрстки

Немного вводной информации (из личного и опыта моих коллег, друзей):

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

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

Добавлю свою подборку максимально продуктивных и актуальных книг, учебных ресурсов по HTML, CSS, и дополнительных технологий связанных как-либо с версткой, и в целом веб-дизайном, которая помогла мне начать делать что-то интересное, стремиться развиваться далее в этом направлении, а также найти первую работу в ИТ 🙂

Литература (HTML):

  • “Изучаем HTML5. Библиотека специалиста”. Б. Лоусон, Р. Шарп, Питер, 2012, 303 стр.
  • "HTML5: Рецепты программирования". К. Шмитт, К. Симпсон, 2012
  • "HTML5. Карманный справочник". 5-ое издание, Д.Роббинс, 2015
  • "HTML5: Разработка приложений для мобильных устройств". Э.Вейл, 2015

Литература (CSS):

  • "Секреты CSS. Идеальные решения ежедневных задач". Лия Веру, Питер, 2016
  • "Новая большая книга CSS". Д.Макфарланд, Питер, 2016
  • "HTML5 и CSS3 для чайников ". К.Минник, Эд Титтел, Диалектика, 2016, 400 стр.

Ресурсы для обучения и справочники:

WebReference
MDN Web Docs
W3C. HTML 5
W3C. Cascading Style Sheets home page
SASS. Documentation
Bootstrap. Documentation
Книги и учебные материалы по SVG


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

  • "Большая книга веб-дизайна". Т. Фельке-Моррис, ЭКСМО, 2017
  • "Bootstrap в примерах", С. Морето, ДМК Пресс, 2017, 314 стр.

Хочу также добавить, как говорят практически все, кто каким-либо образом связан с ИТ:
учите английский язык, так как технологии развиваются очень быстро и книги на русский язык переводят существенно позже, некоторые технологии перестают быть актуальными к моменту перевода. Старайтесь пользоваться ресурсами-первоисточниками, или же ресурсами максимально приближенными к ним (примеры привел выше).

Три лучших книги по HTML5 и CSS3 для начинающих в 2021 году — Завистник

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

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

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

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

А теперь о книгах:).

 

Дэвид Макфарланд. «Новая большая книга CSS»

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

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

Отзывы читателей:

«Это мой бестселлер!!!  Хоть и называется CSS3 – автор обучает и HTML5. Я, человек привыкший работать с дизайном, сразу вижу свой результат во время проектирования. Очень все просто объясняется. Подойдет как для начинающих, так и для тех кто знаком с HTML5 и CSS3,  потому что в книги много примеров».

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

«Изучать веб разработку и в особенности CSS советую по этой книге. Автор также учит HTML 5. Прочитав эту книгу, вы поймете многие аспекты верстки,и будете уметь верстать качественно, адаптивно и кроссбраузерно. Советую всем веб разработчикам!!!!»

Где купить бумажную книгу

 

Джон Дакетт. «HTML и CSS. Разработка и дизайн веб-сайтов»

Это популярное руководство — самая простая возможность за короткое время изучить языки HTML и CSS.
Не имеет значения, какую задачу вы сейчас решаете – разрабатываете новый или полностью  модернизируете устаревший сайт — эта книга станет вашим лучшим инструментом для создания оригинального веб-контента с отличным юзабилити.

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

Отзывы читателей:

«Отличная и понятная книга. Разбирается тег и тут же приводится пример, как это работает. Немного есть истории, как вообще начиналась разработка языков программирования. Для новичков самая то! Мне очень понравилось».

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

«Интересная и информативная книга для начинающих. Мне понравился её простой язык и качественное исполнение. Своих денег потраченных на книгу не жалею».

Купить электронную книгу в ЛитРес
Где купить бумажную книгу

Робсон Э., Фримен Э. «Изучаем HTML, XHTML и CSS»

Устали от чтения книг по HTML, которые понятны только специалистам в этой области? Тогда самое время взять в руки второе издание «Изучаем HTML, XHTML и CSS».

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

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

Отзывы:

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

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

Купить электронную книгу в ЛитРес
Где купить бумажную книгу

Экспресс-курс по HTML5 и CSS3
в Geekbrains — oнлайн-университете от @Mail.ru group


Справочник и учебник по HTML и CSS

Для тех, кто делает первые шаги в постижении HTML и CSS, и для уже работающих профессионалов сайт htmlbook.ru – неоценимое подспорье. Хоть в названии говорится только про HTML, на самом деле сайт  содержит море полезной информации еще и по CSS, а также основы верстки, готовые рецепты, хаки, типовые макеты веб-страниц (с возможностью посмотреть как сверстан макет и ознакомиться с подходом по его созданию) и даже словарь профессиональных жаргонизмов (поможет новичкам понимать своих опытных коллег). Сайт постоянно обновляется, выкладываются новые материалы по актуальным вопросам создания сайтов.

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

  • Статьи: набор статей по разным темам создания сайта. Каждая статья является независимой и в то же время выступает как часть темы, в которую входит.
  • Практикум: сборник задач для самостоятельного решения. Все задачи делятся на три уровня сложности
  • Рецепты HTML и CSS: краткие рецепты по теме HTML, CSS и верстке сайта, оформленные в виде вопроса и ответа на него.
  • Форум, где можно задавать свои вопросы по теме сайта.
  • Самоучитель HTML: набор взаимосвязанных уроков по изучению языка разметки документов.
  • XHTML: Приводится синтаксис XHTML и его отличия от HTML.
  • Валидация: набор статей, посвященных тому, что такое валидация и как проверить документ на соответствие спецификации HTML.
  • Справочник HTML: описание всех основных тегов HTML, их атрибутов и значений. Для каждого тега приводится область его применения, указаны атрибуты и их возможные значения. Таблица совместимости позволяет определить, какими браузерами понимается тег, а также соответствует ли тег и его параметры спецификации HTML и XHTML.
  • Самоучитель CSS: набор взаимосвязанных уроков по изучению каскадных таблиц стилей.
  • Справочник CSS: приведены основные свойства CSS с указанием работы в разных браузерах, описанием, возможными значениями и примерами использования.

Ориентированный на разработчика CSS/HTML учебник / книга



Я разработчик программного обеспечения, который иногда пишет код CSS/HTML. В настоящее время я работаю над приложением, которое требует довольно сложного макета на основе html/css, и я чувствую, что недостаточно понимаю макет CSS/HTML, чтобы реализовать его. Какие книги и учебные пособия вы можете порекомендовать мне, чтобы улучшить свои навыки?

P.S. Я понимаю разницу между блочными и встроенными элементами, что такое поплавки и т. д., Но мне не хватает целостной картины того, как это работает и как компоновать произвольные вещи в html/css.

P.P.S. Я пробовал несколько книг раньше, и они либо имеют формат справочного руководства (например, http://www.amazon.com/Pro-CSS-HTML-Design-Patterns/dp/1590598040), либо содержат информацию, которую я уже знаю, например, большинство базовых учебников по w3schools, большинство книг для чайников по amazon и т. д., или даже хуже, ориентированы на дизайн. Мне не нужно читать о цветах и т. д., Мне просто нужно научиться делать макет в HTML/CSS, как я делаю в Java/Swing или других подобных фреймворках.

html css
Поделиться Источник Konstantin Solomatov     13 марта 2012 в 12:50

7 ответов




43

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

Вам дали исчерпывающий стилистический обзор или, может быть, даже несколько макетов, и теперь вы должны сделать его в html+css? В этом случае я бы предложил

  • Handcrafted CSS: более пуленепробиваемый веб-дизайн -прежде всего, он охватывает некоторые из более сложных методов "hip", таких как жидкий макет, и делает вас удобным с концепцией изящной деградации (это означает, что IE6 и FF10 не должны предоставлять один и тот же опыт). Это избавит вас от головной боли и разбитых сердец в долгосрочной перспективе - мой был настолько популярен, что коллега взял его за границу... за восемь месяцев
  • CSS: отсутствующее руководство и HTML, XHTML и CSS Библия -довольно глубокие и материал там еще не устарел. Я бы предложил сначала прочитать о поплавках (многие причуды там, независимо от предыдущего опыта) и какие бы главы не заполняли пробелы в знаниях, которые, как вы чувствуете, у вас есть, если таковые имеются. Кроме того-используется в качестве ссылки.
  • Удобно с общими понятиями, но нужно искать случайные свойства? Во - первых, w3schools-это зло -вместо этого используйте MDN . Несвязанные: фантастическая ссылка JS, а также CSS/HTML, которые вы сейчас ищете.
  • Закладка quirksmode и caniuse так, что вы не будете слишком далеко отступать, когда крупный браузер внезапно отказывается правильно отображать ваш точеный код.
  • Исследовательские структуры, которые там есть. Сеточные системы были бы фантастическим способом сэкономить время, если дизайн подходит; увенчанный jQuery-UI или формализованный , вы бы имели общие дреды, заботящиеся о вас (глядя на вас, макеты форм!).

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

  • Книга дизайна Не-дизайнера - если бы я мог повторить ее сто раз, я бы это сделал. Нет воды, легко понять главы, сосредоточиться на основах дизайна (контраст, повторение, выравнивание, близость), которые в конечном итоге будут способствовать созданию последовательного, читаемого веб-сайта (или печатного media)
  • Ты все еще хочешь большего? Прочитайте универсальные принципы дизайна - теперь мы отклоняемся в область дизайна "general", но большинство идей можно перенести.
  • Я закончу список словами " Не заставляй меня думать".: Здравый смысл подход к веб-юзабилити , который именно таков.

И помните stackoverflow - если вы столкнулись с проблемой, кто-то, вероятно, уже решил ее 🙂

Поделиться o.v.     18 марта 2012 в 10:25



5

Я рекомендую прочитать http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ .

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

  • Глава 5 -макет (особенно конец)
  • Глава 9 -визуальная модель CSS2 (все части)

Поделиться Rob W     18 марта 2012 в 10:44



3

Я бы посоветовал вам взглянуть на этот учебник

Это 30-дневный курс HTML/CSS Джеффри Уэй, он объясняет все, что вам нужно, очень хорошо и красиво, и что самое лучшее в этом, это бесплатно (вам нужно зарегистрироваться для бесплатного аккаунта, в настоящее время в правом верхнем углу).

Альтернатива:

Но есть много-много ресурсов для изучения html и css в интернете.

Поделиться mas-designs     13 марта 2012 в 12:54


  • JSP учебник для ASP.Net разработчика

    Я разработчик ASP.Net, который хочет расширить свой навык допинга в удивительный мир Java. Как ни странно, кажется, что есть тонна ASP.Net для разработчика JSP учебников, но очень мало (нет?) JSP для разработчика ASP.Net учебники. Просто простые вещи, такие как разница между файловыми структурами...

  • Гектор Книга (Расширенный Учебник)

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


Поделиться sandeep     16 марта 2012 в 18:15


Поделиться Philip     18 марта 2012 в 05:08



1

Я предпочитаю учебники. Вы можете использовать postit notes, чтобы поместить в них маркеры страниц (любые, которые вы можете прочитать на унитазе!).

Что касается одного для CSS - CSS отсутствующего руководства, то я нашел довольно хорошее

HTML-книги в ореховой скорлупе (которые я всегда находил хорошими) - это хорошая книга.

Поделиться Ed Heal     16 марта 2012 в 18:18



0

Просто прочитайте, как работает DOM (document object model). Самое важное, что нужно знать, - это то, что код html анализируется сверху вниз, и именно здесь ваши знания элементов позиции также пригодятся. Построение макета будет очень легко с учетом этого, а также если вы будете иметь в виду сетчатую структуру. Также ознакомьтесь с передовыми методами обеспечения доступности.

Я также читал некоторые хорошие технические articles/tutorials/etc на сайте IBM developerworks .

Все, что вам нужно, находится в Google, я думаю, что это просто вопрос использования правильных ключевых слов 🙂

Поделиться Ettiene Grobler     13 марта 2012 в 13:37


Похожие вопросы:


Общая книга рецептов Javascript/CSS/HTML

Просто интересно, есть ли хорошая книга 'recipe', которая собрала все/большинство распространенных шаблонов дизайна и функций на переднем уровне веб-разработки? Существует ли такая книга? Просто. ..


Книга Приложение Учебник iphone

Я полностью новичок в программировании. Я немного поиграл с xcode. Но мой вопрос таков: Как сделать приложение, как книга с картинками, текстами и звуками, и что, когда дети меняют свою страницу,...


Я ищу чистый учебник HTML

Я занимался веб-программированием с 1999 по 2004 год, и похоже, что многое изменилось. Макет больше не выполняется с таблицами, а с DIVs и т. д... Я ищу учебник, который объединяет CSS и HTML и DIVs...


Кто-нибудь использует объектно-ориентированный фреймворк Николь Салливан CSS?

Edit: из-за отличного комментария Коби , указывающего на этот вопрос StackOverflow, я изменил вопрос ниже: Кто-нибудь там пробовал объектно-ориентированный фреймворк Николь Салливан CSS или один из...


Что такое хороший учебник или книга, чтобы узнать обработку кредитных карт с помощью PHP?

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


JSP учебник для ASP.Net разработчика

Я разработчик ASP.Net, который хочет расширить свой навык допинга в удивительный мир Java. Как ни странно, кажется, что есть тонна ASP.Net для разработчика JSP учебников, но очень мало (нет?) JSP...


Гектор Книга (Расширенный Учебник)

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


Начните веб-дизайн с комбинации html css javascript jquery и php

Я знаю основы: html, css, javascript, jquery и php. Теперь я хочу начать создавать интерактивные веб-сайты. Есть ли какая-либо книга или учебник, который начинается с того, что все они используются?


Инструментально-ориентированный учебник для git?

Я уверен, что есть много потоков, просящих git учебников, но я хочу очень конкретный учебник (если он вообще есть :P). Есть много учебных пособий, которые фокусируются на том, как сделать это и то ,...


Coq учебник и / или книга с упражнениями, включающими типы подмножеств

Есть ли учебник Coq и / или книга с обсуждением и упражнениями, связанными с типами подмножеств, как в следующем вопросе SO? Анализ и переписывание случаев Coq с помощью функции, возвращающей типы...

Учебник HTML и CSS для новичков

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

Языки HTML и CSS предназначены для верстки сайтов (верстка - это размещение элементов сайта по нужным местам). Язык PHP нужен для программирования сайта (с его помощью можно, к примеру, произвести регистрацию пользователей). Язык JavaScript нужен для того, чтобы «оживить» сайт: к примеру, сделать меняющиеся картинки (слайдер).

Язык HTML

Язык HTML - это основа веб-сайтов, с его помощью создается каркас страницы, которую вы видите в браузере.

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

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

Что такое HTML теги?

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

Теги строятся по такому принципу: уголок <, потом имя тега, а потом уголок>, вот так: <имя тега>. Имя тега может состоять из английских букв и цифр. Примеры тегов:

,

, .

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

К примеру,

- так я открыл тег p, а так -

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

Бывают теги, которые не нужно закрывать, например,
или .

Атрибуты

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

Атрибуты размещаются внутри открывающего тега в таком формате: <тег атрибут1 = "значение" атрибут2 = "значение">.

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

Язык CSS

Язык CSS расширяет возможности языка HTML. Он позволяет менять цвета, шрифты, фон, в общем заниматься красотой сайта. А HTML, соответственно, отвечает за структуру сайта.

Итак, приступим

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

Подборка материалов по HTML и CSS

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

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

Представляя собой исчерпывающий гайд по современным веб-стандартам. Эта книга будет полезна веб-разработчику любого уровня.

Поистине, незаменимое издание, которое должно быть настольной книгой всех современных веб-дизайнеров.

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

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

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

Одно из новейших изданий (опубликована 12 января 2017 года), освещающее все основные аспекты, необходимые для овладения инновационными технологиями веб-разработки.

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

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

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

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

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

Краткий видеокурс по основам компонентов технологии HTML5.Введение, работа с ДОМ, псевдоклассы и использование импортов.

Объемный курс видеолекций по Bootstrap - простому и легко настраиваемому HTML, CSS и JS-фреймворку, предназначенному для удобной веб-разработки.

10 вещей в HTML, о которых вы вряд ли знали

Почему CSS Grid лучше, чем фреймворк Bootstrap?

Книги и учебные материалы по HTML и CSS, а также инструменты вёрстки

Немного ввода информации (из личного и опыта моих коллег, друзей):

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

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

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

Литература (HTML):

  • «Изучаем HTML5. Библиотека специалиста ». Б. Лоусон, Р. Шарп, Питер, 2012, 303 стр.
  • «HTML5: Рецепты программирования». К. Шмитт, К. Симпсон, 2012
  • "HTML5. Карманный справочник". 5-ое издание, Д. Роббинс, 2015
  • «HTML5: Разработка приложений для мобильных устройств». Э.Вейл, 2015

Литература (CSS):

  • "Секреты CSS. Идеальные решения ежедневных задач". Лия Веру, Питер, 2016
  • "Новая большая книга CSS". Д.Макфарланд, Питер, 2016
  • "HTML5 и CSS3 для чайников".К.Минник, Эд Титтел, Диалектика, 2016, 400 стр.

Ресурсы для обучения и справочники:

WebReference
MDN Web Docs
W3C. HTML 5
W3C. Домашняя страница каскадных таблиц стилей
SASS. Документация
Bootstrap. Документация
Книги и учебные материалы по SVG


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

  • «Большая книга веб-дизайна».Т. Фельке-Моррис, ЭКСМО, 2017
  • "Bootstrap в примерах", С. Морето, ДМК Пресс, 2017, 314 стр.

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

Справочник и учебник по HTML и CSS

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

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

  • Статьи: набор статей по разным темам создания сайта. Каждая статья является независимой и в то же время выступает как часть темы, в которую входит.
  • Практикум: сборник задач для самостоятельного решения. Все задачи делятся на три уровня сложности
  • Рецепты HTML и CSS: краткие рецепты по теме HTML, CSS и верстке сайта, оформленные в виде вопроса и ответа на него.
  • Форум, где можно задавать свои вопросы по теме сайта.
  • Самоучитель HTML: набор взаимосвязанных уроков по изучению языка разметки документов.
  • XHTML: Приводится синтаксис XHTML и его отличия от HTML.
  • Валидация: набор статей, посвященных, проверить, как документ соответствует спецификации HTML.
  • Справочник HTML: описание всех основных тегов HTML, их атрибутов и значений. Для каждого тега применяемой области указаны атрибуты и их возможные значения. Таблица совместимости позволяет определить какие браузеры понимает тег, а также соответствует ли тегам и его параметрам спецификации HTML и XHTML.
  • Самоучитель CSS: набор взаимосвязанных уроков по изучению каскадных таблиц стилей.
  • Справочник CSS: приведены основные свойства CSS с указанием работы в разных браузерах, описанием, возможными значениями и примерами использования.

Три лучших книги по HTML5 и CSS3 для начинающих в 2021 году - Завистник

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

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

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

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

А теперь о книгах :).

Дэвид Макфарланд.«Новая большая книга CSS»

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

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

Отзывы читателей:

«Это мой бестселлер !!! Хоть и называется CSS3 - автор обучает и HTML5. Я, человек привыкший работать с дизайном, сразу вижу свой результат во время проектирования. Очень все просто объясняется. Подойдет как для начинающих, так и для тех кто знаком с HTML5 и CSS3, потому что в книги много примеров ».

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

«Изучать веб-приложение и особенности CSS советую по этой книге. Автор также учит HTML 5. Прочитав эту книгу, вы поймете многие аспекты верстки, и будете уметь верстать качественно, адаптивно и кроссбраузерно. Советую всем веб разработчикам !!!! »

Где купить бумажную книгу

Джон Дакетт.«HTML и CSS. Разработка и дизайн веб-сайтов »

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

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

Отзывы читателей:

«Отличная и понятная книга. Разбирается тег и тут же пример, как это работает. Немного есть истории, как вообще начиналась разработка языков программирования. Для новичков самая то! Мне очень понравилось ».

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

«Интересная и информативная книга для начинающих.Мне понравился её простой язык и качественное исполнение. Своих денег потраченных на книгу не жалею ».

Купить электронную книгу в ЛитРес
Где купить бумажную книгу

Робсон Э., Фримен Э. «Изучаем HTML, XHTML и CSS»

Устали от чтения книг по HTML, которые понятны только специалистам в этой области? Тогда самое время взять в руки второе издание «Изучаем HTML, XHTML и CSS».

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

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

Отзывы:

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

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

Купить электронную книгу в ЛитРес
Где купить бумажную книгу

Экспресс-курс по HTML5 и CSS3
в Geekbrains - онлайн-университет от @Mail.ru группа


Учебники | MDN

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

HTML учебники

Вводный уровень

Введение в HTML
Что такое HTML, что он делает, его краткая история, и что представляет собой структуру HTML документа. В статьях мы подробнее рассмотрим отдельные части HTML.
Базовая структура веб-страницы (SitePoint)
Узнайте, как элементы HTML сочетаются в общей картине.
Ссылка на элемент HTML MDN
Комплексный справочник для элементов HTML и различные браузеры их.
Проблемы HTML (Викиверситет)
Используйте эти задачи, чтобы отточить свои HTML навыки (для примера, "Какой элемент нужно использовать -

или ?"), Фокусируясь на смысле разметки.

Продвинутый уровень

Советы по созданию быстро загружаемых HTML-страниц
Оптимизация веб-страниц, для большей адаптивности сайта и снижения нагрузки на веб-сервера и подключение к Интернету
Руководства по HTML5 (HTML5 Rocks)
Совершите возможности экскурсии в код, который использует HTML5.
Семантика в HTML5 (A List Apart)
Изучите рабочую разметку, обеспечивающую обратную совместимость, расширяемую и поддерживающую будущие изменения (совместимость вперед).
Canvas Учебное пособие
Узнайте, как рисовать с помощью скриптов, используя элемент canvas .
HTML5 Доктор
Статьи о том, как используется HTML5 прямо сейчас.
Радость HTML5 Audio (в приподнятом настроении)
Используйте как использовать HTML аудио элемент для того, чтобы вставлять звуки на ваши веб-страницы.В учебнике представлено много примеров кода.

Учебники Javascript

Вводный уровень

Первые шаги в JavaScript
JavaScript руководство, написанное как часть MDN Learning Area.
Кодекадемия (Codecademy)
Codecademy это простой способ изучить JavaScript. Он интерактивный, и вы можете делать это вместе с друзьями
Начало работы с JavaScript
Что такое JavaScript и как он может пригодиться вам?
Рекомендации по использованию JavaScript (WebPlatform.org)
Узнайте о некоторых из очевидных (и не очень очевидных) лучших практиках для написания кода на JavaScript.

Средний уровень

Повторное введение в JavaScript
Язык программирования JavaScript для разработчиков Повтор среднего уровня.
Красноречивый JavaScript
Полное руководство по "средним" и "продвинутым" методикам JavaScript.
Основные шаблоны проектирования JavaScript (Эдди Османи)
Введение в основы шаблонов проектирования JavaScript.
Язык программирования JavaScript (блог YUI)
Дуглас Крокфорд исследует язык, какой он есть сегодня, и как он пришел, чтобы быть.
Введение в объектно-ориентированный JavaScript
Узнайте об ООП в JavaScript.
Говорящий JavaScript (доктор Аксель Раушмайер)
Для тех программистов, кто хочет быстро и хорошо выучить JavaScript, а так же для тех, кто хочет углубить свои навыки или же изучить какие-то специфические темы.

Продвинутый уровень

Руководство по JavaScript
Полное, регулярно обновляемое руководство по JavaScript для всех уровней обучения от начального до продвинутого.
Изучение расширенного JavaScript (Джон Ресиг)
Гид по "продвинутому" JavaScript от Джона Ресига.
Введение в JavaScript DOM (Elated)
Что такое Document Object Model, и зачем она нужна? Эта статья дает вам необходимое введение в эту мощную способность JavaScript.
Неудобный API: теория DOM (блог YUI)
Дуглас Крокфорд объясняет объектную модель документа.
Расширенный JavaScript (блог YUI)
Дуглас Крокфорд пристально следит за шаблоном кода, который программисты JavaScript могут выбрать в своих приложениях.
JavaScript Сад
Документация из самых необычных частей JavaScript
Какой фреймворк JavaScript? (StackOverflow)
Советы по выбору основы JavaScript..
Неблокирующие загрузки JavaScript (блог YUI)
Советы по улучшению загрузки загрузки страниц, улучшения JavaScript
Шаблоны JavaScript
Шаблоны и антишаблоны проектирования JavaScript, которые включают функциональные шаблоны, шаблоны JQuery, шаблоны плагинов JQuery, шаблоны проектирования, основные шаблоны, шаблоны конструирования, шаблоны создания объекта, переиспользуемый шаблонный код, DOM.
Как работают браузеры
Статья с подробным исследованием, описывающая различные современные браузеры, их движки, рендеринг страниц и пр.
Изучение ES6 (доктор Аксель Раушмайер)
Надежная и подробная информация об ECMAScript 2015.
Видео JavaScript (GitHub)
Видео о JavaScript.

Учебники CSS

Вводный уровень

CSS Начало работы
Этот учебник познакомит вас с каскадными таблицами стилей (CSS). Он проведет вас через основные особенности CSS и предложит практические примеры, которые можно попробовать на вашем компьютере.
Классы селектора CSS (Викиверситет)
Что такое классы в CSS?
Внешний CSS (Викиверситет)
Использование CSS из внешних источников.
Добавление нотки стиля (W3C)
Краткое руководство для начинающих по стилизации веб-страниц с помощью CSS.
Общие вопросы CSS
Общие вопросы и ответы для начинающих.
Селекторы CSS
Введение в CSS селекторы.

Средний уровень

Ссылка CSS
Полный справочник по CSS, с информацией о поддержке в Firefox и других браузерах.
Задачи CSS (Викиверситет)
. Улучшите ваши навыки CSS, и обратите внимание на то, где вам нужно больше практики.
Промежуточные концепции CSS (HTML.net)
Группировка, псевдо-классы и многое другое.
CSS Positioning 101 (A List Apart)
Использование позиции в соотвествии со стандартами, без использования таблиц.
Прогрессивное улучшение с помощью CSS (A List Apart)
Прогрессивное улучшение в веб-страницы с помощью CSS.
Сетки для жидкости (в отдельном списке)
Дизайн верстки, который плавно изменяется вместе с размерами окна, основанный на сетке.

Продвинутый уровень

Использование преобразований CSS
Как применить поворот, наклон, масштабирование и перемещение при помощи CSS
Переходы CSS
CSS переходы, спецификация CSS3 по этой теме, как анимировать изменения стилей в CSS, вместо того, чтобы делать их "сразу".
Краткое руководство по реализации веб-шрифтов с помощью @ font-face (HTML5 Rocks)
Возможности @ font-face в CSS3, создание собственных шрифтов и работа с ними.
Начало записи CSS (Дэвид Уолш)
Введение в инструменты и методологии разработки более краткого масштабируемого поддерживаемого CSS.

Ориентированный на разработчика CSS / HTML учебник / книга



Я разработчик программного обеспечения, который иногда пишет код CSS / HTML. В настоящее время я работаю над приложением, которое требует довольно сложного макета на основе html / css, и я чувствую, что недостаточно понимаю макет CSS / HTML, чтобы реализовать его.Какие можете книги и учебные пособия вы порекомендовать мне, чтобы улучшить свои навыки?

П.С. Я понимаю разницу между блочными и встроенными элементами, что такое поплавки и т. д., Но мне не хватает целостной картины того, как это работает и как создавать произвольные вещи в html / css.

P.P.S. Я пробовал несколько книг раньше, и они либо имеют формат справочного руководства (например, http://www.amazon.com/Pro-CSS-HTML-Design-Patterns/dp/15040), либо содержат информацию, которую я уже знаю, например, большинство базовых учебников по w3schools, большинство книг для чайников по amazon и т.д., или даже хуже, ориентированы на дизайн. Мне не нужно читать о цветах и ​​т. д., Мне просто нужно научиться делать макет в HTML / CSS, как я делаю в Java / Swing или других фреймворках.

html css
Поделиться Источник Константин Соломатов 13 марта 2012 в 12:50

7 ответов




43

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

Вам дали исчерпывающий стилистический обзор или, может быть, даже несколько макетов, и теперь вы должны сделать его в html + css? В этом случае я бы использовал

  • Ручной CSS: более пуленепробиваемый веб-дизайн -прежде всего, он охватывает некоторые из более сложных методов «бедра», таких как жидкий макет, и делает вас концепцию изящной деградации (это означает, что IE6 и FF10 не ) соответствует один и тот же опыт). Это популярен в долгосрочной перспективе... за восемь месяцев
  • CSS: отсутствующее руководство и HTML, XHTML и CSS Библия -довольно глубокие и материал там еще не устарел. Я бы использовал сначала прочитать о поплавках (многие причуды там независимо от предыдущего опыта) и какие бы главы не заполняли пробелы в знаниях, которые, как вы чувствуете, у вас есть, если таковые имеются. Кроме того-используется в ссылки.
  • Удобно с общими понятиями, но нужно искать случайные свойства? Во - первых, w3schools-это зло -вместо этого використовуйте MDN. Несвязанные: фантастическая ссылка JS, а также CSS / HTML, которые вы сейчас ищете.
  • Закладка quirksmode и caniuse так, что вы не используете слишком далеко отступать, когда крупный браузер внезапно отказывается правильно отображать ваш точеный код.
  • Исследовательские структуры, которые там есть. Сеточные системы были бы фантастическим способом сэкономить время, если дизайн подходит; увенчанный jQuery-UI или формализованный, вы бы имели общие дреды, заботящиеся о вас (глядя на вас, макеты форм!).

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

  • Книга дизайна Не-дизайнера - если бы я мог повторить ее сто раз, я бы это сделал. Нет воды, легко понять главу, сконцентрироваться на основах дизайна (контраст, повторение, выравнивание, близость), которые в совокупности создаются принципы последовательного, читаемого веб-сайта (или печатного носителя)
  • Ты все еще хочешь большего? Прочитайте универсальные принципы дизайна - теперь мы отклоняемся в области дизайна "общие", но большинство идей можно перенести.
  • Я закончу список словами "Не заставляй меня думать" .: Здравый смысл подход к веб-юзабилити, который именно таков.

И помните stackoverflow - если вы столкнулись с проблемой, кто-то, вероятно, уже решил ее 🙂

Поделиться о.в. 18 марта 2012 в 10:25



5

Я рекомендую прочитать http: // www.html5rocks.com/en/tutorials/internals/howbrowserswork/.

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

  • Глава 5 -макет (особенно конец)
  • Глава 9 -визуальная модель CSS2 (все части)

Поделиться Роб W 18 марта 2012 в 10:44



3

Я бы посоветовал вам взглянуть на этот учебник

Это 30-дневный курс HTML / CSS Джеффри Уэй, он объясняет все, что вам нужно, очень хорошо и красиво, и что самое лучшее в этом, это бесплатно (вам нужно зарегистрироваться для бесплатного аккаунта, в настоящее время в верхнем углу) .

Альтернатива:

Но есть много-много ресурсов для изучения html и css в интернете.

Поделиться мас-дизайнов 13 марта 2012 в 12:54


  • Учебник JSP для ASP.Net разработчика

    Я разработчик ASP.Net, который хочет расширить свой навык допинга в удивительный мир Java. Как ни странно, кажется, что есть тонна ASP.Net для разработчика JSP, учебников, но очень мало (нет?) JSP для разработчика ASP.Сетевые учебники. Просто простые вещи, такие как разница между файловыми структурами ...

  • Гектор Книга (Расширенный Учебник)

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


Поделиться сандип 16 марта 2012 в 18:15


Поделиться Филипп 18 марта 2012 в 05:08



1

Я предпочитаю учебники. Вы можете использовать почтовые заметки, чтобы включить в них маркеры страниц (которые, вы можете прочитать на унитазе!).

Что касается одного для CSS - CSS отсутствующего руководства, то я нашел довольно хорошее

HTML-книги в ореховой скорлупе (я всегда находил хорошими) - это хорошая книга.

Поделиться Эд Хил 16 марта 2012 в 18:18



0

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

Я также читал некоторые хорошие технические статьи / руководства / и т. Д. На сайте IBM developerworks.

Все, что вам нужно, находится в Google, я думаю, что это просто вопрос использования правильных ключевых слов 🙂

Поделиться Эттьене Гроблер 13 марта 2012 в 13:37


Похожие вопросы:


Общая книга рецептов Javascript / CSS / HTML

Просто интересно, есть ли хорошая книга 'recipe', которая собрала все / большинство распространенных шаблонов дизайна и функций на переднем уровне веб-разработки? Существует ли такая книга? Просто...


Книга Приложение Учебник iphone

Я полностью новичок в программировании. Я немного поиграл с xcode. Но мой вопрос таков: Как сделать приложение, как книга с картинками, текстами и звуками, и что, когда дети меняют свою страницу, ...


Я ищу чистый учебник HTML

Я занимался веб-программированием с 1999 по 2004 год, и похоже, что многое изменилось. Макет больше не выполняется с таблицами, а с DIVs и т. д ... Я ищу учебник, который объединяет CSS и HTML и DIVs...


Кто-нибудь использует объектно-ориентированный фреймворк Николь Салливан CSS?

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


Что такое хороший учебник или книга, чтобы узнать обработку кредитных карт с помощью PHP?

Я ищу хороший учебник или книгу, которая объясняет, как обрабатывать карту клиента из формы на вашем сайте.Я читал что-то об использовании curl, но это был не полный учебник. Я ищу урок, ...


JSP учебник для ASP.Net разработчика

Я разработчик ASP.Net, который хочет расширить свой навык допинга в удивительный мир Java. Как ни странно, кажется, есть тонна ASP.Net для разработчика JSP, учебников, но очень мало (нет?) JSP ...


Гектор Книга (Расширенный Учебник)

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *