learn_html.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LPR - Learn HTML</title>
    <link rel="stylesheet" href="./css/styles.css">
    <!-- <script src="./js/lpr_js.js"></script>  -->
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>

<body class="bg-indigo-100 px-6">
  <!-- Header Section Starts -->
  <header class="container mx-auto bg-gray-200 flex items-center justify-end rounded-b-lg shadow-xl">
    <div class="text-gray-600 hover:text-pink-500 p-2">
      <a href="index.html">Home</a>  
    </div>
    <div x-data="{ isOpen: false }" class="relative">
      <!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
      <button type="button" @click="isOpen = !isOpen" class="text-gray-500 group inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-pink-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
        <span>Topics</span>
        <!--
          Heroicon name: chevron-down

          Item active: "text-gray-600", Item inactive: "text-gray-400"
        -->
        <svg class="text-gray-400 h-5 w-5 group-hover:text-pink-500 group-focus:text-gray-500 transition ease-in-out duration-150" viewBox="5 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>

      <!--
        'Solutions' flyout menu, show/hide based on flyout menu state.

        Entering: "transition ease-out duration-200"
          From: "opacity-0 translate-y-1"
          To: "opacity-100 translate-y-0"
        Leaving: "transition ease-in duration-150"
          From: "opacity-100 translate-y-0"
          To: "opacity-0 translate-y-1"
      -->
      <div
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-200"
      x-transition:enter-start="opacity-0 translate-y-1"
      x-transition:enter-end="opacity-100 translate-y-0"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 translate-y-0"
      x-transition:leave-end="opacity-0 translate-y-1"
      @click.away="isOpen = false"
      class="absolute -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2">
        <div class="rounded-lg shadow-lg">
          <div class="rounded-lg shadow-xs overflow-hidden">
            <div class="z-20 relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
              <a href="learn_html.html" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-pink-50 transition ease-in-out duration-150">
                <!-- Heroicon name: code -->
                <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                </svg>
                <div class="space-y-1">
                  <p class="text-base leading-6 font-medium text-gray-900">
                    HTML
                  </p>
                  <p class="text-sm leading-5 text-gray-500">
                    Learn the basic structural foundation of web development
                  </p>
                </div>
              </a>
              <a href="#" class="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-pink-50  transition ease-in-out duration-150">
                <!-- Heroicon name: cursor-click -->
                <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
                </svg>
                <div class="space-y-1">
                  <p class="text-base leading-6 font-medium text-gray-900">
                    CSS
                  </p>
                  <p class="text-sm leading-5 text-gray-500">
                    Learn the basics of web page style and presentation.
                  </p>
                </div>
              </a>
              <a href="#" class="-m-3 p-2 flex items-start space-x-4 rounded-lg hover:bg-pink-50 transition ease-in-out duration-150">
                <!-- Heroicon name: terminal -->
                <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <div class="space-y-1">
                  <p class="text-base leading-6 font-medium text-gray-900">
                    JavaScript
                  </p>
                  <p class="text-sm leading-5 text-gray-500">
                    Learn the basics of the most popular web development language.
                  </p>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div> 
    </div> 
    <div class="text-gray-600 hover:text-pink-500 p-2">
      <a href="other_resources.html">Other Resources</a>
    </div>
    <div class="text-gray-600 hover:text-pink-500 p-2">
      <a href="why_lpr.html">Why LPR?</a>
    </div>
  </header>

  <!-- Content Section Starts -->
  <div class="container mx-auto bg-orange-50 p-6 mt-6 rounded-lg shadow-xl">
  <div class="px-20 py-1">
    <img src="./images/LPR_logo.png" class="h-16">
  </div>
      <h1 class="text-3xl font-bold text-center text-orange-700">   
        LPR - Learn HTML
      </h1>
      <div class="px-4 py-2 max-w-6xl">
      <blockquote class="px-3 text-base italic border-l-2 text-gray-500 leading-relaxed">
        <p>"HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content."</p>
        <cite class="flex flex-col items-end text-sm hover:text-pink-800 max-w-5xl"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN web docs</a></cite>
      </blockquote>
    </div>
      

    <div class="py-2 text-gray-500  font-medium max-w-6xl text-base">
      <p>Think of HTML as the internal structure, like the iron girders in a building or the skeletal structure of the human body.
        It not only holds and shapes the entire structure, but without it the thing itself would not exist or just be a formless mass.</p>
      <p class="py-1">It was invented by Tim Berners-Lee in 1993 based on using metatags to describe data, and with it a set of internal rules that 
        will effect how it will be displayed in a browser.
        <span class="text-gray-400 bg-gray-100 rounded-lg max-w-max-content italic block text-center p-4 mx-auto">&lt;p&gt;This would describe a paragraph.&lt;/p&gt;</span>
        The line above would describe a paragraph, or body of text, with an opening and closing pair 'p' tags.
      </p>
    </div>

      <h2 class="text-xl font-bold text-orange-800">Topics</h2>
      <div class="text-gray-500 font-medium max-w-6xl text-base">
          <h4 class="text-orange-600 font-thin">Basic Structure</h4>
          <p class="text-gray-500">
            All HTML pages have a basic structure which consists of delcarative item as the very first line called 
            <a href="https://developer.mozilla.org/en-US/docs/Glossary/Doctype" class="other_resources" target="_blank">DOCTYPE</a> declaration followed by 
            an all encompassing html tag which contains the two main tags of head and body which in turn hold everything else on a webpage.          
          </p>
          <div class="text-gray-400 bg-gray-100 rounded-lg max-w-sm italic block p-4 mx-auto">
            <code class="">&lt;!DOCTYPE html&gt;             
