Первые шаги создания сайта (Первый учебный год)

KULISAM · 05 декабря, 2005, 23:43:36

Не нашёл темы для пошагового освоения, поэтому, пусть все мелкие вопросы будут здесь.

Продолжаю познавать - http://html.manual.ru/ давно скачал учебник, автор: Vladimir Gorodulin, и, читая -

Вот научился методом "научного тыка" (переименовал ~.html в ~.txt , или при сохранении) :
1. В IE - File/Edit with NotePad и в текстовом редакторе сохраняем File/Save As... ~.html or ~.txt
Теперь понятна моя пробла, надо было бы просто переименовать, - изменил текст, сохранил текст, закрыл IE и открыл заново - изменения видны.
Вопрос:
Можно ли видеть СРАЗУ внесённые изменения? Неужели приходится ВСЁ закрывать и открывать заново?

2. Сохранил один пример в ~.htlm , а он оказался без папки, гольный файл, естесно, без фотки. Скопировал эту папку отдельно и вставил - работает.
Вопрос:
Папка с именем +__files с начинкой фоток и прочих файлов КАК получается/создаётся?
Нашёл в тексте (аж глаза переломал) ***_files/picture06.jpg и его расположение. Значит, кто-то это picture06.jpg хватает из этой папки и вставляет в поле сайта?

Обозначение ЦВЕТА:
1. bgColor=#9900cc MARGINHEIGHT (насыщенный фиолетовый) Из старенького.
2. BGCOLOR="#200020" (поменял 202020 - тёмно-серый на 200020 - фиолетово-чёрный. Пробую %-))...) Из новенького.
Вопрос:
Чем отличаются ЭТИ написания? Как видим, отличаются в "синтаксисе".

Наконец-то я нашёл таблицы цветов (6633ff - например) и текст автора: "Для удобства я расположил "безопасные" цвета в три таблицы по 216 цветов, отсортированные по разным цветовым компонентам."
Вопрос: "безопасные" цвета понятно, а "ОПАСНЫЕ" подразумеваются под теми, которые могут не читаться, или искажаться на слабеньких видеокартах/мониторах?

И последнее:
Отступ слева в тексте какой-то ступенчатый!?! На разных расстояниях от левого края.
Подвигал немного несколько строк, сохранил с другим именем~.htlm
Открываю - всё открылось без изменений, один-в-один, с фоткой. Хотя ИМЯ уже другое ****_red.html
А сайт другой (с таблицами цветов) страницы набран с небольшими пробелами, (Word Wrap включён/выключен) и никаких отступов.
Вопрос: Как получается? И откуда берутся прямоугольники? (в тексте есть, а здесь - пропали

)
Например -
[size=8].............<img src="../../img/null.gif" width=155 height=5> 
 <img src="../../img/-.gif" width=12 height=12 align=top><a href="../html.html">Введение</a> 
 <img src="../../img/-.gif" width=12 height=12 align=top><a href="../html/hierarchy.html">Структура HTML документов</a> 
 <img src="../../img/-.gif" width=12 height=12 align=top><a href="../html/comment.html">Вставка комментариев</a> 
 <table bgcolor="#cc9900" width="100%" cellspacing="0" cellpadding="2" border="0">...............[/size]

У барана глаза на новые ворота более осмысленные, чем у меня, когда гляжу на этот текст сайта

XSunX · 06 декабря, 2005, 03:03:36

ЦитироватьМожно ли видеть СРАЗУ внесённые изменения? Неужели приходится ВСЁ закрывать и открывать заново?
[snapback]2126[/snapback]

Всё совсем просто.
Есть файл .html. Или есть файл .txt, который проще переименовать в .html. Правый клик --> Открыть с помощью. Выбираешь Блокнот, при повторной операции (клик и открыть) выбираешь IE.
Чтобы посмотреть измения быстро: в Блокноте меню Файл --> Сохранить, а в IE кнопка Обновить.

ЦитироватьПапка с именем +__files с начинкой фоток и прочих файлов КАК получается/создаётся?
Нашёл в тексте (аж глаза переломал) ***_files/picture06.jpg и его расположение. Значит, кто-то это picture06.jpg хватает из этой папки и вставляет в поле сайта?
[snapback]2126[/snapback]

