Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Creating your first HTML

In this article we will see how to install Adobe Dreamweaver CS5 which we will be using to develop HTML programs and is also valuable for creating different types of files and programs.

Installing Adobe Dreamweaver CS5

You can download it from the adobe home website or by getting a DVD of it.

Follow the following steps to install the Adobe Dreamweaver CS5:

  • Double click on the “Set-up” application in the “Adobe Dreamweaver CS5.5\Adobe Dreamweaver CS5” folder. Setup will initialize the installation process.
  • A welcome window will appear, and then select “Accept” option to accept the license agreement.
License agreement for Dreamweaver

Figure 1: License agreement for Dreamweaver

Then in the next window, provide the serial key or use as a trial mode and select the language and then select “Next” option:

Inputting Serial Key for Dreamweaver

Figure 2: Inputting Serial Key for Dreamweaver

Then in the “Install Option” window, click on the “Install” option. You can also change the directory in which it is installed:

Install Options for Dreamweaver

Figure 3: Install Options for Dreamweaver

Installation will start. Select “Yes” to start installation process:

Installing Dreamweaver

Figure 4: Installing Dreamweaver

At last, the installation process completes successfully. Click “Done” to finish installation process.

 Finishing Installation

Figure 5: Finishing Installation

How to write your first Program in HTML

This article is about how to write your first program in HTML and getting started with HTML using Adobe Dreamweaver.

Designing a website is not as difficult as people think rather it only requires some knowledge to learn to design the web page quite easily.

You can design the web page in different environment and IDEs. I am using Adobe Dreamweaver CS5 which is one of the best IDE for creating any kind of web page.

Before you can start to develop web page, Adobe Dreamweaver should be installed on your system.

Creating your first program in HTML

Follow the following steps to create your first web page:

Open Adobe Dreamweaver CS5, just like in the next image.

Opening Dreamweaver

Figure 6: Opening Dreamweaver

Then click on the file option in the menu bar, then click on new.

A “New Document” window appears. Select “HTML” from the “Page Type” column and then click on the “create” button in the bottom of the document.

Choosing HTML page

Figure 7: Choosing HTML page

A blank untitled window appears. You can select any one of the three options from the menu bar below the file title bar:

  • Code
  • Split
  • Design

I recommend using the split option as it displays the code as well as the output of what you have designed.

Selecting split window type option

Figure 8: Selecting split window type option

Then erase all the code from the left side of the page for the simplicity and write the following code to make your first program. Remember that HTML is not “case sensitive”.

Listing 1: First HTML program coding

<html>
<head>
<title>My First Program</title>
</head>
<body>
<p> Hello Friends! Welcome to HTML Tutorials </p>
</body>
</html>
Output of first HTML program

Figure 9: Output of first HTML program

Save the file with the name you wish. I have saved with the name “first.html”. Do not forget to save with the extension “.html” as it will not display on the web page without using the extension.

Run the program by opening the html file you have created by accessing on the directory where you have saved your program or by running from the Dreamweaver by clicking the “Preview/Debug” option and selecting any of the browser you have installed as:

 Running/executing the first html file

Figure 10: Running/executing the first html file

The address written in the address bar refers to the path where you have saved your program and contains your HTML file. You can run your program from that path also:

Path Address of html file

Figure 11: Path Address of html file

HTML Tags:

The Html tag:

The Html tag is used for writing you code in HTML language. It should be placed in the beginning of the coding. If you do not write it, the web page file saved as html will not be showing anything you have written. The <html> tag is used for coding in HTML language.

Head, Title and Body tags in HTML:

The Head section describes the head information which is displayed in the title bar of the web page. The tag is used for displaying the head section.

The title tag is for displaying the title on the Webpage. tag is used for adding title in the webpage. It should be nested within the head tag. It is optional, without it you can also process the web page but it is good for displaying title in the webpage.

It should be placed after the Html tag and before the body tag.

Listing 2: Title in HTML

<html>
<head>
<title>First Program Title</title>
</head>
<body>
<p> Welcome to Mr.Bool!</p>
</body>
</html>
Displaying HTML Title

Figure 12: Displaying HTML Title

Paragraphs and Headings in HTML:

In HTML, tags (<>) are used to apply any operation. When the operation is completed, close the tag used for that operation as “</>”. For working in paragraphs, you have to use “p” within the tags as “<p>” and “</p>” for closing the paragraph operation. Following example makes it clear:

Listing 3: Using tag P

<html>
<body>
<h1> Heading 1 </h1>
<p>Working in Paragraph. Welcome to Mr.Bool!</p>
</body>
</html>
Heading in HTML

Figure 13: Heading in HTML

You can use different headings using numbers from 1 up to 6 in which the lowest number i.e. 1 is for highest heading and 6 is for lowest heading and so on.

Lists in HTML:

Lists are used for displaying the text as bullets and numbering.

There are two types of lists:

  • Ordered lists
  • Unordered lists

