Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

About HTML

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this


  1. 1. Yugank Gupta XII th
  2. 2. Index  Getting Started  What is HTML ?  History of HTML  How does it work?  What can I use HTML for  What Can I Do with HTML  How Do I Learn HTML  Conclusion
  3. 3. Getting Started What the following terms mean: 1. Web server: a system on the internet containing one or more web site 2. Web site: a collection of one or more web pages 3. Web pages: single disk file with a single file name 4. Home pages: First page in website 5. Think about the followings before working your web pages 6. Think about the sort of information (content) you want to put on the web 7. Set the goals for the website 8. Organize your content into main topics 9. Come up with a general structure for pages and topics
  4. 4. What is HTML? HTML is the main markup language for displaying web pages and other information that can be displayed in a web browser. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known asempty elements, are unpaired, for example <img>. Examples of HTML
  5. 5. History of HTML In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internetbased hypertext system. Berners-Lee specified HTML and wrote the browser and server software in the last part of 1990. In that year, Berners-Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request for funding, but the project was not formally adopted by CERN. In his personal notes from 1990 he lists "some of the many areas in which hypertext is used" and puts an encyclopedia first.
  6. 6. How does it work? You are using a Web browser to read this page, and that browser could be Microsoft Internet Explorer, Firefox or maybe Netscape. You want to learn how Web pages work, and perhaps learn the art of creating your own pages Web browser - A Web browser, like Netscape Navigator or Microsoft Internet Explorer, is a computer program(also known as a software application, or simply an application) that does two things: A Web browser knows how to interpret the set of HTML tags within the page in order to display the page on your screen as the page's creator intended it to be viewed.
  7. 7. What can I use HTML for HTML is the basic building block to a web page. HTML is needed to create a website. HTML is one of the easiest computer languages to learn. Although you can create a website with HTML alone, you will need to know many other types of computer languages to build a professional website (CSS, Java, XML are some examples of the many different types of computer languages.) HTML, or Hypertext Markup Language, is used to create web pages. Site authors use HTML to format text as titles and headings, to arrange graphics on a webpage, to link to different pages within a website, and to link to different websites.
  8. 8. What can I do with HTML HTML stands for “Hyper Text Markup Language” and it is the language of the World Wide Web. So, in short, you use HTML to build web pages. But there is more to it than that. HTML Helps Format Your Page Contents With HTML, you can add: paragraphs of text lists (both numbered and bulleted) tables quotations headlines
  9. 9. How do I learn HTMl First step: Understand markup tags. Markup tags inform your web browser how to display the page and its content. They usually come with a start tag and an end tag, with the element content in between the tags. A left-angle bracket, or less-than sign (<) begins the tag and a right-angle bracket, or greater-than sign (>) ends the tag. To tell whether a tag is a start or an end tag, note that the end tag has a forward slash / after the first bracket: <tag>element content</tag>. Second step: Understand the format of an HTML document. There are two sections to an HTML document. The whole document starts and ends with the tag, which is there to inform your browser that it should interpret the code as HTML. The document is then split up into two parts: the head (the code within the tags) and the body (within the tags): Here is an example of a very basic HTML document: <title>How to Learn HTML - wikiHow</title> This is a minimal HTML document
  10. 10. Third Step: Learn the uses of the head tag. The head comes first, and contains all the non-content code, including: The title of the page, for example: • <title>How to Learn HTML - wikiHow</title> • Meta tags, which are used to provide metadata about a web page. This data can be used by search engines when the robot scours the internet to locate and list websites: • <meta name="description" content="A description of your page"> • <meta name="keywords" content="list of keywords, each separated by a comma"> • <meta name="robots" content="options for enabling/disabling certain abilities of a web-crawler for search engines"> • <meta content="en-gb" http-equiv="Content-Language"> • <meta content="text/html" http-equiv="Content-Type"> Link tags are used to link the page to other files, for example stylesheets - (CSS styles of the elements in the page) and favicons (an icon associated with the webpage, displayed next to the url in the address bar and other places): • <link class="misspell" type="text/css" stylesheet">href="styles.css"> • <link class="misspell" href="favicon.ico"> Script tags are used to link the page to JavaScript files (although this does not necessarily have to be in the head section). These tags can also contain the JavaScript code instead of an external file: • <script class="misspell" src="scripts.js" language="javascript" type="text/javascript"></script>
  11. 11. Fourth Step: Learn the uses of the body tag. The body comes after the head, and contains all the content code - the content that is actually displayed in the browser window, including the most common tags: The tag for a paragraph: • <p>element content</p> The tag for bold: • <strong>element content</strong> or <b>element content</b> The tag for italics: • <i>element content</i> or <em>element content</em> (for emphasis) The tag for strikethrough: • <s>element content</s> The tag for superscript: • <sup>element content</sup> The tag for subscript: • <sub>element content</sub>
  12. 12. The tag for preformatted text (displayed exactly how you enter it including any whitespace in the element content): • <nowiki>element content</nowiki> The tag for a marquee (scrolling text)(Outdated): • <marquee>element content</marquee> The tag for code text (displayed like this): • <code>element content</code> The tags for headings: • <h1>header text</h1>: the largest header <h2>header text</h2> (the 2nd level header) <h3>header text</h3> (the 3rd level header) <h4>header text</h4> (the 4th level header) <h5>header text</h5> (the smallest header) The tag for links and anchors:
  13. 13. • Links: <a href="url of webpage, or name of anchor within the page to link to">text/image to display as the link</a> For example: <a href="">wikiHow</a> • Anchors (points in the page to be linked to internally, like this Link to the Tips section: <a name="Tips">element content, in this case the Tips section</a> The tags for lists:Numbered and bulleted lists: • Bulleted lists (Unordered): <ul><li>Item 1</li><li>Item2</li><li>Item 3</li></ul> • Numbered lists (Ordered): <ol><li>Item 1</li><li>Item 2</li><li>Item 3</li>
  14. 14. Definition lists: <dl><dt>Coffee</dt><dd>- Hot Beverage</dd><dt>Leite</dt><dd>- Cold Beverage</dd></dl> The tags for tables: <table>table marks</table> Rows: <tr> Column headers: <th> Cells: <td> Example: <table><tr><th>Mês</th><th>Savings</th></tr><tr><td>January</td><td>$100</td> </tr></table>
  15. 15. Learn the tags that do not need a closing tag - i.e. there is only need for one tag. These are called empty tags, because there is no element content. In XHTML, these tags need to be closed with a backslash /, but still there is only need for one tag in both HTML and XHTML: The tag for a line break: <br> The tag for a horizontal rule: <hr> The tag for images: <img src="your_image_url"> Fifth step: There are various resources on the internet that you can use, or you can expand your knowledge by looking into the HTML source of webpages. You can do this by right clicking the page and selecting "View Source" or similar, or by going to the View section in the Menu of your browser.
  16. 16. Sixth Step: Learn the attributes and parameters for the tags. As before, you can either use learning resources on the internet or in books, or you can try learning by trial and error and by seeing how the attributes and parameters are used in other web pages.
  17. 17. Conclusion A few new tags were introduced in the last lesson. We will now give you a definition of these new tags to get you ready for starting the real. The new tags were: <head>, <title>, <h2>, and <p>. The HTML Code in Question: <html> <head> <title>My Own Webpage!</title> </head> <body> <h2>Welcome to my webpage</h2> <p>Coming soon will be my completed webpage that will wow and impress you!</p> </body> </html> <head> This comes immediately following <html> and is used to tell the browser useful information, such as: the title of your page, the topic of your webpage ( used on old search engines ) and more. <title> This tag must comes between <head> & </head> and will label the web browser's title bar, which is located in the top left of most browsers. In the previous example, we titled the page "My Own Webpage!" and that text would show up as the browser's title.
  18. 18. <h2> This is a header tag. It will create a "header" that is much larger than the default font size. The "h2" means that it is the 2nd largest header. The largest header is "h1" and the smallest header is "h6". Headers should be used for titles, just like the ones you see on this page. <p> This is a paragraph tag. So when you're writing a paragraph make sure you place <p> at the beginning of the paragraph and </p> at the end! continue your learning - html tutorial Now that you have attained a basic understanding for how HTML works, please continue on to our HTML tutorial section. Here you will learn all the basic HTML tags and attributes required to make a usable web site.
  19. 19. Thank you