Шаблон сайта на чистом HTML

Итак, уважаемые начинающие веб-мастера, мы познакомились с основами HTML.

Теперь давайте применив эти знания, быстренько сделаем себе небольшой сайт и выложим его в интернет.

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

Если у кого-то именно он и является целью, и нет желания изучать другие языки программирования, то эта статья для них.

Можно конечно и большой сайт на чистом html сделать, если не особо мудрить с дизайном, и не использовать формы. На всякий случай, в конце статьи, я об этом расскажу.

Короче, в самописном исполнении, без использования CMS, проще уже ничего не существует.

Вам нужно будет, представленный ниже, код скопировать в редактор, и немного напрягшись, подкорректировать его, согласно моим пояснениям и своим желаниям.

Ну, давайте всё по порядку. Для лучшего понимания, разделим весь процесс на три части.

1. Создание директории сайта на своём компьютере.

2. Редактирование представленного ниже кода (шаблона) и изготовление картинок, или создание непосредственно самого сайта.

3. Перевод сайта с нашего компа на хостинг, то есть в интернет.

Первый пункт самый простой. О том как создать директорию очень наглядно показано в статье Создание директории сайта (все ссылки с этой страницы открываются в отдельном окне, чтоб не потеряться).

Затем приступим ко второму пункту, самому творческому. Для начала давайте возьмём вот такой шаблон

Ниже представлен html код этого шаблона. Его основа — это HTML таблица.

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

Но и до сих пор табличная структура с успехом применяется. Например CMS H-script со сложнейшим функционалом, целиком написана на основе таблиц.

2 <!DOCTYPE html>
3 <html lang="ru">
4    <head>
5        <meta charset="utf-8" />
6        <title>Название сайта</title>
7 </head>
8 <body bgcolor="d5713f">
9 <table border="1" bgcolor="cc215a" width="800" align="center"> 
10 <tr>
11 <td bgcolor="e6e6fa"> 12 <!--Шапка сайта.--> 13 <table border="1" bgcolor="cc215a" width="790" height="200"
cellpadding="10"> 15 <tr> 16 <th background="http://trueimages.ru/img/74/53/c9e1d3aa82a2031988b981cecd3.png"> 17 <h1><font color="cc215a" face="Monotype Corsiva">
Название сайта (организации)</font> 18 <h3 align="left"> 19 <font color="cc215a"><font size=+2>Описание сайта,
адрес и телефон организации</font></font> 20 </h3> 21 </h1> 22 </th> 23 </tr> 24 </table> 25 <!--Основной контент-->
26 <table border="1" bgcolor="cc215a" width="790" cellpadding="10"> 
27 <tr> 
28 <td rowspan="4" width="600" bgcolor="e6e6fa"> 
29 <h3>Название статьи</h3> 
30 <p style="text-indent:20px"><span style = "font-size: 30px;">
<font face="Monotype Corsiva"> <font color="cc215a">
<strong>З</strong></font></font></span> дравствуйте уважаемые
будущие веб-мастера!Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.</p>
31 <p>Почему я решил его сделать? За те 3 месяца, пока разбирался в
сайтостроении и создавал этот ресурс обнаружилось,
что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися
и не обращают на них внимание
. А мне, учитывая возраст и «опыт», было не просто
понять как раз эти нюансы, они отнимали больше всего времени.</p>
32 <p>И я решил написать свой материал,
так что-бы другим было легче сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
Если вам что-то будет непонятно, спрашивайте,
для меня нет «глупых» вопросов.</p> 33 <p>Читайте и создавайте свой сайт самостоятельно,
каким бы ни был Ваш возраст и стаж работы на компьютере.
Уверен, у Вас получится еще лучше и уж точно,
в несколько раз быстрее, чем у меня.</p> 34 </td> 35 <!--Сайдбар--> 36 <td bgcolor="e6e6fa" align="left"> 37 <h3>Меню</h3> 38 <p><img src="http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg">
Главная</p> 39 <p><img src="http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg">
Другая страница</p> 40 <p><img src="http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg">
Другая страница</p> 41 <p><img src="http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg">
Другая страница</p> 42 </td> 43 </tr> 44 <tr> 45 <td bgcolor="e6e6fa" align="center"> 46 <h3>Дополнительная информация</h3> 47 <p align="left">Текст дополнительной информации</p> 48 </td> 49 </td> 50 </tr> 51 </tr> 52 </table> 53 </table> 54 </body> 55 </html>

