Простий новинний шаблон html. Прості HTML шаблони
Отже, шановні веб-майстри-початківці, ми познайомилися з основами HTML.
Тепер давайте, застосувавши ці знання, швиденько зробимо собі маленький веб-сайт і викладемо його в веб.
Правда повноцінний ресурс, із застосуванням лише html, зробити важко, але ось сайт-візитку з декількох сторінок, цілком можливо.
Якщо у когось саме він є метою, і немає бажання вивчати інші мови програмування, то ця стаття для них.
Коротше, в самописному виконанні без використання CMS простіше вже нічого не існує.
А для тих кому потрібно щось по крутіше, наприкінці статті є посилання на статті з кодом блочного шаблону, з використанням CSS і кодом динамічного сайту з використанням PHP.
Сайт на чистому html зробимо прямо на цій сторінці, так би мовити – сайт у сайті, цілком робочий та готовий до заповнення контентом.
Розділимо весь процес на три частини.
1. Створення директорії сайту на комп'ютері.
2. Створення сайту.
3. Переклад сайту з нашого комп'ютера на хостинг, тобто в інтернет.
Створення директорії сайту на своєму комп'ютері
Перший пункт найпростіший. Про те, як створити директорію дуже наочно показано у статті (всі посилання з цієї сторінки відкриваються в окремому вікні, щоб не загубитися).
А що, і в яку папку покласти, я докладно покажу після коду головної сторінки, щоб було вже з чим йти в директорію.
Потім приступимо до другого пункту, творчого.
Створення шаблону сайту
Для створення шаблону буде потрібно редактор, у який потрібно буде вставити наведений нижче код.
Це може бути як простий віндовський Блокнот, так і будь-який інший текстовий редактор.
За основу шаблону візьмемо багатошарову HTML таблицю. Раніше, до появи CSS всі сайти писалися таблицями, тепер більш популярною стала блокова верстка.
Але й досі таблічна структура не застаріла і з успіхом застосовується.
Наприклад інвестиційна CMS H-script із найскладнішим функціоналом, повністю зверстана на основі таблиць.
Отже, такий сайт, з мінімальним оформленням.
Як надалі оформлювати таблиці, дуже докладно показано у статті.
|
<!--Створюємо таблицю контейнер, якою задаємо наступне
оформлення:
border="1" - рамка навколо контейнера. Збільшивши кількість, можна збільшити товщину рамки.
align="center" - розміщуємо контейнер центром екрана.
rules="rows" - прибираємо подвійну рамку.
style="width:60%;" - додаємо стильові властивості, що робить
контейнер і весь сайт "гумовим".
Зробити повноцінний адаптивний дизайн, цим способом неможливо.>
|