Форум вебмастеров

Сайтостроение Хитрости вебмастера. Сайты простые и сложные

WelcomePartners
Ответ
 
LinkBack Опции темы
Старый 22.01.2010, 19:50 #1 (Ссылка)
Аватар для Fancb
Подглядывающий
 
Регистрация: 04.12.2009
Сообщений: 38
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
Fancb Fancb вне форума
Подглядывающий
Дополнительная информация
По умолчанию

Уроки создания собственной странички/сайта


Здесь, по шагам, мы начнем осваивать создание своей странички/сайта.



Многие из вас хотели бы уметь делать хотя бы простенькие сайты, но представления не имеют "откуда ноги растут". Эта тема призвана помочь вам сделать первый шажок в освоении по-своему интересной темы. Безусловно, она очень и очень может пригодится любому из вас в будущем.

Итак, начнем.


Любой сайт состоит из страниц. В данном примере мы будем рассматривать одну единственную страницу, которую, собственно говоря, и будем создавать.

Перво-наперво, что необходимо усвоить, так сказать впитать с молоком ЛЮБОМУ кодеру - это тот факт, что, если вы хотите чтобы страница отображалась корректно, то есть так, как вы задумали, необходимо самой первой строкой указывать так называемый ДОКТАЙП!

А вот собственно говоря и строка кода с ним:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Мы не будем обсуждать другие варианты. Для нас имеет смысл только это представление документа браузеру.

вы должны на ОТЛИЧНО усвоить это обязательное правило, как и многое другое из того, что я буду постепенно тут выкладывать.

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

А подадим мы ему вот что: <HTML> - таким образом мы объявляем браузеру о начале документа. Далее следует <HEAD> и сразу за ним <title>. Что представляют из себя эти два новых объявления именуемые тегами (теги). <HEAD> есть ничто иное, как заголовок документа, однако сейчас мы не будем подробно на нем останавливаться, в реальности он понадобится нам несколько позже. Для вас же ВАЖНО принять обязательность использования данного тега в документе. Зато <title> нам пригодится уже сейчас.

Посмотрите внимательно на то, что написано в браузере на самом верху (так скажем на верхней синей полоске), например, когда вы на странице YANDEX.RU. Там написано Яndex. Воспользовавшись тегом <title> мы с вами сможем разместить там все, что душе угодно, например: "МИГРАЦИЯ СУСЛИКОВ В СЕВЕРНУЮ КАНАДУ". Написав эту чудесную фразу мы с вами ОБЯЗАНЫ сказать браузеру, точнее его обработчику HTML-кода, что объявленный тег - его функция, окончен. Делается это простым способом. К тегу добавляется слеш: "/" и выглядит это вот так: </title>. По умолчанию, по факту закрытия <title> мы сразу же скажем браузеру о том, что и тег <HEAD> у нас также окончился и сам документ <HTML>. В итоге у нас получается следующая конструкция:

<HTML>
<HEAD><title>Миграция сусликов в Северную Канаду</title></head>
</HTML>

Не будем задерживаться, не будем, помчимся дальше.

В жизни кодера часто происходят казусы и многие из них связаны с тем, что разные браузеры, вы, наверно, и сами это уже замечали, отображают несколько по-разному то, что он "хочет показать миру". Так вот сейчас мы с вами на корню решим данную проблему.

<HTML>
<HEAD><title>Миграция сусликов в Северную Канаду</title>
<STYLE>
body { margin: 0;
padding: 0;
}
</STYLE>
</HEAD>
<BODY border="0", bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
Отступы от края окна браузера до контента убиты. Теперь у нас все буит ОК :0)
</BODY>
</HTML>

Теперь нам, наверное, имело бы смысл сказать всему миру, что это у нас за ресурс и кто его создатель/обладатель?! :0) Давайте так и поступим.


<HTML>
<HEAD><title>Миграция сусликов в Северную Канаду</title>
<STYLE>
body { margin: 0;
padding: 0;
}
</STYLE>
</HEAD>
<BODY border="0", bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0"
Fancb вне форума   Ответить с цитированиемОтветить с цитированием

Старый 25.01.2010, 01:31 #2 (Ссылка)
Аватар для SeverinD
Новичок
 
