Чтобы браузер мог красиво отобразить вашу информацию ее нужно оформить специальным образом.
Создавая документы, например, в редакторе 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.