HTML: Create a Web Page

Objective: Learn at the basics of creating a web page with core html


Book: Project 2

Web Readings:


To simulate in-class lectures

Name MB Description
Notepad 2 Create html in text editor
Structure 2 Html structure
WellDesigned 2 Well designed code (does not include
validation with a doctype or page design)

from Professor Eric Yoxheimer

Name MB Description
Notepad 12 Using Notepad
basicHTMLdoc 25 Creating basic html
HTMLopentoIE 25 HTML in a browser
Chap2HTMLReview1 40 review book  project 2
Chap2HTMLReview2 26 more of above



HTML was designed to format text documents for display and provide links between multiple documents.

The structure is rather simple and has elements which tell browser on how to display the content for that element

elements and content come in the form of  tags where each tag has markup for the start of an element, any content (usually text the user sees) , and markup to end the element and tags take the form
<element>user content</element>
where "element" is one of the pre-defined html elements and "user content" is whatever you make up. There is a finite, pre-defined set of browser elements so you do not make up elements names but instead choose from a standard, published list
for example
<h1>Chapter 1</h1>

so "h1' is the element which tells the browser to make format "Chapter 1" as a heading-1 style
<p> this creates a paragraph</p>
so "P' is the element which tells the browser to make a paragraph and the user sees "this creates a paragraph"

attributes: are optional properties to modify an element for example
<p align="center"> this creates a paragraph</p>
uses attribute "align" to center justify (as opposed to left justify) the paragraph

The basic markup concepts along with some jargon are:

All you really need to create web pages is a computer and a browser (like IE). HTML is nice because

  1. Its a text file so it can be edited with any editor, even Notepad, so no need to buy special software
  2. It is platform independent so it can be done on any computer (not just Windows pc)
  3. It is a standard
  4. It is not a programming language and the rules are rather simple so it is not that difficult.
  5. There are a lot of elements but the actual structure is rather simple.

Some other things to keep in mind:

Coding Practices

I will use the term "well designed" as a somewhat subjective term for both page display and html code.

For pages, well designed means a user would view the pages and in effect is how well designed the pages are for users to read, navigate, and in general be dazzled by the page.

For code, well designed means several things:

  1. Most important is that page display correctly in browser.
  2. Code should conform to some standard (like html 4 or xhtml 1.0) , but as we will see there are different standards and none is absolutely best. The key point is that you can code to whatever standard the instructor or employer says. As we will see a page may display correctly in a browser and yet have errors according to some standard. For example
    <b><p>text1</b></p> may display okay but in xhtml the nesting is incorrect and should be <p><b>text1</b></p>
  3. Although it does not affect user display, it is also useful to write code that is efficient and easy to read and maintain. The idea is that when a designer (you or someone else) tries to edit the code years down the road, how easy will it be. There is no right or wrong but some best practices are:

As an example of code readability, the two examples below both display exactly the same and in effect are the same html but the second set is more well designed both in readability and in proper nesting of the bold code <b>

Example 2

<b><p>Bold text</b> with a list to illustrate</p><ul><li>well designed</li>

Example 2

<p><b>Bold text</b> with a list to illustrate</p>
<li>well designed</li>

and above is a just a short code snippet so with a normal page with hundreds of lines of code and nested tables, the readability becomes critical for a developer to maintain the page


Rules than govern HTML (standards) comes in different document types and versions.

Besides the actual standards and doctype, there is an issue of how the browsers actually implement the standards. You should read something like
which basically says mozilla-firefox implements things pretty much in line with W3 standards whereas IE allows a lot of exceptions to the standards. You may not see much difference with plain html and xml documents but differences pop up more with "advanced" technologies like XSLT, DOM, JavaScript, data binding etc

For better or this class all assignments and exams in are tested IE so make sure it works there even though IE is the one that does not follow strict standards. If using firefox then try "quirks mode" which means leave out a doctype.

HTML features

HTML is like word processing but instead of visually formatting using a menu to create formats, you manually type in tags. It is not very complicated except there are many different tags and attributes to remember. One difficulty in the beginning  when looking at examples, is knowing what needs to be typed exactly versus what parts can be changed. First, to save an html file:

