Атрибут start в HTML

Содержание
Пример 1. Нумерованный список html в виде латинских букв Пример с заглавными буквами Вот как это выглядит на странице: Пример со строчными буквами Вот как это выглядит на странице: Пример 2. Нумерованный список html в виде римских букв Пример с заглавными буквами Вот как это выглядит на странице: Пример со строчными буквами Вот как это выглядит на странице: Пример 3. Нумерованный список html разная позиция старта Пример, который показывает возможности атрибута start , который позволяет задавать стартовое значение счетчика. Вот как это выглядит на странице: Пример 4. Изменение счета в нумерованных списках html Ниже представлен пример с возможностью менять значения счетчика с помощью атрибута value при выводе новых элементов в тегах . Вот как это выглядит на странице: Пример 5. Реверсивный нумерованный список в html Ниже приведен пример реверсивного нумерованного списка (счет в обратном порядке). Атрибут start Обычно Internet Explorer начинает исполнение клипа сразу после его загрузки. Такое положение дел можно изменить при помощи атрибута start в теге . Присвоив ему значение mouseover, можно отложить воспроизведение до того момента, как мышь пользователя попадет в область вывода клипа. Другое допустимое значение атрибута file-open соответствует принятому по умолчанию исполнению сразу после загрузки. Это свойство упоминается здесь, потому что оба значения могут быть присвоены атрибуту совместно, чтобы клип был исполнен один раз при загрузке, а затем проигрывался всякий раз, когда пользователь попадает мышью в поле вывода. При комбинировании значений атрибута start они разделяются запятой без пробелов между ними и заключаются в кавычки. HTML5 Doctor Helping you implement HTML5 today The ol Element and Related Attributes: type, start, value, and reversed The element has a new attribute reversed in HTML5. In addition, a couple of related attributes purged in HTML 4 have made a return, namely start and type for , and value for . Making things more interesting, the returning attributes were removed from HTML 4 for being presentational. So why are they back? Let’s investigate… Presentational and semantic? # As we all know, presentational stuff belongs in CSS, not HTML. In HTML 4.01, the type attribute was replaced by list-style-type , and the start and value attributes were dropped, with only the potential (although fiddly) replacement in some cases of CSS generated content-based counters. So why would we want to specify “presentational” stuff like a list’s style in our HTML? The type Attribute # While an ordered list’s counter style is generally presentational, in some documents it can be a part of the document’s meaning, as the specification for the type attribute notes: The type attribute can be used to specify the kind of marker to use in the list, in the cases where that matters (e.g. because items are to be referenced by their number/letter). Examples of this include legal or technical documents, which can contain references to non-decimal list items in prose: We can specify the list’s style using the type attribute, with the following values: type attribute values and their corresponding list counter types values Equivalent list-style-type type=»1″ decimal (default style) type=»a» lower-alpha type=»A» upper-alpha type=»i» lower-roman type=»I» upper-roman
  • Примеры с нумерованными списками в html ( )
  • Пример 1. Нумерованный список html в виде латинских букв
  • Пример 2. Нумерованный список html в виде римских букв
  • Пример 3. Нумерованный список html разная позиция старта
  • Пример 4. Изменение счета в нумерованных списках html
  • Пример 5. Реверсивный нумерованный список в html
  • Атрибут start
  • HTML5 Doctor
  • Helping you implement HTML5 today
  • The ol Element and Related Attributes: type, start, value, and reversed
  • Presentational and semantic? #
  • The type Attribute #
  • The start and value Attributes #
  • Counting It Down with reverse #
  • Browser support table #
  • Conclusion #
  • Updates #
  • Category
  • Oli Studholme
  • 16 Responses on the article “The ol Element and Related Attributes: type, start, value, and reversed”
  • CSS tutorial starting with HTML + CSS
  • Contents
  • Step 1: writing the HTML
  • Step 2: adding some colors
  • Step 3: adding fonts
  • Step 4: adding a navigation bar
  • Step 5: Styling the links
  • Step 6: adding a horizontal line
  • Step 7: putting the style sheet in a separate file
  • Further reading
  • Маркированные и нумерованные списки в HTML
  • Маркированный список
  • Нумерованный список
  • Похожие статьи:
  • Видео:
  • Понравилась статья?
  • Поддержите пожалуйста мой проект!
  • заменить атрибут start на css в списках

    Столкнулся с такой вот проблемой, валидатор не пропускает следующию конструкцию

    27.09.2010, 18:14

    Свойство в CSS заменяющее атрибут cellspacing
    Для таблицы нужно применить функцию для css аналогичную html(cellspacing). Т.е. нужно, чтобы блоки.

    Почему CSS иногда приминяют через атрибут id?
    Какая разница между «#left_column» и «.left_column»? Как лучше присваивать цсс через id или сlass?

    Селекторы CSS: выбрать все

  • в которых есть ссылка, имеющая атрибут class
    Всем привет! Помогите составить селектор. Мне нужно выбрать все
  • в которых есть ссылка, имеющая.

    27.09.2010, 18:28 2

    Можно сменить доктайп на Transitional. Там есть атрибут start.

    27.09.2010, 23:02 [ТС] 3 28.09.2010, 16:12 4 03.11.2010, 15:41 [ТС] 5

    подскажите, все равно не получается . кто то говорит что можно в css задать, я прошурстил весь рунет ничего не нашел . Надо сделать

    в css я уже задал

    03.11.2010, 15:41
    03.11.2010, 15:41

    Чем и как заменить rel атрибут?
    Проблемка с валидатором, который не пропускает значение rel. Как обойти проблему? Вот код html.

    Найти в html все ссылки и заменить атрибут href
    Подскажите как можно в html найти все ссылки(только тег ) и заменить им атрибут href.

    Атрибут «background-image» в CSS
    Почему при включении в HTML каскадной таблицы стилей не работает атрибут «background-image»? Пробую.

    How can I reset a CSS-counter to the start-attribute of the given list

    I am using a self-styled, numbered list. How can I read the start-attribute and add it to the counter with CSS?

    6 Answers 6

    You may just use the attribute start as a filter :

    Demo , but this will only apply for this ol attribute. You would need some javaScript in order to retrieve attribute value to apply, generate the correct counter-reset .

    see this : DEMO to generate 100 rules from these lines :

    Then just copy paste the rules generated if Scss is not avalaible on your hosting .

    2KB zipped. But thanks for your idea — think it will help other people. – Möhre May 19 ’14 at 8:45

    I see that this is an old question, but I’m putting this here because it may come to help someone yet.

    You cannot read an attribute in css counter properties. Instead, you could use inline css with counter-reset to define the starting number for a particular list.
    (Yes, I know it is not a best practice to use inline css, but it can and should be used for edge cases like this one)

    The first item increments the reset value by 1, so besides providing the counter name, you will need to subtract the number you want the list to start at by 1:

    Demo Fiddle

    You cant use attr in counter-reset unfortunately, but you can add rules to alter the increment amount.

    Alternative 1

    If you are going to have multiple lists, a more resilient version would be:

    Alternative 2

    If the numerical prefix can be anything, the below will provision for this:

    Just providing a streamlined version of GCyrillus JS solution

    I wish CSS could read and use numeric values from HTML attributes :(

    Back on an old question i have forgotten about.

    Nowdays there is the CSS custom properties that could be used , even then , it requires to add a style attribute aside your start attribute

    Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., —main-color: black;) and are accessed using the var() function (e.g., color: var(—main-color);).

    example (if the code is generated it seems easier to set both value the same for start=x and var(—s:x) to avoid mistake):

    That’s far to late to be an answer but could be useful to anyone else from now.

    START Attribute | start

    HTML (DHTML)

    START Attribute | start Property

    Sets or retrieves the starting number for an ordered list.

    HTML

      START = iStart . >
    Scripting OL. start [ = iStart ]

    iStart Integer that specifies or receives the starting number.

    The property is read/write. The property has a default value of 1 .

    Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see About Dynamic Properties.

    HTML :: Cписки

    Нумерованные html-списки

    В HTML 5 используется три вида списков: нумерованный, маркированный и список определения.

    По умолчанию пункты списка нумеруются браузером по порядку, начиная с единицы. Если нумерацию нужно начать не с единицы, то используется атрибут start , который задает число, с которого будет начинаться нумерованный список. В качестве значения атрибут принимает целые числа. Можно также изменить порядок нумерации на обратный. Для этого служит атрибут reversed , который используется без значений. Атрибут введен в HTML 5 и работает во всех браузерах, кроме IE .

    Имеется также возможность устанавливать вид маркера нумерованного списка. Для этого используется атрибут type , который может принимать значения «A | a | I | i | 1» , которые, соответственно, означают:

    • заглавные латинские буквы,
    • строчные латинские буквы,
    • заглавные римские цифры,
    • строчные римские цифры,
    • арабские цифры.

    Поскольку все перечисленные значения, и не только, могут быть с легкостью установлены через стили CSS , использование атрибута type , по мнению автора, не целесообразно, хотя и допускается в HTML 5 .

    Использование нумерованного списка показано в примере №1.

    Пример №1. Использование элемента ‘ol’

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

    Маркированные html-списки

    Маркированный список вместо цифр и букв использует маркеры в виде кружков. Изменить внешний вид маркеров можно при помощи стилей CSS . Что касается атрибута type , то его в HTML 5 убрали. Так что, остались только универсальные атрибуты и атрибуты-события.

    Код, содержащий элемент ‘ul’ , показан в примере №2.

    Пример №2. Использование элемента ‘ul’

    Списки определений в HTML

    формируется парным тегом (от англ. definition list – ). Сам элемент ‘dl’ используется, как контейнер для пунктов списка. Каждый такой пункт, в свою очередь, состоит из элементов ‘dt’ (от англ. definition term – определяемый термин) и ‘dd’ (от англ. definition description – подробное описание), сформированных, соответственно, парными тегами и . Первый из них содержит определяемый термин, а второй – определение термина.

    Давайте для наглядности посмотрим пример №3.

    Пример №3. Использование элемента ‘dl’

    Вложенные списки

    Иногда возникает необходимость создания , которые представляют собою списки, расположенные в пунктах внешнего списка. Рассмотрим создание вложенных списков на примере №4.

    Пример №4. Использование вложенных списков

    Как видим, создавать вложенные списки совсем не трудно. Для этого нужно внимательно между открывающим тегом
    и закрывающим тегом для нумерованных и маркированных списков расположить вложенный список требуемого вида. Что касается списков определений, то вложенный список следует располагать между открывающим тегом и закрывающим тегом . Это может понадобиться, например, если нужно дать термину несколько определений.

    START Attribute | start

    HTML (DHTML)

    START Attribute | start Property

    Sets or retrieves the starting number for an ordered list.

    HTML

      START = iStart . >
    Scripting OL. start [ = iStart ]

    iStart Integer that specifies or receives the starting number.

    The property is read/write. The property has a default value of 1 .

    Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see About Dynamic Properties.

    HTML тег

    Где атрибут type=»value» может принимать следующие значения

    • A — задает маркеры в виде прописных латинских букв (A, B, C..);
    • a — задает маркеры в виде строчных латинских букв (a, b, c..);
    • I — задает маркеры в виде больших римских цифр (I, II, III, IV..);
    • i — задает маркеры в виде маленьких римских цифр (i, ii, iii, iv..);
    • 1 (по умолчанию) — задает маркеры в виде арабских цифр (1, 2, 3..);

    Атрибут start=»value» задает начальное значение (стартовое значение) отчета.

    Атрибут reversed задает обратный счет (в случае необходимости).

    Тег

      требует обязательного использования закрывающего тега

    Для формирования элементов списка используется парный тег
    . Между открывающим и закрывающим тегами располагаются отдельные слова, фразы, абзацы, изображения, куски кода и многое другое, являющееся содержимым маркированного списка.

    Внутри списка есть возможность изменять счет на свой. Для этого есть специальный атрибут value=»» у тега
    , которому присваивается какое-то числовое значение. Например

    Примеры с нумерованными списками в html (
      )

    Пример 1. Нумерованный список html в виде латинских букв

    Пример с заглавными буквами

    Вот как это выглядит на странице:

    Пример со строчными буквами

    Вот как это выглядит на странице:

    Пример 2. Нумерованный список html в виде римских букв

    Пример с заглавными буквами

    Вот как это выглядит на странице:

    Пример со строчными буквами

    Вот как это выглядит на странице:

    Пример 3. Нумерованный список html разная позиция старта

    Пример, который показывает возможности атрибута start , который позволяет задавать стартовое значение счетчика.

    Вот как это выглядит на странице:

    Пример 4. Изменение счета в нумерованных списках html

    Ниже представлен пример с возможностью менять значения счетчика с помощью атрибута value при выводе новых элементов в тегах
    .

    Вот как это выглядит на странице:

    Пример 5. Реверсивный нумерованный список в html

    Ниже приведен пример реверсивного нумерованного списка (счет в обратном порядке).

    Атрибут start

    Обычно Internet Explorer начинает исполнение клипа сразу после его загрузки. Такое положение дел можно изменить при помощи атрибута start в теге . Присвоив ему значение mouseover, можно отложить воспроизведение до того момента, как мышь пользователя попадет в область вывода клипа. Другое допустимое значение атрибута file-open соответствует принятому по умолчанию исполнению сразу после загрузки. Это свойство упоминается здесь, потому что оба значения могут быть присвоены атрибуту совместно, чтобы клип был исполнен один раз при загрузке, а затем проигрывался всякий раз, когда пользователь попадает мышью в поле вывода. При комбинировании значений атрибута start они разделяются запятой без пробелов между ними и заключаются в кавычки.

    HTML5 Doctor

    Helping you implement HTML5 today

    The

      element has a new attribute reversed in HTML5. In addition, a couple of related attributes purged in HTML 4 have made a return, namely start and type for
        , and value for . Making things more interesting, the returning attributes were removed from HTML 4 for being presentational. So why are they back? Let’s investigate…

      Presentational and semantic? #

      As we all know, presentational stuff belongs in CSS, not HTML. In HTML 4.01, the type attribute was replaced by list-style-type , and the start and value attributes were dropped, with only the potential (although fiddly) replacement in some cases of CSS generated content-based counters. So why would we want to specify “presentational” stuff like a list’s style in our HTML?

      The type Attribute #

      While an ordered list’s counter style is generally presentational, in some documents it can be a part of the document’s meaning, as the specification for the type attribute notes:

      The type attribute can be used to specify the kind of marker to use in the list, in the cases where that matters (e.g. because items are to be referenced by their number/letter).

      Examples of this include legal or technical documents, which can contain references to non-decimal list items in prose:

      We can specify the list’s style using the type attribute, with the following values:

      type attribute values and their corresponding list counter types

        values
      Equivalent list-style-type
      type=»1″ decimal (default style)
      type=»a» lower-alpha
      type=»A» upper-alpha
      type=»i» lower-roman
      type=»I» upper-roman

    Further emphasising that this is not a general alternative to list-style-type , only these five list styles are available, whereas CSS 2.1 defines eleven

      list styles. If you’re not referring to list counters in your prose, or even if you are but you’re just using the default decimal list counters, then you should use CSS over the type attribute. However, if the list counter type has a semantic meaning, HTML is the place to put it. Note that CSS list-style-type will override HTML type attribute values, so they’ll only work if you haven’t specified a list-style-type in your CSS.

    The start and value Attributes #

    The start attribute lets us set a list’s first counter. It’s handy for lists that must be split over several

      elements, by allowing us to continue the list item numbering from where the previous list left off. The related value attribute is used on an
    1. element, and lets us manually number list items. value on the first list item also overrides start . A subsequent
    2. element without value will increment the previous value by one.

    The first item in the list has the ordinal value given by the ol element’s start attribute, unless that li element has a value attribute with a value that can be successfully parsed, in which case it has the ordinal value given by that value attribute.

    Here’s an example of how you could use start or value to continue a list, which also demonstrates type :

    1. seventh item (using
    2. )
    3. eighth item
    4. ninth item
    1. seventh item (using
        )
      1. eighth item
      2. ninth item

      While both of these attributes give us more control, they unfortunately also mean adding or removing list items can make your start or value -based numbering appear broken, so in general you’ll probably want to avoid them and investigate CSS generated content counters instead. You’ll need to use generated content counters if you want to make “1.1.1”-style nested list counters too.

      Counting It Down with reverse #

      The new attribute reverse allows us to make ordered lists that count down rather than up. If you’re coding a top ten countdown or you’re a space junkie, it’s the attribute you’ve always wanted.

      The reversed attribute is a boolean attribute. If present, it indicates that the list is a descending list (. 3, 2, 1).

      By default,

        starts from the total number of list items and counts down to one, so there’s no need to also specify start unless you want something different to happen. Unfortunately, as we’ll see in the browser support table in just a moment, none of them do yet, so in the meantime you can make a reversed list by manually specifying each list item’s number with value (as you can see in the following example) or via CSS counters.
      1. three
      2. two
      3. one
      1. three
      2. two
      3. one
      1. three
      2. two
      3. one

      Browser support table #

      Browsers support the start , type , and value attributes as part of supporting legacy content (HTML 3.2 represent!), so we can use them now.

      Browser support for type , start , value , and reversed attributes

      Attribute IE Firefox Safari Chrome Opera
        ¹
      ✘ ² 5.2 ³ 18 ³
      1. We can use a JavaScript polyfill to get around the lack of native support for the reversed attribute, such as the , or Titani’s polyfills, which both use the value attribute.
      1. three (default list with reversed )
      2. two
      3. one
      1. three (list with polyfilled reversed )
      2. two
      3. one

      You can detect for browser support using Modernizr, via the Community add-on “lists-reversed”. If your polyfill was called reversed.js you could load it using the following code:

      • Extra > Modernizr.load
      • Extensibility > Modernizr.addTest
      • Community add-ons > lists-reversed

      Conclusion #

      These attributes aren’t ones you’ll use often, but sometimes they’ll be just the ticket. They’ll help you avoid adding list item numbering as part of your content (leading to double numbering if your CSS with list-style-type: none; is disabled), or ugly hacks like height:0; on a bunch of filler
      elements to get the right start value. Even better, type , start , and value are supported and ready to use now.

      As usual, just make sure you are only using them where appropriate:

      • Only use type if the list style for counters is semantic, and the document’s meaning will change if your CSS (containing the equivalent list-style-type values) didn’t load.
      • For start , consider whether your lists could be combined.
      • Avoid value if at all possible, as it’s less fragile and error-prone to let the browser number list items for you.
      • Unfortunately, the current lack of browser support means you’ll need to polyfill reversed if you want to use it for now.

      So what do you think of these new attributes? Have you needed them in the past? Have you actually used some of them back in the day to rock some old-skool HTML 3.2? Will you use them in the future? Let us know in the comments!

      Updates #

      1. 2012-02-22 I’ve added more browser support information and corrections from the comments. Thanks!

      Category

      Oli Studholme

      This article was written by Oli Studholme . He works as a developer for Information Architects, Inc. in Tokyo, Japan. He wrote “Beginning HTML5 and CSS3—The Web Evolved” (Apress) with Rich Clark, Divya Manian, and Christopher Murphy. He also writes at oli.jp and tweets as @boblet. 宜しくね!^^

      16 Responses on the article “The ol Element and Related Attributes: type, start, value, and reversed”

      Very well written article, thank you. Just wanted to point out that the reversed attribute is supported by Chrome 18 (currently in the beta channel I think).

        is also supported in the Safari 5.2 developer release :)

      Hey, nice write-up, Oli. And thanks for mentioning my polyfill (which was improved recently by Remy Sharp). As Philip mentions, the latest Chrome Canary build supports reversed . That’s the only browser that I know of that has support. There’s still an open bug report for Gecko (linked in my blog post that you cited).

      And one small correction: My last name is spelled “Lazaris”, not “Lazarus”. Common mistake, but I haven’t been resurrected yet. :)

      This will certainly come in handy. I’ve had to use specific values for each before, which isn’t too much of an issue for static lists, but it creates extra work if you were getting dynamic results from a database for example.

      Being able to break lists up is great, but I wish there was also a way to denote this relationship, aside from simply assuming that an ol with a “start” attribute continues the previous ol instance, which might not always be the case.

      @Philip & Sam — thanks for the extra info, I’ve updated the article.

      @Louis — sorry for the typo! Corrected. Thanks for the polyfill too :) Also thanks to Matthew and @lennym for the code typo heads-up. Two typos!? I must be slipping >_ Alohci says:

      @Kevin – If I recall correctly such an idea was discussed on the w3c public-html mailing list (and probably elsewhere) and while it seems a good idea it raises all kinds of practical problems.

      For example, what should happen if list A says it follows from list B, and list B says it follows from list A? What happens if list B and list C both say they follow from list A? Or what happens if list C says it follows from list B which says it follows list A, and then list B is deleted from the DOM in script?

      No-one seemed to consider the use case valuable enough to want to identify all the possible issues that could arise, and define what should happen in each and every case, and then be in a position to get the browser manufacturers to sign up to implement it consistently.

      Very intersting !
      Juste a precision : when you say that “start”, “value” and “type” are supported by IE, you mean which version ? (I don’t find it on caniuse website).
      Cheers

      It’s a new knowledge about ol element using type, start, value, reserved . Nice post… :D

      Nice write-up. I think you cover pretty much everything there is to know.
      Thanks!

      @Pascal — I don’t know, but I strongly suspect “since forever”, as these are HTML 3.2 attributes. I just checked IE6 and they work there.

      I’m really looking forward to more support for the reversed attribute!

      This really creeps me out:

      My browser answers ‘3’, what does yours come up with?!

      I would say that it should have been either ‘4’ (skip the ‘3’ that is already there) or ‘1’ (implied reverse attribute). What do you think?

      @ Oli: IE6 hardly seems a standards conformance checker for any standard. ;-)

      @Ralf MC — Three comes after two, so that’s what I’d expect (unless the list was reversed). Unique numbering doesn’t seem like a good goal if you’re manually numbering some items using value . Both of your suggestions would make some custom lists impossible — people want to do all kinds of crazy stuff — plus be really hard to spec and implement.

      IE6 was used to check browser support (not standards conformance) as it was in the ancient past of 11 years ago ;-)

      HELP can any one help me. Is there a way to use CSS number style to format the following style.
      1
      1.1
      1.2
      2
      2.1
      2.2
      etc?

      @Janet: Have a look at “CSS counters”. You can learn more about this topic, for instance, at Mozilla.

      CSS tutorial
      starting with HTML + CSS

      Contents

      This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before.

      It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, you can read any of a number of other tutorials to add more features to the HTML and CSS files. Or you can switch to using a dedicated HTML or CSS editor, that helps you set up complex sites.

      At the end of the tutorial, you will have made an HTML file that looks like this:

      The resulting HTML page, with colors and layout, all done with CSS.

      Note that I don’t claim that this is beautiful ☺

      Sections that look like this are optional. They contain some extra explanation of the HTML and CSS codes in the example. The “alert!” sign at the start indicates that this is more advanced material than the rest of the text.

      Step 1: writing the HTML

      For this tutorial, I suggest you use only the very simplest of tools. E.g., Notepad (under Windows), TextEdit (on the Mac) or KEdit (under KDE) will do fine. Once you understand the principles, you may want to switch to more advanced tools, or even to commercial programs, such as Style Master, Dreamweaver or GoLive. But for your very first CSS style sheet, it is good not to be distracted by too many advanced features.

      Don’t use a wordprocessor, such as Microsoft Word or OpenOffice. They typically make files that a Web browser cannot read. For HTML and CSS, we want simple, plain text files.

      Step 1 is to open your text editor (Notepad, TextEdit, KEdit, or whatever is your favorite), start with an empty window and type the following:

      In fact, you don’t have to type it: you can copy and paste it from this Web page into the editor.

      (If you are using TextEdit on the Mac, don’t forget to tell TextEdit that the text is really plain text, by going to the Format menu and selecting “Make plain text”.)

      The first line of the HTML file above tells the browser which type of HTML this is (DOCTYPE means DOCument TYPE). In this case, it is HTML version 4.01.

      Words within are called tags and, as you can see, the document is contained within the and tags. Between and there is room for various kinds of information that is not shown on screen. So far it contains the title of the document, but later we will add the CSS style sheet there, too.

      The is where the actual text of the document goes. In principle, everything in there will be displayed, except for the the text inside , which serves as a comment to ourselves. The browser will ignore it.

      Of the tags in the example,

        introduces an “Unordered List”, i.e., a list in which the items are not numbered. The
        is the start of a “List Item.” The

      The KEdit editor showing the HTML source.

      If you want to know what the names in mean, one good place to start is Getting started with HTML. But just a few words about the structure of our example HTML page.

      • The “ul” is a list with one hyperlink per item. This will serve as our “site navigation menu,” linking to the other pages of our (hypothetical) Web site. Presumably, all pages on our site have a similar menu.
      • The “h1” and “p” elements form the unique content of this page, while the signature at the bottom (“address”) will again be similar on all pages of the site.

      Note that I didn’t close the “li” and “p” elements. In HTML (but not in XHTML), it is allowed to omit the and

      tags, which I did here, to make the text a little easier to read. But you may add them, if you prefer.

      Let’s assume that this is going to be one page of a Web site with several similar pages. As is common for current Web pages, this one has a menu that links to other pages on the hypothetical site, some unique content and a signature.

      Now select “Save As…” from the File menu, navigate to a directory/folder where you want to put it (the Desktop is fine) and save the file as “mypage.html”. Don’t close the editor yet, we will need it again.

      (If you are using TextEdit on Mac OS X before version 10.4, you will see an option Don’t append the .txt extension in the Save as dialog. Select that option, because the name “mypage.html” already includes an extension. Newer versions of TextEdit will notice the .html extension automatically.)

      Next, open the file in a browser. You can do that as follows: find the file with your file manager (Windows Explorer, Finder or Konqueror) and click or double click the “mypage.html” file. It should open in your default Web browser. (If it does not, open your browser and drag the file to it.)

      As you can see, the page looks rather boring…

      Step 2: adding some colors

      You probably see some black text on a white background, but it depends on how the browser is configured. So one easy thing we can do to make the page more stylish is to add some colors. (Leave the browser open, we will use it again later.)

      We will start with a style sheet embedded inside the HTML file. Later, we will put the HTML and the CSS in separate files. Separate files is good, since it makes it easier to use the same style sheet for multiple HTML files: you only have to write the style sheet once. But for this step, we just keep everything in one file.

      We need to add a [etc.]

      The first line says that this is a style sheet and that it is written in CSS (“text/css”). The second line says that we add style to the “body” element. The third line sets the color of the text to purple and the next line sets the background to a sort of greenish yellow.

      Style sheets in CSS are made up of rules. Each rule has three parts:

      1. the selector (in the example: “body”), which tells the browser which part of the document is affected by the rule;
      2. the property (in the example, ‘color’ and ‘background-color’ are both properties), which specifies what aspect of the layout is being set;
      3. and the value (‘purple’ and ‘#d8da3d’), which gives the value for the style property.

      The example shows that rules can be combined. We have set two properties, so we could have made two separate rules:

      but since both rules affect the body, we only wrote “body” once and put the properties and values together. For more about selectors, see chapter 2 of Lie & Bos .

      The background of the body element will also be the background of the whole document. We haven’t given any of the other elements (p, li, address…) any explicit background, so by default they will have none (or: will be transparent). The ‘color’ property sets the color of the text for the body element, but all other elements inside the body inherit that color, unless explicitly overridden. (We will add some other colors later.)

      Now save this file (use “Save” from the File menu) and go back to the browser window. If you press the “Reload” button, the display should change from the “boring” page to a colored (but still rather boring) page. Apart from the list of links at the top, the text should now be purple against a greenish yellow background.

      How one browser shows the page now that some colors have been added.

      Colors can be specified in CSS in several ways. This example shows two of them: by name (“purple”) and by hexadecimal code (“#d8da3d”). There are about 140 color names and the hexadecimal codes allow for over 16 million colors. Adding a touch of style explains more about these codes.

      Step 3: adding fonts

      Another thing that is easy to do is to make some distinction in the fonts for the various elements of the page. So let’s set the text in the “Georgia” font, except for the h1 heading, which we’ll give “Helvetica.”

      On the Web, you can never be sure what fonts your readers have on their computers, so we add some alternatives as well: if Georgia is not available, Times New Roman or Times are also fine, and if all else fails, the browser may use any other font with serifs. If Helvetica is absent, Geneva, Arial and SunSans-Regular are quite similar in shape, and if none of these work, the browser can choose any other font that is serif-less.

      In the text editor add the following lines (lines 7-8 and 11-13) :

      If you save the file again and press “Reload” in the browser, there should now be different fonts for the heading and the other text.

      Now the main text has a different font from the heading.

      Step 4: adding a navigation bar

      The list at the top of the HTML page is meant to become a navigation menu. Many Web sites have some sort of menu along the top or on the side of the page and this page should have one as well. We will put it on the left side, because that is a little more interesting than at the top…

      The menu is already in the HTML page. It is the

        list at the top. The links in it don’t work, since our “Web site” so far consists of only one page, but that doesn’t matter now. On a real Web site, there should not be any broken links, of course.

      So we need to move the list to the left and move the rest of the text a little to the right, to make room for it. The CSS properties we use for that are ‘padding-left’ (to move the body text) and ‘position’, ‘left’ and ‘top’ (to move the menu).

      There are other ways to do it. If you look for “column” or “layout” on the Learning CSS page, you will find several ready-to-run templates. But this one is OK for our purposes.

      In the editor window, add the following lines to the HTML file (lines 7 and 12-16) :

      If you save the file again and reload it in the browser, you should now have the list of links to the left of the main text. That already looks much more interesting, doesn’t it?

      The main text has been moved over to the right and the list of links is now to the left of it, instead of above.

      The ‘position: absolute’ says that the ul element is positioned independently of any text that comes before or after it in the document and the ‘left’ and ‘top’ indicate what that position is. In this case, 2em from the top and 1em from the left side of the window.

      ‘2em’ means 2 times the size of the current font. E.g., if the menu is displayed with a font of 12 points, then ‘2em’ is 24 points. The ’em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader happens to use. Most browsers have a menu for increasing or decreasing the font size: you can try it and see that the menu increases in size as the font increases, which would not have been the case, if we had used a size in pixels instead.

      The navigation menu still looks like a list, instead of a menu. Let’s add some style to it. We’ll remove the list bullet and move the items to the left, to where the bullet was. We’ll also give each item its own white background and a black square. (Why? No particular reason, just because we can.)

      We also haven’t sa > (lines 13-15 and 23-33) :

      Traditionally, browsers show hyperlinks with underlines and with colors. Usually, the colors are similar to what we specificed here: blue for links to pages that you haven’t visited yet (or visited a long time ago), purple for pages that you have already seen.

      Step 6: adding a horizontal line

      The final addition to the style sheet is a horizontal rule to separate the text from the signature at the bottom. We will use ‘border-top’ to add a dotted line above the element (lines 34-37) :

      Now our style is complete. Next, let’s look at how we can put the style sheet in a separate file, so that other pages can share the same style.

      Step 7: putting the style sheet in a separate file

      We now have an HTML file with an embedded style sheet. But if our site grows we probably want many pages to share the same style. There is a better method than copying the style sheet into every page: if we put the style sheet in a separate file, all pages can point to it.

      To make a style sheet file, we need to create another empty text file. You can choose “New” from the File menu in the editor, to create an empty window. (If you are using TextEdit, don’t forget to make it plain text again, using the Format menu.)

      Then cut and paste everything that is inside the themselves. They belong to HTML, not to CSS. In the new editor window, you should now have the complete style sheet:

      Choose “Save As…” from the File menu, make sure that you are in the same directory/folder as the mypage.html file, and save the style sheet as “mystyle.css”.

      Now go back to the window with the HTML code. Remove everything from the tag and replace it with a
      element, as follows (line 5) :

      This will tell the browser that the style sheet is found in the file called “mystyle.css” and since no directory is mentioned, the browser will look in the same directory where it found the HTML file.

      If you save the HTML file and reload it in the browser, you should see no change: the page is still styled the same way, but now the style comes from an external file.

      The final result

      The next step is to put both files, mypage.html and mystyle.css on your Web site. (Well, you might want to change them a bit first…) But how to do that depends on your Internet provider.

      Further reading

      For an introduction to CSS, see chapter 2 of Lie & Bos , or Dave Raggett’s intro to CSS .

      Other information, including more tutorials, can be found on the learning CSS page.

      Маркированные и нумерованные списки в HTML

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

      Существует два вида списков это маркированный список и нумерованный список. Разница между ними в том, что у первого типа элементы списка маркируются фигурами: черные кружки, квадраты и окружности. А у второго типа элементы списка маркируются цифрами и буквами.

      А также первый тип создается тегами а второй тип тегами . Элементы списков создаются с помощью парного тега
      .

      Далее познакомимся с каждым типом по подробнее.

      Маркированный список

      Создается тегами . Через атрибут type тега ul, мы можем изменить вид маркера на квадрат (squere) или окружность (circle). По умолчанию этот атрибут имеет значение disc.

      Ниже представляю Вам наглядную таблицу из двух колонок. В первой колонке находится код маркированного списка с разными значениями атрибута type. А во второй колонке отображается вид этого списка.

      Код маркированного списка Вид маркированного списка
      • Пункт 1
      • Пункт 2
      • Пункт 3
      • Пункт 1
      • Пункт 2
      • Пункт 3
      • Пункт 1
      • Пункт 2
      • Пункт 3

      Нумерованный список

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

      Код нумерованного списка Вид нумерованного списка
      1. Пункт 1
      2. Пункт 2
      3. Пункт 3
      1. Пункт 1
      2. Пункт 2
      3. Пункт 3
      1. Пункт 1
      2. Пункт 2
      3. Пункт 3
      1. Пункт 1
      2. Пункт 2
      3. Пункт 3
      1. Пункт 1
      2. Пункт 2
      3. Пункт 3

      Если атрибуту type присвоить другое значение, кроме тех, которые посмотрели выше, то браузер не поймёт данное значение и присвоить ему значение по умолчанию, то есть 1.

      Также для данного вида списка существует еще 2 атрибута: reversed – Делает нумерацию по убыванию, то есть выведет 3,2,1.

      Вид нумерованного списка с атрибутом reserved.

      И атрибут start, который позволяет указать с какого числа начать нумерацию.

      Вид нумерованного списка с атрибутом start.

      Вот и все что я хотел Вам сказать о маркированном списке и нумерованном списке. Вы должны знать их наизусть, так как это важные элементы.

      Похожие статьи:

      Видео:

      Понравилась статья?

      Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

      Поделиться с друзьями:

      Подписаться на новые статьи:

      Поддержите пожалуйста мой проект!

      Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

      Автор статьи: Мунтян Сергей

      Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО.

      Дата добавления: 2015-12-09 08:03:50

      Илон Маск рекомендует:  Faq работа с word через ole
      Понравилась статья? Поделиться с друзьями:
      Кодинг, CSS и SQL