Basic Web Page Design: S.M. No. Rev. No. Effective Date

S.M. No. Rev. No.
Effective Date
: : :
SNTI/ITD/08 01 28-Feb-2008
Basic Web Page Design
Prepared by: Manmohan Singh
Page 1 of 25
For Basic Web page design the first requirement is creation of Static Web Pages. For creating Static web page we require the concept of HTML. Participants must go through this as it is very easy use. HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the W3C, the organisation charged with designing and maintaining the language. The definition of HTML is HyperText Markup Language. HyperText is the method by which you move around on the web by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear i.e. you can go to any place on the Internet whenever you want by clicking on links there is no set order to do things in. Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example). HTML is a Language, as it has code-words and syntax like any other language. HTML consists of a series of short codes typed into a text-file by the site author these are the tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages. _________________________ Prepared by Manmohan Singh Manager, ITA _________________________ Approved by Mr. RCB Singh Group Head ITA
What is HTML?
How does it work?
Page 2 of 25
Sl.No. Topic
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Creating a Web Page ... Creating a Basic HTML Page using Head Section Elements Creating HTML Page using Basic Body Section Elements Creating HTML Pages using List Elements Creating HTML Pages using Text Alignment Elements Creating HTML Pages using Font Elements Creating HTML Pages using Link Element Creating HTML Pages using Image Element HTML Tables Questionnaire for self evaluation Reference books
Page #
4 5 5 9 13 14 15 16 19 24 25
Page 3 of 25
Objectives After completing this lab, you will be able to : Create Basic HTML page. Use Head Section Elements. Use Basic Body Section Elements. Create HTML pages using List Elements. Create HTML pages using Text Alignment Elements. Create HTML pages using Font Elements. Create HTML pages using Image Elements. Prerequisites : Create a directory with your name in the root i.e. , C:\<YourName> . Create a directory named MyHTML under <YourName> directory i.e. , C:\<YourName>\MyHTML . It is not necessary to keep it in root, but it is suggested for easy browsing . It is suggested to perform all the exercises in a sequential order.
Creating HTML Page
Before you Begin
Exercise 1 Creating a Basic HTML Page

In this exercise , you will learn how to create a basic HTML page . A. Creating the first HTML page 1. On Start menu from win95/NT, select Programs, select Accessories and click on Notepad. The Notepad Application is Started. 2. Type the following HTML program in the Notepad exactly as given below. <HTML> <HEAD> <TITLE>FIRST PAGE</TITLE> </HEAD> <BODY> <H1>This is My First HTML Page</H1> </BODY> </HTML> 3. Save the file as FIRST.HTML in your HTML directory i.e. C:\<YourName>\My HTML (While saving, mention the file name with extension as FIRST.HTML , otherwise Notepad file name with extension as FIRST.HTML , otherwise Notepad file is saved as FIRST.TXT) . 4. Close the Notepad application. B. Testing your first HTML page. 1. Double click the Netscape Communicator Shortcut available on the desktop. The Netscape Communicator is launched. 2. On the File menu, click on open page. The open Page dialog box appears. 3. In this dialog box, click on Choose file . The Open dialog box appears.
Page 4 of 25
From the Open dialog box , select the Directory C:\YourName\MyHTML and select the HTML file named FIRST. HTML , then click Open . This file name appears in the location field of Open page dialog box. 5. Click Open. 6. Do not Exit the browser, but you can minimize it , since it is required to remain active to execute Exercise 2.
4.
Exercise 2 Creating a Basic HTML Pages using Head Section Elements

A. Working with TITLE Element. 1. In the browser, on GO menu, you could see an element of menu named as FIRSTPAGE at the bottom, this is the TITLE Element given in HTML Page FIRST.HTML in Exercise 1. 2. 3. 4. Let us change the TITLE by editing FIRST.HTML. Open the file FIRST.HTML using Notepad. Make the changes to the file by replacing with the text in Bold. <HTML> <HEAD> <TITLE>FIRST PAGE AFTER EDITING</TITLE> </HEAD> <BODY> <H1>This is My First HTML Page</H1> </BODY> </HTML> After editing, Save the file. Reload the page in the browser and check for the Title on the GO menu of Browser.
5. 6.
Exercise 3
The remainder of your HTML page, including all the text and other content (links, pictures, and so on) is enclosed within a <BODY> tag. In combination with the <HTML> and <HEAD> tags, this looks like: <HTML> <BODY> <H1>This is My First HTML Page</H1> </BODY> </HTML> A. Adding a paragraph to the body in FIRST.HTML 1. Open the file FIRST.HTML using Notepad. 2. Make the changes to the file with the text in Bold. <HTML> <HEAD> <TITLE>FIRST PAGE AFTER EDITING</TITLE> </HEAD> <BODY> <H1>This is My First HTML Page</H1> <P>Demonstrating paragraph in the HTML file. The World Wide Web is a Communication highway</P> Prepared by: Manmohan Singh Page 5 of 25
Creating HTML Pages using Basic Body Section Elements
3. 4.
<P>It deals with many ways of presenting information. To users, Web is network of information</P> </BODY> </HTML> After editing, Save the file. Reload the page in the browser.
B. Adding Line Break to FIRST.HTML
1. Open the file FIRST.HTML using Notepad. 2. Make the changes to the file with the text in Bold
<HTML> <HEAD> <TITLE>FIRST PAGE AFTER EDITING</TITLE> </HEAD> <BODY> <H1>This is My First HTML Page</H1> <P><BR>Demonstrating paragraph in the HTML file. </BR> The World Wide Web is a Communication highway</P> <P><BR>It deals with many ways of presenting information. </BR> To users, Web is network of information</P> </BODY> </HTML>
3. 4.
After editing, Save the file. Reload the page in the browser.
C. Working with Heading Elements Headings are used to divide sections of text, just like this book is divided. The numbers indicate heading levels (H1 through H6). The headings, when theyre displayed, are not numbered. They are displayed either in bigger or bolder text, or centered or underlined, or capitalized-something that makes them stand out from regular text. 1. 2. Open Notepad application. Type the following HTML program in the Notepad exactly as given below. <HTML> <HEAD> <TITLE>WORKING WITH HEAD ELEMENT</TITLE> </HEAD> <BODY> <BR><H1>This is an Head Element example</H1><BR> <BR><H1>This is text Heading 1</H1><BR> <BR><H2>This is text Heading 2</H2><BR> <BR><H3>This is text Heading 3</H3><BR> <BR><H4>This is text Heading 4</H4><BR> <BR><H5>This is text Heading 5</H5><BR> <H6>This is text Heading 6</H6> </BODY> </HTML> Save the file as HEADING.HTML in your HTML directory i.e., C:\<YourName>\MyHTML Close the Notepad application. Open the file HEADING.HTML in the browser.
3. 4. 5.
D. Working with Horizontal Line Element The <HR> Tag does not require any end tag; it is a self-terminating string. 1. Open Notepad application. 2. Type the following HTML program in the Notepad exactly as given below. <HTML> Prepared by: Manmohan Singh Page 6 of 25
3. 4. 5.
<HEAD> <TITLE>WORKING WITH HORIZONTAL LINES</TITLE> </HEAD> <BODY> <BR><H1>this is an Horizontal Line Element example</H1></BR> <HR>First line is above me <HR>Second line is above me </BODY> </HTML> Save the file as HORIZON.HTML in your HTML directory i.e., C:\<YourName>\MyHTML Close the Notepad application. Open the file HORIZON.HTML in the browser.
E. Working with Logical Formatting Elements Logical formatting elements are to present the text in an impressive way. You will try out all the Logical formatting elements. In this procedure, the text inside every tag describes each logical formatting element properties. 1. 2. Open Notepad application. Type the following HTML program in the Notepad exactly as givn below. <HTML> <HEAD> <TITLE>WORKING WITH LOGICAL FORMATTING ELEMENTS</TITLE> </HEAD> <BODY> <H1>This is a Logical Formatting Element example</H1><BR> <CITE>This is citation element used to indicate the quotation</CITE><BR> <CODE>Code element is used to present small amount of computer code</CODE><BR> <EM>Emphasis element is to present significant text</EM><BR> <KBD>It is used to represent normal keyboard text</KBD><BR> <SAMP>Simple element to show in a monoscape font</SAMP><BR> <STRONG>Strong element to show text in bold format</STRONG><BR> <VAR>To present normal italic variable elements</VAR><BR> </BODY> </HTML> 3. Save the file as LFORMAT.HTML in your HTML directory i.e., C:\<YourName>\MyHTML 4. Close the Notepad application. 5. Open the file LFORMAT.HTML in the browser.
F. Working with Physical Formatting Elements 1. 2. Open the file LFORMAT.HTML using Notepad. Make the changes to the file with the text in Bold. <HTML> <HEAD> <TITLE>WORKING WITH PHYSICAL FORMATTING ELEMENTS</TITLE> </HEAD> <BODY> <H1>This is a Physical Formatting Element example</H1><BR> <CITE>This is citation element used to indicate the quotation</CITE><BR> <CODE>Code element is used to present small amount of computer code</CODE><BR> <EM>Emphasis element is to present significant text</EM><BR> <KBD>It is used to represent normal keyboard text</KBD><BR> <SAMP>Simple element to show in a monoscape font</SAMP><BR> <STRONG>Strong element to show text in bold format</STRONG><BR> <VAR>To present normal italic variable elements</VAR><BR> Prepared by: Manmohan Singh Page 7 of 25
<B>Displays the text in Bold</B> <I>Displays the text in Italic</I> <TT>Displays the text in Teletype</TT> </BODY> </HTML> 3. After editing, Save the file. 4. Reload the page in the browser. G. Working with Preformatted Text Element The preformatted text tag <PRE> that includes any number of white spaces, that you put into text surrounded by the <PRE> and </PRE> tags is retained in the final output. With the <PRE> and </PRE> tags, you can format the text the way you want it to look, and it will be presented that way. 1. Open Notepad application. 2. Type the following HTML program in the Notepad exactly as given. <HTML> <HEAD> <TITLE>WORKING WITH PREFORMATTED TEXT ELEMENT</TITLE> </HEAD> <BODY> <H1>This is an Preformatted Text Element example</H1><BR> <PRE> Diameter Venus Earth Mars Jupiter Saturn Uranus Distance 7700,67 7920 4200,141 88640,483 74500,886 32000,1782 Time to Rotate 244 days 365 days 24 hrs 687 days 24 hrs 24 mins 11.9 years 9 hrs 50 mins 29.5 years 10 hrs 39 mins 84 years 23 hrs
3. 4. 5.
</PRE> </BODY> </HTML> Save the file as PREFORMAT.HTML in your HTML directory i.e., C:\<YourName>\MyHTML Close the Notepad application. Open the file PREFORMAT.HTML in the browser.
H. Working with Character Entities 1. 2. Open Notepad application. Type the following HTML program in the Notepad exactly as given below. <HTML> <HEAD> <TITLE>WORKING WITH CHARACTER ENTITIES</TITLE> </HEAD> </BODY> <H1>This is Character Entities Example</H1> INDIA ® </BODY> </HTML> Save the file as CHARACTER.HTML in your HTML directory i.e., C:\<YourName>\MyHTML Close the Notepad application. Open the file CHARACTER.HTML in the browser.
3. 4. 5.
Page 8 of 25
Exercise 4 Creating HTML Pages using List Elements

1. 2.
A. Working with Ordered Lists The <OL> Tag encloses the text and assigns numbers in an incremental order. Open Notepad application. Type the following HTML program in the Notepad exactly as given below. <HTML> <HEAD> <TITLE>WORKING WITH ORDERED LISTS</TITLE> </HEAD> <BODY> <H1>This is an Ordered List Element example</H1><BR> <p>orderly numbering of points. The tag increments the numbers. </p> <OL> <LI>This is the First point and numbered one. <LI> This is the second point and number two. <LI> This is the Third point and number three. <LI> This is the Fourth point and number four. </OL> </BODY> </HTML> 3. Save the file as LISTS.HTML in your HTML directory i.e. C:\<Your Name>\MYHTML 4. Close the notepad application. 5. Open the file list.html in the browser.
B. Working with Unordered List Using Unordered list, create bullets for each point under the numbers/ordered list. The<UL> Tag encloses the text and assign bullets for each point in the list. 1. Open the file LISTS.HTML using Notepad. 2. Make the changes to the file with the text in bold. <HTML> <HEAD> <TITLE>WORKING WITH UNORDERED LISTS</TITLE> </HEAD> <BODY> <H1>This is an Ordered List Element example</H1><BR> <p>orderly numbering of points. The tag increments the numbers. </p> <OL> <LI>This is the First point and numbered one. <LI> This is the second point and number two. <LI> This is the Third point and number three. <LI> This is the Fourth point and number four. </OL> <HR><H1>This is an Unordered list element example</H1> <BR> <P>Points are separated with bullets. </P> <UL> <LI>This is the first point preceded with a bullet. <LI>This is the Second point preceded with a bullet. <LI>This is the Third point preceded with a bullet. <LI>This is the Fourth point preceded with a bullet. Prepared by: Manmohan Singh Page 9 of 25
3. 4.
</UL> </BODY> </HTML> After editing, Save the file. Reload the page in the browser.
C. Working with Glossary Lists Each part of the glossary list has its own tag: <DT>for the term (Definition Term), and<DD> for its definition (Definition Definition). <DT> and <DD> are both one-sided tags, and they usually occur in pairs, although most browsers can handle single terms or definitions. The entire glossary list is indicated by the tags <DL>.</DL> (definition list) 1. Open the file LISTS.HTML using Notepad. 2. Make the changes to the file with the text in Bold. <HTML> <HEAD> <TITLE>WORKING WITH GLOSSARY LISTS</TITLE> </HEAD> <BODY> <H1>This is an Ordered List Element example</H1><BR> <P>Orderly numbering of points. The Tag increments the numbers. </P> <OL> <LI>This is the First point and numbered one. <LI> This is the second point and number two. <LI> This is the 3rd point and number three. <LI> This is the 4th point and number four. </OL> <HR><H1>This is an Unordered list element example</H1><BR> <P>Points are separated with bullets. </P> <UL> <LI>This is the first point preceded with a bullet. <LI>This is the second point preceded with a bullet. <LI>This is the third point preceded with a bullet. <LI>This is the fourth point preceded with a bullet. </UL> <HR><H1>This is a Glossary List Element example</H1> <P>The glossaries are indented to the right. </P> <DL> <DT>Basil<DD>Annual.Can grow four feet high; the scent of its tiny white flowers is heavenly <DT>Oregano<DD>Perenial.Sends out underground runners and is difficult to get rid of once established. <DT>Coriander<DD>Annual.Also called cilantro, coriander likes cooler weather of spring and fall. </DL> </BODY> </HTML> 5. After editing, Save the file. 6. Reload the page in the browser. D. Working with Menu Lists <IL>Tag before Go left ignores to keep the bullet list and the rest three are bulleted.The entire Menu List is indicated by the tags <MENU></MENU> 1. Open the file LIST.HTML using Notepad. 2. Make the changes to the file with the text in Bold. <HTML> <HEAD> Prepared by: Manmohan Singh Page 10 of 25
3. 4.
<TITLE>WORKING WITH MENU LISTS</TITLE> </HEAD> <BODY> <H1>This is an Ordered List Element example</H1><BR> <P>Orderly numbering of points. The Tag increments the numbers. </P> <OL> <LI>This is the Ist point and numbered one. <LI> This is the second point and number two. <LI> This is the 3rd point and number three. <LI> This is the 4th point and number four. </OL> <HR><H1>This is an Unordered list element example</H1><BR> <P>Points are separated with bullets. </P> <UL> <LI>This is the first point preceded with a bullet. <LI>This is the second point preceded with a bullet. <LI>This is the third point preceded with a bullet. <LI>This is the fourth point preceded with a bullet. </UL> <HR><H1>This is a Glossary List Element example</H1> <P>The glossaries are indented to the right. </P> <DL> <DT>Basil<DD>Annual.Can grow four feet high; the scent of its tiny white flowers is heavenly <DT>Oregano<DD>Perenial.Sends out underground runners and is difficult to get rid of once established. <DT>Coriander<DD>Annual.Also called cilantro, coriander likes cooler weather of spring and fall. </DL> <HR><H1>This is a Menu List Element Example</H1><BR> <MENU> <LI>Go left <LI>Go right <LI>Go up <LI>Go down </MENU> </BODY> </HTML> After editing, Save the file. Reload the page in the browser.
E. Working with Nesting Lists 1. 2. Open the file LIST.HTML using Notepad. Make the changes to the file with the text in Bold. <HTML> <HEAD> <TITLE>WORKING WITH NESTED LISTS</TITLE> </HEAD> <BODY> <H1>This is an Ordered List Element example</H1><BR> <P>Orderly numbering of points. The Tag increments the numbers. </P> <OL> <LI>This is the Ist point and numbered one. <LI> This is the second point and number two. Page 11 of 25
3. 4.
<LI> This is the 3rd point and number three. <LI> This is the 4 th point and number four. </OL> <HR><H1>This is an Unordered list element example</H1><BR> <P>Points are separated with bullets. </P> <UL> <LI>This is the first point preceded with a bullet. <LI>This is the second point preceded with a bullet. <LI>This is the third point preceded with a bullet. <LI>This is the fourth point preceded with a bullet. </UL> <HR><H1>This is a Glossary List Element example</H1> <P>The glossaries are indented to the right. </P> <DL> <DT>Basil<DD>Annual.Can grow four feet high; the scent of its tiny white flowers is heavenly <DT>Oregano<DD>Perenial.Sends out underground runners and is difficult to get rid of once established. <DT>Coriander<DD>Annual.Also called cilantro, coriander likes cooler weather of spring and fall. </DL> <HR><H1>This is a Menu List Element Example</H1><BR> <MENU> <LI>Go left <LI>Go right <LI>Go up <LI>Go down </MENU> <HR><H1>This is a Menu List Element example</H1><BR> <UL> <LI>Books <LI>Compact Disks <UL> <LI>Delphi in 21 Days <LI>Visual Programming <LI>Oracle Unleashed <LI>Object C++ <LI>Visual Studio </UL> <LI>Stationary </UL> </BODY> </HTML> After editing, Save the file. Reload the page in the browser.
Page 12 of 25
Exercise 5 Creating HTML Pages using Text Alignment Elements
A. Creating a HTML Pages with Simple alignment 1. Open Notepad application. 2. Type the following HTML program in the Notepad exactly as given below. <HTML> <HEAD> <TITLE>WORKING WITH TEXT ALIGNMENTS</TITLE> </HEAD> <BODY> <H1>This is Text Alignment Element example</H1><BR> <P>Each Paragraph is Aligned differently.</P> <HR><P ALIGN=CENTER>This text is Aligned in the Center of the page</P> <P ALIGN=LEFT>This text is Aligned to the Left of the page</P> <P ALIGN=RIGHT>This text is Aligned to the Right of the page</P> </BODY> </HTML> 3. 4. 5. Save the file as ALIGN.HTML in your HTML directory i.e., C:\<YourName>\MyHTML Close the Notepad application Open the file ALIGN.HTML in the browser.
B. Working with Text Alignment Blocks <DIV>Tag encloses a set of statements and sets the alignment property of all the statements in this tag, which is specified like DIV ALIGN=RIGHT OR LEFT OR CENTER. 1. Open the file ALIGN.HTML Notepad. 2. Make the changes to the file with the text in Bold. <HTML> <HEAD> <TITLE>WORKING WITH TEXT ALIGNMENTS BLOCKS</TITLE> </HEAD> <BODY> <H1>This is Text Alignment Element example</H1><BR> <P>Each Paragraph is Aligned differently. </P> <HR><P ALIGN=CENTER>This text is Aligned in the Center of the page</P> <P ALIGN=LEFT>This text is Aligned to the Left of the page</P> <P ALIGN=RIGHT>This text is Aligned to the Right of the page</P> <HR><H1>This is Text Alignment Element example on Block of text</H1></HR> <P>Each Block of text is Aligned differently. </P> <DIV ALIGN =RIGHT> <H1>This is the first line of the<B>RIGHT</B> block<H1> <H2>This is the second line of the <B>RIGHT</B> block</H2> </DIV> <DIV ALIGN =LEFT> <H1>This is the first line of the<B>LEFT</B> block<H1> <H2>This is the second line of the <B>LEFT</B> block</H2> </DIV> <DIV ALIGN =CENTER> <H1>This is the first line of the<B>CENTER</B> block<H1> <H2>This is the second line of the <B>CENTER</B> block</H2> </DIV> </BODY> </HTML> 3. 4. After editing, Save the file. Reload the page in the browser. Page 13 of 25
Exercise 6
A. Default Font Size Values of the Font Size range from 1 to 7 and 3 is the default Font Size. 1. Open Notepad application. 2. Type the following HTML program in the Notepad exactly as given below. <HTML> <HEAD> <TITLE>WORKING WITH DEFAULT FONT SIZE</TITLE> </HEAD> <BODY> This line of text is displayed with the Default Font Size. </BODY> </HTML> 3. Save the file as FONT.HTML in your HTML directory i.e., C:\<YourName>\MyHTML 4. Close the Notepad application. 5. Open the file FONT.HTML in the browser to view the page. B. Working with Varying Font sizes 1. Open the file FONT.HTML using Notepad. 2. Make the changes to the file with the text in Bold. <HTML> <HEAD> <TITLE>WORKING WITH VARYING FONT SIZE</TITLE> </HEAD> <BODY> This line of text is displayed with the Default Font Size. <HR><H3>Decreasing Font Size</H3><BR> <FONT SIZE=6>This line of code displays font size SIX</FONT><BR> <FONT SIZE=5>This line of code displays font size<B> FIVE</B></FONT><BR> <FONT SIZE=4>This line of code displays font size<I>FOUR</I></FONT><BR> </BODY> </HTML> 3. After editing, Save the file. 4. Reload the page in the browser. C. Working with Negative Font Sizes 1. Open the file FONT.HTML using Notepad. 2. Make the changes to the file with the text in Bold. <HTML> <HEAD> <TITLE>WORKING WITH NEGATIVE FONT SIZE</TITLE> </HEAD> <BODY> This line of text is displayed with the Default Font Size. <HR><H3>Decreasing Font Size</H3><BR> <FONT SIZE=6>This line of code displays font size SIX</FONT><BR> <FONT SIZE=5>This line of code displays font size<B> FIVE</B></FONT><BR> <FONT SIZE=4>This line of code displays font size<I>FOUR</I></FONT><BR> <BASE FONT SIZE=7> <HR><H3>Increasing Font Size</H3><BR> <FONT SIZE=-3>This line of code displays font size, 7-3 = 4</FONT><BR> <FONT SIZE=-2>This line of code displays font size, 7-2 = 5</FONT><BR> <FONT SIZE=-1>This line of code displays font size, 7-1 = 6</FONT> </BODY> Prepared by: Manmohan Singh Page 14 of 25
Creating HTML Pages using Font Elements
</HTML> 3. After editing, Save the file. 4. Reload the page in the browser. D. Working with Font Face Element 1. Open the file FONT.HTML using Notepad. 2. Make the changes to the file with the text in Bold. <HTML> <HEAD> <TITLE>WORKING WITH FONT FACE</TITLE> </HEAD> <BODY> This line of text is displayed with the Default Font Size. <HR><H3>Decreasing Font Size</H3><BR> <FONT SIZE=6>This line of code displays font size SIX</FONT><BR> <FONT SIZE=5>This line of code displays font size<B> FIVE</B></FONT><BR> <FONT SIZE=4>This line of code displays font size<I>FOUR</I></FONT><BR> <BASE FONT SIZE=7> <HR><H3>Increasing Font Size</H3><BR> <FONT SIZE=-3>This line of code displays font size, 7-3 = 4</FONT><BR> <FONT SIZE=-2>This line of code displays font size, 7-2 = 5</FONT><BR> <FONT SIZE=-1>This line of code displays font size, 7-1 = 6</FONT> <HR><H3>Using Font Face</H3><BR> <FONT FACE=Futura>This font is displayed with font face as Futura </FONT><BR> <FONT FACE=Helvetica>This font is displayed with font face as Helvetica </FONT><BR> <FONT FACE=Sans serif>This font is displayed with font face as Sans serif </FONT> </BODY> </HTML> 3. After editing, Save the file. 4. Reload the page in the browser. E. Working with Font Color 1. Open the file FONT.HTML using Notepad. 2. Make the changes to the file with the text in Bold. <HTML> <HEAD> <TITLE>WORKING WITH FONT COLOR</TITLE> </HEAD> <BODY> This line of text is displayed with the Default Font Size. <HR><H3>Decreasing Font Size</H3><BR> <FONT SIZE=6>This line of code displays font size SIX</FONT><BR> <FONT SIZE=5>This line of code displays font size<B> FIVE</B></FONT><BR> <FONT SIZE=4>This line of code displays font size<I>FOUR</I></FONT><BR> <BASE FONT SIZE=7> <HR><H3>Increasing Font Size</H3><BR> <FONT SIZE=-3>This line of code displays font size, 7-3 = 4</FONT><BR> <FONT SIZE=-2>This line of code displays font size, 7-2 = 5</FONT><BR> <FONT SIZE=-1>This line of code displays font size, 7-1 = 6</FONT> <HR><H3>Using Font Face</H3><BR> <FONT FACE=Futura>This font is displayed with font face as Futura </FONT><BR> <FONT FACE=Helvetica>This font is displayed with font face as Helvetica </FONT><BR> <FONT FACE=Sans serif>This font is displayed with font face as Sans serif </FONT> <HR><H3>Using Font Face with Colors</H3><BR> <FONT FACE=Futura><FONT COLOR=#FF0000>This font is displayed with font face as Futura </FONT><BR> <FONT FACE=Helvetica><FONT COLOR=#0000FF>This font is displayed with font face as Helvetica </FONT><BR> Prepared by: Manmohan Singh Page 15 of 25
<FONT FACE=Sans serif><FONT COLOR=#000000>This font is displayed with font face as Sans serif </FONT> </BODY> </HTML> 3. After editing, Save the file. 4. Reload the page in the browser.
Exercise 7 Creating HTML Pages using Link Element
To link HTML Pages, it is necessary to have a master document called home page and create links to other subsidiary pages.
A. To Create a Home Page 1. Open Notepad application. 2. Type the following HTML program in the Notepad exactly as given below. <HTML> <HEAD> <TITLE>HOME PAGE</TITLE> </HEAD> <BODY> <CENTER> <H1><FONT COLOR=#FF0000>HOME PAGE</FONT.</H1> </CENTER> <HR><H3>FIRST.HTML FILE</H3><BR> <H3>ALIGN.HTML FILE</H3><BR> <H3>LISTS.HTML FILE</H3><BR> <H3>FONT.HTML FILE</H3> </BODY> </HTML> 3. Save the file as HOME.HTML in your HTML directory i.e., C:\YourName>\MyHTML 4. Close the Notepad application. B. Linking to other pages 1. Open the file HOME.HTML using Notepad. 2. Make the changes to the file with the text in Bold. <HTML> <HEAD> <TITLE>HOME PAGE WITH LINKS</TITLE> </HEAD> <BODY> <CENTER> <H1><FONT COLOR=#FF0000>HOME PAGE</FONT></H1> </CENTER> <HR><H3><A HREF=file:///C:/<YourName>/MyHTML/FIRST.HTML> FIRST.HTML FILE</A></H3><BR> <HR><H3><A HREF=file:///C:/<YourName>/MyHTML/ALIGN.HTML> ALIGN.HTML FILE</A></H3><BR> <HR><H3><A HREF=file:///C:/<YourName>/MyHTML/LISTS.HTML> LISTS.HTML FILE</A></H3><BR> <HR><H3><A HREF=file:///C:/<YourName>/MyHTML/FONT.HTML> FONT.HTML FILE</A></H3> </BODY> </HTML> 3. 4. After editing, Save the file. Reload the page in the browser. Page 16 of 25
C. Linking back to Home Page 1. Open the file FIRST.HTML using Notepad. 2. Before the End Tag of Body Element type the following HTML code in FIRST.HTML <FONT COLOR=#FF0000><A HREF= file:///C:/YourName>/MyHTML/HOME.HTML>BACK TO HOME PAGE</A></FONT> 3. After editing, Save the file. 4. Reload the page FIRST.HTML in the browser. 5. To complete this procedure repeat the above steps for the remaining file:ALIGN.HTML, LIST.HTML and FONT.HTML D. Navigating between Links 1. Reload HOME.HTML in browser. 2. Click on the Hyperlink FIRST.HTML, click on the Link BACK TO HOME to reload page HOME.HTML. 3. In FIRST.HTML, click on the BACK TO HOME to reload page HOME.HTML. 4. To complete this procedure, click on the rest of the links available on HOME.HTML.
Exercise 8 Creating HTML Pages using Image Element
Images make HTML pages more colorful. To add image to an HTML file copy some image files into you r MyHTML directory. Browser support .GIF and .JPEG image type files.
Note: To source the images files used in these exercises, place these images into the directory C:\<YourName>\MyHTML A. Creating an HTML Page with Images. 1. Open Notepad application. 2. Type the following HTML program in the Notepad exactly as given below. <HTML> <HEAD> <TITLE>WORKING WITH IMAGES</TITLE> </HEAD> <BODY> <CENTER> <H1><FONT COLOR=#FF0000>This is an Image example</FONT></H1> </CENTER> <IMG SRC= file:///C:/<YourName>/MyHTML>Logo.gif> <HR>FIRST.HTML FILE<BR> ALIGN.HTML FILEM<BR> </BODY> </HTML> 3. Save the file as IMAGE.HTML in your HTML directory i.e., C:\<YourName>\MyHTML 4. Close the Notepad application. 5. Open the file IMAGE.HTML B. To add Background to the Page To set the Images as background, edit the images.html page and place the following HTML syntax into the page. 1. Open the file IMAGE.HTML using Notepad. 2. Make the changes to the file with the text in Bold. <HTML> <HEAD> <TITLE>WORLING WIYH BACKGROUND IMAGES</TITLE> </HEAD> <BODY BACKGROUND= Backgrd.gif> <CENTER> <H1><FONT COLOR=#FF0000>This is an Image example</FONT></H1> Prepared by: Manmohan Singh Page 17 of 25
3. 4.
</CENTER> <IMG SRC= file:///C:/<YourName>/MyHTML/Logo.gif WIDTH=24 HEIGHT=24> <HR>FIRST.HTML FILE<BR> ALIGN.HTML FILE </BODY> </HTML> After editing, Save the file. Reload the page IMAGE.HTML in the browser
C. Adding Clickable Images Images are not just for displaying, but can be used to link other pages. Its c lick property determines us an action to be done. 1. Open the file IMAGE.HTML using Notepad. 2. Make the changes to the file with the text in Bold. <HTML> <HEAD> <TITLE>WORLING WIYH CLICKABLE IMAGES</TITLE> </HEAD> <BODY BACKGROUND= Backgrd.gif> <CENTER> <H1><FONT COLOR=#FF0000>This is a clickable Image example</FONT></H1> </CENTER> <IMG SRC= file:///C:/<YourName>/MyHTML/Logo.gif WIDTH=24 HEIGHT=24> <HR><CENTER><A HREF= first. HTML><IMG SRC= First.gif BORDER=0 HEIGHT=50 WIDTH=49></A></CENTER><BR> <CENTER><A HREF=Font.HTML><IMG SRC= Font.gif BORDER=0 HEIGHT=50 WIDTH=49></A></CENTER> </BODY> </HTML> 3. After editing, Save the file. 4. Reload the page IMAGE.HTML in the browser and click on the image First.gif or Font.gif
Page 18 of 25
HTML Tables
Objectives
After completing this exercise, you will be able to: Create HTML Tables. Add Alignment to Table cells. Add Background colors to Table cells. Add Media to Table cells.
Before You Begin
Prerequisites:
Create a directory C:\<YourName>/Tables Copy the image Ani.gif, Table.gif and Surf.gif into the directory C:\<YourName>/Tables requesting from the instructor.
A. To Create a Basic Table 1. Open Notepad and type the following. <HTML> <TITLE>A Basic Table</TITLE> <BODY> </BODY> </HTML> 2. Save the Page as Table.html in directory c:\<YourName>\Tables. 3. Now add the <Table> tag to the file that is highlighted with text in bold listed below. <html> <title> A Basic Table</title> <body> <table border=1> </table> </body> </html> 4. Directly underneath the <table>tag , place the <tr> tag . This defines the beginning of your first table row . Directly above the </table> tag. Place the closing </tr> tag. <html> <title> A Basic Table</title> <body> <table border=1> <tr> </tr> </table> </body> </html> 5. Drop down to the next line and type in the tag to determine the starting point of your first table cell , <td>. Below this, add a line of text and then close the cell with the </td> closing tag. <html> <title> A Basic Table</title>
Prepared by: Manmohan Singh Page 19 of 25
Exercise 1 Creating HTML Pages
<body> <table border=1> <tr> <td> This is my first table cell , located in the first row of the table. </td> </tr> </table> </body> </html> 6. Save the file and view it in your web browser B. Using <Table> Tag Attributes. The following task will show you how to use <Table> tag attributes. 2. Change the border value of <Table> tag to 2 as listed below. <html> <title> Task: table ll</title> <body> <table border=2> <tr> <td> This is my first table cell , located in the first row of the table. </td> <td> This is my second table cell , which also creates the second column of the table. </td> </tr> </table> </body> </html> 3. Save the file as Table2.html in your directory. 4. Open the page Table2.html in browser. C. To add Width and Alignment to table Cells. 1. Begin by opening Table.html in Notepad. Change the title to Task: Table III as listing below in bolded text. <html> <title> Task: table ll</title> <body> <table border=2> <tr> <td> This is my first table cell , located in the first row of the table. </td> <td> This is my second table cell , which also creates the second column of the table. </td> </tr> </table>
</body> </html> 2. In the <Table> tag , add a value for the border, cellpadding, cellspacing and width attributes as listed below in the bolded text. <html> <title> Task: table llI</title> <body> <table border=1 cellpading=10 cellspacing=0 width=400> <tr> <td> This is my first table cell , located in the first row of the table. </td> <td> This is my second table cell , which also creates the second column of the table. </td> </tr> </table> </body> </html> 3. Add the <table> tag attributes to the first table cell as shown in the listing below with bolded text. The width attribute is added in percentage. <html> <title> Task: table llI</title> <body> <table border=1 cellpading=10 cellspacing=0 width=400> <tr> <td align=left valign=top width=40%> This is my first table cell , located in the first row of the table. </td> <td> This is my second table cell , which also creates the second column of the table. </td> </tr> </table> </body> </html> 4. Add the <table> tag attributes to the second table cell as shown in the listing below with bolded text. The width attribute is added in percentage. <html> <title> Task: table llI</title> <body> <table border=1 cellpading=10 cellspacing=0 width=400> <tr> <td align=left valign=top width=40%> This is my first table cell , located in the first row of the table. </td> <td align = middle valign = top width = 50%>
5. D. 1.
2.
3.
This is my second table cell , which also creates the second column of the table. </td> </tr> </table> </body> </html> Save the file as table3.html and open it in browser to the view changes. Adding Rows and columns Open your HTML editor and create a basic HTML template. Make changes to the basic template with the text in bold as listed below. The changes include the <body> tag attribute and <Table> tag and its attributes. The bgcolor attribute of <Body> tag indicates the background color of the page where #FFFFFF indicates white color. <html> <title> Task: Table IV </title> <body bgcolor= #FFFFFF> <table border = 1 cellpadding=10 cellspacing = 10 width = 600> </table> </body> </html> Now begin adding rows by placing two <TR> tags inside the <Table> tag as listed below in bolded text. <html> <title> Task: Table IV </title> <body bgcolor= #FFFFFF> <table border = 1 cellpadding=10 cellspacing = 10 width = 600> <tr> </tr> <tr> </tr> </table> </body> </html> Now , add two table cell , <td>,inside each row , with some text to fill the cell as listed below in bolded text. <html> <title> Task: table lV </title> <body bgcolor= #FFFFFF> <table border=1 cellpading=10 cellspacing=10 width=600> <tr> <td> This is my first table cell , located in the first row of the table. </td> <td> This is my second table cell , which also creates the second column of the table. </td> </tr> <tr>
Page 22 of 25
<td> This is my third table cell, which is in the first column of the second row. </td> <td> This is my fourth table cell, located in the second column of the second row. </td> </tr> </table> </body> </html> 4. Save the file as Table4.html . 5. Open the file Table4.html in the browser to View the table you have just created and see if it resembles the table3.html. If so good job ! If not, go back and carefully review your syntax to see if youve left a tag out. E. Working with Column and Row Span Column and row span can be tricky but
Page 23 of 25
Questionnaire for self evaluation

