Understanding HTML

HTML Stands for Hyper Text Markup Language. It’s used to design and format WebPages. Programming Languages like C/C++ are having syntax, which we should learn to effectively program in that language. In HTML, we call these syntax as Tags. Tags are enclosed within angular brackets < and >.

There are predefined tags in HTML which we have to use to design and develop web pages. For example, in order to make a text bold you have to apply the bold tag. First, you have to open the tag with the syntax <B>, then you should close the tag with the syntax </B>. Majority of tags in HTML, if opened should have to be closed with the syntax </>. You can code your tags as you wish because HTML is not a case sensitive language like C++ or Java. In this session, I will cover the fundamental tags available in HTML.

Basic Structure of HTML Tags

Every HTML code should have to be written in a structure which is defined by World Wide Web Consortium. It’s not compulsory to follow this structure. However, it’s a good programming practice to follow the structure while designing all your web pages. The structure looks like this:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">HTML</span><span style="color: #0000ff">&gt;</span> <span style="color: #008000">&lt;!--TOP LEVEL TAG--&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">HEAD</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">TITLE</span><span style="color: #0000ff">&gt;</span>Welcome to HTML<span style="color: #0000ff">&lt;/</span><span style="color: #800000">TITLE</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">HEAD</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">BODY</span><span style="color: #0000ff">&gt;</span> <span style="color: #008000">&lt;!--PAGE CONTENT STARTS HERE--&gt;</span>
This is your first web page designed by HTML
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">BODY</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">HTML</span><span style="color: #0000ff">&gt;</span> 

Let’s Begin Coding

Just Copy and Paste the above code in the Notepad and save the file as First.htm or First.html. Both extensions works well. Now open up your browser (Microsoft Internet Explorer) or Netscape Navigator and browse for the file which you saved just now. If everything goes on well you will view the output. Whatever is printed inside the body tag will be displayed on the browser

READ  5 Important Rules in Website Design

Highlighting the Text in Bold, Italics and in Underlined Fashion

Apply the following code inside the body tag:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">B</span><span style="color: #0000ff">&gt;</span>Welcome to HTML<span style="color: #0000ff">&lt;/</span><span style="color: #800000">B</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">br</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">I</span><span style="color: #0000ff">&gt;</span>Welcome to HTML<span style="color: #0000ff">&lt;/</span><span style="color: #800000">I</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">br</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">U</span><span style="color: #0000ff">&gt;</span>Welcome to HTML<span style="color: #0000ff">&lt;/</span><span style="color: #800000">U</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">br</span><span style="color: #0000ff">&gt;</span> 

<br> denotes Line Break. It creates a new line.

Creating Paragraphs

Apply the following code inside the body tag:

<P>Many and online services require you to enter information, such as your user name and password, to establish a connection. You can create a Dial-Up Networking script that provides this information automatically, so you do not have to type it each time you connect. To create a Dial-Up Networking script, use a text editor, such as WordPad or Notepad, to create a. Use the Dial-Up Scripting tool to assign the script file to a Dial-Up Networking connection you have created.

</P>

It’s not compulsory to close the <P> tag.

Aligning Paragraphs

Before proceeding further you have to learn the concept of attributes. Attributes are similar to properties. In order to align the paragraph you have to make use of ALIGN attribute. All the attributes accepts values which are predefined. Align attributes takes 3 values like left, Center and Right.

Applying the code <p align = "center"> will start the paragraph from the center.

READ  Learn how to work with JavaScript

Applying Headings

You can use headings to organize your text in various levels. There are 6 levels of headings in HTML. They can be applied as follows.

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">H1</span><span style="color: #0000ff">&gt;</span>This is Heading Level - 1 <span style="color: #0000ff">&lt;/</span><span style="color: #800000">H1</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">H2</span><span style="color: #0000ff">&gt;</span>This is Heading Level - 2 <span style="color: #0000ff">&lt;/</span><span style="color: #800000">H2</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">H3</span><span style="color: #0000ff">&gt;</span>This is Heading Level - 3 <span style="color: #0000ff">&lt;/</span><span style="color: #800000">H3</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">H4</span><span style="color: #0000ff">&gt;</span>This is Heading Level - 4 <span style="color: #0000ff">&lt;/</span><span style="color: #800000">H4</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">H5</span><span style="color: #0000ff">&gt;</span>This is Heading Level - 5 <span style="color: #0000ff">&lt;/</span><span style="color: #800000">H5</span><span style="color: #0000ff">&gt;</span> 

Creating Lists

Lists represents sequential placement of items or text. There are two types of Lists in HTML. They are Ordered Lists and Unordered List. Ordered List is represented by <OL> tag and Unordered List is represented by <UL> tag. Following examples will make the concept clear

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">OL</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">LI</span><span style="color: #0000ff">&gt;</span>Java
<span style="color: #0000ff">&lt;</span><span style="color: #800000">LI</span><span style="color: #0000ff">&gt;</span>C++
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">OL</span><span style="color: #0000ff">&gt;</span> 

If you want these languages to appear in bullets, then you have to change only the <OL> tag to <UL> tag.

Creating Definition Lists

Definition Lists are similar to glossary lists. A list of terms and its definitions are created by using this type of List. Here is an example

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">DL</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">DT</span><span style="color: #0000ff">&gt;</span>Java
<span style="color: #0000ff">&lt;</span><span style="color: #800000">DD</span><span style="color: #0000ff">&gt;</span>Developed by Sun Microsystems Inc
<span style="color: #0000ff">&lt;</span><span style="color: #800000">DT</span><span style="color: #0000ff">&gt;</span>C-Sharp
<span style="color: #0000ff">&lt;</span><span style="color: #800000">DD</span><span style="color: #0000ff">&gt;</span>Developed by Microsoft Inc
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">DL</span><span style="color: #0000ff">&gt;</span> 

Indenting the margins

<BLOCKQUOTE> tag double indents a block of text from both margins automatically from left to right.

READ  Learn how to create tables using HTML

Try out the following example and test it out in a browser:

<BLOCKQUOTE>You can use Sound Recorder to record, play, and edit sound files. To use Sound Recorder, you must have a sound card and speakers installed on your computer. If you want to record live sound, you also need a microphone. to start Sound Recorder. Notes: You can also start Sound Recorder by clicking Start, pointing to Programs, pointing to Accessories, pointing to Entertainment, and then clicking Sound Recorder. For information about how to use Sound Recorder, click the Help menu in Sound Recorder. </BLOCKQUOTE>

Leave a Reply

Your email address will not be published.