Сышышь ты, выходи сюда,
поговорим !

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

Опубликовано: 01.09.2018

Для того, чтобы создавать документы в 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>

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

Изображения

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

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

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

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

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

< center >< img src http :// 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 «> — код изображения

< img src http :// site /… jpg » align = left hspace =20> — обтекаемая текстом картинка

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

rss