Introduction to HTML


Published on

  • 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

Introduction to HTML

  1. 1. Introduction to HTML By Brandon Himpfen
  2. 2. Follow Me Website: Twitter: @brandonhimpfen
  3. 3. What is HTML?  HTML stands for HyperText Markup Language  The initial release of HTML was in 1993  The current version of HTML is 5, which was released on 4 February 2014  HTML is developed by W3C and WHATWG
  4. 4. Websites  A website consists of one web page or more than one web page.  An HTML document consists of HTML elements (tags with attributes).  A web browser will interpret the HTML elements to display the page.
  5. 5. HTML Elements  HTML elements in a web page is what the web browser will read and interpret to display the web page.  HTML elements will have a tag and one or more attributes (if supported).  Each HTML element will have a opening and closing – depends on the tag.
  6. 6. HTML Elements (Syntax) In general: <tag attribute=“value”> </tag> Or <tag attribute=“value” /> Remember, a tag can have one or more attributes.
  7. 7. HTML Elements Layout A web page has a structure of how elements are laid out.
  8. 8. Defining a HTML Web Page  A HTML web page will start and end with a HTML tag, like so: <HTML> … more elements and content .. </HTML>
  9. 9. HTML Head  After the opening of the <HTML> element, we will add the head HTML element.  The head element is a wrapper for other elements that define web page preferences.  What you add in between the head elements will not be shown in the web browser, as it is not web page content. <HEAD> … head related tags ... </HEAD>
  10. 10. HTML Head … cont’d  The following HTML element tags can be used within the <head></head> element:  <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>
  11. 11. Title Tag  Each document should have a title tag: <title>Title of Web Page</title>  The title tag will only show on the web browser’s tab, not in the body on the web page itself.  The title tag should be in between the head tag: <HEAD> <TITLE>Title of Web Page</TITLE> </HEAD>
  12. 12. Body Tag  The body tag is used after the closing of the title tag and before the closing of the HTML tag.  Anything within the body tag will be rendered (to display) on the web page. <BODY> … stuff to show website visitors … </BODY>
  13. 13. Putting it All Together  We’ve just created a necessary HTML elements’ layout of a web page. <HTML> <HEAD> <TITLE>Title of the Web Page</TITLE> </HEAD> <BODY> … content shown to visitor in the web browser … </BODY> </HTML>
  14. 14. Common HTML Tags Let’s explore common HTML tags in a web page.
  15. 15. CSS related HTML Tags  CSS can be added to a web page in three (3) ways: 1. Inline 2. Internal 3. External
  16. 16. Inline CSS Example  Inline CSS will use a tag attribute called “style” and the CSS is held within that attribute. Let’s say we want to add CSS to the paragraph tag, which is <p></p> <p style=“color:#000;”>Paragraph text goes here.</p> Inline CSS goes only to the opening of the tag. In this example, color:#000 is the CSS.
  17. 17. Internal CSS Example  Internal CSS uses the <style></style> tag, with the CSS being held within that tag. < STYLE > … CSS goes here… </STYLE> The style tag can be used in between the head and body tags.
  18. 18. External CSS Example  External CSS is where a CSS file is references using the link tag. <link rel="stylesheet" type="text/css" href=“path-to-file/filename.css">  The link tag can be used in between the head and body tags, but preferably in the head tags.  In the example, link tag uses a attribute of rel (relationship) with a value of stylesheet, aka a CSS file.  In the example, the attribute type, states the type of document being referenced (linked to).  Href attribute refers to link location.
  19. 19. Meta Tags  Meta tags should be used only within the <head></head> tags.  Metadata is data (information) about data.  Metadata will not be displayed on the page.  Syntax: <meta name="" content="">  The name attribute is the name of the meta and the content attribute defines content of the name attribute.  You can have multiple meta tags in the head of the web page.  Meta tags are not required for the web page for render.
  20. 20. Common Meta Tags  Common meta tags’ names include: <meta name="keywords" content=""> Keywords defines common words of a web page. <meta name="description" content=""> Description defines what the web page is about. <meta name="author" content=""> Author defines who made the web page.
  21. 21. Script Tags  Script tags define a client-side script.  The script tag is common for referencing (linking) to JavaScript files.  Should be at the bottom of a web page, just before the closing body tag, </body>, but can be used in between the <head></head> tags.  The script tag can also be used anywhere in between the body tags.  Google Analytics Javascript code will commonly be put in between the <head></head> tags.  Why it is preferred in the bottom, before the </body>? Because these files are generally not required to load a web page, but are used to enhance the web page functionality.
  22. 22. Heading Tags  Heading tags define titles of a web page, which is display to the visitor. <hX>Title</hX> Where X is the number of the heading.  The number of the heading can be from 1 to 6, where 1 is the highest level (biggest) and 6 being the least level (smallest).  The highest level should be used the least in a web page, where to the least level, h6, should be used the most (if needed.)
  23. 23. Paragraph Tags  Paragraphs use the p tag. <p>The text of each paragraph will go here.</p>
  24. 24. Formatting Tags  Formatting tags fit into one of three categories: 1. Text 2. Computer Output 3. Citations, Quotations, and Definition
  25. 25. Text Formatting Tags Tag Example Usage Description <b> <b>text</b> Bold – You should be <strong> for HTML5 documents. <em> <em>text</em> Emphasize <i> <i>text</i> Italic <small> <small>text</small> Small <strong> <strong>text</strong> Newer version of bold <sub> <sub>text</sub> Subscript <sup> <sup>text</sup> Superscript <ins> <ins>text</ins> Inserted text <del> <del>text</del> Deleted text <mark> <mark>text</mark> Marked text
  26. 26. Computer Output Formatting Tags Tag Description <code> Code <kbd> Keyboard text <samp> Sample code <var> Variable <pre> Preformatted text Syntax: <tag>Text</tag>
  27. 27. Citations, Quotations, and Definition Tags Tag Description <abbr> Abbreviation <address> Address <bdo> Bi-Directional Override - Text direction <blockquote> Quote <q> Short quotation <cite> Citation <dfn> Definition (term)
  28. 28. Images  To add an image to a web page, we will use the img tag. <img src="" alt="" width="" height="“ />  The img tag does not have a closing tag, </img> but instead a closing in the opening tag.  Src attribute is the path to the image.  Alt should be a description of the image. Commonly seen when you hover over the image.  Width and height attributes should be included! It is a best practice.
  29. 29. Tables <table width=“” cellpadding=“” cellspacing=“”> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table>  Tables consist of opening and closing tag, with table specific tags within it.  thead is the header group of a table  tr stands for table row  th stands for table heding, usually the first row.  td is a table cell, which contains data.  tbody stands for the table body.  Use table, thead and tbody once.  tr, th, and td can be used multiple times.  tr wraps around th and td tags.
  30. 30. Links  Links use the a tag.  Links can be made to internal or external web pages. <a href="“ title=“” target="">Link Text</a>  Href attribute is the URL  Title is the title of the link  You can add target, if you want, to open a link in a new web browser window.
  31. 31. The End There is more to HTML then this, but this should give you a good foundation. I hope you enjoyed this presentation!
  32. 32. Follow Me Website: Twitter: @brandonhimpfen