What is web design all about?

Web Design is a professional career that is growing around the world. It involves writing the code that makes websites work, finding and manipulating images to fit the website, and gathering information and writing the content that appears on a website. There are also jobs managing the computers, called servers, that hold and process all of the web information.

We will learn a little about how people make websites that you and I look at all the time. It can be simple for some and very confusing to others. Not all of us have the ability to grasp coding languages. That is OK, but it is good to have a basic understanding about what makes a website work.

Let's begin by learning some basic terms:

  1. Open a WORD document
  2. Create a centered header that incoudes: Name, Period, and Web Design Vocab
  3. Open a browser and do a search for definitions of each terms below
  4. Type the term and its definition in your WORD document
  5. Save the document as: web-vocab and save it in your Computer Skills, "web-intro" folder
  6. Be prepared to share what you learned

The Terms

Looking at HTML

Now that you have a little knowledge, let's learn how you can look at the code that makes websites work.

  1. Open a browser (Google Chrome, Microsoft Edge, or Firefox)
  2. type in the address for the school website: mckay.salkeiz.k12.or.us
  3. Hit enter and look at the page as it loads
  4. Move you mouse to a text area and click the right mouse button.
  5. Click on "View page source
  6. Like magic, you can see all of the code required to make the school website work.

Now open a couple of your favorite websites and try the 'View page source' option to see what those pages look like.

That little peek at HTML amy scare you...and rightly so, but if you start small, it is easier to understand. Let's see how it feels to make a webpage with some help.

Intro to writing HTML - simple project

Start creating your HTML Document...with a little help

  1. Open notepad++ on your computer:
    • Click start, and then Notepad++.
  2. Copy this green text exactly as it appears and paste it into your notepad++ document.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <title>My Title </title> <meta http-equiv="content-type" content="text/html;charset=utf-8" />


  3. Click the save (floppy disk) icon, find your web-intro folder, and enter the filename: your-name.html and click SAVE.
  4. You have now saved a proper HTML document and are ready to create your first webpage!

Give your page a title!

  1. Change the text from "My Title" to something you want.
    • The title text is preceded by the start tag <title> and ends with the matching end tag </title>
    • This title is placed inside the "head" tags of your document.

Save and test the web page

  1. Save the file again (click the floppy disk icon).
  2. At the top of your Notepad ++ menu bar, click on "RUN", select your browser of choice and click on it.
  3. See what your efforts look like!
  4. Find the title in the caption bar or browser tab at the top of the page.

Now go back to notepad and continue.

To use the instructions below, you can type or simply copy the GREEN text and paste it inside of the "<body> </body>" tags.

Adding a background

Adding a background can keep your site from being too white-washed and boring. Backgrounds can be:

It is important that you DO NOT have more than one (1) <body> tag. You must modify your <body> tag so your code looks like the code below:

  1. To add a background picture, the code looks like this:
  2. <body bgcolor="green">

  3. You can also use hexidecimal color codes to select virtually any color you can imagine. That code would like like this:

  4. <body bgcolor="#387655">

    These colors can be identified by using one of many color charts on the internet. One really good one is: Color Wizard

  5. Save your file, and then use the Run menu to view it in a browser. Does everything work?

Add headings and paragraphs

In HTML there are several levels of headings. H1 is the largest, H2 is slightly smaller, and so on down to the smallest.

  1. Here is how to add a large heading:

  2. <h1>An important heading</h1>

  3. Here is a smaller heading:

  4. <h4>A less important heading</h4>

    Let's save again and test your page in a browser to see what it looks like.

  5. Create some paragraphs. Each paragraph you write must be inside of the <p> tag. For example:

    <p>This is the first paragraph</p>

    <p>This is the second paragraph</p>

  6. Save your work and view your efforts in the browser.

    Not bad for starters, huh? You are on your way...Continue with the instructions.

Adding a bit of emphasis

  1. You can emphasize one or more words with the tag <em> , for instance:

    <p>This is a really <em>interesting</em> topic.</p>

Adding a blank line

  1. In your notepad document, type <br /> just below the last line.
  2. Save your work and look at the file in your browser.

Adding interest to your pages with images

  1. To add an image to your page, copy and paste this code:

    <img src="Sunset.jpg" width="400" height="300" alt="a Beautiful Sunset"/>

    Where 'Winter.jpg' is the name of the image you created in Paint.net.

    **You will need to open your images folder, copy your image, and then paste it into the web-intro folder.

  2. Save your work and look at the file in your browser.

Adding a horizontal line

  1. In your notepad document, type (or copy & paste) <hr> just below the last line.
  2. Save your work and look again at the browser.
  3. Do you see a horizontal line (also called a horizontal rule)? If not, try to fix the problem and/or get help from a neighbor or the teacher. If you see it, celebrate and move on!

Adding links to another website

To link to a page on another Web site you need to give the full Web address (commonly called a URL.

  1. To link to www.google.com you need to write/copy:

  2. <p> This is a link to <a href="http://www.google.com/">Google</a></p>

    The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text.

    Let’s add another line break tag (<br />), then save your file and open it again in the browser.

Adding lists to your website

We will play with two types of lists that are supported in HTML: Bulleted and Numbered.

  1. To create a bulleted list, often called an unordered list, type or copy the following code to your notepad documents.

    A bulleted (unordered) list uses the <ul> and <li> tags, for example:

    	<li>the first list item</li>
    	<li>the second list item</li>
    	<li>the third list item</li>

    Save and view your page in a browser

  2. To create a numbered list, often called an ordered list, type or copy the following code to your notepad documents.

    A numbered (ordered) list uses the <ol> and <li> tags. For example:

    	<li>the first list item</li>
    	<li>the second list item</li>
    	<li>the third list item</li>

    Save and view your page in a browser

Personalize the web page

  1. Go back to all of the elements you added (Headings, Paragraphs, Lists) and change the text to something that is of interest to you.
  2. ***Your information must be school appropriate!

You have finished the steps to create a simple webpage.

Turn in your work

  1. Turn in your webpage document and picture on the turn in folder. The folder is named: Web Page.
  2. Be sure to ask for assistance if you have any questions.