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



 

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

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

Открыть тему
Тема закрыта
> Параграфы, блоки и их представление, Лекция №3
ZiTosS
ZiTosS
Topic Starter сообщение 21.1.2009, 5:13; Ответить: ZiTosS
Сообщение #1


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

Основное на сегодня:
  1. Параграфы и их представление
  2. Блочный элемент 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, который задаёт выравнивание по ширине.
Чтобы вам было понятнее о чём идёт речь, прошу взглянуть на картинку с комментариями

Как вы видите, данный элемент имеет стандартный вертикальный отступ, что как бы то ни было разделяет один параграф от другого. Параграфы очень действенны, когда какую-либо часть текста на странице вам надо одарить отдельным оформлением.
[img]http://www.masterwebs.ru/pictures/lessons/html/3/pic_1.gif[/img]

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

[img]http://www.masterwebs.ru/pictures/lessons/html/3/pic_2.gif[/img]

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

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

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

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

Вот картинка к коду:
[img]http://www.masterwebs.ru/pictures/lessons/html/3/pic_3.gif[/img]

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

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

Вот картинка к коду:
[img]http://www.masterwebs.ru/pictures/lessons/html/3/pic_4.gif[/img]

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

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

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

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


Поблагодарили: (1)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Robot-sgibatel
Robot-sgibatel
сообщение 22.1.2009, 14:11; Ответить: Robot-sgibatel
Сообщение #2


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

А насчет div полностью согласен - сложно ;). Я помню пытался как-то меню справа сделать, я где-то причитал что нужно как-то в style.txt писать float:right; margin-left:-200px; ... короче я так и не понял ;)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
Topic Starter сообщение 22.1.2009, 22:05; Ответить: ZiTosS
Сообщение #3


Остается только добавить что закрывающий тег </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_* Гость_0_*
сообщение 22.1.2009, 23:09; Ответить: Гость_0_*
Сообщение #4


(ZiTosS @ 22.1.2009, 21:05) *
И ещё... Обычно имя файла стилей не style.txt, а style.css. Разница может и не существенная в названии, но косяки отсюда могут вылезти.


Разрешение роли не играет, хоть .css, хоть .txt - не важно. Главное потом так же само в коде страницы прописать
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kimer
kimer
сообщение 6.2.2009, 2:38; Ответить: kimer
Сообщение #5


(ZiTosS @ 21.1.2009, 4:13) *
Но она имеет огромное преимущество перед таблицами! Таблица ждёт пока всё её содержимое, каждая ячейка, загрузится, а затем уже выдаётся на экран. А блоки, это те же самые ячейки, только грузятся они каждые по отдельности.

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


Да это так... Но что приятнее смотрится в коде
<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:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kimer
kimer
сообщение 6.2.2009, 15:36; Ответить: kimer
Сообщение #7


(ZiTosS @ 6.2.2009, 10:11) *
Да это так... Но что приятнее смотрится в коде...

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

Я не могу сказать насколько приятнее людям смотреть на такой код и кто этим вообще занимается :unsure:
Каких-либо значительных преимуществ в плане скорости загрузки блочная верстка не дает. Зато создает много проблем с отображением в разных браузерах, чего при табличной верстке практически нет, либо легко устранимо. Стоит ли канитель-то с этим разводить? Блочную верстку осуществить гораздо труднее. Да и код, скорее всего, будет тяжелее.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
Topic Starter сообщение 6.2.2009, 23:52; Ответить: ZiTosS
Сообщение #8


Да и код, скорее всего, будет тяжелее.

Не всегда.
А по поводу сложнее осуществить, это ты не прав. Ты же изучил таблицы, как в ней объединяются столбцы и строки. Также подробно нужно изучить и блоки. А так же почитать W3C спецификацию + всегда использовать один и тот же DOCTYPE, тогда все сложности отпадут.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kimer
kimer
сообщение 7.2.2009, 0:38; Ответить: kimer
Сообщение #9


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Продам места под сквозные блоки на СМИ сайте
текст или графика
0 seo_vladimir 786 2.9.2020, 12:14
автор: seo_vladimir
Открытая тема (нет новых ответов) Не могу выровнять блоки по правую сторону
1 Dark_Delphin 5908 18.11.2016, 0:14
автор: -Петр Чирнов-
Открытая тема (нет новых ответов) При уменьшении масштаба разъезжаются блоки
0 Alex.Bulgakov 3529 9.11.2016, 15:28
автор: -Alex.Bulgakov-
Открытая тема (нет новых ответов) Как поднять блоки вверх
2 Denis_sf 12870 21.11.2013, 22:32
автор: -hennessy-
Открытая тема (нет новых ответов) Сайт расползается на блоки при смене размера шрифта
3 datenrettung 5630 26.2.2013, 22:16
автор: -Arks-


 



RSS Текстовая версия Сейчас: 19.4.2024, 21:31
Дизайн