A Step-By-Step Tutorial For Coding Your First HTML Document- II | Codin India

 In our previous blog, we talked about A Step-By-Step Tutorial For Coding Your First HTML Document- I, in which we study how to create a HTML document and how to add paragraph, headings etc.

Now we are going to talk about adding formatting to the text, creating lists etc.

So, let's get started.

Step 6 – Add Some Formatting To The Text

 

There are a number of different elements that let us add formatting to our text:

<b> – Bold text

<strong> – Important text

<i> – Italic text

<em> – Emphasized text

<mark> – Marked text

<small> – Small text

<del> – Deleted text

<ins> – Inserted text

<sub> – Subscript text

<sup> – Superscript text

Some of these elements have identical displays in the browser, but are actually used in different situations.

<b> and <strong> will have the same result – bold text – however <strong> is preferred when the text is semantically important.

<i> and <em> also have the same result – italic text – however <em> is preferred when the text is semantically important.

These two situations can be quite difficult for beginners to understand, and you shouldn’t really worry about them too much at the moment.

To see what each of these elements does, let’s add an example for each one to our HTML document. We’ll add the following code under our previous paragraph code, and we won’t format the whole sentence, just the relevant part.

Add this code to the HTML document (don’t forget to close each element!):

<p>This is <b>Bold text</b>.</p>

<p>This is <strong>Important text</strong>.</p>

<p>This is <i>Italic text</i>.</p>

<p>This is <em>Emphasized text</em>.</p>

<p>This is <mark>Marked text</mark>.</p>

<p>This is <small>Small text</small>.</p>

<p>This is <del>Deleted text</del>.</p>

<p>This is <ins>Inserted text</ins>.</p>

<p>This is _{Subscript text}.</p>

<p>This is ^{Superscript text}.</p>

Our HTML document should look like this:

If you preview the document in a browser, the formatted text should look like this:

 

Step 7 – Add Some Style To The Text

 

To add style to our text, we can use the style attribute.

You may remember that we put attributes inside the opening tag of an element. We can add a style attribute to an element using this syntax:

<tagname style=“property:value;”>

Some common properties we can use for style are color for changing the text colors, font-family for changing the text fonts, and font-size for changing text sizes.

The property and value are actually CSS code, which is why there is a semi-colon after the value. CSS is usually the next coding language people learn after HTML, but we’ll take a little sneak peak at some of the things it can do.

Let’s add an example of each style property to our HTML document. Add the following code below the formatting example:

<p style=”color:red;”>This is red text.</p>

<p style=”font-family:courier;”>This is text using the courier font.</p>

<p style=”font-size:300%;”>This is very large text.</p>

Some text editors use different colors to distinguish CSS code from HTML code:

If you check the document in your browser, it should look like this:

 

 

 

 

Step 8 – Create Some Lists

 

The next thing we’re going to practice is adding lists to our HTML document. Lists can be useful for grouping together similar kinds of information to make them easy to read.

There are three types of lists – unordered lists, ordered lists and description lists.

Unordered lists use the <ul> tag. Unordered list items use the <li> tag. Each item in the list will be displayed with bullets. Here’s an example of an unordered list:

• First list item
• Second list item
• Third list item

 

Ordered lists use the <ol> tag. Just like unordered list items, ordered list items use the <li> tag. Each item in the list will be displayed with numbers (starting from one). Here’s an example of an ordered list:

1.    First list item

2.    Second list item

3.    Third list item

Description lists use the <dl> tag. Items in a description list come in pairs – each item has a term and a description. The term is defined with the <dt> tag and the description is defined with the <dd> tag.

 

Let’s add one example of each kind of list to our HTML document under our previous example. It’s important to remember that both the list and each list item needs to be closed with a closing tag. You should also indent list items to make them more readable.

To make our lists more interesting, we’ll make the unordered list a shopping list, the ordered list a list of countries with the largest population, and the description list a list of some HTML terms and definitions.

Add this code to the HTML document:

<ul>

<li>Eggs</li>

<li>Bread</li>

<li>Bananas</li>

<li>Milk</li>

</ul>

<ol>

<li>China</li>

<li>India</li>

<li>United States</li>

<li>Indonesia</li>

</ol>

<dl>

<dt>Tag</dt>

<dd>An mark that is used to distinguish HTML code from regular text</dd>

<dt>Element</dt>

<dd>A pair of tags and all the content included between them</dd>

<dt>Head</dt>

<dd>The element that contains information that will not be displayed in the browser</dd>

<dt>Body</dt>

<dd>The main element that contains information that will be displayed by the browser</dd>

</dl>

Our HTML code should look like this:

If you check the HTML document in the browser, the lists should look like this:

One final thing to remember about lists – lists can be nested. This means you can have lists within lists.

 

 

 

Step 9 – Create A Hyperlink

Remember when we talked about the World Wide Web being a network of linked pages? Without some links on our page it’s just a regular document, so let’s practice adding a hyperlink.

Hyperlinks are usually used to link to another internal or external page, but they can actually be used to link to any HTML element. For example, you can link to an image, a sound file, or even a PDF document.

We create a hyperlink using the anchor <a> tag. We specify the destination of the link by putting the href attribute inside the opening tag.

Here’s the basic syntax for a hyperlink:

<a href=“http://www.somewebsite.com”>The Text You Want To Link</a>

The href attribute (the thing you are linking to) doesn’t have to be an external web address. If you’re linking to a local file located on your server, you can simply add the filename and location.

You can also specify how the link opens by using a target attribute after the href attribute.

The target attribute can use these values:

• _blank – Opens the linked document in a new window or tab
• _self – Opens the linked document in the same window/tab as it was clicked (default)
• _parent – Opens the linked document in the parent frame
• _top – Opens the linked document in the full body of the window
• framename – Opens the linked document in a named frame

For example, this hyperlink will open the Google homepage in a new window:

<a href=”http://www.google.com/” target=“_blank”>Google Homepage</a>

Let’s add a hyperlink to our HTML document. We’ll link to the Mozilla Developer Network (MDN) list of all HTML elements.

Add this code below our previous example:

<a href=”https://developer.mozilla.org/en-US/docs/Web/HTML/Element”>MDN List of HTML Elements</a>

Once you’ve added the code, open the HTML document in your browser. Underneath the final lsit entry, you should have a link that looks like this:

Click on the link and it should take you to the MDN Elements page.

In our next blog we are going to continue this and talk about adding images, quotations creating a table in HTML document.

I hope you like this post too. Kindly subscribe to our YouTube channel CodinIndia