Основи блокової верстки - Як працюють сайти, підвищення безпеки та структура HTML коду
Привіт, шановні читачі блогу KtoNaNovenkogo.ru. У цій статті мова піде, як ви вже, напевно, здогадалися з назви, про так званої блочної верстки сайту. але такою мовою, щоб зрозуміло було будь-якій людині, навіть ніколи з цим не стикається.
На даний момент існують два основних способи верстання - блокова DIV верстка і таблична. Трохи раніше, в статті присвяченій створенню таблиць в HTML. я писав про деякі недоліки останнього варіанту, тому зараз не буду зупинятися на цьому питанні.
Що нам буде потрібно для створення простого макета сайту
Приймемо як належне, що використання DIV верстки в більшості випадків буде краще, ніж використання табличній. У той же час вона є трохи складнішою в освоєнні і розумінні, ніж таблична, але воно того варте.
Не пошкодуйте часу і спробуйте зануритися для початку, хоча б прочитавши цю статтю, в якій я постараюся в доступній формі розповісти про основні моменти і принципах, що використовуються при створенні макета (2 і 3 колонки) сайту на дівах (або ж по іншому контейнерах).
Звертаю вашу увагу, що в цій статті я досить сильно забігаю вперед в нашому з вами процесі вивчення основ. Справа в тому, що крім знань основ HTML (тут все для чайників) вам знадобляться хоча б базові знання з CSS (каскадних таблицях стилів), які є невід'ємною і основною частиною блокової верстки. Але як раз про CSS я ще не розповідав.
Для того, щоб нам створити простий макет сайту, заснований на блоках, досить буде двох файлів, в одному з яких ми пропишемо HTML код нашого макета (нехай це буде файл index.html), а в іншому - розмістимо стильове оформлення макета (назвемо цей файл style.css). Чому ми назвали перший з файлів index, а не якось по іншому?
Як браузер працює з файлами index
то браузер здійснює пошук в кореневій папці мого блогу (фізично файли блогу знаходяться на сервері хостингу, в папці public_html. яка асоційована з доменним ім'ям мого блогу ktonanovenkogo.ru). Що ж шукає оглядач в корені мого блогу? А шукає він файл index, і знайшовши його, відкриває:
- в разі index.html, браузер відразу ж перетворює його HTML код в видиму нам сторінку блога
- в разі index.php, на сервері хостингу почне виконуватися в реальному часі PHP скрипт, який прописаний в ньому. Швидкість виконання залежить від потужності і завантаженості сервера вашого хоста, а так само від кількості виділених особисто для вашого сайту його ресурсів. В результаті виконання цього PHP коду, на виході буде сформована сторінка в форматі HTML, яку браузер вже перетворює в видиму вам веб-сторінку.
До речі, в папках з дистрибутивом Joomla, які за умовчанням не повинні мати файлів index. примусово вже доданий порожній index.html. Все це зроблено для підвищення безпеки роботи. Але даний спосіб дуже трудомісткий, бо таких каталогів може бути безліч. Тому можна скористатися альтернативним способом.
Є такий файл, призначений для додаткової конфігурації сервера Apache (більшість хостингів працюють під управлінням Apache), який називається .htaccess. Так, так, саме так, з точкою перед назвою і без розширення. Специфіка Лінукса, однако. Так ось, він скоріше за все вже є у вас в кореневій папці сайту.
Усе. Власне, цього ми і добивалися.
Створюємо найпростіший макет сайту в 2 колонки
Повернемося до нашого макету сайту на основі блокової верстки, який в найпростішому варіанті буде складатися всього з двох файлів - index.html і style.css. Їх ви можете покласти, наприклад, в будь-яку створену спеціально для цього директорію на віддаленому хості. Припустимо, в корені створите каталог TEST за допомогою все тієї ж Файлзіли.
У схематичному вигляді 2 стовпчик макет на основі Div буде виглядати так:
Кожен з його елементів ми помістимо в свій контейнер DIV, дамо йому унікальний ID, для якого в файлі CSS додамо ряд властивостей, що описують зовнішній вигляд і положення даного контейнера на сторінці.
Крім цього всі контейнери з елементами 2 колоночного макета ми помістимо в один загальний DIV, який дозволить нам регулювати положення всього макета на сторінці (задати його ширину, вирівнювати щодо краю сторінки і т.д.)
Базові елементи структури будь-якого HTML коду
Почнемо, природно, з написання коду у файлі index.html. Ви вже, напевно, знаєте, що в будь-якому HTML файлі присутні вихідні обов'язкові елементи, які виглядають приблизно так:
укладена між HEAD, дозволяє підказати браузеру, в який саме кодуванні російської мови збережений цей документ. У нашому випадку (вказано кодування UTF-8, але так само досить поширеною є ще й кодування Windows-1251. Взагалі, за допомогою мета тегів в заголовку документа, крім кодування російської мови, зазвичай ще додають ключові слова документа (keywords), наприклад:
або його опис (description), наприклад:
і багато іншого.визначає заголовок сторінки (TITLE), що створюється за допомогою цього документа. Ви можете бачити вміст TITLE в самому верху вікна вашого браузера.
Думаю, що загальну структуру документа добре візуалізує наступний малюнок:
Ну, ось довелося дуже суттєво відволікатися на пояснення важливих моментів, зустрінутих в ході початку розповіді про блокової верстці (DIV верстки), та так, що в цій статті місця на розповідь про створення 2 колоночного макета вже і не залишилося. Але думаю, що нічого страшного не станеться, якщо ми продовжимо в наступному.
Удачі вам! До швидких зустрічей на сторінках блогу KtoNaNovenkogo.ru
Неправильне твердження що браузер шукає ці файли. Насправді сервер при зверненні до нього по доменному імені дивимося настройки сайту і повертає сторінку, яка задана за замовчуванням. Слово index не є єдиним за замовчуванням (тобто ще Default). Так що в принципі можна задати будь-яку сторінку для повернення за замовчуванням.
Vladimir. спасибі за зауваження, врахуємо.
Вообщем, спасибі за ваші статті.
Дякую за статтю.
Питання: Хіба зараз пошукові роботи звертають увагу на meta name = "keywords»? Наприклад, я читав, що вже давно роботи на цей заголовок не дивляться.
Ось наприклад пункт «Як браузер працює з файлами сайту, чому особливе значення надається файлам index.html і index.php, як забезпечити безпеку сайту» мене поранив до глибини душі.
3. «саме файл під назвою index.html або index.php» - це частково не вірно, оскільки назви цих файлів, які є індексними для всіх без винятку каталогів на сайті задаються в настройках сервера і можуть бути будь-якими. Наведені вами варіанти - це лише загальноприйняті назви.
PS Прошу вибачення за буркотливість, можливо ви писали для новачків і намагалися все спростити, але все ж надалі постарайтеся не допускати таких очевидних помилок, щоб не вводити читачів в оману.