1 Week 3 XTML, Expression Web, WinSCP, & Mini-Project (MP1) Advanced Web Development IT225 Spring Term 2016 Marymount University School of Business Administration Professor Suydam

XHTML & HTML5 WinSCP & Setting Up Websites Mini-Project (MP1)

3 Discuss briefly the history of, and relationship between, HTML and XHTML Stress the importance of maintaining both a conceptual and a physical separation between the structure and presentation of a web page Discuss XHTML tags and elements, comparing and contrasting HTML rules with XHTML rules Discuss the basic structure of every web page Discuss and illustrate all of the usual basic XHTML markup, including headings, paragraphs, line breaks, tables, images, comments, attributes and entities Discuss multipage websites and the links used to connect them Discuss the use of Server-Side Includes (SSI) which allow common markup used in many pages to be kept in one location Discuss DOCTYPE declarations and the validation of XHTML markup

4 A markup language, not a programming language Uses markers called “tags” to designate the structural elements of a web page (headings, paragraphs, lists, and the like) Derives from HTML (HyperText Markup Language), which in turn derives from SGML (Standard Generalized Markup Language) Has much stricter rules than HTML A new version of HTML, HTML 5, supersedes XHTML HTML Versions HTML (1990) Tim Berners-Lee HTML 2 (1992) HTML 3.2 (1996) HTML 4 (1997) and HTML 4.01 (1999) XHTML 1.0 (2000) and XHTML 1.1 (2001) XHTML 2.0 (work discontinued by 2010) HTML 5 (standard)

5 HTML HTML’s job is to describe the structure of a web page Web page presentation is the job of Cascading Style Sheets (CSS) Web page behavior is the job of JavaScript Tag and Element Here is an HTML paragraph element: This is a paragraph. is the opening tag of the element. is the closing tag of the element. This is a paragraph. is the content of the element. Sometimes we refer to the “tag pair” …. Sometimes we refer to the “ p tag” or simply a “ p element”.

6 Every browser will have its own default way of displaying any XHTML element. For a paragraph this might include space before and after the text, and the text font. Browsers also have certain “default behavior”: Reducing multiple spaces between words to a single space Wrapping lines as the browser window changes size My Title <!--An XHTML comment showing where page content to display will go.-->

7 Nature's Source Welcome to the Website of Nature's Source This is our first foray onto the World Wide Web. We are a small company dedicated to the health of our customers through natural remedies. We have a wide range of products that include: - books, and multimedia documents that help you get healthy and stay healthy - herbal medicines - equipment for injury free body toning exercises

8 aaa99999aaa99999 ClientClient ServerServer Save Login Information Caution of buttons: Never use “Move”

9 Create the following directories on the Client side: framespages images css js mp1 mp2 mp3 mp4 finalproject On Client side Copy/Paste original index.html and images folder in each directory Create hypertext link to each index.html page in respective directory.

10

11 Build a frames home page (colors, font, text – your choice) Set Page Size 1024x768 File is named “index.html”; Create Table in main page (3 rows, 3 columns, 650px wide; Download MU Image into an images folder and Insert in main page; Resize image to eliminate scroll-right.MU Image

12 Tags describe how a web page should look Formatting with Tags: o Words or abbreviations enclosed in angle brackets o Come in pairs (beginning and end): o Tags are not case-sensitive, but the actual text between the tags is case-sensitive (Note: standards are changing – tags should now be all lower case) Begins with and ends with preliminary material goes here, including main content of the page goes here

13 Insert beginning and closing tags after head tags Insert tag after 1 st Some tags do not surround anything, so they may not have an ending form: o inserts horizontal line o inserts a line break

14 Letters with accent marks use the escape symbol Ampersand, then letter, then the name of the accent mark, then semicolon é displays as é – place after tag ñ displays as ñ – placed after above input Inser a tag after each the above two inputs

15 Tag pair surrounds the text to be formatted Bold: Italic: You can apply more than one kind of formatting at a time Veni, Vidi, Vici! produces: Veni, Vidi, Vici! Tags can be in any order, but have to be nested correctly Headings Choice of eight levels of heading tags to produce headings, subheadings, etc. Headings display material in large font on a new line Pope Cardinal Archbishop produces:

16 Color is used for both background and text bgcolor attribute of body tag gives solid background color Use hexadecimal color numbers or Use predefined color terms Insert the following: Color attribute can be used with body text, link, or font tags

17 Note how the text from the file loses its formatting when displayed in the browser Courtesy of Nature’s Source

18 Courtesy of Nature’s Source

19 Courtesy of Nature’s Source

20 Courtesy of Nature’s Source

21 Courtesy of Nature’s Source

22 Courtesy of Nature’s Source

23 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Nature's Source Welcome to the Website of Nature's Source! This is our first foray onto the World Wide Web. We are a small company dedicated to the health of our customers through natural remedies. We have a wide range of products that include: books, and multimedia documents that help you get healthy and stay healthy herbal medicines equipment for injury free body toning exercises

24 Fix author-provided nature3 pages (17) SSI instructions (started in class – note errors in yellow) Modify all other requirements specified in Mini-Project assignment Load to website, link from frames page, and verify links and display (started in class) Then test pages, fix, reload – do until correct

25 Setup for each page in nature3 using following screen captures as guide, except Site Map Site Map

26 Add DOCTYPE to each page: You can find a number of (X)HTML validators on the WWW. Here are two: You can enter the URL of the page you want validated directly into the validator and click on a button to validate it. Many other ways are possible: For example, the Firefox Web Developer add-in lets you validate the web page you are viewing from a dropdown menu.