More Related Content
What's hot
What's hot (20)
Similar to Introduction to html
Similar to Introduction to html (20)
More from Himanshu Pathak
More from Himanshu Pathak (18)
Recently uploaded
Recently uploaded (20)
Introduction to html
- 1. COMPUTER APPLICATIONS CLASS X (Code 165) TOPIC: UNIT 2: Introduction to HTML By HIMANSHU PATHAK
- 2. Contents • Introduction • Building blocks of HTML • Basic Structure of HTML • <HEAD> tag attributes • <Body> tag attributes • HTML Text Editors
- 3. Introduction • HTML stands for HyperText Markup Language. • HyperText simply means "Text within Text." A text has a link within it, is a hypertext. • Markup means to structure it in a specific format. • So, HTML is called hypertext markup language because it is a language that allows users to organize, improve the appearance of, and link text with data on the internet.
- 4. Cont… • HTML was invented in November 1990 by a scientist called Tim Berners Lee. • The purpose was to make it easier for scientists at different universities to gain access to each other’s research documents. • HTML is a format that tells a computer how to display a web page. • It consists of different elements which we use to structure a web page.
- 5. Building Blocks of HTML • Tags: A tag tells the browser to perform an action as asked by the special word. It is written between < and > brackets. • HTML tags are like keywords which defines that how web browser will format and display the content. • When a web browser reads an HTML document, browser reads it from top to bottom and left to right. <p> This is paragraph Tag </p>
- 6. Cont… • Attribute: The features of a tag are defined by an attribute, and it is applied within the start tag. • An HTML attribute contains two fields: name & value. • The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only. • We can add multiple attributes in one HTML element, but need to give space between two attributes. • Syntax– <tagname attribute_name= " attr_value"> content </ tagname>
- 7. Cont… • Elements: An HTML element is defined by a start tag, some content, and an end tag (Container Tag). <p> This is paragraph Tag </p> • Everything inside the opening and closing tags is the content. But not all elements follow this pattern. • They only consist of a single tag or an opening tag that cannot have any content. Example – <img src=“him.jpg" width="50“ /> • HTML elements with no content are called empty elements. <br> Tag: br stands for break line.
- 8. Tags Vs Elements Vs Attributes TAGS ELEMENTS ATTRIBUTES HTML tags are used to hold the HTML element. HTML element holds the content. HTML attributes are used to describe the characteristic of an HTML element in detail. HTML tags are almost like keywords. HTML elements specifies the general content. HTML attributes specify various additional properties to the existing HTML element.
- 9. Basic Structure • <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <p>My first paragraph.</p> </body> </html>
- 10. Cont… • The <!DOCTYPE html> declaration defines that this document is an HTML5 document • The <html> element is the root element of an HTML page • The <head> element contains meta information about the HTML page • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
- 11. <HEAD> Tag Attributes • The <title> tag defines the title of a web page (required). • The <style> tag contains CSS code. • The <link> tag contains a link to an external style sheet. It can have two attributes : rel = "stylesheet" and href. • The <meta> tag provides additional information (metadata) about HTML document. • The <script> tag contains a script (generally JavaScript). • The <noscript> tag defines an alternate text, which is displayed, if the browser doesn’t support scripts.
- 12. <BODY> Tag Attributes • background: It contains the URL of the background image. It is used to set the background image. <body background="URL"> • bgcolor: It is used to specify the background color of an image. <body bgcolor =“Value”> – Attribute Values: • color_name: It sets the background color by using the color name. For example “red”. • hex_number: It sets the background color by using the color hex code. For example “#0000ff”. • rgb_number: It sets the background color by using the RGB code. For example: “RGB(0, 153, 0)” .
- 13. Cont… • alink: It is used to specify the color of the active link. <body alink="color_name|hex_number|rgb_number"> • link: It is used to specify the color of visited links. <body link="color_name | hex_number | rgb_number"> • text: It specifies the color of the text in a document. <body text="color_name | hex_number | rgb_number"> • vlink: It specifies the color of visited links. <body vlink="color_name | hex_number | rgb_number">
- 14. HTML Text Editors • An HTML file is a text file, so to create an HTML file we can use any text editors. • After learning the basics, you can easily use other professional text editors which are, Notepad++, Sublime Text, Vim, etc. • Note: You can execute HTML file in any browser, but there are some tags which are not supported by Some Web browser. • HTML Code with Notepad: – Open Notepad (Windows) – Write code in HTML – Save the HTML file with .htm or .html extension. – Open the HTML page in your web browser.
- 15. Today we learn • Basics of HTML • In the next class, we will start Unit II – HTML Tags in detail. •Thanks