Готовый исходный код для html. Пример создания html страницы в блокноте

: HTML - язык разметки гипертакста (или язык гипертекстовой разметки).

Так давайте познакомимся с ним поближе.

Для начала создайте у себя на компьютере файл с любым названием и расширением.html (название должно быть на английском языке - например index.html). Что бы создать такой файл - создайте обычный текстовый документ ("Пуск" - "Все программы" - "Стандартные" - "Блокнот") и сохраните ("Файл" - "Сохранить как") его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла - "Все файлы(*.*)").

Это не обязательное условие (так как в настройках сервера можно поменять название первой страницы), а правило хорошего тона. Название первой страницы желательно именно index (index.html), так как сервер, при обращении к нему, выдает файл с таким именем - index.

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

Теперь откройте этот файл через блокнот и скопируйте туда такой код.

Это первая web-страница!

Сохраните и откройте через браузер.

Поздравляю, вы только что создали свою первую web-страницу.

Текст "Это первая web-страница!" можете поменять на любой другой, например так - "Это моя первая web-страница!!!". сохраняем, обновляем браузер, любуемся результатом.

Но у нашей страницы нет загаловка.

Надо это исправить - немного подправим код, вернее добавим в него "Голову сайта", используя теги и .

Первая страница Это моя первая web-страница!!!

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

Описание тегов.

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

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

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

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

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

Если вы создаете шаблон с нуля, то надо от чего-то отталкиваться. Учитывая, что стандарт HTML5 «широко шагает по стране», я в этой статье приведу пример пустого шаблона HTML5.

В новом стандарте многое упростилось и теперь базовая часть выглядит так:

...

Новые теги HTML5

В HTML5 для структуры кода введено несколько новых тегов: , , , , , которые заменяют в некоторых случаях привычный . Сделано это для поисковых роботов, чтобы они лучше распознавали код страниц и отделяли основной контент от вспомогательных элементов.

С использованием новых тегов пустой шаблон HTML5 может выглядеть так:

Заголовок страницы Меню навигации Боковая колонка SideBar Контент - основное содержимое страницы. Подвал сайта

Упрощение написания DOCTYPE

Вспомним как было раньше, в HTML4 тег DOCTYPE выглядел так:

Теперь же запись минимальна, проще, наверное некуда:

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

Необязательные теги в HTML5

Новый стандарт принес много послаблений верстальщикам. В частности, использование элементов HTML, HEAD и BODY уже не является обязательным для разметки HTML5. Если их нет, то браузер все равно считает, что они существуют. По сути из обязательных в HTML5 остался только .

Трактовка русского языка как основного языка HTML документа

Тег определяет язык документа. В сети регулярно возникают дискуссии о правильном его написании, в частности правильность написания «ru-RU». Я склоняюсь к варианту, что «-RU» является избыточным, так как у русского языка нет диалектов и вариантов написания как у Английского языка (Британский и Американский). Суффикс RU уточняет, где говорят на русском языке. То есть если en-US означает «английский язык на котором говорят в США», то ru-RU означает «русский язык на котором говорят в России», что является излишним.

В прочем, ничего страшного не случится, если вы и дальше будете использовать вариант «ru-RU».

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

Пример 1. Исходный код веб-страницы

Пример веб-страницы Заголовок

Первый абзац.

Второй абзац.

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example2.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1.

Рис. 1. Результат примера в браузере

Элемент (жарг. доктайп) предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях - современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

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

Мы упоминали, что имена элементов можно писать маленькими и большими буквами. К это правило тоже относится и его можно записывать по разному. Тем не менее, традиционно имя этого элемента пишется в верхнем регистре.

Открывающий тег определяет начало HTML-документа, внутри него хранится «голова» ( ) и «тело» документа ( ).

Содержимое этого раздела не показывается напрямую на странице, за исключением элемента . Внутри могут располагаться следующие элементы: , , , , или .

Элемент является универсальным и добавляет целый класс возможностей, в частности, с помощью метатега, как обобщённо называют этот элемент, можно изменить кодировку страницы, добавить ключевые слова, описание документа и многое другое, предназначенное для браузера или поисковых систем. В частности, чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

Пример веб-страницы