Папку создаёт IE. Если сохранить ту же страничку скажем Оперой - папки не будет.
А по поводу того, кто чего куда хватает (браузер, не иначе... ) наверняка подробно написано в учебнике html-льном в главе про тег <img>

ЦитироватьВопрос: "безопасные" цвета понятно, а "ОПАСНЫЕ" подразумеваются под теми, которые могут не читаться, или искажаться на слабеньких видеокартах/мониторах?
[snapback]2126[/snapback]

Всё верно. Только по поводу искажения хочу добавить, что разные мониторы, совсем не обязательно старые, цвет показывают по разному. Разные браузеры тоже могут слегка в разном цвете показать одну и ту же картинку. Для наглядности можно попробовать открыть какое-нибудь контрастное изображение в Фотошопе, Corel Draw, IE и стандартной виндовской графической смотрелке.
Что в таких тяжёлых условиях происходит с безопасными цветами не знаю. Не работала я с ними специально и отдельно. Скучные они.

ЦитироватьКак получается? И откуда берутся прямоугольники?
[snapback]2126[/snapback]

А здесь у тебя вопрос получился не наглядный.

Думаю, что методом тыка параллельно с прочтением учебника и сам разберёшься

-=\SeaWolF/=- · 06 декабря, 2005, 15:53:13

KULISAM,
Все просто в HTML
Это впринципе обычный текст с правилами форматирования
поясню на примерах:

Надо написать текстст на сайте... "Привет посетителям сайта"
и сделать его жирным....

Код Выделить


Привет посетителям сайта

Результат: Привет посетителям сайта

Те почти все теги имеют открывающий и закрывающий тег...

Код Выделить


"" - открывающий тег
"" - закрывающий тег

Надо вставить картинку в страничку images/pic.jpg и вписать ее в размеры квадрата 80*80 пикселей (точек) и сделать ему окантововку толщиной в один пиксель

Код Выделить

Результат

abram4 · 06 декабря, 2005, 22:54:37

ЦитироватьВопрос:
Можно ли видеть СРАЗУ внесённые изменения? Неужели приходится ВСЁ закрывать и открывать заново?
[snapback]2126[/snapback]

Видимо, тут встает вопрос о выборе инструмента для редактирования гипертекста, т.е. нужен редактор. Для начинающего нужен какой-либо из работающих по принципу WYSIWYG (What You See Is What You Get - что видишь, то и получишь). Есть крутые проги типа Dreamweaver, но они настолько круты, что на их изучение уйдет больше времени, чем на написание десятка страничек. Редакторы мы обсуждаем в теме web-редактор
На первое время советую попробовать Webcoder, вот тебе скриншотик с него, присмотрись и разберешься

KULISAM · 07 декабря, 2005, 00:27:24

XSunX, -=SeaWolF/=-,
Ну, молодцы! Спасибоньки! Если так будем быстро двигаться, то скоро и сайт появится в Инете :-)
Поехали дальше:
А ПРЯМОУГОЛЬНИЧКИ-то в тексте есть! в моём примере пропали... Открыл текст другого сайта - всё-таки есть. Ладно, потом разберёмся.

Заглянул к провайдерам, договорился насчёт хостинга и домена. Для меня уже не ругательные слова, а понятные.
Значит, открываем Total Commander, жмём FTP кнопочку и появляется окошко... и управляем своим сайтом.

Вопрос: к чему приготовится и что там такого интересного?

KULISAM · 07 декабря, 2005, 00:46:42

abram4,
Ага, значит, посмотреться можем только после закрытия/открытия текста/сайта? Разобрались.
Dreamweaver и другие у меня есть, а Webcoder обязательно проверю.

abram4 · 07 декабря, 2005, 01:08:39

ЦитироватьА ПРЯМОУГОЛЬНИЧКИ-то в тексте есть! в моём примере пропали... Открыл текст другого сайта - всё-таки есть.
[snapback]2134[/snapback]

