1-7 A 1 Discover

In the Exercises01 folder, create an HTML file with these lines of code:

<li>Hello.</li>

Open this file in a browser and explain the <li></li> tag pair.

1-7 Definition 1: The list item tag pair

The <li></li> tag pair is called the list item tag pair.

1-7 Explanation 1: The list item tag pair

Text written inside several list item tag pairs will appear in a bulleted list.

<li>Hello.</li>
<li>Hello.</li>
<li>Hello.</li>

Hello.

1-7 A 2

Using the list tag pair, create an HTML file that shows this list:

this is a little text
this is the next little text
this is the last little text

1-7 Definition 2: Indentation

The number of spaces before the beginning of a line is called its indentation.

1-7 A 3 Discover

Create an HTML file with these lines, including their indentation:

<ol>
<li> Hello.</li>
<li>Hi.</li>
</ol>

<ul>
<li>Hello.</li>
<li>Hi.</li>
</ul>

</body>
</html>

Open this file in a browser and explain what the <ol></ol> and <ul></ul> tags pairs do:

1-7 Explanation 2: Indenting the code for list items

When creating a list, the code for the list items should be indented, making the code easy to read.

1-7 Example 1: The ordered list

This is an example of an ordered list:

this is a little text
this is the next little text

1-7 Definition 3: The ordered list

A list in which items are ordered by numbers or letters is called an ordered list.

1-7 Definition 4: The odered list tag pair

The tag pair: <ol></ol> is called the ordered list tag pair.

1-7 Example 2: The odered list tag pair

The list's <ol></ol> tag pair encloses the list's <li></li> tag pairs:

<ol>
<li> This is a little text in an ordered list</li>
<li> This is another little text in an ordered list</li>
</ol>

The code will display this list:

This is a little text in an ordered list
This is another little text in an ordered list

Note how the list items are indented, making the code easy to read.

1-7 Explanation 3: The odered list tag pair

In an ordered list the <ol></ol> tag pair encloses the <li></li> tag pairs:

<ol>
<li>text</li>
<li>text</li>
</ol>

1-7 A 4 Ordered list

Create an HTML file that shows this list:

Coffee
Tea
Milk

1-7 Example 3: The unordered list

This is an example of an unordered list:

this is a little text
this is the next little text

1-7 Definition 5: The unordered list

A list with bulleted items is called an unordered list.

1-7 Definition 6: The unordered list tag pair

The tag pair <ul></ul> is called an unordered list tag pair.

1-7 Example 4: The unordered list tag pair

The list's <ul></ul> tag pair encloses the list's <li></li> tag pairs:

<ul>
<li> This is a little text in an ordered list</li>
<li> This is another little text in an ordered list</li>
</ul>

The code will display this list:

This is a little text in an ordered list
This is another little text in an ordered list

Note how the list items are indented, making the code easy to read.

1-7 Explanation 4: The unordered list

In an unordered list, the <ul></ul> tag pair encloses the <li></li> tag pairs:

<ul>
<li>text</li>
<li>text</li>
</ul>

1-7 A 5 The unordered list

Create an HTML file that shows this content:

Coffee
Tea
Milk

1-7 Example 5: Summary: The ordered and the unordered list

This HTML code:

<html>
<body>

<ol>
<li> This is a little text in an ordered ist</li>
<li> This is another little text in an ordered list</li>
</ol>

<ul>
<li>This is a little text in an unordered list</li>
<li>This is a another little text in an unordered list</li>
</ul>

</body>
</html>

will display:

This is a little text in an ordered list
This is another little text in an ordered list

This is a little text in an unordered list
This is a another little text in an unordered list

1-7 Explanation 5: The tag structure in lists

In both of these examples:

<ol>
<li> This is a little text in an ordered list</li>
<li> This is another little text in an ordered list</li>
</ol>

and

<ul>
       <li> This is a little text in an unordered list</li>
      <li> This is another little text in an unordered list</li>
</ul>

the tags are structured as follows:

<>
     <></>
     <></>
</>

1-7 Definition 7: Parent and child tags

In this structure:

<>
<></>
<></>
</>

the red tag pairs are called parent tags
the blue tag pairs are called child tags

1-7 A 6

This structure with a, b, and c tags is for the exercises below:

<a>
       <b>
                <c></c>
                <c></c>
        </b>
</a>

Yes

No

The b tags are parent tags of the a tags.

The c tags are child tags of the b tags.

The a tags are parent tags of the b tags.

The b tags are child tags of the a tags.

The b tags are child tags of the c tags.

The b tags are parent tags of the c tags.

1-7 Definition 8: Inheritance

In HTML, passing down characteristics from a parent tag to a child tag is called inheritance.

1-7 Explanation 6: Parent and child tags in an ordered and unordered list

Here, the parent tags are the ordered list tags: <ol></ol>

<ol>
<li>text</li>
<li>text</li>
</ol>

The child tags inherit how their text is displayed from their parent tags. Therefore, their text will appear in an ordered list:

this is a little text
this is a little text

1-7 A 7 Animals

Create an HTML file that shows this content:

Lion
Elephant
Tiger

1-7 Explanation 7: Parent and child tags in an unordered list

Here the parent tags are the unordered list <ul></ul> tags:

<ul>
<li>text</li>
<li>text</li>
</ul>

The child tags inherit their appearance from the type of their parent tags. Therefore their text will be unordered:

this is a little text
this is a little text

1-7 A 8 Discover

Create an HTML file with this code:

<ol>
         <li style="color:blue;">Soccer</li>
         <li style="color:blue;"> Basketball</li>
         <li style="color:blue;"> Baseball</li>
</ol>

</body>
</html>

Predict what you will see when you open this file in a browser:

1-7 Explanation 8: Inheritance of styles

The text inside child tags inherits its appearance from the type of their parent tags.

In this example, the text inside the child tags: <li>text</li> inherits its appearance from the type of their parent tags, which is unordered list:

<ul>
<li>text</li>
<li>text</li>
</ul>

But the text inside child tags also inherits any additional styles that may be defined in their parent tags.

In this example, the text inside the child tags: <li>text</li> inherits its appearance from the type of their parent tags, and also from the color:blue style:

The content inside child tags can inherit its appearance from their parent tags.

1-7 Example 6: Applying inheritance

Instead of writing:

<html>
<body>

<ol>
         <li style="color:blue;">Soccer</li>
         <li style="color:blue;"> Basketball</li>
         <li style="color:blue;"> Baseball</li>
</ol>

</body>
</html>

write:

<ol style="color:blue;">
         <li>Soccer</li>
         <li> Basketball</li>
         <li> Baseball</li>
</ol>

</body>
</html>

The child tags will inherit the color style from their parent tag.

Soccer
Basketball
Baseball

1-7 A 9 Countries

Create an HTML file that shows this content:

Finland
Canada
Australia

1-7 Explanation 9: Styles of child tags

In:
<>
<li>text</li>
<li>text</li>
</>

the parent tags define how the child tags display the text they enclose.

Without parent tags, the child tags in the above example will only display a bulleted list.

1-7 Orientation 2: Inheritance

Casually speaking, in:

<>
<></>
<></>
</>

the parents are telling their children what to do.

1-7 A 10 Discover

Write this code into an HTML file:

<html>
<body>

<ul style="color:blue;">
         <li>this is a little text</li>
         <li style="color:red;">this is another little text</li>
         <li>this is one more little text</li>
         <li>this is the last little text</li>
</ul>

</body>
</html>

Predict what you will see when you open the file in a browser:

1-7 Definition 9: Overriding

Replacing something with something else is called overriding.

1-7 Example 7: Overriding of child tags

In this code:

<ul style="color:blue;">
         <li>this is a little text</li>
         <li style="color:red;">this is another little text</li>
         <li>this is one more little text</li>
         <li>this is the last little text</li>
</ul>

this is a little text
this is another little text
this is one more little text
this is the last little text

the four child <li></li> tag pairs inherit the style of their parent tags. But the second <li></li> tag pair holds its own style. It overrides the style it has inherited from its parent and displays its text in its own style.

1-7 Explanation 10: Overriding of child tags

The styles of child tags override the styles of their parent tags.

1-7 Orientation 3: Overriding

Casually speaking, in:

<>
<></>
<></>
</>

the parents are telling their children what to do. But sometimes the children don't listen. Then they do their own thing and override the styles of their parents tags.

1-7 A 11 Hobbies

Create an HTML file that shows the content below. Use h2 for the heading and green for its color:

6 Hobbies

Reading
Cooking
Painting
Playing musical instruments
Hiking
Sports

1-7 B 1 Cities

Create an HTML file that shows the content below. Use "cyan" for "Singapore":

5 Cities

Toronto
Singapore
London
Tokyo
Sydney

1-7 Orientation 4: The span tag pair

Review the "The span tag pair" section of page 5.

1-7 C 1

Create an HTML file that shows this list:

Create this list:

this is a little text
this is a little text
this is a little text
this is a little text

1-7 C 2

Create an HTML file that shows this list:

Create this list:

this is a little text
this is a little text

1-7 B 2

Take a look at this code:

<ul style= "color:red">
<li style= "color:black">this is <span style= "color:red">a little</span> text</li>
</ul>

Decide if the following statements about the code are true or false:

	Yes	No
The <li></li> tag pair inherits the red color style from the <ul></ul> tag pair.
The <li></li> tag pair is a child tag pair of the <ul></ul> tag pair.
The <span><span> tag pair inherits the red color style from the <ul></ul> tag pair.
The <span></span> tag pair is a child tag pair of the <li></li> tag pair
The <span></span> tag pair inherits the black color style from the <li></li> tag pair.
The <li></li> tag pair overrides the red color style from the <ul></ul> tag pair.
The <span></span> tag pair overrides the black color style from the <li></li> tag pair with the red color style.
The <li></li> tag pair is a child tag pair of the <span></span> tag pair.
The <span></span> tag pair is a child tag pair of the <ul></ul> tag pair
The <span></span> tag pair inherits the black color style from the <li></li> tag pair.
The <li></li> tag pair is a parent tag pair of the <span></span> tag pair.

1-7 C 3

Create an HTML file that shows the content below. Use Lime, Coral, Maroon, SpringGreen, MediumBlue and OrangeRed for the color property values.

Musical instruments

String instrument: guitar
String instrument: harp
String instrument: koto
Wind instrument: organ
Wind instrument: flute

1-7 Orientation 5: Adding lists to previously created HTML files

The list items created for the previous three C-type exercises are written with various styles and tags.
For the topics and subtopics covered in each of the three exercises below, add texts that can be written as lists. For these lists, use all of the styles applied to the items of the lists in the previous three C-type exercises. The new lists you are adding have to consist of four items, preferably more.
When adding these lists, be mindful to make wise choices regarding the colors of the bullets and numbers, as well as those of the titles, subtitles, texts, and the background, ensuring a pleasant overall reading experience such as visual appeal and comprehension.

1-7 C 4 DreamsAndReality

Add different types of lists to the DreamsAndReality file you created previously.

1-7 C 5 BooksAndMovies

Add different types of lists to the BooksAndMovies file you created previously.

1-7 Orientation 6: Purpose of creating a new HTML file

The following exercise tasks you to write a completely new HTML file. Through this exercise, the aim is to enhance your dexterity by providing training that builds upon all tags and styles you have learned so far.

1-7 C 6 New HTML file of your own

Create a new HTML file of your own, using all tags and styles you have applied until now, along with several ordered and unordered lists.

1-7 A 12 Rereading the yellow sections

Now that you have gone through the exercises on this page, reread the yellow sections.

1-7 Submit 1: Study motivation

Click here.

This page was created by Hanspeter Amend

Previous page Table of contents

Solution proposals

1-7 A 2

<li>This is a little text</li>
<li>This is the next little text</li>
<li>This is the last little text</li>

</body>

</html>

1-7 A 4

<ol>
         <li>Coffee</li>
         <li>Tea</li>
         <li>Milk</li>
</ol>

</body>

</html>

1-7 A 5

<ul>
         <li>Coffee</li>
         <li>Tea</li>
         <li>Milk</li>
</ul>

</body>

</html>

1-7 A 7

<html>

<body >

<ol>
         <li>Lion</li>
         <li> Elephant</li>
         <li>Tiger</li>
</ol>

</body>

</html>

1-7 A 9

<html>

<body >

<ol style="color:red;">
         <li>Finland</li>
         <li>Canada</li>
         <li>Australia</li>
</ol>

</body>

</html>

1-7 A 11

<h2 style="text-align:center; color:green;">6 Hobbies</h2>

<ul style="color:blue;">
         <li>Reading </li>
         <li style="color:red;">Cooking </li>
         <li>Painting</li>
         <li>Playing musical instruments</li>
         <li style="color:red;">Hiking</li>
         <li style="color:red;">Sports</li>
</ul>

</body>

</html>

1-7 B 1

<h3 style= "text-align:right; color:blue;">5 Cities</h3>
<ul>
         <li>Toronto</li>
         <li style="color:cyan;">Singapore </li>
         <li>London</li>
         <li>Tokyo</li>
         <li>Sydney</li>
</ul>

</body>

</html>

1-7 C 1

<html>

<body>

<ul style= "color:red;">
         <li> this is a little text</li>
         <li><span style= "color:black;">this is a little text</span></li>
         <li style= "color:black;">this is a little text</li>
         <li style= "color:black;"><span style= "color:red">this is a little text</span></li>
</ul>

</body>

</html>

1-7 C 2

<html>

<body>

<ul style= "color:red;">
<li>this is <span style= "color:black;">a little</span> text</li>
<li style= "color:black;">this is <span style= "color:red;">a little</span> text</li>
</ul>

</body>

</html>

1-7 C 3

There are several solutions. This is one example of a solution:

<html>

<body>

<h1 style="text-align:center; color:Lime;">Musical instruments</h1>
<ol style="color:Coral;">
         <li><span style="color:Maroon;">String instrument:</span> guitar</li>
         <li><span style="color:Maroon;">String instrument:</span> harp</li>
         <li><span style="color:Maroon;">String instrument:</span> koto</li>
         <li style="color:SpringGreen;"><span style="color:MediumBlue;">Wind instrument:</span> <span style="color:OrangeRed;">organ</span></li>
         <li style="color:SpringGreen;"><span style="color:MediumBlue;">Wind instrument:</span> <span style="color:OrangeRed;">flute</span></li>
</ol>

</html>

</body>

This page was created by Hanspeter Amend

Previous page Table of contents