For Ordered lists, <ol> tag is used and for Unordered lists, <ul> is used which states that the particular list is started. After initializing one of the two list types, use <li> tag inside the <ol> or <ul> tag for displaying lists. The following code will display the two types of lists discussed:

Listing 4: Lists in HTML

<html>
<head><title>
HTML Tutorial
</title>
</head>
<body>
<p>
<h3> Explaining Ordered Lists: </h3>
Fruits Liked by me:
<ol>
<li>Mangoes</li>
<li>Bananas</li>
<li>Water melons</li>
</ol>
<h3> Explaining Un-Ordered Lists: </h3>
Vegetables Liked by me:
<ul>
<li>Lady Fingers</li>
<li>Brinjals</li>
<li>Cabbages</li>
</ul>
</body>
</html>
 Displaying lists in HTML

Figure 14: Displaying lists in HTML

Comments in HTML:

Comments are very useful for people that want to identify things in their HTML. They are used when multiple people update website. They are also used to "block" the HTML code. The user does not see a comment unless they view the source code. Comments in HTML syntaxes as:

Listing 5: Comments in HTML:

<html>
<head><title>
HTML Tutorial
</title>
</head>
<body>
<p>
<!-- Comments Starts Here!!!
	And are not displayed in the output. -->
<!-- Comments #1: Fruits -->
<h3> Explaining Ordered Lists: </h3>
Fruits Liked by me:
<ol>
<li>Mangoes</li>
<li>Bananas</li>
<li>Water melons</li>
</ol>
<!--Comments #2: Vegetables-->
<h3> Explaining Un-Ordered Lists: </h3>
Vegetables Liked by me:
<ul>
<li>Lady Fingers</li>
<li>Brinjals</li>
<li>Cabbages</li>
</ul>
</body>
</html>
Comments not shown

Figure 15: Comments not shown

Horizontal Lines in HTML:

Horizontal lines can be added by writing the “<HR>” tag.

You can also change the width of the line as well as align them to the left or right by giving description of left, right after align is written.

For giving width, you have to give the width length in the description after width is written and is considered in pixels.

<hr> tag need not to be end as it only need starting tag. The following example will make it clear:

Listing 6: Code for showing Horizontal lines

<html>
<body>
<p>
Simple Horizontal Line:
<hr>
Enhanced Horizontal Line:
<hr align="left" width="50%">
</p>
</body>
</html>
Showing Horizontal Lines

Figure 16: Showing Horizontal Lines

Bold, Underline and Italic Texting in HTML:

You can bold, italic and underline the text in HTML by using the <b>, <u> and <i> tags. These tags should be closed after the particular text had been written. The following example demonstrates these operations:

Listing 7: Coding of Text Styles in HTML

<html>
<body>
<p>
<b>Writing BOLD style</b><br>
<i>Writing BOLD style</i><br>
<u>Writing BOLD style</u><br>
</p>
</body>
</html>
Text Styles in HTML

Figure 17: Text Styles in HTML

<br> tag:

The <br> tag is used for writing the text in next line. It is used for placing the text in next line. In the above example, it is clearly demonstrated.

Links in HTML:

Links are extremely useful for bringing the user to another page that may be within your website, or may be another website that you think would be useful to others. There are several different types of links. For local pages, you can create a simple link using the <a href> tag and after “href”, give the reference to the particular page you need. When the web page is present within that folder, you just write only the link without writing the complete address. For links to other sites, you have to write the complete address after the “href”. The following example makes it clear:

Listing 8: Making links in HTML

<html>
<body>
<p>
<h2> Links In HTML </h2>
<h5> Simple Link </h5>
<a href="first.html"> First Page </a>
<h5> Link to another Page </h5>
<a href="https://www.google.com.pk"> Click to go to Google </a>
</p>
</body>
</html>
Links in HTML

Figure 18: Links in HTML

Placing Images in HTML:

For adding images in HTML page, the <img> tag is used. The link to an image can be given within the <img> tag by writing the path to the image after <img>. If the image is present within the same folder where the html file is present, then you have to write only the image name. But if the image is present somewhere else, then the complete path where the image is present, should be given. You can also adjust the height and width of the image or resizing the image by setting the image size which can be accomplished by giving “width” after the path of the image and in the same way ”height” can be adjust by giving the height in pixels after the “height” is written.

The following example makes it clear:

Listing 9: Making links in HTML

<html>
<body>
<p>
<h2>Images In HTML </h2>
<h5>Image In same folder: </h5>
<img src="prog.jpg">
<h5>Image somewhere else: </h5>
<img src="C:\Users\Public\Pictures\Sample Pictures\Jellyfish.jpg"
width="200" height="200">
</p>
</body>
</html>
Links in HTML

Figure 19: Links in HTML

This is all for today’s article, hope you liked, see you next time.



Graduate student of Computer Science having hand-onn experience in Android, Java, PHP, HTML5, CSS3, MVC Framework and WebDesign techniques.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login