Прямоугольнички могут быть следами ненайденных картинок. Сделай на прямоугольнике правый клик - Свойства и посмотри что там написано.

Цитироватьпосмотреться можем только после закрытия/открытия текста/сайта? Разобрались.
[snapback]2135[/snapback]

Разобрались не до конца. На скриншоте явно видно, что в верхнем окне ты пишешь код, а в нижнем сразу видишь что из него получается. Очень похоже на Dreamweaver в режиме Split :D Если откроешь ту страницу с прямоугольниками в Webcodere, то в нижнем окне можешь его выделить а в верхнем увидеть код, который его описывает. Тогда хоть будет понятно о каких таких прямоугольниках речь.

ЦитироватьЗаглянул к провайдерам, договорился насчёт хостинга и домена.
[snapback]2134[/snapback]

Ну и темпы у тебя, однако

ЦитироватьВопрос: к чему приготовится и что там такого интересного?
[snapback]2134[/snapback]

Да ничего особенного. Несколько стандартных папок и файлов. Тебе нужно будет туда загрузить свои файлы и папки и всех делов. Главное, чтобы первый файл сайта назывался index.html (иногда default.html). Только прежде, чем сайт загружать я бы посоветовал все-таки поставить Денвер и погонять на нем, проверить что все линки правильные, страницы друг с другом связаны, картинки на местах ... Иначе потом на сайте придется либо в онлайне править, либо заново загружать исправления.

-=\SeaWolF/=- · 08 декабря, 2005, 21:54:23

Касаемо главных фалов

ЦитироватьГлавное, чтобы первый файл сайта назывался index.html (иногда default.html).

Я немножечко поправлю...
Заглавные фалы и обрабатываемые расширения задаются на сервере (хостинге)
Обычно по умолчанию заглавные файл на Unix серверах это index.html (default.html)
а на Windows серверах index.htm (default.htm)
Это связано с тем что на Windows Серверах в плане совместимости с старыми версиями Windows NT4 где ограничением фаловой системы имя фала должно было быть вида [имя 8 символов].[расширение 3 сивола]
А на Unix-совместимых системах ограничения в расширении фала в три символа нету.
Далее еще один подводный камень у начинающих это прописные и строчные символы в названии фала...
Пример: в Windows системе ссылка на Defaul.htm или Defaul.HTM и defaul.htm - это один и тотже файл - то в Unix совместимой системе это будет совершенно три разных файла...

И вот типичные пример.... подводного камня....
Создали вы картинку в фоттошопе (В ОС Windows) обычно по умолчанию она создает файлый с разширением записанным прописными - те (file.JPG)
а ссылку на файл вы указали
Вот так:

Код Выделить

Вместо

Код Выделить

В ОС Windows - это можно не считать ошибкой
но при переносе на Unix хост вместо картинки будет пустой "квадратик" о ктором было упомянуто... ранее

Поэтому дам такую рекомедацию:

Следует создавать фалы в нижнем реестре и с длинной имени не более 8 симоволов в латинице и расширением в 3 символа
т.е. такого формата - [filename].[ext]
Тогда проблемм в переносе на любой хостинг не возникнет

Хотя с расширении в 3 сивола можно и опустить так как северов на Windows NT4
Осталось довольно мало... но лучше сразу иметь привычку к написанию кода и особенно гиперссылок в нижнем регистре... (пригодится еще такая привычка если вдруг будете изучать языки программирования типа С/С++ и т.п.)

Далее если установленны скриптовые надстройки (PHP, Java, Perl, ASP)
То обычно по умолчанию приоритет отдается последнемму установленному, пример привожу:
Усли провадер установил на сервер(Windows NT) ASP потом PHP то если он ничео не менял
то приоритет в поиске головного файла будет таким...
index.php (default.php)
index.asp (default.asp)
index.htm (default.htm)

те при запросе www.domain.com в указвнном каталоге привязанному к этому домену ищется сначала index.php (default.php)
далее если нету фала index.php (default.php)
ищет index.asp (default.asp)
если и его нету ищет index.htm (default.htm)
Если нету ничего из опичанного выдаст стандарную ошибку 404 - File not Found

