Html Course

In HTML you can create three different types of lists: unordered (UL), ordered (OL) and definition (DL) lists.
These HTML lists are block-level elements.

Unordered Lists

An unordered list (also called "bulleted list") starts with a <ul> tag and ends with a </ul> tag.
Within the list, each item starts with an <li> tag and ends with an </li> tag.
The list items are marked with bullets. You can set three different types of bullets: disc, circle, and square. They are added with the type attribute within <ul> tag.
- "disc" is the default bullet type, so you don't need to specify it.

Example:
<html>
<head>
 <title>Document Title</title>
</head>
<body>

<ul>
 <li>HTML course</li>
 <li>CSS Course</li>
 <li>PHP - MySQL</li>
</ul><br />

With "circle" type:
<ul type="circle">
 <li>HTML course</li>
 <li>CSS Course</li>
 <li>PHP - MySQL</li>
</ul><br />

With "square" type:
<ul type="square">
 <li>HTML course</li>
 <li>CSS Course</li>
 <li>PHP - MySQL</li>
</ul>

</body>
</html>
This code will display:

With "circle" type:
With "square" type:

Ordered Lists

An ordered list (also called "numbered list") is a block element that begins with an <ol> tag and ends with an </ol>.
Within the list, each item starts with an <li> tag and ends with an </li>.
The default type of numbered list uses standard numbers.
You can specify different types of numbering by adding the "type" attribute to the <ol> tag, as described in the following list:
- By default, HTML starts each numbered list with 1 or the equivalent in the numbering scheme used (i, I , a , A).
To change the starting number, add the start attribute to the <ol> tag, and specify the appropriate number.
            Ex.:     <ol start="4">

In the next example there are three ordered lists, with different types:
<html>
<head>
 <title>Document Title</title>
</head>
<body>

<ol>
 <li>HTML lessons</li>
 <li>Ajax tutorials</li>
 <li>JavaScript course</li>
</ol><br />

With "I" type:
<ol type="I">
 <li>HTML lessons</li>
 <li>Ajax tutorials</li>
 <li>JavaScript course</li>
</ol><br />

With "a" type and start="3":
<ol type="a" start="3">
 <li>HTML lessons</li>
 <li>Ajax tutorials</li>
 <li>JavaScript course</li>
</ol>

</body>
</html>
This code will display:
  1. HTML lessons
  2. Ajax tutorials
  3. JavaScript course

With "I" type:
  1. HTML lessons
  2. Ajax tutorials
  3. JavaScript course

With "a" type and start="3":
  1. HTML lessons
  2. Ajax tutorials
  3. JavaScript course

• The <li> tag is a block-level element, you can add within it <p>, <div>, <ul>, or other block-level elements.
Example: <li> with paragraph, and nested list:
<html>
<head>
 <title>Document Title</title>
</head>
<body>

<ol>
 <li><p>Here is a paragraph<br />
 A new line in the paragraph.</p></li>
 <li>HTML lessons:
 <ul type="square">
 <li>Adding images</li>
 <li>DIV and SPAN</li>
 </ul>
 </li>
 <li>Another list item</li>
</ol>

</body>
</html>
This code will display:
  1. Here is a paragraph
    A new line in the paragraph.

  2. HTML lessons:
    • Adding images
    • DIV and SPAN
  3. Another list item

Definition Lists

A definition list is a list of items, with a description of each item. It begins with a <dl> tag and ends with a </dl>.
The <dl> tag is used in conjunction with <dt> and <dd>.
Within the <dl>, each of the terms defined begins with a <dt> tag and ends with a </dt>.
Within the <dl>, each of the definitions for those terms begins with a <dd> tag and ends with a </dd>.

Example:
<html>
<head>
 <title>Document Title</title>
</head>
<body>

<dl>
 <dt>HTML</dt>
 <dd> - Hyper Text Markup Language</dd>
 <dd> - Language for web pages</dd>
 <dt>CSS</dt>
 <dd>Cascading Style Sheets</dd>
 <dd>style sheet language used with HTML</dd>
</dl>

</body>
</html>
This code will display:
HTML
- Hyper Text Markup Language
- Language for web pages
CSS
Cascading Style Sheets
style sheet language used with HTML

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <img> tag for the address of the image?
href src rel
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which CSS code hides the element on page?
display: none; display: inline; position: relative;
#id {
  display: none;
}
What instruction stops the execution of a while() or for() statement?
continue prompt() break
for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}
Indicate the function that can create a constant.
define() include() defined()
define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;
HTML Lists

Last accessed pages

  1. Execute JavaScript scripts loaded via AJAX (7824)
  2. Replace JavaScript variable name from string with its value (3446)
  3. Add and Remove HTML elements and Content with jQuery (30921)
  4. Add, Change, and Remove Attributes with jQuery (46231)
  5. Working with objects from Library in AS3 (2993)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (470)
  2. Read Excel file data in PHP - PhpExcelReader (147)
  3. PHP Unzipper - Extract Zip, Rar Archives (145)
  4. SHA1 Encrypt data in JavaScript (122)
  5. Get and Modify content of an Iframe (108)