Приветствую Вас, мои дорогие читатели и случайные прохожие! В четвертой лекции мы поговорим о списках и отдельно о теге <div>, который имеет намного большее значение, нежели Вам может показаться на превый взгляд.
Списки
Думаю Вам не нужно объяснять что такое список, я прав? Замечательно! Перейдём тогда сразу к делу. Тег <ul> устанавливает начало маркированного списка, и как Вы, наверное, уже догадались, тег </ul> — его конец. Что значит маркированный? Это значит что перед каждым элементом списка располагается маркер, он же буллит, — типографский знак, используемый для выделения элементов списка. Каждый элемент такого списка заключен между тегами <li> и </li>. У данного тега есть один собственный атрибут type, который может принимать 3 значения square (квадрат), disc (диск), circle (кольцо). По умолчанию для элемент списка устанавливается тип disc. Применение атрибута type для тега <li> позволяет установить тип для каждого из элементов списка в отдельности, для того, чтобы применить тип для всего списка, атрибут type нужно использовать для тега <ul>.
Рассмотрим код простого маркированного списка:
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
</ul>
[/html]
Который выглядит следующим образом:
- Первый элемент списка
- Второй элемент списка
Также в HTML существует такое понятие, как нумерованный список, который устанавливается с помощью тега <ol>. У данного тега есть три собственных атрибута:
- type — Устанавливает вид маркера списка.
- reversed — Нумерация в списке становится в обратном порядке (3,2,1).
- start — Число, с которого будет начинаться нумерованный список.
Атрибут type для тега <ol> может принимать следующие значения: A (заглавные латинские буквы), a (строчные латинские буквы), I (заглавные римские цифры), i (строчные римские цифры), 1 (арабские цифры). По умолчанию значение равно 1, т.е. арабские цифры. Элемент нумерованного списка располагается между тегами <li> и </li>, как и в случае с маркированным списком.
Код простого нумерованного списка:
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>
[/html]
- Первый
- Второй
- Третий
На самом деле, списки. Применяются не только при выводе списка, как может показаться на первый взгляд. Зачастую меню сайта также выводят при помощи списка, при выводе рубрик на блогах также используют списки. Список может отображаться как вертикально, так и горизонтально. Но во втором случае силой одного HTML не обойтись. Список может быть как с маркером, так и без. Для этого на помощь приходит CSS (Cascading Style Sheets — каскадные таблицы стилей). Поэтому, дорогие читатели, пришло время, когда мы с Вами должны окунуться в изучение спецификаций CSS.
Ну что же, поздравляю! Теперь Вы знаете, что такое списки и как их применять на деле.
А теперь я постараюсь убедить Вас, в том, что CSS крайне необходим. Для этого нужно познакомится с неприметным на первый взгляд тегом <div>, который является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Во второй лекции, я говорил Вам про то, что можно верстать сайт таблицами, так вот, можно, но не нужно! Дело в том, что среди верстальщиков показателем мастерства является блочная вёрстка. Вы можете встретить высказывания «да таблицами я хоть черта сверстаю», да, это так. Но это говорят в основном те, кто не смог освоить CSS, т.к. вид блока <div> управляется при помощи стилей. Но Вы ведь не такие, Вы лучше, и я это знаю!
«А как же таблицы?» — спросите Вы. Таблицы таблицами, они по прежнему имееют место в вёрстке, ведь согласитесь, использовать блоки для вывода таблицы успеваемости студентов, нелогично. Используя CSS и блочную вёрстку, Вы уменьшите вес страницы сайта, тем самым увеличив скорость загрузки Вашего сайта.
И так если Вы ещё не решились изучать CSS — вот мой последний аргумент: предположим, что сайт — это квартира, HTML — это стены, благодаря которым у Вас получаются комнаты, а CSS — это двери, обои, краска, картины, мебель, ковры — т.е. то, что придаёт Вашей квартире уникальности! Хотите чтобы Ваш сайт запомнился Вашим пользователям — сделайте его уникальным, и в этом Вам поможет CSS.
Подпишитесь на RSS ленту блога, чтобы не пропустить новый набор лекций CSS с нуля. Если у Вас есть какие-то вопросы, задавайте их в комментариях, с удовольствием отвечу, а ответы на вопросы о CSS включу в первую лекцию CSS с нуля.
Вы только начинали работать на компьютере? Возникает много вопросов? Тогда советую посетить блог Pk-prosto.ru, который поможет ускорить Ваше обучение компьютеру. Вы быстро научитесь работать с WebMoney, самостоятельно создавать загрузочный диск и многое другое.
а 5 лекция будет?
Пока не планируется. После этих 4х лекций, Вы уже можете самостоятельно начинать делать «первые шаги». Т.к. считается, что Вы уже почти всё знаете, за исключением некоторых нюансов, которые, возможно, Вам даже и не пригодятся.
Далее планируется курс CSS с нуля, в котором будут также рассматриваться нюансы HTML+CSS.
Может это и нк по теме сайта, но знаете ли вы язык C++ и планируете ли делать лекции , я понимаю что этот язык раз в 10 сложней HTML, но я ни как ни могу в нём разобраться от а до я, хотя основы уже выучил:)
C++ знаю, правда основы и азы (голое ООП, скажем так), максимум что я писал, это программа для работы с сетевыми интерфейсами IPv4, да и то, потом я переписал ее на C#. Дело в том, что этот язык мною был затронут на первых курсах университета, ну и еще при знакомстве с Qt SDK. Лекции по нему делать не планировал и скорее всего не буду, т.к. я специализируюсь на веб разработках. Мне гораздо легче будет сделать курс по PHP, чем по С++. Могу дать совет: начните с простого С, далее начинайте использовать и заменять некоторые вещи из С++. Т.к ознакомившись со структурами, проще будет вникнуть в классы. Взгляните на книги от Страуструпа.
Кстати, если вдруг не будете понимать всей надобности шаблонов, делегатов, интерфейсов — не отчаивайтесь, сухая теория она такая 🙂 Лучше попросите на форуме задачу, для решения которой необходимо будет, к примеру, использовать делегаты. Тогда Вы сможете действительно понять что это, и для чего.
спасибо большое за лекций 🙂
а будут лекций по Java Script?
Впринципе возможно всё. Но в ближайшем будущем я планировал начать рассказ про CSS. И так уже немного не успеваю, всё обещаю и обещаю, постараюсь с выходных начать. Ну а вообще, вот вам ссылочка на довольно-таки хороший учебник по JS: http://learn.javascript.ru/
Лекций про особенности HTML5 хорошо бы, а лучше про дебаг cross-platfrom’еммых аппов. Если сможешь. : )
Наверное не могу:) Загружен проектами сейчас, как освобожусь чуток — нужно выполнять обещания и начать разжёвывать CSS для новичков.
а когда будут леции по CSS??????????
До конца недели, ну или на крайний случай в субботу.
Большое спасибо!Все понятно!Очень хорошая лекция!
Так познавательно и доступно! Спасибо, огромное!
Пожалуйста, обращайтесь, если понадобится помощь.
меня интересовал такой эффект , когда фон зафиксирован, а текст прокручивается . И здесь такая удача, нахожу ответ на мой внутренний вопрос. здорово! спасибо.
Здесь, это где? В этой статье об этом ни слова…
Что такое XHTML?
Это основанный на XML язык разметки гипертекста. Очень похож на HTML, однако имеет ряд своих правил и особенностей.
очень интересно и понятно,особенно для начинающих. но я не нашла интересующую меня деталь.
хотелось бы узнать,как написать код,где необходимо указать дату в виде «с» дата «по» дата? (период) заранее спасибо!
Для этого используются стандартные input’ы (type=»text»). Можно использовать type=»date», но, к сожалению, не все браузеры его поддерживают. Можно использовать jQuery UI: datepicker. Можно разработать свой элемент (хотя, я думаю, что и готовых решений будет предостаточно).
Спасибо большое за этот курс!
Мне очень пригодилось!
Я новичок, но мне всё было понятно!
Спасибо за отзыв. Рад, что материал оказался полезным.
А лекций по java будут?
Вы имеете ввиду JavaScript? Если да, то в ближайшее время нет, т.к. я на 2.5 месяца в армию, а потом нужно реализовывать незаконченные проекты. Попробуйте http://learn.javascript.ru — тут все доходчиво написано. Если имели ввиду Java SE, Java EE, то нет — это не мой профиль.
А где пятый урок? Мне очень нужно продолжение! Вы пишите очень разборчиво и понятливо в отличие от других.
5ый я решил не делать, т.к. 4-х вполне достаточно, чтобы понять HTML. Есть начатая серия лекций по CSS, но из-за недостатка времени, эта серия статей не закончена.
Стас, подскажите, в подвале ссылка на разработчика темы, а в коде предупреждение, что если удалить или отредактировать ссылку на разработчика то тема работать не будет… хотела попробовать удалить, но страшно 🙂
подскажите, можно как то обойти и удалить ссылку разработчика?
Все должно работать. Как один из вариантов: ссылка будет закодированна в какой-нить base64 + пару закрывающих тегов. В общем можете удалять, только предварительно скопируйте «отработанный» исходный код темы (Ctrl+U -> Ctrl+A -> Ctrl+C). Потом сравните его с исходным кодом страницы после удаления ссылки. И проверьте все ли закрывающиеся теги на месте. Если не выйдет — кидайте мне на почту тему — я помогу.
Стас, благодарю, что нашли время помочь мне!!! Заменила файл, который вы переделали и всё заработало! больше этой ссылки нет 🙂
Всего доброго!!!
спасибо огромное , всё понятно , я очень хотел учить этот язык , но твои лекции мне очень помогли , спасибо вам