Элемент определяет название веб-страницы. В браузере оно отображается на текущей вкладке (рис. 2).

Рис. 2. Название веб-страниц в браузере

Элемент является обязательным и должен непременно присутствовать в коде документа. Внутри разрешается писать только текст и никаких других элементов в быть не должно. Но допустимо добавлять разные текстовые символы, например, так: Adobe™ Photoshop® .

Закрывающий тег показывает, что «голова» документа завершена.

«Тело» документа предназначено для размещения элементов и содержимого веб-страницы.

Заголовок

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность раздела, расположенного после заголовка. Так, элемент представляет собой наиболее важный заголовок первого уровня, а элемент служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Элементы ... относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него браузер добавляет пустое пространство.

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

И используйте один из редакторов.

Основные теги Текст Ссылки Фреймы Таблицы Списки Формы Изображения

Пример 1. Структура документа HTML

Название документа


Здесь расположен сам Web-документ.
Всем привет!

Здравствуй, мир!

Пример 2. Структура простейших веб-страниц

Поисковые системы Internet.

Поисковые системы в Интернете

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

Просмотрите примеры:
ALTAVIST.HTM,
EXCITE.HTM,
YAHOO.HTM!

1.
2.
3.
4.

5.
6.
Используйте поисковые системы для
поиска информации в Интернете!

Пример 3. Разметка веб-страницы

Эхо Москвы.


24 часа в сутки!

Информация на любые темы!
Частота на УКВ 73,82 МГц или 91,2 МГц FM.

Слушайте Эхо Москвы!
Остальное видимость!

Адрес в Интернете:
http://www.echo.msk.ru

Пример 4. Простой пример на HTML

Упорядоченные и неупорядоченные списки


Неупорядоченный список

• Элемент 1.
  
• Элемент 2.
  
• Элемент 3.
  

Упорядоченный нумерованный список

Элемент 1.

Элемент 2.

Элемент 3.

Списки определений


Списки определений имеют вид:

Название термина 1
Определение термина 1
Другое определение термина 1
Название термина 2
Определение термина 2
Другое определение термина 2
Название термина 3
Определение термина 3
Другое определение термина 3



Петров И.C., E-mail:

Формы



Элементы диалога

Элемент ISINDEX


Элементы INPUT
Ввод текстовой строки

Ввод пароля

Флажки


Переключатели



Кнопка подтверждения ввода

Кнопка с изображением

Кнопка очистки формы

Файл


Элемент SELECT

Первый
Второй
Третий
Четвертый


Элемент TEXTAREA

Область для ввода текста

Этот текст написан полужирным шрифтом.

Этот текст логически выделен тегом strong (может отображаться как обычный текст в некоторых браузерах или отображаться полужирным шрифтом). В некоторых браузерах действие аналогично действию тега b.

Этот текст отображается более крупным шрифтом (может отображаться обычным шрифтом в некоторых браузерах)

Этот текст логически выделен тегом em. В некоторых браузерах действие аналогично действию тега i.

Этот текст отображается курсивом.

Этот текст отображается более маленьким шрифтом.

Этот текст ниже , а этот выше уровня основного текста.

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

Тег pre хорошо использовать для отображения компьютерного кода.:

For i = 1 to 10
print i
next i





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

Тег kbd используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. Браузеры обычно помечают текст в контейнере kbd моноширинным шрифтом.

Текст, отмеченный тегом tt отображаетя моноширинным текстом. Этот тег относится к группе тегов физического форматирования.

Тег samp используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере samp с помощью моноширинного шрифта. С помощью стилей можно задать свое собственное оформление.

Тег var используется для выделения переменных компьютерных программ. Браузеры обычно помечают текст в контейнере var курсивным начертанием.





Дональд Дак

почтовый ящик 555

Диснейленд

США





UN


WWW

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

Блок цитаты:

Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата.

Браузер вставляет пустую строчку и отступы перед и после блока цитаты.

Короткая цитата:
Это короткая цитата

Элемент q никак не выделяется и отображается как обычный текст.

Дюжина - это
тринадцать
двенадцать
единиц.

Большая часть браузеров перечеркивают удаленный текст и подчеркивают вставленный текст.

Старые браузеры могут отображать удаленный текст как простой текст.

UN

Это параграф.

