Department of Information Technology Chapter 7 - Web Page Design & Creation Lecturer: Ms Melinda Chung

Department of Information Technology 2 of 43 The World Wide Web (WWW) existed since early 1990s the most widely used service on the Net a virtual network consists of Web pages residing on computers/servers distributed across the Internet Web pages - electronic documents contain text, images and hyperlinks Web pages are prepared using the Hypertext Markup Language (HTML)

Department of Information Technology 3 of 43 WWW (cont.) a Web site - a collection of related web pages each web site has a unique address - URL a Web site is stored on a Web server A Web server can have multiple Web sites http - communication protocol used to transfer pages on the Web Web browser - used to access and view Web pages

Department of Information Technology 4 of 43 WWW (cont.) A way to provide and access information resources on the Internet Protocol - HTTP (Hypertext Transfer Protocol) Non-linear Multimedia Flexible

Department of Information Technology 5 of 43 The Web: "understands" other Internet protocols, provides an easy-to-use interface Webpage link gopher site with images, sounds, text Library Catalogue (telnet) Software Repository (ftp) WWW (cont.)

Department of Information Technology 6 of 43 Home page design consideration Use a summary Table of contents Remind reader to bookmark your page Include a help section Display design credit (name, ), acknowledgement Avoid clustering

Department of Information Technology 7 of 43 General guides for web page design contain a link back to the home page or top- level page (not all viewers access your site at the home page) Avoid too much information (< 3 screenful) Have value in content Maintain same navigation icons Maintain same design layout

Department of Information Technology 8 of 43 Continue... Include a modification date Use paragraphs, headings, listings Avoid specific instruction Check for duplication Copyright consideration

Department of Information Technology 9 of 43 Web Authoring Tools Three types of Web Authoring tools: Text editors General purpose, such as Notepad, Simple Text HTML editors Show HTML text, but provide tools for inserting tags. Eg. Hotdog, HTML Assistant, Web Edit, BBEdit WYSIWYG editors HTML hidden (although source view provided). Eg. GoLive, Pagemill, Dreamweaver. Claris Home Page

Department of Information Technology 10 of 43 SGML & HTML SGML [Standard Generalised Markup Language] a language describes other mark-up languages used for composing electronic document, publishing documents a meta-language that contains rules from which other languages (HTML, XHTML,XML..etc) are developed HTML [HyperText Markup Language] uses a predefined subset of SGML tags

Department of Information Technology 11 of 43 Describes the appearance of web pages and the links contained within them Multimedia options Supports scripting languages Accommodates Style sheets No rigid programming standards apply All Web browsers interpret HTML codes & display the contents HTML

Department of Information Technology 12 of 43 HTML 4 Conforms to an International Standard ISO 8879 Widely regarded as the standard publishing language of the World Wide Web HTML is not applicable to a wide range of Web clients (TVs, fridges, PDAs, mobile phones etc). Compatibility problems for documents across different platforms Need a basic set of HTML features applicable to wide range of features - XHTML

Department of Information Technology 13 of 43 XML & XHTML XML -eXtensible Markup Language Extensible - the markup symbols are unlimited and self- defining Meant to overcome some of the problems of HTML4 removes many of the more complex features of SGML but retaining its power and flexibility a structured set of rules for defining any kind of data to be shared on the Web XHTML - eXtensible HyperText Markup Language A reformulation of HTML 4 Layout of the code much more structured Pages written in XHTML work well in most browsers Elements (tags) are almost identical to HTML4

Department of Information Technology 14 of 43 XHTML Will become the standard used for WWW documents Introduces more rigid programming standards Uses HTTP - Hyper Text Transfer Protocol Check how good your XHTML codes at: for conformance with W3C recommendations

Department of Information Technology 15 of 43 SGML XML HTML XHTML Reference: Hughes, C. M The Web Wizard’s Guide to XHTML. Pearson: Boston XHTML

Department of Information Technology 16 of 43 How do you write XHTML Create Text File *.htm or *.html Editor eg NotePadBrowser eg Internet Explorer File Open Browse Check Result Revise Correct Add Reload/Refresh As often As needed

Department of Information Technology 17 of 43 XHTML components an XML declaration (although depending on the document type this may not be essential) a DOCTYPE (similar to define a style-sheet in a Word document) the element must be the first one in an XHTML document the XML namespace (xmlns) and its appropriate value tags and attributes contained within the of XHTML document.

Department of Information Technology 18 of 43 Essential structure of every XHTML document 1. XML declaration This is a statement to indicate that it is an XML application. This statement is included in the very first line of the XHTML document.

