Перейти к содержимому


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 72 0 тем, 8 сообщений, 6 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 69 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 30 Вне конкурса за определение пользователя месяца

  • Фотография Алексей111
    #6

    Алексей111
    Очков активности: 27 5 тем, 3 сообщения, 1 балл репутации

  • Фотография TimurR
    #7

    TimurR
    Очков активности: 22.5 Вне конкурса за определение пользователя месяца

  • Фотография torix
    #8

    torix
    Очков активности: 22.5 2 темы, 9 сообщений, 1 балл репутации

  • Фотография Developer
    #9

    Developer
    Очков активности: 21 1 тема, 11 сообщений, 1 балл репутации

  • Фотография fedornabilkin
    #10

    fedornabilkin (zaka4ano.ru)
    Очков активности: 18 0 тем, 4 сообщения, 3 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 20.09.2018
Топ 5 участников по репутации


Как создать сайт?

#1 Игорян

Игорян
  • Неактивные
  • 296 сообщений
  • Репутация: 10
0

Отправлено 19 March 2011 - 14:30

Как создать сайт? Как правило этим вопросом озадачиваются новички в области сайтостроения, ну а раз озадачиваются новички, то и всю статью я посвящаю в помощь новичкам.

На самом деле вопрос “как создать сайт” не конкретный, т.е. для того чтобы создать сайт не обязательно вообще уметь их создавать, можно просто найти человека который за определенную сумму денег сделает вам сайт, а от вас потребуется только тема сайта, идея и контент. Такой вариант подходит только тем, кто ни хочет вникать в тему сайтостроение, и это ни есть плохо. Конечно, этот вариант мы рассматривать ни будем, а попробуем овладеть базовыми знаниями сайтостроения, после чего вы сами сделаете для себя выводы, нужно вам это или нет.

И так, давайте выберем тему для нашего сайта и создадим простую интернет страничку. Я выбрал тему “Ваз тюнинг”

Создаем папочку для нашего сайта на диске D и называем ее SITE, заходим в созданную папочку, щелкаем правой кнопкой мыши и создаем текстовый документ.

Изображение

Открываем текстовый документ и копируем html код приведенный ниже

<html>
<head>
<title>Ваз тюнинг</title>
</head>
<body>

Ура! Я создал свой первый сайт!

</body>
</html>


Изображение

Теперь выбираем в меню Блокнота пункт Файл - > Сохранить как ...

Изображение

Вводим имя файла index.html кодировка ANSI и нажимаем сохранить.

Изображение

В нашей папочке, должен появиться только что созданный html файл, проверяем

Изображение

Появился? Запускаем! B) В вашем браузере вы должны увидеть следующее

Изображение

Все сложно? Думаю что нет :rolleyes: , но и сайтом пока это ни назовеш.

Возвращаемся в нашу папочку site, выбираем файл index.html, и открываем его с помощью блокнота

Изображение

А теперь пришло время разберать тот код, который мы можно сказать “тупо” скопировали и вставили.

<html>
<head>
<title>Ваз тюнинг</title>
</head>
<body>

Ура! Я создал свой первый сайт!

</body>
</html>


Это и есть тот самый страшный и непонятный html код :rolleyes: Давайте по порядку, первый непонятный тег <html> с этого тега начинается любая html страница, и если внимательно посмотреть, то она и заканчивается тем же тегом, только со слешем </html> такие тэги называют парными, т.е. вот так быть не может <html><html> нужен обязательно закрывающий тег </html> Идем дальше.

Тег <head> также как и <html> является парным тэгом, в подробности данного тега вдаваться не будем, просто запомните, что данный тег всегда открывается сразу же после тега <html> и закрывается перед тегом <body>. Между тегами <head> и </head> вставляются теги <title></title> и все что вы напишите между тегами <title>Ваз тюнинг</title> это и будет название вашей страницы, в нашем случае это

Изображение

Между тегами <body> Ура! Я создал свой первый сайт! </body> пишется непосредственно содержимое интернет страницы (иначе говоря контент страницы). Все что вы напишите - будет на вашей странице. Т.е. в нашем случае

Изображение

Теперь давайте добавим в наш код НЕ парный тег, например тег <br/>

Изображение

Сохраняем, и смотрим что у нас получилось

Изображение

Т.е. тег <br/>, делает перенос на новую строчку и ему НЕ нужен закрывающий тег </br> Теперь думаю вы разобрались в том, что такое парные и не парные теги. Давайти для примера разобьем сайт на блоки (ячейки)