Это другой параграф.

Форматированиеhtml


y=x2-уравнениепараболы.


H2O-формулаводы.




Форматированиеhtml


Это заголовок первого уровня
Это заголовок второго уровня
Это заголовок третьего уровня
Это заголовок четвертого уровня
Это заголовок пятого уровня
Это заголовок шестого уровня
Это просто текст

А этот текст приведет вас на известный видеохостинг Youtube.

К примерам html

Если вы укажете атрибуту target значение “_blank”, ссылка откроется в новом окне браузера.

Это ссылка на отправку почты:
?subject=Привет%20тебе”>
Отправить письмо!

Внимание: Пробелы между словами должны быть заменены знаком «%20» , чтобы вы были уверены, что браузер будет правильно отображать ваш текст.

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

В этом случае строчный фрейм не будет отображен в окне браузера.

Каждая таблица начинается с тега table.
Каждая строчка таблицы начинается с тега tr.
Каждая ячейка таблицы начинается с тега td.

Таблица из одной колонки:

100

Одна строчка из трех колонок:

100

200

300

Две строчки по три колонки:

100	200	300
400	500	600

Таблица с обычной рамкой:

Первая	строчка
Вторая	строчка

С широкой рамкой:

Первая	строчка
Вторая	строчка

С очень широкой рамкой:

Первая	строчка
Вторая	строчка

Заголовки таблицы:


Имя
Телефон
Телефон

Билл Гейтс	555 77 854	555 77 855

Вертикальные заголовки:


Имя:



Телефон:



Телефон:

Билл Гейтс

555 77 854

555 77 855

Эта таблица с широкой рамкой и названием


Название

100	200	300
400	500	600

Ячейки состоит из двух колонок:


Имя
Телефон

Билл Гейтс	555 77 854	555 77 855

Ячейка состоит из двух строк:


Имя:



Телефон:

Билл Гейтс

555 77 854

555 77 855

Неупорядоченный список:

• Кофе


• Чай


• Молоко

Упорядоченный список:

Кофе

Чай

Молоко

Значки списка в виде закрашенного круга:

• Яблоки


• Бананы


• Лимоны


• Апельсины

Значки списка в виде незакрашенного кругаCircle bullets list:

• Яблоки


• Бананы


• Лимоны


• Апельсины

Значки списка в виде закрашенного квадрата:

• Яблоки


• Бананы


• Лимоны


• Апельсины

Нумерованный список:

Яблоки

Бананы

Лимоны

Апельсины

Нумерация заглавными буквами:

Яблоки

Бананы

Лимоны

Апельсины

Нумерация строчными буквами:

Яблоки

Бананы

Лимоны

Апельсины

Нумерация заглавными римскими цифрами:

Яблоки

Бананы

Лимоны

Апельсины

Нумерация строчными римскими цифрами:

Яблоки

Бананы

Лимоны

Апельсины

Вложенный список:

• Кофе


• Чай
  
  
  
  • Черный чай
  
  
  • Зеленый чай
  
  
  
  


• Молоко

Имя:


Фамилия:







Имя пользователя (логин):


Пароль:

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

Мужчина:


Женщина:

Пользователь может выбрать только одно значение.

Вольво
Сааб
Фиат
Ауди














У меня есть мотоцикл:



У меня есть машина:



У меня есть аэроплан:

Если вы нажмете на кпопку «Подвердить», вы отправите ваши данные на новую страницу, которая называется html1.asp.

Вставка простого изображения:
width=”111″ height=”111″>

Двигающееся изображение (анимация):
width=”62″ height=”62″>

Помните, что синтаксис вставки анимации ничем не отличается от синтаксиса вставки простого изображения.

Взгляните, мы вставили изображение, как фон!

Можно вставлять изображения форматов gif, jpg/jpeg и png.

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

align =”left” width=”48″ height=”48″>
Параграф с изображением. Атрибуту «align» присвоено значение «left». Изображение «всплывает» влево по отношению к тексту.

align =”right” width=”48″ height=”48″>
Параграф с изображением. Атрибуту «align» присвоено значение «right». Изображение «всплывает» вправо по отношению к тексту.

width=”20″ height=”20″>

width=”45″ height=”45″>

width=”70″ height=”70″>

