Базовые знания в html. Основы html для начинающих на понятном языке

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

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

В данном разделе размещены уроки по стандартам языка HTML 5 и CSS3, соответственно, если же будут какие либо более новые версии данных языков, они так же будут отражены в новых уроках этого раздела, и вы обязательно узнаете .



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

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

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

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

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

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

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

Работа с изображениями при создании с сайта, один из ключевых моментов, как при создании дизайна, также при простой верстке или написании каких либо материалов для вашего сайта.

CSS значительно расширяет возможности работы с любыми объектами html, в этом уроке я хотел бы вам подробно рассказать о тех параметрах которые можно применять к изображениям.

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

В этой статье я хочу подсказать вам, как наиболее быстро и эффективно изучить этот язык, чтобы уже через месяц-два вы отлично его знали. Думаете, невозможно? Я начал изучение html в конце марта. В конце мая я уже без проблем знал 90% нужных для работы тегов.

Как выучить язык бесплатно?

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

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

Интерактивные курсы

И тут я говорю об интерактивных курсах. Это возможность писать код и сразу видеть, как он отображается. На курсах вам будут давать задания. Сначала простые, например, превратить текст в заголовок или сделать таблицу. Потом – сложнее. В конце концов вы обретете понимание того, что можно делать с помощью HTML. Если вы думаете, что за это нужно платить, то ошибаетесь.

– это замечательный сайт с курсами по html и css. Первые 16-18 курсов бесплатно! Если вы захотите продолжить обучение и получить доступ к платным, то придется платить 300 рублей в месяц или 1800 в год. Лично я отдал 300 рублей, прошел за месяц все платные курсы и получил от этого много пользы.

Важность записей

Еще один совет от меня – записывайте! Записывайте всю новую и важную для вас инормацию. Не записав вы рискуете так и не закрепить в памяти нужные знания. Лично у меня на полке лежит три общих тетради, практически полностью исписанных и время от времени я заглядываю в них, когда забываю то или иное свойство.

Параллельное изучение html и css

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

Самостоятельная практика

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

Уроки от команды webformyself

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

В конце концов, у вас должна быть цель, по которой вы изучаете эти веб-технологии. Обычно это делают для того, чтобы научиться самостоятельно верстать макеты сайтов. Если у вас тоже есть такая цель, то отличным вариантом для вас будет приобретение доступа к премиум-урокам на сайте webformyself.com . В итоге вы можете получить не только доступ к урокам по HTML и CSS, но и много других. Например, по JavaScript и WordPress.

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

За сколько можно выучить языки?

В среднем, HTML и CSS можно выучить очень быстро, при правильном подходе. Например, у меня на это ушло несколько месяцев. Если знать, где брать знания, то процесс изучения можно ускорить в несколько раз.

Хорошие сайты с полезными материалами я вам дал – дальше ваше дело. В принципе, вышеперечисленные ресурсы являются наилучшими в интернете. Например, курсы от Htmlacademy прошли более ста тысяч человек, а на обновления Webformyself подписаны больше 87 тысяч людей.

Язык HTML по определению не может являться языком программирования, как ошибочно полагают многие неопытные в программировании люди. Язык HTML – это в принципе изначально неправильная формулировка. Называть его нужно языком разметки гипертекста, ведь HTML так и расшифровывается – HyperText Markup Language . А если выражаться тривиально, то HTML – это ряд тегов. Тег, в свою очередь, – управляющее слово, основное. Теги обеспечивают возможность придавать стандартным по виду текстам форматированный облик, то есть выделить курсивом, жирным шрифтом, подчеркнуть или сделать какое-либо другое действие. Однако сделать разные действия над текстами Вы сможете лишь в специализированных программах- браузерах, благодаря которым Вы собственно и путешествуете по глобальной сети World Wide Web. Эти программы показывают единый уже изменённый текст, а теги HTML, используемые для видоизменения, они прячут. Чтобы лучше со всем этим разобраться и скорее понять, о чём идёт речь, прямо на этой страничке нажмите на правую клавишу мыши и выберите в раскрывшемся меню точку «Исходный код» или нечто похожее по смыслу. Та же самая страница появится перед Вами в своём истинном облике.

Чтобы создать HTML-код можно применить стандартные текстовые редакторы, а также можно воспользоваться зрительными редакторами, их чаще называют визуальными. Главное различие этих видов редакторов в том, что визуальные специально созданы для набора HTML – кода, кодов JavaScript , CSS и PHP , а также и некоторых других, а именно для web-программирования. К тому же, такие редакторы дают Вам возможность немедля увидеть то, что Вами было сделано в программе и выявляют (показывают) совершённые помарки в напечатанном коде. Советуем набирать код непосредственно своими руками, а зрительные редакторы упростят Вашу работу. Вы можете пользоваться браузером Macromedia Dreamweaver 8 . Хоть эта программа и не из последних, однако её функциональности Вам будет вполне достаточно, и даже с излишком. Лучше всего сделать следующим образом: напечатайте код в программу Dreamweaver , далее сохраните и кликните клавишу «Просмотр в браузере», где комплект браузеров Вы сможете поменять самостоятельно. Вслед за этим перейдите обратно в Dreamweaver и возобновите процесс редактирования. В этом месте Вы увидите русификатор для Macromedia Dreamweaver 8. Итак, мы рассказали Вам про средства. Далее приступаем прямо к HTML – тегам.

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

