.

.

Урок № 16. Joomla - язык html.

 

Урок № 16. Joomla - язык html.


Здравствуйте, дорогие читатели блога zuit.ru! Если вы решили сделать сайт самостоятельно, то вам просто необходимо познакомиться с языком, на котором написано большинство веб-страниц.

В прошлом уроке-joomla № 15 мы разбирали, как можно изменить шаблон и немного переделать для себя.

Сегодня мы посмотрим на некоторые страницы вашего шаблона с другой стороны.

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

 

В обычный текст статьи, который вы уже умеете создавать, просто так поставить все это не получится. (Мы это делали в уроке № 5). Предположим, вам надо установить счетчик, чтобы точно знать, сколько посетителей к вам приходит каждый день. Вы получите код, который надо будет каким-то образом разместить на своем ресурсе.


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

Чтобы с вами этого не произошло, мы коротко разберем, что это за странный язык.


 

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

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


Например, такие: все документы (тексты) на языке HTML разбиваются при помощи тегов. Это специальные команды, они заключены в треугольные скобки.

Давайте посмотрим на примере нашего сайта, где все это находится. Эта новая для вас информация будет более понятна на примере шрифта.


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

Сейчас нас интересует кнопка, которая называется «Редактировать HTML-код».



 

 

Нажимаем на нее, после чего текст открывается в таком вот необычном виде.

Если присмотреться внимательно, то становится понятно, что к словам добавлены какие-то странные значки.



 

 

Они стоят в треугольных скобках, сначала такая скобка открывается, а в конце закрывается. Такие команды называются тегами.

Давайте сейчас закроем это окно и выделим все первое предложение жирным шрифтом. Посмотрим, что изменилось.


Снова нажимаем на кнопку «Редактировать HTML – код» и видим, что перед первым предложением и после него появилось слово strong, оно заключено в треугольные скобки.



 

 

Когда мы сделали все первое предложение жирным шрифтом, то к коде сразу же произошли изменения.

Попробуйте сами поменять жирный текст на курсив и проверьте, как изменился документ HTML.

Как видим, после strong добавилось em. Но все эти символы заключены в скобки:

<p><strong><em>

 

А что означает тег, который стоит в начале строки, ведь мы о нем ничего не знаем? А это просто тег нового абзаца. Он будет стоять в начале каждого абзаца, и в конце. Только в конце он немного изменится, и будет таким: </p>. Потому что теги могут открываться и, соответственно, закрываться.


Все цвета, которые вы используете, тоже обозначаются определенным образом. Они представляют из себя цифры и английские буквы. Черный цвет - 000000, красный – FF0000, один из оттенков розового – FF69B4. Существует специальная таблица, в которой можно найти все эти цвета и оттенки.

Поэтому при изменении шаблона достаточно прописать такой код.

 


Давайте зайдем в «Менеджер расширений» - «шаблоны» и установим первоначальный шаблон, который называется rhuk_milkyway.

Выделяем его и нажимаем на кнопку «изменить».

Далее находим иконку «редактировать HTML» и открываем  файл шаблона. Если вы посмотрите внимательно, то уже сможете различить некоторые теги.

Именно здесь нужно вносить изменения, если вас, например, не устраивает формат картинок, прописанных в коде шаблона, который вы подобрали для себя.


 


 

 

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

Тег <body> заключает документ. Обратите внимание, что в самом конце написано </body>.  Перед ним стоит косая черта, потому что здесь он закрывается. Например, код, который вы получите от Яндекса, надо будет вставлять до этого закрывающего тега, но не после.

Вверху этот тег открывается,  перед ним нет косой черты. Вы можете его самостоятельно поискать среди всех этих странных символов.


Нажимаем на красную кнопку «отменить», и теперь откроем «редактировать CSS».

Здесь находятся файлы, доступные на запись. Вы можете просто с ними ознакомиться, не меняя сейчас ничего. Этот язык отвечает за внешнее оформление и форматирование сайта, он довольно сложный для новичка.

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


Что еще вам обязательно нужно узнать, перед тем, как выбирать хостинг и загружать свой ресурс в интернет?

Для вставки кода баннера, счетчика или рекламы можно создавать отдельный модуль.


Поэтому перейдем в «Расширения» - «Менеджер модулей» - «создать» и находим модуль, который так и называется «Произвольный HTML – код».

Выделяем его, а потом нажимаем на зеленую стрелочку вверху.



 

В форме, которая откроется, надо будет выбрать позицию для модуля, написать его название.

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

Там, где написано «пользовательский текст». Здесь не надо будет писать никаких своих слов, просто вставите html-код и сохраните. После этого увидите изменения на своем сайте.

 

 

Меня не сбить с пути! Мне пофигу, куда идти!!!


 

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

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


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


P.S. Понравилась статья? Не забудьте подписаться на обновления и получать

свежие новости на e-mail, чтобы не пропустить ценную информацию.

 


Советуем вам прочитать другие интересные статьи:


Делаем правильные ссылки. Настройки сайта.

Галерея для сайта joomla

Как установить Phoca Gallery и русифицировать

Делаем слайд-шоу на сайте

Деньги, часть 2. Как стать богатым?

Как разозлить флегматика?

 


Добавить комментарий


Защитный код
Обновить

подписаться на новости блога 

Введите Ваш e-mail адрес:

Delivered by FeedBurner

Компьютерная графика 

Начинающему вебмастеру 

Рассылка