Сайт своими руками

Vad0 · Сообщение **Vad0** » Вт июл 01, 2008 2:05

<?="Основы Web-технологий"?>

Vad0 · Сообщение **Vad0** » Вт июл 01, 2008 2:37

Эта заметка написана по просьбе пользователя topic, для него и всех остальных..

Я знаю что само изучение может быть скучным, по этому давайте учить и сразу же делать веб страничку (пока без функционала), но
говорю сразу не думайте что у нас получится красивая страничка :no:

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

Самое первое, если у вас до сих пор Internet Explorer - выкиньте его и поставьте Firefox 3

Теперь второе: Редактор кода подбирайте себе сами, можете в блокноте кодить, я кодю в Notepad++ :wink:

Начнем все из html - самое простое, так как сложное пока учить смысла нету.
HTML - Язык разметки гипертекста.
На нем написаны все веб страницы интернета, он как скелет дизайнерской части сайта. То есть именно с помощью его можно придать тексту цвет, размер, шрифт,создать таблицу, список, форму и т.д.
html интерпретируется Web браузером:

причем у каждого браузера по-разному.
По этому есть основная спецификация, типа правил для браузеров по отображению веб страницы.
Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками тегами.

Теги имеют вид <*> - открывающий, и </*> - закрывающий, где * - имя тега.
Любой HTML-документ открывается тегом <html> и им же закрывается.
<html> - открывающий
</html> - закрывающий

Код: Выделить всё

<html>
</html>

Между тегами <html> и </html> следует разместить тег <head></head> (с англ. голова)
В этом теге описывается информация о странице.
В этом теге указываем тег <title> (с англ. заголовок) - заголовок html документа - отображается в верхней части окна браузера
В сумме у вас должен получится такой код html документа :

Код: Выделить всё

   <html>
      <head>
         <title>Заголовок</title>
      </head>
   </html>

Теперь главный тег - <body> (с англ. тело) - описываем тело документа, внутри этого тега и будут наши таблицы, формы, текст и все такое.
У вас получается такой код:

Код: Выделить всё

   <html>
      <head>
         <title>Заголовок</title>
      </head>
      <body>
         Тело документа
      </body>
   </html>

Теперь сохраните ваш код как html документ с расширением .html и запустите в браузере.
Это был самый простой html документ.

Больше о html прочтите здесь

Так, это был ваш первый html документ, а может и не первый.
Теперь перейдем непосредственно к созданию самой страницы..

Код: Выделить всё

<html>
<head>
<title>Web Page Title</title>
</head>
<body>
   <div id="container">
      <div id="header">
         header
      </div>
      <div id="menu">
         Menu
      </div>
      <div id="content">
         <div class="column" id="left">
            column left
         </div>
         <div class="column" id="right">
            column right
         </div>
         <div id="center">
            center content
         </div>
      </div>
      <div id="footer">
         footer
      </div>
   </div>
</body>
</html>

Теги бывают одиночными и парными (контейнеры).
Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст.
У тегов допустимы различные параметры, которые разделяются между собой пробелом.
Впрочем, есть теги, без всяких дополнительных атрибутов.
Параметры условно можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения.
Видите, здесь мы используем только два необязательных параметра - id и class.

Добавился только тег div - <DIV> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.
Параметр id, который существует во всех тегах используется для того чтобы обратиться к определенному параметром id тегу html из под css или javascript.
Css - Каскадные таблицы стилей, используются для создания внешнего вида web страницы, интерпретируется Web браузером
Javascript - Скриптовый язык программирования, используется для создания сценариев, интерпретируется Web браузером, встраивается в html документ
посредством тега <script>

Css стили

Css стили нужно писать в тегах

Код: Выделить всё

<style>
</style>

написав их в теге head, или же подключить файл таким образом:

Код: Выделить всё

<link rel="stylesheet" href="путь к css файлу">

или

Код: Выделить всё

<style>
   @import url("путь к css файлу")
</style>

И так как же писать css..
Css описывается таким образом:

Код: Выделить всё

Селектор {
   свойство1: значение;
   свойство2: значение;
}

В качестве Селектора может быть имя, идентификатор, класс тега..
А вот свойства нужно знать или хотя бы понимать что они делают..
Вот например свойство color устанавливает цвет шрифта определенного селектора, то есть если я напишу

Код: Выделить всё

<html>
<head>
<style>
body { /* Для тега body */
   color: red; /* красный цвет шрифта */
}
</style>
</head>
<body>
text.
<div>text in div.</div>
<div id="text">text with id.</div>
<div class="text">text with class.</div>
</body>
</html>