Department of Information Technology 19 of 43 Essential structure of every XHTML document 2. DOCTYPE The DOCTYPE used is referred to a DTD (Document Type Definition). It specifies the version of XHTML the document will use Strict: for clean structural mark-up free from formatting (use in conjunction with Style sheets) Transitional: allows some flexibility, very similar to HTML4, includes formatting elements Frameset: must be used if document is to include frames

Department of Information Technology 20 of 43 DOCTYPE How to define the respective DOCTYPE Strict Transitional Frameset

Department of Information Technology 21 of 43 DOCTYPE Resemble more closly the future of XHTML versions Incorporate it CAREFULLY in the Web pages that you generate Need to use the W3C validator to check the quality of your XHTML codes For this subject you are required to use the transitional DOCTYPE

Department of Information Technology 22 of 43 Essential XHTML elements My first XHTML file Hello World XHTML documents consist of data (between the tags) and instructions (within the tags) Indenting makes it easier to follow

Department of Information Technology 23 of 43 STF = Strict, TF = Transitional, E.g., can be used for TF If you want to make sure which tags you can use…. Source:

Department of Information Technology 24 of 43 Start tag Content End tag Element Reference: Hughes, C. M The Web Wizard’s Guide to XHTML. Pearson: Boston Hello World !!!!!! Some basic XHTML terms

Department of Information Technology 25 of 43 Reference: Hughes, C. M The Web Wizard’s Guide to XHTML. Pearson: Boston Attributes of tag (in red): Google Some basic XHTML terms

Department of Information Technology 26 of 43 HTML vs XHTML The most important differences between HTML and XHTML are: XHTML elements must be properly nested IncorrectCorrect e.g. NB NB XHTML documents must be well-formed and nested within the root element......

Department of Information Technology 27 of 43 Lower case and end tags Tag names (elements) must be in lowercase XHTML is case sensitive e.g. and are different tags. Therefore …. IncorrectCorrect <A HREF = <a href = All XHTML elements must be closed IncorrectCorrect John John Mary Mary

Department of Information Technology 28 of 43 More XHTML rules Including empty tags: - Horizontal rule - rather than - Break - rather than - image - Attribute values must be quoted IncorrectCorrect

Department of Information Technology 29 of 43 Head tag The tag provides information about the HTML document including: tag - appears at the top of the browser. It can be used by search engines tag –can include meta data in this section

Department of Information Technology 30 of 43 Between the tag... The title appears at the top of the browser window tag examples:

Department of Information Technology 31 of 43 tag... Elements: headings ordinary text lists pictures tables links

Department of Information Technology 32 of 43 Headings To display a heading, use the following HTML code:..heading text.. where n is a value from 1 to 6 h1 is the largest font, while h6 is the smallest Note: different browsers will react to the heading command differently

Department of Information Technology 33 of 43 Text Formatting We can ask for emphasis (usually interpreted as italics) and We can ask for strong (usually interpreted as bold) and We can ask for samples of code (most browsers change to a monospaced font) and

Department of Information Technology 34 of 43 Spaces and new lines Browsers turn multiple spaces and carriage returns in an XHTML document into a single space. So the following: " This is a sample of spaced out text ” would be displayed as: " This is a sample of spaced out text ” where multiple spaces and carriage returns are ignored

Department of Information Technology 35 of 43 Spaces and new lines (cont.) To start a new paragraph (with a blank line spacer - like pressing ENTER twice) (new Paragraph) To start a new line (like pressing ENTER once) (line BReak) To have multiple blanks use lots of (non breaking space))

Department of Information Technology 36 of 43 A longer Example A Longer Example A Page Showing Some Text Formatting The Usual Character Formatting Some italic text Some bold text Special Characters A paragraph of text.

Department of Information Technology 37 of 43 Actual Netscape output &

Department of Information Technology 38 of 43 Lists There are three main types of lists: Numbered Bullet Definition

Department of Information Technology 39 of 43 Numbered lists To create a numbered list use: the first item the second item which gives: 1. the first item 2. the second item ol stands for Ordered List

Department of Information Technology 40 of 43 Bullet lists To create a bulleted list use: the first item the second item which gives: the first item the second item ul stands for Unordered List

Department of Information Technology 41 of 43 Definition lists To create a definition list use: the first item and its definition the second item and its definition which gives: the first item and its definition the second item and its definition

Department of Information Technology 42 of 43 Nested lists First level list item 1 First level list item 2 Second level list item 1 Second level list item 2 Third level list item 1 Third level list item 2 Second level list item 3 First level list item 3

Department of Information Technology 43 of 43 This is the result First level list item 1 First level list item 2 1. Second level list item 1 2. Second level list item 2 Third level list item 1 Third level list item 2 3. Second level list item 3 First level list item 3

Department of Information Technology 44 of 43 Next week To be continued with more tags