&lt;html&gt;
   &lt;head&gt;
     &lt;title&gt;...&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
      ... generic webpage structure
   &lt;/body&gt;
&lt;/html&gt;</code>
        </div>
          <h3 class="text-orange-600 font-thin text-sm">DOCTYPE</h3>
          <p class="text-gray-500">The doctype declaration is the very first line of any HTML document to ensure that established standards are adhered to 
            - known as Standards Mode. This provide a certain level of conformity across the various interpretations and display of elements across browsers 
            and even versions of browsers. It is a very succinct version of all the previous iterations.</p>

          <h3 class="pt-4 text-orange-600 font-thin text-sm">Common Tags</h3>
          <p class="text-gray-500">As you may have noticed, html consists of tags that surround areas, and items. The following is the basic
            HTML construct 
            <span class="text-gray-400 bg-gray-100 rounded-lg max-w-max-content italic block text-center p-4 mx-auto">
              &lt;opening tag&gt;Inner Content&lt;/closing tag&gt;
            </span>            
            This represents the majority of HTML tags, except for the handful of tags which are self closing:
            <div class="text-gray-400 bg-gray-100 rounded-lg max-w-sm italic block p-4 mx-auto">
              <code class="">&lt;br /&gt; <span class="text-gray-300">--adds a new line break </span>
&lt;input /&gt; <span class="text-gray-300">--creates a user input field </span>
&lt;img /&gt; <span class="text-gray-300">--adds an image on the page</span></code>            
            </div>

            HTML It is a Markup Language (ML part) which describes how content will be rendered by virtue of the tags that contain it</p>
            <h3 class="pt-2 text-orange-600 font-thin text-sm">Try it out</h3>
            <p>Here is a an area where you can enter some content within HTML tags and see the result:</p>
            <div id="liveResult">
              <div id="button">
                  <button onclick="showHTML()" class="px-4 py-2 bg-green-300 text-white">Run</button>
              </div> 
              <div id="inputContainer">
                  <textarea id="rawhtml"></textarea>
              </div>
              <div id="resultContainer">
                  <iframe id="outputhtml">
                      <h1>Placeholder</h1>
                  </iframe>
              </div>
              
          </div>
      </div>
    </div>
</body>
<script src="./js/liveResult.js"></script>
</html>