Как сделать сайт бесплатно для Народа
Всем желающим научиться создавать сайты - "физкульт привет!"
Хвалю ваше желание "научиться делать сайты", вы не только правильно делаете, но и вы уже потенциальный вебмастер, который способен сделать и простой сайт на html, и профессиональный динамический проект на php или сайт на флеше.
Делать сайты - это очень увлекательно и прибыльно!!! Прибыльно потому, что на этом можно еще и заработать.
Меня зовут Дмитрий и я научу вас делать сайты быстро и качественно! А также вы сможете создавать неповторимый дизайн для ваших сайтов. В общем к концу изучения этой статьи вы будете уметь создавать сайты - визитки, а это большое достижение и основа знаний будущего вебмастера. Если посмотреть цены на дизайнерских сайтах, предоставляющих услуги создания сайтов, то можно увидеть, что создать сайт - визитку стоит от $50 до $1000..., а значит после изучения данной страницы вы сможете зарабатывать на разработке несложных сайтов.Делать сайты очень просто, поэтому научиться их создавать могут даже школьники и пенсионеры. Уверяю вам понравится новое занятие! Если вы готовы, то, пожалуй, не будем долго "переливать воду" и начнем по - порядку.
Браузеры
Вы уже знаете, что сайты открывают при помощи браузеров (обозревателей),
самым известным является обозреватель Internet Explorer, который входит в
стандартный набор программ оперативной системы Windows.
Запустить обозреватель можно через меню Пуск =>
Программы => Internet Explorer
, тут есть
адресная строка, в которой вы можете вводить адрес любых сайтов, например:
http://computerlessons.ru/
Азы создания сайтов
Любой сайт начинается с html - язык гипертекстовой разметки, но это не язык программирования, это всего лишь набор тегов, с помощью которых на веб сайте размещают текст, картинки, таблицы и прочее. При помощи тегов можно задать цвет и размер шрифта или выровнять текст по левому и правому краю страницы.
Теги - своеобразные контейнеры, внутри которых объекты (текст, изображения) принимают параметры тега, например тег <b> делает текст жирным, но об этом немного позже, а сейчас разберем как правильно должны называться файлы сайта.
Названия файлов сайта
Любой сайт начинается с главной страницы и эта страница всегда называется index и другого названия у первой страницы быть не может! Мы изучаем создание сайтов на языке html, поэтому и расширение у нашей первой страницы будет такое же index.html
Кроме главной страницы сайта есть еще и другие страницы, их можно называть как угодно, например: 1.html 2.html или second_page.html самое главное, чтобы названия страниц были на английском языке и по возможности без пробелов (можно использовать цифры), иначе страницы названные кириллицей (русскими буквами) работать не будут.
Изображения сайта обычно хранятся в отдельной папке и чаще всего она называется images, название папки может быть любым, например просто img Изображения, как и страницы, должны называться только английскими буквами или цифрами, ни каких русских букв быть не должно!
Еще на сайте могут быть архивы (с музыкой, программами, электронными книгами), предназначенные для скачивания, для удобства и порядка на сайте архивы тоже располагают в отдельной папке, например: downloads или arhiv
Итак, мы более менее разобрались с названиями папок и теперь создадим папки для своего будущего сайта, для этого на вашем компьютере создайте папку www - в этой папке будут храниться абсолютно все файлы создаваемого сайта. В папке www сделайте папку для картинок с названием images у вас должно получиться так:
Папки для самодельного сайта готовы и мы переходим к созданию первой страницы.
Вы уже запомнили, что первая страница сайта должна называться
index.html
и сейчас мы ее сделаем. Для этого нам не нужно никаких специальных программ,
просто запустите приложение Блокнот, если не знаете как это сделать, то
идите в меню Пуск
=> Программы => Стандартные
=> Блокнот
Скопируйте следующий код в Блокнот:
<html>
<head>
<title>Мой сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Моя первая страница для сайта
</body>
</html>
Выберите в Блокноте Меню => Сохранить как... далее выберите папку, в которой будет сохранен файл, в данном случае это папка www в строке Имя файла введите название для файла index.html после этих действий нажмите кнопку Сохранить. В итоге мы получим html-страницу с названием index и расширением .html
Если открыть на компьютере папку www, то там у вас будет такой файл:
Кликните по значку файла index у вас должна открыться html-страница в браузере Internet Explorer, на странице будет только одна строка "Моя первая страница для сайта".
Значения главных тегов
Теперь давайте разберемся, что же значит тот код, который мы вписали в html-страницу. Посмотрите как начинается и заканчивается html-код:
<html>
<head>
<title>Мой сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Моя первая страница для сайта
</body>
</html>
<html> - тег, который сообщает браузеру о начале хтмл-страницы и соответственно тег </html> сообщает браузеру о конце хтмл-страницы. Таким образом мы имеем пару тегов или парный тег, <html> - это тег открывающий, а </html> - закрывающий тег. Так образуется "контейнер", в котором могут быть другие теги, но помните, что путать открывающие и закрывающие теги никак нельзя!
<html>страница</html> - Правильно!
</html>страница<html> - Не правильно!
</html>страница</html> - Не правильно!
<html>страница<html> - Не правильно!
Отлично, тут никаких сложностей у вас быть не должно, разберем следующую пару тегов:
<html>
<head>
<title>Мой сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Моя первая страница для сайта
</body>
</html>
По сути хтмл-страница состоит из "головы" и "тела" это видно из названий тегов:
<head> - "голова" страницы, внутри этого тега (контейнера) пишут служебную информацию о странице, в основном эта информация предназначена для поисковиков (Яндекс, Рамблер) и она не отображается в браузере.
<body> - "тело" страницы, внутри этого тега (контейнера) содержится информация, которая отображается на странице при открытии ее в браузере.
Значения тегов "шапки" страницы
Посмотрите на теги расположенные в "шапке" страницы:
<head>
<title>Мой сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<title> - этот тег сообщает браузеру как называется хтмл-страница, это название можно увидеть если открыть страницу и посмотреть в верхний левый угол браузера.
Далее разберем значение целой строки, начинается строка с тега <meta> - этот тег непарный, у него нет закрывающего тега, а внутри тега прописаны специальные атрибуты, которые имеют определенное значение.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> - эта строка означает что хтмл-страница имеет кодировку windows-1251 (кириллица), если вы будете создавать сайт на английском языке, то в этой строке нужно указать кодировку windows-1252 (западноевропейская).
Значения тегов "тела" страницы
Тут у нас нечего разбирать, поскольку между тегами <body> и </body> только одна строка и никаких тегов:
<body>
Моя первая страница для сайта
</body>
На странице отображается строчка "Моя первая страница для сайта", попробуем дописать вторую строку, в конечном варианте код должен выглядеть так:
<html>
<head>
<title>Мой сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Моя первая страница для сайта
Вторая строка
</body>
</html>
Чтобы изменить код на нашей хтмл-странице нужно снова открыть ее Блокнотом и дописать новую строку. После необходимых изменений сохраните страницу и откройте ее браузером или если вы его не закрывали, то просто обновите окно, для обновления можно нажать кнопку на клавиатуре F5. В браузере вы увидите только одну строку или точнее увидите, что из двух строк получилась одна:
Моя первая страница для сайта Вторая строка
Как видите браузер не понимает чего от него хотят, а хотим мы чтобы было две строки, поэтому применим тег, который создает переход на новую строку это тег <br> (тег непарный).
<html>
<head>
<title>Мой сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Моя первая страница для сайта
<br>
Вторая строка
</body>
</html>
Допишите этот тег сохраните изменения и посмотрите, что у вас получилось:
Моя первая страница для сайта
Вторая строка
Есть еще один тег, который создает переход на новый абзац:
<p>абзац</p>
Тег парный, поэтому новый абзац должен быть внутри этого тега, например:
<html>
<head>
<title>Мой сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Моя первая страница для сайта
<br>
Вторая строка
<p>Второй
абзац</p>
<p>Третий
абзац</p>
</body>
</html>
Итак, вы уже постигли азы создания сайтов и теперь перейдем к несколько сложным манипуляциям, таким как выделение заголовков, создание жирного текста и задание цвета.
Форматирование текста
Для создания страницы мало простого текста, часто нужно выделить текст цветом или увеличить размер, для этого существуют специальные теги и атрибуты к ним.
На странице можно применять до 6-ти заголовков, а обозначаются они так:
<h1>Заголовок
1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
Вставьте эти заголовки на вашу страницу и посмотрите как они будут выглядеть в браузере.
Чтобы изменить размер стандартного шрифта применяют следующие теги:
<font
size="1" >р</font>
<font size="2"
>а</font>
<font
size="3" >з</font>
<font size="4"
>м</font>
<font
size="5" >е</font>
<font size="6"
>р</font>
<font
size="7" >ш</font>
<font
size="7" >р</font>
<font size="7"
>и</font>
<font
size="7" >ф</font>
<font size="7"
>т</font>
<font
size="7" >а</font>
Выделить текст жирным можно парным тегом <b></b> - этот тег уже устарел, но его все еще применяют, а вот новым тегом теперь считается аналогичный тег <strong></strong>. Сделайте две одинаковые строки, но с разными тегами:
Выделяем слово
<b>жирным</b>
<br>
Выделяем слово <strong>жирным</strong>
Отлично, пока все получается! Вы еще не устали? Вам не скучно? Лично мне очень интересно создавать сайты, всегда интересно делать красивые сайты с удивительным дизайном и к тому же за разработку сайта я никому не плачу сумасшедших сумм. Если вы хотите научиться делать красивые сайты, то вам нужно еще научиться работать с программой Photoshop - это программа для работы с графикой. Фотошоп поможет создавать уникальный дизайн для ваших проектов. Конечно, сделать красивый сайт за пару часов, без опыта работы, у вас не получится, но, посмотрев как это делаю, я вы можете сделать более менее приличный сайт и не распугивать посетителей.
Ну что ж немножко отвлеклись - давайте продолжим создание сайта ;)
Раскрасим текст и страницу
Управлять размером шрифта мы уже научились и теперь самое время заняться цветовыми решениями, покрасим текст в красный цвет:
<font color="#FF0000">Красный текст</font>
Атрибут color задает цвет, а сам цвет указан в шестнадцатеричном значении #FF0000, можно такой же цвет указать при помощи обычного англоязычного значения:
<font color="red">Красный текст</font>
Вот вам небольшая таблица таких значений:
| Название | Цвет | Hex |
|---|---|---|
| aliceblue | #F0F8FF | |
| antiquewhite | #FAEBD7 | |
| aquamarine | #7FFFD4 | |
| black | #000000 | |
| blue | #00FFFF | |
| crimson | #DC143C | |
| cyan | #00FFFF | |
| darkblue | #00008B | |
| darkgreen | #006400 | |
| darkorange | #FF8C00 | |
| darkorchid | #9932CC | |
| deeppink | #FF1493 | |
| deepskyblue | #00BFFF | |
| dimgray | #696969 | |
| dodgerblue | #1E90FF | |
| forestgreen | #228B22 | |
| fuchsia | #FF00FF | |
| gold | #FFD700 | |
| gray | #808080 | |
| green | #008000 | |
| greenyellow | #ADFF2F | |
| orangered | #FF4500 | |
| red | #FF0000 | |
| sienna | #A0522D | |
| silver | #C0C0C0 | |
| wheat | #F5DEB3 | |
| white | #FFFFFF | |
| yellow | #FFFF00 | |
| yellowgreen | #9ACD32 |
А теперь зададим цвет фона для всей страницы, поскольку разметка страницы начинается с тега <body>, то и задавать атрибуты цвета будем в этом теге, сделаем цвет фона (страницы) желтым цветом:
<body bgcolor="#FFFF00">
Так мы задали цвет для всей страницы, а можно еще вместо сплошного цвета
задать некое изображение, например маленькое изображение тетрадной клетки
<body background="images/bg.gif">
На вашей странице получится так:
Если в коде поставить и изображение и цвет, то фон страницы в клетку можно изменить на желтый:
<body background="images/bg.gif" bgcolor="#FFFFD7">
При таком варианте кода изображение повторяется на странице по вертикали и горизонтали.
Вставка изображений
Вставлять изображения на задний план мы научились, а теперь вставим картинку после текста. Напечатайте следующий код:
<img src="images/pic.gif">
images/pic.gif - путь в картинке с названием pic
Теперь можно посмотреть как отображается картинка на странице. Вокруг картинки вы увидите черную рамку, чтобы ее убрать добавьте в html-код атрибут, который сделает рамку толщиной в ноль пикселей:
<img border="0" src="images/pic.gif">
Изменяя значение атрибута border можно управлять толщиной рамки.
Изображение можно выравнивать по центру, левому и правому краю:
<img border="0" src="images/pic.gif" align="right">
На этом мы закончим изучение создания сайта и перейдем к следующему шагу:
Как разместить сайт в Интернете бесплатно
Поскольку наше обучение имеет ознакомительный характер, то мы не будем регистрировать домен (имя сайта) и не будем покупать хостинг (место на диске), обойдемся бесплатными услугами от Яндекса, который предоставляет услуги бесплатно на сайте www.Narod.ru
Народ.ру - это место где можно бесплатно получить и домен и хостинг, но без поддержки многих полезных функций. Для того, чтобы научиться делать сайты и размещать их в Интернете Народ.ру очень даже необходим.
Регистрация домена
Домен - это имя вашего сайта. Народ.ру раздает домены 3-го уровня, например computerlessons.narod.ru - как правило домены 3-го уровня раздаются бесплатно, а 2-го уровня стоят денег, например: computerlessons.ru
Чтобы получить домен на Народе, нужно там зарегистрироваться, для этого идем на сайт www.Narod.ru, находим там ссылку "Зарегистрироваться". Если у вас есть почта на Яндексе, то регистрироваться вам не нужно, достаточно просто авторизоваться и пройти по ссылке "Создайте свой сайт" далее по ссылке "Создать". После создания вы попадете в мастерскую сайта, найдите там ссылку "Загрузка файлов на сайт", вам будет предложено выбрать файлы для загрузки. Через кнопку "Обзор..." найдите на вашем компьютере файлы сайта и загрузите их на Народ.
Теперь можно посмотреть как выглядит ваш сайт в Интернете. Возможно сразу после загрузки файлов на Народ вы не сможете посмотреть свой сайт, браузер выдаст ошибку 404 (нет страницы), тогда придется некоторое время подождать пока сайт начнет работать, это время может составить от 10 минут до 24 часов и более.
Доменное имя сайта на Народе будет выглядеть так computerlessons.narod.ru
На этом урок заканчиваю, если будут проблемы с созданием сайта, то заходите на форум.
Хотите научиться делать сайты и зарабатывать на них, подпишитесь на рассылку!
