Копирайтер

Книги копирайтера


Nejaden.ru

логотип сайта www.nejaden.ru


Копирайтинг


навигация по сайту

Статьи копирайтеров
seo, заработок в интернете

HTML. Оформление текстов


htmlВремя от времени нам требуется оформить текст тегами HTML, что вызывает проблемы у начинающих копирайтеров. Давайте вместе немного разберёмся с этим языком. В нём нет ничего сложного.

HTML (HyperText Markup Language) – язык разметки гипертекстовых документов. Большинство страничек в интернете созданы именно на этом языке. Браузеры преобразуют язык html в общепринятый обычный человекопонятный вид.

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

Большинство тегов парные, т.е. начинаются с открывающего и заканчиваются закрывающим тегом. Зона действия тега находится между открывающим и закрывающим. Но есть и одиночные теги, не требующие наличия закрывающего, пример <br> – перенос строки. Все теги заключаются в <...>. В закрывающем теге присутсвует знак / – слэш.

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

HTML редактор

Давайте посмотрим, как этот текст выглядит на языке html. Для этого под рабочим окном редактора нажимаем кнопку "Code" – код и видим как этот текст задан в html:

html код

Давайте рассмотрим используемые тут теги. Тег <h4> задаёт заголовок. Заголовки оформляются тегами h1, h2...h6. h1 – самый большой, h6 – самый маленький. В начале заголовка стоит <h4> – открывающий тег, в конце </h4> – закрывающий. Текст заголовка: "Здесь Вы можете создать свою страничку" находится между ними.

Далее идёт обычный текст, вернее всего одна строчка, которая оформлена тегами параграфа или абзаца – <p>...</p>. Все абзацы заключаются в тег <p>. Это даёт указание браузеру выводить заключённый в этот тег текст с новой строки и с разделительным отступом в одну строку.

Следующий абзац: "Не забывайте периодически сохранять создаваемую страничку нажав на клавишу "Code" внизу и скопировав полученный код в блокнот" кроме тега абзаца <p> заключён в теги <u> и <strong>. Тег <u> говорит браузеру о том, что текст внутри тега должен выводится подчёркнутым, а тег <strong> обозначает "жирный шрифт". Эти теги парные. Как  мы видим, текст этого абзаца более жирный и почёркнутый.

Следующий абзац заключён, кроме тега абзаца <p>, в теги <em> и <font color="red">. Тег <em> обозначает курсив, а тег  <font> задаёт цвет шрифта, в данном случае "red" – красный.

Кроме цвета, тег <font> может задавать размер и тип шрифта внутри абзаца. Например запись – <FONT SIZE="3" FACE="Times New Roman" COLOR="#AA0000"> – говорит о том, что текст абзаца должен выводится шрифтом третьего размера, типом шрифта "Times New Roman" и цветом rgb "#AA0000". Это к примеру. У нас тут такой записи нет.

Ну и последняя строчка данного текста выводится заголовком третьего размера <h3> и выравнивается по центру страницы, благодаря атрибуту align="center". Атрибут align="..." обозначает горизонтальное выравнивание и может принимать ещё значения "left" и "right" (выравнивание влево и вправо).

Давайте поэкспериментируем с этим текстом. Нажав на кнопку "Code" снизу – работаем с кодом html, а нажав на кнопку "Design" или "Preview", смотрим, как отображается наш код в обычном виде.

Нажимаем "Code" и редактируем код. Заменим тег заголовка в первом абзаце с <h4> на <h2>, чтобы он стал покрупнее, не забывая заменять и закрывающий тег.

Второй строчке, вместо тега абзаца, присвоим тег заголовка третьего уровня <h3>(тег абзаца <p> в заголовках не ставится).

Из следующего абзаца уберём теги <u> и <strong>, оставив только тег абзаца (Не забывйте удалять и закрывающие теги). Это у нас будет обычный абзац.

Из следующего уберём тег курсива <em>, а значение атрибута color поменяем с красного на зелёный, т.е. напишем color="green". Это будет абзац с обычным шрифтом зелёного цвета.

Последнюю строчку оставим заголовком третьего уровня, но сделаем выравнивание не по центру, а по левому краю, поменяв значение align="center" на align="left":

html код

Смотрим, что получилось, нажав на "Design" снизу:

html код

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

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

Разберём некоторые. A – цвет (нажимаете и выбираете из палитры). B – выделение жирным шрифтом. I – курсив. U – подчёркивание текста. ABC – перечёркнутый текст. Далее идут в ряд: выравнивание текста по левому краю, посередине, по правому, по всей ширине страницы. Самый первый значок во втором ряду – вставка ссылки, а следующий – удаление ссылки, а за ним – вставка изображения и т.д.

Можете попробовать. Скопируйте любой текст и вставьте в рабочее окно этого редактора как обычно: ПКМ – вставить. Или наберите прямо в редакторе. Выделяйте нужные отрезки и форматируйте. Вставленные редактором теги можете посмотреть, нажав на кнопку "Code".

Созданную в этом редакторе страничку можно сохранить в файл, который будет открываться вашим браузером. Для этого скопируйте содержимое созданной странички в режиме "Code" как обычно: выделяем всё – ПКМ – копировать. Вставьте в обычный блокнот: ПКМ – вставить. Сверху нажмите "Файл" – "Сохранить как", в открывшемся окне выберите место сохранения из показанных в левой колонке, а в поле "Имя файла" снизу напишите любое название точка html. Например, просто: fail.html  Главное, чтобы расширение было .html  И нажмите "Сохранить". Полученный файл открывается, как и все остальные, двумя щелчками мыши.

Открывается он в браузере, т.к. расширение .html говорит о том, что это html документ. Вот так, примерно, и делаются страницы для сайтов в сети Интернет. Вы можете скачать и установить html-редактор на свой компьютер. Наиболее распространённые html-редакторы: Adobe Dreamweaver, TinuMCE, KompoZer и т.д. В них вы можете создавать html странички, не вникая в тонкости языка html.

Основные теги HTML:

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

 

Вернуться на Главную страницу


Google+

Copyright © 2010-2016, seobabys@yandex.ru

При копировании материалов ссылка на сайт обязательна