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


Партнерская программа Kredov

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

#1 Игорян

Игорян
  • Пользователь
  • 296 сообщений
  • Репутация: 10
0

Отправлено 19 Март 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
  • 5 272 сообщений
  • Репутация: 54

Отправлено 19 Март 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 Март 2011 - 14:46

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

#4 alex19rus

alex19rus
  • Пользователь
  • 270 сообщений
  • Репутация: 5

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

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

#5 Игорян

Игорян
    Topic Starter
  • Пользователь
  • 296 сообщений
  • Репутация: 10

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

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

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


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

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


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

Изображение

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

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


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

#6 bumer

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

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

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

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

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

#7 Игорян

Игорян
    Topic Starter
  • Пользователь
  • 296 сообщений
  • Репутация: 10

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

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

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

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

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


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

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

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

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

#8 surfer

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

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

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

#9 mosd4

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

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

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

#10 alex19rus

alex19rus
  • Пользователь
  • 270 сообщений
  • Репутация: 5

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

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


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


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


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


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

robot

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


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