Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Порно рассказы или html+css+photoshop

Обычно такая связка как html+css+photoshop используется для создания визиток - сайтов, количество страниц которых не превышает десяти, в крайнем случае, двадцати. Чаще всего такие проекты - это сайты каких-либо фирм. Для крупных площадок такая связка не подходит, но раз уж наш сайт именно о заработке в интернете, то фирму мы открывать не будем, а сделаем сайт с порно рассказами и дадим комментарии к коду. Сайт разместим по адресу: http://pornostories.ru/. Ну что ж, приступим. Вот html-код главной страницы с комментариями:

-//Данный тег говорит нам о том, что документ написан в стандарте HTML 5;
-//
Начальный тег html-документа;
 

-//Начальный тег заголовка документа. В заголовке содержится служебная информация, за исключением тега ;<br>   <title>Порно рассказы на pornostories.ru -//Название html-документа. Будет отражаться в верхней вкладке браузера и поисковой выдаче;
   -//При помощи мета-тега description в веб-документ вставляется описание страницы, которое поможет поисковым роботам её находить, особенно в системе google;
   -//Сообщаем браузеру, что будем использовать внешнюю таблицу стилей style.css, которая находится в каталоге templates, для оформления веб-страницы;
  -//Закрываем заголовок документа;
  -//Начинается тело html-документа;
  
-//Начальный тег блока с идентификатором main. В этом блоке будут размещаться все остальные блоки, находящиеся на странице;
    -//Блок с идентификатором header, в нём надпись, видно где она на сайте находится. Чаще всего в данном блоке находится какой-нибудь баннер и название проекта;
    -//Закрываем блок с идентификатором sidebar;
   
-//Открываем блок с идентификатором content, в нём разместится основное содержимое страницы;
    

О проекте

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

На этом сайте размещены различные рассказы эротической тематики, которые постоянно обновляются. Все темы описаны ниже.

-//Абзац с неким контентом;
    
-//Открываем список определений;
     
Гетеросексуалы -//Определяемый термин в списке определений, всё, что выделено тегом
, является определяемым термином;
      
Классический секс; -//Так называемое, определение определения. Как понятно из названия оно даёт определение определяемому термину. Всё, что выделено тегом
является определением для определяемого термина;
     
Бисексуалы
      
Любят и свой пол и противоположный;
     
Однополый секс
      
Секс с представителями своего пола им доставляет удовольствие, а вот противополжный пол им не мил;
     
Групповой секс
      
Несколько людей занимаются сексом и их больше чем двое;
     
Анал
      
Иногда в попку приятнее;
     
Писающие
      
В некоторых случаях так хочется пописать партнёру в ротик;
     
По принуждению
      
Когда занимаешься сексом не для удовольствия, а потому что так сказали;
     
Инцест
      
Секс между кровными родственниками;
     
Оральный секс
      
Минет или куни, каждому своё;
     
На работе
      
И между сотрудниками бывает секс, да ещё и какой;
     
Студенты
      
Университет именно то место и время когда хочется и сил как никогда много;
     
Пожилые
      
Старость - не радость, но и в старости можно немного пошалить;
     
Измена
      
Измена своей второй половинке для некоторых людей дело привычное;
     
Случайный секс
      
Именно он доставляет так много удовольствия;
     
Свингеры
      
Поменяться мужьями или жёнами? Легко!;
     
Трансы
      
Думал, что это девочка, а оказалось мальчик;
     
Подростки
      
В юности все кажется таким потрясающим, особенно секс;
     
Зоофилы
      
Кто-то и животных любит;
     
Переодевание
      
Мальчики переодеваются в девочек и наоборот;
     
Потеря девственности
      
Всё бывает в первый раз.
    
-//Закрываем список определений;
   
///Закрываем блок с идентификатором content;
    -//Закрываем блок с идентификатором footer;
  
-//Закрываем блок с идентификатором main;
  
-//В этом блоке будет находиться счётчик посещений;
  -//Закрываем тело html-документа;
-//Заканчиваем html-документ;

А вот и код таблицы стилей для этой страницы и тоже с комментариями:

body { -//Задаём стили для элемента

, точнее говоря для страницы в целом;
margin:0px; -//Задаём размер полей для элемента, в нашем случае 0 пикселей. Это значит, что блок будет плотно прижиматься к краям браузера, а не отступать от него на некоторое расстояние;
background-color:#181515; -//Задаём цвет для элемента ;
} -//Закрывающая скобка для элемента;

#main{ -//Задаём стили для блока с идентификатором main;
width:920px; -//Задаём ширину блока;
height:768px; margin:0 auto; -//Выравниваем блок по центру страницы;
background:url(images/back.jpg) no-repeat black; -//Задаём для блока main фоновый рисунок back.jpg, который находится в папке images. Причём, изображение указывается относительно таблицы стилей, а не html-документа, к которому эта таблица применена. Размеры данного изображения равны размерам самого блока, повторяться оно не будет ни по вертикали, ни по горизонтали, цвет фона для блока ставим чёрным, мало ли фоновый рисунок у какого-нибудь пользователя не загрузится;
color:#eae2ce; -//Задаём цвет текста внутри блока;
}

