Немного рассмотрели теории, теперь дам немного практики. Создадим основу нашего оформления, то есть напишем код, который не меняется в любых темах.
(P.S.: Полный текст поста можно посмотреть в моем блоге, в ленте они не открываются)
Итак, привожу полный код, который составляет скелет темы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Блок 0 -->
<html xmlns="https://www.w3.org/1999/xhtml">
<!-- Блок 1 -->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>{Title}</title> <!-- Заголовок страницы -->
<meta name="viewport" content="width=775"/> <!-- iPhone -->
<!-- Стили по умолчанию -->
<style type="text/css">
</style>
</head>
<!-- Блок 1 конец -->
<!-- Блок 2 -->
<body>
</body>
<!-- Блок 2 конец -->
</html>
<!-- Блок 0 конец -->
Открываем блокнот (или Notepad++, далее просто блокнот) и создаем новый документ. Сохраняем его с любым именем в любую папку (Notepad++ поддерживает подсветку синтаксиса, то есть ключевых слов. Для включения этой опции вверху нажмите: Синтаксис-H-HTML). Копируем вышепреведенный код в блокнот и опять сохраняем. На этом телодвижения оканчиваются, ибо теперь нужно обхяснить что все эти строчки значат.
Самая первая строка (с DOCTYPE) определяет формат Вашего документа. Дело в том, что все сайты пишутся на языке разметки HTML (стоит отметить, что это не язык программирования, а именно язык разметки страницы!). Так как компьютер пока не научился понимать то, что мы хотим сделать, просто из мыслей, нужно давать ему команды, чтобы показать, что вот в правом углу мы хотим картинку, а в левом - ссылку на другой сайт. Для этого и придумали язык разметки - HTML. Чем больше становилось пользователей Интернета, тем больше становились запросы. Старый язык уже их не удовлетворял, поэтому появилась новая версия этого языка. Потом еще одна и так далее. На данный момент самая свежая версия языка - это XHTML. Вот как раз первая строка и показывает, что мы пишем наш документ на этом языке. В общем вдаваться в это не нужно, просто запомнить - это строка должна быть первой и всегда.
Далее идет комментарий "Блок 0". Что такое комментарий? Это строка, или часть строки, на которую в последствии наш браузер (Опера, Фаерфокс, Хром и т.д.) не будет обращать внимания. То есть эти строчки, или части строк, никак не влияют на наш код и не отображаются на странице. Комеентарии программисты ставят для того, чтобы объснять код другим ил же для себя, чтобы не забыть что значит какая-либо строка в его коде. Я расставил комментарии для ссылания на них в статье.
Далее мы видим тег <html>. В языке разметки веб-страниц чтобы указать какой элемент страницы вы хотите вывести на экран необходимо использовать теги. Это названия элементов заключенные в скобки < и >. То есть тег <html> показывает, что с этого места начинается описание нашего сайта. Если вы посмотрите на последнюю строчку, то заметите похожий тег </html>. Это, так назыываемый, закрывающий тег. То есть он показывает, что здесь наша страница заканчивается и далее описания элементов нет. У каждого тега должен быть закрывающий тег!!! Запомните это (хотя бывает, что открывающий тег сразу является и закрывающим, но пока это нам не нужно). Следуйте правилу - если вы открываете тег, сразу же ниже пишите его закрытие, а потом внутри код.
После того как мы указали начало нашей страницы мы должны описать две вещи - голову сайта и его тело. Голова сайта раньше использовалась ля вывода заглавия страницы. Сейчас же она обычно используется, чтобы внутри нее записать какие-то команды, типа подключения разных эффектов страницы и так далее. За голову сайта отвечает тег <head>. Если будете смотреть дальше, то несколько строк ниже там будет и закрывающий тег </head>. Все что между этими двумя строками - это голова сайта. Строки внутри головы мы рассмотрим в следующий раз.
Далее мы видим тег <body> и сразу же закрывающий тен </body>. Между этими строками мы и будет записывать как будет выглядеть наш блог. Пока что между ними ничего нет, так как мы создаем основу, следовательно никакого наполнения. Этот тег пказывает с какого места мы начинаем описывать тело нашего блога, то есть все то, что будет отображено на странице.
Ну и последняя строка - закрывающий тег (который мы уже рассмотрели выше), означающий, что документ закончился.
Пока что все, если есть что-то непонятное - пишем мне в теме ВКонтакте. Я обязательно объясню все. И еще - все теги и что они значат можно посмотреть здесь - Справочник
Показать/Скрыть текст статьи