Беспощадный resources html. Рецепты HTML5: Погружаемся в кодинг под HTML5 на конкретных примерах

To help you out, we"ve gathered together a selection of resources that will tell you what you need to know, help you when you"re stuck, and get you expanding your skills in no time.

01. HTML Cheat Sheet

This incredibly helpful HTML cheat sheet includes a full list of all HTML elements, along with descriptions, code examples and live previews. You can organise the tags alphabetically or by category, and even download it as a PDF to refer to later.

02. CSS Cheat Sheet

If you"re just starting out with CSS, merely remembering all the many tags and technical terms can be hugely intimidating. Don"t let that put you off, though; keep this helpful cheat sheet bookmarked, or just print it out, to quickly find the elements you need.

03. CSS-Tricks

When it launched in 2007, this site was all about CSS. Now it"s expanded quite a bit, but there"s still plenty of helpful information and tutorials about CSS and HTML for you to get stuck into. It"s definitely worth a visit.

04. CSS Wizardry

CSS is easy to learn but difficult to master. Harry Roberts" CSS Wizardry has some of the best articles on the nitty-gritty of writing scalable and maintainable CSS, like the BEM methodology and refactoring (which are among the hardest parts).

05. CodePen"s Yearly Top Pens

One of the best ways to learn HTML/CSS is to dissect cool demos you discover, and CodePen"s yearly Top Pens are great for that. The demos range from cool to "I didn"t even know that was possible". CodePen"s integrated UI for diving into the code is also convenient. In a similar vein, you might also like to check out our post.

06. Web Design Weekly

HTML and CSS are both constantly evolving. To stay up to date with the latest methodologies and features, we recommend this email newsletter. It comes once a week, which is just often enough that you"ll actually read it.

07. Responsive Design Weekly

Responsive is a vital part of the web designer"s toolkit these days, and to help you keep up to date, Justin Avery spends hours every week curating the best responsive web design content and interviewing industry leaders, and sends it out as a newsletter every Friday (You might also like our post on .)

08. Create non-rectangular layouts with CSS shapes

…Although the syntax of HTML is relatively simple to learn,…there"s, still a lot of elements, attributes and…other concepts that you"re going to need to learn and keep track of.…While this course is intended to introduce you to the essentials of HTML, it"s…really not designed to teach you every single element and attribute available.…So with that in mind, I want to give you a couple of online HTML resources,…that can really help you as you begin learning HTML, and…can serve as valuable references later on, as you"re authoring your own pages.…Now we"re going to start, at the specifications themselves.…

And this is something, two documents that you should definitely have bookmarked.…So, this is the W3Cs version of HTML5.…You can see they have a latest Publisher Version.…You can go see the Editor"s Draft,…if you want to see what"s coming down, down the pipe.…And, this is pretty large.…If I scroll down, you can see that here"s just the Table of Contents.…And I"m not even going to scroll through all of them.…

Resume Transcript Auto-Scroll

Updated3/30/2017 Released3/16/2015

HTML is the programming language that powers the web. And like any language, once you master it, you can begin to create your own content, whether that"s simple websites or complex web applications. This course provides an in-depth look at the essentials: the syntax of HTML and best practices for writing and editing your code. Senior staff author James Williamson reviews the structure of a typical HTML document, and shows how to section pages and format your content with HTML. Plus, learn how to create links and lists, and find out how HTML works with CSS and JavaScript to create rich, engaging user experiences. So open a text editor, watch these videos, and begin learning to author HTML the right way.

Topics include:

• Why is HTML important?
• Exploring an HTML document
• Formatting content
• Displaying images
• Using nav, article, and div elements
• Linking to pages and downloadable content
• Creating lists
• Controlling styling (fonts, colors, and more)
• Writing basic scripts

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

Сначала немного определений:

Html (от английского "HyperText Markup Language" - язык разметки гипертекста) - это стандартный язык разметки веб-страниц.

Css (от английского "Cascading Style Sheets" - каскадные таблицы стилей) - это технология описания внешнего вида веб-страницы.

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

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

На мой взгляд, лучший способ выучить html, css, да и другие тематики, включая продвижение сайтов - это завести свой сайт и на нем практиковаться. Кстати, можете посмотреть первый созданный мною сайт по картам для игры Counter-Strike , созданием которых я тогда увлекался. Вот карты и их скрины , созданные стариком Глобатором в те времена, когда он еще не знал, что такое топ-10, тИЦ и PR, и беззаботно резвился на солнышке создавал трехмерные карты 🙂 . Я создал этот сайт за месяц, изучая html и css на практике.

Для того, чтобы выучить html и css, совсем необязательно быть техническим специалистом. К примеру, я вообще гуманитарий и по математике у меня в основном было "2" 🙂 . Так что выучить html и css под силу любому желающему. Перечисленные мною ресурсы подойдут также и для того, чтобы в любой момент вы могли с их помощью выяснить какой-либо интересующий вас момент по html и css.

