Логотип

Как создать сайт

Всё что нужно для создания сайта!

Как добавить новость на ucoz, часть 4 HTML редактор


novost_ch4_vnutri

И так, в этой части рассмотрим как работать с HTML редактором. Этот редактор отличается от визуального - своей меньшей функциональностью и у него намного меньше кнопок. Люди которые разбираются в html тегах, обычно пользуются этим редактором.

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

Разбираем кнопки у редактора

Ну что приступим. Первым делом перед добавление новости, нужно выбрать редактор в котором будем оформлять нашу новость, в нашем случае это html редактор. Он открывается, по кнопке -

HTML РедакторЕсли кнопка была активированная, должен открыться сам редактор. В нём как я и говорил, кнопок на много меньше, всего 13. Первые три кнопки помогают делать текст жирным, курсивным и подчёркнутым. Если вы прочитали предыдущие записи о визуальном редакторе, тогда знаете как работать с этими кнопками. Работают они так, обводим слово или кусок текста мышкой (Другими словами выделяем), и нажимаем одну из кнопок, или сразу все три, после вокруг теста должны появится теги. В данном случае был активирована кнопка (b).

Тег Б

Следующие три кнопки помогают оформлять текст. Первая кнопка (SIZE) помогает задать размер тексту. Вторая кнопка (FAMILY) выбрать шрифт для текста, а третья (COLOR) разукрасить текст. Работает это очень просто, к примеру мы хотим разукрасить текст, для этого нужно обвести кусок текста мышкой, и нажать на кнопку COLOR, должно выпасть маленькое окошко, в котором выберите подходящий цвет для текста.

Цвет

Если все было сделано правильно, вокруг текста должны появится вот такие теги (смотрите на картинке ниже). Слово red как раз задаёт нашему тексту красный цвет. Если захотите поменять на другой цвет, просто поменяйте слово RED на друго. Слова можно выбрать из списка выдающего окна на кнопке COLOR.

Красный

Следующая кнопка помогает вставить ссылку на страницу, на файл. Работает это тоже очень просто. Обводим слово которое хотим сделать ссылкой и нажимаем на кнопку HTTP://, должно открыться окно в котором нужно указать ссылку, а после нажать на ок. Выделенный текст должен превратится в ссылку.

Ссылка

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

Маил

Должно появится окно в котором укажите адрес электронной почты и нажмите кнопку ок. После адрес почты появится в том месте где вы кликнули мышкой.

Почта

Следующая кнопка помогает вставить картинку в нашу новость. Перед тем как вставить картинку, нужно найти место для неё. Для этого кликнете в редакторе в то место, куда хотите вставить картинку, а после кликнете на кнопку IMG. Как всегда должно появится окно, в котором нужно указать ссылку на картинку.

Картинка

Следующая кнопка LIST, помогает создавать список. В данном случае кнопка создаёт маркированные списки - это когда возле каждого списка появляются маленькие чёрные точки. Есть ещё нумерованные списки - это когда возле списка появляется цифры.

visual

Так вот, чтобы создать список, нужно для начало выбрать место в редакторе, где этот список должен появится и сразу нажать на кнопку LIST.

list

Должно выпасть окно, в котором пишем первую группу слов. Например вы создаёте список стран, значить в первом окне пишите к примеру Россия, после нажимаете кнопку Ок. Должно появится второе окно, в котором пишите вторую страну, например Казахстан, и сразу нажимаете Ок, должно появится ещё одно окно, в котором пишите следующею страну, и так пока у вас не кончатся страны. Если страны закончились а окно появилось, просто нажмите отмена. Должно получится так.

Страны

Визуально всё выглядит так.

Список 2

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

Редактор

И так с кнопкой list мы разобрались, теперь перейдём к последним трём кнопкам. Эти кнопки нам помогают выравнивать текст, картинки, ссылки и другие элементы - по левому краю, по центру и по правому краю. Работать с этими кнопка нужно точно также как и с другими, просто обводим мышкой нужный текст или картинку, и нажимаем на нужную кнопку.

Кнопки по центру

Разбираем кнопки под редактором

Самые первые кнопки которые у нас встречаются под редактором, очень помогают нам оформлять текст. Первая кнопка, а точнее сказать чекбокс, позволяет текст переносить на новую строчку. То-есть, если  в чекбоксе не будет стоять галочка, после добавления новости, весь текст и его элементы будут отображаться подряд, без отступов друг от друга. Вторая кнопка обычно включена автоматически, но если галочку снять, тогда после добавления новости не один HTML тег работать не будет.

br

Выглядит это так - это когда мы активировали чекбокс, замена перевода строк тегом <br>

Текст

А это когда убрали галочку с чекбокса, Включить HTML теги

bez-teg

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

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

Время и автор

Мы выше уже рассматривали как добавлять картинку через визуальный редактор, но есть ещё более простой вариант. Следующие кнопки как раз помогают добавлять картинки к новости. Что-бы картинку загрузить, нажмите кнопку обзор и выберите на компьютере картинку, смотрите что-бы картинка не превышала 2мб. Что-бы загрузить две картинки, нажмите на кнопку плюс.

Добавить картинки

Если картинки выбраны, должны появится вот такие шестерёнки, нажмите на первую.

Нажать на

Должно открыться дополнительное окно, в котором находятся три кода. Первый код отвечает за вывод картинки, второй за вывод подсказки, (Если на вести на картинку будет всплывать подсказка), а вот третий код за название для картинке, (Это нужно для поисковиков).

kod

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

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

ccilki

prekrepit

Следующая строка позволяет задавать теги для новостей. Теги это обычные ключевые слова которые пишутся через запятую, их ещё называют метками. Теги работаю так, если у вас на сайте 20 новостей и из них 11 про Россию, получается что эти новости похожие, у них одна тематика. Значить в каждой новости про Россию, а их у нас 11, вы должны писать одинаковый тег, к примеру НОВОСТИ В РОССИИ. Таким образом, одно это слово в тегах, будет собирать все новости в одну группу и если кто нибудь кликнет по этому слову, тогда у него откроются все новости где присутствует этот тег.

tegi

Вот так выглядят теги когда мы добавили новость на сайт.

tegi visial

Следующие три чекбокса позволяют настроить видимость материала, разрешают или запрещают добавлять комментарии к новости и заменяю внешние ссылки при помощи в стороннего сервиса. Первые два пропустим, я думаю тут всё понятно, а вот третий зачем нужен?

shekbocksi

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

Ну и последняя группа кнопок позволяет добавить новость на сайт и очистить все заполненные поля в редакторе что-бы начать заполнять его заново.

dobawit

Если вы разобрались как работают эти два редактора, тогда вам осталось по практиковаться и ваши новости будут добавляться в несколько минут. В видео ниже мы немного подробнее рассмотрим как работать с этим редактором. Спасибо за внимание.

Задай свой вопрос в комментариях? или в специальном разделе.
Подсказка:

Полезный контент это не ключ к успешной раскрутке сайта, полезный контент настроенный под поисковые системы это ключ.

Курс ещё не готов, но подписчики получат его первыми - как только работа будет закончена. На данный момент 23.08.2017 записано 19 теоретических уроков и 0 практических. Теоретический кус Готов! "Как создать, настроить, наполнить и раскрутить сайт на uCoz"