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

Сервис обмена электронных валют

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

Параграфы, блоки и их представление

#1 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8
0

Отправлено 21 Январь 2009 - 04:13

Не беги впереди паровоза

Основное на сегодня:
  • Параграфы и их представление
  • Блочный элемент DIV и его смысл

Вот мы и перешли к новой ступени изучения. Мы с вами уже изучили Что за зверь HTML (как строится страница) и рассмотрели представление страницы в форме тегов. Теперь я представлю вам два заманчивых тега, которые вам пригодятся при составлении своих сайтов.

! Запоминаем коротко и ясно все теги оформления и преставления страницы находятся между <body> </body> (т.е. в ТЕЛЕ ДОКУМЕНТА)
! Хочу вас сразу предупредить, так как множество тегов и их атрибутов устарели, я взял на себя такую смелость, оставить материал по оформлению страницы на последующие лекции. В данном контексте имею ввиду изменение цвета фона, текста, смена шрифта.

А так же, если вы хотите чтобы ваш текст просто отобразился на странице, впишите его между открывающим и закрывающим тегом ТЕЛА страницы. (надеюсь все помнят что это значит, если нет, подымите глаза выше и прочитайте данный топик сначала)

Параграфы и их представление

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

В нашем представлении HTML это примерно тоже самое. Параграфы текста идущие друг за другом разделяются между собой вертикальным отступом. Величиной отступа можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента.
Параграф в нашем случае имеет простое обозначение <p> </p>

И так, как же мы можем форматировать параграф:
1) Без форматирования, обычный параграф
<p>
Текст в параграфе по умолчанию. Ни чем не отличающийся от положения слева.
</p>

2) Выровнять по левому краю текст
<p align="left">
Текст в параграфе По левому краю. То есть текст ровняется по левому краю, то что не убирается в строку переносится на новую, отсюда и появляются пробелы с правой стороны.
</p>

3) Выровнять по центру текст
<p align="center">
Текст в параграфе По центру. Каждая новая строка находится по центру параграфа.
</p>

4) Выровнять по правому краю текст
<p align="right">
Текст в параграфе По правому краю. То есть текст ровняется по правому краю, то что не убирается в строку, переносится на новую, отсюда и появляются пробелы с левой стороны.
</p>

4) Выровнять по ширине элемента текст
<p align="justify">
Текст в параграфе <b>по ширине элемента</b>. То есть текст занимает размер по всей ширине блока. В данном случае пробелов слева или справа не остаётся, просто увеличивается растояние между словами.
</p>


Внутри кода я специально расписал каждый случай, прочитайте и соотнесите с атибутом align, который задаёт выравнивание по ширине.
Чтобы вам было понятнее о чём идёт речь, прошу взглянуть на картинку с комментариями

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

А вот как выглядит это чудо на странице браузера

Изображение

Блочный элемент DIV и его смысл

Является блочным элементом и предназначен для выделения фрагмента документа с целью изменения оформления содержимого.
Как и всех блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки, то есть <br>

Обозначается данный элемент на странице так <div> </div>
И я хотел вам объяснить его смысл. Данный блочный элемент представляет из себя контейнер, в котором могут содержаться, таблицы, картинки, текст, ссылки и другие элементы. Их можно представить не только в виде вертикально-последовательных блоков
<div style="padding: 10px; background-color: #FF0000;">
Вертикальный блок №1
</div>

<div style="padding: 10px; background-color: #00FF00;">
Вертикальный блок №2
</div>

Вот картинка к коду:
Изображение

но и в виде горизонтально-последовательных блоков
<div style="padding: 10px; background-color: #FF0000; float:left">
Вертикальный блок №1
</div>

<div style="padding: 10px; background-color: #00FF00; float:left">
Вертикальный блок №2
</div>

Вот картинка к коду:
Изображение

На атрибут style пока не обращаем внимания, как я уже сказал, о стилизации документа я расскажу позже!

!моё замечание Блочная(DIV'ная) вёрстка страницы как правило более быстра в обработке браузером, ценится дороже, имеет много подводных камней и очень сложна в изучении. Но она имеет огромное преимущество перед таблицами! Таблица ждёт пока всё её содержимое, каждая ячейка, загрузится, а затем уже выдаётся на экран. А блоки, это те же самые ячейки, только грузятся они каждые по отдельности.

На сегодня этой информации достаточно. Всем удачи!
С уважением, Алексей.
-------------------------------------------------------------------------------

Предыдущая лекция

 

 

  • 0

#2 Bender

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

Отправлено 22 Январь 2009 - 13:11

Остается только добавить что закрывающий тег </p> необязателен.

А насчет div полностью согласен - сложно ;). Я помню пытался как-то меню справа сделать, я где-то причитал что нужно как-то в style.txt писать float:right; margin-left:-200px; ... короче я так и не понял ;)
  • 0

#3 ZiTosS

ZiTosS
    Topic Starter
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 22 Январь 2009 - 21:05

Остается только добавить что закрывающий тег </p> необязателен.

Это вы правильно подметили. Но я не стал писать про необязательность закрывающего тега, чтобы люди не нарушали понятность структуры вёрстки.
Вот убери ты </p> ,а у тебя на странице наисложнейшая вёрстка и в коде ужасный хаос, что сложно что-то понять. Вот кто-то и запутается в коде и будет думать "А до куда у него параграф тянется..."