Неизменные теги страницы в коде HTML:

, , , , ,

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

Наверняка Вы сразу заметили, что все теги парны относительно друг друга. Один тег вскрывающий, а другой затворяющий его. В коде HTML практически все теги парные. Различие между ними в том, что перед затворяющим тегом располагается косая линия /. Эти теги также именуются контейнерными по той причине, что возможно установить ещё и иные теги между данными, как бы определить в контейнер. Вы, возможно, уже видите сами, как среди тегов и располагаются и другие. Печатать названия тегов разрешено и заглавным, и прописным шрифтом, отличий здесь не будет. Такие записи, как и для программы никакой разницы иметь не будут, и истолковываются ею идентично.

Так что же такое неизменные теги для страницы в коде HTML? Рассмотрим этот вопрос более детально.

Открывающий тег и затворяющий его передают программам, предназначенным для визуализации гипертекстовых страниц, и иным браузерам сведения о том, что они работают именно с гипертекстовыми материалами. Каждый документ в html-коде всегда начинается с , а завершается . Это значит, что между этими двумя тегами размещён целый html-код.

Теги и заключают заглавие гипертекстового материала. Он содержит сведения о странице в html-коде. В принципе эти теги не обязательны, даже если их не будет, браузеры отлично интерпретируют Ваш html-материал. Однако решив и не писать заглавие в документе, всё-таки наберите . Такой ход необходим для сочетаемости в разных вариациях браузеров. Абсолютно каждый знак, располагающийся в данных тегах, никоим образом не расшифруется браузером. Сюда не относятся только лишь сведения в тегах </b> <b> , заключающих само название html-материала (название выносится в верхнюю область панели браузера). Однако это может воздействовать на общий облик html-документа, то, как она будет существовать в сети и классифицироваться по иерархии в поисковых системах. Детальнее о тегах, размещающихся в заглавии гипертекстового материала, будет изложено позднее.

Вся суть материала в коде html размещается в тегах и . На этом месте располагается совершенно всё, из чего состоит наш html-документ и что мы созерцаем при его разворачивании (графические образы, текстовые данные, кнопки и прочие элементы). Это и есть главный «корпус» страницы, или основа.

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

где – непосредственно сам тег, bgcolor – атрибут тега, «#FF0000» – смысл данного атрибута. Атрибутов у тега бывает некоторое количество.

И, таким образом, тон полностью всей страницы станет красным.

Обратите внимание здесь на тот факт, что атрибуты тега (все до единого) и их смысл ставятся во вскрывающем теге (он без косой черты), и никогда – в затворяющем.

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

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

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

Из чего состоит структура HTML-документа

Тег сообщает о том, что начинается структура html-документа, — что заканчивается. Между тегами хранится в большей части информация для браузера и поисковых систем. В тегах содержится заголовок нашей страницы. Тег говорит о том, что далее идёт информация предназначенная для пользователя, же естесственно говорит о том, что информация для пользователя заканчивается.

Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:


 — тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.

Мой первый сайт Привет всем!
А это мой первый сайт.

Результат можно посмотреть .

— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:

  • align — Определяет выравнивание линии. Может принимать значение left, center, right.
  • color — Задаёт цвет линии.
  • noshade — Рисует линию без трехмерных эффектов.
  • size — Задаёт толщину линии.
  • width — Задаёт ширину линии.

Код с использованием тега

:

Мой первый сайт Привет всем!

А это мой первый сайт.

Визуальный пример находится .

Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:

Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:

Cуществуют и другие одиночные теги (, ,
, , , ,

, , , , , , , , , ), но с ними я познакомлю вас чуть позже.

Теперь давайте поговорим о «закрывающихся» тегах. Само название «закрывающийся тег», говорит о том, что тег требует обязательного закрытия. Это сделано для того, чтобы чётко ограничить часть текста, на которую действует тег.

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

Мой первый сайт Привет всем! А это мой первый сайт.
Привет всем! А это мой первый сайт.

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

Теги для выделения текста

Существует несколько способов выделить текст на странице. Сделать это можно с помощью стилей, а можно с помощью тегов. Нас (пока) интересует второй вариант.

— устанавливает жирное начертание шрифта.

— устанавливает курсивное начертание шрифта.

— добавляет подчеркивание к тексту.

— предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

— перечёркивает текст. Данный тег исключён из HTML5 вместо него рекомендуется использовать

— отображает текст моноширинным текстом. Исключён из HTML5.

— отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

— отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

— предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

— уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Тег уменьшает текст на одну условную единицу. Допускается применение вложенных тегов , при этом размер шрифта будет меньше на 1 с каждым вложенным уровнем, но не может быть меньше, чем 1.

— увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега увеличивает текст на одну условную единицу. Допускается применение вложенных тегов , при этом размер шрифта будет больше с каждым уровнем.

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

— предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.


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

 — определяет текстовый абзац. Тег 
Является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.


..
..

 — HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег 
 представляет собой наиболее важный заголовок первого уровня, а тег 
 служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги 
,…,
 относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Тег имеет атрибут align