Вы можете изменять размер изображения, меняя значения атрибутов «height» (ширина) и «width» (высота) тега img.

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

В этом уроке курса MM часть 1 мы сделаем 2-страничный сайт...например, о заработке в интернете.

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

Вверху сайта мы сделаем "шапку сайта". Слева будет меню сайта с ссылками на другие страницы сайта, остальное место будет занимать контент (содержимое) сайта.

Идея понятна? Приступаем.

Запускаем Блокнот и пишем наш минимальный набор для создания страницы .

Теперь напишем между тегами название нашей страницы, например, вот так

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

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

Для создания каркаса страницы мы будем использовать таблицу, но чуть более хитрую, чем мы проходили в HTML-уроке о таблицах . Нам нужна таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2 ячейки, т.е. вот такая нам нужна таблица:

В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке 3 будет содержимое страницы.

Для того чтобы сделать такую таблицу, напишите вот такой код

Т.е. код нашей страницы будет вот такой:

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Как видите, в такой вот "хитрой" таблице используется лишь 1 пара тегов в первой строке таблицы, а не два, как при построении таблицы 2х2. Но зато появился параметр colspan="2". Этот параметр как бы говорит, какого размера должна быть ячейка. В данном случае ячейка должна быть шириной в 2 ячейки.

Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 750 пикселей. Из расчета, что кто-то из посетителей сайта может использовать монитор 800х600 точек, и просматривать более широкий сайт ему будет некомфортно.

Высоту таблицы сделаем 600 пикселей

Т.е. код нашей страницы теперь будет вот такой.

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь у нас будет шапка
Здесь будет меню

Чтобы стало видно границы частей сайта - "зальем" область меню и область шапки цветом. Например, вот так

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь у нас будет шапка
Здесь будет меню	Здесь будет содержимое страницы

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

Теперь вставляем картинку шапки в наш сайт. О том, .

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь будет меню	Здесь будет содержимое страницы

Теперь установим точные размеры ячейки таблицы, предназначенной для шапки. Т.к. картинка шапки у нас имеет размер 750х120, то и размер ячейки таблицы сделаем 750 х 120.

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь будет меню	Здесь будет содержимое страницы

ТАК .

Установим ширину меню равной 200 пикселей, для этого добавим width="200" в соответствующий тег

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь будет меню	Здесь будет содержимое страницы

Задний план меню "зальем" вот таким фоном, для этого сохраните этот фон с его "родным" именем sv11.jpg в ту же директорию, где находится файл страницы.

А теперь прописываем нужный код

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь будет меню	Здесь будет содержимое страницы

Теперь наша страница будет выглядеть ТАК .

У вас, возможно, возник вопрос, почему браузер не "отрабатывает" ширину меню 200? Меню ведь выглядит шире, чем 200 пикселей. Да. Есть такой глюк браузера, но все встанет на свои места, если начать писать текст в основном разделе страницы. (Или можно задать жестко ширину ячейки, в которой будем писать контент, дописав width="550" )

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

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь будет меню

Теперь все почти ОК...Почти, потому что налицо небольшие проблемки. Текст отображается ровно посередине (по вертикали), а следовало бы, чтобы текст был расположен вверху ячеек.

Для этого нам надо прописать еще один параметр в теге меню и основного содержимого страницы.

Этот параметр мы не проходили в уроке о таблицах , - это параметр выравнивания по вертикали valign="top".

Значение top означает, что содержимое будет располагаться вверху.

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Здесь будет меню	Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.

Теперь наша страница будет выглядеть ТАК .

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Главная	Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.

Теперь надо сделать текст меню в виде ссылок. Слово Главная залинкуем на страницу index.html, а слово Ссылки на страницу ssilki.html, которую мы создадим чуть позже.

Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете

Главная Ссылки	Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.

Теперь наш сайт будет выглядеть ТАК .

Осталось сделать вторую страницу сайта. Для того чтобы упростить работу, сделаем так - сохраним нашу страницу index.html под другим именем ssilki.html, а затем подредактируем файл.

Т.е. на компьютере у вас должно быть 2 пока что одинаковых страницы - index.html и ssilki.html.

Теперь изменим название страницы (между тегами и ), и изменим текст страницы, например, вот так

