In this session, we will help you understand some of the fundamental skills and knowledge which you can acquire, in order to be able to setup your own website and web pages.

For testing out basic HTML codes, we do not need any fancy technologies. As long as you have "Notepad" application installed in your computer system, we can begin. The application should be available by default on most computer system.

Other than theory, you will be required to do some hands-on typing of HTML codes into "Notepad" application. Watch out for "Learn By Doing" exercises to help you connect what you read, with what you have typed.

At the end of this section, you should be able to:

• Understand the basic terminology related to this topic
• Articulate the process for building a webpage
• Create simple html pages with Notepad

Let's begin.

Basics of HTML5 (1)

HTML5 is the fifth edition of HTML. It has backward compatibility with current browsers. HTML is designed primarily for semantic markup, emphasizing on describing the logical structure of the document.

To create the modern day websites, two other front-end web languages are also commonly utilised:

• CSS handles the syntactic (procedural) markup, with emphasis on the fonts, colors and margins etc.
• Complex interactive and media elements are handled by scripting languages such as JavaScript.

CSS and JavaScript can be written within a HTML page, or be loaded into the web page as an external source.

Basics of HTML5 (2)

In the past certain display and interactive elements written for web pages may have to be written differently for every individual browser.

In HTML5, recommendations identified by World Wide Web Consortium (W3C) are maintained by the Web Hypertext Application Technology Working Group (WHATWG), as well as a consortium of the major browser vendors (e.g., Apple, Google, Mozilla, and Microsoft).

This allows developers to better prepare for codes that can be executed across different web browsers.

HTML5 is distinguished in two main categories:

• structure
• media

HTML5's new capabilities (some of which requires support from CSS and JavaScript), include:

• Drawing with the canvas element
• Dragging and dropping
• Getting data with the new web form controls
• Edit web pages on the fly
• Remembering browser history
• Video and audio support
• Making use of web storage

HTML Living Standard

For budding web designers and programmers, when you begin learning HTML5; you are following, aligning and tapping on the HTML Living Standard.

In your own understanding, why is the HTML Standard important for those learning to be web designers and programmers?

Perhaps a take on this question is that:
"In the context of HTML standard, there are rules and guidance that helps align how different broswers read HTML code, and ensure quality of the web profession.
There are also listing of "building blocks" which web professionals can read to understand what HTML is capable of."

Learn By Doing: Exercise 1 - Hello World

Click Here to Open Up the Video in a Separate Browser Tab

Scroll down to watch the video for the guided flow. You may also follow the listed steps to appreciate how simple it is for you to create a HTML file.

Step 1: Open Notepad

Step 2: Type in the following code and [indentation].
Please note that you are not suppose to type the word [indentation]. You may create the action of a [indentation] by clicking on "tab" key.

Step 3: Save the file as HelloWorldIn_Head_Title.html > AND select "Save as type:" as "All Files".

Step 4: Go to the folder where you saved your work, you will notice that it is now a html file. Open it in your web browser. You should see the word "Hello World" appearing in the browser tab.

Step 5: Open a new Notepad.

Step 6: : Type in the following code and [indentation].

Notice that in this code, we changed the text within and placed the text "Hello World! within .

Step 7: Save the file as JustASimpleTest_HelloWorldIn_Body.html > AND select "Save as type:" as "All Files".

Step 8: Open your newly saved file. What do you see being displayed on your newly created webpage?

What Do You Think Happened?

You have followed the instructions to type in the words and created two HTML files, each displaying text differently, in different places on your web pages.

Based on what you observed, typed and read, what do you think happened?

Validate your understanding with the explanation given in the next page.

Understanding: Exercise 1

Click Here to Open Up the Video in a Separate Browser Tab

As you might have noticed, a HTML document has four key parts that is a constant for all HTML files.

• Doctype: Defines the version of HTML being used.
• HTML: Contains the Head and Body of a web page.
• Head: Contains the metadata (e.g., language, title), supporting files (e.g., JavaScript, Styling, Add-ons).
  • It should be noted that title is the only element within the head, that is displayed in the browser.
