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

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

Хостинг сайтов
от выбора хорошего хостинга зависит «светлое» будущее созданного тобой сайта.

Основы HTML
язык html это основа Интернета, без этих знаний популярный сайт не сделаешь.

Свойства CSS
с применением стилевых таблиц значительно проще разрабатывать web-страницы и управлять сайтом.

Оптимизация
необходимые меры, предпринимаемые вебмастерами, для поднятия сайта на более высокие позиции.

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

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

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

Словарь терминов
толкование терминов встречающихся при cоздании и раскрутке сайтов.

Изображения в HTML


Для вставки изображений в HTML применяются два основных формата GIF и JPEG. Формат GIF может хранить внутри себя простейшую анимацию ( динамические баннеры ), JPEG отлично подходит для изображений с большим количеством цветов, например фотографий. Третьим форматом для web-графики является формат PNG, но он не получил широкого применения в web-дизайне. Любое изображение в форматах GIF или JPEG вставляется на web-страницу при помощи тега < img >, закрывающего тега нет.

Содержание:

Посредством атрибута src задается адрес (URL) файла с изображением, т.е. браузер находит нужное изображение в каталоге сайта по пути (адресу URL), прописанному в этом атрибуте. Для удобства все изображения сайта находятся в отдельной папке, обычно с именем image. Для примера возьми любое изображение, лучше небольшого формата, и сохрани в созданной папке image, с именем primer.jpg. Далее мы будем обращаться к ней для обучения.

Ну что, попробуем вставить картинку на страницу? Пишем код (путь - URL, прописывается в зависимости от местонахождения папки с изображениями):

< img src="image/primer.jpg">

Браузер отобразит:

Теперь попробуем вставить изображение с текстом:

Текст в который просто вставлена картинка. < img src="image/primer.jpg"> Обтекание не задано.

Получилось:

Текст в который просто вставлена картинка. Обтекание не задано.

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

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

Горизонтальное выравнивание и соответственно обтекание задается так же уже знакомыми тебе значениями left, center и right. Посмотрим на примере кода:

Текст в который просто вставлена картинка. < img src="image/primer.jpg" align="left"> Обтекание задано.

Браузет отобразит код так:

Текст в который просто вставлена картинка. Задано расположение изображения у левого края страницы, текст обтекает справа.

Пример кода с расположением у правого края:

Текст в который просто вставлена картинка. < img src="image/primer.jpg" align="right"> Обтекание задано.

В браузере будет выглядеть так:

Текст в который просто вставлена картинка. Задано расположение изображения у правого края страницы, текст обтекает слева.

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

Смотрим пример:

Текст в который просто вставлена картинка. < img src="image/primer.jpg" align="middle"> Задано расположение по центру.

Текст в который просто вставлена картинка. Задано расположение по центру.

Кроме способа выравнивания и обтекания текстом, для изображения можно задать поля отступов, которые не будут заняты текстом при обтекании. Задаются отступы двумя атрибутами: vspace - верхний и нижний, hspace - левый и правый. Значения задаются в пикселях. Например задаем выравнивание для изображения по левому краю и отступы слева и справа - 35px, сверху и снизу - 25px, пишем код:

Текст в который просто вставлена картинка. < img src="image/primer.jpg" align="left" hspace="35" vspace="25" > Задано расположение изображения у левого края страницы, текст обтекает справа.

Браузер покажет:

Текст в который просто вставлена картинка. Задано расположение изображения у левого края страницы, текст обтекает справа.

В HTML можно задать рамку, определенной толщины, вокруг изображения. Делается это с помощью атрибута border, значение которого задается в пикселях. Единственный минус в том, что цвет рамки будет черным, а изменить его средствами HTML никак нельзя. Но можно заранее на изображении, в графическом редакторе, выполнить рамку произвольного цвета. Если этот вариант неподходит, тогда помогут каскадные таблицы стилей CSS. Посмотрим пример написания кода вставки изображения с рамкой:

Текст в который просто вставлена картинка. < img src="image/primer.jpg" align="middle" border="2"> Задано расположение по центру.

На странице отобразится:

Текст в который просто вставлена картинка. Расположение по центру.

Изображения могут быть не только приемом web-дизайна, но и гиперссылками на другие web-страницы. Делается это точно так же, как с текстом, при помощи того самого тега < a >. В тег < a > просто включается тег нужного изображения и вперед, по просторам гиперпространства... Лучше всего к такой ссылке (как и к любой гиперссылке) добавить тег title, так как это дает дополнительную информацию да и поисковые системы одобряют. Ну что, пишем код:

< a href="http://www.smartincom.ru/" title="Логотип сайта SMARTINCOM.RU">< img src="image/logo.jpg" border="0">< /a >

В браузере:


Для чего же задается альтернативный текст? Давай по-порядку. В каждом браузере есть функция отключения изображений, поэтому пользователь, использующий такую функцию, может видеть по описанию указанному в теге alt, что представляет собой изображение. Может быть это на сегодняшний день и неактуально, так как предпочтение отдается безлимитным тарифам, но все же это считается правилом хорошего тона. Смотрим пример кода:

< img src="image/logo.jpg" border="0" title="Логотип сайта SMARTINCOM.RU" alt="Изображение логотипа сайта SMARTINCOM.RU">

Увидеть это можно только выключив отображение изображений в браузере.

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

Задаются размеры изображения тегами width - ширина и height - высота, значения задаются как в пикселях, так и в процентах от ширины экрана (с процентами очень осторожно). Смотрим код:

< img src="image/logo.jpg" border="0" title="Логотип сайта SMARTINCOM.RU" alt="Изображение логотипа сайта SMARTINCOM.RU" width="200" height="90">

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

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

Атрибут ALT имеет очень важное значение, добавлять его необходимо для каждого тега IMG. Содержание текстового сообщения должно очень точно описыать изображение, причем кратко.

Изображения на web-странице должны соответствовать текстовому содержанию.

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

После изучения этого раздела уже можно опробовать себя в качестве web-мастера и создать полноценную HTML - страницу. А далее перейдем к вставке средств мультимедиа.

Ссылки в HTML / К оглавлению / Мультимедиа

То, без чего не создать сайт:
Доменное имяОсновы htmlХостинг сайтов

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

Психология
интересные статьи по психологии и современным психологическим технологиям, рекламе и PR в интернете.

Transitions и Animations CSS3
как придать индивидуальность веб-странице, используя переходы и анимацию CSS3.
Canvas HTML 5
отличные возможности для создания по настоящему интерактивных веб-приложений.

Полезные книги
книги по созданию, продвижению, поисковой оптимизации сайтов.

Интернет
история возникновения Интернета, психология поисковых запросов и т.п.

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

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