, который определяет выравнивание заголовка, может принимать значения left
 — выравнивание заголовка по левому краю, center
 — выравнивание по центру, right
— выравнивание по правому краю, justify
— выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.



 — представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Тег имеет 3 атрибута: color
 — устанавливает цвет текста, face
 — определяет гарнитуру шрифта, size
 — задает размер шрифта в условных единицах.



 — помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера  курсивом.



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


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


Ниже приведу код, в котором я использовал все эти теги:

 

Мой первый сайт



HTML and CSS are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications. Learn more below about: 


What is HTML?


 HTML is the language for describing the structure of Web pages. HTML gives authors the means to:



 Publish online documents with headings, text, tables, lists, photos, etc.

 Retrieve online information via hypertext links, at the click of a button.

 Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc. 

 Include spread-sheets, video clips, sound clips, and other applications directly in their documents. 



 With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.

What is XHTML?


XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).


What is CSS?


CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup язык language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation. 


What is WebFonts?

WebFonts is a technology that enables people to use fonts on demand over the Web without requiring installation in the operating system. W3C has experience in downloadable fonts through HTML, CSS2, and SVG. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. The WebFonts effort plans to address that through the creation of an industry-supported, open font format for the Web (called "WOFF").



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


При написании данной статьи описание некоторых тегов было взято отсюда


Всем привет! Сегодня провел утро в объяснениях «на пальцах», как ручками прописывать текстовые ссылки и ссылки изображения. Думаю, что начальные знания HTML никому не помешают, поэтому кратенько изложу основную суть HTML. Чтобы, так сказать, начинающие SEO оптимизаторы и блогеры имели представление об этом языке и о том, как построены страницы.


Что такое HTML?


HTML расшифровывается, как язык гипертекстовой разметки. Это компьютерный язык, используемый для создания документов в интернете. Эти документы представляют собой текстовые файлы, содержащие ваш контент (текст, изображения, видео и т.д.) и HTML теги, используемые для структурирования этого содержимого. Браузеры читают страницу, а HTML и HTML-теги говорят им, что и как показать. HTML-теги не отображаются в браузере. Все теги начинаются с левой стороны значком меньше «<» и заканчиваются значком больше «>» . Чтобы построить базовую HTML страницу вам потребуется текстовый редактор Notepad++ (на мой взгляд лучший) либо любой простой текстовый редактор на выбор TextEdit, TextWrangler, SimpleText, TextPad или даже Блокнот. Так же существуют специализированные программы, которые упрощают жизнь вебмастерам, такие как Adobe Dreamweaver, но это не обязательно. Не используйте Microsoft Word! HTML не чувствительны к регистру.


Подробнее о HTML-тегах


Есть два вида тегов: контейнерные и пустые.



  • Контейнерный тег «оборачивает» текст или изображение и должен состоять из открывающего и закрывающего тега, такие как  …  . Закрывающий тег имеет косую черту / говоря браузеру, что тег закончился.
    • 

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

Как создать страницу HTML


Чтобы с чего-нибудь начать, предлагаю взглянуть на очень простой шаблон HTML.



 

  

  Название сайта либо страницы </ title> <br>
 </ head> <br>
 <body> <br>
 Основной контент страницы <br>
 </ body> <br>
 </ html></p>
<p>Обратите внимание на то, что когда мы открываем тег, мы должны <b>обязательно
</b> закрыть его. <a href="/programma-dlya-otkrytiya-dokumentov-html-chem-otkryt-fail-html-kak-otkryt-fail-html/">HTML документ</a>ы делятся на две основные части — голова (head) и тело (body). <html> тег сообщает браузеру, что это HTML документ. <head> тег включает в себя информацию о документе, такую ​​как:</p>
<ul><li>заголовок страницы — тег <title> , который появляется в браузерах, в названии вкладки</li>
<li>тег автора — <author></li>
<li>тег ключевых слов — <keywords></li>
<li>тег описания — <description>и т.д.</li>
</ul><p>Здесь же подключаются файлы стилей (CSS)? но это уже для более продвинутых товарищей. Наконец, тег <body>, который содержит весь контент страницы сайта: текст, изображения, графики, и т.д.</p>
<h2>Создание первой HTML страницы</h2>
<p>Откройте текстовый редактор и вставьте следующий код в новый документ:</p>
<p><html> <br>
 <head> <br>
 <title> Моя первая веб страница </ title> <br>
 </ head> <br>
 <body> <br>
 Обучение HTML<br>
Здравствуйте!<br>
Это моя первая веб-страница.<br>
Я учусь основам HTML и тегам заголовков<br>
HTML ОСНОВЫ</p><p>
 </ body> <br>
 </ html></p>
