Chapter 2: The Client Side: HTML

Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I

Introduction • Some HTML facts • HTML stands for “hypertext _________ language” • An HTML file is a _______ file containing content surrounded by HTML ______ that define structure. • HTML files must have extensions ._____ or ._______ • HTML files can be created in a text ________ (like Notepad) or an HTML editor (like _____________) • Steps in creating and viewing a simple HTML file • Open Notepad • Type valid HTML _________ code (tags and content) • Save file as myfirstpage.htm (for example) on your disk • Double-click this file to open it in your default browser

More About HTML • HTML is a ________ language that “marks up” or formats content. • HTML is NOT a ____________ programming language like Java or VB.NET. • See http://www.w3schools.com for helpful tutorials

Parts of a Web Page • HTML markup (document) contains ________ (e.g., html element, head element, …) • XHTML markup has two major sections: • _____ (information about the web page, not displayed) • Body (contains content visible in the browser window) • Elements are delimited with start and end ______. • For example: <html></html>, <head></head>, … • Start tags can have ___________. • For example, <body bgcolor=“red”>

First HTML Example   <html> <head> <title> CIS 275 </title> </head> <body> Welcome to Web Application Development! </body> </html> HTML __________ head element nested title element: start tag, content, and end tag body element ___________ element html end tag

HTML Elements • HTML tags • All text associated with a pair of HTML tags, such as This text is bold., is called an HTML _________. • Most tags come in pairs, a start tag and an ______ tag. • A tag is surrounded by < and >, called _______ brackets. • An end tag must contain a ____. • Text between tags is called element __________. • HTML tags should be _______ case. (, not ) • Tag attributes • In the tag <body bgcolor=“red”>, bgcolor is an ________ of <body>. • Attribute ______ should be in double quotes.

Basic HTML Tags (1) • Headers • Use the tags <h1> (_______) through <h6> (_______) • Headers are totally unrelated to the ________ tag. • The purpose of headers is to provide text with standard sizes, bolded, with a _______ line before and after. • Example: <h3>Rules of the game:</h3> • Paragraphs • Use the tag • Text between and is not ___________, but will have a blank line before and after. • Example: This is a paragraph This is another paragraph

Basic XHTML Tags (2) • Line breaks • The tag is “________,” (no content, no closing tag). • forces content to move to the next _______ • Example: This is a paragraph with line breaks • HTML comments • Comments begin with  • Comments are used to ________ your HTML code • Example:  • Miscellaneous • Browsers _______ spaces and blank lines you try to add • <hr /> will add a horizontal _______ or line.

Text Formatting • There are many tags used just for formatting text: • , , <big> (bold, etc.) • , (__________, italicize) • • , (subscript, ___________) • Example • Carefully study the examples for the following: • <pre> (____________ text, preserves your formatting) • <abbr> and <acronym> (abbreviations and acronyms) • <blockquote> and <q> (quotations) • Important: You can view and save a web page’s HTML code by clicking View, ________ in IE

Links • A hyperlink is an object on a Web page used to __________ another Web page or other file. • The <a> tag and the href attribute • <a> is called the __________ tag. • <a> is a little odd because it is used to create a hyperlink and to create a ___________ for a hyperlink. • The value of the href attribute is the ______ (destination) of the hyperlink. • Example: • <a href="http://www.w3schools.com/">Visit W3Schools!</a> • Tip: Always add a trailing ___ to subfolder references.

The target attribute of <a> • Determines how the result will be displayed • Example: <a href="http://www.w3schools.com/” target=“_blank”>Visit W3Schools!</a> (page will display in a _____ window) • Other target values: • _self (_______ window, default) • _parent (_______ window when using frames) • _top (_______ window, to break out of frames)

The name attribute of <a> • Used to create a specific destination (________) on a page • Example: • <a name="tips">Useful Tips</a> • This text is given the name “tips” using the anchor tag. • Example: • <a href= “homepage.htm#tips"> Read the Useful Tips section</a> • This link goes to the anchor (bookmark) named “tips” • Use bookmarks to identify major sections of a page for the purpose of linking to them.

“mailto:...” value of href • The following example creates an entire e-mail message (if e-mail software is installed on the _____) • Simple example • <a href="mailto:someone@microsoft.com?subject=Hello%20again">Send Mail</a> • Complex example • <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a> • Notice that “_____” is used to create spaces