Вобщем лдиб читать мануалы по хостингу либо уточнить это вопрос у хостера...

KULISAM · 08 декабря, 2005, 23:25:16

abram4,
Так в тексте (это я называю открывшийся Notepad.txt) [] вот такие РОВНЫЕ прямоугольники. Вполне возможно, что и "следы".
И тут новая напасть!
Ни на одном IE & Maxthon не нашёл File/Edit with NotePad !!!!
Везде File/Edit - закрыто? Что это за фокус?
Или из-за того, что сижу в Инете?

" поставить Денвер и погонять на нем" - прогу скачал. Это значит, свой сайт с его помощью просмотреть?

-=SeaWolF/=-,
Скорее Винда стоит у них, уточню. Дают имя ***.~.uz
Предполагаю, что это будет окончание имени их сервера.
За инфу спасибо! Буду разбираться...

abram4 · 09 декабря, 2005, 10:12:13

ЦитироватьТак в тексте (это я называю открывшийся Notepad.txt) [] вот такие РОВНЫЕ прямоугольники. Вполне возможно, что и "следы".
[snapback]2145[/snapback]

Не, так дело не пойдет, слишком ты все запутываешь. Что еще за файл Notepad.txt? И не представляю я твои прямоугольнички, хоть убей. Принеси скриншот с них и все будет ясно.

ЦитироватьНи на одном IE & Maxthon не нашёл File/Edit with NotePad !!!!
[snapback]2145[/snapback]

Зачем тебе Edit в браузере? Ну, отредактируешь, а дальше что? Другое дело, если ты хочешь код тсраницы просмотреть, поучиться на примерах - для этого есть инструмент View - Source. А к Макстону есть одноименный плагин (может быть, даже в комплекте) и еще есть плагин покруче - ViewPage

Цитировать" поставить Денвер и погонять на нем" - прогу скачал. Это значит, свой сайт с его помощью просмотреть?
[snapback]2145[/snapback]

Не только посмотреть. На Денвере сайт строят и тестируют. Но вопросы по Денверу - в другой теме..

KULISAM · 31 декабря, 2005, 00:34:20

Ничанаем с картинки - см. аттач. (так, облазил все кнопки и не кнопки, нечем приаттачить!) А такой красивый фот приготовил... :D
Как мне показать всем? Принесённый скриншортик? Куда мне жать?

С денвером разбираюсь, читаю.
Просматривать изменения научился.

С Новым годом! :tomato1:

-=\SeaWolF/=- · 31 декабря, 2005, 01:35:52

2 abram4
Денвер Денвер... ну ина фига он нужен? при изучении HTML?
KULISAM,
как ты сказал Приатачить

вообщем картинку сделать подложкой - ну это как 2 пальца об асфальт

есть старый способ но оон уже устарел и не является правильным в новой стандартизации (Х)HTML

допустим тебе надо припиндюхать картинку между какимито элементами....
и ес-но подложкой...
берем и делаем вот так:

Код Выделить




А тут Типа куча всего того что поверху будет :)

abram4 · 31 декабря, 2005, 08:11:36

ЦитироватьКак мне показать всем? Принесённый скриншортик? Куда мне жать?
[snapback]2229[/snapback]

Аттачи выключены. Про картинку
см. тему Как показать на форуме картинку Только, плз, постарайся картинку сделать шириной не больше 500 px. Если очень хочется показать полный экран, просто дай линк на картинку с ImageShack, без прописывания тэгов [IMG]. И не вздумай в bmp вываливать

-=SeaWolF/=-, я уже говорил, не обязательно Денвера ставить. Может быть только на последнем этапе, перед загрузкой на сайт. И то, только для проверки что на хостинге все сработает. А то есть всякие приколы с кириллическими именами файлов или регистром букв в именах из-за которых что-нить может не сработать. Про это мало кто упоминает, а я в свое время на грабли наступил

Какая-то прога, уже не помню, при обработке картинок сохраняла их в *.JPG , а линки в моих html показывали на *.jpg и картинок не было видно. Причем обнаружилось это когда уже залил файлы на хостинг...

KULISAM · 01 января, 2006, 01:00:56

