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

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

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

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

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

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

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

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

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

1. Создание директории сайта

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

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

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

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

Ниже представлен 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" bordercolor="cc215a" width="800" align="center"> 
10 <tr>
11 <td bgcolor="e6e6fa"> 12 <!--Шапка сайта.-->
13 <table border="1" bordercolor="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" bordercolor="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″), изменить цвет рамки (bordercolor), изменить ширину блока с контентом (width)

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

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

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

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

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

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

26. Рамка вокруг текста. Можно поменять толщину рамки (border), цвет (bordercolor), и отступ текста от рамки (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. Блок дополнительной информации в сайдбаре.

Чтобы из этого шаблона сделать свой сайт, необходим редактор. Самым оптимальным я считаю редактор 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 основы. Добавьте в закладки постоянную ссылку.
А так же: