Introduction to HTML HTML = Hypertext Markup Language HTML is a very weak language (basically nil). –Not designed to do computation. HTML is designed specifically to specify how web pages are to be displayed. HTML requires a program, called a browser, to display the web page –Netscape and Internet Explorer are browsers. –Each browser will display web pages differently

HTML can Only Suggest Displays Browsers differ –Netscape follows the HTML standard pretty closely. –MS IE allows more than the HTML standard People Differ –Windows are regularly resized by users, so don’t depend on a particular size. –Backgrounds may be turned off or preset to a users preference. –Images may be turned off. Machines Differ –Screen sizes vary. –Resolution can vary. –Colors (hue, brightness, contrast) vary.

Structure of HTML HTML uses tags to suggest how to display items on a page –Learning HTML is really about learning how to use the tags. –Makes it easy to do useful pages quickly. Most tags come in pairs: – starts the action – stops the action –Example: begins all html documents and ends them –Example: Title will center the word “Title” on the page. Some tags do not come in pairs: – is a line break, causing the display to continue on a new line – inserts a horizontal rule (line) across the page.

Structure of HTML Anything that is not specified by tags is displayed per the browsers preference –Adding extra spaces in between words won’t have any effect on the page. –Putting things on a new line won’t have any effect on the displayed web page (the tag does that). Example: – “Hello, World.” and “Hello, World.” will look the same. –“Hello, World.” and “Hello, World.” will both be shown on the same line.

Structure of HTML There are 4 tags required in any HTML document. – Tells the browser where the web page starts and stops – Tells the browser what title to display for this page. – Tells the browser where the informational portion of the web page starts and stops – Tells the browser where the displayed portion of the web page starts and stops. No required. – Tells the browser that you are about to define a series of frames dividing up the viewing area. No.

Structure of HTML Example of HTML structure or Information hidden from the viewer. Visible web page.

HTML Structure: Head The head of the document contains information useful for the creator of the document and the web site. –Author list, intended purpose, revision history, web tools used, and whatever is important to the owner of the web page. <META NAME=“keyword” CONTENT=“type of information”> <META NAME=“Author” CONTENT=“Keith Garfield”>

HTML Structure: Body The body of the document contains the visible portion of the web page. –Content, formatting codes, hyperlinks. The body contains the information you want to display. The most common tags are the line break The paragraph break And references to other items like images or web pages: A link requires an anchor Images are referred to like this.

The Tag Sets default values that affect the entire page. (* = You can use stylesheets for this.) –*ALINK – SETS THE COLOR FOR AN ACTIVE LINK. –*BACKGROUND – ALLOWS YOU TO USE AN IMAGE FOR THE BACKGROUND. –*BGCOLOR – SETS THE COLOR OF THE BACKGROUND. –BGPROPERTIES – FIXES THE BACKGROUND IMAGE (MS IE ONLY). –*CLASS – APPLIES A NAMED PRE-DEFINED STYLE TO THE PAGE. –LEFTMARGIN – LETS YOU INDENT THE LEFT MARGIN (MS IE ONLY). –*LINK – SETS THE COLOR OF A LINK THATHAS NOT BEEN FOLLOWED YET. –ONBLUR – A JAVASCRIPT EVENT HANDLER. –ONFOCUS – A JAVASCRIPT EVENT HANDLER. –ONLOAD – A JAVASCRIPT EVNT HANDLER. –*STYLE – CREATES AN INLINE STYLE FOR THE DOCUMENT –*TEXT – SETS THE DEFAULT COLOR FOR TEXT. –TOPMARGIN – LETS YOU SET A TOP MARGIN (MS IE ONLY). –*VLINK – SETS THE COLOR OF A LINK THAT HAS BEEN FOLLOWED. Ex:

Some Common Tags - Causes a line break to occur in the text. - Causes a horizontal line to be drawn across the page. - Causes a new paragraph to begin. - Centers all objects on the screen.

The Tag The META tag is used to provide information about the HTML page –information about information is called meta-information, hence the name of the tag –Resides in the Header of the document, and does not display anything. –NAME - supplies the name of the information being presented. The HTML standard does not define any standard names. –CONTENT - supplies the content of the information being presented. Contents can be anything. Examples: –

“Hello, World!” There is a particular, simple program called “Hello, World!” that many CS people use when first encountering a new language. “Hello, World!” prints the words “Hello, World!” on the screen. The idea is that if you can get this simple thing to work, then- –You’ve learned how to write, save, and run the program. –The language is working on your computer. –Your computer is working as expected. So “Hello, World!” acts as a simple check that things are working ok before you get involved in a complicated programming effort.

“Hello, World!” Not an assignment, but suggested you try this. Type this web page exactly as you see it here in a text editor, save it, and try to display it on a browser. Hello, World Hello, World!

