Html introduction by ikram niaz


Published on

Html introduction by ikram niaz

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html introduction by ikram niaz

  1. 1. WHAT IS HTML? HTML is a language for describing web pages. 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 The purpose of the tags are to describe page contents.
  2. 2. HTML TAGS 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, <b>, the second tag is the end tag, </b>. The end tag is written like the start tag, with a forward slash before the tag name
  3. 3. HTML DOCUMENTS = WEB PAGES HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages
  4. 4. HTML PAGE STRUCTURE <html> <head> </head> < body> < h1>This a Heading</h1> < p>This is a paragraph.</p> < p>This is another paragraph.</p> < /body> </html>
  5. 5. HTML Introduction part 2 Of 3 By: Muhammad Ikram Niaz
  6. 6.
  7. 7. HTML - <HEAD> ELEMENT The <head> is usually the first element contained inside the <html> element. While it is also an element container that encapsulates other HTML elements, these elements are not directly displayed by a web browser, they function behind the scenes, providing more descriptive information about the HTML document, like page title and other meta data. Elements used for scripting (JavaScript) and formatting (CSS) are also contained within the
  8. 8. HTML - <TITLE> ELEMENT The <title> element adds a title to a web page. Web page titles are displayed at the top of any browser window or at the top of browser tabs. They are probably the first thing seen by web surfers as pages are loaded, web pages bookmark/Favorites ___saved using the web pages titles. A proper title makes a good first impression, and any page caught without a title is considered unprofessional.
  9. 9. <title> Dawha School </title>
  10. 10. HTML - <BODY> ELEMENT The body elements contain all of the pages viewable content. (paragraphs, pictures, tables, heading, bullet s, numbering, unorderlist, colors, etc.)
  11. 11. BACKGROUND COLOUR AND GRAPHICS Attributes of <BODY>  BGCOLOR=”code”  Specify color for background of the screen  BACKGROUND=”path/file”  Tiles the graphic in the file to fit the screen<BODY BGCOLOR=”green”><BODY BGCOLOR=”#00FF00”><BODY BACKGROUND=”abcpict.jpg”>
  12. 12. CHANGING FONT <FONT>…</FONT>  Attributes  SIZE=“…”(font size, 1 through 7)  COLOR=“…” (font colour)  FACE=“…” (font type) <FONT SIZE=“3” COLOR=“#FF9933” FACE=“tahoma”> …</FONT>
  13. 13. TAGS & ATTRIBUTES <body> Started Body of the webpage </body> bgcolor Attribute <body bgcolor= "Red" > Started Red colored Body of the webpage </body>
  14. 14. HTML ATTRIBUTES HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value"
  15. 15. ATTRIBUTE EXAMPLE HTML links are defined with the <a> tag. The link address is specified in the href attribute: <a href="">This is a my school website</a>
  16. 16. HTML HEADINGS Headings are defined with the <h1> to <h6> tags. <h1> This is a heading 1</h1> < h2>This is a heading 2</h2> < h3>This is a heading 3</h3>
  17. 17. HTML TEXT FORMATTING TAGS <b>Defines bold text <big>Defines big text <em>Defines emphasized text <i>Defines italic text <small>Defines small text <strong>Defines strong text <sub>Defines subscripted text <sup>Defines superscripted text
  18. 18. HTML IMAGES <img src="url" alt="some_text"/> Src mean source of the image. alt attribute specifies an alternate text for an image, if the image cannot be displayed. <img src= " image29.jpg" alt= “Ikram Pic" width="304" height="228" />
  19. 19. HTML HYPERLINKS (LINKS) A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
  20. 20.  Links are specified in HTML using the <a> tag. The <a> tag can be used in two ways:1. To create a link to another document, by using the href attribute.2. To create a bookmark inside a document, by using the name attribute. <a href="url">Link text</a> <a href=“">Dawha School, Sharjah</a>
  21. 21. HTML UNORDERED LISTS An 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). <ul> < li>Coffee</li> • Coffee < li>Milk</li> • Milk < /ul>
  22. 22. EXAMPLES<ol> <ol type="A"> 1. Apples A. Apples<li>Apples</li> <li>Apples</li> 2. Banana B. Banana<li>Bananas</li> <li>Bananas</li> s s<li>Lemons</li> <li>Lemons</li> 3. Lemons C. Lemons<li>Oranges</li> <li>Oranges</li> 4. Orange D. Orange</ol> </ol> s s <ul type="circle"> <li>Apples</li> o Apples <li>Bananas</li> o Bananas <li>Lemons</li> o Lemons <li>Oranges</li> o Oranges </ul>
  23. 23. Thanks for Watching this video ! Please comments. MUHAMMAD IKRAM NIAZ
  24. 24. HTML Introduction part 3 Of 3 By: Muhammad Ikram Niaz
  25. 25. Objectives:1. Heading tags <h1> 6. Definition list<dl>2. Paragraphs tags 7. Unordered list<ul> <p> 8. Formatting tags3. Links <a> 9. Colors4. Image tag <img> 10.Tables5. Ordered list <ol>