в "анатомии" веб-странички, (она же интернет-страничка, она же HTML-страничка)
и ее главной фишки - гиперссылки. Да, той самой ссылочки, которой связаны все
странички в интернете, и посредством которых мы так легко путешествуем с сайта
на сайт. В первой, да и во второй части нашего краткого учебного курса по извлечению
денег из интернета его знание было совершенно необязательным (копируй да вставляй),
но для четвертой и пятой умение в нем разбираться вполне может пригодится (Помните
нашу цель? Нормальные деньги из...). Короче, спорим, что сейчас ты сейчас сам
создашь сайт за пару минут?
САЙТ МИНУТ ЗА ПЯТЬ
Запустите любой текстовый редактор (хотя желательно воспользоваться профессиональной
программой для HTML-вёрстки - Macromedia Dreamweaver). Например, "Блокнот":меню Пуск -> Программы -> Стандартные -> Блокнот.
В нём мы будем писать содержимое сайта - т.н. контент. Для начала создадим
шаблон (введите это в блокнот):<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="#E5E5E5" text="#000000" link="#006699"
vlink="#5493B4">
Привет всем!
<a href="http://www.yandex.ru">Ссылка на Яндекс</a>
</body>
</html>
Сохраните набранный текст в файл index.htm (если вы это написали в блокноте,
то не забудьте при сохранении выбрать именно "Сохранить как..." и
переключить "текстовые файлы" во "все файлы"). Дважды кликните
по появившемуся файлу index.htm - откроется браузер и отобразит ваш первый сайт!
А в Dreamweaverе это сделать еще проще: весь необходимый для существования
HTML - странички код программа создает сама при создании файла, а тебе остается
только повставлять нужные объекты, а если нужно сделать ссылочку - то просто
курсором мыши выделяешь слово (или щелчком - картинку), которые будут ссылкой,
и, нажав на иконку-папочку, выбираешь файл - адрес, при этом весь код ссылки
сразу же прописывается в окошке "Ссылка". Или в окошко "Ссылка"
прописываешь удаленный адрес (вида http://чего-то там) Ну, а другие возможности
этой поистине замечательной программы в рамках нашего курса, пожалуй, и не понадобятся.
Понятно, что если ссылка делается на отдаленный ресурс, то она будет иметь вид
<a href="http://www.yandex.ru"><img src="files/dreamweaver_tumb.jpg"></a>
Слова между знаками "меньше" и "больше" - специальные команды, т.н. теги. Они дают понять браузеру, как должен выглядеть сайт, это разметка сайта (браузер - программа, с помощью которой вы просматриваете сайты, напимер Internet Explorer)
У каждого тега за некоторыми исключениями есть закрывающие теги - например,
у тега <html> закрывающий тег - </html>. Если вы открываете тег,
то обязательно должны его и закрыть, иначе страничка будет отображаться неправильно.
Тут нужно соблюдать стуктуру вложенности - как матрёшки вложены друг в друга,
так и например тег <title> вложен в тег <head>.
Небольшая справка по тегам:
обязательные теги
HTML - означает, что сайт создан с использованием языка HTML, Hyper Text Markup
Language - этот тег должен "обрамлять" все страницы;
HEAD - заголовок сайта, в нём описывается служебная информация о сайте (ключевые
слова, title, описание);
TITLE - тайтл страницы, между этими тегами необходимо писать текст, который
будет оглавлять сайт;
BODY - тело сайта, между этими тегами пишется отображаемый контент, который
и будет видеть посетитель;
необязательные теги
B - выделяет текст жирным (попробуйте написать вместо "Привет всем!"
- "<b>Привет всем!</b>";
I - курсивный текст;
U - подчёркнутый текст;
A - тег ссылки, в параметре href необходимо указать адрес, на который эта ссылка
ссылается, а между тегами пишется отображаемый текст - в результате если пользователь
нажмёт курсором на этот текст, то перейдёт на сайт, прописанный в параметре
href.
Также у некоторых тегов могут быть параметры - как это можно видеть в нашем
примере, в теге BODY. Параметр bgcolor задаёт цвет фона (Background color),
в нашем случае он равен #E5E5E5. Это шестнадцатеричное представление цвета в
RGB составляющих, т.е. FF - максимальное значение для одной составляющей, а
00 - соответственно минимальное. Параметр TEXT в теге BODY задаёт цвет основного
текста, LINK - цвет ссылок, VLINK - цвет посещавшихся ранее ссылок.
Совет: Чтобы увидеть html - код странички, в IE нужно нажать Вид --> просмотр
HTML-кода. В Опере Вид --> Исходный код
Я не сильно загрузил? Тогда вот вам шпаргалка по тегам, и не будем больше об
этом!
<b></b> - Жирный шрифт. Может работать не во всех браузерах
<i></i> - Курсив. Может работать не во всех браузерах
<h1></h1> - Заголовок 1-го уровня. Самые крупные заголовки
<h6></h6> - Заголовок 6-го уровня. Самые мелкие заголовки (также
существуют заголовки промежуточных уровней)
<ul><li></li></ul> - Ненумерованный список. Должен содержать
элементы списка (<li></li>) - любое их количество
<ol><li></li></ol> - Нумерованный список. Должен содержать
элементы списка (<li></li>) - любое их количество
<a href="anotherPage.htm">Переход на другую страницу</a>
- Гиперссылка (или просто - ссылка). Ссылка на другую страницу. Текст между
тегами <a> и </a> на странице будет виден как ссылка. Когда пользователь
щёлкает мышкой по ссылке, браузер переходит на указанную страницу.
<img src="myimage.jpg"> - Рисунок ("myimage.jpg" в
данном случае - имя файла с рисунком) Размещает на странице рисунок. Поддерживаются
графические форматы GIF, JPG и PNG.
<font color="FF0000">Эта надпись - красного цвета</font>
- Изменить шрифт. Можно изменять цвет, размер и вид (гарнитуру) шрифта.
<br> - Перенос строки. Перенос строки в тексте. Не имеет закрывающего
тега.
<hr> -Горизонтальная линия. Помещает на странице горизонтальную линию.
Не имеет закрывающего тега. Совет: Macromedia Dreamweaver знаменит тем, что
выдает "чистый" код, но даже его зачастую приходится поправлять руками.
Использование Dreamweaverа на порядок сокращает время работы и количество ошибок
в коде, поэтому верстают сначала в нем, а потом просматривают код, убирая лишнее.
КАК ПОМЕСТИТЬ САЙТ В ИНТЕРНЕТЕ
Если вы впервые пытаетесь закинуть своё творение в интернет - вам следует ознакомиться
с основными терминами:
Хостинг - услуги, которые предоставляют хостеры (см. "хостер");
Хостер - организация (физическое или юридическое лицо), которая предоставляет
свой сервер (см. "сервер") сторонним лицам - например вам - для размещения
своего сайта во всемирной сети интернет, на платной или даже бесплатной основе;
Сервер - мощный компьютер, как правило оснащённый очень надёжными средствами
хранения информации и большим объёмом оперативной памяти, 24 часа в сутки подключённый
к сети;
Домен - имя сайта, по которому пользователи могут найти его в интернете, например
у Яндекса два домена - yandex.ru и ya.ru, у нашего сайта один домен
Итак, для начала вам необходимо выбрать хостера - который предоставит вам гнёздышко
для сайта. Скорее всего, свой первый сайт вы захотите для начала разместить
на бесплатной основе - многие бесплатные хостинги ненамного уступают платным.
Наиболее распространённые бесплатные хостеры России - это narod.ru, boom.ru,
holm.ru, nm.ru, fatal.ru. У каждого есть свои особенности, например на Народ.ру
очень удобная панель управления сайтом, через неё напрямую можно заливать файлы,
есть примитивная но всё же - статистика, однако на Народ.ру нельзя размещать
динамические сайты, т.е. если вы захотите на нём сваять какой-нибудь интернет-магазин
или форум, то ничего не выйдет. Чего не скажешь о Holm.ru - там без проблем
можно установить скрипты на языках Perl, PHP и, если мне не изменяет память,
работать с базами данных mySQL - но чтобы залить туда свои файлы, придётся скачать
и ознакомиться с FTP-клиентом. По сервису, по качеству отечественные хостинги
значительно уступают западным, но раз имеется русская админка, то учиться, несомненно,
удобнее.
Выбрали хостера? Замечательно! Просто зарегистрируйтесь у него. Это займёт
не более 5-ти минут, всё предельно просто. Правила пользования - практически
такие же, как правила пользования электронным почтовым ящиком (отличия только
в том, что адрес вашего сайта будет таким, какой вы выбрали логин - например,
если на Народ.Ру вы зарегились под ником pupkin, то адрес вашего сайта в интернете
будет www.pupkin.narod.ru), и если вы не сможете с ними разобраться, то я думаю
вы вообще зря затеяли делать сайт...
После регистрации остался последний шаг - заливка (или аплоад, upload) файлов
на сервер хостера. На Народ.ру это можно сделать через контрольную панель, в
разделе управления файлами. Если же вы выбрали Holm.ru или Fatal.ru - то нужен
FTP-клиент, он позволит общаться с вашим сайтом как с папкой, найдите и скачайте
какой-нибудь хороший FTP-клиент. Среди FTP-клиентов для начинающих полно и русифицированых,
и бесплатных, все они похожи друг на друга. Включают окно с файловой системой
вашего компа, окно с файловой системой на удаленном сервере - ваш сайт, собственно,
окна для ввода логина-пароля - что нужны для доступа. Вот, например, мой любимый
bulletproof. Как видите, все очень просто!
... Впрочем, в большинстве случаев себя прекрасно оправдывает всенародно любимый Total Commander,
Однако, если вы в душе лелеете грандиозные планы и горите желанием создать проект посерьёзнее - то без платного хостера вам не обойтись! На это есть несколько веских причин:
- Платный хостер часто готов предоставить вам домен второго уровня, т.е. имя_домена.ru (или .com и т.п.) бесплатно - что приятно, особенно если учесть дискриминацию, которую поисковики проявляют к доменам третьего-четвертого уровня;
- Платные хосты поддерживают современные интернет-технологии, что может быть важно для создания сложных сайтов типа форумов, магазинов и тп.;
- Если вам понадобится помощь с организацией сайта, размещением скриптов на сайте, разрешением проблем любого характера - приличный платный хостер вам оперативно поможет;
- Платный хост обычно надежнее;
- Никакие баннеры, как на бесплатных хостингах, вам навешивать не будут!
Комментариев нет:
Отправить комментарий