Шпаргалки для начинающего верстальщика HTML/CSS - страница 2

Шрифт

Интервал

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

Далее с практикой вы будете верстать все более сложные макеты и лучше ориентироваться какие свойства и параметры вам следует в том или ином случае написать.

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

Создаем каркас сайта

Общая универсальная структура нашей страницы

Страница сайта является обычным текстовым файлом, расширение которого. html.

Как его создать? Можно открыть Блокнот через панель Пуск на компьютере и нажать во вкладке Файл – Сохранить как…

Сохранить мы должны данный файл как index.html.

Аналогично в нашу папку с названием проекта мы должны положить файл для CSS, его мы должны назвать style. css.

Внутри данного файла и хранится текст HTML-страницы. Он должен обязательно иметь такие теги как:

– тег , который содержит в себе текст всего сайта (все, что написано вне его, браузер будет проигнорировать)

– внутри должен обязательно быть тег , в нем отражается служебное содержимое страницы

– также внутри должен обязательно быть тег , в нем отражен основной текст, который и виден на экране браузера.

В теге должны быть тег , он задает название страницы, в браузере, тег <meta>, задающий кодировку страницы (в атрибуте charset, как правило, это значение utf-8).</p><p>Также перед тегом <html> пишется конструкция doctype, она указывает на версию языка HTML, на которой сделан сайт. В настоящее время актуальна версия, которую выражает <!DOCTYPE html>.</p><p>Структура любой страницы имеет общую структуру, которая в целом выглядит так:</p><div class="cite"><p><!DOCTYPE html></p><p><html lang=«en»></p><p><head></p><p><meta charset=«UTF-8»></p></div></div></div>  <div id="yandex_rtb_R-A-11995824-7" class="fspot"><div class="finnerspot"></div></div> <script> window.yaContextCb.push(() => { Ya.Context.AdvManager.render({ "blockId": "R-A-11995824-7", "renderTo": "yandex_rtb_R-A-11995824-7" }) }) </script> <div class="show-more show-more_reader text-center mt-4"> <a class="btn btn-primary" href="/see/64197125-shpargalki-dlya-nachinayushchego-verstalshchika?page=3" > Следующая страница </a> </div> </section> <hr class="w-100"> <section> <div class="pagination-container"> <nav> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="/work/64197125-shpargalki-dlya-nachinayushchego-verstalshchika#tx">1</a> </li> <li class="page-item active"> <span class="page-link">2</span> </li> <li class="page-item"> <a class="page-link" href="/see/64197125-shpargalki-dlya-nachinayushchego-verstalshchika?page=3#tx">3</a> </li> <li class="page-item"> <a class="page-link" href="/see/64197125-shpargalki-dlya-nachinayushchego-verstalshchika?page=4#tx">4</a> </li> <li class="page-item disabled"> <span class="page-link">…</span> </li> </ul> </nav> </div> </section> <hr class="w-100"> </div> </main> </div> </div> </div> <script src="/build/runtime.5332280c.js" defer></script><script src="/build/site.3d80c86c.js" defer></script>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.webvisor.org/metrika/tag_ww.js", "ym"); ym(97886539, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script>  </div> </body> </html>