то весь текст, который находится в теге body будет красным.

А теперь в теге <style> допишите:

Код: Выделить всё

div { /* для тега div */
   color: blue; /* голубой цвет шрифта */
}

Посмотрите результат..
Голубой цвет будут иметь все тексты которые заключены в тег div.
Теперь ещё допишите:

Код: Выделить всё

div#text { /* для тега div у которого id = text */
   color: pink; /* розовый цвет шрифта */
}

Посмотрите результат..
Это стиль только для тега div, который имеет id = text
Теперь ещё допишите:

Код: Выделить всё

div.text { /* для тега div у которого class = text */
   color: green; /* зеленый цвет шрифта */
}

Посмотрите что получилось..
Я думаю вы поняли как работает css, чем дальше тем ещё интересней!!
Поэкспериментируйте с css'ом и самим кодом документа..

Теперь напишем стиль для нашей странички:

Код: Выделить всё

body { /* <body> */
   color: #333333; /* цвет в шестнадцатеричном представлении - #333333 */
   font-family: sans-serif; /* используемый шрифт - sans-serif */
   font-size: 11px; /* размер шрифта - 11 пикселей */
}
div#container { /* <div id="container"> */
   width: 700px; /* ширина этого дива - 700 пикселей */
   margin: 20px auto; /* отступ сверху и снизу: 20px, по бокам - auto - будет автоматически рассчитан браузером */
}
div#header { /* <div id="header"> */
   padding: 20px; /* 20 пикселей поле со всех четырех сторон вокруг содержимого элемента */
   background-color: #f5f5f5; /* цвет фона этого дива - #f5f5f5 */
}
div#content { /* <div id="content"> */
   margin: 10px 0; /* отступ сверху и снизу - 10 пикселей, с права и с лева - 0 */
}
div#center { /* <div id="center"> */
   margin: 0 180px;
   padding: 20px;
}
div.column { /* <div class="column"> */
   width: 180px;
   padding: 20px 0;
   text-indent: 20px; /* отступ для первой строки - 20 пикселей */
   background-color: #f5f5f5;
}
div#left { /* <div id="left"> */
   float: left; /* выравнивание этого дива по левому краю */
}
div#right { /* <div id="right"> */
   float: right; /* выравнивание этого дива по правому краю */
}
div#footer { /* <div id="footer"> */
   padding: 7px; /* полу 7 пикселей со всех сторон */
   background-color: #f5f5f5;
}

Вот что получается в сумме:

Файл style.css:

Код: Выделить всё

body { /* <body> */
   color: #333333; /* цвет в шестнадцатеричном представлении - #333333 */
   font-family: sans-serif; /* используемый шрифт - sans-serif */
   font-size: 11px; /* размер шрифта - 11 пикселей */
}
div#container { /* <div id="container"> */
   width: 700px; /* ширина этого дива - 700 пикселей */
   margin: 20px auto; /* отступ сверху и снизу: 20px, по бокам - auto - будет автоматически рассчитан браузером */
}
div#header { /* <div id="header"> */
   padding: 20px; /* 20 пикселей поле со всех четырех сторон вокруг содержимого элемента */
   background-color: #f5f5f5; /* цвет фона этого дива - #f5f5f5 */
}
div#content { /* <div id="content"> */
   margin: 10px 0; /* отступ сверху и снизу - 10 пикселей, с права и с лева - 0 */
}
div#center { /* <div id="center"> */
   margin: 0 180px;
   padding: 20px;
}
div.column { /* <div class="column"> */
   width: 180px;
   padding: 20px 0;
   text-indent: 20px; /* отступ для первой строки - 20 пикселей */
   background-color: #f5f5f5;
}
div#left { /* <div id="left"> */
   float: left; /* выравнивание этого дива по левому краю */
}
div#right { /* <div id="right"> */
   float: right; /* выравнивание этого дива по правому краю */
}
div#footer { /* <div id="footer"> */
   padding: 7px; /* полу 7 пикселей со всех сторон */
   background-color: #f5f5f5;
}

Файл site.html:

Код: Выделить всё

<html>
<head>
<title>Web Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
   <div id="container">
      <div id="header">
         header
      </div>
      <div id="menu">
         Menu
      </div>
      <div id="content">
         <div class="column" id="left">
            column left
         </div>
         <div class="column" id="right">
            column right
         </div>
         <div id="center">
            center content
         </div>
      </div>
      <div id="footer">
         footer
      </div>
   </div>
</body>
</html>

Готово!!

Ссылки:

htmlbook.ru
wikipedia.org
google.com

Это все самый простой скелет для сайта.. Здесь мы использовали html и css.
Что не понятно - задаем вопросы..

ЗЫ: Впереди у нас мое любимое и самое интересное - программирование, но пред этим нужно заполнить хоть как-то сайт, может куда регистрацию, авторизацию,
новости... нужно сделать, предлагайте, воплотим все ваши предложения))
ЗЫ ЗЫ:

topic · Сообщение **topic** » Вт июл 01, 2008 13:48

Класс!! Я в восторге.. Так просто и понятно. Не сразу, но немного "повтыкав", разобрался..
У меня скелет тоже готов, но..
меня смущают некоторые вещи:

Самое первое, если у вас до сих пор Internet Explorer - выкиньте его и поставьте Firefox 3

не согласен. По статистике большинство пользователей используют именно IE. Мне и самому вполне нравится
IE7 с вкладками. Вот если бы еще отбить ему некоторые замашки, то вполне нормально было бы..
Но суть не в том. Если отбрасывать какой-то вид браузеров, то этим мы лишаемся части посетителей, а это плохо.

Насчет скелета.. В продолжение разглагольствования о браузерах.. У меня скелет в IE отображается с левого края.
А в опере размещен по центру. Почему? Как это исправить?

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

Для начала, это конечно мое сугубое имхо, хорошо определиться с темой сайта. О чем он будет. И уже в зависимости от этого наполнять контент и думать нужна ли регистрация.
Мое предложение - сайт с анекдотами, прикольными историями, картинками и т.д.
Регистрация нужна. Регистрированные пользователи смогут добавлять туда свои анекдоты,а гости просто читать.
Да и контент искать не сложно. В сети полно текстовых файлов с анеками, разделенных причем по категориям, которые очень просто запихать в базу, как начальный набор для сайта. (Про базу, я так понимаю, я забежал вперед, но мы же будем делать полноценный интерактивный сайт? Поддерживать статические странички - дело очень хлопотное. )
Как мое предложение? Я пока только могу давать идею, т.к. совершенно не представляю что делать дальше.

И еще.. Мне не понятно, почему мы делаем ширину контейнера 700 пикселей? Этому есть причина?

Vad0 · Сообщение **Vad0** » Вт июл 01, 2008 16:36

У меня скелет тоже готов, но..
меня смущают некоторые вещи:

Самое первое, если у вас до сих пор Internet Explorer - выкиньте его и поставьте Firefox 3

не согласен. По статистике большинство пользователей используют именно IE.

Мне и самому вполне нравится
IE7 с вкладками. Вот если бы еще отбить ему некоторые замашки, то вполне нормально было бы..
Но суть не в том. Если отбрасывать какой-то вид браузеров, то этим мы лишаемся части посетителей, а это плохо.

Да, я согласен что мы отбрасываем некоторую часть юзов, но в начале этой заметки я написал что это будет простой шаблончик, а не настоящий кросбраузерный сайт!!

Насчет скелета.. В продолжение разглагольствования о браузерах.. У меня скелет в IE отображается с левого края.
А в опере размещен по центру. Почему? Как это исправить?

В IE будут разные отличия, поэтому я выбрал самый стабильноработающий и популярный браузер - firefox.
Но если всеже вы хотите увидеть этот шаблончик по центру в осле, то в css для селектора body нужно дописать