Now here are some questions to answer. 1. What does HTML stand for? 2. Assuming that we have the proper computer platforms, which of the following are legal names for web pages? a) contents.htm b) ordering.html c) homepage.txt d) faq.htl e) ThankYou505.htm f) products-warehouse.html 3. Answer True or False: HTML web pages are always saved as text only files. 4. What web page will display if the URL is www.sntihtml.org? 5. What does HR stand for in <HR> 6. Do all tags require a beginning and an ending tag? 7. Must tags be written in capital (upper case) letters? 8. Which heading size is closest to the normal size? 9. What is HRef tag do? 10. How a image can be displayed on a page? 11. What is a Table Tag do? 12. What is use of TR Tag? 13. What is use of TD Tag? 14. What is the use of Cell padding and Cell spacing?
Page 24 of 25
Reference books BPB Publications

Dynamic HTML: Master the Essentials HTML 4.0 - No Experience Required HTML Example Book HTML Complete Hands On HTML Learn Advanced HTML with DHTML Learning HTML 4.0 Mastering HTML 4 Premium Edition
Page 25 of 25

Basic Web Page Design: S.M. No. Rev. No. Effective Date

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Basic Web Page Design: S.M. No. Rev. No. Effective Date

Hochgeladen von

Copyright:

Verfügbare Formate