Регистрация: 03.08.2009
Сообщений: 4
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
SeverinD SeverinD вне форума
Новичок
Дополнительная информация
По умолчанию

как всегда... пообещают строку с кодом, а мы на это и попадаемся ))) Страницу предполагается делать полностью на html?
SeverinD вне форума   Ответить с цитированиемОтветить с цитированием
Старый 28.01.2010, 02:10 #3 (Ссылка)
Аватар для Fancb
Подглядывающий
 
Регистрация: 04.12.2009
Сообщений: 38
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
Fancb Fancb вне форума
Подглядывающий
Дополнительная информация
По умолчанию

Теперь нам, наверное, имело бы смысл сказать всему миру, что это у нас за ресурс и кто его создатель/обладатель?! :0) Давайте так и поступим.


<HTML>
<HEAD><title>Миграция сусликов в Северную Канаду</title>
<STYLE>
body { margin: 0;
padding: 0;
}
</STYLE>
</HEAD>
<BODY border="0", bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0"
<TABLE>
А вот и новый страшшный зверь :0) И нафига он нам теперь?! Нужен, еще как нужен. Ведь мы же хотим покеазать миру именно то, что мы хотим показать, а не то, что вытворит браузер. Этим тегом мы говорим обработчику браузера, что нами инициализируется-начинается таблица. А именно с таблицей мы и можем вытворять многое из того, что нам хотелось бы, но пока не доступно. Но перед этим давайте скажем обработчику, что нам не нужны никакие отступы по умолчанию, что потом, когда-нибудь, если будет нужно, мы сами их зададим. Итак, говорим:


<HTML>
<HEAD><title>Миграция сусликов в Северную Канаду</title>
<STYLE>
body { margin: 0;
padding: 0;
}
</STYLE>
</HEAD>
<BODY border="0", bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<TABLE cellspacing="0" cellpadding="0"></TABLE> (мы же помним о том, что надо закрывать теги?!)
</BODY>
</HTML>

Ура! Мы убрали отступы от краев таблицы и готовы сделать миру первое заявление! Теперь все в нашей власти! :0)
Fancb вне форума   Ответить с цитированиемОтветить с цитированием
Старый 31.01.2010, 08:45 #4 (Ссылка)
Аватар для Fancb
Подглядывающий
 
Регистрация: 04.12.2009
Сообщений: 38
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
Fancb Fancb вне форума
Подглядывающий
Дополнительная информация
По умолчанию

Что ж, друзья мои, пробил час не просто сказать, а показать миру, что мы что-то можем! Давайте для начала сделаем это так:

<DIV><H1> Привет гостям, THIS SITE is MINE! :0) </H1>/DIV>

А вот и полный код примера:

<HTML>
<HEAD><title>Миграция сусликов в Северную Канаду</title>
<STYLE>
body { margin: 0;
padding: 0;
}
</STYLE>
</HEAD>
<BODY border="0" bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<TABLE cellspacing="0" cellpadding="0"><DIV><H1> Привет гостям, THIS SITE is MINE! :0) </H1></DIV></TABLE> </BODY>
</HTML>

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

<TABLE cellspacing="0" cellpadding="0" width="100%">
Добавив width="100%" мы сказали браузеру, что таблица у нас 100% шириной и благодаря этому объявлению мы можем теперь сделать то, что исправит положение на нашей страничке:

К <H1> добавим уникальное имя first:
<H1 class="first">Привет гостям, THIS SITE is MINE! :0)<H1> и еще один штрих, наверх и это ОБЯЗАТЕЛЬНО, добавим то, что мы хотим с заголовком намутить:

<STYLE>
body { margin: 0;
padding: 0;
}

H1.first{
color: green; text-align: center;}
</STYLE>

Мы только что установили текст по центру: text-align: center; и заодно покрасили его: color: green;

Вот теперь ВСЯ утка наша! Гляньте! Совсем другое дело, не так ли?!
Смотрим результат:






<HTML>
<HEAD><title>Миграция сусликов в Северную Канаду</title>
<STYLE>
body { margin: 0;
padding: 0;
}
H1.first{
color: green; text-align: center;}
</STYLE>
</HEAD>
<BODY border="0", bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<TABLE cellspacing="0" cellpadding="0" width="100%"><DIV><H1 class="first"> Привет гостям, THIS SITE is MINE! :0) </H1></DIV></TABLE> </BODY>
</HTML>

