Q X Innovation
  • Home
  • Contact

Programming for kids 3: webpages

30/5/2013

 
Picture
Although building static webpages with a tool like weebly is not exactly programming, it gives some understanding on how the world wide web is build. And it is a starting point for creating interactive webpages, which does involve programming.

Webpages and websites can be easily build via a website like weebly.com. After signing in, you can create your own website for free. Adding a webpage is easy: on the "Pages" screen you select "Add Page" and click "Save & Edit".

Picture
When you start a new webpage, you get an empty place  with the text "Drags elements here". You can select elements (such as "TEXT", "IMAGE", "IMAGE + TEXT") from the menu on the left. Just drag the wanted element.

After you have dragged the element in place, you can fill the element with the required content, e.g. an image can be uploaded from your computer, text can be entered.
By adding multiple elements to a page, you can create  webpages easily. 

The elements in the menu (with images, text, etc.) give enough possibilities to create static webpages. When you want to create interactive webpages, you must go beyond these possibilities and add some programming. As first step, you add "Custom HTML" (use the option "EMBED CODE" in the menu) to the webpage (see 1st screenshot below).  The "Custom HTML" element is similar to the "TEXT", except that in the "TEXT" element you write in your own language (English, Dutch, French, etc.) and in the "Custom HTML" you write in the HTML language. HTML is a programming language used by webbrowsers to display webpages. You can learn more about HTML at  beginners guide to html and w3schools.

As example, we have added the text  <button type="button >Click Me!</button> in the custom HTML field (see 2nd screenshot below). Below the same custom HTML is added: the browser displays this as a button with the text "Click Me!". On this webpage, nothing happens yet when you click the button, because we didn't tell the computer what to do when you click the button. This requires some extra programming. That's something for the next topic: "javascript". 

Picture
Picture

Comments are closed.

    Author

    Jos den Hartog
    @josdenhartog

    View my profile on LinkedIn

    Archives

    July 2013
    June 2013
    May 2013
    February 2013
    January 2013
    December 2012

Powered by Create your own unique website with customizable templates.