Вот этот простенький код мы и будем редактировать т.е. делать из шаблона свой собственный сайт. Сначала давайте посмотрим по номерам строк, что и как в нём можно изменять.

6. На главной пишется название сайта, на страницах — заголовок страницы. Это название отображается только во вкладке браузера.

8. Изменив значение d5713f, меняется цвет полей.

9. Здесь можно убрать внешнюю рамку border="1", изменить цвет рамки bgcolor, изменить ширину блока с контентом width

11. Меняется фон страницы.

13. Блок шапки сайта. Можно изменить толщину рамки border="1", цвет рамки bgcolor, ширину width и высоту height блока, отступ текста от рамки cellpadding.

16. Картинка в шапке сайта. Как сделать картинку для шапки сайта в Paint

17. Заголовок сайта. Можно изменить размер, добавив атрибут size, цвет, и шрифт заголовка сайта.

18. Подзаголовок (описание). Если вместо left написать right, то подзаголовок сместится к правому краю.

19. Меняется цвет и размер подзаголовка. Можно задать ширину, добавив атрибут width, тогда подзаголовок разместится в несколько строк.

26. Рамка вокруг текста. Можно поменять толщину рамки border, цвет bgcolor, и отступ текста от рамки sellpadding.

28. Задаётся высота статьи относительно сайдбара, rowspan="4". Это означает, что если статья превысит размер сайдбара более чем в 4 раза, то она начнёт оттягивать сайдбар вниз.

Так-же здесь меняется ширина статьи, и фон под текстом.

30. Красивая заглавная буква. Здесь можно менять длину красной строки text-indent, размер заглавной буквы font size, шрифт буквы font face, и её цвет.

31, 32, 33. Как форматировать текст можно прочитать в статье Форматирование текста

36. Сайдбар. Меняется фон сайдбара bgcolor, и расположение align.

37. Заголовок меню.

38, 39, 40, 41. Строки меню с картинками маркерами. Можно изменить маркер. Для этого в значении атрибута src вставляется адрес Вашей картинки, вместо "Другая страница", пишутся названия Ваших страниц. Вставляются ссылки на указанные страницы.

45. Блок дополнительной информации в сайдбаре.

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

Чтоб исправить этот недостаток, придётся воспользоваться стилевыми свойствами.

Хотя статья и называется Шаблон на чистом HTML, но без стилевых свойств об адаптивности нечего даже и говорить.

Как адаптировать шаблон — это отдельная тема, здесь же я покажу только как можно сделать таблицу "резиновой".

Для этого в строках 9, 13 и 26, атрибут width заменим на стилевое свойство style="width: %;".

9 <table border="1" bgcolor="#cc215a" align="center" style="width:80%;"> 

В 13-ой и 26-ой строках — width: 100%.

Чтобы из этого шаблона сделать свой сайт, необходим редактор. Самым оптимальным я считаю редактор Notepad++.

Он бесплатный, легко устанавливается, очень простой в использовании, и снабжён всеми функциями, которые нам необходимы.

Конечно, если у кого-то есть Дремвьювер, или какой другой редактор такого типа, то можно использовать его, а если нет, то устанавливаем Notepad++.

Как это делается? посмотрите в статье Установка Notepad++, а как создать первый файл сайта, в статье Каркас страницы.

Установили, ознакомились. Начинаем работать.

Открываем Notepad++, открываем «Новый документ», проверяем и если нужно исправляем кодировку на uft-8 (без БОМ), копируем код сайта с моей страницы,  вставляем его в поле редактора, и убираем мою нумерацию строк.

Она была нужна только для рекомендаций по редактированию.

