Чтобы браузер мог красиво отобразить вашу информацию ее нужно оформить специальным образом.

Создавая документы, например,  в редакторе WORD мы пользуемся тем, что нам предлагает редакор. Выделение жирным, цвет текста, таблицы и многое другое. Однако эти красиво оформленные тексты выглядят красиво только в WORD. А если мы попробуем открыть их например в Notepad, то увидим набор кракозючек вместо текста.

Это происходит потому, что WORD использует для оформления текстов свой особоый язык, понятный только ему одному. 

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

Как это работает 

Например, мы написали в WORD 2 абзаца. Конец абзаца мы обозначили нажав клавишу ВВОД и редактор начал текст с новой строки. 

В HTML абзац оформляется следующим образом:

<p>Текст абзаца.</p>

Латинские буквы в угловых скобках называются тегами. Для каждого вида отображения существуют соответствующие теги. Например, основные теги

P – абзац

UL – ненумерованный список

OL – нумерованный списко

LI – строка списка

TABLE – таблица, TR – строка таблицы, TD – ячейка в строке таблицы. В HTML нет тегов для выделения столбцов.

B – жирный шрифт, I – курсив, U – подчеркивание.

Теги ставятся в начале и в конце блока форматируемого текста.

Например

<ul>

<li> первая строка списка</li>

<li>вторая строка ненумерованного списка </li>

</ul>

В результате мы получим:

• первая строка списка
• вторая строка ненумерованного списка

Тег, который стоит вначале блока называется открывающий тег, в конце – закрывающий. 

Кроме того, что теги выделяют области текста, они выполняют еще и управляющие функции. Управляющие теги всегда имеют специальные свойства.

Например, тег A – ссылка, имеет свойство href = адрес куда должен перейти пользователь.  Тел IMG – изображения,  имеет свойство src = адрес файла где храниться картинка, которая будет вставлена в текст в том месте, где стоит тег. 

Рассмотрим пример

<p>Зеленое яблочко - <img src=”images/apple.jpg”> </p>

<p><a href=”apple.html”>кликни, чтобы перейти к яблочкам</p>

Выглядеть это будет примерно так:

 

Зеленое яблочко 

Кликни, чтобы перейти к яблочкам 

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

Например, мы можем написать 

<p style=”text-weight:bold; color:red;”>Жирный красный текст</p>

Или

<p style=”color:red;”><b>Жирный красный текст</b></p> 

Результат будет одинаков. Такой код покрасит весь абзац в красный цвет. 

Жирный текст 

Если мы хотим написать в одном абзаце 

Наш текст с красным отдельным словом и еще с зеленым словом. 

Код будет следующим 

<p> Наш текст с <span style=”color:red;”>красным</span> отдельным словом и еще с <span style=”color:green;”>>зеленым</span> словом.</p> 

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

Таблица на HTML оформляется так: 

<table>

<tr><td>Ячейка 1 строка 1</td><td> Ячейка 2 строка 1</td></tr>

<tr><td>Ячейка 1 строка 2</td><td> Ячейка 2 строка 2</td></tr>

</table>

 

Ячейка 1 строка 1	Ячейка 2 строка 1
Ячейка 1 строка 2	Ячейка 2 строка 2

 

Теги TABLE и TD имеют свойство width – ширина.

Если написать

<table>

<tr><td width=”200px”>Ячейка 1 строка 1</td><td> Ячейка 2 строка 1</td></tr>

<tr><td>Ячейка 1 строка 2</td><td> Ячейка 2 строка 2</td></tr>

</table>

Ячейка 1 строка 1	Ячейка 2 строка 1
Ячейка 1 строка 2	Ячейка 2 строка 2

 Нам достаточно определить ширину для одной ячейки столбца.

 

Ручная HTML верстка довольно занудное дело. Но сейчас уже существует множество специальных визуальных HTML редакторов, работать в которых также легко и удобна, как и в обычных текстовых. Например, FrontPage, Dreamwiever.

Все хорошие системы управления сайтами имеют встроенные редакторы.

Не смотря на это,  знание основ HTML часто бывает полезным.

 

На наших занятиях мы кратко знакомимся с основыми тегами, свойствами и стилями.  Углубление в HTML и CSS происходит в процессе работы при необходимости. Мы делаем упор на изучение и использование встроенного в Joomla редактора текстов. 

Уже умеет делать сайты на Joomla и хотите повышать свой уровень? Присоединяйтесь к нам в соцсетях и на Youtube.