Превод на сайтове в HTML5

HTML5 отстранен от някои от елементите, които са изгубили значението си. Например: , , , , , , , , , , <strike>, <tt>, <u>, <xmp>. Но има и нови етикети - <section>, <nav>, <aside>, <header>, <footer> и атрибути <role> - <article>, <main>, <form>, <button>, <search>. Списъкът е непълен, но това не е темата на разговора ни.</p><p>За да направите това трябва да се премахне неподходящи елементи за подобряване на структурата и семантиката на съдържанието на сайта. Е, разбира се, беше изхвърлен от първия всичко. Ако някои от отстраняват маркерите, които се използват, а след това добавете към елемент на класа и да го опишем във файла style.css.</p> <p>Допълнителна zaymomsya структура и семантика. Да започнем с това, ние трябва да разберем с новите маркери. В предишните версии на езика често се използва етикет <div>. Позициониране на "divah" е "нашето всичко!" Но само по себе си <div> Аз не разполагат с никакви семантично значение. Той може да съдържа малки и големи блокови елементи, както и рисунка и текст. Той не изчезне, нашият любим <div>, не. Той ще продължи да бъде използвана от нас, но той вече няма да бъде отговорен.</p> <p>Да разгледаме основните тагове в реда, в който те се поставят в страницата:</p><p>1.<header> - таван на сайта.</p> <p>2.<nav> - навигация на сайта меню.</p> <p>3.<section> - група от логически обединени информационни блокове.</p> <p>4.<article> - независим информационен блок.</p> <p>5.<aside> - страничен блок, обикновено с допълнителна информация или навигация.</p> <p>6.<footer> - Страница долния.</p> <p>Ние се обръщаме към главния атрибути HTML5.</p> <p>Всички техния списък, аз просто не ще, ние считаме, само основните, който ще дойде по-удобно е необходимо. Атрибути правят страница, дори и по-разбираеми семантика. Те се изясни значението на структурните елементи и тяхната роля:</p> <p>2.<main> - майстор информационен блок.</p> <p>3.<form> - един вид интерактивна форма.</p> <p>4.<button> - активен елемент, бутон.</p> <p>5.<search> - търсене в сайта.</p> <p>6.<banner> - лого и име на сайта, заглавието на страницата.</p> <p>7.<complementary> - допълнително блок, разделени от съдържанието на обекта.</p> <p>8.<contentinfo> - обобщаване на информация за обекта, обикновено в долната част на страницата.</p> <p>9.<navigation> - навигационното меню.</p> <p>10.<textbox> - поле за въвеждане на текст.</p> <p>Грубо казано, роботът ще даде приоритет на блок между тези тагове:</p> <p>И на практика игнорира:</p> <p>Това се постига най-добрата оптимизация на съдържанието на сайта, в съответствие с SEO изисквания. Роботът е бързо и правилно индекс на страниците, които се основават на този принцип. Да, и "четат" текст уебмастър удобно.</p> <p>Нека да преминем към писането страницата HTML.</p> <p>В резултат на това, ние получаваме нещо като този шаблон за страниците на сайта:</p> <p>Успехът в строителна площадка!</p> <p>Подобни публикации: Видове лога и стилове.<br> Любов и омраза в CSS<br> Ръчно сортиране публикации Ruxe двигателя<br> Аксиоматични CSS. Част 3: синтаксис.<br> Аксиоматични CSS. част 2<br></p> <h4>Свързани статии</h4> <ul> <li> <p><a href="/experts/szdavaneto-na-sajt-div-oformlenie-i-svrzvane-na.html">Създаването на сайт DIV оформление и свързване на CSS стилове</a></p> </li> </ul> </div> <div class="article-share clearfix"> <button class="article-share__print" type="button"> <span class="print-title">Отпечатайте това</span> </button> <div class="article-share__btns"> <div class="article-share__title">Подкрепете проекта - споделете линка, благодаря!</div> </div> </div> <style> # mc-container { подложка: 10px; } </style> <div class="comments-area"> <div id="mc-container"> <div id="mc-content"> </div> </div> </div> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> </div> </div> </article> <aside class="main-sidebar"> <div id="text-2"> <div class="textwidget"> <p> <br> <br> <br> <br> </p> </div> </div> <div class="main-block b-orange experts-block"> <div class="main-block__title">Отговорите на експертите <br />на вашите въпроси</div> <div class="main-block__expertlist"> <div class="expertlist-cart"> <a href="/expert/68"><img class="expertlist-cart__photo" src="/wp-content/uploads/2015/08/hrunina.jpg" alt="Кхунина Анна Викторовна"></a> <a href="/expert/68" class="expertlist-cart__name"><span>Кхунина Анна Викторовна</span></a> <span class="expertlist-cart__desc">Съветник по кърменето</span> </div> <div class="expertlist-cart"> <a href="/expert/17"><img class="expertlist-cart__photo" src="/wp-content/uploads/2015/06/bibikova-elena.jpg" alt="Бибикова Елена Анатолиевна"></a> <a href="/expert/17" class="expertlist-cart__name"><span>Бибикова Елена Анатолиевна</span></a> <span class="expertlist-cart__desc">Психолог на семейната система</span> </div> <div class="expertlist-cart"> <a href="/expert/100"><img class="expertlist-cart__photo" src="/wp-content/uploads/2016/02/aniva-200.jpg" alt="Анна Нива"></a> <a href="/expert/100" class="expertlist-cart__name"><span>Анна Нива</span></a> <span class="expertlist-cart__desc">Учител по детска йога</span> </div> <a href="/experts/" class="ui-btn">Задайте въпрос</a> <div class="expertlist-cart__answers"> <a href="/experts/" class="link">Вижте експертни отговори</a> </div> </div> </div> <div class="main-block b-border"> <div class="main-block__title"><span class="title-wrapper">Най-важното</span></div> <ul class="main-block__important"> <li class="important-item"><a href="/experts/kak-da-se-spravjat-s-sindrom-na-nespokojnite-kraka.html" class="important-link" role="link">Как да се справят с "синдром на неспокойните крака", здравословен начин на живот, здраве, аргументите и фактите,</a></li> <li class="important-item"><a href="/experts/kak-da-se-podgotvim-za-skaridi-gotvene.html" class="important-link" role="link">Как да се подготвим за скариди готвене</a></li> <li class="important-item"><a href="/journal/kak-da-se-podobri-zvuka-na-vashite-frazi.html" class="important-link" role="link">Как да се подобри звука на вашите фрази</a></li> <li class="important-item"><a href="/experts/kak-da-se-gotvi-pica-v-supermarketa.html" class="important-link" role="link">Как да се готви пица в супермаркета</a></li> <li class="important-item"><a href="/experts/kak-da-se-izmeri-zarjadnija-tok-telefon-smartfon-s.html" class="important-link" role="link">Как да се измери зарядния ток телефон, смартфон с Android</a></li> </ul></div> </aside> </main> <footer id="footer" class="page-padding clearfix" role="contentinfo"> <div class="footer-col"> <div class="footer-logo"> <a href="/" rel="nofollow" title="Към началната страница"><img class="footer-logo__img" src="/wp-content/themes/kids2015/img/ui/ui_logo-small.png" alt="test.test"></a> <span class="footer-logo__desc">Всичко за децата <br />от раждането до училището</span> </div> <p class="footer-copyright">&copy; 2013-2024. Портал за родителите "Всичко за децата".<br />Копирането на материали е разрешено само при посочване на активната хипервръзка към източника.</p> <div class="footer-counters"> <div class="footer-counters__item"> <!--LiveInternet counter--><script> new Image().src = "https://counter.yadro.ru/hit?r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";h"+escape(document.title.substring(0,150))+ ";"+Math.random();</script><!--/LiveInternet--> </div> </div> </div> <div class="footer-col"> <div class="footer-nav__header">информация</div> <ul class="footer-nav"> <li class="footer-nav__item"> <a href="/about/" role="link">За проекта</a> </li> <li class="footer-nav__item"> <a href="/privacy.html">Политика за поверителност</a> </li> <li class="footer-nav__item"> <a href="/sitemap/" role="link">Карта на сайта</a> </li> <li class="footer-nav__item"> <a href="/about/advertise/" class="red-text" role="link">Рекламно разположение</a> </li> </ul> </div> <div class="footer-col"> <!--noindex--> <div class="footer-subscribe"> </div> <div class="footer-recommend"> Моля, подкрепете проекта - разкажете ни за социалните мрежи! </div> <!--/noindex--> </div> </footer> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script> jQuery(function(f){ console.log(1); f('.advads-close-button').fadeOut(0); f(window).scroll(function(){ var element = f('#adv-scrool-4438ffc39d0'); var offset_element_for_hide = jQuery(document).height(); if(f(this).scrollTop() > 500){ setTimeout(function(f) {f('.advads-close-button').fadeIn(0);}, 10000, f); element.fadeIn(0); } if(f(this).scrollTop() < 500 || f(this).scrollTop() > offset_element_for_hide ){ element.fadeOut(0); } }); }); </script> <script>window.jQuery || document.write('<script src="/wp-content/themes/kids2015/js/libs/jquery-1.11.2.min.js"><\/script>')</script> <script src="http://code.jquery.com/jquery-migrate-1.4.0.js"></script> <script src="/wp-content/themes/kids2015/js/libs/jquery.magnific-popup.min.js"></script> <script src="/wp-content/themes/kids2015/js/libs/alertify.min.js"></script> <script src="/wp-content/themes/kids2015/js/work.js"></script> </section> <button id="scrollUp" type="button" title="Обратно горе"></button></div> </body> </html>