HTML: Create a Web Page

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

Learn:

• Overview
• Coding practices
• Standards
• Basic html
• Visual elements
• Non-visual elements

Book: Project 2

Web Readings:

• w3schools.com basic tutorial
• codehelp deprecated html deprecated tags
• pixel2life.com basic html
• lachy.id.au XHTML versus HTML

Movies

To simulate in-class lectures

from Professor Eric Yoxheimer

Notes

Overview

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:

• An HTML file is a text file containing markup tags that tell a browser how to display the page
• documents contain both
  • markup (tags, elements, attributes etc)
  • and text content (your data)
• Markup follows a standard which is a set of rules
• An HTML file must have an html or htm file extension (use .htm for older file systems that do not support long filenames) and can be created using a simple text editor or visual wed editor (like Dreamweaver)
• Elements are the heart of a document;
  • the markup language uses tags <> to identify elements.
  • Your content goes inside the start & end tags for some element.
  • HTML has a finite set of pre-defined elements that the browser uses to format data
  • each element may have a set of attributes to modify its behavior
• The main elements are for
  • text formatting and spacing
  • images
  • links
  • layout like tables and frames
• Nested elements are allowed and an important concept so that
  <b><p>text1</p><p>text2</p></b> means both paragraphs will be bold
  <p><b>text1</b></p><p>text2</p> means only text1 will be bold
• Elements are displayed sequentially unless CSS is used so
  <p><b>text1</b></p><p>text2</p> means text1 will appear above text2
  this may seem obvious but in some languages (like VB or CSS) elements can be positioned on page with X,Y coordinates but html has no positioning

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:

• Any HTML should be tested by viewing in a browser; the catch is what browser(s) to use since there are different ones, both old and new, and users have different screen resolutions
• Need to know more than html to make good sites including graphics design
• Learning the general structure and concepts is more important that memorizing tag names...you can always look up tags in a reference or use editors to generate them...but editors cannot help you with the logic of deciding whether to use core elements, styles, or other structures
• Realize many references (including my notes) are based on HTML which is very forgiving in that there are not many syntax rules and usually something will display, however, the same code may violate the strict rules of XHTML

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:
   • use comments - e.g., put your name and date in
   • use white space to make it readable - e.g., put unrelated elements on separate lines
   • use white space to indent nested elements like tables and lists
   • be compatible with xhtml by making tags all lower case and close all tags with /
   • the less code the better
   • do not use un-necessary bloated code such as MS-Word puts in - e.g. go create html in word and will see what is meant
   • although optional, include a <title>

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>
<li>readability</li><li>
nesting</li></ul>

Example 2

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

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

Standards

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  128.ibm.com
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 worse...in 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 files are text but should be given extension of .htm or .html so browser knows to process them. If a .TXT or some other extension is used, when browser opens it will not process the html code and instead will simply display the entire file as text
• Suggest not to use spaces in filenames for compatibility with all OS that users or a web server may be using.
• For live web sites, the first page of a web site is usually index.html although some web hosts can use "default" or "home"
• Notepad (the windows text editor) assumes a .txt extension so when using it type the .htm extension when saving the first time and when opening be sure to change file type to "all files" to see the .htm files

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:

• are defined by paired start and end tags  <tag>  </tag> for example
  <i>makes italics</i>
• have content (like text) between the tags (so "makes italics" above is the content for the <i> element) although some, like a line break <br>, have no content and therefore no end tag.
• may have attributes inside the start tag, for example
  <body bgcolor="#F3FFE8">
  has attribute bgcolor for element <body> (realize bgcolor is not valid in XHTML (probably deprecated))
• html uses a finite, pre-defined set of elements that the browser understands how to display the content for each element, as opposed to XML where you make up your own elements so they are infinite and the browser has no idea how to display

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)

<html>
<head>
<title>Free Software</title> 
</head>
<body>
Body goes here
</body>
</html>

tips and rules:

• <tags> must be typed exactly but in above example italics could be anything you want
• title content is optional, it appears in browser title bar and in search engines so it is suggested to type a short meaningful title
• html is case insensitive, for example <HEAD> </Head> works fine, however, it is  suggested to use lower case for compatibility with other standards (like XHTML)
• Its optional but try to use quote attribute values, for example <font color="#339933"> again to be compatible with XML
• Do NOT overlap tags like <TagA>  <TagB> </TagA> </TagB>, but nesting is okay like <TagA>  <TagB> </TagB> </TagA>
• tags are processed sequentially, top down, so an error or slow loading of an element may affect tags below it and what user sees below it. Also by default content is placed sequentially on the screen as it processed, called relative positioning, so the last line will be at the screen bottom, but as we learn later in style sheets absolute positioning can be used for example the last line in the file could be placed at top of the screen
• White space like carriage returns, extra (2) spaces, and tabs will be ignored so put them wherever you wish for readability. For example the following is equivalent to above
  <body>Body   goes
  here</body></html>

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:

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

• <b> yourtext </b> for bold
• <i> yourtext </i> for italics
• <big> yourtext <big> makes text 1 size bigger
• <small> yourtext <small> makes text 1 size smaller
• <sup> yourtext <sup> make ^superscript text
• <sub> yourtext <sub> makes _subscript text
• <u> yourtext </u> for underlined, but tag is obsolete and user's think underline means hyperlink so dont use
• <tt>  </tt> for typewriter.
• can align with attributes
  <h1 align=center>mytext</h1> 
  <h2 align=left>mytext</h2> 
  <p align=right>mytext</p> 
   

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

this has    spaces and 
  a return

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)

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

Non-Visual Elements and Attributes

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

• Comment: <!-- comment --> is used to comment out html and can enclose multiple lines. A comment is typically used to hide html without deleting it.
• <!DOCUMENT> type (see syntax in the reference material) which indicates the version the document is based on, should be the first line in the document should be but it's optional and many people ignore it. Html has evolved over the years and there have been many versions and older browsers may only support older versions.
  The following are most useful for scripting and style sheets but may not make sense for beginners
• ID is an attribute to give a unique id name to an element. Any element can be given an id in form <p id="anyname">
  where<p> could be just about any element
• CLASS is an attribute to assign an element to a class thereby inheriting properties (like color) from that class in form
  <p class="someClassNamePreviouslyDefinedInStyleSheet">
  where<p> could be just about any element
• DIV and SPAN are elements used to group other elements, which is useful to change a bunch of things at once and in scripting. instead of <center>, the W3C recommends using a DIV tag like <div align="center">yourtext</div>. An advantage of <div> is you can align both left, right, and center. Div induces a return (new paragraph) while span does not.