X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

5 страниц V   1 2 3 4 5 >
Открыть тему
Тема закрыта
> Как создать сайт?, Статья на конкурс
Игорян_mw
Игорян_mw
Topic Starter сообщение 19.3.2011, 15:30; Ответить: Игорян_mw
Сообщение #1


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

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

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

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

[img]http://gyazo.com/4140ea5a9b2825f36d43b8db3b3ce6fa.png[/img]

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

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

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

</body>
</html>


[img]http://gyazo.com/0ddbc5a58d655173f89285268b6ffd00.png[/img]

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

[img]http://gyazo.com/67f5131f84a9104485888005b4e26f6a.png[/img]

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

[img]http://gyazo.com/bedcf48487c8129a2b956ee4fb7852a3.png[/img]

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

[img]http://gyazo.com/469cf647d389dc49edceec49069e8442.png[/img]

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

[img]http://gyazo.com/47b38777616fba31eab2a4acee29b015.png[/img]

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

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

[img]http://gyazo.com/1e2b2f780da40a9e1fcdb10faff1ea04.png[/img]

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

<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> это и будет название вашей страницы, в нашем случае это

[img]http://gyazo.com/c6762c90990c8d5ff49cab8180692880.png[/img]

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

[img]http://gyazo.com/a1747d521febee41ef9ff3a32cfb7b30.png[/img]

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

[img]http://gyazo.com/5ce12c56f2c45ddcf4a1c1bca5bf6274.png[/img]

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

[img]http://gyazo.com/57e2ca66efe66375919f7d7c09c883e5.png[/img]

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


[img]http://gyazo.com/96285bab7be9296c72f89c6c08183a81.png[/img]

Пробуем реализовать :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>

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

[img]http://gyazo.com/25424b695db815adede2a7bba6c4bb4b.png[/img]

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

<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>


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

[img]http://gyazo.com/300d462d36d62856e5679e31dfdb1463.png[/img]

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

<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

[img]http://gyazo.com/6d386c60c4722599ffedad5e719375d0.png[/img]

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

[img]http://gyazo.com/59392107e9f80992d337099a6ca88b07.png[/img]

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

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

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

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

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

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

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

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

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

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


Поблагодарили: (1)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Гость_0_* Гость_0_*
сообщение 19.3.2011, 15:39; Ответить: Гость_0_*
Сообщение #2


Игорян, я сомневаюсь, что новичку понятен следующий код:
<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:


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bumer_mw
bumer_mw
сообщение 19.3.2011, 15:46; Ответить: bumer_mw
Сообщение #3


через дримвивер это все сделать гораздо легче получится
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alex19rus
alex19rus
сообщение 19.3.2011, 15:57; Ответить: alex19rus
Сообщение #4


Игорян, ты тут показывал примеры и я увидел, что ты через оперу юзаешь, в опере есть классная функция - ПКМ -> Исходный код.
Там можно редактировать код как в блокноте, а еще там JS отличается от простого html кода!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Игорян_mw
Игорян_mw
Topic Starter сообщение 19.3.2011, 16:04; Ответить: Игорян_mw
Сообщение #5


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

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


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

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


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

[img]http://gyazo.com/89950d91f30cdbfebac46fbaf9bddd75.png[/img]

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

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


Это не важно как я изложил материал и суть не меняется :rolleyes:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bumer_mw
bumer_mw
сообщение 19.3.2011, 16:33; Ответить: bumer_mw
Сообщение #6


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

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

С моего урока! Это не шутка, просто начните делать
Вот это меня убило))) Учитель создайте еще один урок, ждем релиза .
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Игорян_mw
Игорян_mw
Topic Starter сообщение 19.3.2011, 17:35; Ответить: Игорян_mw
Сообщение #7


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

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

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

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


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

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

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

ПППС. Ни относитесь ко всему так серьезно, это всего лишь моя точка зрения :lol:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sc2r2bey
sc2r2bey
сообщение 19.3.2011, 18:47; Ответить: sc2r2bey
Сообщение #8


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


--------------------
Заметки о разработке и не только
программирую web и для we


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mosd4
mosd4
сообщение 19.3.2011, 19:05; Ответить: mosd4
Сообщение #9


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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alex19rus
alex19rus
сообщение 19.3.2011, 19:24; Ответить: alex19rus
Сообщение #10


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


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


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


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


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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
5 страниц V   1 2 3 4 5 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Сайт врача стоматолога/ортодонта.
4 alnsam 1506 Вчера, 15:02
автор: alnsam
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
7 uahomka 1567 17.3.2024, 14:54
автор: uahomka
Открытая тема (нет новых ответов) Сайт не индексируется в Google без добавления ссылок в адурилку
1 Nekit 453 17.3.2024, 3:25
автор: malamut
Открытая тема (нет новых ответов) Арбитражники, как ведете учет расходов и доходов?
10 Boymaster 1468 17.3.2024, 3:22
автор: malamut
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКакой сайт пробовать создавать под небольшое ГЕО?
6 kapusta1 1194 15.3.2024, 13:06
автор: OS_ZP_UA


 



RSS Текстовая версия Сейчас: 19.3.2024, 8:17
Дизайн