Изображение

Пробуем реализовать :rolleyes: , для этого удаляем все что находиться между тегами <body> Ура! <br/> Я создал свой первый сайт! </body> а на это место добавим код таблицы, вот так

<html>
<head>
<title>Ваз тюнинг</title>
</head>
<body>

<table width="500" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" width="500" height="97">Шапочка</td>
</tr>
<tr>
<td colspan="2" width="500" height="27">навигация</td>
</tr>
<tr>
<td width="380" height="341">контент</td>
<td width="120" height="341">СайтБар</td>
</tr>
<tr>
<td colspan="2" width="500" height="35">Подвал (футер)</td>
</tr>
</table>


</body>
</html>

Сохраняем и проверяем. Вот что должно получиться

Изображение

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

<html>
<head>
<title>Ваз тюнинг</title>
</head>
<body>

<table width="500" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" width="500" height="97" style="background:#C4FC62;">Шапочка</td>
</tr>
<tr>
<td colspan="2" width="500" height="27" style="background:#000000;">навигация</td>
</tr>
<tr>
<td width="380" height="341">контент</td>
<td width="120" height="341" style="background:#FFC600;">СайтБар</td>
</tr>
<tr>
<td colspan="2" width="500" height="35" style="background:#000000;">Подвал (футер)</td>
</tr>
</table>

</body>
</html>


Сохраняем, обновляем страницу и у нас должно получиться вот так

Изображение

Почему у нас нету текста “навигация и подвал(футер)” ?! Они есть! Просто цвет текста совпадает с цветом фона. Давайте исправим.

<table width="500" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" width="500" height="97" style="background:#C4FC62;">Шапочка</td>
</tr>
<tr>
<td colspan="2" width="500" height="27" style="background:#000000;"><p style="color:#ffffff;">навигация</p></td>
</tr>
<tr>
<td width="380" height="341">контент</td>
<td width="120" height="341" style="background:#FFC600;">СайтБар</td>
</tr>
<tr>
<td colspan="2" width="500" height="35" style="background:#000000;"><p style="color:#ffffff;">Подвал (футер)</p></td>
</tr>
</table>


Что мы сделали? Все просто, мы грубо говоря засунули текст “навигация и подвал(футер)” в парный тег <p> и придали стиль <p style=""> и в качестве стиля задали цвет color:#ffffff; Цвет можно задавать абсолютно любой, и один из способов подобрать цвет, это просто набрать в яндексе #ffffff

Изображение

Осталось выронить наш сайт по центру, для этого воспользуемся атрибутом align

Изображение

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

Цель урока, это дать базовые знания, для того чтобы новичок, более менее начал понимать как делаются сайты, и познакомить с основный языком сайтостроения html а дальше дело наживное…

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

C чего лучше всего начать изучать сайтостроение?

С моего урока! :lol: Это не шутка, просто начните делать! Скачайте в Интернете книги по html и css и потихоньку изучайте суть html и взаимодействие html и css.
Еще один очень хороший совет, как только вы начали изучать например язык html (не важно), перепечатывайте код вручную, не нужно просто “тупо” копировать, так вы намного быстрей начнете запоминать теги…

С чего я не ни рекомендую начинать изучать сайтостроение?

Ни в коем случае не нужно начинать изучение таких языков как php java и др. языки веб программирование пока ни освоите базовые языки html и css

Ни в коем случае не нужно пытаться создать сайт, например на движке joomla не имея базовых знаний html т.к. из этого ничего хорошего не получиться, запомните это!

А как быть с дизайном? Как нарисовать шапку для сайта или красивую менюшку? Это все делается в программе фотошоп, и это еще один урок по теме “дизайн сайт” данную тему мы затрагивать не будем. На этом мы прощаемся, спасибо что дочитали до конца!

Автор: Игорян


 

 

  • 0

#2 admin

admin
  • Пользователь PRO
  • 5275 сообщений
  • Репутация: 55

Отправлено 19 March 2011 - 14:39

Игорян, я сомневаюсь, что новичку понятен следующий код:
<table width="500" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" width="500" height="97">Шапочка</td>
</tr>
<tr>
<td colspan="2" width="500" height="27">навигация</td>
</tr>
<tr>
<td width="380" height="341">контент</td>
<td width="120" height="341">СайтБар</td>
</tr>
<tr>
<td colspan="2" width="500" height="35">Подвал (футер)</td>
</tr>
</table>


Да и статью вы взяли о том, как сделать сайт, а не как создать примитивную html страничку :rolleyes:
  • 0

#3 bumer

bumer
  • Пользователь
  • 502 сообщений
  • Репутация: 0

Отправлено 19 March 2011 - 14:46

через дримвивер это все сделать гораздо легче получится
  • 0

#4 alex19rus

alex19rus
  • Неактивные
  • 280 сообщений
  • Репутация: 5

Отправлено 19 March 2011 - 14:57

Игорян, ты тут показывал примеры и я увидел, что ты через оперу юзаешь, в опере есть классная функция - ПКМ -> Исходный код.
Там можно редактировать код как в блокноте, а еще там JS отличается от простого html кода!
  • 0

#5 Игорян

Игорян
    Topic Starter
  • Неактивные
  • 296 сообщений
  • Репутация: 10

Отправлено 19 March 2011 - 15:04

bumer я в шоке от твоей не грамотности, не внимательности и остраумия :rolleyes: вопрос как создать сайт? задают новички, а те кто верстают в дримвивере, это уже не новички!

Я сомневаюсь, что новичку понятен следующий код....


admin это дело наживное.

Да и статью вы взяли о том, как сделать сайт, а не как создать примитивную html страничку


По-другому ни как, если учить создавать сайты с нуля то это реально целая книга от того как нарисовать дизайн, верстка, наполнение уууу это вы только представьте сколько это материала? Я дал пинок под зад, и показал с чего начать делать сат тем людям которые вбивают в поиск запрос :lol:

Изображение

Все, статью я шлифанул. Пинаем :rolleyes:

Игорян, ты тут показывал примеры и я увидел, что ты через оперу юзаешь, в опере есть классная функция - ПКМ -> Исходный код.
Там можно редактировать код как в блокноте, а еще там JS отличается от простого html кода!


Это не важно как я изложил материал и суть не меняется :rolleyes:
  • 0

#6 bumer

bumer
  • Пользователь
  • 502 сообщений
  • Репутация: 0

Отправлено 19 March 2011 - 15:33

Игорян я тоже в шоке от тебя)) что ты хочешь себя показать супер вебмастером котоый знает все, О великий ты наш).
Незная тогда еще много всяких правил в css, один мой знакомый посоветовал попробовать дримвивер. Все что ты написал в дриме это можно сделать за 5 шагов.

C чего лучше всего начать изучать сайтостроение?

С моего урока! Это не шутка, просто начните делать
Вот это меня убило))) Учитель создайте еще один урок, ждем релиза .
  • 0

#7 Игорян

Игорян
    Topic Starter
  • Неактивные
  • 296 сообщений
  • Репутация: 10

Отправлено 19 March 2011 - 16:35

:rolleyes: ухаха :rolleyes: :rolleyes: Для тебя поясню, почему именно так я считаю что будет правильно начать свое обучение.

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

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

Вот это меня убило))) Учитель создайте еще один урок, ждем релиза .


Убивайся дальше B)

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

ППС. А еще проще, купить обучающий видео курс, и научиться делать сайты, даже можно не покупать на ютубе полно материала :D

ПППС. Ни относитесь ко всему так серьезно, это всего лишь моя точка зрения :lol:
  • 0

#8 surfer

surfer
  • Заблокированные
  • 1956 сообщений
  • Репутация: 71

Отправлено 19 March 2011 - 17:47

На мой взгляд есть технические замечание, а в целом хорошо, молодец:
1. пошагово
2. подробно
3. с иллюстрациями
  • 0

#9 mosd4

mosd4
  • Неактивные
  • 15 сообщений
  • Репутация: 0

Отправлено 19 March 2011 - 18:05

dreamveaver - хорошая прога
  • 0

#10 alex19rus

alex19rus
  • Неактивные
  • 280 сообщений
  • Репутация: 5

Отправлено 19 March 2011 - 18:24

dreamveaver - хорошая прога


mosd4, сказал как отрезал, нечего добавить :rolleyes:


Игорян, ты тут показывал примеры и я увидел, что ты через оперу юзаешь, в опере есть классная функция - ПКМ -> Исходный код.
Там можно редактировать код как в блокноте, а еще там JS отличается от простого html кода!


Это не важно как я изложил материал и суть не меняется rolleyes.gif


Про суть я ничего не говорю, просто можно было написать, что через оперу будет проще и удобней. Причем блокнот на винде XP постоянно косячит с кодировками.
  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru