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

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

Ответ
 
LinkBack Опции темы
Старый 22.01.2010, 18:50 #1 (Ссылка)
Подглядывающий
Дополнительная информация
По умолчанию

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


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



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

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


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

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

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

<!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, 00:31 #2 (Ссылка)
Новичок
Дополнительная информация
По умолчанию

как всегда... пообещают строку с кодом, а мы на это и попадаемся ))) Страницу предполагается делать полностью на html?
SeverinD вне форума   Ответить с цитированиемОтветить с цитированием

Старый 28.01.2010, 01:10 #3 (Ссылка)
Подглядывающий
Дополнительная информация
По умолчанию

Теперь нам, наверное, имело бы смысл сказать всему миру, что это у нас за ресурс и кто его создатель/обладатель?! :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, 07:45 #4 (Ссылка)
Подглядывающий
Дополнительная информация
По умолчанию

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

<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, 14:15 #5 (Ссылка)
Новичок
Дополнительная информация
По умолчанию

Когда уже будим добавлять рисунки в сайт ? ))) У меня есть код в рисунок фставяется и действует как черфь ) Не атакует только создателя Ыыы
illyn вне форума   Ответить с цитированиемОтветить с цитированием

Старый 05.02.2010, 14:45 #6 (Ссылка)
Подглядывающий
Дополнительная информация
По умолчанию

От злодей, лишь бы крякнуть кого-нить. Не спешите, доберемся и до фанни-гейм :0)
Fancb вне форума   Ответить с цитированиемОтветить с цитированием

Старый 07.02.2010, 13:03 #7 (Ссылка)
Новичок
Дополнительная информация
По умолчанию

Ну расскажите как правильно добавлять картинки,чтобы при щелчке на них был переход на другой сайт???
baze12 вне форума   Ответить с цитированиемОтветить с цитированием

Старый 10.02.2010, 17:02 #8 (Ссылка)
Подглядывающий
Дополнительная информация
По умолчанию

Я правильно понял, что Вы хотите, что бы, когда пользователь кликает на изображение его перенаправляло на другой ресурс?
Fancb вне форума   Ответить с цитированиемОтветить с цитированием

Старый 13.02.2010, 14:53 #9 (Ссылка)
Новичок
Дополнительная информация
По умолчанию

)) Типа да , и причом куда подальше, типо на сайт Бориски Моесеева )))
illyn вне форума   Ответить с цитированиемОтветить с цитированием

Старый 16.02.2010, 16:28 #10 (Ссылка)
Новичок
Дополнительная информация
По умолчанию

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

Ответ

Опции темы

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Что нужно для создания сайта социальной сети? omegaman Социальные сети 2 18.03.2016 19:50
15 полезных ресурсов для создания сайта. Ragu Дайджест блогосферы 1 09.03.2016 21:36
Требуется человек для создания сайта max121290 Поиск исполнителя 2 09.07.2012 16:14
Системы создания сайта utweetme Сайтостроение 13 17.09.2010 01:14
Что нужно уметь для создания сайта? 2vesel Начинающий кодер 2 26.05.2010 08:26


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

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

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

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

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