На этом шаге мы рассмотрим оформление сносок, которые мы потом в дальнейшем перенесем в конец документа.
В примере со ссылками На начало мы создали новые элементы и добавили их в страницу. Имеется также возможность извлекать элементы из одного места в странице и вставлять в другое место. Такого рода операция применяется, скажем, в приложении, допускающем динамическое размещение содержимого и оформление сносок. В тексте романа Дубровский, используемом для нашего примера, мы оформили как сноски еще пару фрагментов текста:
<div class="chapter"> <p class="square"> Несколько лет тому назад в одном из своих поместий жил старинный русской барин, <a href="http://ru.wikipedia.org/wiki/%D0%94%D1%83%D0%B1%D1%80%D0%BE%D0 %B2%D1%81%D0%BA%D0%B8%D0%B9_(%D1%80%D0%BE%D0%BC%D0%B0%D0%BD)"> Кирила Петрович Троекуров</a>. Его богатство, знатный род и связи давали ему большой вес в губерниях, где находилось его имение. Соседи рады были угождать малейшим его прихотям; губернские чиновники трепетали при его имени; Кирила Петрович принимал знаки подобострастия как надлежащую дань; дом его всегда был полон гостями, готовыми тешить его барскую праздность, разделяя шумные, а иногда и буйные его увеселения. Никто не дерзал отказываться от его приглашения, или в известные дни не являться с должным почтением в село Покровское. В домашнем быту Кирила Петрович выказывал все пороки человека необразованного. Избалованный всем, что только окружало его, он привык давать полную волю всем порывам пылкого своего нрава и всем затеям довольно ограниченного ума. Не смотря на необыкновенную силу физических способностей, он раза два в неделю страдал от обжорства и каждый вечер бывал навеселе. <span class="footnote">В одном из флигелей его дома жили 16 горничных, занимаясь рукоделиями, свойственными их полу. Окны во флигеле были загорожены деревянною решеткою; двери запирались замками, от коих ключи хранились у Кирила Петровича.</span> Молодые затворницы, в положеные часы, сходили в сад и прогуливались под надзором двух старух. От времени до времени Кирила Петрович выдавал некоторых из них за муж и новые поступали на их место. С крестьянами и дворовыми обходился он строго и своенравно; не смотря на то, они были ему преданы: они тщеславились богатством и славою своего господина и в свою очередь позволяли себе многое в отношении к их соседам, надеясь на его сильное покровительство.</p> <p class="nobility hexagon"> Всегдашние занятия Троекурова состояли в разъездах около пространных его владений, одолжительных пирах, и в <a href="http://ru.wikipedia.org/wiki/%D0%9C%D0%B5 %D0%B4%D0%B2%D0%B5%D0%B6%D1%8C%D1%8F_%D0%BF%D0%BE%D1%82%D0%B5%D1%85%D0 %B0"> проказах</a>, ежедневно при том изобретаемых и жертвою коих бывал обыкновенно какой-нибудь новый знакомец; хотя и старинные приятели не всегда их избегали за исключением одного Андрея Гавриловича Дубровского. Сей Дубровский, отставной поручик гвардии, был ему ближайшим соседом и владел семидесятью душами. Троекуров, надменный в сношениях с людьми самого высшего звания, уважал Дубровского, не смотря на его смиренное состояние. Некогда были они товарищами по службе и Троекуров знал по опыту нетерпеливость и решительность его характера. Обстоятельства разлучил и их надолго. Дубровский с расстроенным состоянием принужден был выдти в отставку и поселиться в остальной своей деревне. Кирила Петрович, узнав о том, предлагал ему свое покровительство, но Дубровский благодарил его и остался беден и независим. Спустя несколько лет Троекуров, отставной генерал-аншеф, приехал в свое поместие, они свидились и обрадовались друг другу. С тех пор они каждый день бывали вместе, и Кирила Петрович, отроду не удостоивавший никого своим посещением, заезжал запросто в домишка своего старого товарища. Будучи ровесниками, рожденные в одном сословии, воспитанные одинаково, они сходствовали отчасти и в характерах и в наклонностях. <span class="footnote">В некоторых отношениях и судьба их была одинакова: оба женились по любви, оба скоро овдовели, у обоих оставалось по ребенку.</span> - Сын Дубровского воспитывался в Петербурге, дочь Кирила Петровича росла в глазах родителя, и Троекуров часто говаривал Дубровскому: "Слушай, брат, Андрей Гаврилович: коли в твоем Володьке будет путь, так отдам за него Машу; даром что он гол как сокол". Андрей Гаврилович качал головой и отвечал обыкновенно: "Нет, Кирила Петрович: мой Володька не жених Марии Кириловне. Бедному дворянину, каков он, лучше жениться на бедной дворяночке, да быть главою в доме, чем сделаться приказчиком избалованной бабенки".</p> <p> Все завидовали <span class="pull-quote">согласию, царствующему между надменным Троекуровым и бедным его соседом и <span class="drop">удивлялись</span> смелости сего последнего, когда он за столом у <strong>Кирила Петровича</strong> прямо высказывал свое мнение</span>, не заботясь о том, противуречило ли оно мнениям хозяина. Некоторые пытались было ему подражать и выдти из пределов должного повиновения, но Кирила Петрович так их пугнул, что навсегда отбил у них охоту к таковым <a href="http://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%BA%D1%83%D1%88%D0 %B5%D0%BD%D0%B8%D0%B5_%D0%BD%D0%B0_%D0%BF%D1%80%D0%B5%D1%81%D1%82%D1%83%D0 %BF%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5"> покушениям</a>, и Дубровский один остался вне общего закона. <span class="footnote">Нечаянный случай все расстроил и переменил.</span></p> <!-- продолжение кода разметки --> </div> <!-- Здесь будут располагаться сноски --> <div id="footer"> </div> </div>
Каждый из этих трех параграфов имеет одну сноску, оформленную как элемент <span class="footnote"></span>. Используя такую разметку HTML, мы можем выделять содержимое сносок. Учитывая, что в соответствии с правилами в таблице стилей CSS текст сноски выводится курсивным шрифтом, три параграфа текста будут выглядеть, как показано на рисунке 1.
Рис.1. Сноски в параграфах
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим извлечение сносок.