• Body: Contains the displayable content and may contain some metadata. In reference to DOM structure, it is important to ensure that your code is well-formatted and designed in a tree-like structure.

The words "Hello World" in between the "title" start and end "tags" will appear in the browser tab of the website when loaded in a web browser.

If the words "Hello World" are shifted in between the start and end tags of "body", the text will appear in the web page itself when loaded in a web browser.

What are HTML Tags?

HTML tags are special keywords that helps you define how a web browser can format and display your code instructions. Tags have a beginning and an end. Anything within the start and end tags is the content.

An HTML element is defined by a start tag, some content, and an end tag. (ref: https://www.w3schools.com/html/html_elements.asp)

• Tags are denoted in < >, such as <html>
• Tags are case-insensitive. <HTML> is the same as <html> or <HtML>
• Tags usually come in pairs. An opening tag and a closing tag enclose the actual content. <i>text</i>
• The closing tag of a tag pair always starts with "</"
• TSome tags do not need closing tag. <br> <hr>

Examples in reference to the figure shown:
#1
Start Tag = <title>
Element Content = Just a simple test
End Tag = </title>
#2
Start Tag = <body>
Element Content = Hello World!
End Tag = </body>

What is the HTML DOM?

When a browser loads a web page, it creates the document object model (DOM) structure of the page.
(ref: https://www.w3schools.com/whatis/whatis_htmldom.asp)

Imagine the structure to be objects (e.g., HTML elements, text and other media)

As a continuation to exercise 1, this is the DOM structure of the last page that we created. When the websites that you create grows in complexity, being aware of the DOM structure allows you to more easily plan and design for future interactive elements when pairing with JavaScript.

In later sessions, you will learn that HTML elements can be assigned "attributes" e.g., names.

• Take for instance two different elements named "class1" and "class2".
• Such named elements may then be affected by CSS or JavaScript for further styling manipulation or setting-up of interactive or algorithmic functions.

Having clarity of which element at what tier of the DOM structure you wish to affect will allow you to reduce potential errors when designing and setting-up your code.

Learning Tips

As you continue your journey to learn more of HTML5 and other computer languages, here are a few learning tips which may help you learn faster.

• Don't expect to learn all the HTML tags or syntax of any new programming language by taking a few classes.
  • To provide context, there are 100+ html tags and to teach you all of the tags will be incredibly ineffective and boring because you might never use most of them.
  • Instead you will be taught the common HTML tags to get you started in class.
  • It will be up to you to practice setting-up websites for different use-cases, through which you may encounter special situations where you may then need to search on the internet to understand if there is a particular tag able to solve your HTML issue.
• Everyday millions of people are growing, learning, thinking of new ideas and creating new projects. To self-help yourself to latest information and learning opportunities, some of the web communities you may wish to explore, learn and contribute to:
  • Code.org (ref: https://code.org/)
  • Github | Web Development Projects (ref: https://github.com/topics/web-development)
  • Community at Adobe (ref: https://community.adobe.com/)
  • W3School HTML Tutorials (ref: https://www.w3schools.com/html/)

What is the Difference Between Using Notepad vs. Other Commercial Tools?

Click Here to Open Up the Video in a Separate Browser Tab

Think of the difference between writing on a piece of paper vs. the experience of typing out your written words on Microsoft Word, or use spell checker software such as Grammarly.

For someone with less care in their language skills, the spell checkers embedded in such commercial software helps you accelerate your writing process and makes the experience less tiresome.

It is the same with using a humble Notepad to type out HTML code vs. using a commercial software such as Dreamweaver. As ITE students, you have student access to Dreamweaver and other commercial tools meant to support your learning exploration. This is a rare opportunity for you to download Dreamweaver and test it out.

As you may see from the video recording, commercial tools such as Dreamweaver has a wizard to setup the basic HTML file, or bootstrap templates to quickly setup certain layouts that you can tap on to create new websites faster. The software also allows you better ease in typing, formatting and reading code, as well as view your code live via special split screen features.