Easiest Way To Learn HTML5 and CSS3 Coding

Lesson 3 - Paragraphs and Floating Image, List, Tables and Link

Section 1 – Paragraphs and Floating Image

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

Just below the tagline <p style="text-align: center;"> <img src="https://i.pinimg.com/originals/b0/98/01/b09801e517bb55371ef5358205e831c0.jpg" width="5%" />, write a new h2 heading: <h2>What Is A Global Family?</h2>.

You now know how to place your heading between opening and closing tags < h2>< /h2>.

Let’s give our heading a green color. We talked about style rules in Lesson 1, Section 4. You may like to revisit the topic now.

Let us use Inline style rule to give green color to our h2 heading. Write the following:

Save the global family.html file and open it now. If you wrote everything correctly, you should see your heading as shown below:

What Is A Global Family?

Paragraph is for writing text. All the texts are placed under the opening and closing tags <p> </p>. As you may have guessed, p stands for paragraph in html5 language. So, let’s write the following:

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 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.

If you save the file: “global family.html” and open it, you will find the above paragraph below the heading, “What Is A Global Family.”

Making bold and italicizing

Write the following in front of “quantum change” in the paragraph above:

<strong> quantum change</strong>. As you may have guessed, this will make contents inside the tags <strong></strong> bold.

You may also write <b> </b> instead of <strong> </strong>

Now, write the following in front of “humanity’s evolution” in the paragraph above:

<em> humanity’s evolution</em>. As you may have guessed, this will make contents inside the tags <em></em> italicized.

You may use both the “strong” and “em” tags at the same time. Try this:

<strong> <em> quantum change </em></strong>

Coloring words inside a paragraph

Write the following in the above paragraph in the beginning and end of the words, “courage, commitment”:

<font color=”green”>courage,commitment</font>. The words “courage, commitment” will appear green now.

If you wrote everything correctly, so far, your paragraph should look like the following:

“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 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.”

Floating and labeling image inside a paragraph

If you look at the web image that we are trying to create; you will find the image of sunset floating in the center of the paragraph. Let’s write the code to create the floating image on the web page that you are designing right now.

Open your file: “global family.html” and write the following after “no longer serve our needs or support our emerging” in your paragraph.

Save the file and open it. You should see the paragraph and the image as follows:

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

Sunset
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.

Explanation

  1. We inserted the following tags in the middle of the paragraph:
  2. <p style="text-align: center;"> <img src="sunset.jpg" alt="Sunset" width="5%"> <br> A Beautiful Sunset </p>

  3. We put the tag <p style="text-align: center;"> because we wanted to float the image in a separate paragraph and wanted that to float in the center of the page.
  4. We are familiar with the image tag, <img src="sunset.jpg" alt="Sunset" width="5%">.
  5. We placed an exception empty tag <br> for line break.
  6. The vast majority of HTML tags come in pairs. But there are a few exceptions, and we call those exceptions empty tags. Below is a list of exception empty tags:
<br>Line break
<hr>Shows a horizontal rule
<img>Shows a graphic image
<link>Links to an external file
<meta>Provides information about the page

Floating an image

We may float the image left or right also by giving float command. Use the following command and see what happens:

Here is the html program (code) that you have written, so far. Check it and make revision (We will come back to videos a little later):

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

Global Family

Global Family

A family that keeps together

Old Couple
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

Sunset
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.

Section 2- List (Bullets)

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:

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

Global Family Mission

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>:

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;”>

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.

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

AuthorQuoteImage
Desmond TutuYou don't choose your family. They are God's gift to you, as you are to them.
Richard BachThe bond that links your true family is not one of blood, but of respect and joy in each other's life.
Steve JobsSometimes life hits you in the head with a brick. Don't lose faith.
Mark TwainGood friends, good books and a sleepy conscience: this is the ideal life.

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.
  2. <table border="1" cellspacing="0" cellpadding="4" align="center" >

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

  3. Next you wrote the following:
  4. You created more rows under the heading row. The first row was as follows:

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.

Section 3- 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.