index.html

<!DOCTYPE html>
<html>
  <head>
    <title>WEBSITE</title>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="./sample.jpg">
  </head>
  <body>
    hey hey.

    <h2>document as you go!</h2>
    
    <div class="opener">
      <div class="title">
        HTML Basics
      </div>
      <a class="toc-1" href="#1">line breaks</a><br>
      <a class="toc-1" href="#2">headers</a><br>
      <a class="toc-1" href="#3">lists</a><br>
      <a class="toc-1" href="#4">media</a><br>
      <a class="toc-2" href="#4.1">images</a><br>
      <a class="toc-2" href="#4.2">videos</a><br>
      <a class="toc-1" href="#5">resources & tutorials</a><br>

    </div>

    <div class="main-text">

      now you get fancy with with a css style script and <code>&ltdiv&gt</code>
      tags which allow you to define blocks with sepcific styles on the html page !
      <br><br>
      

      <h2 id="1">line breaks</h2>
      add a line break like
      <br>
      this
      <br>
      with <code>&ltbr&gt</code>
      
      <h2 id="2">Headers</h2>
      You can organize all of the information in your page with nested header
      fields of varying sizes
      <div class="block-container">
        <div>
          <b>so that this:</b>
          <br><br>
          <xmp>
<h1>header 1</h1>
<h2>header 2</h2>
<h3>header 3</h3>
<h4>header 4 </h4>
<h5>header 5</h5>
          </xmp>
        </div>
        <div>
          </b>should look like this:</b>
          <br><br><br><br>
          <h1>header 1</h1>
          <h2>header 2</h2>
          <h3>header 3</h3>
          <h4>header 4 </h4>
          <h5>header 5</h5>

        </div>
      </div>


      <h2 id="3">Lists</h2>
      you can create a numbered list (ordered list) with <code>&ltol&gt
        &lt/ol&gt</code> or bullet points (unordered list) with <code>&ltul&gt
        &lt/ul&gt</code> and then embed list items with <code>&ltli&gt
        &lt/li&gt</code>

      <div class="block-container">
        <div>
          <b>so that this:</b>
          <br><br>
          <xmp>
number list
<ol>
  <li>first point</li>
  <li>second point</li>
  <li>third point</li>
</ol>
or bullet points
<ul>
  <li>bullet one</li>
  <li>bullet two</li>
  <li>bullet three</li>
</ul>
          </xmp>

        </div>
        
        <div>
          <b>should end up looking like this:</b>
          <br><br><br><br>
          number list
          <ol>
            <li>first point</li>
            <li>second point</li>
            <li>third point</li>
          </ol>
          or bullet points
          <ul>
            <li>bullet one</li>
            <li>bullet two</li>
            <li>bullet three</li>
          </ul>
          
        </div>
        
      </div>

      <h2 id="4">media</h2>
      <h3 id="4.1">images</h3>
      embed images with the <code>&ltimg&gt</code> tag
      <div class="block-container">
        <div>
          <xmp>
<img src="path/to/img_file.png"
alt="alternative text description"
width="500" height="600"></xmp>
        </div>

        <div>
          <img src="../media/sample.jpg" alt="example image" height="200">
        </div>
      </div>

      
      <br></br>
      <br><br>

      <h3 id="4.2">videos</h3>
      or videos with <code>&ltvideo&gt</code> tag
      <br><br>
      <div class="block-container">
        <div>
          <xmp>
<video width="320" height="240" controls>
  <source src="path/to/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

          </xmp>
        </div>

        <div>
          <video width="320" height="240" controls>
            <source src="../media/sample.mp4" type="video/mp4">
              Your browser does not support the video tag.
          </video>
        </div>
      </div>

      <h2 id="5">more resources and tutorials</h2>
      <ul>
        <li><a href="https://www.w3schools.com/css/default.asp">css tutorial</a></li>
        <li><a href="https://www.w3schools.com/css/css3_flexbox.asp">css flex blocks</a></li>
      </ul>

    </div>
    
    
  </body>