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

Пример сайта, созданного только с помощью html

Ранее нами были рассмотрены язык разметки гипертекста html, информация о том, что такое хостинг и домен для сайта, создание логотипа для сайта и продвижение проекта в сети интернет. Закрепим данные знания примером сайта, который и создан только с их помощью.

Для демонстрации возможности всех этих вещей, а в основном html, мы сделали сайт sdgames.ru, пока только первую страницу - главную, но со временем страниц добавится.

Теперь к коду страницы. Сначала делается стандартная шапка:


 

// Начинается заголовок html-документа, в котором прописываюся различные инструкции
  SDGAMES - Игры для dendy и sega. // В теге title написали фразу SDGAMES - Игры для dendy и sega., которая состоит из достаточного количества слов, чтобы поместиться в поисковой выдаче.
   // Метаописание состоит из примерного количества слов, которые целиком проиндексируются поисковыми системами и поместятся в строчки поисковой выдачи.
  // Заканчивается заголовок html-документа
  // Пошло тело html-документа, то что отображается в окне браузера. Атрибут bgcolor задаёт цвет веб-страницы, в нашем случае чёрный, text - цвет текста, у нас - белый. Атрибут link указывает цвет ещё не нажатых ссылок, vlink - уже нажатых, в нашем случае жёлтые. Атрибутом alink задаётся цвет ссылки при нажатии на неё.

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

Здесь мы с помощью таблицы разделили html-документ на 2 части. Первая - 25% от размера окна браузера, вторая - 75%. Пишем:

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

Теперь начинаем второй столбец. Пишем:

// Тегом задаём первый столбец, размером 25% от ширины экрана. Атрибут valign устанавливает вертикальное выравнивание содержимого в ячейке. Значение valign="top" обозначает выравнивание по верхнему краю ячейки.

В этот столбец вставим картинку с Соником и слоником с помощью тега . После этого, в заголовке первого уровня пишем слово "SDGAMES". Далее с помощью заголовка третьего уровня пишем фразу "Игры для денди и сега". Затем делаем ссылки на некоторые разделы сайта. Ниже вставляем блок "Поделиться". После этого закрывающим тегом

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

Теперь пропускаем строчку и делаем горизонтальную линию на всю веб-страницу при помощи тега

. Под линией маленьким шрифтом пишем: "Все права на игры и эмуляторы принадлежат их авторам. В соответствии с законодательством РФ, все игры и эмуляторы, скачанные с этого сайта, носят ознакомительный характер. После ознакомления вы обязаны удалить бесплатно скачанную игру или эмулятор и приобрести оригинал за деньги, если появится желание". Запись эта делается, так как надо по закону. Потом пишем © 2012 «Мути в сети» . Это говорит о том, что дизайн сайта защищён авторским правом, копированию не подлежит и можно подать в суд на человека, который скопирует этот дизайн. После этого вставляем счётчики посещений. Заканчиваем тело документа тегом , а страницу - .

Название сайта сокращённо sega dendy games, что многим понятно. Оно короткое и отражает тематику. Покупаем этот домен на сайте 2domains.ru, так как там домен в зоне *.ru и *.рф стоят 99 рублей. Хостинг для нескольких сайтов у меня уже был, поэтому этот домен я включил в него же.

Логотип был сделан на сайте favicon.cc.

Вот и все комментарии к данному проекту.