XHTML Introduction to Xtensible HyperText Markup Language Screen Readers – Click the Notes button...

XHTMLIntroduction to

Xtensible HyperText Markup Language

Screen Readers – Click the Notes button in the lower right corner.

Creating Web Pages

About Creating PagesMany ways to create web pages

Text Editors and GUI EditorsWrite the pages in Extensible HTML (XHTML)

Web Designers should…Know additional technologies

Flash JavaScript ActiveX

Use and understand Databases Database connections

Become a Web DesignerMUL 112 Interactive Media IMUL 218 Dynamic Web DesignMUL 125 Interactive Motion MediaCSIS 125A Web Development 2

Use basic text editor Creates XHTML tags by hand Use

Notepad (PC) NOTE: NOT Wordpad! TextEdit (Mac)

Saving XHTML files Save the text as plaintext Save the file using either the .html or .htm file name extension

Example: mypage.htm or mypage.html GUI HTML editors:

Create HTML/XHTML code for you You type the page text as you would with a standard word processor You point and click with a mouse When saving, the editor adds the extension automatically

Popular GUI HTML editors include: Adobe DreamWeaver Microsoft Expressions Coffee Cup

Editors

Naming Web Page Files

Web servers search for default page names Default page names include:

index.html index.htm

Names determined by the serverDesigners must know what type of server hosts the

web pages Apache Server (Linux) -- usually index.html IIS (Windows) – usually index.htm or default.htm

http://www.chromezebra.comThe browser will open the index file without having to type it.

http://www.chromezebra.com/

Markup Languages

Extensible HTML (XHTML)Latest formulation of HTMLDefines content rather than format Used to organize data on the pageMore flexible than HTMLUsed to insure accessibility for persons with limited

vision, hearing, etc.Works with Cascading Style Sheets

Web Page Access

Viewing PagesThe page and all referenced images and objects must

reside on a Web server that provides access to the Internet.

File Transfer Protocol (FTP)This is a program that uploads web pages to the web

server. (you will do this in this class)

Options for a server: Contract with an Internet Service Providers (ISP)Set up your own server and Internet access

NOTE: your web page will reside on a server but you will not need a server in this class.

Creating Pages in XHTML

XHTML Tags Form

Uses wicketsLower-case only

<body></body>Contains an opening and

closing tagTags must nest properly

Opening Tag

 My Home Page 

Closing Tag

<!DOCTYPE >

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

Every XHTML document must have the following document structure components to render as expected and validate:

<body>This is an example of markup tags</body>

XHTML Tag Rules

All tags must be written in lower case. Wrong: <HR> Right: <hr>

All tags must be closed: or 

All tag values must be enclosed in quotes. Wrong: <table border=1> Right: <table border="1">

All tags must be properly nested. Wrong: MSJC Right: MSJC

There must be a DOCTYPE declaration.NOTE: this does not follow the lowercase and closing

tag rules

XHTML Introduction to Xtensible HyperText Markup Language Screen Readers – Click the Notes button...

Documents

Transcript of XHTML Introduction to Xtensible HyperText Markup Language Screen Readers – Click the Notes button...