techboyg5 Web Development Tutorial

2.1 - What is HTML?

HTML is the markup language of the Web.

HTML stands for Hypertext Markup Language.

HTML defines the structure of all pages on the Web. Each webpage is an HTML document.

HTML is not for styling, with CSS used instead. HTML is also not a programming language, with JavaScript used instead.

What does an HTML document look like?

Maybe my main page?

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-167358769-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-167358769-2');
</script>
        
        <meta charset="utf-8">
        <title>techboyg5's Projects</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    </head>
    <body>
        <div class="jumbotron jumbotron-fluid">
            <div class="container mb-3">
                <h1 class="display-4">techboyg5's Projects</h1>
                <p class="lead">Learn about our projects, including websites and browser extensions.</p>
                <hr>
                <p>Below are all of my projects, starting with websites and then browser extensions.</p>
            </div>
              </div>
        <div class="container">
            <h2>Websites</h2>
          <div class="row">
            <div class="col-sm">
              <div class="card shadow my-3">
                <div class="card-body">
                  <h5 class="card-title">Web Development Tutorial</h5>
                  <p class="card-text">Learn how to make your very own website!</p>
                  <a href="https://projects.techboyg5blog.com/web-development-tutorial/chapter1/page1.html" class="btn btn-primary stretched-link">Web Development Tutorial</a>
                </div>
              </div>
            </div>
              <div class="col-sm">
              <div class="card shadow my-3">
                <div class="card-body">
                  <h5 class="card-title">Single Color Pages</h5>
                  <p class="card-text">Just want to look at some boring colors and nothing else? Choose between 17 background colors, sit back and relax.</p>
                  <a href="https://projects.techboyg5blog.com/single-color-pages/" class="btn btn-primary stretched-link">Single Color Pages</a>
                </div>
              </div>
            </div>
              <div class="col-sm">
              <div class="card shadow my-3">
                <div class="card-body">
                  <h5 class="card-title">My Favorite Songs Carousel</h5>
                  <p class="card-text">Need a carousel example? Use mine!</p>
                  <a href="https://projects.techboyg5blog.com/favoritesongscarousel/" class="btn btn-primary stretched-link">My Favorite Songs Carousel</a>
                </div>
              </div>
            </div>
              <div class="col-sm">
              <div class="card shadow my-3">
                <div class="card-body">
                  <h5 class="card-title">My Pong Game</h5>
                  <p class="card-text">Take a look at my Tynker project, now on GitHub! This is a work in progress by the way.</p>
                  <a href="https://github.com/techboyg5/techboyg5.github.io/blob/master/pong.html" class="btn btn-primary stretched-link">My Pong Game</a>
                </div>
              </div>
            </div>
          </div>
            <h2>Browser Extensions</h2>
          <div class="row">
              <div class="col-sm">
              <div class="card shadow my-3">
                <div class="card-body">
                  <h5 class="card-title">Left Side Dropdowns</h5>
                  <p class="card-text">Using Pale Moon but want your dropdowns the proper way? Get this extension to fix the problem.</p>
                  <a href="https://projects.techboyg5blog.com/left-side-dropdowns/" class="btn btn-primary stretched-link">Left Side Dropdowns</a>
                </div>
              </div>
            </div>
            <div class="col-sm">
              <div class="card shadow my-3">
                <div class="card-body">
                  <h5 class="card-title">CleanStart</h5>
                  <p class="card-text">Hate your current startpage? Make it clean with CleanStart!</p>
                  <a href="https://addons.mozilla.org/en-US/firefox/addon/cleanstart/" class="btn btn-primary stretched-link">CleanStart</a>
                </div>
              </div>
            </div>
            <div class="col-sm">
              <div class="card shadow my-3">
                <div class="card-body">
                  <h5 class="card-title">BrightTheme</h5>
                  <p class="card-text">Are you always looking on the dark side? Turn it around and look on the Bright Side with BrightTheme!</p>
                  <a href="https://addons.mozilla.org/en-US/firefox/addon/brighttheme/" class="btn btn-primary stretched-link">BrightTheme</a>
                </div>
              </div>
            </div>
          </div>
            <h2>Miscellaneous</h2>
          <div class="row">
            <div class="col-sm">
                <div class="card shadow my-3">
                    <div class="card-body">
                        <h5 class="card-title">Check out my GitHub profile for the source code for all of my projects!</h5>
                        <p class="card-text">Want to see how I made my projects? My projects are open source, and each one has it's own repository on GitHub. Check them out!</p>
                        <a href="https://github.com/techboyg5/" class="btn btn-primary stretched-link">techboyg5 on GitHub</a>
                    </div>
                </div>
            </div>
            <div class="col-sm">
                <div class="card shadow my-3">
                    <div class="card-body">
                        <h5 class="card-title">Blog</h5>
                        <p class="card-text">Check out my blog for the latest and greatest tech news!</p>
                        <a href="https://techboyg5blog.com/" class="btn btn-primary stretched-link">Visit My Blog</a>
                    </div>
                </div>
            </div>
          </div>
            <footer class="my-3">
                <p>© 2020 by techboyg5. All rights reserved. Licensed under the MIT License. <a href="/privacy.html">Privacy Policy</a></p>
            </footer>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    </body>
</html>

  

What is Programming?

Learn more in the video below.



Comments

Leave a Comment