Intro to HTML

  1. HTML
    1. HTML documents are composed of elements that define a document's structure and meaning
    2. Elements are represented using tags
      1. Starting tag: <p>
      2. Ending tag: </p>
      3. Most tags surround other tags or content. Void elements or stand-alone tags do not. Ex: <br>
      4. Many tags use attributes to specify or modify their behavior
        1. Attribute values should be quoted
        2. Some attributes are required
        3. Ex: <img> tag uses src attribute to specify the name of the image file to display: <img src="happy.png">
      5. Tags should be closed in the order they are opened. Ex: <i>this <b>is</i> a test</b> should be <i>this <b>is</b></i> <b>a test</b>
      6. Case insensitive, but lowercase is preferred
    3. Versions
      1. HTML has evolved over time
      2. HTML (1991) → HTML 2.0 (1995) → HTML 3.2 (1997) → HTML 4.01 (1999)
        → XHTML (2000) → HTML5 (2014) → HTML Living Standard (2019)
      3. All prior versions standardized by W3C, but HTML Living Standard is maintained by Web Hypertext Application Technology Working Group (WHATWG)
      4. W3C has a Markup Validation Service to verify a document uses standards-compliant HTML
  2. Creating an HTML5 document
    1. Use your favorite text editor (mine is Notepad++ or Visual Studio Code)
    2. Type the following: 
      <!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Hello HTML</title>
	</head>
	<body>
		
      This is my <em>first</em> web page!
      
	</body>
</html>
    3. Save it as hello.html (the file extension is very important!)
    4. Load it into your web browser by dragging and dropping the file onto the browser
    5. Basic structure
      1. <!DOCTYPE html> - must be first line to run in standards mode (not quirks mode)
      2. <html> - surrounds all content except doctype
      3. <head> - head section is not visible in the browser, may be omitted
        1. <meta> - specift the page's character encoding (UTF-8 is the most popular)
        2. <title> - displays in the browser tab and used when adding as a bookmark
      4. <body> - body section is the visibile part of the document
  3. Browser can show you the HTML behind any element or page
    1. To see page's HTML: Right-click on the page, select View page source
    2. To see specific element: Right-click on an element, select Inspect element
  4. Starter HTML elements
    1. Comments - ignored by the browser 
      <!-- This is a comment -->
    2. Whitespace - all consecutive whitespace characters are converted into a single space 
      This     is
 a  test!
      is rendered in the browser as
      This is a test!
    3. Use <br> to force the following text to the next line (like \n in C++) and &nbsp; to create spaces 
      This &nbsp; &nbsp; is<br>
 a &nbsp;test!
      is rendered in the browser as 
      This     is
 a  test!
    4. Bold: <strong> instead of <b> to signify strong importance
    5. Italics: <em> instead of <i> to stress emphasis
    6. Paragraphs - <p> for separating blocks of text by a small amount of white space 
      <p>Paragraph 1</p>
<p>Paragraph 2</p>

      Paragraph 1

      Paragraph 2

    7. Heading elements - <h1> thru <h6> used to specify headings of decreasing size (main heading, subheading, sub-subheading, etc.) 
      <h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>

      Level 1 heading

      Level 2 heading

      Level 3 heading

      Level 4 heading

      Level 5 heading
      Level 6 heading