Html contains elements which are instructions to the browser on how a web page should appear. HTML and browsers have evolved over the years so some elements are only supported by the latest browsers. One of the challenges in the past has been making web pages work with all browsers, especially older ones.  Nonetheless, we will start with so called  "core" elements which were part of the original html standards and supported by all browsers. Later we cover newer elements (like font) and technologies like CSS which make it easier to design elegant documents but may only work in newer browsers.

You may not care about old browsers and may only use a handful of html elements yourself, however, it is useful to know all the HTML elements so you have an idea what can be done and for  when viewing source from another site. Should you care which elements are "core" and which are newer; only if you care to make html compatible with older browsers. Also as html evolved some elements became deprecated meaning they are no longer part of the standard, however, they may still work in browsers.

Basic HTML

Elements are markup code that format your content. Elements:

An html document has 2 sections: head and body. The head content is optional and is not seen by the user (except for <title>). The body contains your content. The body is the page or document the user sees. The head section contains things like javascript, keywords for search engines, links to stylesheets and other things that is no content the user will directly see but the head section has components that affect the page in various ways that are hard to summarize here.  The basic HTML document structure is below (and again the head section can be deleted and to conform to a standard should have a doctype)

<title>Free Software</title> 
Body goes here

tips and rules:

Visual Core Elements

Most elements are visual meaning they format the content in some way for display. There are many tags and some do similar things. For example <b> and <strong> both make text appear bold (but there subtle differences). Following is a brief rundown on common core tags. You can find many others in reference manuals which are not that common. The following has elements, tag syntax, a brief description including attributes and if end tags are needed, and an example

Paragraph  <p>your sentences</p> create a paragraph break. End tag is not always needed but recommended
Line Break <br> tag with no end tag create a hard break. The browser does soft breaks when needed to word-wrap

Headings <hn>  </hn> change the font where n is a size from 1 to 6  (1 being largest), used to organize a document. <hn> automatically creates bold text and line breaks, example syntax is:

<h2>Chap 1</h2>
<h4>Topic A</h4>

Chap 1

Topic A

Horizontal Rule  <hr> creates a line (see above) commonly used as a separator, without an end tag. Design guidelines suggest not overusing <hr>. Attributes include WIDTH=n (n is pixel width) or WIDTH=n% for % of screen, SIZE=n for pixel thickness and NOSHADE to make an outline. Examples:
<hr>                <!-- make the line full screen width -->
<hr width=150>
<hr width=50%>
<hr size=6>
<hr noshade>
<hr width=50% size=10 noshade>   <!-- can combine attributes -->

Text Formatting: physical formatting tags indicate how text should look and include

Note: font tag is also useful but its not a core element so will be covered later. There are also logical elements to indicate the type of text and then each browser decides how to format. A few of these are
<strong>  </strong>  means make it bold like
<em>  </em> means emphasize like italics

Preformatted Text:  <pre> </pre> makes text line up using multiple spaces and returns as in following

this has    spaces and 
  a return

Center <center>  </center> will center text.

Special characters cannot be typed, instead type their escape code between a &  ; for example 
For < type &lt; 
For > type &gt; 
For © type &copy; 
For & type &amp; 
For  " type &quot; 

Un-ordered (Bullet) list <ul> </ul> is a list but in between are individual list items <li> (ending </li> is optional)

  • cat
  • dog
  • rabbit

Ordered (numbered) list  use <ol> instead of <ul> but otherwise the syntax is the same and the <li> is the same.
Optionally, can use attributes in lists to change appearance of bullet or #.
For square bullets:  <ul type="square"> but that's obsolete so use  <ul style="list-style-type: square">
For letters:   <ol type="A"> but that's obsolete so use <ol style="list-style-type: upper-alpha">
Indenting can be achieved with nested <ul> or <ol>as shown below, just make sure to nest and close each one

<li>Chapter 1
<li>List item 1</li>
<li>List item 2 </li>
<li>Chapter 2
<ul style="list-style-type: square">
<li>square bullet</li>
<li>item 2 </li>
<ol style="list-style-type: upper-alpha">
  1. Chapter 1
    • List item 1
    • List item 2
  2. Chapter 2
    • square bullet
    • item 2
  1. Letter
  2. List

can be used to indent text

There are many other elements and we will cover some later but for now consult a reference manual if you want to do more.

Non-Visual Elements and Attributes

Some elements and attributes are non-visual so by themselves do not display anything to the user.