seostop.okis.ru

Доброго времени суток! Вы когда-нибудь задумывались как устроены сайты, которые Вы посещаете каждый день в интернете? Я уверен, что многие из Вас думали об этом! Ведь Вы прешелю сюда не случайно, здесь Вы узнаете о том как создать свой сайт, прикладывая только свои силы и время. Уделите мне пятнадцать минут своего времени и я расскажу как это сделать, а именно покажу на примере как создать сайт бесплатно своими руками. Чтобы уложиться в это время, наш первый тестовый сайт будет максимально простым, я уверен, что каждый пользователь интернета с этим справится. Чтобы ничего не пропустить повторяйте мои действия шаг за шагом, а вернее клик за кликом, в результате Вы получите свой первый сайт.

Что нам понадобится?
1. Блокнот или любой другой редактор;
2. Браузер, с помощью которого Вы просматриваете данный сайт.

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

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

Теперь поговорим о командах, я их еще называл тегами, рекомендую запомнить этот термин. Чтобы браузер смог понимать указания этих тэгов, то есть отличать от обычного текста, их следует помещать в специальные угловые скобки: < тег >. Тут есть один момент, на самом деле пробелы здесь не нужны, но я их поставил, чтобы браузер понял, что я пишу обычный текст, а не даю ему команду, А Вы при создании своего сайта не ставьте пробелы до и после этих скобок. Дальше я подготовил для Вас несколько картинок чтобы увидели своими глазами как можно создать сайт, а в частности и синтаксис этих тегов. Большинство тэгов парные, то есть на каждый открывающий < тег >, есть закрывающий < /тег >. Они отличаются знаком только слэш «/».

Как создать сайт на примере.

Перейдем к практике! Начнем создание сайта своими руками, откройте блокнот и вставьте следующий HTML код, паралельно буду объяснять что к чему:

Теперь этот документ нужно правильно сохранить и можно лицезреть Ваш первый веб шедевр. Для этого сохраните его в формате HTML. Если не знаете, как это делается то это очень просто. В Блокноте: меню файл -> сохранить как -> выбираем тип все файлы -> после названия дописываем «.html». Теперь можете открыть этот файл любым браузером и посмотреть, что получилось. Конечно же это не самый функциональный сайт на свете, зато сделанный своим руками. Если вышла какая-та ошибка, то скорее всего Вы поставили пробелы внутри скобок. Откройте файл заново с помощью блокнота, удалите их. Теперь все должно получиться.

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

Перейдем к изучению тегов, с помощью которых можно форматировать текст. Первый их них это тэг <  strong >, он позволяет выделять текст или чаще отрывок текста жирным шрифтом, акцентируя внимание читателя на слове или словосочетании. Это очень удобно и этим охотно пользуются многие вебмастера. Второй частоупотребляемый тэг это курсив, он обозначается меткой < em >, для получения подеркнутого текста используют < u >. Напоминаю, пока мы рассматривали только парные теги, то есть на каждую открывающуюся метку приходилась закрывающаяся, которая отличалась от первого всего лишь знаком слеша. Первый непарный тег, с которым мы познакомимся это тег переноса строки. Чтобы пенести на строку, достаточно в HTML коде вставить команду < br >. Существуют и другие способы, но этот самый простой и частоупотребляемый.

Текст принято делить на абзацы, это правило не обошло стороной и HTML. Для того, чтобы разделить документ на абзацы используют парный тег < p >. Если Вы пользователь MS Wordа или любого другого текстового редактора,то должны знать, что текст можно выровнить по левому, правому краю, по центру и ширине, это очень удобно, потому что делает текст более наглядным. Чтобы сделать то же самое в HTML нужно познакомится с атрибутом align, который применяют вместе с тегом < p >, чтобы выровнить абзац нужным образом. Данный атрибут может принимать следующие значения: left (выравнивание по левому краю), right (по правому), center (по центру), justify (растянуть текст на всю ширину). На практике эта структура выглядит следующим образом:

Абзац выровненный по центру

А также общепринято, чтобы у текста был заголовок, а в некоторых случаях подподзаголовок. HTML позволяет создавать 6 уровней заголовков, это дает возмоность писать тексты, практически любой структуры. Главный заголовок обозначается парным тегом < h1 > (от слова "header", что означает заголовок), под заголовок < h2 >, и так до шестого уровня < h6 >

Вы узнали как создать свой сайт бесплатно пусть даже и совсем простой. А сейчас я предлагаю научиться создавать списки, а затем все полученные знания можно применить на практике. HTML дает возможность создавать три вида списков, но мы ограничимся одним. Они отличаются не существенно, и если научиться создавать одни списки, то можно будет создать и другие. Мы будем создавать нумерованные списки, их можно применить в оформлении пазного рода отчетов или для представлении специфического рода информации. Любой список будет начинаться тегом < ul > и заканчиваться < /ul >, а каждый пункт списка следует помещать между тегами < li > и < /li >. А для того, чтобы указать, что мы создаем именно нумерованный список, надо вставить атрибут type со значением "1". На примере выглядит  следующим образом:

Результат:

1. Word;
2. Excel;
3. Outlook Express.

Теперь применим полученные знания на практике, и создадим еще одну web страницу.

Поздравляю всех тех, кто дочитал эту статью. И рекомендую не останавливаться на достигнутом, а дальше изучать веб технологии. Это можно сделать на сайте www.seostop.ru.