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

2 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

3 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 for helpful tutorialshttp://

4 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:,, … Start tags can have ___________. For example,

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

6 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, 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, bgcolor is an ________ of. Attribute ______ should be in double quotes.

7 Basic HTML Tags (1) Headers Use the tags (_______) through (_______) 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: Rules of the game: 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

8 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 para- graph 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 will add a horizontal _______ or line.

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

10 Links A hyperlink is an object on a Web page used to __________ another Web page or other file. The tag and the href attribute is called the __________ tag. 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: Visit W3Schools! Tip: Always add a trailing ___ to subfolder references.

11 The target attribute of Determines how the result will be displayed Example: Visit W3Schools! (page will display in a _____ window) Other target values: _self (_______ window, default) _parent (_______ window when using frames) _top (_______ window, to break out of frames)

12 The name attribute of Used to create a specific destination (________) on a page Example: Useful Tips This text is given the name “tips” using the anchor tag. Example: Read the Useful Tips section 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.

13 “mailto:...” value of href The following example creates an entire message (if software is installed on the _____) Simple example Send Mail Complex example Send mail! Notice that “_____” is used to create spaces

14 Images Images are added to web pages with the _____ tag. The key attribute of the 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 tag has attributes align, height, width Place the tag between to make it a link Check the examples for more information.examples

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

16 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.example

17 Lists There are three kinds of XHTML lists: Ordered (displays items numbered 1, 2, …) Coffee Milk _________ (use ____ instead of, displays bullets) Definition (displays formatted _______ and definitions) Coffee Black hot drink Milk White cold drink

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

19 Backgrounds The 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: # (black) to #FFFFFF (white)

20 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 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 ______, # = 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.colorscolor valuescolor names

21 Placing Web Pages on Magenta First, set up your account at The URL for the page page1.htm would be in the format If you have a home page named ___________, you can use the URL to load that page.

22 Copying Files to Magenta Open you web folder on Magenta: Select Start, ______ Enter \\magenta, click OK\\magenta 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)

23 Creating a Site on Tripod.com Go to 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 At 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.