HTML с нуля. Лекция 4


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

Списки

Думаю Вам не нужно объяснять что такое список, я прав? Замечательно! Перейдём тогда сразу к делу. Тег <ul> устанавливает начало маркированного списка, и как Вы, наверное, уже догадались, тег </ul> — его конец. Что значит маркированный? Это значит что перед каждым элементом списка располагается маркер, он же буллит, — типографский знак, используемый для выделения элементов списка. Каждый элемент такого списка заключен между тегами <li> и </li>. У данного тега есть один собственный атрибут type, который может принимать 3 значения square (квадрат), disc (диск), circle (кольцо). По умолчанию для элемент списка устанавливается тип disc. Применение атрибута type для тега <li> позволяет установить тип для каждого из элементов списка в отдельности, для того, чтобы применить тип для всего списка, атрибут type нужно использовать для тега <ul>.
Рассмотрим код простого маркированного списка:

<ul type="circle">
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
</ul>

Который выглядит следующим образом:

  • Первый элемент списка
  • Второй элемент списка

Также в HTML существует такое понятие, как нумерованный список, который устанавливается с помощью тега <ol>. У данного тега есть три собственных атрибута:

  • type — Устанавливает вид маркера списка.
  • reversed — Нумерация в списке становится в обратном порядке (3,2,1).
  • start — Число, с которого будет начинаться нумерованный список.

Атрибут type для тега <ol> может принимать следующие значения: A (заглавные латинские буквы), a (строчные латинские буквы), I (заглавные римские цифры), i (строчные римские цифры), 1 (арабские цифры). По умолчанию значение равно 1, т.е. арабские цифры. Элемент нумерованного списка располагается между тегами <li> и </li>, как и в случае с маркированным списком.
Код простого нумерованного списка:

<ol type="a">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>
  1. Первый
  2. Второй
  3. Третий

На самом деле, списки. Применяются не только при выводе списка, как может показаться на первый взгляд. Зачастую меню сайта также выводят при помощи списка, при выводе рубрик на блогах также используют списки. Список может отображаться как вертикально, так и горизонтально. Но во втором случае силой одного HTML не обойтись. Список может быть как с маркером, так и без. Для этого на помощь приходит CSS (Cascading Style Sheets — каскадные таблицы стилей). Поэтому, дорогие читатели, пришло время, когда мы с Вами должны окунуться в изучение спецификаций CSS.
Ну что же, поздравляю! Теперь Вы знаете, что такое списки и как их применять на деле.

А теперь я постараюсь убедить Вас, в том, что CSS крайне необходим. Для этого нужно познакомится с неприметным на первый взгляд тегом <div>, который является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Во второй лекции, я говорил Вам про то, что можно верстать сайт таблицами, так вот, можно, но не нужно! Дело в том, что среди верстальщиков показателем мастерства является блочная вёрстка. Вы можете встретить высказывания «да таблицами я хоть черта сверстаю», да, это так. Но это говорят в основном те, кто не смог освоить CSS, т.к. вид блока <div> управляется при помощи стилей. Но Вы ведь не такие, Вы лучше, и я это знаю!

«А как же таблицы?» — спросите Вы. Таблицы таблицами, они по прежнему имееют место в вёрстке, ведь согласитесь, использовать блоки для вывода таблицы успеваемости студентов, нелогично. Используя CSS и блочную вёрстку, Вы уменьшите вес страницы сайта, тем самым увеличив скорость загрузки Вашего сайта.
И так если Вы ещё не решились изучать CSS — вот мой последний аргумент: предположим, что сайт — это квартира, HTML — это стены, благодаря которым у Вас получаются комнаты, а CSS — это двери, обои, краска, картины, мебель, ковры — т.е. то, что придаёт Вашей квартире уникальности! Хотите чтобы Ваш сайт запомнился Вашим пользователям — сделайте его уникальным, и в этом Вам поможет CSS.

Подпишитесь на RSS ленту блога, чтобы не пропустить новый набор лекций CSS с нуля. Если у Вас есть какие-то вопросы, задавайте их в комментариях, с удовольствием отвечу, а ответы на вопросы о CSS включу в первую лекцию CSS с нуля.

Вы только начинали работать на компьютере? Возникает много вопросов? Тогда советую посетить блог Pk-prosto.ru, который поможет ускорить Ваше обучение компьютеру. Вы быстро научитесь работать с WebMoney, самостоятельно создавать загрузочный диск и многое другое.

Stas Kuryan

Web developer. Перфекционист в написании кода.

