By Chris Yust, Homeschool Programming, Inc.
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!
Getting Started
When you view a website, you are typically using a piece of software 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.
Writing the Code
So now you that 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 another two sets of important tags: 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
Of course 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. A student who is more serious about learning may consider a formal self-study curriculum suitable for grading and transcript-building. Whatever approach your students choose, they have a fun, rewarding experience ahead of them!
About the Author:
Chris Yust from Homeschool Programming, Inc. is co-author of the KidCoder and TeenCoder computer science curriculum for 4th-12th grade students. Find out more about computer programming and website design for kids and teens at http://www.homeschoolprogramming.com!