XHTML Code Guide

XHTML

Saturday, April 20, 13

XHTMLIntroduction to



Xtensible HyperText Markup Language



Xtensible HyperText Markup Language

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


Creating Web Pages

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


Creating Web Pages

About Creating Pages



Creating Web Pages

About Creating Pages Many ways to create web pages



Creating Web Pages


Text Editors and GUI Editors



Creating Web Pages


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



Creating Web Pages



Web Designers should…



Creating Web Pages



Web Designers should… Know additional technologies



Creating Web Pages




FlashBecome a Web Designer

MUL 112 Interactive Media IMUL 218 Dynamic Web DesignMUL 125 Interactive Motion MediaCSIS 125A Web Development 2


Creating Web Pages




FlashJavaScript Become a Web Designer

MUL 112 Interactive Media IMUL 218 Dynamic Web DesignMUL 125 Interactive Motion MediaCSIS 125A Web Development 2


Creating Web Pages




FlashJavaScriptActiveX



Creating Web Pages





Use and understand



Creating Web Pages





Use and understandDatabases



Creating Web Pages





Use and understandDatabasesDatabase connections



Editors


Use basic text editor

Editors


Use basic text editor Creates XHTML tags by hand

Editors


Use basic text editor Creates XHTML tags by hand Use

Editors



Notepad (PC) NOTE: NOT Wordpad!

Editors



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

Editors




Saving XHTML files

Editors




Saving XHTML files Save the text as plaintext

Editors




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

Editors





Example: mypage.htm or mypage.html

Editors





Example: mypage.htm or mypage.htmlGUI HTML editors:

Editors






Create HTML/XHTML code for you

Editors






Create HTML/XHTML code for you You type the page text as you would with a standard word processor

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

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

Editors







Popular GUI HTML editors include:

Editors







Popular GUI HTML editors include: Adobe DreamWeaver

Editors







Popular GUI HTML editors include: Adobe DreamWeaver Microsoft Expressions

Editors







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

Editors


Naming Web Page Files


Naming Web Page FilesWeb servers search for default page names


Naming Web Page FilesWeb servers search for default page namesDefault page names include:



index.html



index.html index.htm




Names determined by the server




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

web pages





web pagesApache Server (Linux) -- usually index.html





web pagesApache 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/

http://www.chromezebra.com/

Markup Languages


Markup LanguagesExtensible HTML (XHTML)



Latest formulation of HTML



Latest formulation of HTML Defines content rather than format



Latest formulation of HTML Defines content rather than format Used to organize data on the page



Latest formulation of HTML Defines content rather than format Used to organize data on the page More flexible than HTML



Latest formulation of HTML Defines content rather than format Used to organize data on the page More flexible than HTML Used to insure accessibility for persons with limited

vision, hearing, etc.



Latest formulation of HTML Defines content rather than format Used to organize data on the page More flexible than HTML Used to insure accessibility for persons with limited

vision, hearing, etc. Works with Cascading Style Sheets


Web Page Access


Web Page AccessViewing Pages



The page and all referenced images and objects must reside on a Web server that provides access to the Internet.




File Transfer Protocol (FTP)




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

server. (you will do this in this class)





server. (you will do this in this class)Options for a server:






Contract with an Internet Service Providers (ISP)






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






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

Opening Tag

 My Home Page 

Closing Tag


XHTML TagsForm

Uses wickets Lower-case only

<body></body> Contains an opening and

closing tag

Opening Tag


Closing Tag


XHTML TagsForm

Uses wickets Lower-case only

<body></body> Contains an opening and

closing tag Tags must nest properly

Opening Tag


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


XHTML Tag RulesAll tags must be written in lower case.



Wrong: <HR>



Wrong: <HR> Right: <hr>




All tags must be closed:




All tags must be closed: or 





All tag values must be enclosed in quotes.





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





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






All tags must be properly nested.






All tags must be properly nested. Wrong: MSJC






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







There must be a DOCTYPE declaration.







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

tag rules

Documents

XHTML Code Guide