Images • Images are added to web pages with the _____ tag. • The key attribute of the <img> tag is _____, which specifies the ______ of the graphics file. • The _____ attribute specifies the alternative text that appears when the pointer is positioned over a pic. • Images take time to load, so use them carefully. • Other information about images: • You can use the background attribute of the <body> tag • <img> has attributes align, height, width • Place the <img> tag between <a></a> to make it a link • Check the examples for more information.

A Simple Example • The file “buttonnext.gif” is in the same directory as the page. <html> <body> You can also use an image as a link: <a href="lastpage.htm"> <img border="0" src="buttonnext.gif" alt="Go to last page"width="65" height="38" > </a> </body> </html>

Character Entities • Certain characters (such as <) have special meaning in an HTML document and cannot be used as _________. • Other characters don’t exist on the __________. • In either case, a character _______ must be used instead. • E.g., a < must be written as _____ or <. • The most common character entity is the non-breaking ______ ( ), used to create spaces in an HTML document. (You could use the _____ tag.) • You can experiment using this example.

Lists • There are three kinds of XHTML lists: • Ordered (displays items numbered 1, 2, …) <ol> <li>Coffee</li> <li>Milk</li> </ol> • _________ (use ____ instead of <ol>, displays bullets) • Definition (displays formatted _______ and definitions) <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>

More About Lists • Attributes of <ol> • type (possible values are “1”, “A”, “a”, “I”, “i”) • Example: <ol type=“i”> for lower case _______ numerals • type is _________ (do not use, use styles instead) • Attributes of <ul> • type (possible values are “disc”, “circle”, “square”) • Example: <ul type=“circle”> for open circle bullets • type is deprecated (do not use, use styles instead) • A nested list • A new list is placed within _________ (see example)

Backgrounds • The <body> tag has two attributes associated with backgrounds, __________ (for a color) and background (for an _______). • These are deprecated in HTML 4.01—CSS recommended. • The value of the bgcolor attribute can be a ___________ code, an ____ triplet, or a color _____. • You should be very careful in your selection of a background image for style and readability reasons. • About _____ million colors are available using 256 different shades each for red, green, and blue. • Hexidecimal ranges: #000000 (black) to #FFFFFF (white)

Color Calculations • Hexadecimal code uses base ___. The symbols used are 0-9 and A=10, B=11, C=12, D=13, E=14, F=15. • A hexadecimal number such as AC = A x 16 + C x 1 = 10 x 16 + 12 x 1 = _____. • To convert a decimal number to hexadecimal, you divide by ____. For example, 209 /16 = 13 r 1 = D1. • Since all colors are combinations of 256 values for red, green, and ______, • #000000 = rgb(0, 0, 0) = black • #FFFFFF = rgb(255, 255, 255) = white • #17B4AA = rgb(23, 180, 170) = some kind of teal • See W3C’s pages for colors, color values, and color names.

Placing Web Pages on Magenta • First, set up your account at https://cams.missouristate.edu/selfservice/ • The URL for the page page1.htm would be in the format http://www.student.missouristate.edu/r/raj127f/page1.htm • If you have a home page named ___________, you can use the URL http://www.student.missouristate.edu/r/raj127f/ to load that page.

Copying Files to Magenta • Open you web folder on Magenta: • Select Start, ______ • Enter \\magenta, click OK • Open the Web folder, open the folder with the name that is the first letter in your userid, open the folder with the name that is your userid • Do NOT delete any _________ folders or files in your web folder on Magenta • Copy all HTML documents to the ______ directory of your web folder (or create subfolders to hold your HTML files) • All multimedia files should be placed in the ________ folder (you may want to put sound files or movie files in their own special folders)

Creating a Site on Tripod.com • Go to http://www.tripod.lycos.com/. • Select New Users: Sign Up • Select Tripod Free Sign Up (free hosting displays ads) • Complete Step 1: Membership • Complete Step 2: Confirmation • If your username is “cis275msu”, your URL is http://cis275msu.tripod.com/ . • At http://www.tripod.lycos.com/build/index.html, you can use Tripod’s HTML Editor or File Manager. • Things are a lot easier if you use FrontPage or Dreamweaver to create, edit, and publish pages.

Chapter 2: The Client Side: HTML