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


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

  • Фотография WGN
    #2

    WGN (worldgamenews.com)
    Очков активности: 64.5 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #3

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография profi
    #10

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 17.08.2018
Топ 5 участников по репутации


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

#1 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8
0

Отправлено 21 January 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

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Что такое блочная и табличная верстка?
  2. Тег div
  3. Html верстка на конкретном примере
  4. Урок (Viewport)#1 - основная разметка, спрайты, общие принципы
  5. Метатеги Dublin Core — полезные, но малоизвестные

#2 Bender

Bender
  • Неактивные
  • 712 сообщений
  • Репутация: 0

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

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

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

#3 ZiTosS

ZiTosS
    Topic Starter
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 22 January 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
  • 5275 сообщений
  • Репутация: 55

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

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


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

#5 kimer

kimer
  • Неактивные
  • 360 сообщений
  • Репутация: 1

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

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

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

#6 ZiTosS

ZiTosS
    Topic Starter
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 06 February 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 February 2009 - 14:36

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

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

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

#8 ZiTosS

ZiTosS
    Topic Starter
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

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

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

#9 kimer

kimer
  • Неактивные
  • 360 сообщений
  • Репутация: 1

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

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

robot

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

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