Пишем статьи в html
Опубликовано: 01.09.2018
Для того, чтобы создавать документы в html нужно даже не знать, а иметь перед глазами при написании статьи список необходимых тегов и просто копировать их в документ. Конечно, при этом нужно знать, что, зачем и куда ставить. Именно об этом мы и поговорим ниже. Сначала я на примерах покажу и объясню, что и для чего нужно, а в конце сделаю список всех необходимых тегов с краткими пояснениями, чтобы вы могли скопировать их к себе в какой-либо текстовый редактор и сохранить.
Текст
В начале текста нужно поставить <p align=justify> , где «justify» означает, что текст будет ровным как с левой, так и с правой стороны, благодаря чему он смотрится на сайте более привлекательно и аккуратно.
В конце текста этот тег нужно закрыть. Это выглядит так: </p> . Если текст разбит на абзацы, то в конце каждого нужно поставить тег <br> , чтобы следующий начинался с новой строки.
Для примера возьмем какой-либо кусок текста. Заключенный в теги, он будет выглядеть так:
<p align=justify> Прежде, чем вы начнете создавать сайт, нужно учесть, что сайт не будет зарабатывать сам собой. Во-первых, он должен быть наполнен интересными и (или) полезными материалами. И эти материалы должны периодически добавляться (обновляться). <br>
Во-вторых, сайт нужно продвигать (рекламировать) хотя бы бесплатными способами. Иначе не будет посетителей, а значит, не будет и заработка. Итог: сайтом нужно постоянно заниматься. Если вы к этому готовы – тогда вперед! Нажимайте на кнопку «Хочу сайт» и приступим к созданию. </p>
Если нужны отступы в начале абзацев, можно поставить 5 – 8 штук вот таких пробелов: . В этом случае наш текст будет выглядеть так:
<p align=justify> Прежде, чем вы начнете создавать сайт, нужно учесть, что сайт не будет зарабатывать сам собой. Во-первых, он должен быть наполнен интересными и (или) полезными материалами. И эти материалы должны периодически добавляться (обновляться). <br>
Во-вторых, сайт нужно продвигать (рекламировать) хотя бы бесплатными способами. Иначе не будет посетителей, а значит, не будет и заработка. Итог: сайтом нужно постоянно заниматься. Если вы к этому готовы – тогда вперед! Нажимайте на кнопку «Хочу сайт» и приступим к созданию. </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> .
Допустим, я собираюсь сделать фразу « Хочу сайт » в последнем абзаце своего текста кликабельной, дабы пользователи не пролистывали страницу вверх, чтобы добраться до кнопки, а могли нажать на эту надпись и сразу попасть, куда нужно. Заменяю слова « АДРЕС СТРИНИЦЫ » на ссылку, а слова « Ваш текст » на фразу « Хочу сайт ». Получается так:
Во-вторых, сайт нужно продвигать (рекламировать) хотя бы бесплатными способами. Иначе не будет посетителей, а значит, не будет и заработка. Итог: сайтом нужно постоянно заниматься. Если вы к этому готовы – тогда вперед! Нажимайте на кнопку <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> — переход на другую строку (в конце каждого абзаца или после изображения)
— отступ (пробелы) в начале каждого абзаца
<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> — расположить по центру