29 комментариев

    • Stafox        Автор

      Пока не планируется. После этих 4х лекций, Вы уже можете самостоятельно начинать делать «первые шаги». Т.к. считается, что Вы уже почти всё знаете, за исключением некоторых нюансов, которые, возможно, Вам даже и не пригодятся.

      Далее планируется курс CSS с нуля, в котором будут также рассматриваться нюансы HTML+CSS.

      • caxa     

        Может это и нк по теме сайта, но знаете ли вы язык C++ и планируете ли делать лекции , я понимаю что этот язык раз в 10 сложней HTML, но я ни как ни могу в нём разобраться от а до я, хотя основы уже выучил:)

        • Stafox        Автор

          C++ знаю, правда основы и азы (голое ООП, скажем так), максимум что я писал, это программа для работы с сетевыми интерфейсами IPv4, да и то, потом я переписал ее на C#. Дело в том, что этот язык мною был затронут на первых курсах университета, ну и еще при знакомстве с Qt SDK. Лекции по нему делать не планировал и скорее всего не буду, т.к. я специализируюсь на веб разработках. Мне гораздо легче будет сделать курс по PHP, чем по С++. Могу дать совет: начните с простого С, далее начинайте использовать и заменять некоторые вещи из С++. Т.к ознакомившись со структурами, проще будет вникнуть в классы. Взгляните на книги от Страуструпа.

          Кстати, если вдруг не будете понимать всей надобности шаблонов, делегатов, интерфейсов — не отчаивайтесь, сухая теория она такая 🙂 Лучше попросите на форуме задачу, для решения которой необходимо будет, к примеру, использовать делегаты. Тогда Вы сможете действительно понять что это, и для чего.

  1. Inna     

    спасибо большое за лекций 🙂
    а будут лекций по Java Script?

    • Stafox        Автор

      Впринципе возможно всё. Но в ближайшем будущем я планировал начать рассказ про CSS. И так уже немного не успеваю, всё обещаю и обещаю, постараюсь с выходных начать. Ну а вообще, вот вам ссылочка на довольно-таки хороший учебник по JS: http://learn.javascript.ru/

  2. Max     

    Лекций про особенности HTML5 хорошо бы, а лучше про дебаг cross-platfrom’еммых аппов. Если сможешь. : )

    • Stafox        Автор

      Наверное не могу:) Загружен проектами сейчас, как освобожусь чуток — нужно выполнять обещания и начать разжёвывать CSS для новичков.

  3. Максим     

    а когда будут леции по CSS??????????

    • Stafox        Автор

      До конца недели, ну или на крайний случай в субботу.

  4. Александр     

    Так познавательно и доступно! Спасибо, огромное!

    • Stafox        Автор

      Пожалуйста, обращайтесь, если понадобится помощь.

  5. kirpiland     

    меня интересовал такой эффект , когда фон зафиксирован, а текст прокручивается . И здесь такая удача, нахожу ответ на мой внутренний вопрос. здорово! спасибо.

    • Stafox        Автор

      Здесь, это где? В этой статье об этом ни слова…

    • Stafox        Автор

      Это основанный на XML язык разметки гипертекста. Очень похож на HTML, однако имеет ряд своих правил и особенностей.

  6. Bish     

    очень интересно и понятно,особенно для начинающих. но я не нашла интересующую меня деталь.
    хотелось бы узнать,как написать код,где необходимо указать дату в виде «с» дата «по» дата? (период) заранее спасибо!

    • Stafox        Автор

      Для этого используются стандартные input’ы (type=»text»). Можно использовать type=»date», но, к сожалению, не все браузеры его поддерживают. Можно использовать jQuery UI: datepicker. Можно разработать свой элемент (хотя, я думаю, что и готовых решений будет предостаточно).

  7. Ирина     

    Спасибо большое за этот курс!
    Мне очень пригодилось!
    Я новичок, но мне всё было понятно!

    • Stafox        Автор

      Спасибо за отзыв. Рад, что материал оказался полезным.

    • Stafox        Автор

      Вы имеете ввиду JavaScript? Если да, то в ближайшее время нет, т.к. я на 2.5 месяца в армию, а потом нужно реализовывать незаконченные проекты. Попробуйте http://learn.javascript.ru — тут все доходчиво написано. Если имели ввиду Java SE, Java EE, то нет — это не мой профиль.

  8. Роман     

    А где пятый урок? Мне очень нужно продолжение! Вы пишите очень разборчиво и понятливо в отличие от других.

    • Stafox        Автор

      5ый я решил не делать, т.к. 4-х вполне достаточно, чтобы понять HTML. Есть начатая серия лекций по CSS, но из-за недостатка времени, эта серия статей не закончена.

  9. Катерина     

    Стас, подскажите, в подвале ссылка на разработчика темы, а в коде предупреждение, что если удалить или отредактировать ссылку на разработчика то тема работать не будет… хотела попробовать удалить, но страшно 🙂
    подскажите, можно как то обойти и удалить ссылку разработчика?

    • Stafox        Автор

      Все должно работать. Как один из вариантов: ссылка будет закодированна в какой-нить base64 + пару закрывающих тегов. В общем можете удалять, только предварительно скопируйте «отработанный» исходный код темы (Ctrl+U -> Ctrl+A -> Ctrl+C). Потом сравните его с исходным кодом страницы после удаления ссылки. И проверьте все ли закрывающиеся теги на месте. Если не выйдет — кидайте мне на почту тему — я помогу.

      • Катерина     

        Стас, благодарю, что нашли время помочь мне!!! Заменила файл, который вы переделали и всё заработало! больше этой ссылки нет 🙂
        Всего доброго!!!

  10. mrx     

    спасибо огромное , всё понятно , я очень хотел учить этот язык , но твои лекции мне очень помогли , спасибо вам

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *