html diffrent type of lists , colors and attributes

HTML Lists

There are 3 different types of lists. A <ol> tag starts an ordered list, <ul> for unordered lists, and <dl> for definition lists. Use the type and start attributes to fine tune your lists accordingly.



  • <ul> - unordered list; bullets
  • <ol> - ordered list; numbers
  • <dl> - definition list; dictionary

HTML Ordered Lists

Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening <ol> and closing </ol> tags to create list items. Ordered simply means numbered, as the list below demonstrates.


HTML Code:

<h4 align="center">Goals</h4>
<ol>
<li>Find a Job</li>
<li>Get Money</li>
<li>Move Out</li>

</ol>

Numbered list:

Goals

  1. Find a Job
  2. Get Money
  3. Move Out

Start your ordered list on any number besides 1 using the start attribute.


HTML Code:

<h4 align="center">Goals</h4>
<ol start="4" >
<li>Buy Food</li>

<li>Enroll in College</li>
<li>Get a Degree</li>
</ol>

Numbered List Start:

Goals

  1. Buy Food
  2. Enroll in College
  3. Get a Degree

Nothing fancy here, start simply defines which number to begin numbering with.

HTML Ordered Lists Continued

There are 4 other types of ordered lists. Instead of generic numbers you can replace them with Roman numberals or letters, both capital and lower-case. Use the type attribute to change the numbering.


HTML Code:

<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

Ordered List Types:

Lower-Case LettersUpper-Case LettersLower-Case NumeralsUpper-Case Numerals
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out

HTML Unordered Lists


Create a bulleted list with the <ul> tag. The bullet itself comes in three flavors: squares, discs, and circles. The default bullet displayed by most web browsers is the traditional full disc.


HTML Code:

<h4 align="center">Shopping List</h4>
<ul>
<li>Milk</li>

<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li>
</ul>

Unordered Lists:


Shopping List

  • Milk
  • Toilet Paper
  • Cereal
  • Bread

Here's a look at the other flavors of unordered lists may look like.

HTML Code:

<ul type="square">

<ul type="disc">
<ul type="circle">

Unordered List Types:

type="square"type="disc"type="circle"
  • Milk
  • Toilet Paper
  • Cereal
  • Bread
  • Milk
  • Toilet Paper
  • Cereal
  • Bread
  • Milk
  • Toilet Paper
  • Cereal
  • Bread

HTML Definition Term Lists

Make definition lists as seen in dictionaries using the <dl> tag.
These lists displace the term word just above the definition itself for a unique look. It's wise to bold
the terms to displace them further.

  • <dl> - defines the start of the list
  • <dt> - definition term
  • <dd> - defining definition


HTML Code:

<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>

<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dt>

HTML Code:

Fromage


     French word for cheese.

Voiture

     French word for car.


Bold, Italic and More

HTML Code:

<p>An example of <b>Bold Text</b></p>

<p>An example of <em>Emphasized Text</em></p>
<p>An example of <strong>Strong Text</strong></p>
<p>An example of <i>Italic Text</i></p>

<p>An example of <sup>superscripted Text</sup></p>
<p>An example of <sub>subscripted Text</sub></p>
<p>An example of <del>struckthrough Text</del></p>

<p>An example of <code>Computer Code Text</code></p>

HTML Formatting:

An example of Bold Text

An example of Emphasized Text

An example of Strong Text


An example of Italic Text

An example of superscripted Text

An example of subscripted Text

An example of struckthrough Text

An example of Computer Code Text

All of these tags add a pinch of flavor to paragraph elements. They can be used with any text type element.


HTML - Formatting Tag Usage

These tags should be used sparingly. And what we mean by that is that you should only use them to bold or italicize one or two words in your elements at a time. If you wish to bold an entire paragraph a better solution would involve Cascading Style Sheets, and you should consult how to do that in our CSS Tutorial. Ultimately the decision is yours, the web developer. Being a voice of experience, keep the use of these tags quick and sparse.


HTML Color Coding System - Color Names

There are 3 different methods to set color. The simplest being the Generic terms of colors. Examples: black, white, red, green, and blue. Generic colors are preset HTML coded colors where the value is simply the name of each color. Here is a sample of the most widely supported colors and their respective name values.


The 16 Basic Colors:

Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal

HTML Coloring System - RGB Values

We do not recommend that you use RGB for safe web design because non-IE browsers do not support HTML RGB. However, if you plan on learning CSS then you should glance over this topic.

RGB stands for Red, Green, Blue. Each can have a value from 0 (none of that color) to 255 (fully that color). The format for RGB is - rgb(RED, GREEN, BLUE), just like the name implies. Below is an example of RGB in use, but if you are not using a browser that supports it, do not worry, that is just one of the problems with HTML RGB.


Red, Green, and Blue Values:

bgcolor="rgb(255,255,255)"White
bgcolor="rgb(255,0,0)"Red
bgcolor="rgb(0,255,0)"Green
bgcolor="rgb(0,0,255)"Blue

HTML Coloring System - Hexadecimal

The hexadecimal system is complex and difficult to understand at first. Rest assured that the system becomes much, MUCH easier with practice and as a blossoming web developer, it is critical to understand hexadecimals to be capable of using them in your own web publications. They are far more reliable and widely compatible among web browsers and are the standard for colors on the internet.

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).


Here's a hexadecimal you might see in an HTML document.

My First Hexadecimal:

bgcolor="#RRGGBB"

HTML Color Code - Breaking the Code

The following table shows how letters are incorporated into the hexadecimal essentially extending the numbers system to 16 values. Hang in there it all makes sense shortly.

Hexadecimal Color Values:

Decimal0123456789101112131415
Hexadecimal0123456789ABCDEF

So use letters as numbers?We will answer this question as we dive into the converting hexadecimals to regular numbers. Let's have a look at real Hexadecimal.

A Real Hexadecimal:

bgcolor="#FFFFFF"

The letter "F" is the maximum amount we can send each color and as you may deduce, this color (#FFFFFF) represents the color white. A formula exists to calculate the numeric equivalent of a hexadecimal.

Hexadecimal Formula:

(15 * 16) + (15) = 255

The formula is real simple. Take the first value (F) or 15 multiply it by 16 and add it to the second value, 15. The value 255 is the maximum allowed for any primary color.

Let's try another one.

Example 2:

bgcolor="#CC7005"

CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5

Hexadecimals are the best choice for compatible web development because of their consistency between browsers. Even the most minor of change in color can throw your entire site out of whack, so be sure to check your site in a number of browsers. If you want to be absolutely sure your colors will not change, use paired hex values for color. Examples: "#0011EE", "#44HHFF", or "#117788". These are called True Colors, since they will stay true in hue from browser to browser.

Email Post

Comments

Post a Comment

Popular Posts