S.M. No. Rev. No.

Basic Web Page Design

Prepared by: Manmohan Singh

How does it work?

Prepared by: Manmohan Singh

Prepared by: Manmohan Singh

Creating HTML Page

Before you Begin

Exercise 1 Creating a Basic HTML Page

Prepared by: Manmohan Singh

Exercise 2 Creating a Basic HTML Pages using Head Section Elements

Creating HTML Pages using Basic Body Section Elements

B. Adding Line Break to FIRST.HTML

Prepared by: Manmohan Singh

Exercise 4 Creating HTML Pages using List Elements

Prepared by: Manmohan Singh

Prepared by: Manmohan Singh

Exercise 5 Creating HTML Pages using Text Alignment Elements

Prepared by: Manmohan Singh

Creating HTML Pages using Font Elements

Exercise 7 Creating HTML Pages using Link Element

Prepared by: Manmohan Singh

Exercise 8 Creating HTML Pages using Image Element

Prepared by: Manmohan Singh

Before You Begin

Exercise 1 Creating HTML Pages

Prepared by: Manmohan Singh

Prepared by: Manmohan Singh

Questionnaire for self evaluation

Prepared by: Manmohan Singh

Reference books BPB Publications

Prepared by: Manmohan Singh

Das könnte Ihnen auch gefallen