Затем выбираем "Файл — Сохранить как…" , в открывшемся поисковике находим созданную папку "website", в строке "Сохранить"(внизу окна поисковика) меняем название с "nev1" на «index.html», и сохраняем.

В редакторе должна появиться такая картинка

 

А в "Документах", в папке "website", должна образоваться вот такая конструкция

Теперь, чтоб в дальнейшем не писать длинные адреса для изображений, откроем папку content и создадим в ней ещё одну папку для картинок с названием images1.

В неё будем складывать изображения для всех страниц, кроме главной.

Выбираем меню Запуск (верхняя строка панели редактора), и в нём Launch in Chrome.

Если конечно у вас другой браузер, то выбрать нужно его. В браузере должен открыться шаблон, который показан в начале статьи.

Вот теперь можно начинать его править так, как Вам нужно. Все позиции, которые можно изменить, указаны в рекомендациях к коду.

После изменения какой либо позиции, нужно нажать Сохранить(третья иконка слева), и через Запуск посмотреть как получилось.

Поле для статьи и поля в сайдбаре будут увеличиваться по вертикали, по мере заполнения их текстом, автоматически, причём если высота текста статьи не ограничивается, то высота текста в сайдбаре не должна превышать высоту статьи.

Теперь разберёмся с картинками. Изображения в моём шаблоне загружены через сервис trueimages.

Вы же будете делать свои, и сохранять их в папке images и images1 директории website, значит адреса картинок будут другими.

Как сделать картинку рассказано в статье Как сделать картинку для шапки в Paint(это для тех кто не знаком с фотошопом).

А адреса у Вас буду выглядеть так: Для Главной (index.html) — images/имя рисунка.

А на всех последующих страницах вместо images ставиться images1.

Картинки маркеров на Главной прописываются так

А на следующих страницах так опять вместо images — images1

Вот теперь можно из шаблона сделать свой сайт, со своими изображениями, и своим текстом.

Последующие страницы делаются по тому же шаблону, только сохраняются в папке «content», и называются не «index.html», а по заголовку статьи, только в названии файла он пишется английскими буквами, с окончанием «html».

Изображения для них размещаются соответственно в папке images1. Если и на главной, и на других страницах, есть одни и те-же картинки, то они должны быть в обеих папках.

Адреса этих страниц определяются так. Когда Вы создадите страницу, сохраните её в папке content, выберете в Notepad++ меню Запуск, и откроете в своём браузере, то в адресной строке браузера как раз и будет нужный адрес.

