Introduction to HTML. Topics HTML –What is HTML –Parts of an HTML Document –HTML Tags.
Introduction to Html
25
• With HTML you can create your own Web site . • HTML stands for Hyper Text Markup Language. • HTML is not a programming language, it is a Markup Language. • A markup language is a set of markup tags. • HTML uses markup tags to describe web pages. • HTML is not case sensitive language. • HTML documents contain HTML tags and plain text. PiyushIT
-
Upload
y-kothyari -
Category
Technology
-
view
154 -
download
0
Transcript of Introduction to Html
• With HTML you can create your own Web site.• HTML stands for Hyper Text Markup Language.
• HTML is not a programming language, it is a Markup Language.
• A markup language is a set of markup tags.• HTML uses markup tags to describe web pages.• HTML is not case sensitive language.
• HTML documents contain HTML tags and plain text.
PiyushIT
HTML Was developed in 1992
HTML 2.0 is introduced in 1994
HTML 3.0 was developed in 1995
HTML 3.2 was completed by 1997
HTML 4 was developed in the year 1998
HTML5 was first started by Mozilla, Apple, and Opera under a group called the WHATWG(Web Hypertext
Application Technology Working Group). In 2006 W3C(World Wide Web Consortium) showed an interest in
HTML5 and in 2007 they created a working group to work in HTML5 project. HTML5 is still under
development.
PiyushIT
• Write html code in notepad.• Save the file with (.Html)/(.Htm) extension.• View the page in any web browser viz. INTERNET
EXPLORER, NETSCAPE ,Google Chrome etc.• The purpose of a web browser (like internet
explorer or Firefox) is to read html documents and display them as web pages.
PiyushIT
An HTML file must have an .htm or .html file extension
HTML files can be created with text editors:
NotePad, NotePad ++ etc
Or HTML editors:
Microsoft FrontPage
Macromedia Dreamweaver
Netscape Composer
Expression Web
PiyushIT
Header
Navigation
Aside
Footer
Section
Article
Footer
Article
Footer
Article
Footer
Figure
Image, Video, Quote, Table, etc…
Legend
PiyushIT
Header
Body
< / HTML>
< HTML >
PiyushIT
• <HTML> - Describe HTML web page that is to be viewed by a web browser.
• <HEAD> - This defines the header section of the page.
• <TITLE> - This shows a caption in the title bar of the page.
• <BODY> - This tag show contents of the web page will be displayed.
PiyushIT
<html>
<head><title> The title of your html page </title>
</head>
<body>
<! - - your web page content and markup - ->
</body>
</html>
PiyushIT
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
Opening tag
Closing tag
PiyushIT
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML header
PiyushIT
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML body
PiyushIT
Hyperlink Tags
Image Tags
Text formatting tags
<a href="url">Link text</a>
<img src="logo.gif" alt="logo" />
<strong>Bold</strong> and <em>italic</em> text
PiyushIT
<video src="movie.ogg" controls="controls"></video><audio src=" song.ogg " controls="controls"></audio>
PiyushIT
<!DOCTYPE HTML>
<html><head>
<title>Simple Tags Demo</title></head><body><a href="http://www.tricksbypk.blogspot.com/" title=
“My Blog">Visit link.</a><br /><img src="logo.gif" alt="logo" /><br /><strong>Bold</strong> and <em>italic</em> text.</body></html>
PiyushIT
Heading Element:->
• There are six heading elements (<H1>,<H2>,<H3>,<H4>, <H5>,<H6>).
• All the six heading elements are container tag and requires a closing tag.
• <h1> will print the largest heading
• <h6> will print the smallest heading
PiyushIT
<html><head><title>heading</title></head><body><h1> GLOBAL INFO CHANNEL</h1><h2> GLOBAL INFO CHANNEL</h2><h3> GLOBAL INFO CHANNEL</h3><h4> GLOBAL INFO CHANNEL</h4><h5> GLOBAL INFO CHANNEL</h5><h6> GLOBAL INFO CHANNEL</h6></body></html>
PiyushIT
PiyushIT
• HTML documents are divided into paragraphs.• Paragraphs are defined with the <p> tag i.e.
<p>This is a paragraph</p><p>This is another paragraph</p>
PiyushIT
• if you want a line break or a new line without starting a new paragraph Use the <br> tag.
• Defines a horizontal line use <hr>tag.
• <br> <hr> element are empty HTML element i.e. Global Information Channel<hr>
Global Information <br> Channel
PiyushIT
HTML 5 is the next version of Hyper
Text Markup Language(HTML4)
It is developing by World Wide Web
consortium W3C.
Defined error handling
PiyushIT
Video and audio tags
Header and Footer
Drag and drop
Canvas
Offline Storage
Geo-Location
PiyushIT
<header> </header>
<foooter></footer>
PiyushIT
Experimental First-Person
Shooter Game 3D Graphics
PiyushIT
HTML4 HTML5
Elements like nav, header were not present.
It brought new element for web structure like nav , header etc
It was lack of rules of parsing so it is difficult to handle error.
Strictly parsing rules introduced in html5 so handle the error.
No multimedia supported without third party
It inbuilt multimedia element in html5 like Audio , video , canvas
It was not available It contains attributes like control menu, spell check etc.PiyushIT
YouTube uses HTML5, www.youtube.com/html5
Only some of the browser only supports HTML5
features currently
Google Chrome, Mozilla Firefox , opera etc
PiyushIT
