0
It is the document typeThe text between <html> and </html> describes the web pageThe text between <body> and </body> is...
HTML is a language for describing web pages.HTML stands for Hyper Text Markup LanguageHTML is a markup languageA marku...
HTML markup tags are usually called HTML tagsHTML tags are keywords (tag names) surrounded  by angle brackets like <html...
"HTML tags" and "HTML elements" are often used to describe the same thing.But strictly speaking, an HTML element is ever...
Web BrowsersThe purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML doc...
HTML Page StructureBelow is a visualization of an HTML pagestructure:<html><body><h1>This a heading</h1><p>This is a parag...
Writing HTML Using Notepad or TextEditFollow the 4 steps below to create your first web page with Notepad.Step 1: Start No...
Step 3: Save Your HTMLSelect Save as.. in Notepads file menu.When you save an HTML file, you can use either the .htm or th...
<html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
AttributesAttribute ValueAlink Specifies the color of an active link in a documentbackground. Specifies a background i...
Example<html><head>Line break</head><br>This is<br>a para<br>graph with line breaks</html>
line breakThis isa paragraph with line breaks
Example<html><p>This is a paragraph</p><p>This is another paragraph</p></html>OutputThis is a paragraphThis is another par...
AttributesalignLeftRightcenterSpecifies the alignment of the text within a paragraph
<html><body><p align="right">A right-aligned paragraph.</p><p><b>Note:</b> The align attribute is deprecatedin HTML 4, and...
Example<html><body><p><font size="6">This is some text!</font></p><p>The size attribute was deprecated in HTML 4, and is n...
Out putThis is some text!The size attribute was deprecated in HTML 4, and isNot supported in HTML 4.01 Strict DTD or in XH...
<html><body background="w3s.png"><h1>Hello world!</h1><p><a href="http://www.w3schools.com">Visit  W3Schools.com!</a></p><...
<html><body bgcolor="#ff0000"><h1>Hello world!</h1><p><a href="http://www.w3schools.com">Visit W3Schools.com!  </a></p><p>...
The most common HTML lists are ordered and unordered lists:HTML ListsAn ordered list:1. The first list item2. The second l...
HTML Unordered ListsAn unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items are...
HTML Ordered ListsAn ordered list starts with the <ol> tag. Each list item starts  with the <li> tag.The list items are ma...
Style Tags/html text formatting <u> for underline</u> <sup>for superscript</sup> <sub>for subscript</sub> <strike> for...
<html><body><b>This text is bold</b><strong>This text is strong</strong><i>This text is italic</i>This is<sub> subscript</...
This text is boldThis text is strongThis text is italicThis is subscript and superscriptanother example of subscript ans s...
Align Specifies the alignment of a <hr> elementnoshadeSpecifies that a <hr> element should render in  one solid color (nos...
<html><body><h1>HTML</h1><p>HTML is a language for describing web pages.</p><hr><h1>CSS</h1><p>CSS defines how to display ...
<html><body><h2>Norwegian Mountain Trip</h2><img border="0" src="/images/pulpit.jpg" alt="Pulpit  rock" width="304" height...
Alt : The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.Height : The h...
<html><body><img src="C:UsersHasnath-1Desktopsearch.jpg“alt="goolgle image cannot be displayed" ></body></html>
<html><body><img src="smiley.gif" alt="Smiley face" width="50" height="400"></body></html>
<html><body><img src="smiley.gif" alt="Smiley face" width="450" height="100"></body></html>
<html><body><img src="smiley.gif" alt="Smiley face" width="100"  height="100" border="5"><p>The border attribute give bord...
The <font> tag specifies the font face, font size, and font color of text. color: Specifies the color of text Size: Spec...
<html><body><font size="3" color="red">This is some text!</font><font size="2" color="blue">This is some text!</font><font...
The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.You can use co...
<html><body><!--This is a comment. Comments are not displayed in the  browser-->This is a html web page with comments and ...
<html><body><pre><font size =8>&#8704 &#8705 &#8706&#8707 &#8708 &#8709&#8710 &#8711 &#8712&#8713 &#8714 &#8715&#8716 &#87...
<html><body><pre>This ispreformatted text.It preserves both spaces and line breaks.<font size =3>-------------------------...
The href attribute specifies the URL of the page the link goes to.If the href attribute is not present, the <a> tag is n...
<html><body><p>An absolute URL: <a href="http://www.w3schools.com">W3Schools</a></p><p>A relative URL: <a href="tag_a.asp"...
If we select the first URL W3 Schools thenthe following website will be opened
Else if the selection isdone for the secondURL then followingsite will be displayed
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Html ppt by Fathima faculty Hasanath college for women bangalore
Upcoming SlideShare
Loading in...5
×

Html ppt by Fathima faculty Hasanath college for women bangalore

458

Published on

HTML ppt defining tags,attributes and element with example
best for computer application in bussiness

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
458
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
76
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • If
  • Transcript of "Html ppt by Fathima faculty Hasanath college for women bangalore"

    1. 1. It is the document typeThe text between <html> and </html> describes the web pageThe text between <body> and </body> is the visible page contentThe text between <h1> and </h1> is displayed as a headingThe text between <p> and </p> is displayed as a paragraph
    2. 2. HTML is a language for describing web pages.HTML stands for Hyper Text Markup LanguageHTML is a markup languageA markup language is a set of markup tagsThe tags describe document contentHTML documents contain HTML tags and plain textHTML documents are also called web pages
    3. 3. HTML markup tags are usually called HTML tagsHTML tags are keywords (tag names) surrounded by angle brackets like <html>HTML tags normally come in pairs like <b> and </b>The first tag in a pair is the start tag, the second tag is the end tagThe end tag is written like the start tag, with a forward  slash before the tag nameStart and end tags are also called opening  tags and closing tags<tagname>content</tagname>
    4. 4. "HTML tags" and "HTML elements" are often used to describe the same thing.But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags:HTML Element:<p>This is a paragraph.</p>
    5. 5. Web BrowsersThe purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
    6. 6. HTML Page StructureBelow is a visualization of an HTML pagestructure:<html><body><h1>This a heading</h1><p>This is a paragraph.</p><p>This is another paragraph.</p></body></html>
    7. 7. Writing HTML Using Notepad or TextEditFollow the 4 steps below to create your first web page with Notepad.Step 1: Start NotepadTo start Notepad go to:Start    All Programs        Accessories            Notepad
    8. 8. Step 3: Save Your HTMLSelect Save as.. in Notepads file menu.When you save an HTML file, you can use either the .htm or the .html file extension.There is no difference, it is entirely up to you.Save the file in a folder that is easy to remember, like w3schools.Step 4: Run the HTML in Your BrowserStart your web browser and open your html file from the File, Open menu, or justbrowse the folder and double-click your HTML file.The result should look much like this:
    9. 9. <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
    10. 10. AttributesAttribute ValueAlink Specifies the color of an active link in a documentbackground. Specifies a background image for a documentbgcolor Specifies the background color of a documentlink. Specifies the color of unvisited links in a documenttext Specifies the color of the text in a document vlink Specifies the color of visited links in a document
    11. 11. Example<html><head>Line break</head><br>This is<br>a para<br>graph with line breaks</html>
    12. 12. line breakThis isa paragraph with line breaks
    13. 13. Example<html><p>This is a paragraph</p><p>This is another paragraph</p></html>OutputThis is a paragraphThis is another paragraph
    14. 14. AttributesalignLeftRightcenterSpecifies the alignment of the text within a paragraph
    15. 15. <html><body><p align="right">A right-aligned paragraph.</p><p><b>Note:</b> The align attribute is deprecatedin HTML 4, and is not supported in HTML5. Use CSSinstead.</p></body></html>Out put A right-aligned paragraph.Note: The align attribute is deprecated in HTML 4,and is not supported in HTML5. Use CSS instead.
    16. 16. Example<html><body><p><font size="6">This is some text!</font></p><p>The size attribute was deprecated in HTML 4, and is not supported in HTML 4.01 Strict DTD or in XHTML 1.0 Strict DTD. Use CSS instead.</p></body></html>
    17. 17. Out putThis is some text!The size attribute was deprecated in HTML 4, and isNot supported in HTML 4.01 Strict DTD or in XHTML 1.0Strict DTD. Use CSS instead.
    18. 18. <html><body background="w3s.png"><h1>Hello world!</h1><p><a href="http://www.w3schools.com">Visit W3Schools.com!</a></p><p>The background attribute was deprecated in HTML 4, and is not supported in HTML 4.01 Strict DTD or in XHTML 1.0 Strict DTD. Use CSS instead.</p></body></html>
    19. 19. <html><body bgcolor="#ff0000"><h1>Hello world!</h1><p><a href="http://www.w3schools.com">Visit W3Schools.com! </a></p><p><b>Tip:</b> To produce equal results in all browsers, always use hex code to specify colors.</p><p>the bgcolor atribute is used to give color to backgroung.</p></body></html>
    20. 20. The most common HTML lists are ordered and unordered lists:HTML ListsAn ordered list:1. The first list item2. The second list item3. The third list itemAn unordered list: List item List item List item
    21. 21. HTML Unordered ListsAn unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items are marked with bullets (typically small black circles).example<ul> <li>Coffee</li> <li>Milk</li></ul>How the HTML code above looks in a browser:• Coffee• Milk
    22. 22. HTML Ordered ListsAn ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items are marked with numbers.example<ol> <li>Coffee</li> <li>Milk</li></ol>How the HTML code above looks in a browser:1. Coffee2. Milk
    23. 23. Style Tags/html text formatting <u> for underline</u> <sup>for superscript</sup> <sub>for subscript</sub> <strike> for striked text</strike> <i> for italic text</i> <b> for bold text</b>
    24. 24. <html><body><b>This text is bold</b><strong>This text is strong</strong><i>This text is italic</i>This is<sub> subscript</sub> and <sup>superscript</sup>another example of subscript ans superscript is (a+b)<sup>2</sup>=a<sup>2</sup>+<sup>2</sup>+2ab<br>chlorine gas formula isCL<sub>2</sub><strike> This is an example of strike out text</strike><u>This text is underlined.HTML provides various style tags></u></body></html>
    25. 25. This text is boldThis text is strongThis text is italicThis is subscript and superscriptanother example of subscript ans superscript is (a+b)2=a2+2+2ab chlorine gas formula isCL2This is an example of strike out textThis text is underlined.HTML provides various style tags>
    26. 26. Align Specifies the alignment of a <hr> elementnoshadeSpecifies that a <hr> element should render in one solid color (noshaded), instead of a shaded colorsize Specifies the height of a <hr> elementWidth Specifies the width of a <hr> element
    27. 27. <html><body><h1>HTML</h1><p>HTML is a language for describing web pages.</p><hr><h1>CSS</h1><p>CSS defines how to display HTML elements.</p><hr size=4> it is used to define the<b> thickness</b> of the line<hr width= 70%> it defines the <b>width of the line(size) </b>70% of the page width<hr width = 50 noshade>here the line is define in <b>pixel value of 50 and there is no shade</b> given to the line</body></html>
    28. 28. <html><body><h2>Norwegian Mountain Trip</h2><img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228"></body></html>
    29. 29. Alt : The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.Height : The height attribute specifies the width of an image, in pixels.Width: The width attribute specifies the width of an image, in pixels.
    30. 30. <html><body><img src="C:UsersHasnath-1Desktopsearch.jpg“alt="goolgle image cannot be displayed" ></body></html>
    31. 31. <html><body><img src="smiley.gif" alt="Smiley face" width="50" height="400"></body></html>
    32. 32. <html><body><img src="smiley.gif" alt="Smiley face" width="450" height="100"></body></html>
    33. 33. <html><body><img src="smiley.gif" alt="Smiley face" width="100" height="100" border="5"><p>The border attribute give border to the image in HTML.you can define the border width as border="10" </p></body></html>
    34. 34. The <font> tag specifies the font face, font size, and font color of text. color: Specifies the color of text Size: Specifies the size of text Face: Specifies the font of text Base font tag: it is used to give default font size ,color, face to the en tire page
    35. 35. <html><body><font size="3" color="red">This is some text!</font><font size="2" color="blue">This is some text!</font><font face="verdana" color="green">This is some text! </font><basefont size="6" >This is some text in base font!</body></html>
    36. 36. The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.
    37. 37. <html><body><!--This is a comment. Comments are not displayed in the browser-->This is a html web page with comments and these comments are not displayed</body></html>
    38. 38. <html><body><pre><font size =8>&#8704 &#8705 &#8706&#8707 &#8708 &#8709&#8710 &#8711 &#8712&#8713 &#8714 &#8715&#8716 &#8717 &#8718</pre></body></html>
    39. 39. <html><body><pre>This ispreformatted text.It preserves both spaces and line breaks.<font size =3>-------------------------------------Sl no Name-------------------------------------1 Ayesha2 Radhika-------------------------------------</pre></body></html>
    40. 40. The href attribute specifies the URL of the page the link goes to.If the href attribute is not present, the <a> tag is not a hyperlink.Syntax<a href="URL">
    41. 41. <html><body><p>An absolute URL: <a href="http://www.w3schools.com">W3Schools</a></p><p>A relative URL: <a href="tag_a.asp">The a tag</a></p></body></html>
    42. 42. If we select the first URL W3 Schools thenthe following website will be opened
    43. 43. Else if the selection isdone for the secondURL then followingsite will be displayed
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×