Справочник по html : алфавитный указатель атрибутов : атрибуты html на букву t

[chapter 5] 5.3 document colors and background images

type (Для )

— Задает тип элемента управления: кнопка, флажок, поле ввода или что-то другое.

<INPUT type=»button|checkbox|file|hidden|image|password|radio|reset|submit|text»>

Для этого атрибута доступны следующие значения:

  • button — обычная командная кнопка;
  • checkbox — флажок;
  • file — поле ввода имени файла и кнопка открыть. Позволяет отправить файл на Web-сервер;
  • hidden — «скрытое» поле. Оно никак не отображается в форме, но его значение посылается вместе с остальными данными. Может использоваться, например, для уникальной идентификации Web-страницы;
  • image — изображение. Аналогично по действию кнопке submit;
  • password — текстовое поле для ввода паролей. Вводимый текст отображается в виде звездочек;
  • radio — радиокнопка (кнопка-переключатель);
  • reset — командная кнопка, аналогичная button, при нажатии на которую вся форма очищается. Называется также кнопкой reset;
  • submit — командная кнопка, аналогичная button, при нажатии на которую происходит отправка серверу данных, введенных в форму. Называется также кнопкой submit;
  • text — поле ввода.

Поддерживается IE начиная с 3.02

Поддерживается NN начиная с 2.0

Step into Style

During the time you’ve spent learning HTML so far, you may have heard mention of CSS, or Cascading StyleSheets, and wondered what they were. I’m going to explain the whole thing now, and hope that you’re ready for it. I do have an entire stylesheets section, and a dedicated introduction to CSS here, but think of this as an induction to the introduction.

There are many tags in HTML that exist purely to create a certain look on your pages. There are also techniques, like using transparent images to space your page out. This was all well and good a few years ago (and is why you’ll see practices like these mentioned in older HTML tutorials…), but they are not at all suitable for the web that exists today. These techniques create accessibility problems, add to the bulk of your HTML files, and are generally awkward to work with. Nowadays, we have a better method of styling our pages.

Style Sheets are the best way to define how your page looks. Everyone should use them. You create a simple text file, styles.css for example, with a number of rules defining the colours and spacing of certain HTML elements. Let’s say, in your stylesheet, you command all of your headings () to be red. You then put a line of code into your HTML that shows your web browser where its CSS file is. When it loads up the page, it looks for the CSS file, reads it and sees that all elements should be red and then displays red headings, without any extra code.

In this way you can apply all of the presentational stuff through simple CSS, and keep your HTML relatively clean and simple. So, open a new document and add this to it:

body {margin: 0px; }h1 {color: red; }

That’s all that needs to be in the file. Save it as styles.css (or whatever). Now add this line into the of all your pages:

This tells your browser where to look for the CSS file. These two lines of code will make all the headings on your site red, and will set the page margins to zero pixels without all of that laborious //etc. attribute tomfoolery. It’s actually probably best if you take out those attributes.

Already you should be seeing some of the benefits of using CSS — that one line will take care of the margins on every one of your pages that use this stylesheet. Once you have a CSS file, you can continue adding new rules to it to pretty up your pages. There is some amazing power in stylesheets, and you have loads of options for designing the look of your site. Head on over to the CSS section for more.

A word on colour schemes

Avoid a shocking colour scheme at all costs. It is no coincidence that the best sites have subdued, light colours, and the worst sites have brash, painful ones. Luminous yellows, reds, pinks and greens are just a big no-no. The more easy it is to read, the more professional it will look. Keep the contrast high between s and colours, so no text disappears because it is too close in shade.

If you think people might want to print parts of your site out, don’t use a black background and white text. No one will print it if it takes up all their ink. It is also not as easy to read as the normal black on white.

The colour-scheme you use and the subject of your site will often have a lot in common. They will also create a different mood. Visit sites like your own and see which colours they use, and criticise whether they work or not. A site about say, the game Quake, can get away with dark, foreboding colours because they fit in well with the atmosphere of the subject. However, if you were designing a tourism site the same colours couldn’t be used because you want to generate a happy, welcoming mood. Think about your audience.

Pick your background well

If you do use a (remember, you don’t have to), pick out the main colour in the image. Then set that colour as your . The reason for this is that some people don’t have images turned on, and won’t see your image. Therefore, the colour has to be close to the images colour so the text remains readable.

Try and avoid using those God-awful free background tiles you can find on the net, or those painfully dull ones that come with Microsoft Office programs. Your site will look horribly cheap. Clever use of a simple background tile can work wonders on the visual impact of your site. Look at our own simplistic bubbles to see what I mean.

Keep Learning //   Basic Web Design → Go! Go!

Other My First Site Articles //   
My First Page ·
Basic Formatting ·
Basic Links ·
Basic Images ·
<body> Attributes ·
Basic Web Design ·
HTML Tag Reference ·
Uploading your Site ·

What’s Related //   
CSS and Spacing ·
CSS and Backgrounds  

Homepage · Full Index · Section Index

tabindex

— Задает номер в последовательности обхода элементов управления при нажатии клавиши <TAB>.

<TEXTAREA tabindex=»{Порядковый номер в последовательности}»>

Значение по умолчанию 0.

Если значения tabindex одинаковы или вообще не заданы, обход выполняется в порядке появления элементов управления в исходном тексте Web-страницы. Если задано отрицательное значение, элемент управления исключается из последовательности.

Поддерживается IE начиная с 4.0 для элементов управления и начиная с 5.0 для остальных элементов страницы. Отрицательные значения атрибута поддерживаются начиная с 5.01

The tag

Now that you have the gist of using attributes in tags, this should make perfect sense. Remember the tag from the first page, which everything visible on your page goes into? That is the tag we’ll be adding to in this, as it’s been left untouched up until now. There are 7 attributes to be added here, and they all change how your page looks.

bgcolor

This is the colour of the BG, or BackGround, of your page. You need to put the colour in as a HEX code, like the rest of these colours. What are HEX codes? Glad you asked. Because it means you have to read ! If you want to see a list of HEX codes for 216 different colours, look at this chart. The code is:

Note that, even though the default BG is white, you should still code in , because older browser’s default BG is a nasty grey.

text

This will change the colour of all the text on your whole page, unless you have changed the colour manually (find out how in the text section). Your best bet here is to leave it black, because that’s the easiest to read. Code!

Instead of the normal blue, you can now change the colour of all your links to something a bit more classy.

vlink

Links change colour once you have clicked on them, from blue to purple. The V stands for ‘Visited’. You can change this too, but make sure it is visibly different to the colour, otherwise people will get confused.

alink

When you click on a link, it changes colour momentarily, to show you that you’ve clicked it I guess. If you click the ‘Back’ button, it is highlighted as being Active so you don’t click through on it again. The default is usually red. Make sure you highlight it right; it’s a nice feature.

background

If you want to put an image as your background, use this attribute, and set the value to the same as you would for an image (don’t know how? Read the preceding lesson on images). You can also link to an image from another site, by giving the entire URL.

Whatever image you choose to use, it will be tiled across your page, filling it up. That means it will repeat itself across your page, so choose one that doesn’t look too obvious.

If you want your background to be set in place and not scroll, add the attribute into the . This will leave the image as a watermark.

margins

There are two sets of margins on a page, the ones at the sides and the ones at the top and bottom. The two main browsers use different attributes to put in these margins, so when you change one, change the other as well.

  • For Internet Explorer: and
  • For Netscape: and

Despite this, the units of measurement are the same — pixels, so to make your margins the same in both browsers just set them both to the same value.

Show me the code
So now, a complete tag would look something like this:

Понравилась статья? Поделиться с друзьями:
Setup Pro
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: