Hour of Code : Offline HTML Web Development

  1. Download the offline Hour of Code from here (zip file)
  2. Extract the zip file on the desktop.
  3. Double click the HourOfCode.html file and open it in a browser.
  4. You will see the web page shown below in the image.
  5. Explaining windows on the Offline Web Development

HOC_Web_Dev

Window #1 (Lesson Window): It contains the explains for 3 HTML tags we have plan to learn in next one hour.

HOC_Web_Dev_W1

Window #2 (Exercise Window): It contains the questions that the student need to solve in order to code the 3 HTML tags. It also contains the final result that the student will see after finishing the code.

HOC_Web_Dev_W2

Window #3 (Code Window): Here is the place where students write the code. You can tell the student write your code in yellow window.

HOC_Web_Dev_W3

Window #4 (Output Window): When the students writes the code in yellow window (Code window) and clicks the button “Click here to run your first code” the result is displayed in output window. (Result shown below)

HOC_Web_Dev_W4

Explain student before you start to code :

  • Explain the application of HTML to the students.
  • Where normally that see HTML?
  • What are the use of it?
  • Explain what is an browser and its use.
  • Explain what is a tag in HTML.

Final Output 

HOC_Web_Dev_Result

Happy Hour of Code!

Advertisements

One thought on “Hour of Code : Offline HTML Web Development

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s