<commit_before><!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Tech 21 @ BPL Lesson 1 - Introduction to HTML</title>

    <link rel="stylesheet" href="css/reveal.css">
    <link rel="stylesheet" href="css/theme/black.css">
    <link rel="stylesheet" href="css/tech21.css">

    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="lib/css/zenburn.css">

    <!-- Printing and PDF exports -->
    <script>
      var link = document.createElement( 'link' );
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
      document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>
          <h1>Tech 21 @ BPL</h1>
          <h3>Lesson 1</h3>
          <h2>Introduction to HTML</h2>
        </section>

        <section>
          <h2>What is HTML?</h2>

          <div class="sub-header">Hypertext Markup Language</div>

          <p class="fragment fade-up info">Standardized system that tells the browser how to <em>render</em> (display) information by using tags and attributes as instructions.</p>

          <p class="fragment fade-up info">Browsers transform tags into HTML <em>elements</em> that are contained in the Document Object Model, which is commonly referred to as the <em>DOM</em>.</p>
        </section>

        <section>
          <section data-markdown>
            <script type="text/template">
              ## Tags
              ```
              <tag attribute="value"></tag>
              ```
              This is the general form of a tag.

              Attributes and values are optional.

              Examples of commonly used tags include:

              ```
              <div>Division</div>
              <p>Paragraph</p>
              <ol>Ordered List</ol>
              <ul>Unordered List</ul>
              ```
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ## Tags with Content
              Many tags accept content in between the opening and closing of the tag.
              ```
              <div>Content</div>
              ```

              Some tags do not accept content and can be closed in the opening tag. The Line Break tag is an example:
              ```
              <br />
              ```
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ## Nested Tags
              Tags may also be Nested, meaning that they are contained within the opening and closing of another tag.
              ```
              <ul>
                <li>List Item 1</li>
                <li>List Item 2</li>
                <li>List Item 3</li>
              </ul>
              ```
            </script>
          </section>
        </section>

        <section>
          <section data-markdown>
            <script type="text/template">
              ## Structure of an HTML Page
              ```
              <!DOCTYPE html>
              <html>
                <head>
                  <title>Hello World</title>
                </head>
                <body>
                  <p>Hello World!</p>
                  <p>This will be displayed in the browser window</p>
                </body>
              </html>
              ```
              Note how the tags are nested.
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ### Document Type Declaration
              ```
              <!DOCTYPE html>
              ```
              Tells the browser to process the document in the latest HTML mode (currently HTML5)
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ### HTML Tag
              ```
              <html>

              </html>
              ```
              The container for all other HTML elements.
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ### Head Tag
              ```
              <head>
                <title>Hello World</title>
                <meta charset="UTF-8">
                <meta name="description" content="HTML example">
              </head>
              ```
              Container for the head elements, which includes information about the page such as the title and metadata used by machines to gather information about the page (like search engines).
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ### Body Tag
              ```
              <body>
                <p>Hello World!</p>
                <p>This will be displayed in the browser window</p>
              </body>
              ```
              Container for the main body of the document. This is where you put the elements you want displayed in the browser window.

              In the example above, two paragraphs with the text content will be rendered.
            </script>
          </section>
        </section>

        <section>
          <h2>CodePen</h2>
          <p>We will use <em>CodePen</em> as a tool for learning to write HTML. CodePen is a browser-based app that renders the HTML as we write it.</p>
          <p>Let's create our CodePen accounts and get started!</p>
          <a href="https://codepen.io/">https://codepen.io/</a>
        </section>
      </div>
    </div>

    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.js"></script>

    <script>
      // More info about config & dependencies:
      // - https://github.com/hakimel/reveal.js#configuration
      // - https://github.com/hakimel/reveal.js#dependencies
      Reveal.initialize({
        dependencies: [<commit_msg>Add some slides about HTML elements<commit_after><!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Tech 21 @ BPL Lesson 1 - Introduction to HTML</title>

    <link rel="stylesheet" href="css/reveal.css">
    <link rel="stylesheet" href="css/theme/black.css">
    <link rel="stylesheet" href="css/tech21.css">

    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="lib/css/zenburn.css">

    <!-- Printing and PDF exports -->
    <script>
      var link = document.createElement( 'link' );
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
      document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>
          <h1>Tech 21 @ BPL</h1>
          <h3>Lesson 1</h3>
          <h2>Introduction to HTML</h2>
        </section>

        <section>
          <h2>What is HTML?</h2>

          <div class="sub-header">Hypertext Markup Language</div>

          <p class="fragment fade-up info">Standardized system that tells the browser how to <em>render</em> (display) information by using tags and attributes as instructions.</p>

          <p class="fragment fade-up info">Browsers transform tags into HTML <em>elements</em> that are contained in the Document Object Model, which is commonly referred to as the <em>DOM</em>.</p>
        </section>

        <section>
          <section data-markdown>
            <script type="text/template">
              ## Tags
              ```
              <tag attribute="value"></tag>
              ```
              This is the general form of a tag.

              Attributes and values are optional.

              Examples of commonly used tags include:

              ```
              <div>Division</div>
              <p>Paragraph</p>
              <ol>Ordered List</ol>
              <ul>Unordered List</ul>
              ```
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ## Tags with Content
              Many tags accept content in between the opening and closing of the tag.
              ```
              <div>Content</div>
              ```

              Some tags do not accept content and can be closed in the opening tag. The Line Break tag is an example:
              ```
              <br />
              ```
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ## Nested Tags
              Tags may also be Nested, meaning that they are contained within the opening and closing of another tag.
              ```
              <ul>
                <li>List Item 1</li>
                <li>List Item 2</li>
                <li>List Item 3</li>
              </ul>
              ```
            </script>
          </section>
        </section>

        <section>
          <section data-markdown>
            <script type="text/template">
              ## Structure of an HTML Page
              ```
              <!DOCTYPE html>
              <html>
                <head>
                  <title>Hello World</title>
                </head>
                <body>
                  <p>Hello World!</p>
                  <p>This will be displayed in the browser window</p>
                </body>
              </html>
              ```
              Note how the tags are nested.
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ### Document Type Declaration
              ```
              <!DOCTYPE html>
              ```
              Tells the browser to process the document in the latest HTML mode (currently HTML5)
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ### HTML Tag
              ```
              <html>

              </html>
              ```
              The container for all other HTML elements.
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ### Head Tag
              ```
              <head>
                <title>Hello World</title>
                <meta charset="UTF-8">
                <meta name="description" content="HTML example">
              </head>
              ```
              Container for the head elements, which includes information about the page such as the title and metadata used by machines to gather information about the page (like search engines).
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ### Body Tag
              ```
              <body>
                <p>Hello World!</p>
                <p>This will be displayed in the browser window</p>
              </body>
              ```
              Container for the main body of the document. This is where you put the elements you want displayed in the browser window.

              In the example above, two paragraphs with the text content will be rendered.
            </script>
          </section>
        </section>

        <section>
          <h2>CodePen</h2>
          <p>We will use <em>CodePen</em> as a tool for learning to write HTML. CodePen is a browser-based app that renders the HTML as we write it.</p>
          <p>Let's create our CodePen accounts and get started!</p>
          <a href="https://codepen.io/">https://codepen.io/</a>
        </section>

        <section>
          <section data-markdown>
            <script type="text/template">
              ### Commonly Used HTML Elements
              ```
              <h1> <h2> through <h6>
              <div>
              <span>
              <p>
              <ol>
                <li>
              <ul>
                <li>
              <a>
              <img>
              ```
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ### Commonly Used HTML Elements
              ```
              <h1>Header 1</h1>
              ```
              <h1>Header 1</h1>

              ```
              <h2>Header 2</h2>
              ```
              <h2>Header 2</h2>

              ```
              <h3>Header 3</h3>
              ```
              <h3>Header 3</h3>
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ### Commonly Used HTML Elements
              ```
              <div>First</div>
              <div>Second</div>
              ```
              <div>First</div>
              <div>Second</div>
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ### Commonly Used HTML Elements
              ```
              <div>
                <span>First Span</span>
                <span>Second Span</span>
              </div>
              ```
              <div>
                <span>First Span</span>
                <span>Second Span</span>
              </div>
            </script>
          </section>
        </section>

        <section>
          <section data-markdown>
            <script type="text/template">
              ## HTML Layout
              ```
              ```
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ## HTML Layout Continued
              ```
              ```
              In the example above, two paragraphs with the text content will be rendered.
            </script>
          </section>

          <section data-markdown>
            <script type="text/template">
              ## HTML Layout Continued
              ```
              ```
              In the example above, two paragraphs with the text content will be rendered.
            </script>
          </section>
        </section>
      </div>
    </div>

    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.js"></script>

    <script>
      // More info about config & dependencies:
      // - https://github.com/hakimel/reveal.js#configuration
      // - https://github.com/hakimel/reveal.js#dependencies
      Reveal.initialize({
        dependencies: [
{'fraction_non_alphanumeric': 0.11765101122085601, 'fraction_numerical': 0.005308069609621716, 'mean_word_length': 1.3420928402832415, 'pattern_counts': {'":': 0, '<': 373, '<?xml version=': 0, '>': 373, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1392709', 'n_tokens_mistral': 3919, 'n_tokens_neox': 3719, 'n_words': 1118}