Основы HTML

Если вы проделали операции, описанные в предыдущем сообщении, то все условия для изучения HTML и PHP созданы.

Для начала немного теории.

Все, что отображается в окне браузера, при просмотре вами различных сайтов, имеет четкое описание с помощью специального языка. Этот язык называется HyperText Markup Language — «язык разметки гипертекста». Что такое текст в принципе понятно. Приставка "гипер" означает " превышение предела". Гипертекст - это новый уровень простого текста, когда мы не ограничиваемся обычным чтением, но и взаимодействуем с ним. Кликая на определенных места гипертекста (ссылках) мы изменяем привычный порядок чтения текста, переходя к интересующему нас фрагменту. Эту технологию вы наверняка знаете, если смогли добраться для чтения моего блога.

Итак, что же представляет собой этот язык? Забегая вперед скажу, что это очень просто!

Основы HTML

HTML в первую очередь язык РАЗМЕТКИ. В нем нет алгоритмики - ветвлений, циклов и т.п. Он представляет нам набор основных элементов из которых строится HTML страница. Эти элементы - параграфы, заголовки, ссылки,  кнопки, окна ввода и прочие комбинируются согласно основных несложных правил, которым подчиняется структура документа (странички).

Для тех, кому не терпится приступить к практике давайте попробуем "на  вкус" несколько элементов. 

Открывайте свой любимый текстовый редактор и набирайте код:

<h1>Привет1</h1>

<h3>Привет3</h3>

<h5>Привет5</h5>

Вот как это будет выглядеть:

Обратите внимание на строку состояния текстового редактора, а именно на кодировку. Здесь и в дальнейшем мы использовать кодировку utf-8. Если это не так, то в главном меню выберите пункт "Кодировка", в появившемся меню "Кодировать в utf-8 (без BOM)".

Затем сохраните созданный вами документ в папку "c:\www\test" с именем "primer1". Не забудьте, что тип файла должен быть html.

Запустите виртуальную машину из предыдущего сообщения. Затем запускайте браузер и в строке адреса введите путь к вашей новой страничке "http://test/primer1.html" и нажмите клавишу "Enter".
Полюбуемся, что у нас получилось. Если ваш браузер показывает подобное тому, что изображено ниже, это легко поправимо, нужно выбрать правильную кодировку.

Для этого откройте меню настройки браузера (в моем случае это Google Chrome),

и выберите Инструменты -> Кодировка -> Юникод (UTF-8).

Вот, что у нас получилось.

Поздравляю, вы создали свою первую html-страницу. Она очень простая, но уже многому может нас научить. Давайте рассмотрим ее подробнее.
Страница содержит три практически одинаковых строчки вида

<h1>Привет1</h1>

отличающиеся только цифрой за символом h.
Конструкция вида < . . . >  называется "тег". Текст между < и > определяет, что произойдет с элементами последующим текстом или какой будет показан элемент. Теги бывают открывающими и закрывающими. Закрывающий тег отличается от открывающего наличием символа косой черты - "/", его еще называют "слэш". Как вы наверное догадались, цифра в нашем примере указывает на размер шрифта - чем меньше цифра, тем больше заголовок. Тег "<h_>" - заголовок (от англ. header), а цифра указывает на уровень заголовка.  Ниже представлены примеры открывающего и закрывающего тегов:

<h1>Заголовок</h1>
<p>Параграф</p>
<strong>Выделение</strong>

Теги не всегда бывают парными:

<input type="text" name="user">

<input type="checkbox" name="opros" value="html">Я хочу изучить HTML

Попробуйте вставить приведенные выше фрагменты кода и посмотреть на результат. Не забывайте сохранять ваш документ. Пользуйтесь клавиатурными комбинациями, так, для сохранения документа нажмите Ctrl+S.

Для того, чтобы вы увидели изменения, произошедшие с документом, нужно сбросить кеш броузера, где хранится код нашей страницы. Это делается для сокращения трафика между компьютером и сервером. Для очистки кеша в браузере Google Chrome нажмите комбинацию клавиш Ctrl+Shift+Del, в появившемся окошке отметьте галочкой пункт "Очистить кэш" и нажмите кнопку "Очистить историю".

После этой процедуры откройте вкладку с нашей страничкой и обновите страницу нажав клавишу "F5". Должно получиться примерно вот так:

Подробнее рассмотрев результат, можно заметить, что несмотря на то, что мы писали теги на разных строчках, элементы "выделение", "окно ввода" и "флажок" выстроились в одну линию, а заголовки и "параграф" на отдельных строчках. Это произошло потому, что браузер "знает", что после тегов заголовков и параграфа следующий элемент страницы надо выстраивать ниже. Для других тегов такое правило не действует. Для принудительного перевода строки после нужных тегов вставьте тег <br> (break row - англ. сломать строку):

<strong>Выделение</strong><br>

<input type="text" name="user">     <br>
<br>

<input type="checkbox" name="opros" value="html">Я хочу изучить HTML

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

На этом пока все. В следующем посте я расскажу об основах языка PHP.