Homeschool.com Blog

bug

Web Design for Kids!

By Chris Yust, from Homeschool Programming, Inc.

(HomeschoolProgramming.com)

In this highly technological age, you may find that your children spend quite a bit of time on the Internet. They may be working in online classes, researching topics for papers, updating their social media outlets like Facebook and Twitter, or just surfing the web.  Regardless of what your children enjoy doing when they are online, chances are they have shown some interest in creating their own websites. Fortunately, basic website design is something that just about anyone can learn with no expensive software!

When you view a website, you are typically using a program called a web browser. The most common web browsers on the market today are Internet Explorer, Firefox, Chrome, and Safari.  These browsers all speak a common “language” called HTML.  While these letters may seem mysterious, the language itself is something that can be easily learned and understood by computer-literate children.

Tools of the Trade

OK, so your eager students are ready to learn HTML.  What do they need? A big fancy computer? Special software? Nope! Simple web pages can be created in any text editor program that comes already installed on your computer, like Windows Notepad or Mac’s TextEdit.  This means that all you need is a personal computer, some basic computer skills and your imagination! You don’t need to set up a web server or install new software.  If you need a quick primer on using Notepad or TextEdit, click here to watch a brief video.

Your First Web Page

To get started, run your Notepad or TextEdit program.  Once you have your text editor program open and you’re staring at a blank screen, what next? HTML code is just a series of “tags” that tell the browser how to display your web page. There are two tags that must be included in your file. The “<html>” tag tells the browser that you are starting your html code and it must be the first line in your file. At the very end of your file, you will “close” the tag with the word “</html>”.

<html>

</html>

In between these outermost “html” tags go two more important elements:  the “<head>” and the “<body>”.  The <head> area can contain information about your web page that is not displayed in the browser, so you can ignore that for now.  The “<body>” area contains all of the visible content that you want to appear.  Anything you type between the “<body>” and “</body>” tags will be displayed on your web page. So, if you wanted to make a web page that said “Hello there!”, you could create a file containing this text:

<html>

  <body>

Hello there!

  </body>

</html>

Now you can save your file with a name that ends in .html (like “myWebPage.html”). Then just find your file using the Windows Explorer or Mac OS Finder, double-click on it to launch your web browser, and marvel at your first ever web page!

Learning Options

Our super-simple example doesn’t add any fancy colors, formatting, pictures, or other things you’re used to seeing on a public web page.  That’s ok, you’re just getting started.  There is much more to learn!  You can find out more about HTML tags by searching through the many different tutorials that are available online.

If your student just wants to dabble a little then a freebie tutorial may fit your needs perfectly.  But finding well-organized semester or year-long programs geared for kids can be tougher task.  Fortunately, Homeschool Programming offers the KidCoder: Web Design self-study courses, fun for 4th-12th graders. Students can learn HTML, CSS, and JavaScript with step-by-step instructions and hands-on activities.  Put this class on your schedule and your students will thank you!

About the Author

Chris Yust has 17 years of experience as a software engineer and is co-author of the KidCoder and TeenCoder computer programming courses for 4th-12th grade students. Find out more about computer programming and website design for kids and teens at www.HomeschoolProgramming.com

Browse Categories