1. HTML.





    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

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







    Источник: http://www.nejaden.ru

  2. Анекдоты

    Далай-Ламу однажды спросили, что больше всего его изумляет. Он ответил: Человек. Вначале он жертвует своим здоровьем для того, чтобы заработать деньги. Потом он тратит деньги на восстановление здоровья.
  3. Как стать феей-крёстной

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

Контакты