Building a Web Page With HTML
Objectives
- Start Notepad
- Write Basic HTML
- Use HTML Tags
- Enter Text
- Save an HTML File
- Use Colors in Web Pages
- Use Various Formatting Techniques
What is the WWW?
- World Wide Web
- Supports multimedia and consists of a collection of linked documents known as Web Pages
- What is a Web Site?
Where Are Pages Stored?
- Web pages are stored where?
- How do you publish web pages?
Hyperlinks
- Link web pages together
- Allow quick jumps to other pages
What is HTML?
- HyperText Markup Language
- HTML is a set of special instructions, called "tags" or "markups" that specify links to other documents as well as how the page should be displayed
- Web browsers can interpret tags and display content accordingly
- HTML is Platform Independent
HTML Tags
- Tags begin and end with special symbols: < and >
- Some tags must be opened and closed (closed with "/" symbol)
- Examples:
- <HTML> </HTML>
- <BODY> </BODY>
- <B> </B>
- <HR> </HR>
Who Can Publish on the Web?
- Anyone!
- Styles are very diverse
- Easy way to publish information for large audience
Elements of a Web Page
- Title: identifies the subject/purpose, displays on browser’s title bar, is also the name of the page in your favorites
- Body: information that displays in browser window
- Background: similar to wallpaper in Windows, can be solid color, picture (repeating), standard white, etc.
- Normal Text: makes up the main content of a web page, can be in many formats such as standard paragraph, bulleted, numbered, bold, italic, colored, underlined
- Headings: usually larger, bold. HTML has six different styles of headings (1 through 6)
- Images: icons, bullets, lines, photos, illustrations, or other picture
- Horizontal Rule: lines across the page, used to separate different sections
- Image Map: one image with many embedded links or hotspots
- Animated Images: moving images
- LINKS/HYPERLINKS: primary method used to navigate between pages. Clicking a link instructs the browser to go to a location or file, or to request a file from the server
Building a Web Page
- Start Notepad
- Turn on Word Wrap (under ‘Edit’ Menu)
- Begin entering text
- Save HTML file (remember where!) but don’t close Notepad
- Open HTML file from within browser
- Continue to make changes to HTML file, saving, and then refreshing browser to check changes
Viewing HTML Source
- Load any web page in your browser
- Find the "View Source" selection from a drop-down menu and select it.
The Basics
- All pages start with the same tags:
<HTML>
<HEAD>
<TITLE>Title of your page</TITLE>
</HEAD>
<BODY>
this is where all the page content goes…
</BODY>
</HTML>
Web Page Organization
- After purpose of page is defined, it is necessary to organize information
- Linear Layout: displays web pages in a straight line
- Hierarchical Layout: displays web pages in a tree-like structure
- Webbed Layout: has no set structure, but shows connections/links from each page to each page
- Avoid building web sites that are too narrow or too deep:
- Narrow Web Site: a site in which the home page is the index, and all other pages are only accessible through the home page
- Why is this bad?
- Deep Web Site: a site in which the content web pages are buried beneath many other web pages
- Why is this bad?
Linking
- Links can be used to:
- jump to pages within the site
- jump to other pages outside of the site
- send an email message
- download a file
How To...
<HTML>
<HEAD>
<TITLE>Title of your page</TITLE>
</HEAD>
<BODY>
this is where all the page content goes…
</BODY>
</HTML>
- Format Text:
- For Heading Styles:
- <H1>This is the heading 1 style!</H1>
- <H6>This is the heading 6 style!</H6>
- For Centering:
- <CENTER>This is centered!</CENTER>
- For Colored Text:
- <FONT COLOR="#FF0000"> (starts font color)
- </FONT> (ends font color)
- Make a Horizontal Rule:
- <HR> (makes a standard, full-width rule)
- <HR WIDTH=50%> (makes a half width rule)
- Center a Horizontal Rule
- <CENTER><HR></CENTER>
(<HR> is a one-time use tag. It does not need to be ended with ‘/’)
- Add a Background Color:
- Instead of using only <BODY>, use
<BODY BGCOLOR="insertcolorcodehere">
For Example:
- <BODY BGCOLOR="#FF0000">
- This will create a red background
- Add a Background Image:
- Instead of using only <BODY>, use
<BODY BACKGROUND="insertimagenamehere">
For Example:
- <BODY BACKGROUND="family.jpg">
- Be sure that the image’s filename is spelled correctly (including capital letters) and is uploaded to your U of A directory.
- Insert an image:
- <IMG SRC="imagename.jpg">
- Center an image:
- <CENTER><IMG SRC="imagename.jpg></CENTER>
- Create a link to a page within your site:
- <A HREF="pagename.html">Click here.</A>
- ‘Click here.’ will be the clickable text since it is between the <A HREF> and </A> tags.
- Create a link to an external page:
- <A HREF="http://www.cnn.com">Click here.</A>
- ‘Click here.’ will be the clickable text since it is between the <A HREF> and </A> tags.
- Create an email link:
- <A HREF="mailto:[email protected]">Email me!</A>
- ‘Email me!’ will be the clickable text since it is between the <A HREF> and </A> tags.
- Make an image be a link:
- <A HREF="photos.html"><IMG SRC="mydog.jpg"></A>
Additional Resources
- Cool background images:
- http://www.freebackgrounds.com
- All kinds of images
- Just right-click on any image you see online and select "Save picture as…" to save the image to your disk
- See how a page was built (and use it for your own page!)
- From the ‘View’ menu (in Internet Explorer), select ‘Source’. The source HTML will display.