Воюю с сайтами - они не сдаются...

Пока никто не взял мою фотку...

Новый год встречают, однакось

abram4 · 01 января, 2006, 15:59:12

ЦитироватьВоюю с сайтами - они не сдаются...
[snapback]2233[/snapback]

"Нормальные герои всегда идут в обход"©Айболит-66
Чего с ними воевать? Даден линк - ImageShack. В верхней строке надо нажать Browse и пробраузить к файлу картинки на своем диске. Нажать кнопку host it, подождать пока загрузится. На следующей странице скопировать из предпоследней строки Direct link to image линк. Вставить его в пост здесь, получится вот так - http://img362.imageshack.us/img362/5619/arrow9nu.jpg
Если этот же линк взять в тэги

[/code]

то картинку будет видно в посте вот так -

Если еще добавить тэги center

Код Выделить

[center][IMG]http://img362.imageshack.us/img362/5619/arrow9nu.jpg[/IMG][/center] то картинка разместится по центру поста

Напоминаю, что если картинка шире 500 пикселей, то лучше дать ее линком без тегов IMG.

KULISAM · 02 января, 2006, 23:36:49

И где фотка? Линк по центру, а остальное? (Вот, млин, парило меня...

Пока не переименовал в...

)
Ужал фотку, еле видно

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

Пока не включил две галочки...
Пятая, последняя строка Direct link to image, а остальные тоже с моей фоткой.
Может Hotlink for forums (1) и (2), Hotlink for Websites - всё нужно для разных целей?

KULISAM · 03 января, 2006, 01:03:08

Уф... Могу добавить, что с обновлением станиц разобрался.
Закрываем с сохранением ТЕКСТОВЫЙ (NotePad) редактор. Жмём Refresh на IE и изменения видны. Спасибо XSunX надоумила

Только хотел сказать, что в Инете у меня НЕТ "Редактировать с помощью текстового редактора" (Edit with Notepad) - закрытая функция, как обнаружился сайт, на котором это пашет

в Инете!
Побочный вопрос:
1. ЭТО примочки сайтов?
2. ЭТО специфика Инета? Вне Инета - всё работает!

abram4 · 03 января, 2006, 01:24:35

ЦитироватьМожет Hotlink for forums (1) и (2), Hotlink for Websites - всё нужно для разных целей?
[snapback]2250[/snapback]

Это нужно для других форумных движков и для втыкания картинки в сайт. У нас надо пользоваться Direct link to image

ЦитироватьУжал фотку, еле видно
[snapback]2250[/snapback]

Лучше бы не было видно ... :newconfus: что это за уродство? Неужели так в ТЕКСТОВЫЙ (NotePad) редактор видно? Если ты решил пользоваться блокнотом, то дальше я тебе не помошник, терпеть не могу извращений

Цитироватьв Инете у меня НЕТ "Редактировать с помощью текстового редактора" (Edit with Notepad)

не пойму, зачем тебе редактировать в Инете?

KULISAM · 03 января, 2006, 23:46:19

abram4,
Вот теперь понятно - в Инете эта кнопка отдыхает.
Нужно было доказать, что прямоугольники существуют.
Что я и сделал.

KULISAM · 04 марта, 2006, 22:51:05

XSunX
Немного отступлю от, для меня замороченных "тегов", и спрошу просто:
Небольшой скроллинг КРУЖЕВА с тенью на неподвижном цветном фактурном фоне это не проблематично? Для сайта маленького, на 3-5 МБ?
А то придумал я себе заморочку, вот и ищу КРУЖЕВА, да ещё и ПРОЗРАЧНЫЕ! Чтобы с тенью ложились на фон (среднесерый, для подчеркивания цвета одежды/моделей).
1. Найти КРУЖЕВА. (могу сделать в .gif or .jpg?)

Итого: на "кружевах" фотки моделей одежды, женской. Текст - номер или несколько слов описания. ВСЁ!
Длинна - 5-7 экранов/мониторов. (но может и больше)
ТЕНЬ - если сложно, можно пропустить, без тени падающей.
Вот такой вот "ход конём" - осилю? Для новичка возможно?