А насчет div полностью согласен - сложно smile.gif. Я помню пытался как-то меню справа сделать, я где-то причитал что нужно как-то в style.txt писать float:right; margin-left:-200px; ... короче я так и не понял smile.gif

Для начинающих это конечно сложно, а тот кто понимает, что означает свойство float(обтекание элемента) в CSS. Представь, что блок представляет из себя картинку, и если ей прописать align="left", то текст или другие элемнты будут её обтекать справа. Так же и с Div'ами.

И ещё... Обычно имя файла стилей не style.txt, а style.css. Разница может и не существенная в названии, но косяки отсюда могут вылезти.

Если захочешь изучить блочную верстку и будут возникать вопросы, не стесняйся, задавай в разделе HTML, я отвечу обязательно ;)
  • 0

#4 admin

admin
  • Пользователь PRO
  • 5 272 сообщений
  • Репутация: 54

Отправлено 22 Январь 2009 - 22:09

И ещё... Обычно имя файла стилей не style.txt, а style.css. Разница может и не существенная в названии, но косяки отсюда могут вылезти.


Разрешение роли не играет, хоть .css, хоть .txt - не важно. Главное потом так же само в коде страницы прописать
  • 0

Сколько лет прошло, а ссылки всё ещё лучше покупать тут



#5 kimer

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

Отправлено 06 Февраль 2009 - 01:38

Но она имеет огромное преимущество перед таблицами! Таблица ждёт пока всё её содержимое, каждая ячейка, загрузится, а затем уже выдаётся на экран. А блоки, это те же самые ячейки, только грузятся они каждые по отдельности.

Прям так уж и огромное. :unsure:
Опера нормально грузит таблицы по ячейкам. Да и насчет других браузеров можно эту проблему порешать, если уж это так важно:
"Элементы th и td позволяют определить подзаголовок или ячейки данных, а также указать браузерам, как должны выглядеть столбцы в таблице. Для этого используются два элемента: тег colgroup создает структурную группу, устанавливающую характеристику столбцов в этой группе, а тег col позволяет задать общие для группы атрибуты. В совокупности эти элементы позволяют браузерам немедленно начинать вывод на экран столбцов, постепенно (по мере загрузки) формируя таблицу..."
  • 0

#6 ZiTosS

ZiTosS
    Topic Starter
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 06 Февраль 2009 - 10:11

Да это так... Но что приятнее смотрится в коде
<table width="100%" border="1" rules="groups">
<colgroup span="2" align="center" width="50%">
<tr>
<td>Ячейка 1_1</td>
<td>Ячейка 1_2</td>
</tr>
<tr>
<td>Ячейка 2_1</td>
<td>Ячейка 2_2</td>
</tr>
</table>

Или блочной
<div style="width: 100%;">
<div align="center" style="width: 50%; float: left;">Ячейка 1_1</div>
<div align="center" style="width: 50%; float: left;">Ячейка 1_2</div>
</div>
<div style="width: 100%;">
<div align="center" style="width: 50%; float: left;">Ячейка 2_1</div>
<div align="center" style="width: 50%; float: left;">Ячейка 2_2</div>
</div>

Особенно если все параметры блоков убрать в CSS, я думаю будет намного красивее.
.parentId
{
width: 100%;
}

.parentId div
{
float: left;
width: 50%;
text-align: center;
}
.......................
<div class="parentId">
<div>Ячейка 1_1</div>
<div>Ячейка 1_2</div>
</div>
<div class="parentId">
<div>Ячейка 2_1</div>
<div>Ячейка 2_2</div>
</div>


Думаю разница видна невооруженным глазом :unsure:
  • 0

#7 kimer

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

Отправлено 06 Февраль 2009 - 14:36

Да это так... Но что приятнее смотрится в коде...

Думаю разница видна невооруженным глазом :)

Я не могу сказать насколько приятнее людям смотреть на такой код и кто этим вообще занимается :unsure:
Каких-либо значительных преимуществ в плане скорости загрузки блочная верстка не дает. Зато создает много проблем с отображением в разных браузерах, чего при табличной верстке практически нет, либо легко устранимо. Стоит ли канитель-то с этим разводить? Блочную верстку осуществить гораздо труднее. Да и код, скорее всего, будет тяжелее.
  • 0

#8 ZiTosS

ZiTosS
    Topic Starter
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 06 Февраль 2009 - 22:52

Да и код, скорее всего, будет тяжелее.
Не всегда.
А по поводу сложнее осуществить, это ты не прав. Ты же изучил таблицы, как в ней объединяются столбцы и строки. Также подробно нужно изучить и блоки. А так же почитать W3C спецификацию + всегда использовать один и тот же DOCTYPE, тогда все сложности отпадут.
  • 0

#9 kimer

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

Отправлено 06 Февраль 2009 - 23:38

Сомневаюсь, что все сложности отпадут. На будущее - возможно. А пока по старым браузерам отзывы о блочной верстке не очень.
И то, что сложнее осуществить - это практически все признают. Сейчас это больше вопрос престижа, вроде как - "высший пилотаж". Я сайты только для себя делаю. Никаких проблем никогда не было с табличным каркасом. Все отлично работает. Не вижу смысла самому себе проблемы создавать. Если человек конечно в фирме какой-нибудь вебмастером работает, тогда - другое дело...
  • 0

robot

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


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