Embed Size (px)
DESCRIPTION
Introduction to html - Hyper Text Markup Language
Citation preview
www.eshikshak.co.inwww.eshikshak.co.in
www.eshikshak.co.in
Introduction to HTMLIntroduction to HTML
•• HTML stands for Hyper Text Markup LanguageHTML stands for Hyper Text Markup Language•• Language interpreted by a web browserLanguage interpreted by a web browser•• Web-pages are also called HTML Documents.Web-pages are also called HTML Documents.•• It defines the structure and layout of a Web It defines the structure and layout of a Web
document by using a variety of document by using a variety of tagstags and and attributesattributes. .
www.eshikshak.co.in
Features of HTMLFeatures of HTML•• Create a Web page using tags. Create a Web page using tags. •• Use graphics and display text in different fonts, sizes, and Use graphics and display text in different fonts, sizes, and
color. color. •• Enhance the presentation of the document using HTML Enhance the presentation of the document using HTML
elements. elements. •• Create hyperlinks to navigate to different documents Create hyperlinks to navigate to different documents
present on the Web.present on the Web.•• Display data in a tabular format.Display data in a tabular format.•• Create multiple windows in a Web page to display Create multiple windows in a Web page to display
information from multiple sources in different windows information from multiple sources in different windows
www.eshikshak.co.in
HTML tagsHTML tags
•• A command inserted in a document that A command inserted in a document that specifies how the document, or a portion of specifies how the document, or a portion of the document, should be formatted. the document, should be formatted.
•• HTML tags begin with an open angle bracket HTML tags begin with an open angle bracket (<) and end with a close angle bracket (>).(<) and end with a close angle bracket (>).
•• HTML tags are of two typesHTML tags are of two types–– Paired TagsPaired Tags–– Singular TagsSingular Tags
www.eshikshak.co.in
HTML attributesHTML attributes
•• A language construct that programmers use A language construct that programmers use to add additional information (i.e., metadata) to add additional information (i.e., metadata) to code elements (e.g., assemblies, modules, to code elements (e.g., assemblies, modules, members, types, return values, and members, types, return values, and parameters) to extend their functionality. parameters) to extend their functionality.
•• Attributes are written immediately following Attributes are written immediately following the tagthe tag
•• Multiple attributes can be associatedMultiple attributes can be associated
www.eshikshak.co.in
Types of HTML tag – Types of HTML tag – Paired tagPaired tag
•• A tag is said to be a paired tag if the text is A tag is said to be a paired tag if the text is placed between placed between a tag a tag and and its companion tag. its companion tag.
•• In paired tags, the first tag is referred to as In paired tags, the first tag is referred to as Opening TagOpening Tag and the second tag is referred to and the second tag is referred to as as Closing Tag.Closing Tag.–– ExampleExample: <i>This text is in italics. </i>: <i>This text is in italics. </i>–– Note:Note: Here, Here,
•• <i> <i> is called opening tag is called opening tag •• </i></i> is called closing tag. is called closing tag.
www.eshikshak.co.in
Types of HTML tag – Types of HTML tag – Singular tagSingular tag
•• A standalone tag does not have a companinon A standalone tag does not have a companinon tag.tag.
–– ExampleExample: : <BR /> <BR /> - This tag will insert a line break- This tag will insert a line break–– This tag does not require any companion tag.This tag does not require any companion tag.
www.eshikshak.co.in
The structure of HTML documentThe structure of HTML document<html><html>
<head><head><title><title>
Title of the web pageTitle of the web page
</title></title></head></head><body> <body>
Content of the PageContent of the Page<address> <address> Your address Your address </address></address>
</body></body></html></html>
This page is written in HTML
title tag contains title of a web page
Head tag contians information about web page
body tag contains contents of web page
This is the footer of the web page
www.eshikshak.co.in
The structure of HTML documentThe structure of HTML document
•• The basic structure for all HTML documents is The basic structure for all HTML documents is simple and should include the following simple and should include the following minimum elements or tags:minimum elements or tags:–– <html><html> : The main container for HTML pages : The main container for HTML pages–– <head><head> : The container for page header : The container for page header
informationinformation–– <title><title> : The title of the page : The title of the page–– <body><body> : The main body of the page : The main body of the page
www.eshikshak.co.in
DOCTYPEDOCTYPE
•• The HTML !doctype tag is used for specifying The HTML !doctype tag is used for specifying which version of HTML the document is using. which version of HTML the document is using. This is referred to as the document type This is referred to as the document type declaration (DTD).declaration (DTD).
•• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><html>
www.eshikshak.co.in
The <html> ElementThe <html> Element
•• The <html> element is the containing element The <html> element is the containing element for the whole HTML document. Each HTML for the whole HTML document. Each HTML document should have one <html> and each document should have one <html> and each document should end with a closing </html> document should end with a closing </html> tag.tag.
•• Following two elements appear as direct Following two elements appear as direct children of an <html> element:children of an <html> element:–– <head><head>–– <body><body>
www.eshikshak.co.in
The <head> ElementThe <head> Element
•• The The <head> <head> element is just a container for all element is just a container for all other header elements.other header elements.
•• It should be the first thing to appear after the It should be the first thing to appear after the opening opening <html> <html> tag.tag.
•• Each Each <head> <head> element should contain a element should contain a <title> <title> element indicating the title of the documentelement indicating the title of the document
www.eshikshak.co.in
The <head> ElementThe <head> Element•• The The <title> <title> tag is used to give title to the document.tag is used to give title to the document.
•• The The <link> <link> tag is used to link to an external file, such tag is used to link to an external file, such as a style sheet or JavaScript file. as a style sheet or JavaScript file.
•• The The <style> <style> tag is used to include CSS rules inside the tag is used to include CSS rules inside the document.document.
•• The The <script> <script> tag is used to include JAVAScript or tag is used to include JAVAScript or VBScript inside the document.VBScript inside the document.
www.eshikshak.co.in
The <head> ElementThe <head> Element•• The The <base> <base> tag is used to create a "base" url for all tag is used to create a "base" url for all
links on the page. links on the page.
•• The The <object><object> tag is designed to include images, tag is designed to include images, JavaScript objects, Flash animations, MP3 files, JavaScript objects, Flash animations, MP3 files, QuickTime movies and other components of a page.QuickTime movies and other components of a page.
www.eshikshak.co.in
The <title> Element:The <title> Element:
•• To specify a title for every page that you write To specify a title for every page that you write inside the <title> element. inside the <title> element.
•• This element is a child of the <head> element.This element is a child of the <head> element.•• It is used in several ways:It is used in several ways:
–– It displays at the very top of a browser window.It displays at the very top of a browser window.–– It is used as the default name for a bookmark in It is used as the default name for a bookmark in
browsers such as IE and Netscape.browsers such as IE and Netscape.–– Its is used by search engines that use its content Its is used by search engines that use its content
to help index pages.to help index pages.
www.eshikshak.co.in
The <title> Element:The <title> Element:
•• Here is the example of using title tag.Here is the example of using title tag.
<html><html><head><head>
<title>Welcome to MyWebsite</title><title>Welcome to MyWebsite</title></head></head>
</html></html>
www.eshikshak.co.in
The <body> Element:The <body> Element:
•• The <body> element appears after the <head> The <body> element appears after the <head> element.element.
•• It contains the part of the Web page that you It contains the part of the Web page that you actually see in the main browser window. actually see in the main browser window.
•• A <body> element may contain anything from A <body> element may contain anything from a couple of paragraphs under a heading to a couple of paragraphs under a heading to more complicated layouts containing forms more complicated layouts containing forms and tables.and tables.
www.eshikshak.co.in
The <body> Element:The <body> Element:
•• Here is the example of using body tag.Here is the example of using body tag.<html><html>
<head><head><title>Welcome to MyWebsite</title><title>Welcome to MyWebsite</title>
</head></head>
<body><body>You are welcome to MyWebsite.You are welcome to MyWebsite.
</body></body></html></html>
