How to Teach Children How to Design a Webpage

by Emilia Lamberto

The Internet is a very powerful tool, connecting people all over the world and showcasing individual talents without the need of having face-to-face meetings. For children, the Internet may be quite confusing, even overwhelming. At the same time, it may arouse curiosity and interest. Teaching children how to design their own Web page is a neat way to familiarize them with how the Web works.

1

Show the child a basic website in a Web browser (i.e. Internet Explorer, Firefox, Safari). Point to various parts of the website such as links, text and images. Tell your child that the browser is used to translate Web "code" into the page that she sees.

2

Point at the site address. Explain that the address of the site is a "URL" which stands for "uniform resource locator." Demonstrate that the URL is the website "address" that takes you to a particular website, document or anywhere else on the Internet.

3

Explain the make-up of a basic website. The codes that the browser translates are HTML (hypertext markup language) and CSS (cascading style sheets). HTML is the basic make-up of the page and includes links, text and image codes. CSS is what creates the layout design and colors of the page.

4

List the tools needed to get started, such as an editor, Web space and ideas. Although graphics are not required, they do help spruce up a Web page. The editor is needed in order to write out your HTML and CSS codes. Web space is required in order to store your codes so that the information may be seen online. Web space may be found for free on sites like Webs, Bravenet and Tripod. Sub-domains are also available (http://www.websitehost.com/yourchildssitename). Graphics may be created with free image-editors like Paint or Gimp.

5

Upload any images for the site on your Web space provider or through an image-hosting website. You will receive a direct-link after uploading the image. Make note of this link.

6

Set up the basic page. After signing up for free Web space and choosing the domain name, your child may begin his site. Start by having him enter the following basic code into his editor:

<html>

<head>

<title>WEBPAGE TITLE HERE</title>

<style type="text/css">

body { background-color: #33ccff; }

h1 { font-family: arial, verdana; color: #6600ff }

p { font-family: arial, verdana; color: #6600ff }

.center { text-align: center; }

</style>

</head>

<body>

<p class="center"><h1>HEADING OF THE PAGE</h1></p>

<p class="center"><p>Enter website information here.</p>

<p class="center"><img src="image.jpg" /></p>

</body>

</html>

7

Explain each part of the code individually. The "HTML" tag tells the browser that HTML is being used for the Web page. The "head" tag includes the title of the website along with all CSS. The CSS in the site starts after "<style type='text/css'>" which tells the browser that CSS is being used. The "body/background" tag provides the color of the background. The color is a number because in Web code, you use HEX codes which are numbers that define certain colors. The "h1" area designs the headings of the page and the "p" area designs the paragraphs. The "center" tag centers the page. After CSS, you will see the "<body>" tag which is where all of the basic site content goes (text, links, images). The codes in the body area work with the CSS tags to design the page. The "<img>" tag is an image tag. The link that follows the image tag tells the browser where the image is so that it may retrieve it (and allow it to show up on your website). You will post your direct link after the image tag (in place of "image.jpg").

8

Have your child enter all of the information they want on their website. First, they must name their website in the "Title" area. Next, they will need to enter a heading in the "H1" area, followed by the content of the site in the paragraph area (<p>).

9

View the website by saving the text in the editor as a .HTML file. Upload the file to the free Web space and view it in your browser.

About the Author

Since 2007, Emilia Lamberto has been a professional writer specializing in home and garden, beauty, interior decorating and personal relationships. Her work has appeared in various online publications. Lamberto owns two blogs, one which provides readers with freelance job opportunities and one which covers beauty advice and product reviews.

Photo Credits

  • photo_camera boy with computer 3 image by Oleg Berlov from Fotolia.com