Знакомство с HTML. Разметка страницы.

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

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

Для работы понадобиться текстовый редактор например Notepad++ (не случайно, бесплатный, есть подсветка) в дальнейшем можно смело использовать его как постоянный инструмент для редактирования и просмотра кода.

Пункт первый содержание служебной части.


У каждого сайта есть начальная страница index.html (или index.php) которая подтягивается как правило из шаблона (точнее её разметка) для версий icms 1.X.X это страница template.php именно она формирует страницы ( в том числе и index ) сайта.

(для второй версии буду признателен если кто даст дополнение)

По сути это не важно... Важен принцип.

Открываем template.php (находится по адресу /templates/_default_ (или ваш шаблон)/template.php в Notepad++ и.... видим кучу непонятного.
Рассмотрим "не понятное".

На самом деле мы видим устройство классической HTML страницы.
Вначале идет вставка <?php которая соответственно обозначена (не всегда и везде есть, не видимая, служебная часть).

Дальше все как у обычных страниц.

В самом начале идет DOCTYPE принадлежность документа к виду документа. В данном случае HTML то есть веб страница.
Не вдаваясь в подробности скажу что дальше идет характеристика вида HTML, старый, новый...

На сегодня наиболее актуален HTML5 обычно обозначается как <!DOCTYPE html>

дальше идет служебный тег <head>, почему служебный, потому что это особый тег, его на странице никогда не видно, но он всегда есть, в нем заключена служебная информация для вашего браузера, достаточно разнообразная.

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

Например по порядку здесь можно найти:

Тег (метатег-глобальный, для всего сайта) отвечающий за кодировку страницы:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

Дальше здесь же с помощью скрипта будет выводится:

Метатеги описания страницы, заголовок, ключевые слова, вид и предназначение для различных устройств.

Ниже идут подключение скриптов и таблиц стилей, которые так же являются служебной информцией.

Из выше написанного заключаем что между тегами <head></head> заключена информация которая есть на любой странице, но нам она не видна. Например в Notepad++ это выглядит так:

Знакомство с HTML. Разметка страницы.


Пункт второй содержание видимой страницы.

После закрывающего тега </head> начинается открывающий (а значит есть и закрывающий ) тег <body> в который заключена вся основная часть страницы после которой тег должен быть закрыт </body>.

Как правило оснавная часть страницы разбита в стандартном случае на шапку сайта (шапка сайта обиходное название этой части страницы) которую обычно заключают в тег <header></header> что мы и можем увидеть в Notepad++

Знакомство с HTML. Разметка страницы.

Дальше идет собственно странца которая может включать в себя , меню, сайдбары, контент и т.д. то есть непосредственно наши отдельные страницы.

Знакомство с HTML. Разметка страницы.



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

Знакомство с HTML. Разметка страницы.

То есть подводя итог можно сказать любая страница имеет точно :

<head></head> - для служебной и технической информации, невидимой пользователям

и

<body></body> - основное, видимое содержание страницы.

В самом же теге <body></body> часто расположены важные составные части шаблона, шапка сайта, горизонтальное меню, сайдбары (левые или правые колонки), подвал сайта.

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

ЗЫ: постараюсь в дальнейшем написать еще несколько статей для тех, кто только знакомится.
Комментарии (7)
fincheck 18 августа 2016 в 17:22 0
Спасибо. Очень кстати. Только надумал изменить главную страницу.Очень мало литературы мне кажется по данной cms. Будем разбираться и ждать следующих.
Олег Васильевич я 18 августа 2016 в 19:48 0
Если интересует создание шаблонов для единички, вам сюда.
Обалденное чтиво!
fincheck 18 августа 2016 в 22:09 0
Вот бы такое для двоечки, или что то можно применить и от туда? Я просто начинающий и хотелось бы БОЛЬШЕ информации. Для Joomla например очень много чтива да и видео. Я например по Joomla смог разобраться с движком хоть и не очень разбираюсь в php да и со всем остальным, но от куда ноги растут примерно понял. А с нашей instantcms чувствую что моё(очень нравится), но хоть убей не въеду ни как, что куда и от куда. Вот бы запилил кто ВИДЕО КУРС по "кишкам" так сказать.
Jestik 19 августа 2016 в 08:32 0
Та тут по шаблону то ничего сложного нету на самом деле. Перекроить шаблон можно полностью немноо зная хтмл и цсс. Смотрите исходный код, меняете, смотрите и т.д.
Василич 19 августа 2016 в 00:50 0
Спасибо. Очень кстати. Только надумал изменить главную страницу.Очень мало литературы мне кажется по данной cms. Будем разбираться и ждать следующих.
Какое это имеет отношение к данной цмс-ке? Это элементарный хтмл, и простите, но по мне так данному сабжу тут не место, максимум на форуме. smile
Rainbow 19 августа 2016 в 08:16 +2
Возможно и на форуме... Думал публиковать или нет, но... У нас ведь много людей которые что называется по нолям, но спросить стесняются. Пусть будет, еще пара будет про то как что то прицепить, и про фаербаг (наверное видео) загадывать не буду...
Алексей Тимофеев 10 сентября 2016 в 00:30 -1
Отличное начало+ Давай видео)