Код: Выделить всё

margin:0;
padding:0;

А в html'е нужно в самом начале написать

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

подробнее здесь

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

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

Регистрация нужна. Регистрированные пользователи смогут добавлять туда свои анекдоты,а гости просто читать.
Да и контент искать не сложно. В сети полно текстовых файлов с анеками, разделенных причем по категориям, которые очень просто запихать в базу, как начальный набор для сайта. (Про базу, я так понимаю, я забежал вперед, но мы же будем делать полноценный интерактивный сайт? Поддерживать статические странички - дело очень хлопотное. )
Как мое предложение? Я пока только могу давать идею, т.к. совершенно не представляю что делать дальше.

На счет полноценного сайта не думаю, а вот статических страниц не будет!!
Поддерживаю твое предложение, можно сделать с анекдотами, грузить из из какого-нить сайта или из файлов, парсить и потом запихать в mysql базу в определенную категорию..
Регистрация, авторизация, админка - добавим
Что еще нужно для нашего простенького сайта ??? :Bravo:

И еще.. Мне не понятно, почему мы делаем ширину контейнера 700 пикселей? Этому есть причина?

Ширину базового дива должны выбирать Вы сами в зависимости от структуры сайта, навигации, хеадера и т.д.
Мне показалось что 700px для начала пойдет, а потом будем смотреть дальше, и если что поменяем..

topic · Сообщение **topic** » Пн авг 04, 2008 15:57

Хочу выразить благодарность Vad0
Благодаря его труду я все-таки сотворил свой первый проект
www.anekdot.zx6.ru
Он конечно еще будет развиваться, но общий смысл уже понятен.
Прошу оценить. Критика принимается

Vad0 · Сообщение **Vad0** » Пн авг 04, 2008 16:55

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

topic · Сообщение **topic** » Пн авг 04, 2008 17:22

Я думаю что толк все-таки есть.. Взять хотя бы меня.. Когда-то кто-то разродится еще..
НЕ всем же рисовать сайты.. у кого таланта нет, кому-то это просто не интересно..
Жаль, что не продолжаешь.. Мне интересно теперь как автоматом собирать контент с других сайтов.. Даже не представляю как это можно сделать..
Вот бы ты подсобил как-то..

topic · Сообщение **topic** » Пн авг 04, 2008 17:26

З.Ы. И еще мне очень интересны были бы рекомендации, только практические и веские, как можно заманить пользователей к себе на сайт..
А то все, что читаю, это какое-то рассусоливание и никакой конкретики..
По опыту знаю, и убежден, что на самом деле все не сложно и описывается в двух-трех словах..
Подсказал бы, а?

Vad0 · Сообщение **Vad0** » Ср авг 06, 2008 17:59

Скрипт собирающий контент с сайтов - граббер или парсер, я называю его просто бот
Попробуй этот
Я его не смотрел, если не понравится поищи в гугле.
Можеш сам написать, для этого тебе потребуются регулярные выражения.
Я бы тебе дал парсер с сайта где я работаю, но извини, я не могу показывать код..
А на счет пользователей - почитай статьи о раскрутке, я в этом деле :fool:

)

TwiX · Сообщение **TwiX** » Чт сен 18, 2008 15:48

Давай рассмотрим написание сценариев на javaScript!
В пхп я ориентируюсь а вот в джаве не очень, и я был бы очень признателен еслиб ты просветил меня(я думаю и не только меня

) в этом плане!
В основном интересует его применение для создания динамических страниц.

Vad0 · Сообщение **Vad0** » Вс ноя 16, 2008 6:44

Используй JavaScript-фреймовики.
Лучший из существующих - jQuery
jQuery Wikipedia

Форум Великой Лепетихи

Сайт своими руками

Интересна ли вам данная информация ?

Сайт своими руками

Re: Сайт своими руками

Re: Сайт своими руками

Re: Сайт своими руками

Re: Сайт своими руками

Re: Сайт своими руками

Re: Сайт своими руками

Re: Сайт своими руками

Re: Сайт своими руками

Re: Сайт своими руками

Re: Сайт своими руками

Кто сейчас на конференции