1 / 20

HTML

HTML. HTML stands for " H yper T ext M ark-up L anguage“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages .

lane-walters
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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.

  2. 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.

  3. … 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

  4. 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

  5. HTML Document Structure: • An HTML document starts and ends with <html> and </html> tags. • Inside these two tags, the document is split into two sections: i) The <head>...</head> elements ii)The <body>...</body> elements

  6. A Simple Example: <HTML> <HEAD> <TITLE> Our First HTML Page </TITLE> </HEAD> <BODY> Welcome to the world of Web pages that we create using HTML at KendriyaVidyalayaAminoo Kulgam, J&K- 192231. </BODY> </HTML>

  7. 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

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

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

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

  11. 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(&nbsp;) is used to give spaces between words(like your space bar ) • Example: • file:///F:/KV/8th%20class%20html/example5.html

  12. Preserve Formatting - The <pre> 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 (<pre>). • Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document. • <pre> Hello I’m using preformatted tag </pre> Example: file:///F:/KV/8th%20class%20html/example6.html

  13. Some more tags: • Horizontal rules: Horizontal rules are used to visually break up sections of a document. <hr> or <hr /> • <hr /> 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 <br /> element, anything following it starts on the next line. • <br> or <br /> • Example: • file:///F:/KV/8th%20class%20html/example7.html

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

  15. HTML Fonts • <font> 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.html • Default values: font size=3; font face=times new roman • Font Face: file:///F:/KV/8th%20class%20html/example10.html • Font Color: file:///F:/KV/8th%20class%20html/example11.html

  16. Linking Documents - The <a> Element: • Anchor tag:- <a> is used to link documents. Anything between the opening <a> tag and the closing </a> 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

  17. HTML Images • Insert Image - The <img> Element: You will insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag. <imgsrc="image URL" attr_name="attr_value"...more attributes /> • 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

  18. <body> 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

  19. THANKS & Have a nice Day on Web!

More Related