Assignment A-4: Web Technology Programming using HTML for hello world program Display images, Web links. ~ Fundamental Programming Language II

Aim:

Web Technology Programming using HTML for hello world program Display images, Web links.

Theory:

To perform this, take some steps

1. Start Notepad

a. Start------All programs------Accessories----Notepad

2. Save Html File: from the notepads menu select Save as option and then saving the file by giving file name with either the .htm & .html file extension.

Example- abc.html

3. Run the HTML file in the browser. Do all the tags in a single document.

HTML tags and elements

Elements are marked by start and end tags.

For instance, these tags tell the content of the element how to display.

· <strong> content </strong> tells the browser to show the word "content" as bold, or content

For another instance, these tags tell the content of the element how to display.

· <em> content </em> tells the browser to show the word "content" as italicized, or content

Attributes and values of tags

Some elements can take attributes that define the properties of the element and values such as centering a Heading 4.

· <h4 style="text-align: center;">centering a Heading 4</h4> tells the browser to show the words "centering a Heading 4" in Heading 4 style and centered, or

Centering a Heading 4

They follow rules about nesting and placement.

In general, both sides of the content must be balanced and consistent.

· <p><h4 style="text-align: center;">the marked-up content</h4></p> tells the browser to

open paragraph open heading 4 in a style in which the text is displayed in the center of the line the marked-up content close heading 4 close paragraph in mirrored order or, as it will display

1. The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. in your text ⇒ Starting your web page, pp. 43-45

2. <html> the outermost element, indicates that the enclosed text is html and therefore must use an html-capable program to open it

3. <head> the first element inside <html> is the HEAD a container for information about the document; this is where one might place meta-information about the document as well as the <title>page title</title> in your text ⇒ Creating a title, pp. 46-47

o remember, balanced and consistent; one must close the HEAD, </head>

4. <body> the BODY element contains all the text and other material that is to be displayed

o and, of course, the document is balanced as it is closed, </body>

5. and consistent, as HTML is closed as well - </html>

So the structure should look like

<!DOCTYPE html version>

<html>

<head>

<title>page title</title>

</head>

<body>

<p>a paragraph in the body of the page</p>

</body>

</html>

Although we can get away without putting end tags on elements (because many browsers are lax about it), we will adopt the habit of always closing any tag we open so that we are compliant with current and future standards.

Start with a title

Every HTML document needs a title. Here is what you need to type:

<title>My first HTML document</title>

Change the text from "My first HTML document" to suit your own needs. The title text is preceded by the start tag <title> and ends with the matching end tag </title>. The title should be placed at the beginning of your document.

To try this out, type the above into a text editor and save the file as "test.html", then view the file in a web browser. If the file extension is ".html" or ".htm" then the browser will recognize it as HTML. Most browsers show the title in the window caption bar. With just a title, the browser will show a blank page. Don't worry. The next section will show how to add displayable content.

Add headings and paragraphs

If you have used Microsoft Word, you will be familiar with the built in styles for headings of differing importance. In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important.

Here is how to add an important heading:

<h1>An important heading</h1>

and here is a slightly less important heading:

<h2>A slightly less important heading</h2>

Each paragraph you write should start with a <p> tag. The </p> is optional, unlike the end tags for elements like headings. For example:

<p>this is the first paragraph. </p>

<p>this is the second paragraph. </p>

Adding a bit of emphasis

You can emphasize one or more words with the <em> tag, for instance:

This is a really <em>interesting</em> topic!

Adding interest to your pages with images

Images can be used to make your Web pages distinctive and greatly help to get your message across. The simple way to add an image is using the <img> tag. Let's assume you have an image file called "peter.jpg" in the same folder/directory as your HTML file. It is 200 pixels wide by 150 pixels high.

The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. Something is still missing! People who can't see the image need a description they can read in its absence. You can add a short description as follows:

The alt attribute is used to give the short description, in this case "My friend Peter". For complex images, you may need to also give a longer description. Assuming this has been written in the file "peter.html", you can add one as follows using the longdesc attribute:

Adding links to other pages

What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world!

Links are defined with the <a> tag. Lets define a link to the page defined in the file "peter.html" in the same folder/directory as the HTML file you are editing:

This a link to <a href="peter.html">Peter's page</a>.

The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text.

If the file you are linking to is in a parent folder/directory, you need to put "../" in front of it, for instance:

If the file you are linking to is in a subdirectory, you need to put the name of the subdirectory followed by a "/" in front of it, for instance:

The use of relative paths allows you to link to a file by walking up and down the tree of directories as needed, for instance:

Which first looks in the parent directory for another directory called "college", and then at a subdirectory of that named "friends" for a file called "john.html".

To link to a page on another Web site you need to give the full Web address (commonly called a URL), for instance to link to www.w3.org you need to write:

This is a link to <a href="http://www.w3.org/">W3C</a>.

You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page:

This uses "/" to refer to the root of the directory tree, i.e. the home page.

Program:

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>

<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>

</p>

<p>This text is normal.</p> <p><b>This text is bold</b>.</p>

</body>

</html>

Conclusion: Hence HTML program is implemented.

Fundamental Programming Language II