<p style="text-align:center;"> <img src="pix/sunset.jpg" alt="Sunset" width="5%"<br>A Beautiful Sunset</p> At this pivotal time inhumanity’s evolution.we need <font color=”green”>courage, commitment&</font> and a supportive community of like-hearted souls to guide the way in transforming society.</p>

</body>

</html>

Save and open the file. Your webpage should look like below:

Global Family

A family that keeps together

Old Couple

What Is Global Family?

We are living in an era of quantum change—leaving behind old patterns of being and institutions that no longer serve our needs or support our emerging

A Beautiful Sunset

consciousness. At this pivotal time in humanity’s evolution, we need courage, commitment , and a supportive community of like-hearted souls to guide the way in transforming society.

We covered a lot of topics here. In the next section, we’ll learn about bullets. See you there.

If you look at the website we are trying to create, the next step is to create some bullets. Let’s do that. Open your file: “global family.html.”

Let’s first create another h2 heading and color the text green using Inline style just below </p> at the end of the paragraph we wrote in Section 1:

<h2 style="color:green;text-align:center;">Global Family Mission</h2>

<ul>

<li>All the World is a family</li>

<li>Charity begins at home</li>

<li>Family builds character</li>

</ul>

Save the page and open it. You’ll see the following:

Global Family Mission

• All the world is a family
• Charity begins at home
• Family builds character

Explanation

1. You created an unordered list. An unordered list is a list with bullets without numbers.
2. The opening tag for an unordered list is <ul>. The tag must be closed with </ul>.
3. Next, you created the bullets with opening and closing tags <li> and </li>. You wrote your bullet contents between the opening and closing tags.
4. You closed the <ul> tag with </ul>

Let’s now create an ordered list (numbered bullets). The symbol for an ordered list is "ol" Let’s create another h2 heading named, “Global Family Unit.” Write the following after the closing tag </ul>:

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

Global Family Unit </h2>

<ol>

<li>Individual</li>

<li>Support Group</li>

<li>Symbiosis</li>

</ol>

Save the page and open it. You’ll see the following:

Global Family Unit

1. Individual
2. Support Group
3. Symbiosis

Aligning the list

The default alignment for a list is left. You may align your list in the center or right by writing the following Inline style.

<ul style="text-align:right;"> or <ul style="text-align:center;">

For "ol," write the following:

<ol style="text-align:right;"> or <ol style="text-align:center;">

Here is an example of how to align-center

<ul style="text-align:center;">

<li>All the World is a family</li>

<li>Charity begins at home</li>

<li>Family builds character</li>

</ul>

Let us go to Section 3 and create tables.

Lesson 3 Section 3 – Table

If you look at the website we are trying to create, You’ll find a video. We covered that in Lesson 2. So, we’ll learn to create a table that you see below that video.

Open your file: “global family.html”. Type in the following after the tag line, <p>Woman Clapping</p> (Woman Clapping video) then save your file and open the file in html.

<table border="1" cellspacing="0" align="center">

<tr> <th>Author</th> <th>Quote</th> lt;th>Image</th></tr><tr> <td>Desmond Tutu</td> <td>You don’t choose your family. They are God’s gift to you, as you are to them</td></tr>

<tr> <td>Richard Bach</td> <td>The bond that links your true family is not of blood, but of respect and joy in each other’s life</td></tr>

<tr> <td>Steve Jobs</td> <td>Sometimes life hits you in the head with a brick. Don’t lose faith</td></tr>

<tr> <td>Mark Twain</td> <td>Good friends, good books and a sleepy conscience: this is the ideal life</td></tr>

</table>

If you wrote everything correctly, this is what you’ll see.

Of course, you'll not see the fancy colors that I used in the table you just created. You'll learn to do that in CSS3 lessons.

Let’s get familiar with the tags that we used here.

<table>></table> are the beginning and end of a table.

<th></th>> are the beginning and end of a table header cell. The headers in the example above are Author, Code and Image.

<tr></tr> are the beginning and end of a row. There are 4 rows in the above example not counting the header row.

<td></td> are the beginning and end of a table data cell.

Explanation

1. You created a tag for table like shown below.

<table border="1" cellspacing="0" cellpadding="4" align="center" >

• You created a 1 pixel wide border (the narrowest possible border) around the cell by writing border=”1”.
• Similarly, you created space between two cells of “0” pixels (no space) by writing cellspacing=”0”. The cellspacing attribute allows you to control the empty space between cells.
• You created padding of each cell equivalent to 4 pixels by writing cellpadding="4". The cellpadding attribute controls the amount of space inside cells.
• Then you centered the table on the page by writing align="center”.

Try changing the values of pixels in the above example and have fun.

2. Next you wrote the following:
• <tr><th>Author</th><th>Quote</th><th>Image</th></tr>
• You created a row of headings in your table. <tr></tr> indicates a row. You’ll have to use the tag <tr></tr> for every row you create.
• Then you used three <th></th> tags for three headings of your table namely, “Author,” “Quote” and “Image.”
3. You created more rows under the heading row. The first row was as follows:
• <tr&tg;<td&tg;Desmond Tutu</td&tg;<td&tg;You don't choose your family. They are God's gift to you, as you are to them.</td&tg;</tr&tg;
• After the row tag <tr>, you created the <td></td> tag. <td> is the symbol for cell. This tag describes what goes inside each cell. The first cell in this row tells who is the author and will go below the heading Author. The second cell in this row goes under the heading “Quote.” The third cell is empty which goes under image. If you like, you may insert an image there, but I advise you to do it later after you become comfortable with images and videos.
• You created three more rows using the method described above.
• Lastly, you closed the table tag by writing </table>

Creating table will need a practice of at least 4 hours in order to become totally comfortable. In the meantime, let us go to Section 4 and learn to create Link.

If you look at the website we are trying to create, You’ll find a video named, “Family of Chickens.” We covered that in Lesson 2. Next to that, you will see a link to Google.com. Let’s encode that link in our website. Write the following after the tagline, <p>Family of Chickens:

<a href="http://www.google.com">Go to Google

Now, you have a link to the Google website.

Explanation

1. We wrote the tag <p></p> to create the link on a separate paragraph.
2. We used a simple open tag <a> and an attribute “href” to indicate the page reference.
3. Then we wrote the link http://www.google.com followed by >
4. Lastly we gave a name to the link , ”Go to Google” and closed the paragraph with a closing tag </p>

By now, You have learned the most basic features of HTML5 to design a web page. In the next Lesson, we will discuss some lose ends that you should be aware of such as inserting Comments Divisions and Wrappers. So, let’s move on to Lesson 4.