Главная	На этой странице будут размещены ссылки на сайты о заработке в интернете Сайт о заработке в интернете MoneyMaster

Вторая страница сайта будет выглядеть ТАК.

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

Можно. Я сделал пропуски, чтобы было наглядней видно структуру страницы. А так можно разместить весь код вообще в одну строчку
Но не стоит. Иначе будет трудно искать ошибки, если что...

Если есть какие либо вопросы по этому примеру - пишите .

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

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

Для того, чтобы ваш сайт был доступен из интернет всему миру, надо найти , который предоставит вам место для вашего сайта. Хостинг бывает бесплатный и платный. Бесплатный хостинг дает вам также и адрес сайта. Так например, если вы зарегистрировались на хостинге narod.ru, указав при регистрации логин pupkin, то адрес вашего сайта будет http://pupkin.narod.ru Но бесплатные хостинги обладают кучей недостатков и их следует использовать лишь для тренировки. Если же делать серьезный сайт, то надо покупать и покупать хостинг, затем связать домен и хостинг (подробнее эти вопросы рассматриваются в книге MoneyMaster-3), тогда ваш сайт будет иметь желаемый вами адрес типа http://gadukino.ru (если домен не занят), и вы получите еще кучу преимуществ по сравнению с бесплатным хостингом, например, возможность использовать скрипты, что позволит вам создавать динамические сайты. После того как вы определились с хостингом и получили место для вашего сайта, надо перебросить файлы сайта на хостинг. Сделать это можно с помощью специальных FTP- программ, например LeapFTP, CuteFTP, или можно сделать с помощью файловых оболочек Windows Commander, Total Commander и др. можете скачать видео-урок, из которого вы узнаете, как сделать переброску файлов на хостинг.

ПОЗДРАВЛЯЮ!

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

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

А вы хотели бы научиться рисовать сами графический дизайн вашего сайта?

Этому вы можете научиться, пройдя обучение по книге MM-2.

Книга MM часть 2. УЖЕ СЕГОДНЯ вы сможете сделать СВОЙ приличный, эксклюзивный дизайн для вашего сайта , не теряя недели/месяцы на изучение учебников и прочих материалов, не воруя дизайн у других и не используя темплейты. ДАЖЕ ЕСЛИ ВЫ В ПРИНЦИПЕ НЕ ДИЗАЙНЕР - У ВАС ВСЕ РАВНО ПОЛУЧИТСЯ ПРИЛИЧНЫЙ ДИЗАЙН! Как сделать красивый сайт, даже если вы пока не дизайнер. Обучение необходимым навыкам и приемам для создания графических элементов сайта. Разновидности дизайна. Основы композиции сайта. Рекоммендуемые сочетания цветов. Создание макета сайта в Adobe Photoshop. Эффекты в Adobe Photoshop. Нарезка сайта в Image Ready. Верстка кода в DreamWeaver. Таблицы стилей CSS.

К сожалению, книга 2 не бесплатная, но я уверен, что вы не пожалеете о ее покупке. Наверняка до прочтения книги MM-1 вы и представить не могли, что, изучив ее, вы научитесь создавать простенькие сайты. Скорей всего, вам это казалось чем то очень сложным, "не для вашего ума". Но я вас провел по самой короткой дорожке к результату, держа вас как ребенка за руку. Точно так же, изучив MM-2, вы научитесь делать графический дизайн сайта, при этом, опять же пройдя по самой короткой дорожке, т.е. СЭКОНОМИВ ВРЕМЯ, не тратя месяцы на изучение различных книг. Потратив несколько вечеров на изучение MM-2, вы будете в силах делать свой дизайн для своих сайтов, значительно обогнав тех, кто решит купить книги в обычном магазине и будет месяцами их изучать.

Цена на книгу MM-2 также включает в себя цену на консультации. Да.
Каждый покупатель получает право на консультации в соответствующих закрытых разделах форума. Наверняка у вас будут появляться вопросы, а спросить некого. Покупая книгу - вы всегда будете иметь возможность задать вопросы и получить на них ответы от меня или от опытных учеников! При таком подходе ваше обучение будет максимально эффективным! При таком подходе вы максимально быстро научитесь делать сайты и зарабатывать с их помощью.

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