Headings Headings are standard fonts provided by the HTML standard. –There are 7 levels of heading, through. – is the largest font. –Styles may be included in the heading tag, but will apply only to that specific use of the tag. –You can define your own fonts/styles/colors for these headings in your stylesheet. Largest heading Normal font Smallest heading

The Tag Allows you to set font properties. –COLOR – SETS COLOR OF THE FONT. –FACE – SETS FACE OF THE FONT (CASE SENSITIVE!). –SIZE – SETS THE FONT SIZE. OTHER FONT MANIPULATION TAGS – STARTS AND STOPS BOLDFACE. – STARTS AND STOPS ITALICS. –Heading tags set sizes predefined for your browser, etc Ex: Hello, World!

Using Colors Colors on the web can be specified in two ways: –By text name (Ex: Blue, Green, Silver, etc) –By 6 digit RGB code (Ex: #000000, #FF88FF, #243388) As a rule, do not use the text name for colors. Use the RGB format. It has the following properties: –Uses base-16 math, not base-10 like humans do Base-10 digits are 0, 1, 2,3,4,5,6,7,8,9 Base-16 digits are 0,1,2,3,4,5,6,7,8,9A,B,C,D,E,F –Uses a 6 digit code to specify how much red, how much green, and how much blue is present in the color. Each color gets two digits Color code = #rrggbb You can specify over 16 million unique colors using this format but there are only 216 guaranteed to be web safe (see back flap of Wendey Lehnert class text)

The (Anchor) Tag Allows virtual links to other pages/images/sites. –CLASS – ALLOWS LINKS TO BE ASSOCIATED WITH A SET CLASS –HREF – SETS THE URL OF THE PAGE BEING LINKED TO. –NAME – ALLOWS YOU TO NAME SECTIONS OF YOUR DOCUMENT –ONCLICK – ALLOWS EVENTS TO OCCUR ON THE MOUSECLICK. –ONMOUSEOUT – ASSOCIATES EVENTS WITH THE MOUSE LEAVING. –ONMOUSEOVER – ALLOWS EVENTS TO OCCUR WHEN THE MOUSE POINTER IS ON THE IMAGE. –REL – ALLOWS USER TO SET RELATIONSHIP TO LINKED DOCUMENT –REV – ALLOWS USER TO SET RELATIONSHIP TO LINKED DOCUMENT –STYLE – ALLOWS LINK TO BE ASSOCIATED WITH A STYLE –TARGET – TELL WHERE TO DISPLAY THE LINKED PAGE –TITLE –LETS YOU SET A TITILE FOR THE LINKED DOCUMENT Ex: home

Named Anchors Named anchors are used to allow the viewer to move to specific polaces on a single web page. Useful for long web pages that scroll way off the screen, or useful for allowing viewers to navigate right to the start of sections of a page. To name a link use the following format: To insert the link, use the normal notation but indicate the named link using the # sign: click here! Example: (This is a link to a quote on the bottom of the same page.) a quote Knowledge is power!

Unordered Lists - The Tag Lists are useful for organizing information on your web pages. They can be ordered (like an outline) or unordered (bulletted) Starts and stops an unordered list. –CLASS - allows you to set the style to a pre-set class (such as one set up in a style sheet) –COMPACT - tells the browser to reduce spaces between list elements –STYLE - allows you to set the style of the list elements –TYPE - allows you to select what shape "bullet" will precede each item in the list starts and stops a list element (the is often omitted). –CLASS - allows you to set the style for this element only to a pre-set style class (such as one defined in a stylesheet) –STYLE - allows you to set the style for this element only –TYPE - allows you to select the "bullet" shape for this element only –VALUE - allows you to change the value of the tag associated with the element (only valid for ordered lists)

Ordered Lists - The Tag Ordered lists allow you to list items in outline format, using sequential tags rather than "bullets." –CLASS - allows you to set the style to a pre-set class (such as one defined in a stylesheet) –COMPACT - tells the browser to reduce the space between list elements –START -allows you to specify the value of the first tag (works with TYPE) –STYLE - allows you to set the style of the list elements –TYPE - allows you to specify the type of tag to use (works with START) A = Capital letters a = lower case letters I = Capital Roman numerals i = lower case Roman numerals 1 = common Arabic numerals

Definition Lists - The Tag Definition lists are used to provide a list of definitions in a preset manner. Each item of the list is composed of two parts: –The term specified by the tag –The definition specified by the tag –CLASS - allows you to set the style to a pre-set class –COMPACT - tells the browser to reduce the space between list elements –STYLE - allows you to set the style of the list elements –CLASS - allows you to set the style to a pre-set class –STYLE - allows you to set the style for this item only –CLASS - allows you to set the style to a pre-set class –STYLE - allows you to set the style for this item only