Продолжение следует!
Fancb вне форума   Ответить с цитированиемОтветить с цитированием
Старый 01.02.2010, 15:15 #5 (Ссылка)
Аватар для illyn
Новичок
 
Регистрация: 01.02.2010
Сообщений: 3
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
illyn illyn вне форума
Новичок
Дополнительная информация
По умолчанию

Когда уже будим добавлять рисунки в сайт ? ))) У меня есть код в рисунок фставяется и действует как черфь ) Не атакует только создателя Ыыы
illyn вне форума   Ответить с цитированиемОтветить с цитированием
Старый 05.02.2010, 15:45 #6 (Ссылка)
Аватар для Fancb
Подглядывающий
 
Регистрация: 04.12.2009
Сообщений: 38
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
Fancb Fancb вне форума
Подглядывающий
Дополнительная информация
По умолчанию

От злодей, лишь бы крякнуть кого-нить. Не спешите, доберемся и до фанни-гейм :0)
Fancb вне форума   Ответить с цитированиемОтветить с цитированием
Старый 07.02.2010, 14:03 #7 (Ссылка)
Аватар для baze12
Новичок
 
Регистрация: 26.10.2009
Сообщений: 2
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
baze12 baze12 вне форума
Новичок
Дополнительная информация
По умолчанию

Ну расскажите как правильно добавлять картинки,чтобы при щелчке на них был переход на другой сайт???
baze12 вне форума   Ответить с цитированиемОтветить с цитированием
Старый 10.02.2010, 18:02 #8 (Ссылка)
Аватар для Fancb
Подглядывающий
 
Регистрация: 04.12.2009
Сообщений: 38
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
Fancb Fancb вне форума
Подглядывающий
Дополнительная информация
По умолчанию

Я правильно понял, что Вы хотите, что бы, когда пользователь кликает на изображение его перенаправляло на другой ресурс?
Fancb вне форума   Ответить с цитированиемОтветить с цитированием
Старый 13.02.2010, 15:53 #9 (Ссылка)
Аватар для illyn
Новичок
 
Регистрация: 01.02.2010
Сообщений: 3
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
illyn illyn вне форума
Новичок
Дополнительная информация
По умолчанию

)) Типа да , и причом куда подальше, типо на сайт Бориски Моесеева )))
illyn вне форума   Ответить с цитированиемОтветить с цитированием
Старый 16.02.2010, 17:28 #10 (Ссылка)
Аватар для unnutz
Новичок
 
Регистрация: 12.12.2009
Сообщений: 2
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
unnutz unnutz вне форума
Новичок
Дополнительная информация
По умолчанию

Мега-вопрос:
есть зверски интересная идея.Такого в веб еще не было.Примерно представляю структуру.На пути к созданию этого портала 3 проблемы:лень,не могу правильно настроить связку пиашпи+апач+мускул,нет толкового руководства.Как решить 2 и 3 проблемы?Спасибо
unnutz вне форума   Ответить с цитированиемОтветить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Вкл.
Pingbacks are Вкл.
Refbacks are Вкл.


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Требуется человек для создания сайта max121290 Поиск исполнителя 2 09.07.2012 17:14
Системы создания сайта utweetme Сайтостроение 13 17.09.2010 02:14
Что нужно уметь для создания сайта? 2vesel Начинающий кодер 2 26.05.2010 09:26
Видео уроки по PHOTOSHOP качаем shatl Web дизайн 3 12.05.2010 23:11
Делаем Личные сайты и странички в Интернет Fancb Сайтостроение 26 15.04.2010 18:57


Текущее время: 07:18. Часовой пояс GMT +3.

Powered by vBulletin®
Copyright ©2000 - 2017, WMboard.
Перевод: zCarot
 

Форум вебмастеров

Здесь делают сайты, учатся на них зарабатывать. Ты новичёк, и ничего не понимаешь в создании сайтов и в интернет заработке? Не знаешь ответа на вопрос по сайтостроению? Мучают вопросы сео оптимизации?

Не беда, присоединяйся к сообществу вебмастеров, и зарабатывай вместе с нами!