Сайты для изучения html и css

Начну подборку полезных ресурсов для изучения html и css с сайта, по которому я сам занимался. Это Дикие уроки html , которые написала Валентина Ахметзянова ака Дикарка . Она настолько весело и интересно описала все необходимые моменты, что изучение html и css с помощью ее уроков превращается в увлекательное занятие. Кстати, можете почитать для блога сайт. Диких уроков вполне достаточно, чтобы выучить html и css на необходимом для работы вебмастером уровне.

Представляете, кем бы я был, если бы развивался дальше в теме Фотошопа? Я бы был настоящим монстром! Но я связался с SEO и прозябаю тут, набирая эти буквы скрюченными от мороза пальцами 🙂 . Да шучу, тут тоже тепло и неплохо кормят 🙂 .

Данная страница содержит материалы для лиц, участвующих в разработке стандартов.

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

Нормы поведения

Участникам комитетов ИСО, рабочих групп или «Объединившихся для достижения консенсуса» предлагается работать по принципам норм поведения .

Руководства по соблюдению законодательства о защите конкуренции

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

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

Авторское право

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

Политика в сфере коммуникаций работы комитета с внешними сторонами и сохранением документов

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

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

Политика защиты данных

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

Объяснение терминов и выражений, используемых в стандартах ИСО Международные стандарты и торговля Виды правовых санкций в ИСО

В ИСО был разработан документ, в котором обобщаются вопросы, связанные с применением санкций и процессом разработки стандартов .

Привлекая заинтересованные стороны и формируя консенсус

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

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

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

Что такое HTML5?

На первый взгляд HTML5 - это всего лишь новая версия языка разметки. Однако сейчас под этим термином подразумевают несколько иное. Рассматривать HTML5 без упоминания того же CSS3 просто нелепо, поскольку для разработки действительно современных web-приложений без него никак не обойтись. Нельзя забывать и о JavaScript. С его помощью реализуется обращение к богатому API, описанному в стандарте HTML5. Резюмируя все вышесказанное, напрашивается определение: HTML5 - это совокупность современных технологий/стандартов (JS, HTML5, CSS3 и так далее), применяемых для разработки web-приложений.

Капелька истории

HTML5 появился отнюдь не внезапно. Его разработка началась еще в 2007 году. За процесс работки отвечала специально созданная группа от консорциума W3C. Но многие возможности HTML5 были придуманы еще в рамках стандарта Web Application 1.0, а над ним корпели аж с 2004 года. Так что в реальности HTML5 не такая уж и юная технология, как может показаться на первый взгляд.

Первая черновая версия спецификации HTML5 стала доступна уже 22 января 2008 года. Прошло три года, но окончательная версия спецификации так и не готова и вряд ли поспеет в ближайшие годдва. Этот печальный момент обязывает разработчиков аккуратно применять новые возможности в своих проектах. Спецификация может запросто поменяться, да и не все современные браузеры (FireFox 4, Google Chrome 10, IE9, Opera 11) в полной мере поддерживают новые возможности.

Полезные рецепты

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

Рецепт №1: Включаем Drag&Drop на полную

Одной из приятных няшек (наверное, зря ты употребил столько энергетиков, ведь тут должно быть слово «фишек» - прим. ред.) HTML5 стала возможность применения File API и Drag and Drop API.

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

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

А ведь технология Drag&Drop применяется в системе сплошь и рядом. Мне лично всегда хотелось просто выделить нужные файлы и легким взмахом крысы кинуть на страницу. Это куда удобней, чем рыскать в поисках файла при помощи стандартного диалога.

HTML5 внес свои коррективы, и теперь ничто не мешает организовать полноценный Drag&Drop для передачи файла на страницу. Первыми эту фичу реализовали гугловчане в Gmail. Если ты пользуешься гмылом, то наверняка давно заметил область, на которую можно перетащить файлы для приаттачивания к письму. Лично я активно пользуюсь этой функцией и сейчас покажу тебе, как замутить такую же для своего проекта. Наш проект будет состоять из трех файлов: sample.html, style.css и scripts.js. Мы, конечно, могли бы ограничиться и одним html-файлом, но тогда код получился бы нечитабельным. Не нужно мешать HTML с JS или CSS. Лучше все разбить по файлам, и потом спокойненько с ними работать. Первым делом подготовим структуру нашего приложения. Создавай файл sample.html и напиши в нем:

Тащи свои файлы сюда

Для удобства написания кода на JavaScript я подключил библиотеку jquery. После этого описал структуру будущего html-документа. Она проста до безобразия - нам требуется описать поле, на которое пользователь должен перетягивать файлы. Для этого необходим лишь один div-контейнер. Если сейчас открыть страницу в браузере, то ничего хорошего ты не увидишь. Чтобы наше поле стало заметным визуально, требуется его оформить при помощи CSS. Открываем файл style.css и пишем в него следующий код:

#box {
width: 500px;
height: 300px;
border: 2px dashed #000000;
background-color: #FCFFB2;
text-align: center;
color: #3D91FF;
font-size: 2em;
font-family: Verdana, sans-serif;

Moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
#label {
position: relative;
top: 2%;
}

Идентификатор «box» - это и есть наш будущий контейнер для приема файлов (на эту область пользователь должен перетаскивать документы). Чтобы юзер не промахнулся, я делаю область побольше и в качестве варианта обрамления выбираю dashed - пунктирные линии. Обычные пунктирные линии смотрятся не очень, поэтому я сразу задаю значения для свойств: -moz-border-radius и -webkitborderradius. Вот сейчас ты можешь открыть созданную страницу в браузере и оценить общий вид.

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

$(document).ready(function() {

//Добавляем обработчики событий

Var mybox = document.getElementById("box")

Mybox.addEventListener("dragenter", dragEnter, false);

Mybox.addEventListener("dragexit", dragExit, false);

Mybox.addEventListener("dragover", dragOver, false);

Mybox.addEventListener("drop", drop, false);
});
function dragEnter(evt) {

Evt.stopPropagation();

Evt.preventDefault();
}
function dragExit(evt) {

Evt.stopPropagation();

Evt.preventDefault();
}
function dragOver(evt) {

Evt.stopPropagation();

Evt.preventDefault();
}
function drop(evt) {

Evt.stopPropagation();

Evt.preventDefault();

Var files = evt.dataTransfer.files;

Var count = files.length;

If (count > 0)

HandleFiles(files);
}
function handleFiles(fi les) {

//Берем первый файл

//Если требуется работать с несколькими

//файлами, то здесь нужно организовать перебор

Var file = files;

Document.getElementById("label").innerHTML =
"Поймал: " + file.name;

Var reader = new FileReader();

Reader.onprogress = handleReaderProgress;

Reader.readAsDataURL(file);
}
function handleReaderProgress(evt) {

If (evt.lengthComputable) {

If (evt.loaded = evt.total) {

Alert("Загружен...");
}
}
}

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

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

Сначала я вывожу в элемент label (помнишь надпись «Тащи свои файлы сюда»?) имя файла, который пользователь перетянул на активную область, а затем начинаю его считывать при помощи объекта типа FileReader(). Подробней про него можно почитать в этой статье: html5rocks.com/tutorials/file/dndfiles . На всякий случай я определяю обработчик события onProgress для объекта типа FileReader(). Это событие будет вызываться каждый раз, когда произойдет считывание порции данных. В самом обработчике я выставил условие: если объем загруженных данных равен размеру файла, значит, считывание успешно завершено, и можно выводить радостное сообщение.

Рецепт №2: Пей пиво, смотри видео, слушай рок

До появления HTML5 просмотр видео в web’е осуществлялся при помощи всевозможных flash-плееров. Нельзя сказать, что просмотр видео этим способом неудобен. Проблемы есть разве что в безопас ности (в последнее время Flash Player просто кишит уязвимостями) и необходимости установки самого плагина. Стандарт HTML5 предлагает элегантное решение - встроенная возможность проигрывания видео- и аудио-контента.

Наверное, многие уже догадались, что я говорю о тегах и . Они-то и позволяют встраивать аудио и видео прямо в страницу. Единственное огорчение, с которым приходится сталкиваться - набор поддерживаемых кодеков. Увы, для каждого браузера этот набор различен, поэтому есть большая вероятность, что твой видеоролик будет прекрасно отображаться в Chrome, а пользователи FireFox уйдут лесом. Чтобы не попасть в такую ситуацию, рекомендуется позаботиться о подстраховочном варианте - воспроизведению ролика с помощью Flash-плеера. О няшках (нет, все-таки он не перепутал слова, придется пролечить его электросудорожной терапией от аниме-зависимости - прим. Лозовского) и проблемах поговорили, теперь перейдем к практике. Для демонстрации воспроизведения видео я накидал простенький примерчик:

Здесь должно быть видео. Если ты видишь этот текст, то твой браузер не поддерживает новый стандарт.

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

Для чего это может пригодиться? Как вариант, в качестве такого изображения можно вставлять логотип своей компании/проекта. Тег применяется аналогичным образом. В нем разрешено указать сразу несколько источников на медиафайл. Таким образом, ты можешь выложить один и тот же файл в разных форматах (ogg, mp3). Если в браузере пользователя отсутствует кодек mp3, то будет предпринята попытка воспроизвести ogg. Получается, что путем несложных манипуляций легко решить проблему совместимости и быть уверенным, что пользователю удастся воспроизвести контент.

