Download Web page development and more Study Guides, Projects, Research Computer science in PDF only on Docsity!
List of Contents
Sno Lesson Author Updated / Vetted By 1 Basic Concepts of HTML Ms. Kiran Khatter Dr. Anil Khurana
- Working with Links, Images, Audio and Video
Ms. Kiran Khatter Dr. Anil Khurana
- Working with Java Script and VB Script
Ms. Kiran Khatter Dr. Anil Khurana
- Introducing Linux Ms. Kiran Khatter Dr. Anil Khurana
- Cryptography, Digital Signature and Cyber Law
Ms. Kiran Khatter Dr. Anil Khurana
- Introduction to Internet Information Server (IIS)
Dr. Anil Khurana Prof. Dharminder Kumar
7 Introduction to Apache Server Dr. Anil Khurana Prof. Dharminder Kumar
LESSON: 1
BASIC CONCEPTS OF HTML
STRUCTURE
1.0 Objective 1.1 Introduction 1.2 Web Site Development 1.21 Design Phase 1.22.1 Layout Page 1.22.2 Navigation around the web site 1.3 Basic of HTML 1.4 What are HTML Tags Like? 1.5 The Structure of an HTML page 1.6 HTML Tags 1.7 Benefits of HTML 1.8 Limitation of HTML 1.9 Summary 1.10 Keywords 1.11 Self Assessment Questions 1.11 Suggested Readings
1.0 OBJECTIVE Internet has changed the way of doing the business today. And HTML is the basic language with the help of which web pages and websites can be developed for internet.
After going through this lesson, you will be able to: ¾ Describe the concept of HTML ¾ Identify the Benefits of HTML
Accessing Web Page access to a Web Page is made through a special type of software known as Browser. There are several software which makes access to Web site available in the market. The most popular ones are Netscape Navigator and Internet Explorer.
1.2 WEB SITE DEVELOPMENT The layout of the Web site should be such that information can be quickly and easily accessed. “Beauty lies in the eyes of beholder” This means that every person has his own opinion about beauty. Same is the case with Web pages. While there is no prefect and concrete layout that will appeal to all readers but still there are some guidelines that must be followed while designing web pages. Developer of Web site has to play three roles:
¾ Visualiser Its job is to maintain the attractiveness of Web page ¾ Architect To provide simple and structured navigational model so that any one can access any section ¾ Librarian To ensure that contents are arranged in such a way that reader does not face any difficulty to locate any piece of information on Web Site.
Phases of Development of Web Site 1.21 Design Phase a) Goals and objectives Developer must identify the objective of web site, why it is needed and what purpose is served by Web site. b) Target Audience
Who are going to catch your Web site? What are their interests, their tastes and why they are visiting to your Web site? For e.g., corporate sites and Entertainment sites will have different looks depending on their target audience. c) Storyboarding Storyboard is a description of layout, contents, sequence of web pages, which defines the conceptual design of Web Site. Never expect the reader to read Website as novel. Reader must be able to jump to the point of his own interest. d) Organize Information Navigation structure is decided by organizing information. Four basic steps of organizing information are:
- Divide it into logical units
- Create a hierarchy of important and general topics.
- Use the hierarchy to build relationship among logical units of information
- Analyze the usefulness and aesthetics of the Website
1.22 Development Phase Two important factors are considered while designing a Web page and then Website:
- The layout of Web page and Website
- Navigation around the Website 1.22.1 Layout of Web page a) Unified face Everything in Web page and Website must fit together as a recognizable whole. There must be consistency among appearance of all Web pages of Website. Fonts, Colours, Margin, Headings and other elements should be consistent throughout every section of Website. b) Conform to Objective Objective of Website is to give information to the readers so messages should be properly conveyed and avoid too many fonts and sharp colours which overshadow message
This bar should be placed on all Web pages other than Home page, which has links to the main pages of Web site means user, can jump to any document from any sub page. c) Table of Contents It is displayed on the bottom of the Web page, which has the listing of all- important topics. User can click on any topic to visit to related Web Page. d) Hyper Tree It is hierarchical organization scheme, which looks like left pane of Windows Explorer. e) Image Map Visual representations are used as a means of link to another Web pages. By clicking on the hot spot of image area, Reader can visit to related Web page.
1.3 BASIC OF HTML Earlier, the documents were recorded with pen and paper. These documents were formatted by following some pre-defined mark up instructions. For example, to provide extra information or highlight information different colours or quotations marks were used. Highlighting text using Bold or Italic feature, adding quotations marks or colour to document, to add special meaning to it, is referred as markup.
A markup language defines some set of rules and helps to add some meaning to content and structure of documents. Markup can be classifieds as follows:
¾ Stylistic Markup This markup defines presentation of document. Word processor applying stylistic markup means making the text bold, italicized or changing the font. ¾ Structural Markup The structure of a document is determined by this markup. It determines the heading or paragraph in a document.
¾ Semantic Markup The content of document is determined by this mark up. Title of Web page defines the content to be described in Web page.
In the late 1960’s, three researchers at IBM began working on the problem of dealing with documents created on computers of different hardware and operating systems. During the research, three primary requirements were considered essential in order to have an interoperable system:
- There should be common document format supported by document processing program.
- The common format should be specific to particular domain, for Example, a domain for legal documents, a domain for medical documents.
- There should be specific rules for the format of document.
The system of formatting documents was named as Generalized Markup Language (GML). Over the Years, GML was fine-tuned and came to be known as Standard Generalized Markup Language (SGML).HTML or Hyper Text Markup Language has evolved from SGML.HTML is used to develop formatted pages of the web known as Web pages. It is specialized language, designed to display and access Web pages.
1.4 What are HTML Tags Like? When browser displays a Web page, it reads the page text and looks for special symbols indicating tags. These tags specify how the text should be displayed. For example, a tag may specify that text should be displayed in bold or italics or underlined with a certain font. Besides the appearance of text, a tag can indicate that certain text is really the address of another Web page, which will be accessed when that text is clicked.
Tags are normally specified in pairs, delimiting the text that will have some type of formatting. But there are several individual tags also.
The pair of commands should be used to enclose all of page formatting commands.
The Basic Structure of an HTML Document Like other languages, HTML has a basic structure for its programs. In order for a browser to correctly interpret the program, it needs to have some basic commands that should always be present. Some browsers dispense with their use; however, it is better to assume such commands are a fundamental part of the program.
An HTML program has three basic parts: ¾ Main structure () ¾ Heading () ¾ Body ()
Every HTML program must start with the command and end with the command. This pair of commands is essential. The heading area is optional and is delimited by the pair of commands. Most of the HTML commands will be placed in the program body area delimited by the and commands.
1.6 HTMLTAGS ¾ Headline Tags The Command Headings are document lines that have a letter size different from the rest of the text, with the purpose of identifying the start of a section or topic. There are six sizes, or levels, of headings. The command has the following syntax:
Heading text
Where a number from 1 to 6 should replace “n”. The largest heading is specified with the H1 command, and the smallest with H6.
For example: this is largest heading To use the rest of the Headline Tags, the respective Headline tags like H2 and so on will replace H
Attribute for Heading Tag : “ALIGN” attribute of tag is used to align the heading on the web page. The Syntax is:
the text to be placed here The possible values for this attribute are:
¾ Paragraph formatting tags The Command
The main difference between the HTML page and the traditional editor is that HTML does not recognize the Enter key. You need to force the end of the paragraph and the line break by using special commands. The command responsible for the paragraph break is the
command. Its syntax is:
The paragraph text should be added here within the
tag.
The paragraph tag by default will display a blank line both on the top and the bottom of the paragraph.
The syntax is:
Text
HTML code to incorporate Break Tag, Font Tag, Paragraph Tag and its attributes.
Use of tags
This two break tags will display two blank lines at the beginning of document.
This text will be displayed in Times New Roman font of size 6 with color green
This paragraph tag will display blank line above and below paragraph and font tag causes the paragraph matter to display in red color of size 5 with “Arial” font.
¾ Text Styles
As in the text editor, you can create a series of effects in the text with HTML by changing the form and type of font. All the commands that change the text style are of the container, or on-off, type.
The main text style commands are:
- command: It applies the bold style on text. Syntax is: text
- command: It applies the italic style on text. Syntax is: text
- command: It underlines the text. Syntax is: text
- command: It applies the bold style on text. Syntax is: text
- command: It puts text in a typewriter-style font with fixed spacing. Syntax is: text
- command: It increases the font and applies bold on text. Syntax is: text
- command: It reduces the font. Syntax is: text
- command: Superscript command raises and reduces the text. Syntax is: text
- command: Subscript command lowers and reduces the text. Syntax is: text
- command: it makes the text intermittent. Syntax is: text
- command: it can be used to display the text in the browser, which has been strike and is normally used to highlight the text.
HTML code to incorporate all Text Styles described above.
With the command, you can include text, which was edited by a text editor, and preserve the original text formatting, such as tabulation marks, end-of-line generated by the Enter key, and other formats. The syntax is:
text text text
HTML code to incorporate PRE tag.
Preformatted Text display
This tag is used to display user defined formatting, as he wants
Enter key works with Pre tag and it preserves the original text formatting
End of preformatted area
¾ ** Tag** The DIV tag encloses a section, which can receive specific alignment parameters. The Syntax is: Text The possible values for the DIV tag are:
CENTER LEFT RIGHT
The following example uses the command to align a group of paragraphs on right without having to use a
command for each one of them:
Use of DIV command
This command will align all the enclosing paragraphs on right side. There is no need to give paragraph tag with align feature for each paragraph. It is used when all the paragraph of page have same alignment features.
This command will align all the enclosing paragraphs on right side. There is no need to give paragraph tag with align feature for each paragraph. It is used when all the paragraph of page have same alignment features.
###
Text in the document
This source code divides the screen into three columns separated at the distance of 5 pixels
¾ Horizontal line Horizontal lines can be added to the HTML document using the tag. This tag does not have any closing tag.
The syntax is:
Paragraph specification
The code above inserts a line above and below the paragraph. Attributes of tag:
- Width The width of the line can be specified in terms of percentage of the window width or in terms of no of pixels.
For Example:
Here width of line is expressed in a percentage relative to the width of window. In this case, its size varies as a function of window width.
Here width of line will be fixed of 200 pixels and it won’t change as we resize window.
• SIZE
The thickness of the line is expressed in terms of pixels.
For Example:
¾ Body Attributes BGCOLOR: This attribute specifies the background color. For example: Background of Window will be green in colour.
TEXT : This attribute specifies the colour of text. For example: The entire text in Window will be yellow in colour.
BACKGROUND: This attribute places an image as a background of page. For example: Entire background will be filled with this image
1.7 BENEFITS OF HTML The benefits of HTML are: ¾ HTML is a simple but powerful formatting language to use. ¾ The Web pages can be linked together using links. Hence controlled navigation is possible ¾ HTML documents are platform independent.
1.8 LIMITATIONS OF HTML
