Главная » Полезное » Пишем статьи в html

Пишем статьи в html

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


 Текст

В начале текста нужно поставить <p align=justify>, где «justify» означает, что текст будет ровным как с левой, так и с правой стороны, благодаря чему он смотрится на сайте более привлекательно и аккуратно.

В конце текста этот тег нужно закрыть. Это выглядит так: </p>. Если текст разбит на абзацы, то в конце каждого нужно поставить тег <br>, чтобы следующий начинался с новой строки.

Для примера возьмем какой-либо кусок текста. Заключенный в теги, он будет выглядеть так:

<p align=justify>Прежде, чем вы начнете создавать сайт, нужно учесть, что сайт не будет зарабатывать сам собой. Во-первых, он должен быть наполнен интересными и (или) полезными материалами. И эти материалы должны периодически добавляться (обновляться). <br>

Во-вторых, сайт нужно продвигать (рекламировать) хотя бы бесплатными способами. Иначе не будет посетителей, а значит, не будет и заработка. Итог: сайтом нужно постоянно заниматься. Если вы к этому готовы – тогда вперед! Нажимайте на кнопку «Хочу сайт» и приступим к созданию. </p>

Если нужны отступы в начале абзацев, можно поставить 5 – 8 штук вот таких пробелов: &nbsp;. В этом случае наш текст будет выглядеть так:

<p align=justify>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Прежде, чем вы начнете создавать сайт, нужно учесть, что сайт не будет зарабатывать сам собой. Во-первых, он должен быть наполнен интересными и (или) полезными материалами. И эти материалы должны периодически добавляться (обновляться).<br>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Во-вторых, сайт нужно продвигать (рекламировать) хотя бы бесплатными способами. Иначе не будет посетителей, а значит, не будет и заработка. Итог: сайтом нужно постоянно заниматься. Если вы к этому готовы – тогда вперед! Нажимайте на кнопку «Хочу сайт» и приступим к созданию.</p>

Чтобы выделить часть текста жирным шрифтом, нужно заключить это слово или фразу (да хоть целый абзац) в теги <b> и </b> следующим образом: <b>слово или фраза</b>. Также можно сделать текст курсивом – <i>слово или фраза</i>, подчеркнутым – <u>слово или фраза</u> и перечеркнутым — <s>слово или фраза</s>. Можно использовать одновременно хоть все сразу эти способы выделения, но при этом нужно знать, что теги, которые вы открывали первыми, нужно закрывать последними (то есть закрывать их в обратном порядке). Например, я хочу, чтобы фраза была написана жирным курсивом и при этом еще и подчеркнута. Выглядеть это будет так: <b><i><u>фраза</u></i></b>

 Ссылки

Чтобы вставить ссылку в текст (или отдельно) нужно воспользоваться вот такой простой формулой:

<a href=»АДРЕС СТРАНИЦЫ»> Ваш текст </a>. Если нужно, чтобы страница открылась в новом окне, примените такую формулу: <a href=»АДРЕС СТРАНИЦЫ» target=»_blank»>Ваш текст</a>.

Допустим, я собираюсь сделать фразу «Хочу сайт» в последнем абзаце своего текста кликабельной, дабы пользователи не пролистывали страницу вверх, чтобы добраться до кнопки, а могли нажать на эту надпись и сразу попасть, куда нужно. Заменяю слова «АДРЕС СТРИНИЦЫ» на ссылку, а слова «Ваш текст» на фразу «Хочу сайт». Получается так:

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Во-вторых, сайт нужно продвигать (рекламировать) хотя бы бесплатными способами. Иначе не будет посетителей, а значит, не будет и заработка. Итог: сайтом нужно постоянно заниматься. Если вы к этому готовы – тогда вперед! Нажимайте на кнопку <a href=»http://reazar.ru/index.php?option=com_content&view=section&id=5&Itemid=58″>«Хочу сайт»</a> и приступим к созданию.</p>

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

Изображения

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