<p>Должно выглядеть вот таким образом:</p>
<p>Сохраните файл как example.html на рабочий стол. Откройте файл в веб-браузере, чтобы увидеть, как он преобразует теги. Это будет выглядеть довольно скучно, на <a href="/etapy-proektirovaniya-bazy-dannyh-sozdanie-bd-etapy-proektirovaniya/">данном этапе</a>, но это только начало.</p>
<p>Можно немного и приукрасить:).</p>
<h2>Форматирование текста</h2>
<p>Мы можем добавлять теги к тексту, чтобы добавить ему больше структуры. На первом этапе выделим заголовки, абзацы, разрывы строк и <a href="/kak-sdelat-tolstuyu-liniyu-v-html-gorizontalnye-linii/">горизонтальную линию</a>, но обо всем по порядку.</p>
<h3>Рубрики</h3>
<p>Есть 6 уровней заголовков в HTML, они определяют уровень важности. Например на блоге, ваше название статьи может быть h1 тегом, в то время, как названия абзацев вашего поста могут быть h2 или h3 тегами. Например:</p>
<p><h1> Заголовок h1 </h1> <br>
 <h2> Заголовок h2 </h2> <br>
 <h3> Заголовок h3 </h3></p>
<h3>Пункты</h3>
<p>Для отдельных участков текста можно использовать <p>Тег для добавления пробела между параграфами.</p>
<p><p>Параграф </p></p>
<h3>Разрыв строк</h3>
<p>Чтобы добавить один разрыв строки используем пустой тег <br>, то есть его не надо закрывать /. Это создает пустую строку и отправляет следующий код на следующую строку.</p>
<h3>Горизонтальная линия</h3>
<p>Чтобы создать горизонтальную линию поперек вашей странице мы используем тег
</span> <span><hr>.

</p>
<h2>Как добавить форматирование текста на страницу?</h2>
<p>Откройте example.html в <a href="/kak-otkryt-fail-tekstovym-redaktorom-kak-otkryt-tekstovye/">текстовом редакторе</a> снова и добавляйте форматирование текста следующим образом:</p>
<p><img src='https://i1.wp.com/promotiger.ru/wp-content/uploads/2014/05/my_html_pages_1.png' align="center" width="100%" loading=lazy></p>
<p>В результате этих телодвижений получаем следующее:</p>
<p><img src='https://i2.wp.com/promotiger.ru/wp-content/uploads/2014/05/my_html_1.png' align="center" width="100%" loading=lazy></p>
<p>Уже приятнее глазу.</p>
<p>Вот абсолютные основы HTML и, вероятно, самая скучная часть!
</span><span>Я планирую в будущих постах немного развить данную тему, т.к. любому SEO специалисту в конце-концов приходится сталкиваться с основами HTML.
</p>

