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.
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:
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:
Figure 3: Install Options for Dreamweaver
Installation will start. Select “Yes” to start installation process:
Figure 4: Installing Dreamweaver
At last, the installation process completes successfully. Click “Done” to finish installation process.
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.
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.
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:
I recommend using the split option as it displays the code as well as the output of what you have designed.
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>
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:
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:
Figure 11: Path Address of html file
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>
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>
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>
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>
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>
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>
Figure 17: Text Styles in HTML
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>
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>
Figure 19: Links in HTML
This is all for today’s article, hope you liked, see you next time.