Изображения (картинки, фотографии) тоже вставляются при помощи простой формулы: <img src=»http://site/…jpg»> в которой нужно только заменить http://site/…jpg на адрес вашего изображения.

Для того, чтобы узнать адрес картинки, загруженной вами на сайт, зайдите в Панель администратора,  затем в «Изображения» и найдите в списке нужное. Нажмите на слово «Просмотр» в этой же строке или кликните по иконке изображения (зависит от движка). По открывшейся картинке кликните правой кнопкой мыши и в появившемся окне выберите «Копировать ссылку на изображение», «Копировать адрес изображения», «Копировать URL картинки» или что-то похожее (зависит от браузера, в котором вы работаете). После нажатия на эту надпись адрес изображения будет скопирован в буфер обмена, после чего вы можете сразу его вставить в формулу или сохранить до нужного момента в отдельном документе.

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

Если нужно, чтобы картинка (заголовок, ссылка, да что угодно) была расположена по центру, нужно ее код заключить в теги <center> и </center>. Выглядеть это должно так:

<center><imgsrchttp://www.vjazhu.ru/images/ban.gif«></center>

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

Чтобы картинка не «пыталась» встать на уровне последней строки предыдущего абзаца, а первая строка следующего абзаца «не вздумала» начаться на одном уровне с нижним краем картинки, поставьте после кода картинки тег <br>.

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

<img src=»http://site/…jpg» align=left hspace=20>

Где align=left означает, что картинка будет располагаться слева, а текст — справа от нее. Если left заменить на right, то текст будет слева, а картинка – справа.  hspace=20 – расстояние между картинкой и текстом в пикселах. Только в этом случае тег <br> после картинки ставить не нужно.

Список необходимых тегов (шпаргалка)

Подведем итоги. Вот список тегов, которые нам необходимы, чтобы писать материалы в html:

Для текста

<p align=justify> — перед началом текста

</p> — в конце текста.

<br> — переход на другую строку (в конце каждого абзаца или после изображения)

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; — отступ (пробелы) в начале каждого абзаца

<b>слово или фраза</b> — выделить жирным

<i>слово или фраза</i> — курсив

<u>слово или фраза</u> — подчеркнутый текст

<s>слово или фраза</s> — зачеркнутый текст

Ссылки

<a href=»АДРЕС СТРАНИЦЫ«>Ваш текст</a> — простая ссылка

<a href=»АДРЕС СТРАНИЦЫ» target=»_blank»>Ваш текст</a> — откроется в новом окне

Изображения

<img src=»http://site/…jpg«> — код изображения

<imgsrchttp://site/…jpg» align=lefthspace=20> — обтекаемая текстом картинка

<center>код картинки (заголовок и т.д.) </center> — расположить по центру






Полезное
Понравился материал? Поделитесь с друзьями в социальных сетях, нажимайте на кнопочки!

4 комментария

  • Надия

    Светлана, здравствуйте! У меня вопрос: одна партнерка требует для подтверждения сайта скопированную ссылку поместить между тегами и поместить на главную страницу сайта.
    (вот эта ссылка ).Как ее правильно вставить? В «текст» или «визуально»?

    Ответить
    • Светлана Канаева

      Надия, очень прошу, формулируйте вопросы правильно. Это не похоже на ссылку, скорее, это верификациооный код. Обычно вставляется в код сайта, чтобы подтвердить, что Вы являетесь его владельцем. Отсюда вопрос: уверены ли Вы, что это действительно нужно?
      Если нужно, то обычно такие вещи помещаются через Редактор в файл основного шаблона (index.php). Однако, если ничего в этом не понимаете, очень не советую, можно весь сайт поломать.
      Если на сайте реализована одна из страниц в качестве главной, можно попробовать вставить в текст, лучше в режиме html. Может, прокатит.

      Ответить
  • Anna

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

    Ответить
    • Светлана Канаева

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

      Ответить

Ваш email не будет опубликован. Обязательные поля отмечены *
Имя *
Email *
Сайт
Ваш комментарий
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: