Вопросы по HTML для новичков
 

Народ, ответьте вопрос начинающего веб-дизайнера.

Пользуюсь Dreamweaver MX 2004. ПОчему-то по умолчанию весь текст набирается с отступом после абзаца (даже совершенно неформатированный на абсолютно свежесозданной странице). Как от этого избавиться (т. е. чтобы текст набирался сплошняком, без отсупов между абзацами)?

Дизайн тут причем ?

E.S.A. :пользуешься таким новым софтом, что даже и ине знаю что тебе посоветовать, нету у меня еще такого дрима. В старом добром МХ, можно перейти в режим просморта кода и задать стиль для абзаца:
<p style="word-spacing:12px"> вместо 12px задай подходящее расстояние между словами.

word-spacing это расстояние между словами. Отступы регулируются margin и padding.

RaZEr
Извини, я думал, что то, чем я сейчас пытаюсь заниматься, это и есть Web-дизайн :).
Если нет, то тогда встречный вопрос: какое отношение мой вопрос имеет к "Веб-программированию и скриптам"?

Кстати, твой совет помог. Большое тебе спасибо.
Ответь, пожалуйста, еще на один: визуально эффекты от margin и padding очень похожи. Не подаскажешь, чем они отличаются по существу?

P.S.: К слову, топик можно переименовать в что-то типа "Вопросы новичков по веб-дизайну".

E.S.A.
Margin это поле, т.е. количество пикселев между краем страницы и самим текстом,(таблицой, рисинком), а padding - это пространство между полем (которое задается margin) и текстом.

Еще инфы:
В этих двух свойствах есть некоторые сложности. Фактически, и поле (margin), и «набивка» (padding) определяют, насколько отстоит внутренний блок от внешнего, то есть его отступы. Но между этими двумя понятиями есть некоторая разница. «Набивкой», или внутренним отступом называется расстояние от границы блочного элемента до края его содержимого. Расстояние от границы блока до внешнего (родительского) блочного элемента называется просто отступом, или внешним отступом. Таким образом, padding и margin характеризуют отступы блочного элемента относительно границы охватывающего его элемента разметки. Получается, что общее расстояние от содержимого (именно от содержимого, а не от границы) внутреннего блока до границы внешнего блока равно padding + margin.

Wizard[WA]
Спасибо. Для меня этого вполне достаточно...

Вообще-то не стоит плодить тег <p>. Гораздо проще абзац от абзаца отделять, ставя в конце очередного тег <br> (переход строки). Ставишь 1 - просто переход, ставишь 2 - просвет между абзацами в 1 строку и т.д.

А теги <p> используй только когда нужно сменить выравнивание align.

И еще совет - воспользуйся поиском и поищи обсуждения лучших HTML-редакторов.

Goryn
А при чем тут тег <p>?
Вроде речь о другом совсем...

Goryn
Насколько я знаю, таким образом нельзя сделать красную строку (т. е. отступ первой строки). Как и в Word'е, при разрыве строки следующая оказывается "приклеенной" к левому полю.

Wizard[WA]

Сами же обсуждаете его начиная с сообщения за номером 3.


E.S.A.

Если ты хочешь использовать красную строку, то ставь в начале абзаца символ неразделяемого пробела &nbsp; . Я ставлю обычно 3 символа. Если ты будешь ставить обычные пробелы (в смысле нажимать клавишу <ПРОБЕЛ>), то это будет "проглатываться" HTML'ом.

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

Goryn
Oops...
Я уже в css ударился =)
E.S.A.
Не думаю, что тег <p> настолько плох, что им не стоит злоупотреблять, хотя при работе в Dreamweaver у новичков их действительно чересчур много. И уж точно не стоит его ставить ради красной строки, & nbsp; вполне прокатит (пробела там быть не должно).
А если хочешь просто выделить кусок текста, то можно (и даже нужно =) ) воспользоваться тегом <BLOCKQUOTE>

Добавлено через 1 минуту:
Опачки... а non breakin spaсe форум проглатывает, бум знать =)

Прямое. Ты задаешь вопрос по HTML.

По поводу красной строки ... это свойство text-indent.

Goryn
Я предпочитаю использовать text-indent. К "абзацам с помощью пробелов" издавна испытываю стойкое отвращение.

Wizard[WA]
Похоже, ты путаешь красную строку с отступом.

Доля правды есть...
Просто красная строка очень часто начинается с отступа...
И многие ради этого ее и начинают =)

Wizard[WA]
Ох, запутаем мы друг друга... :) .

Расскажите мне кто-нибудь, за что вы так не любите тег <p> и как с ним бороться?

Тег <p> как и большинство других нельзя любить или не любить. Просто любой нормальный веб-мастер борется за минимизацию кода (это мое ИМХО и ИМХО моих друзей и спор по этому поводу просьба не поднимать - было уже).
Но так как переименовали топик - объяснусь.

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

В идеале страница должна быть 30-60 Кб.

Соответственно сравниваем 2 строки:
1) <p align="justify">
2) <br><br>

Какая короче? А если абзацев десяток? Вот так по мелочи и набираются лишние килобайты. Для примера: После конвертации таблицы из Word в HTML я, убирая все лишнее и только улучшая вид страницы, сокращаю размер конечного файла в 4-5 раз!!!
Поэтому многие называют лучшим ХТМЛ-редактором виндусовый Блокнот - типа лишнего не набъешь (по поводу обсуждения редакторов были уже топики)

Как использовать <p> я уже писал выше - повторяться не буду.

Goryn
Извини, я не очень хорошо понял, как можно сравнивать эти две строки. Они могут приводить к одинаковому эффекту лишь в частных случаях. А в моем случае, когда нужно, чтобы текст отображался с отступом первой строки, этот вариант неприменим. Что делать тогда? Лично у меня код страницы с однообразным текстом (книга) выглядит следующим образом:
<p style="Text"> ... </p>
И так на каждый абзац. Может, есть какой-нибудь выход из данной ситуации?

А зачем? тег p как раз и показывает что содержимое и есть абзац? Это правильный подход и логически и практически.

medved2002
А как же тогда с оптимизацией кода?

в css пропиши не p.style{ чего нибудь } а p{ чего нибудь } и юзай <p>текст</p>
такая оптимизация тебе подойдет?

medved2002
по моему с тобой мы и слехтывались по поводу оптимизации кода.

E.S.A.
Я же уже писал выше... Ну, ладно, объясняю на пальцах.
Предположим, что у тебя есть 3 абзаца с одинаковым стилем и выравниванием. Тогда вместо кода


<p style="Text"> Текст абзаца 1 </p>
<p style="Text"> Текст абзаца 2 </p>
<p style="Text"> Текст абзаца 3 </p>


Ты пишешь следующее:


<p style="Text"> Текст абзаца 1 <br><br>
Текст абзаца 2 <br><br>
Текст абзаца 3 <br><br>


Кстати, закрытием тега </p> ты никогда не добъешся, чтобы абзацы у тебя следовали друг за другом без просвета. Это достижимо только с ипользованием одинарного перевода строки <br>.

Закрытие тега абзаца </p> вообще необязательно. За несколько лет работы я использовал его всего 2-3 раза, когда надо было выровнять относительно текста рисунок или таблицу на резиновых сайтах. И то, потому что иначе выглядело некрасиво. Но это уже исключение из правила.

Новый тег <p> используй или если это у тебя первый абзац в документе / после картинки / после таблицы / после списка перечисления и т.д. или если тебе надо поменять выравнивание, например


<p align="justify">Какой-то текст, который занимает всю ширину страницы
<p align="center">Пусть это будет заголовок по центру
<p align="justify"> Продолжаем основной текст


При этом между каждым абзацем просвет в 1 строку. Если тебе надо добиться больше просто сразу после закрытия тега <p> ставишь нужное количество <br>. Например в предыдущем примере надо, чтобы между первым текстом и заголовком было 3 строки. Тогда пишешь:



<p align="justify">Какой-то текст, который занимает всю ширину страницы
<p align="center"><br><br>Пусть это будет заголовок по центру
<p align="justify"> Продолжаем основной текст

Было дело. И похоже еще раз схватимся.

И получаешь логически неправильный код со спасенными 10 битами. Сильно

А это вообще сильно. Заодно надо написать писмецо в w3c.org - "Ребята курите, я спас еще 3 бита."

Набор тегов <p style="Text"></p> занимает 20 байт. Чтобы из подобного получить хотя бы 1 кб, нужно 50(!) с лишним подобных наборов.
Скажите, много ли людей в наше время пишут проги на ассемблере из-за высокой оптимизируемости кода и малого размера получаемой программы?

Goryn
Извини, что я тебя напрягаю. Но мы просто говорим о разных вещах.
Есть как минимум два способа выделения абзацев в тексте:

Западный стиль (в т. ч. американский):
Кстати, чтобы его соблюсти, в Dreamweawer 2004 MX (с более ранними не знаком) текст по умолчанию имеет margin-top и margin-bottom. С решения этой проблемы я и начал этот топик.

"Восточный" стиль :), доминировавший в культуре верстки на просторах xUSSR:
Так вот, я использовал второй стиль. С помощью твоей методики, ИМХО, его сделать невозможно, так как следующая за оборванной строка всегда начинается от левого поля без отступа.

Я добился ;). Установив значение пресловутых margin-top и margin-bottom = 0.
Кстати, по всей видимости, ты не используешь CSS. С их помощью данный вопрос легко решается.

medved2002
Прости, я только начал разбираться в CSS. Не объяснишь ли на пальцах?

Гммм... Смысл такой.

p{что-нибудь} - описание вывода для всех тегов <p>
p.style{что-нибудь} - описание вывода для всех тегов <p class="style">
p#style{что-нибудь} - описание вывода для всех тегов <p id="style">

Смотришь как у тебя выводится чаще. и взависимости от этого и пляшешь.


Насчет отступов :
Попробуй

p:first-letter {
padding-left: 20px;
}
В каких браузерах работает не знаю в IE6 точно работает

E.S.A.

Мы не поняли друг друга, потому что сразу говорим о 2-ч вещах: отступах и теге <p>. Я отвечал на твой вопрос о последнем. А об отступе - выше писал по поводу неразделяемого пробела.

CSS я изучал давно, когда еще была 1-ая версия. А обновить знания все время не доходят. Если ты черпаешь свои где-то из справочника в Инете - дай плз ссылку.

Единственное - надо учитывать, что разные браузеры могут неоднозначно обрабатывать одни и те же CSS-параметры. Но это уже к вопросу об одинаковой отображаемости.

imfo.ru
www.webmascon.com
http://www.webmascon.com/daily.2/
http://www.egoroff.spb.ru
http://www.csszengarden.com/
[URL=http://www.mezzoblue.com/]http://www.mezzoblue.com/[URL]
http://www.w3schools.com/

На всех сайтах ходишь по ссылкам

Добавлено через 1 минуту:
Ну и пользуешься валидатором

Добавлено через 1 минуту:
Насчет поддержки CSS браузерами:
http://www.westciv.com/style_master/...owser_support/

если написать <pre style="font-family: arial; font-size: 14; text-align: justify">, то ничем от обычного текста не отличается...

Neo

Вообще-то я имел в виду тег <pre> - The Preformatted Text . Все что находится внутри него выводится так же, как выглядит в текстовом файле со всеми пробелами, переносами строки и т.д. В общем, со всем, что "проглатывает" ХТМЛ.

Goryn
А я про что написал? Я написал <pre> с расширенными аттрибутами

Neo

Сори, не углядел. Я только первое "р" увидел :ooh:

Будем считать, что я немного прокомментировал твой ответ.