THE BASICS OF WEBPAGE DESIGN

							                          THE BASICS OF WEBPAGE
                                 DESIGN



                                      PRL
                                February 9, 2009




Based on the 2003 brown bag
                           Overview
• What is HTML?
  – Definition, uses

• Sections of a web page

• Creating a web page, pt. I.
   – Using Notepad to write basic HTML


• Online Resources

• Helpful things
                      What is HTML?
HTML (an acronym for Hyper Text Markup Language) is a simple, powerful,
  and intuitive way to publish text and images.

To use a simple analogy, HTML marks (or tags) are like stage directions, telling
   the browser what to show.

For example:


1) All HTML commands are in
   <brackets>
2) Must have two brackets for
   every command
3) Nothing more than text (.txt)
What the browser sees:
           The two major sections
             of every webpage
Header                           Body
 1) gives the browser the         1) the largest part of a
 background characteristics of    webpage
 the web page
                                  2) the content section of the
 2) contains the web page         webpage, identifying content
 identifiers, ie., meta names     and its attributes to the
 and tags                         browser
  Let’s try and modify a page . . .

 Open up “example1.txt” in wordpad . . .



Let’s change the title . . .

1. Delete “First webpage” and
   type “Puppy Love” . . .


Now let’s change the headline . .

1. Delete “My First Webpage”
   between the <h1> tags
2. Type in “My Puppy”
Now it’s time to insert a picture of our puppy . . .

1. Under the headline tag, hit enter, and then type “<p></p>”
2. Then type the following lines

<center>
<img src=“http://psweb.sbs.ohio-
   state.edu/grads/bstrath/puppy.jpg”>
</center>



It should look something
like this . . .
Finally, let’s add a link to our home page and email address . . .

 For a link to a web page . . .

 1. After the “Hello World” line, create a space (<p></p>).

 2. Now type in “<p>Visit my web <a href=“http://www.osu.edu”>page</a>

                        . . . and email . . .
 3. Type “ or <a href=“mailto:student@osu.edu>email</a> me.</p>

Should look something
like this . . .
In a browser, this code looks like this . . .
                     Online Resources
• Learning HTML - http://www.w3schools.com/html/DEFAULT.asp
    – Explanation of various tags, try-it-yourself windows to see what tags do in real
      time
• Test if your code is correct - http://validator.w3.org/
    – Tests HTML to see if it is correct according to modern standards, shows where
      mistakes are and some tips on how to fix them
• Use a program with code highlighting - http://www.jedit.org/
    – Easy to use text editor that highlights HTML, Javascript, and other web code so
      that you can see what is happening more readily.
                  Helpful things
1. Doing simple HTML pages is easy, it takes time to do
   really fancy things
2. Steal, steal, steal – ideas and methods from other
   sites and things you see
3. Free things on the net – many people may have done
   what you are trying, look online to see
4. Keep it simple – too busy a page is difficult to read
5. . . . but don’t be boring – a little creativity goes a long
   way
6. Steal, steal, steal – layouts and color ideas
7. Keep page current – especially if on the job market
8. Use Wordpad or jEdit to update