<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;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()+
	"border='0' width='1' height='1' loading=lazy>");</script>

                        </div>
                    </article>



                    <div class="related-posts">
                        <h3 class="title text-uppercase text-center">Еще на эту тему:</h3>
                        <div class="row">
                                                             <div class="post article-wrp with-border col-sm-6 col-md-4">
                                    <div class="article-in-loop">
                                        <a class="thumb-title" href="/top-programm-dlya-udaleniya-draiverov-skachat-driver-sweeper/">
                                            
                                            <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
						<span class="embed-responsive-item">
							<span class="super-wrp">
								<span class="span-table">
									<span class="span-table-row">
										<span class="span-table-row-cell">
																						<img src="https://i2.wp.com/pc-assistent.ru/wp-content/uploads/2017/06/driver_sweeper_200x175.png" class="img-responsive" alt="Скачать Driver Sweeper – программа для удаления драйверов из OC Windows Скачать программу для удаления драйверов карты" loading=lazy>
										</span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            

                                            <span class="date">
						
                </span>
                                            <span class="title">
						Скачать Driver Sweeper – программа для удаления драйверов из OC Windows Скачать программу для удаления драйверов карты					</span>
                                        </a>
                                    </div>
                                </div>
                                                             <div class="post article-wrp with-border col-sm-6 col-md-4">
                                    <div class="article-in-loop">
                                        <a class="thumb-title" href="/vykidyvaet-na-rabochii-stol-sniper-elite-v2-vykidyvaet-na-rabochii-stol-sniper-elite-v2-chto/">
                                            
                                            <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
						<span class="embed-responsive-item">
							<span class="super-wrp">
								<span class="span-table">
									<span class="span-table-row">
										<span class="span-table-row-cell">
																						<img src="https://i2.wp.com/i.rutab.net/upload/tech_issues/audio_check.png" class="img-responsive" alt="Выкидывает на рабочий стол Sniper Elite V2 Что делать если лагает sniper elite 3" loading=lazy>
										</span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            

                                            <span class="date">
						
                </span>
                                            <span class="title">
						Выкидывает на рабочий стол Sniper Elite V2 Что делать если лагает sniper elite 3					</span>
                                        </a>
                                    </div>
                                </div>
                                                             <div class="post article-wrp with-border col-sm-6 col-md-4">
                                    <div class="article-in-loop">
                                        <a class="thumb-title" href="/kak-naiti-kartinu-po-fotografii-poisk-pohozhei-fotografii-v-internet-poisk/">
                                            
                                            <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
						<span class="embed-responsive-item">
							<span class="super-wrp">
								<span class="span-table">
									<span class="span-table-row">
										<span class="span-table-row-cell">
																						<img src="https://i2.wp.com/kompukter.ru/wp-content/uploads/2018/03/klikaem-po-znachku-foto-v-gugl.png" class="img-responsive" alt="Поиск похожей фотографии в интернет" loading=lazy>
										</span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            
                                            </span>
                                            

                                            <span class="date">
						
                </span>
                                            <span class="title">
						Поиск похожей фотографии в интернет					</span>
                                        </a>
                                    </div>
                                </div>
                            
                            

                            

                            
                        </div>
                        
                    </div>



                 

                </div>
                



                <aside id="sidebar" class="col-sm-4 col-sidebar hidden-xs" role="complementary">
                    <div class="content-menu bs-docs-sidebar">
                        <div class="progress-right" id="progress-right">0%</div>
                        <script>
                            window.onscroll = function() {
                                var scrolled = window.pageYOffset || document.documentElement.scrollTop;
                                var scrollprogress = Math.round(scrolled / ((document.documentElement.scrollHeight - document.documentElement.clientHeight) / 100));
                                document.getElementById('progress-right').innerHTML = scrollprogress + '%';
                            }
                        </script>



                        <div class="ad clearfix text-center">
                            

                        </div>
                        
                    </div>
                    


                    <script>
                        /**
                         * Скрипт закріплення блоку при прокрутці
                         */
                        (function() {
                            var a = document.querySelector('#sidebar'),
                                b = null,
                                P = 0;
                            window.addEventListener('scroll', Ascroll, false);
                            document.body.addEventListener('scroll', Ascroll, false);

                            function Ascroll() {
                                if (b == null) {
                                    var Sa = getComputedStyle(a, ''),
                                        s = '';
                                    for (var i = 0; i < Sa.length; i++) {
                                        if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
                                            s += Sa[i] + ': ' + Sa.getPropertyValue(Sa[i]) + '; '
                                        }
                                    }
                                    b = document.createElement('div');
                                    b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
                                    a.insertBefore(b, a.firstChild);
                                    var l = a.childNodes.length;
                                    for (var i = 1; i < l; i++) {
                                        b.appendChild(a.childNodes[1]);
                                    }
                                    a.style.height = b.getBoundingClientRect().height + 'px';
                                    a.style.padding = '0';
                                    a.style.border = '0';
                                }
                                var Ra = a.getBoundingClientRect(),
                                    R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('#content').getBoundingClientRect().bottom); // селектор блока, при достижении нижнего края которого нужно открепить прилипающий элемент
                                if ((Ra.top - P) <= 0) {
                                    if ((Ra.top - P) <= R) {
                                        b.className = 'stop';
                                        b.style.top = -R + 'px';
                                    } else {
                                        b.className = 'evr-sticky';
                                        b.style.top = P + 'px';
                                    }
                                } else {
                                    b.className = '';
                                    b.style.top = '';
                                }
                                window.addEventListener('resize', function() {
                                    a.children[0].style.width = getComputedStyle(a, '').width
                                }, false);
                            }
                        })()
                    </script>


                    <style>
                        /* Додаємо відступ вгорі, щоб було на одному рівні із змістом */

                        body.single #breadcrumbs {
                            margin-bottom: 5px;
                        }

                        #content article {
                            padding-top: 15px;
                        }

                        #sidebar .evr-sticky {
                            position: fixed;
                            z-index: 101;
                        }

                        #sidebar .stop {
                            position: relative;
                            z-index: 101;
                        }

                        #div-gpt-ad-30906309 {
                            margin-top: 20px;
                        }

                        #sidebar .evr-sticky #div-gpt-ad-30906309,
                        #sidebar .stop #div-gpt-ad-30906309 {
                            margin-top: 20px;
                        }

                        #sidebar .content-menu {
                            transition: 0.5s all;
                        }

                        #sidebar .content-menu .title {
                            padding-top: 15px;
                            font-size: 20px;
                            margin: 0 0 15px 0;
                        }

                        #sidebar .content-menu .title .glyphicon {
                            padding-right: 5px;
                        }

                        #sidebar .content-menu ul {
                            padding: 0;
                            margin: 0;
                            overflow: auto;
                        }

                        #sidebar .content-menu .nav li {
                            margin: 0;
                            clear: both;
                            margin-bottom: 4px;
                        }
                        /* Bullet before text */

                        #sidebar .content-menu .nav li a:before {
                            content: "●";
                            position: absolute;
                            font-size: 17px;
                            color: #dedede;
                            left: 0;
                            top: -1px;
                        }

                        #sidebar .content-menu .nav li a {
                            position: relative;
                            display: inline-block;
                            font-size: 15px;
                            color: #000;
                            line-height: 1.2;
                            padding: 3px 0 0 18px;
                            overflow: hidden;
                            text-decoration: none !important;
                        }

                        #sidebar .content-menu .nav li.active:focus>a,
                        #sidebar .content-menu .nav li.active:hover>a,
                        #sidebar .content-menu .nav li.active>a,
                        #sidebar .content-menu .nav li a:hover {
                            text-decoration: none;
                            font-weight: normal;
                            color: #c23085;
                            background-color: transparent;
                            border-left: 0 none;
                        }
                        /* Bullet before text */

                        #sidebar .content-menu .nav li.active>a:hover:before,
                        #sidebar .content-menu .nav li.active>a:before {
                            -moz-transform: scale(1.3);
                            -webkit-transform: scale(1.3);
                            transform: scale(1.3);
                            left: 1px;
                            color: #c23085;
                            background: transparent;
                        }

                        #sidebar .content-menu .nav li a:hover:before {
                            color: #c23085;
                            background: transparent;
                        }

                        #sidebar a.go-top {
                            display: block;
                            margin-top: 5px;
                            padding: 14px 0 5px 0;
                            text-align: center;
                            text-transform: lowercase;
                            font-size: 17px;
                            color: #666;
                            background: transparent url(/wp-content/themes/sk-Evrikak/i/go-top-in-sidebar.png) no-repeat 50% 50%;
                            opacity: 0;
                            transition: 0.2s all;
                        }

                        #sidebar a.go-top:hover {
                            color: #000;
                            text-decoration: none;
                        }
                        /* Якщо блок зафіксовний */

                        #sidebar .evr-sticky a.go-top {
                            opacity: 1;
                        }

                        #sidebar .evr-sticky {
                            box-shadow: -9px 0 10px 0 rgba(0, 0, 0, 0.08) !important;
                        }
                    </style>
                    <script>
                        jQuery(document).ready(function() {
                            // (c) http://jsfiddle.net/gableroux/S2SMK/
                            // підсвітка активного пункту меню, bootstrap
                            jQuery('body').scrollspy({
                                target: '.bs-docs-sidebar',
                                offset: 70
                            });


                            // даємо висоту меню, щоб зробити прокрутку
                            jQuery(window).bind("load resize", function() {
                                var body_w = jQuery("body").width(); // визначаємо ширину вікна

                                var window_h = jQuery(window).height(); // визначаємо висоту вікна
                                //alert(window_h);

                                if (body_w > '767') { // якщо ширина більша 767
                                    window_h = window_h - 375; // коригуємо висоту блоку з меню. віднімаємо висоту блоку «наверх», у  перспективі треба буще ще відняти інші-нові блоки
                                    var menu_h = jQuery('#sidebar .content-menu').height();
                                    //if(menu_h > window_h) { // якщо висота усього сайдбару більше висоти екрану, то вказуємо висоту для меню. Воно автоматично розтягне висоту сайдбару, з’явиться прорутка у меню, і сайдбар займе усю висоту вікна
                                    jQuery('#sidebar .content-menu ul.nav').css('height', window_h);
                                    //} 
                                }
                            });

                            // парсимо контент і формуємо меню
                            jQuery('#content .evr-section').each(function() {
                                var evr_section_id = jQuery(this).attr('id');
                                var evr_section_title = jQuery(this).find(':header:first').text();
                                var txt = '<li class="content-menu-item added-by-js"><a href="#' + evr_section_id + '">' + evr_section_title + '</a></li>';
                                //var txt = txt.unwrap();

                                //txt = jQuery('li', txt).unwrap;

                                //txt = txt.unwrap('h3');
                                //txt = jQuery(txt).wrap('<li>');
                                jQuery('#sidebar ul.nav').append(txt); // Insert
                            });

                            // Додаємо спеціальний клас для посилання на відео
                            jQuery('#sidebar .content-menu').find("a[href='#entry-video']").addClass('link-to-video');



                            // навігація по статті (плавна прокрутка до потрібного блоку)
                            jQuery('#sidebar .content-menu  .nav a').click(function() {
                                jQuery.scrollTo(this.hash, {
                                    offset: -10, // Відступ вгорі
                                    duration: 750
                                });
                                return false;
                            });


                            // перейти вгору (плавна прокрутка вгору)
                            jQuery('#sidebar a.go-top').click(function() {
                                jQuery.scrollTo(this.hash, {
                                    offset: 0, // Відступ вгорі
                                    duration: 450
                                });
                                return false;
                            });

                        });
                    </script>



                    
                    <link type="text/css" href="/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.jscrollpane.css" rel="stylesheet" media="all" />
                    
                    <script type="text/javascript" src="https://battlecase.ru/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.mousewheel.js"></script>
                    
                    <script type="text/javascript" src="https://battlecase.ru/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.jscrollpane.min.js"></script>

                    <script>
                        // Прокрутка оновлюється при зміні висоти вікна
                        jQuery(function() {
                            jQuery('#sidebar .content-menu ul.nav').each(
                                function() {
                                    jQuery(this).jScrollPane({
                                        showArrows: jQuery(this).is('.arrow')
                                    });
                                    var api = jQuery(this).data('jsp');
                                    var throttleTimeout;
                                    jQuery(window).bind("load resize", function() {
                                        // IE fires multiple resize events while you are dragging the browser window which
                                        // causes it to crash if you try to update the scrollpane on every one. So we need
                                        // to throttle it to fire a maximum of once every 50 milliseconds...
                                        if (!throttleTimeout) {
                                            throttleTimeout = setTimeout(
                                                function() {
                                                    api.reinitialise();
                                                    throttleTimeout = null;
                                                },
                                                50
                                            );
                                        }
                                    });
                                }
                            )

                        });
                    </script>
                    <style>
                        /* Styles specific to this particular page */

                        .scroll-pane {
                            overflow: auto;
                            height: 400px;
                        }

                        .jspTrack {
                            background: #dedede;
                        }

                        .jspVerticalBar {
                            width: 6px;
                        }

                        .jspDrag {
                            background: #309dc6;
                        }
                    </style>


                </aside>
                
            </div>
            
        </div>
        


        <div class="other-posts">
            <div class="container">
                <h3 class="title text-uppercase text-center h">Другие статьи:</h3>

                <div class="row articles">

                                             <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
                            <div class="article-in-loop">
                                <a class="thumb-title" href="/samyi-moshchnyi-telefon-v-mire-na-dannyi-moment-samye-moshchnye-smartfony-top-10/">
                                    
                                    <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
								<span class="embed-responsive-item">
									<span class="super-wrp">
										<span class="span-table">
											<span class="span-table-row">
												<span class="span-table-row-cell">
																										<img src="https://i1.wp.com/technosova.ru/wp-content/uploads/2018/10/2-2.jpg" class="img-responsive" alt="Самые мощные смартфоны Топ 10 самых мощных телефонов" loading=lazy>
																										

                </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    

                                    <span class="date">
								Самые мощные смартфоны Топ 10 самых мощных телефонов							</span>
                                    <span class="title">
								Современные технологии позволяют уместить в обычном смартфоне мощность и производительность...							</span>
                                </a>
                            </div>
                        </div>
                                             <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
                            <div class="article-in-loop">
                                <a class="thumb-title" href="/kak-udalitsya-iz-moego-mira-kak-udalit-stranicu-i-akkaunt-v-moem-mire/">
                                    
                                    <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
								<span class="embed-responsive-item">
									<span class="super-wrp">
										<span class="span-table">
											<span class="span-table-row">
												<span class="span-table-row-cell">
																										<img src="https://i1.wp.com/socialnie-seti.info/wp-content/uploads/2012/09/galochki-dlya-ydaleniya-stranici.jpg" class="img-responsive" alt="Как удалить страницу и аккаунт в моем мире" loading=lazy>
																										

                </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    

                                    <span class="date">
								Как удалить страницу и аккаунт в моем мире							</span>
                                    <span class="title">
								Бывает так, что человек пройдя регистрацию понимает, что эта социальная сеть не для него и хочет...							</span>
                                </a>
                            </div>
                        </div>
                                             <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
                            <div class="article-in-loop">
                                <a class="thumb-title" href="/ne-udalyaetsya-avast-chto-delat-kak-udalit-avast-s-kompyutera-esli-on-ne/">
                                    
                                    <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
								<span class="embed-responsive-item">
									<span class="super-wrp">
										<span class="span-table">
											<span class="span-table-row">
												<span class="span-table-row-cell">
																										<img src="https://i2.wp.com/vellisa.ru/wp-content/uploads/2018/05/2-1.jpg" class="img-responsive" alt="Как удалить аваст с компьютера если он не удаляется" loading=lazy>
																										

                </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    

                                    <span class="date">
								Как удалить аваст с компьютера если он не удаляется							</span>
                                    <span class="title">
								Сейчас мы разберем, как удалить Аваст, чтобы после деинсталляции антивируса, на компьютере не...							</span>
                                </a>
                            </div>
                        </div>
                                             <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3">
                            <div class="article-in-loop">
                                <a class="thumb-title" href="/kak-podklyuchit-nokia-lyumiya-800-k-kompyuteru-podklyuchenie-nokia-lumia-k/">
                                    
                                    <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb">
								<span class="embed-responsive-item">
									<span class="super-wrp">
										<span class="span-table">
											<span class="span-table-row">
												<span class="span-table-row-cell">
																										<img src="https://i2.wp.com/sms-mms-free.ru/sites/default/files/images/Specifications_Nokia_800_Zune.jpg" class="img-responsive" alt="Подключение Nokia Lumia к ПК" loading=lazy>
																										

                </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    
                                    </span>
                                    

                                    <span class="date">
								Подключение Nokia Lumia к ПК							</span>
                                    <span class="title">
								Статьи и Лайфхаки
 впервые могло разочаровать всех, кто недавно приобрёл данное мобильное...							</span>
                                </a>
                            </div>
                        </div>
                    
                    

                    

                    

                    

                </div>
                
            </div>
            
        </div>
        

        <style>
            /* Додаємо відступ внизу */

            body.single #content .ad {
                margin-bottom: 20px;
            }
            /* Додаємо відступ вгорі */

            body.single #sidebar .ad {
                margin-top: 20px;
            }
        </style>

        <footer id="footer" class="clearfix">
            <noindex>
                <div class="container row-1 hidden-xs">
                    <nav class="nav">
                        <div class="menu menu-footer">
                            <ul id="menu-podval" class="menu">
                                <li class="menu-item type-custom object-custom home "><a href="/">Главная</a></li>
                                <li class="menu-item type-post_type object-page "><a href="">О проекте</a></li>
                                <li class="menu-item type-post_type object-page "><a href="">Рекламодателям</a></li>
                                <li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайта</a></li>
                                <li class="menu-item type-post_type object-page "><a href="/feedback/">Обратная связь</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
                

                <div class="border-blue clearfix"></div>

                <div class="container row-2">
                    <div class="row">
                        <div class="col-sm-6">
                            <div id="text-2" class="block widget-container widget_text">
                                <div class="textwidget">
                                    <div class="sn">
                                        <a href="https://www.facebook.com/sharer/sharer.php?u=https://battlecase.ru/bazovye-znaniya-v-html-osnovy-html-dlya-nachinayushchih-na-ponyatnom-yazyke/"  target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/facebook.png" alt="" class="img-responsive" loading=lazy></a>
                                        <a href="https://vk.com/share.php?url=https://battlecase.ru/bazovye-znaniya-v-html-osnovy-html-dlya-nachinayushchih-na-ponyatnom-yazyke/"  target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/vkontakte.png" alt="" class="img-responsive" loading=lazy></a>
                                        <a href="https://youtube.com/"  target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/youtube.png" alt="" class="img-responsive" loading=lazy></a>
                                    </div>
                                    <style>
                                        .sn a {
                                            display: inline-block;
                                            margin: 0 10px 0 0;
                                            width: 55px;
                                        }

                                        @media (max-width:767px) {
                                            .sn {
                                                text-align: center;
                                            }
                                            .sn a {
                                                margin: 0 7px;
                                                width: 43px;
                                            }
                                        }

                                        .sn a:hover {
                                            opacity: 0.9;
                                        }
                                    </style>
                                </div>
                            </div>
                        </div>

                    </div>
                    
                </div>
                

                <div class="border-3 clearfix"></div>

                <div class="container row-3">
                    <div class="row">
                        <div class="col-sm-8 col-txt col-txt-1">
                            Размещенные на сайте материалы, могут содержать информацию для пользователей старше 18 лет. </div>

                        <div class="col-sm-4 col-txt col-txt-2 text-right">
                            <div class="project-by-um">
                                © 2012 - 2018 <img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/svg/logo-ukr-media.svg" width="90" class="img-responsive" loading=lazy>
                            </div>
                            
                        </div>
                    </div>
                    
                </div>
                
            </noindex>
        </footer>
        
    </div>
    



    
    <div class="modal fade" id="modal-search" tabindex="-1" role="dialog" aria-labelledby="modal-searchLabel">
        <div class="modal-dialog modal-lg itc-container" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="modal-searchLabel">Поиск по сайту</h4>
                </div>
                <div class="modal-body">
                    <form role="search" method="get" class="form-search" id="modal-searchform" action="/">
                        <div class="form-group">
                            <input type="search" autocomplete="off" spellcheck="false" placeholder="Введите текст поиска" value="" name="s" id="modal-s" class="input-lg form-control">
                        </div>
                    </form>

                    <div class="modal-search-results"></div>
                </div>
            </div>
        </div>
    </div>
    <link rel='stylesheet' id='dashicons-css' href='/wp-includes/css/dashicons.min.css?ver=4.9.1' type='text/css' media='all' />
    <link rel='stylesheet' id='thickbox-css' href='/wp-includes/js/thickbox/thickbox.css?ver=4.9.1' type='text/css' media='all' />

    <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/decomments/templates/decomments/assets/js/decom.min.js?ver=1513648647'></script>
    <script type='text/javascript' src='https://battlecase.ru/wp-content/themes/sk-Evrikak/js/modernizr-2.8.3.min.js?ver=4.9.1'></script>
    <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/visualizer/js/lib/clipboardjs/clipboard.min.js?ver=3.0.4'></script>

    <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script>
    <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/lazy-load/js/jquery.sonar.min.js?ver=0.6.1'></script>
    <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/lazy-load/js/lazy-load.js?ver=0.6.1'></script>
    <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script>
    <script type='text/javascript'>
        /* <![CDATA[ */
        var thickboxL10n = {
            "next": "\u0414\u0430\u043b\u0435\u0435 \u2192",
            "prev": "\u2190 \u041d\u0430\u0437\u0430\u0434",
            "image": "\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435",
            "of": "\u0438\u0437",
            "close": "\u0417\u0430\u043a\u0440\u044b\u0442\u044c",
            "noiframes": "\u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u043e\u0432. \u0423 \u0432\u0430\u0441 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0442\u0435\u0433\u0438 iframe, \u043b\u0438\u0431\u043e \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0445 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442.",
            "loadingAnimation": "http:\/\/battlecase.ru\/wp-includes\/js\/thickbox\/loadingAnimation.gif"
        };
        /* ]]> */
    </script>
    <script type='text/javascript' src='/wp-includes/js/thickbox/thickbox.js?ver=3.1-20121105'></script>
    <div id="mmenu_res" style="display:none;width:100%;height:40px;line-height:40px;background:#FD6A93;color:#FFFFFF;position:fixed;text-align:center;font-size:23px;;z-index:100000000">
        <a class="mmenu_open" href="#irevoltmenu">

<span class="mmenu-icon-bar"></span>
<span class="mmenu-icon-bar"></span>
<span class="mmenu-icon-bar"></span>
</a> Рубрики

    </div>



    

    

    
    <div class="modal fade" id="modalAd" tabindex="-1" role="dialog" aria-labelledby="modalAdLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                
                <div class="modal-body">
                    <div class="ad text-center">

                    </div>
                    
                </div>
                
            </div>
            
        </div>
        
    </div>
    





    <link rel="stylesheet" href="/wp-content/themes/sk-Evrikak/ad/ad_popup-and-bottom/show-ads.css">
    <script src="/assets/jquery1.cookie1.js"></script>
    <script src="https://battlecase.ru/wp-content/themes/sk-Evrikak/ad/ad_popup-and-bottom/show-ads.js"></script>
</body>

</html>