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


Пользователь месяца
Андрей WPMasterKZ Андрей WPMasterKZ 1-й за Ноябрь
Очков активности: 888 1 тема, 71 сообщение, 8 баллов репутации
Сайт: wpmaster.kz
ТОП самых активных за этот месяц
  • Фотография OlgaGetman
    #1

    OlgaGetman
    Очков активности: 666 5 тем, 96 сообщений, 4 балла репутации

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

    Mandarin
    Очков активности: 552 3 темы, 83 сообщения, 4 балла репутации

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

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

  • Фотография Андрей WPMasterKZ
    #4

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 117 Вне конкурса за определение пользователя месяца

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

    BLIK
    Очков активности: 102 0 тем, 17 сообщений, 4 балла репутации

  • Фотография Rodiola
    #6

    Rodiola
    Очков активности: 45 1 тема, 12 сообщений, 2 балла репутации

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

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

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

    thisismyname
    Очков активности: 27 4 темы, 6 сообщений, 1 балл репутации

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

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

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

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

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 29.11.2018
  • Яндекс выдача: 11.12.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

#11 Игорян

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

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

Причем блокнот на винде XP постоянно косячит с кодировками.


Ни замечал :rolleyes: сам я уже давно ни делаю так сайты, но начинал с простого блокнота, поэтому и советую всем новичкам :rolleyes:

Ну а если вдруг какие-то вопросы возникнут, задавайте их тут, по мере возможности я буду отвечать :lol:

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


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

#12 Gagarin

Gagarin
  • Пользователь
  • 325 сообщений
  • Репутация: 1

Отправлено 19 March 2011 - 20:10

Игорян, советую немножко подкорректировать статью ты так подробно описал то, как нужно открывать блокнот, а о тегах, таблицах и о самом языке HTML ни слова.
  • 0

#13 Игорян

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

Отправлено 19 March 2011 - 20:54

Если время будет, подредактирую. Когда работы будут проверяться? Просто времени пока сейчас не нахожу свободного.

Всем спасибо, бумеру отдельное спасибо :rolleyes:
  • 0

#14 matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 19 March 2011 - 21:32

Когда работы будут проверяться?

А что за конкурс? :rolleyes:
Может и я б чего написал :rolleyes:
  • 0


#15 bestolloch

bestolloch
  • Неактивные
  • 224 сообщений
  • Репутация: 1

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

А что за конкурс? :rolleyes:
Может и я б чего написал :rolleyes:

http://www.masterweb...ja-mesjaca/&hl=
admin, может прикрепить где-нибудь ссылочку)))
  • 0

#16 Triniti_Wel

Triniti_Wel
  • Модератор
  • 473 сообщений
  • Репутация: 148

Отправлено 20 March 2011 - 23:07

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

Если есть другие варианты, это тоже хорошо, но как сказал ТС -это все - для книги, а не для первого урока.
  • 0

#17 Skorpion555

Skorpion555
  • Неактивные
  • 39 сообщений
  • Репутация: 3

Отправлено 20 March 2011 - 23:18

Что сразу бросилось в глаза - первое достойное оформление, за это огромный респект!

А теперь разбор полетов:

1.

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

- есть в "великом и могучем" синонимы еще)

2.

кто ни хочет

- не хочет

3.

рассматривать ни будем

- не будем

4.

это ни назовеш

- это уже диагноз "категорическое неприязнь к букве Е"

5. т.е. вот так быть не может <html><html> нужен обязательно закрывающий тег </html> Идем дальше. - пропущена запятая и точка

6. Тема "Как создать сайт" неподъемная, про это пишут целые книги, так что автору + за попытку поместить это все в одну статью.

7. Вся информация для меня не новая, для новичка - бесполезная, работать по принципу "напиши как у меня" невозможно, код не был пояснен. Грамата хромает, стиль написания не отработан. Но вцелом статья хорошая, мне нравится.
  • 0

#18 surfer

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

Отправлено 21 March 2011 - 08:27

теперь технические замечания:
действительно тема объемная, и думаю стоило бы назвать: "моя первая страничка" :)
и даже для первой странички необходимо цикл статей делать, опишу пошагово:
1. Создание странички, я бы предложил выбор читателю:

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

ибо как показывает практика новички начинают очень жестко привязываться к последущим проектам дословно, я бы написал так:

создаем в удобном для вас месте папку, назовем ее, например: SITE

2. Я бы предложил сразу создать html документ, т.к. при создании своих страниче новички буду плодить мусор и еще долго именно так будут их создавать. Еще раз озвучу, что люди тяжело и с неохотой переучиваются, давайте формировать сразу правильные навыки.
3. Я бы сразу в готовый шаблон DOCTYPE добавил
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Ваз тюнинг - (а здесь лучше написать Моя первая страничка)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

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

</body>
</html>

4. Вот здесь я бы сразу отделил котлет от мух, т.е. отделил разметку от оформления, как минимум, помним мою концепцию, что надо формировать правильные навыки сразу, ибо люди переучиваются с большим трудом, зачем плодить горе-мастеров, коих и так хватает.
<table>
<tr>
<td colspan="2">Шапочка</td>
</tr>
<tr>
<td colspan="2">навигация</td>
</tr>
<tr>
<td>контент</td>
<td>СайтБар</td>
</tr>
<tr>
<td colspan="2">Подвал (футер)</td>
</tr>
</table>

все остально можно убрать в css, добавив в таблицу несколько классов и идентифекаторов, кстати твой код можно тоже усовершенствовать, много лишней дублирущей информации, например width="500", достаточно оставить в теге table, явно код в редакторе делал, ай-яй-яй ;)
5. ну и последнее спорный вопрос не буду настаивать по поводу верстки, таблицы или слои.

имхо, я все сказал ))
  • 0

#19 Игорян

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

Отправлено 21 March 2011 - 12:41

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


Послушайте Triniti_Wel т.к. этот человек "ничего не понимает в сайтостроении"

Если есть другие варианты, это тоже хорошо, но как сказал ТС -это все - для книги, а не для первого урока.


Угу :)

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

Тема "Как создать сайт" неподъемная


Согласен на все сто!

5. ну и последнее спорный вопрос не буду настаивать по поводу верстки, таблицы или слои.


Можно я отвечу? ;) Безусловно верстка дивами лучше ;) . Но думаю если человек освоит верстку таблицами, то ни чего сложно в верстке дивами для него не будет. :)
  • 0

#20 surfer

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

Отправлено 21 March 2011 - 12:50

Можно я отвечу? ;) Безусловно верстка дивами лучше :) . Но думаю если человек освоит верстку таблицами, то ни чего сложно в верстке дивами для него не будет. B)

я так не считаю
  • 0

robot

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


Похожие темы

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

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