THE BASICS OF WEBPAGE
February 9, 2009
Based on the 2003 brown bag
• 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.
1) All HTML commands are in
2) Must have two brackets for
3) Nothing more than text (.txt)
What the browser sees:
The two major sections
of every webpage
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
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:firstname.lastname@example.org>email</a> me.</p>
Should look something
like this . . .
In a browser, this code looks like this . . .
• Learning HTML - http://www.w3schools.com/html/DEFAULT.asp
– Explanation of various tags, try-it-yourself windows to see what tags do in real
• 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/
that you can see what is happening more readily.
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
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