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

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

Теги – определенная именованная метка состоящая из символов латинского алфавита, заключенная в угловые скобки (к примеру ). Тег – основной элемент HTML документа. Их заполнение должно осуществляться в нижнем регистре, то есть вместо < TITLE > должно быть < title > .

Виды тегов html

Существует два типа тегов – одиночные и парные (контейнеры). Последние являются более распространенными. Все что включено между открывающимся <> и закрывающимся тегом называют содержимым контейнера. Как можно заметить внутри закрывающегося тега обязательно нужно ставить слеш, т.е. косую черту «/», находящуюся сразу же после первой угловой скобки. Действие тегов распространяется на заключенную между ними информацию.

Одиночные теги (метки ) как можно догадаться состоят из одного html элемента – открывающегося тега (например ).

В независимости от вида каждый тег состоит из следующих элементов:

Открывающаяся угловая скобка (< ).

Имя тега (p , body , br ).

Закрывающаяся угловая скобка (> ).

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

Основные теги html

Стандартизированный язык разметки гипертекста включает в себя предостаточно используемых HTML-тегов. Давайте остановимся на самых важных из них.

Основные парные теги html

- < html > - сообщает браузеру о том, что перед ним находится HTML документ.

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

- < body > - определяет видимую часть документа.

- </b> - отвечает за отображение и название документа.</p> <p>- <b>< </b><b>table </b><b>>, < </b><b>tbody </b><b>>, < </b><b>thead </b><b>>, < </b><b>td </b><b>>, < </b><b>th </b><b>> и < </b><b>tr </b><b>> - </b>теги, относящиеся к созданию таблиц.</p> <p>- <b><p> </b>- закрытие данного тега сообщает браузерам о том, что текст отображается с <a href="/kak-sdelat-perehod-na-druguyu-stroku-kak-pereiti-na-novuyu-stroku.html">новой строки</a>, то есть с нового абзаца.</p> <p>- <b><h> </b> - задает заголовок (<b>h1 </b>…<b>h6 </b>).</p> <p>- <b><br> </b> - тег устанавливающий перевод строки в том месте, где он находится.</p> <p>- <b><b>, <u>, <i> </b> - каждый из тегов по отдельности выделяющий текст жирным, подчеркнутым или курсивом.</p> <p>- <b><ol>, <ul>, <dl> </b> - теги отвечающее за .</p> <p>- <b><tt>, <kbd> </b> - эффект для текста имитирующий стиль печатной машинки.</p> <p>- <b><strong> </b> - еще один HTML-тег выделяющий текст жирным. В отличии от тега <b>воспринимается поисковыми механизмами как особо выделенный.</p> <p>- <b><marquee> </b> - тег, используемый для создания бегущей строки.</p> <p>- <b><font> </b> - тег, который используется для форматирования текста, но работающий исключительно при использовании специальных атрибутов.</p> <p>- <b><a> </b> - весьма распространенный тег, отвечающий за создание гиперссылки.</p> <p>- <b><cite> </b> - цитирование.</p> <p>- <b><code> </b> - выводит в HTML документе примеры кода.</p> <p>- <b><q> </b> - отвечает за отображение текста заключенного в скобки.</p> <p>- <b><blockqote> </b> - создает отступы с обеих сторон текста.</p> <h3>Основные одиночные теги</h3> <p>- <b><meta> </b> - тег содержащий метаинформацию, предназначенную для поисковых механизмов. Внутри него при помощи соответственных атрибутов можно прописать ключевые слова, управление процессом индексации, имя автора, кодировку документа и т.п.</p> <p>- <b><img> </b> - тег, отвечающий за отображение графических элементов (картинки). Используется вместе с обязательным атрибутом <img src='https://i0.wp.com//URL' loading=lazy>.</p> <p>- <b><style> </b> - указывает на таблицу стилей CSS. Данный тег задается в теге <b>< </b><b>head </b><b>> </b>. HTML документ может состоять из энного количества тегов <b><style> </b>, задающих странице стилистику в независимости от расположения ее содержимого.</p> <p>- <b>< </b><b>hr </b><b>> </b> - добавляет горизонтальную линию.</p> <p>Нажав сочетание клавиш <b>Ctrl </b><b>+ </b><b>U </b> можно заметить, что весь HTML-документ построен на использовании HTML тегов и атрибутов. Совсем не обязательно запоминать все существующие HTML теги. Для внесения корректировок на сайт достаточно запомнить те, что приведены выше.</p> <p>Надеюсь, статья оказалась для вас полезной, и теперь вы знаете, какие существуют виды тегов и что это вообще такое.</p> <p>Спасибо за внимание и до скорого на страницах Stimylrosta.</p> <p>Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш <b>Ctrl+Enter </b></p> <p>В жизни каждого копирайтера наступает этап знакомства с html-тегами. Обычно это происходит спонтанно и выглядит как требование заказчика «подготовить текст к публикации». Это значит, в статье нужно выделить заголовки, абзацы, значимые места и списки, но не вордовскими возможности, а специальным кодом html языка. Помогут в этом <b>теги для копирайтера </b>. Необходимый для работы список обычно небольшой, но его хватает на форматирование текста со стандартными требованиями. Что же входит в необходимые для копирайтера html-теги? <i>(Если лень читать, то крутите вниз — там простая и понятная тематическая инфографика о html-тегах!)<br></i><br></p> <p>Вопросы копирайтер задает традиционные. И начинаются они все с формулировки <b>«каким тегом задается…» </b>:</p> <ul><li>заголовок;</li> <li>абзац;</li> <li>жирный текст;</li> <li>курсив;</li> <li>список маркированный/немаркированный/</li> </ul><p>Это все придает ТЗ пикантности и стимулирует к освоению новых знаний. Ситуация усугубляется, когда ставится задача использовать тег жирного текста для повышения привлекательности ключа в ПС. Но все это решается очень просто, с чем сейчас и разберемся.</p> <h3>Теги для создания заголовков</h3> <p>Теги для создания заголовков представлены элементами h1-h6. Букву свою они получили от английского Header (заголовок). Чтобы задать необходимый вид заголовка и подчеркнуть его значимость для ПС используют следующий код:</p><p> <h1>Заголовок h1</h1> <h2>Заголовок h2</h2> <h3>Заголовок h3</h3> <h4>Заголовок h4</h4> <h5>Заголовок h5</h5> <h6>Заголовок h6</h6> </p><p>На сайте это будет выглядеть следующим образом.</p> <h1>Заголовок h1</h1> <h2>Заголовок h2</h2> <h3>Заголовок h3</h3> <h4>Заголовок h4</h4> <h5>Заголовок h5</h5> <h6>Заголовок h6</h6> <p>Наибольшую значимость – и видимость – имеет заголовок h1. Его используют в качестве названия поста, и употребляется он единожды. Для подзаголовков в тексте рекомендованы h2 и h3. Они помогают подчеркнуть значимость рассматриваемого материала и разделить статью на информационные уровни.</p> <p>Заголовки h4-h6 практически не используются, но бывают востребованы для выделения логических блоков и важных фрагментов.</p> <p>Для больших статей лучше всего использовать заголовки h1-h3, для маленьких – h1 и h2.</p> <h2>Списки: маркированные и немаркированные</h2> <p>Структурированный хороший текст всегда имеет один или даже несколько списков. По своему внешнему виду списки бывают:</p> <ol><li>маркированные – в них есть нумерация;</li> <li>немаркированные – элементы выделены символами.</li> </ol><p>Но все вордовское оформление не подходит для публикаций на сайте, поэтому стоит узнать, как правильно оформить списки в хтмл-теги.<br><b>Тег маркированный список </b> выглядит так:</p><p><b>Тег немаркированный список </b> так:</p><p>При этом каждый элемент списка имеет собственное хтмл-обрамление:</p><p>Получается, чтобы выделить в тексте маркированный список при помощи html-кода потребуется скомбинировать оба типа используемых элементов. Это будет выглядеть так:</p><p> <ol> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ol> </p><p>Для немаркированного списка аналогично:</p><p> <ul> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ul> </p><p>Со списками разобрались. Можно двигаться дальше.</p> <h2>Теги акцентирования текст: жирный шрифт и курсив</h2> <p>Разбираясь, какой тег позволяет грамотно отформатировать текст, почти сразу натыкаешься на два варианта кода по каждому случаю. Это вызывает недоумение у непрограммистов и вопрос: какой именно тег нужен заказчику.</p> <p>Все очень просто! Теги предлагают выбирать варианты физического и логического форматирования. Первые нужны для пользователей, вторые – для поисковых машин. «Поисковики», видя подходящий для себя html-код, учитывают выделенный участок и используют полученную информацию при ранжировании, поэтому выделение текста средствами логического форматирования ошибкой не будет.</p> <p>Использование html-тегов дает возможность понравиться поисковикам и визуально выделить текст для пользователя. Что приоритетнее, решайте сами:</p><p> <strong><b>Выделение фразы жирным для ПС и пользователей </b></strong> <b><b>Выделение фразы жирным для пользователей </b></b> <em><i>Выделение фразы курсивом для ПС и пользователей </i></em> <i><i>Выделение фразы курсивом для пользователей </i></i> </p><p>У меня есть большая и очень противоречивая статья на тему тегов жирного выделения, которая так и называется .</p> <p>Если вдруг в тему заглянет кто-то из программистов, то спешу еще раз отметить, что обзор для копирайтеров: как ставить теги, какие они и что важно учитывать при выборе. И напоследок еще один востребованный html-код, необходимый<b> для выделения абзацев </b>. Это</p> </p><p>Открывающий тег ставится перед началом абзаца, закрывающий – в конце. Если абзац заканчивается списком, то<br> ставится после всех используемых для списка тегов.</p> <p>Ну и немного простенькой тематической инфографики в конце:</p> <p>Когда началось обсуждение темы в комментариях, в Клубе Успешных Копирайтеров на инфогрифику и статью была дана интересная обратная связь. Привожу скрин мнения авторитетного участника дискуссии.</p> <p><img src='https://i0.wp.com/kaverina80.ru/wp-content/uploads/2016/03/html-tegi-dlya-kopiraitera-2.jpg' align="center" width="100%" loading=lazy></p> <p>Прочитано: 3 365 </p> <p>Здравствуйте, уважаемые читатели блога сайт! В прошлой статье мы разобрались, а также что такое тип документа и как браузеры определяют используемый язык с помощью . Тег то рассмотрели, а вот само понятие (термин) нет. В этой статье я расскажу, что такое тег, зачем он нужен и какие теги бывают. Как я и говорил в прошлой статье данной рубрики, мы создадим файл-страничку, над которой будем экспериментировать, опираясь на полученные знания. Но это в конце статьи, а пока разберемся с HTML-тегом. </p> <h3>Что такое HTML-тег, виды HTML-тегов, примеры написания</h3><b>HTML-тег </b>— в переводе с английского <b>tag — помечать </b> -символы, заключенные в угловые скобки и являющиеся элементами языка гипертекстовой разметки (HTML). Символы могут быть толок на английском языке (весь интернет на нем построен). Тег имеет вид <strong></strong> <p>Это тег выделения текста жирным шрифтом. Теги имеют три вида:</p> <ul><li><b>Открывающий тег </b> - тег, стоящий в начале. В рассмотренном выше примере тег <strong> является открывающим и стоит перед тем текстом, который нужно выделить.</li> <li><b>Закрывающий тег </b> - тег, стоящий в конце. Отличительной чертой служит слеш «/» перед символами в угловых скобках. Опять же обратимся к рассмотренному выше примеру. Тег </strong> является закрывающим и стоит после текста, который следует выделить жирным</li> <li><b>Одиночные теги </b> — теги, которые не имеют закрывающего тега. Примером может служить <br /> Вот пример открывающего и закрывающего тега:</li> </ul> <strong></strong> <p>Вся конструкция, включая текст, будет выглядеть следующим образом:</p><p> <strong>Этот текст будет выделен жирным</strong> </p><p>А вот так будет выглядеть этот текст, когда его обработает браузер и предоставит нам:<b>Этот текст будет выделен жирным. </b> Существует еще такое понятие, как<b> контейнерные теги </b>, но это просто обобщенное название открывающего и закрывающего тегов. Как я писал выше, помимо контейнерных есть еще и одиночные теги. Отличие заключается в том, что такие теги не нужно закрывать. Ярким и наиболее частым примером служит тег новой строки.</p><p>В основном, одиночные теги используются для вставки какого-либо элемента, например изображения или таблицы.</p> <h3>Что такое атрибуты,правила написания и зачем они нужны</h3> Помимо тегов существуют еще и так называемые <b>атрибуты </b>. Точнее не помимо, а в тегах. С помощью атрибутов можно задать дополнительные параметры для какого-либо тега. <b>Атрибуты </b> для каждого тега свои, а в данной теме мы будем экспериментировать над тегом <font>, который без атрибутов, собственно, ничего толкового не делает. <p><b>Font </b> — контейнерный тег, применяемый для форматирования текста. С помощью данного тега вы сможете и выделить текст жирным, и изменить размер, и расстояние между строк — в общем все, что можно делать с текстом. Рассмотрим пример с размером текста. Для начала заключим текст в тег Font.</p><p> <font> Текст </font> </p><p>Теперь немного про правила написания атрибутов. Атрибуты<b> всегда </b> пишутся в открывающем теге и после символов самого тега. Можно написать в одном теге несколько атрибутов в любом порядке. Атрибуты вы можете найти на сайте валидатора W3C (про который я напишу чуть ниже). Итак, вот пример тега font с атрибутом size:</p><p> <font size="5"> Текст</font> </p><p>Данный атрибут в теге font изменяет размер заключенного в теги Текста.<br> Если вы откроете исходный код страницы, то увидите, что место, где находится большое слово «Текста» имеет вид</p><p> <font size="5"> Текста </font> </p><p>Вы уже увидели как пишутся атрибуты. Ровно также они пишутся и в других тегах: сначала пишем сам атрибут (в данном случае size), затем ставим «=» и заключаем параметр атрибута в двойные кавычки. Параметры атрибутов вы сможете найти все на том же сайте консорциума всемирной паутины.</p> <h3>Что такое валидатор (validator) W3C, правила написания и список тегов</h3> Как я и писал, существует великое множество тегов. Но где их всех найти? Вот для этой цели существует <b>валидатор W3C </b>W3C -<b> World Wide Web Consorcium, </b>а по-русски — консорциум всемирной паутины. Не совсем понятно, да? Это такое место, где разрабатывают веб-стандарты — (языки гипертекстовой разметки — их детище). Во главе всего консорциума стоит, известный из прошлой статьи, Тим Бернерс-Ли — создатель HTML. Сайт этой организации — w3.org . Предупреждаю, сайт полностью на английском, так что запаситесь словарем или переводчиком в браузере. Кстати, Google у данного сайта равен 9, а — 37000 (это все очень много, если кто не в курсе). <p>Возвращаемся к теме статьи. Нас интересуют стандарты языка HNTML 4.01. Переходим по ссылке HTML 4.01 Specification , после чего вверху видим вкладку elements , кликаем на нее. Вот и открывается страница со всеми тегами. Данные теги разработаны и приняты за стандарт консорциумом. Все, опять же, на английском. Сразу после слов «Index of Elements» мы видим легенду (значение букв в столбцах): <br><img src='https://i0.wp.com/monetavinternete.ru/wp-content/uploads/2012/09/Legenda-validatora-W3C.png' align="center" width="100%" loading=lazy></p> <p>А сразу после легенды идет таблица самих тегов:</p> <p><img src='https://i1.wp.com/monetavinternete.ru/wp-content/uploads/2012/09/Tablitsa-tegov-na-sayte-W3C.png' align="center" width="100%" loading=lazy></p> <ul><li>В первом столбце — <b>Name </b> — само название тега — то что должно стоять в <a href="/uglovye-skobki-na-klaviature-kak-izmenit-vid-kavychek-s-pryamyh-na-dvoinye.html">угловых скобках</a> (< и >).</li> <li>Второй столбец — <b>Start Tag </b> — наличие открывающего тега. В <a href="/kak-v-eksele-sdelat-skrytye-stroki-vernut-vidimost-stolbcam.html">данном столбце</a> вы можете увидеть букву «O», что значит «Optional», а в переводе с английского - Опционально. Данная буква присутствует только напротив тегов <html>, <head>, <body> и <tbody> и означает, что можно ставить открывающий тег, а можно не ставить — браузер сам все сделает.</li> <li>Третий столбец — <b>End Tag </b> — наличие закрывающего тега. Напротив данного тега можно увидеть как букву «O», так и букву «F». Значение первой не изменилось. Вторая же буква — «F» — дословно с английского «запрещено» — означает, что закрывающий тег ставить запрещено, его просто не существует. Например, не существует тега </img>, ибо нечего в нем закрывать.</li> <li>Четвертый -<b> Empty </b> — означает, что тег является одиночным (пустым). Все теги, напротив которых стоит буква «E» в данном столбце, стоит еще и буква «F» в предыдущем столбце. Ведь у <a href="/html-b-css-osnovnye-tegi-spravochnik-tegov-html-osnovnye-odinochnye.html">одиночных тегов</a> не бывает закрывающих. Примером служит все тот же тег <img>.</li> <li>Пятый столбец — <b>Depr. </b> или <b>Deprecated </b> — с английского «не рекомендуемые». Если в данном столбце стоит буква «D» (которая расшифровывается точно также) значит, что <a href="/html-kakoi-teg-opredelyaet-pole-vvoda-dannyh-primery-form-sozdannyh-na-input-s.html">данный тег</a> не рекомендуется к использованию в HTML. Забегая немного вперед, сегодня для оформления как текста, так и <a href="/chto-takoe-ustroistvo-vneshnei-pamyati-vidy-vneshnei-pamyati-pk-ih-osobennosti-i.html">внешнего вида</a> всего сайта и HTML-документа используются <a href="/kaskadnyh-tablic-stilei-opredelenie-cvetov-uroki-css-nekotorye.html">каскадные таблицы</a> стилей — CSS. Если коротко и просто, то создается один файл, в котором прописываются все параметры текста, которые можно вызвать определенными атрибутами тегов. Так вот, <a href="/chto-takoe-baza-dannyh-ponyatie-i-sostavlyayushchie-informacionnogo.html">данная функция</a> используется только на сайтах, потому что при рассылке новостей по почте или в RSS CSS не применим. И тут приходит на помощь эти самые теги. Большинство таких тегов, кстати, относятся к оформлению текста (<font> и <Center> являются примером)</li> <li>Шестой столбец — <b>DTD </b> — может содержать либо букву <b>«L» </b>, либо <b>«F» </b>. Первая — <b>«L» </b> - <b>Loose DTD </b> — означает, что тег, напротив которого стоит данная буква, может использоваться только в переходном типе документов (<!DOCTYPE> — Transitional, про который я писал в предыдущей статье). Вторая — <b>«F» </b> — <b>Frameset DTD </b> — означает, что тег может использоваться только в документе, типа FRAMESET (<!DOCTYPE> — Frameset). Если же буква отсутствует, то тег можно использовать во всех типах документов.</li> <li>И последний, седьмой столбец - <b>Description </b> — <a href="/skachat-aktivirovannyi-arhivator-kratkoe-opisanie-winrar-osobennosti.html">краткое описание</a> тега, опять же на английском</li> </ul><p>Атрибуты же содержаться на той же страничке <a href="/specifikacii-html-i-css-pochemu-voobshche-rozhdayutsya-novye-specifikacii.html">спецификации HTML</a> 4.01, но уже во вкладке «attributes». Атрибутов намного больше, нежели тегов. И опять распишу все по пунктам.</p> <ul><li>Первая колонка — <b>Name </b> — как и в случае с тегами — название атрибута. Все на английском, но имея <a href="/bazovye-znaniya-elektroniki-shkola-dlya-elektrika-vse-ob-elektrotehnike-i-elektronike-osnovnye-tokov.html">базовые знания</a> можно догадаться, что делает тот или иной атрибут.</li> <li>Вторая колонка — <b>Related Elements </b> — это перечень всех тегов, в которых используется какой-либо атрибут. Все теги со ссылками, поэтому сразу можно будет перейти к информации о теге.</li> <li>Третья колонка — <b>Type </b> — это все возможные значения определенного атрибута. Например напротив выбранного нами атрибута size в <a href="/kak-izmenit-shrift-zagolovka-v-html-zadaem-cvet-teksta-atribut-color.html">теге Font</a> стоит значение CDATA. Его мы рассмотрим позже, а если коротко, то это <a href="/otkryt-multimedia-kak-ispolzovat-dlna-server-v-windows-potokovaya-translyaciya.html">специальный набор</a> вариантов размера (в <a href="/spravka-o-kompanii-atol-v-sluchae-nalichiya-nekorrektnyh-dannyh-v-polyah.html">данном случае</a>). Ведь можно писать как пиксели, так и проценты</li> <li>Четвертая колонка — <b>Default </b> — означает, обязателен ли атрибут в определенном теге. Например, в <a href="/teg-img-atributy-kartinka-v-html-vse-o-tege-img.html">теге Img</a> <a href="/kakoi-freim-ukazyvaem-put-v-atribute-src-elementa-frame-primer.html">атрибут src</a> обязателен, так как указывает на источник, из которого брать картинку.</li> <li>6, 7, и 8 колонки означают то же самое, что и в случае с тегами.</li> </ul><p>Все вышеописанное относится только к HTML версии 4.01. Про HTML 5 мы поговорим в другой статье, затронем и XHTML. А сейчас, как я и обещал, мы создадим страничку на <a href="/cvet-nadpisi-html-kak-sdelat-krasivyi-shrift-v-html-razmery-cveta.html">языке HTML</a>, над которой и будем экспериментировать.</p> <h3>Создание файла в формате html — HTML-документ</h3> <p>Прежде всего, разберемся что такое <b>HTML-документ </b>. А это, собственно, файл в <a href="/kak-pravilno-sohranit-fail-sohranenie-faila-v-drugom-ili-starom-formate.html">формате HTML</a>. И все интернет странички являются <a href="/vstraivanie-css-v-html-dokument-vstraivanie-stilei-v-html-dokument.html">HTML- документами</a>. Например, при попадании на сайт в <a href="/mozilla-firefox-55-versiya-uluchsheniya-v-adresnoi-stroke-nastroika-chisla.html">адресной строке</a> в конце можно увидеть после адреса «.html» или «.htm». Вот файл с таким расширением мы и создадим. Вообще, если хотите экспериментировать над сайтом, а не над страничкой, то лучше создать <a href="/kak-sozdat-lokalnyi-server-minecraft-nastroika-po-lokalnoi-seti-staraites-ne.html">локальный сервер</a> — Денвер (про который я все хочу написать).</p> <p>Учитывая то, что я не рассказал даже о тегах, присутствующих на каждой страничке, то просто создадим файл с любым именем и расширением.html. Можно (и лучше всего) использовать <b>Notepad++ </b> , потому что в данном <a href="/skachat-tekstovyi-redaktor-na-russkom-obzor-besplatnyh.html">текстовом редакторе</a> используется подсветка кода, что очень удобно при редактировании кода и сохранять файлы можно во множестве форматов. Также есть программы, в которых при наборе кода сразу появляется результат в обработанном виде</p> <p>Итак, нам нужно просто открыть <b>Notepad++ </b> и сохранить файл с произвольным текстом (можно и пустой), но в формате.html. Для этого, как обычно, кликаете на надпись файл, затем "сохранить как " и ищем среди большого списка расширений <b>«HyperText Markup Language file </b> (расширения файлов)». Вот, собственно, и все. Первые строки в этот файл мы добавим уже в следующей статье из рубрики «Создаем сайт с нуля»</p> <br> <br> <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> </div> <dblock></dblock> <dblock></dblock> <dblock></dblock> <dblock></dblock> </article> </div> </div> <div id="sidebar"> <aside> <div class="inner"> <div> <div class="xyz_wrapper"> <div> </div> </div> <div> </div> </div> </div> </aside> </div> </div> </div> <script type="text/javascript" src="/assets/like.js"></script> </main> <div id="slide-menu"> <div id="slide-menu"> <div class="menu-content"> <div class="slide-menu-close" id="slide-menu-close" title="Закрыть"></div> <dblock></dblock> <ul> <li><span class="link" onclick="go('/category/beeline/')"><i class=""></i> Beeline</span></li> <li><span class="link" onclick="go('/category/internet/')"><i class=""></i> Интернет</span></li> <li><span class="link" onclick="go('/category/tele2/')"><i class=""></i> Tele2</span></li> <li><span class="link" onclick="go('/category/useful/')"><i class=""></i> Полезное</span></li> <li><span class="link" onclick="go('/category/ip-telephony/')"><i class=""></i> IP-Телефония</span></li> <li><span class="link" onclick="go('/category/iota/')"><i class=""></i> Йота</span></li> <li><span class="link" onclick="go('/category/mts/')"><i class=""></i> Mts</span></li> <li><span class="link" onclick="go('/category/megafon/')"><i class=""></i> Megafon</span></li> </ul> <ul> <li><a href="/feedback.html">Контакты</a></li> <li><a href="">Реклама</a></li> <li><a href="">О сайте</a></li> </ul> </div> </div> </div> <div id="slide-search"> <div class="search-content"> <div class="search-form-close" id="slide-search-close" title="Закрыть"></div> <div class="search-form-header"><img src="/assets/vsadu-icon-gray.svg" alt="Портал о мобильных операторах" onerror="this.src='/ui/vsadu-icon-gray.png'" style="height: 45px" loading=lazy> Поиск</div> <form style="position: relative" action="/search" method="get" autocomplete="off"> <input type="text" class="m-seach-field" name="q" placeholder="поиск по сайту" value="" /> <div> <dblock></dblock> </div> <div class="desktop_screen" style="position: absolute;right: 9px;top: 9px;"> <input type="submit" class="button yellow big" value="Найти" /> </div> </form> </div> </div> <script type="text/javascript" src="/assets/slide-menu.3.js"></script> <script type="text/javascript" src="/assets/sticky.min.js"></script> <script type="text/javascript" src="/assets/jquery.lazyload.min.js"></script> <script type="text/javascript" src="/assets/jquery-ui.min.js"></script> <script type="text/javascript" src="/assets/JsHttpRequest.js"></script> <script type="text/javascript" src="/assets/Request.js"></script> <div class="white_section"> <div> <div class="desktop_screen" style="padding: 15px 0;background:#f6f8f2;"> <dblock></dblock> </div> </div> </div> <footer> <div class="footer"> <dblock></dblock> <div class="silver_section"> <div class="content"><div class="inner"> <div class="section group" style="text-align: center"> <div class="col span_1_of_3"> <div style="font-size: 16px; vertical-align: middle; line-height: 45px;"><i class="fa fa-envelope-o"></i> cena5.ru - Портал о мобильных операторах</div> </div> <div class="col span_1_of_3"> </div> <div class="col span_1_of_3"> <a target="_blank" href="https://connect.ok.ru/offer?url=https://cena5.ru/vrashchenie-bloka-funkciya-rotate-v-css-dvumernoe-vrashchenie-elementa.html"><img class="soc" alt="Портал о мобильных операторах Одноклассники" src="/assets/ok.svg" onerror="this.src='/ui/icons/ok.png'" loading=lazy></a> <a target="_blank" href="https://vk.com/share.php?url=https://cena5.ru/vrashchenie-bloka-funkciya-rotate-v-css-dvumernoe-vrashchenie-elementa.html"><img class="soc" alt="Портал о мобильных операторах ВКонтакте" src="/assets/vk.svg" onerror="this.src='/ui/icons/vk.png'" loading=lazy></a> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://cena5.ru/vrashchenie-bloka-funkciya-rotate-v-css-dvumernoe-vrashchenie-elementa.html"><img class="soc" alt="Портал о мобильных операторах Facebook" src="/assets/fb.svg" onerror="this.src='/ui/icons/fb.png'" loading=lazy></a> <a target="_blank" href="https://www.twitter.com/share?url=https://cena5.ru/vrashchenie-bloka-funkciya-rotate-v-css-dvumernoe-vrashchenie-elementa.html"><img class="soc" alt="Портал о мобильных операторах Twitter" src="/assets/tw.svg" onerror="this.src='/ui/icons/tw.png'" loading=lazy></a> <a target="_blank" href=""><img class="soc" alt="Портал о мобильных операторах Google+" src="/assets/g+.svg" onerror="this.src='/ui/icons/g+.png'" loading=lazy></a> <a target="_blank" href=""><img class="soc" alt="Портал о мобильных операторах Pinterest" src="/assets/pin.svg" onerror="this.src='/ui/icons/pin.png'" loading=lazy></a> <div class="soc-caption">Портал о мобильных операторах в социальных сетях</div> </div> </div> </div></div> </div> <div class="content desktop_screen" style="overflow: inherit; margin-top: 20px"><div class="inner"> <div class="section group"> <div class="col span_2_of_5"> <div class="share-widget"> <script src="https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="https://yastatic.net/share2/share.js" async="async"></script> <div class="ya-share2" data-services="collections,vkontakte,gplus,odnoklassniki,facebook,moimir,twitter,pinterest,lj,viber,whatsapp,pocket" data-url="https://cena5.ru" data-counter="true" data-limit="6"></div> </div> </div> <div class="col span_3_of_5" style="text-align: center;"> <a class="section_link" href="/feedback.html">Контакты</a> <a class="section_link" href="" style="color: #ff4500 !important;">Реклама</a> <a class="section_link" href="">Вакансии</a> <script> document.write('<a class="section_link" href="mailto:info' + '@cena5.ru">Написать нам</a>') </script> </div> </div> </div> </div> <dblock></dblock> <div class="content"> <div class="inner"> <p style="margin: 20px 0">Copyright © «cena5.ru» 2024 Копирование и видоизменение материалов сайта возможно только после письменного согласия правообладателей. <br /> Статьи защищены законом об авторских и смежных правах, при цитирование материалов проекта «cena5.ru» <span style="text-decoration: underline">прямая открытая ссылка</span> на <strong>cena5.ru</strong> обязательна. <br /> Все права защищены.</p> <dblock></dblock> </div> </div> </div> </footer> <script src="/assets/init.3.js"></script> <div class="push-popup"> <img src="/assets/vsadu-icon.png" style="float: left; margin-right: 10px; margin-bottom: 70px" / loading=lazy> Мы можем оповещать вас о новых статьях,<br /> чтобы вы всегда были в курсе самого интересного. <br /><br /> <button class="button blue uppercase push-button" style="margin-bottom: 10px">Продолжить</button> <button class="button blue-text uppercase push-cancel" style="margin-bottom: 10px">Нет, спасибо</button> </div> <script src="/assets/init.1.js"></script> <div id="p-b"> </div> <style> #yinfo-badge .yinfo-links, #yinfo-badge .yinfo-report { display: none !important } ::shadow .yinfo-links, ::shadow .yinfo-report { display: none !important } </style> <div class="page-top-button wide_desktop_screen hidden"> <div class="page-top-sec"> <a href="/" title="Главная Портал о мобильных операторах"><i class="fa fa-home gray" style="font-size: 32px"></i></a> </div> <div class="page-top-sec"> <a href="" title="О сайте"><i class="fa fa-calendar green" style="font-size: 32px"></i></a> </div> <div class="page-top-sec"> <a title="Связаться с нами" href="/feedback.html"><i class="fa fa fa-commenting-o" style="font-size: 32px; color:#ff4500"></i></a> </div> </div> </body> </html>