Home Lessons LAMP HTML/CSS PHP MySQL JavaScript YouTube Blog PHP Fiddle

Intro to HTML: Starter Tags

Quick Copy Boxes












Intro to Linux:

Linux: Basic Commands & Definitions

Intro to PHP Playlist:

Intro to PHP


Follow Coding Commanders on:

YouTube

GitHub

Facebook

Instagram

Twitter

Creating an HTML File: The first step is to make sure you name your file properly. HTML files are named fileName.html Many projects include a file called index.html When you have a directory (or folder) of files, the web browser will automatically first go to the index page. So this will probably be the name of the home page.

Mixed Code Files: Coding Commander's tutorials are designed to teach you all the languages needed to build a web application from front to back. In an HTML file, you can only include HTML code and front-end scripts(i.e. Javascript). On the other hand, PHP files allow you to include PHP, HTML, and Javascript, all in one file. If you name your file fileName.php, you are still able to run the same HTML code. If you are using PHP files you may name your home page index.php.

Programming Evolution: Just like with all other technology, programming languages and frameworks also come out with new versions. Programming today is a lot different than it used to be. When I was in the 4th grade I learned to program with Basic(old programming language). When I got to college, I took C++ and Visual Basic. It was nothing like my 4th grade experience. Today programming is even more different. The standards in programming and programming languages are always evolving.


Starter Tags

Below you will find common HTML starter tags. Depending on your project, these tags may not all be included. However, most documents will start with these tags. You will then add content, and more tags, inside this skeleton HTML code.

Color Selector



Hex:


RBG:


Intro to LAMP:

What is LAMP Stack?

If you find my tutorials helpful, please consider donating to support my free web development resources.

The more money I raise, the more content I can produce.

Thank you,
Commander Candy

DONATE

Donor Rewards (Click Here):

Don't see the reward you want? Message me and let's make a deal! Please scroll through the donation amounts on my reward page to make sure you make a reasonable offer!


Check out my blog:

Commander Candy's Blog

Anywhere you see '➼', you are able to hover over the code that follows to highlight it in the starter tag example.
  
  <!DOCTYPE html>
  <html>
    <head>
        <!-- Include all your style sheet links in the head-->
        <!-- CSS link-->
        <link rel="stylesheet" type="text/css" href="custom.css">
        <!-- Style-->
        <style >
          /* You can put css code here or in your style sheet*/
        </style>
        <!-- Page Title shown in the browser tab -->
        <title>Title</title>
    </head>
    <!-- Main Content Area-->
    <body>
        <!-- Containers for your content-->
        <div>
        <!-- Content-->
        Good day Coding Cadets!!!
        </div>
    </body>
  </html>

➼ <!DOCTYPE html> This tells the web browser what version of HTML you are using. We are using HTML5.
➼ <html> HTML document starts here
➼ <head> Page Head Starts here
➼ <!-- ... --> HTML Comments
➼ <link ... > This is a CSS link.
➼ <style > You can put CSS code specific to the page in style tags. It is placed in the head tags.
➼ </style> This is ending style tag.
➼ <title>Title</title> The title tag contains the title displayed in the web browser tab. It goes in the head tags.
➼ </head> This is ending head tag.
➼ <body> This is begining body tag. The main content of your page will go here.
➼ <div> This is a start div tag. Div is a type of container. Containers are filled with content and other containers filled with content.
➼ Good day Coding Cadets!!! This is content.
➼ </div> This is a ending div tag.
➼ </body> This is ending body tag. It indicates the end of your main content.
➼ </html> This is the ending html tag. It indicates the end of your html code.

© 2017 Coding Commanders. All Rights Reserved.