Computer Programming 12 — Basic HTML

<New code>

page HTML <!doctype html> - at top of HTML5 documents
page HTML <html> - contains all the HTML code
page HTML <head> - information outside the window, like the title
page HTML <body> - information inside the window

block HTML <h1> - makes a large heading
block HTML <p> - makes a new paragraph

inline HTML <strong> - emphasizes text
inline HTML <a href=""> - create a hyperlink
inline HTML <img src="" title="kittens"> - displays an image with pop up title saying "kittens"

Howdy Programmer!

Welcome to the world of Hyper Text Markup Language - HTML. Think of HTML as a language that controls how things are displayed in a web browser.

The anatomy of a webpage

Many webpages use a combination of several programming languages to make magic happen. They use:

  1. HyperText Markup Language (HTML) to show things to the user
  2. Cascading Style Sheets (CSS) to change the design and visuals of those things
  3. and they use Javascript to change and process things

We are going to start by learning HTML, but let's see how they all fit in the same page. 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        
        <title>Parts of a Web Page</title>
        <meta name="description" content="This page shows the different basic parts of a web page">
        <meta name="author" content="Dave Drapak">

        <!--
            Change log: 
                27. July 2015   - created!
        -->

        <style>
        </style>
    </head>

    <body>
        <script>
        </script>
    </body>
</html>

The anatomy explained

<!doctype html>
    <!-- this shows that this document is written in HTML5 - the most recent version -->
    
<html lang="en">
    <!-- this shows that this page is written in english -->
    
    <head>
        <!-- the 'head' block of an HTML document contains code to support what is displayed in the body -->
        
        <meta charset="UTF-8">
            <!-- "UTF-8" is a character set that includes a wide range of international characters -->
            
        <title>Parts of a Web Page</title>
            <!-- this is the title that shows up in bookmarks and the title bar -->
            
        <meta name="description" content="This page shows the different basic parts of a web page">
            <!-- the description is used by search engines. Use it to describe your page -->
        <meta name="author" content="Dave Drapak">
            <!-- the "author" meta tag is where the programmer puts theire name -->
        
        <!--
            Change log: 
                27. July 2015   - created!
                28. July 2015   - added comments to explain each part of the page
        -->
            <!-- the change log is for you to help you track how you have modified your code -->
            
        <style>
            /* ...the Cascading Style Sheets (CSS) design code goes inside the <style> block... */
        </style>
    </head>

    <body>
        <!-- ...the HyperText Markup Language (HTML) text goes inside the <body> block... -->
		       
	<script>
            // ...the Javascript programming code goes inside the <script> block...
        </script>
    
    </body>
</html>

Using HTML tags

The programming code of HTML is made of tags.

For example, <!doctype html> means we are using the latest version of HTML, HTML5.

Anything inside the <title> tag appears on the title bar.

<h1> tags are used to enclose the biggest headings in a document. Use them to organize the information in your documents.

<p> tags are very common and used to enclose paragraphs in your document.

For most tags, you use them as a pair, normal at the beginning and then with a slash at the end: <strong>emphasized text</strong>.

Learn more

Live example: Hello world!