#header { -//Задаём стили для блока с идентификатором header;
width:500px; -//Задаём ширину блока;
height:150px; -//Задаём высоту блока;
background:url(images/lips.jpg) no-repeat; -//Задаём фоновый рисунок для блока;
font:italic 30px vernada, sans-serif; -//Задаём шрифт для блока;
padding:25px 0px 0px 150px; -//Задаём размеры отступов для содержимого блока;
}

#sidebar{ -//Задаём стили для блока с идентификатором sidebar;
width:140px; -//Шарина блока;
height:535px; -//Высота блока;
margin-left:20px; -//Размер левого поля блока;
padding-left:20px; -//Размер отступа по левому краю;
border:1px solid #eae2ce; -//Задаём границы блока;
border-radius:10px; -//Закругляем все углы блока на 10 пикселей каждый, это свойсто спецификации CSS3, поэтому в старых браузерах углы будут прямыми;
float:left; -//Прижимаем блок с идентификатором sidebar к левому краю того элемента, в который он вложен, а именно в блок с идентификатором main;
font: 20px vernada, sans-serif; -//Задаём шрифт текста для блока;
}

#sidebar a{ -//Задаём стили для ссылок, находящихся внутри блока с идентификатором sidebar;
color:#eae2ce; -//Задаём цвет ссылок;
font-size:12px; -//Задаём размер шрифта для ссылок;
text-decoration:none; -//Сообщаем браузеру о том, что ссылка не подчёркивается;
display:block; -//Преобразуем ссылки из строчных элементов в блочные;
padding:3px 0px; -//Размеры отступов для каждого блочного элемента, то есть для каждой ссылки;
}

#sidebar a:hover{ -//Задаём стили для ссылок внутри блока с идентификатором sidebar, на которые наведён курсор мыши;
text-decoration:underline; -//Сообщаем браузеру, что ссылка при наведённом на неё курсоре мыши, должна быть подчёркнутой;
}

#content{ -//Стили для блока с идентификатором content;
width:493px; -//Ширина блока;
height:535px; -//Высота блока;
margin-left:20px; -//Размер левого поля блока;
padding-left:20px; -//Размер отступа по левому краю;
border:1px solid #eae2ce; -//Задаём границы блока;
border-radius:10px 0px 0px 10px; -//Радиусы скругления для углов блока
float:left; Прижимаем блок к левому краю элемента, в котором он расположен, но этот блок, всё же, будет находиться правее, чем блок с идентификатором sidebar, так как в html-документе блок с идентификатором content стоит после блока с идентификатором sidebar;
font:12px vernada, sans-serif; -//Задаём шрифт текста для блока;
overflow:auto; -//Задаём блоку необходимые полосы прокрутки, в данном случае полоса вертикальная;
}

#content h1{ -//Стили для заголовка первого уровня, находящегося в блоке с идентификатором content;
font:20px vernada, sans-serif; -//Шрифт заголовка;
text-align:center; -//Выравниваем текст заголовка по центру блока;
}

#content a{ -//Задаём стили для ссылок, находящихся внутри блока с идентификатором content;
color:#eae2ce; -//Цвет ссылки;
text-decoration:underline; -//Сообщаем браузеру, что ссылки должны быть подчёркнутыми;
}

#content a:hover{ -//Задаём стили для ссылок внутри блока с идентификатором content, на которые наведён курсор мыши;
text-decoration:none; -//Сообщаем браузеру, что ссылка при наведённом на неё курсоре мыши, не должна быть подчёркнутой;
}

#footer{ -//Задаём стили для блока с идентификатором footer;
width:700px; -//Ширина блока;
padding:50px 0px 0px 10px; -//Размеры отступов для блока;
clear:both; -//Сообщаем браузеру, что блок с идентификатором footer находится ниже всех плавающих блоков;
font:10px vernada, sans-serif; -//Задаём шрифт внутри блока;
}

#footer a{ -//Задаём стили для ссылок, находящихся внутри блока с идентификатором footer;
color:#eae2ce; -//Цвет ссылки;
text-decoration:none; -//Сообщаем браузеру, что ссылки не подчёркиваются;
}

#footer a:hover{ -//Задаём стили для ссылок внутри блока с идентификатором footer, на которые наведён курсор мыши
text-decoration:underline; -//Сообщаем браузеру, что ссылка при наведённом на неё курсоре мыши, должна подчёркиваться;
}

#footer span{ -//Стили для элемента span, находящегося внутри блока с идентификатором footer;
font-size:17px; -//Задаём размер шрифта элемента;
}

Теперь раскажем, где при создании макета был использован фотошоп. А использовался он для создания изображений back.jpg и lips.jpg, находящихся в каталоге images. Если помните, то первое изображение является фоновым рисунком для блока с идентификатором main, а второе - для блока с идентификатором header. Вот какими они были:

И какими стали:

Как эти фотографии были переделаны, можно догадаться, изучив уроки по фотошопу на нашем сайте. Логотип для проекта был создан при помощи сайта favicon.cc, путём загрузки туда изображения отпечатка губ на чёрном фоне, созданного специально для этих целей, вот оно, кстати:

В качестве счётчика посещений был выбран сервис Метрика от компании Яндекс. Это были все комментарии к проекту http://pornostories.ru/, сайту, созданного при помощи связки html+css+php. Да, кстати, проект прошёл формальную проверку на валидаторах css и html, поэтому может считать сделанным технически грамотно.