Рецепт №3: Where are you now (geolocation API)

Geolocation API - программный интерфейс для определения координат пользователя. На основании полученных данных легко отметить местонахождение юзера, скажем, на Google Maps. Где можно применять эту возможность? Да много где! Например, разработчики популярного сервиса микроблоггинга Twitter используют Geolocation API в web-интерфейсе твиттер-клиента. Если пользователь разрешает получать сведения о своем местоположении, то ко всем его твитам будет добавляться город, в котором он находится в данный момент.

Не сомневаюсь, что сейчас тебя мучает вопрос: «А откуда GAPI получают сведения о местоположении?». Даже не думай, что в деле замешаны спутники-шпионы и прочие бондовские штучки. Все куда прозаичней - пакет информации для анализа строится на основании данных об IP-адресе, ближайших Wi-Fi хотспотах, GPS (при наличии устройства), GSM cell ID и так далее. Если заинтересовался теорией и практикой получения примерных координат из перечисленных выше источников, то советую поднять подшивку ][ и найти статью Step’а по данной теме, где он хорошо разобрал теоретическую часть, а также дал обзор соответствующего софта. Теперь взглянем на пример использования GAPI. Все предельно просто и понятно:

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
document.getElementById("latitude").innerHTML =
position.coords.latitude;
document.getElementById("longitude").innerHTML =
position.coords.longitude;
},
);
}

Широта: Unknown

Долгота: Unknown

Перед тем как пытаться получить координаты, необходимо убедиться, что браузер поддерживает GAPI. Если метод geolocation вернул true, то все в порядке и можно выполнить попытку получения координат. Для этого воспользуемся методом getGurrentPosition объекта navigator. В случае успеха мы получим координаты, которые прямиком отправятся в документ.

Рецепт №4: База данных в браузере

При разработке web-приложений мы привыкли использовать базы данных. MySQL, SQLite - продукты, знакомые каждому программисту. Пятая версия HTML приносит нам еще один подарок - возможность пользоваться автономной SQLite базой данных. Стоп!

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

Например, IE9 и FF4 пока такой возможности не имеют, так что познакомиться с фишкой на практике можно разве что в Google Chrome. Я не стану приводить пример реального кода, а покажу лишь общий принцип работы:

this.db = openDatabase("xakep", "1.0", "test", 8192);
tx.executeSql("create mytable if not exists " +
"checkins(id integer primary key asc, field_number_one string)",
, function() { console.log("Запрос успешно выполнен"); });
);

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

HTML5.Shutdown()

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

Как подстраховаться?

На протяжении всей статьи я говорил, что в настоящий момент современные браузеры поддерживают разный объем возможностей HTML5. Именно поэтому нужно быть аккуратным и стараться не использовать уж очень экзотичные вещи. Сразу возникает вопрос: «А как узнать, какие возможности HTML5 поддерживает определенный браузер?». Есть несколько способов решения этой задачи, но мне больше всего по душе применение крошечной JavaScript-библиотеки - Modernizr (modernizr.com).

Библиотека распространяется совершенно бесплатно и стоит ее подключить к своему проекту, как она сразу выведет список возможностей HTML5, которые поддерживает твой браузер. Чтобы протестировать функциональность библиотеки, тебе не обязательно сразу ее качать и подключать к своему проекту. Достаточно просто зайти на официальный сайт библиотеки и ты сразу увидишь, что поддерживает твоя бродилка, а что нет. Посмотри скриншоты посещения сайта при помощи Google Chrome и Internet Explorer 9. Несмотря на хорошую pr-компанию и восхваляющие статьи, бродилка от Microsoft явно поддерживает меньше возможностей, нежели Google Chrome.

HTML5 подвинет Flash

Одной из самых интересных фишек HTML5 является возможность создания анимации. Достигается это путем микса HTML5 и CSS3.

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

• Красивая демка, показывающая возможности Canvas’a: feedtank.com/labs/html_canvas ;
• Красивая 3D-шкатулка со встроенной строкой поиска от Google: ;
• Один клик мышью, и страница начнет заполняться шарами. Больше кликов - больше шаров. Как наполнишь страницу до краев - попробуй их резко перетащить. Выглядит очень забавно: mrdoob.com/projects/chromeexperiments/ball_pool ;
• Просто обалденная демка, демонстрирующая различные химические соединения. Обязательно стоит посмотреть: alteredqualia.com/canvasmol ;
• Ты когда-нибудь хотел почувствовать себя патологоанатомом и исследовать тайны человеческого тела?

Если да, то этот линк точно для тебя. Компания Google сделала отличную демку из смеси технологий WebGL, HTML5, CSS3 и Flash. Результатом коктейля стало интерактивное приложение, демонстрирующее 3D-тело человека, у которого ты можешь рассматривать строение внутренних органов. Я когда увидел его в первый раз - не мог оторваться.