Вставляется он в виде ссылки перед текстом «Другая страница» (как пишутся ссылки читайте в статье Ссылки примерно вот так

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

Когда все доработки будут сделаны, то есть сайт будет готов, можно переходить к третьему пункту — выводу сайта в интернет.

Для этого нужно будет приобрести хостинг и домен. Что такое хостинг, можно посмотреть здесь, а доменное имя сайта — это адрес, по которому Ваш сайт будет определятся в интернете.

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

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

Я рекомендую Вам хостинг Бегет. Это один из, если не самый лучший хостинг провайдер России.

Евгений Попов даже запустил проект «Хостинг-Нинзя», по выявлению лучшего хостера, и заключающийся в опросе пользователей.

В конце концов этот проект стал крупнейшим сервисом по подбору хостинга, и Бегет сразу занял, и твёрдо удерживает в нём первое место.

Цена хостинг + домен = 1120 руб. в год. Первый месяц(целый месяц!) — тестовый, то есть вначале покупается только домен за 120 руб в год, и только через месяц, если Вам понравилось, оплачиваются услуги хостинга.

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

А это уже встречается не часто, даже за более солидные деньги.

Расскажу пару запоминающихся случаев. Как то раз я набрав адрес своей админки, в ответ получил, не помню уж какую, ошибку. Представляете моё состояние?

Был сайт, и нет его. Позвонил в техподдержку хостинга, и через час выяснилось, что плагин BulletProf Security, после обновления, возможно и при моём неумелом участии, наштамповал новых файлов .htaccess, и закрыл тем самым всякий доступ на сайт.

Специалисты техподдержки смогли войти на сайт, всё исправили, и сообщили об этом мне, с полным разъяснением причины. Пользуйтесь на здоровье, только поаккуратнее.

В другой раз пытался установить крутую тему, но она никак не хотела устанавливаться. В основном архиве находились ещё архивы, а в них ещё.

Позвонил в техподдержку, и через час тема уже стояла и работала на сайте.

В каком ещё хостинге Вам окажут такую помощь. Да ни в каком. Нет таких больше.

Вот на его то примере, я и покажу процесс появления Вашего сайта в интернете. Подробнее про Бегет и про то, как на нём зарегистрироваться и приобрести хостинг и домен читайте в статье Перевод сайта с Денвера на хостинг.

Читайте там до абзаца «А вот теперь тот способ переноса сайта…». Дальше расписан перевод сайта с Денвера, и Вам это не нужно.

Когда сайт зарегистрирован, проходим в панель управления хостинга.

Здесь нас интересует раздел Файловый менеджер, так как именно при его помощи мы сейчас перенесём всё, что сделано у нас на компьютере, в интернет.

Итак, открываем менеджер, и дважды щёлкаем по строке с доменным именем вашего сайта.

Откроется директория, в которой должна быть папка public.html. Вот в неё и будем переносить файлы с нашего компа.

Открываем папку public.html и щёлкнув по разделу Новая папка, создаём там две папки images и content. В папке content — папку images1. Короче, всё так-же, как на компьютере.

Затем находим Загрузить файлы, и щёлкнув по нему, откроем окно загрузки

Здесь заходим в Выбрать, и, в открывшемся поисковике, находим файлы и папки созданные на нашем компе, в директории website.

Первым делом выбираем файл index.html, и загружаем его на хост, нажав Загрузить в меню окна загрузки.

Затем точно таким-же образом загружаем файлы из папок images, images1, и content в одноимённые, созданные на хостинге.

Адреса страниц при этом изменятся так как в них добавиться доменное имя сайта, примерно так:

Для главной — Доменное имя/index.html
Для страниц — Доменное имя/content/straniza.html

Значит, все адреса в меню нужно будет менять. Для этого щёлкаем правой клавишей мыши по index.html, и в открывшемся меню выбираем Правка.

После чего откроется редактор менеджера в котором старые адреса нужно будет убрать, а новые прописать.

У меня, к сожалению, нет картинки с нашими файлами, но редактор менеджера отличается от Notepad++ только подсветкой синтаксиса, думаю разберётесь без картинки.

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

После того, как адреса переписаны, нужно ещё задать права доступа к папкам. Для этого снова щёлкнув правой клавишей по строке с папкой, выбираем Изменить атрибуты.

В открывшемся окне, в поле Кодовое значение, проставляем 644 и жмём Изменить(что такое 644 и другие права доступа можно узнать в интернете)

Всё, можно закрывать окно загрузок, файловый менеджер, и несколько дней ждать когда ваш сайт проиндексируется и можно будет набрав в адресной строке браузера доменное имя, увидеть его в интернете.

Да, о том, как сделать этот сайт большим. Для этого в директории сайта вместо папки content создаются несколько папок для рубрик, каждая со своей папкой images.

Папки называются по названию рубрик и в каждую из них помещается несколько файлов со статьями по теме рубрики.

Всё остальное делается так, как описано выше.

Если кто-то соберётся с духом и потратит вечерок на знакомство с CSS, то в статье Шаблон сайта HTML+CSS представлен код сайта с рекомендациями, сделанного с использованием таблиц стилей.


Перемена

Одесса, старый еврейский дворик, раннее утро. Из окна высовывается еврейка и орет соседкам из разных окон: – Розочка, ты моего Абрама не видела?
— Да нет, конечно!
— Римма, мой Абраша у тебя?
— Та чё б он у меня был?!
— Рахиль, Абрама не встречала?
— Та не видела, а что случилось?
— Да сказал, что пойдет по шлюхам – и до сих пор нет его!
— А что мы шлюхи?
— А что, спросить нельзя?

Каркас страницы, теги. Создаём файл. < < < В раздел > > > Валидация документа

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.
А так же: