HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages. Hypertext refers to the way in which Web pages (HTML documents) are linked together. When you click a link in a Web page, you are using hypertext. Markup Language describes how HTML works. With a markup language, you simply "mark up" a text document with tags that tell a Web browser how to structure it to display.

HTML For What?  HTML is the bricks and mortar of the WWW. Without HTML the World Wide Web could not have become as important as it is today.  HTML is a document formatting language common the all computers on the WWW. html permits cross platform communication between Macs, Apples, SUNs, PCs and others to view a document in a similar way.

… contd Every webpage that you visit uses HTML in some way, you can view the HTML code behind a website in Internet Explorer by selecting: View > Source We can make only static pages with HTML. Each HTML file has an extension.htm/.html

Creating an HTML File Creating an HTML document is easy. To begin coding HTML you need only two things: a simple- text editor and a web browser. E.g Your Firefox browser & Your Notepad text editor

HTML Document Structure:  An HTML document starts and ends with and tags.  Inside these two tags, the document is split into two sections: i) The... elements ii)The... elements

A Simple Example: Our First HTML Page Welcome to the world of Web pages that we create using HTML at Kendriya Vidyalaya Aminoo Kulgam, J&K

HTML Formatting Tags Whitespace and Flow: what HTML does when it comes across spaces and how browsers treat long sentences and paragraphs of text? By default, only one space will be displayed. This is known as white space collapsing. Similarly, if you start a new line in your source document, or you have consecutive empty lines, these will be ignored and simply treated as one space. Example: file:///F:/KV/8th%20class%20html/example1.html

Create Headings - The Elements: You can use different sizes for your headings. This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 While displaying any heading, browser adds one line before and after that heading. Example: file:///F:/KV/8th%20class%20html/example2.html

Create Paragraph - The Element: To structure text in paragraphs. Here is a first paragraph of text. Here is a second paragraph of text. Here is a third paragraph of text. You can use align attribute to align your paragraphs. This is left aligned. This is center aligned. This is right aligned. Example: file:///F:/KV/8th%20class%20html/example3.html

Centering Content - The Element: You can use tag to put any content in the center of the page or any table cell. This is not in the center.  This is in the center. Example: file:///F:/KV/8th%20class%20html/example4.html

Nonbreaking Spaces: Suppose you were to use the phrase "12 Angry Men." Here you would not want a browser to split the "12" and "Angry" across two lines: Nonbreaking spaces( ) is used to give spaces between words(like your space bar ) Example: file:///F:/KV/8th%20class%20html/example5.html

Preserve Formatting - The Element: Sometimes you want your text to follow the exact format of how it is written in the HTML document. In those cases, you can use the preformatted tag ( ). Any text between the opening tag and the closing tag will preserve the formatting of the source document. Hello I’m using preformatted tag Example: file:///F:/KV/8th%20class%20html/example6.html

Some more tags: Horizontal rules: Horizontal rules are used to visually break up sections of a document. or tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them. Create Line Breaks: Whenever you use the element, anything following it starts on the next line. or Example: file:///F:/KV/8th%20class%20html/example7.html

Presentational Tags: Bold Text - The Element: Anything that appears in a... element is displayed in bold. this text is in bold Italic Text - The Element: this text is in italic Underlined Text - The Element: this text is underlined Strike Text - The Element: this text is striked through Superscript Text - The Element: this text is super scripted Subscript Text - The Element: this text is subscripted Example: file:///F:/KV/8th%20class%20html/example8.htmlfile:///F:/KV/8th%20class%20html/example8.html

HTML Fonts tag is used to add style, size, and color to the text on your site. The font tag is having three attributes called size, color, and face to customize your fonts. Font Size: file:///F:/KV/8th%20class%20html/example9.htmlfile:///F:/KV/8th%20class%20html/example9.html Default values: font size=3; font face=times new roman Font Face: file:///F:/KV/8th%20class%20html/example10.html file:///F:/KV/8th%20class%20html/example10.html Font Color: file:///F:/KV/8th%20class%20html/example11.html file:///F:/KV/8th%20class%20html/example11.html

Linking Documents - The Element: Anchor tag:- is used to link documents. Anything between the opening tag and the closing tag becomes part of the link and a user can click that part to reach to the linked document. Anchor Attributes: href: specifies the URL of the target of a hyperlink. Target: specify where to display the contents of a selected hyperlink. (1) Targer= “_blank” (2) Target= “_self” file:///F:/KV/8th%20class%20html/example13.html

HTML Images Insert Image - The Element: You will insert any image in your web page by using tag. Following is the simple syntax to use this tag. Attributes: width: sets width of the image. This will have a value like 10 or 20%etc. height: sets height of the image. This will have a value like 10 or 20% etc. border: sets a border around the image. This will have a value like 1 or 2 etc. src: specifies URL of the image file. alt: this is an alternate text which will be displayed if image is missing. file:///F:/KV/8th%20class%20html/example12.html

tag Attributes: bgcolor: Sets a color for the background of the page. text: Sets a color for the body text. link: Sets a color for linked text file:///F:/KV/8th%20class%20html/example14.html