School of Business Administration HTML, Expression Web, WinSCP, & Advanced Web Development IT225 Spring Term 2016 Marymount University School of Business Administration Professor Suydam Week 3 HTML, Expression Web, WinSCP, & Mini-Project (MP1) (Chapter 3)
Outline XHTML & HTML5 WinSCP & Setting Up Websites Mini-Project (MP1)
Overview and Objectives 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
What is HTML? 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)
A Typical HTML Tag and Element 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: <p>This is a paragraph.</p> <p> is the opening tag of the element. </p> is the closing tag of the element. This is a paragraph. is the content of the element. Sometimes we refer to the “tag pair” <p>…</p>. Sometimes we refer to the “p tag” or simply a “p element”.
Browser Display of HTML Elements 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 <html> <head> <title>My Title</title> </head> <body> <!--An XHTML comment showing where page content to display will go.--> </body> </html>
Basic XHTML Markup Illustrated: first.html <html> <head> <title>Nature's Source</title> </head> <body> <h1> Welcome to the Website of Nature's Source </h1> <p> 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 </p> </body> </html>
Access Server Using WinSCP aaa99999 Caution of buttons: Never use “Move” Save Login Information Client Server
Set Up Server 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.
Open Your Student Website
Expression Web – Student Home Page (Frames, Tables, Images, Hypertext Links) 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.
Review: HTML Tags describe how a web page should look Formatting with Tags: Words or abbreviations enclosed in angle brackets < > Come in pairs (beginning and end): <title> </title> 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 <html> and ends with </html> <html> <head> preliminary material goes here, including <title> </title> </head> <body> main content of the page goes here </body> </html>
Review: Basic HTML Tags Some tags do not surround anything, so they may not have an ending form: <hr/> inserts horizontal line <br/> inserts a line break Insert beginning and closing <p></p> tags after head tags Insert <hr/> tag after 1st <p>
Accent Marks in HTML Letters with accent marks use the escape symbol Ampersand, then letter, then the name of the accent mark, then semicolon é displays as é – place after <hr/> tag ñ displays as ñ – placed after above input Inser a <br/> tag after each the above two inputs
Tags for Headings, Bold and Italic Choice of eight levels of heading tags to produce headings, subheadings, etc. Headings display material in large font on a new line <h1>Pope</h1><h2>Cardinal</h2><h3>Archbishop</h3> produces: Tag pair surrounds the text to be formatted Bold: <b> </b> Italic: <i> </i> You can apply more than one kind of formatting at a time <b><i>Veni, Vidi, Vici!</i></b> produces: Veni, Vidi, Vici! Tags can be in any order, but have to be nested correctly
Handling Color 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: <body bgcolor="#C0C0C0" > Color attribute can be used with body text, link, or font tags
Basic XHTML Markup Displayed: first.html Note how the text from the file loses its formatting when displayed in the browser Courtesy of Nature’s Source
More XHTML Markup Displayed: second.html Courtesy of Nature’s Source
Simple Table Layout in index Simple Table Layout in index.html from nature1 (two rows and two columns) Courtesy of Nature’s Source
Simple Table Layout in index Simple Table Layout in index.html from nature2 (four rows and five columns) (and now including “menu item” links) Courtesy of Nature’s Source
Our “About Us” Page, with Additional Relevant Links Courtesy of Nature’s Source
Our “Site Map” Page, with a (nested) Table Showing Site Map Data Courtesy of Nature’s Source
A Simple Valid Web Page: third.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!--third.html--> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nature's Source</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <h1>Welcome to the Website of Nature's Source!</h1> <p>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. <br /> We have a wide range of products that include:</p> <ul> <li>books, and multimedia documents that help you get healthy and stay healthy</li> <li>herbal medicines</li> <li>equipment for injury free body toning exercises</li> </ul> </body> </html>
MP1 Fix author-provided nature3 pages (17) SSI instructions (started in class – note errors in yellow) <!--#include file="common/logo.html" --> <!--#include file="common/mainmenu.html" --> <!--#include file="common/footer.html" --> 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
MP1 Setup for each page in nature3 using following screen captures as guide, except Site Map Site Map
How do we validate a web page? Add DOCTYPE to each page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> You can find a number of (X)HTML validators on the WWW. Here are two: http://validator.w3.org/ http://www.htmlhelp.com/tools/validator/ 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.