XHTML Code Guide

XHTML

Saturday, April 20, 13

XHTML Introduction to

Saturday, April 20, 13

XHTML Introduction to Xtensible HyperText Markup Language

Saturday, April 20, 13

XHTML Introduction to Xtensible HyperText Markup Language Screen Readers – Click the Notes button in the lower right corner.

Saturday, April 20, 13

Creating Web Pages

Become a Web Designer

MUL 112 Interactive Media I MUL 218 Dynamic Web Design MUL 125 Interactive Motion Media CSIS 125A Web Development 2

Saturday, April 20, 13

Creating Web Pages About Creating Pages

Become a Web Designer

MUL 112 Interactive Media I MUL 218 Dynamic Web Design MUL 125 Interactive Motion Media CSIS 125A Web Development 2

Saturday, April 20, 13

Creating Web Pages About Creating Pages ď Ź Many ways to create web pages

Become a Web Designer

MUL 112 Interactive Media I MUL 218 Dynamic Web Design MUL 125 Interactive Motion Media CSIS 125A Web Development 2

Saturday, April 20, 13

Creating Web Pages About Creating Pages  Many ways to create web pages  Text

Editors and GUI Editors

Become a Web Designer

MUL 112 Interactive Media I MUL 218 Dynamic Web Design MUL 125 Interactive Motion Media CSIS 125A Web Development 2

Saturday, April 20, 13

Creating Web Pages About Creating Pages  Many ways to create web pages  Text

Editors and GUI Editors

 Write the pages in Extensible HTML (XHTML)

Become a Web Designer

MUL 112 Interactive Media I MUL 218 Dynamic Web Design MUL 125 Interactive Motion Media CSIS 125A Web Development 2

Saturday, April 20, 13

Creating Web Pages About Creating Pages  Many ways to create web pages  Text

Editors and GUI Editors

 Write the pages in Extensible HTML (XHTML)

Web Designers should…

Become a Web Designer

MUL 112 Interactive Media I MUL 218 Dynamic Web Design MUL 125 Interactive Motion Media CSIS 125A Web Development 2

Saturday, April 20, 13

Creating Web Pages About Creating Pages  Many ways to create web pages  Text

Editors and GUI Editors

 Write the pages in Extensible HTML (XHTML)

Web Designers should…  Know additional technologies Become a Web Designer

MUL 112 Interactive Media I MUL 218 Dynamic Web Design MUL 125 Interactive Motion Media CSIS 125A Web Development 2

Saturday, April 20, 13

Creating Web Pages About Creating Pages  Many ways to create web pages  Text

Editors and GUI Editors

 Write the pages in Extensible HTML (XHTML)

Web Designers should…  Know additional technologies  Flash

Become a Web Designer

MUL 112 Interactive Media I MUL 218 Dynamic Web Design MUL 125 Interactive Motion Media CSIS 125A Web Development 2

Saturday, April 20, 13

Creating Web Pages About Creating Pages  Many ways to create web pages  Text

Editors and GUI Editors

 Write the pages in Extensible HTML (XHTML)

Web Designers should…  Know additional technologies  Flash  JavaScript

Saturday, April 20, 13

Become a Web Designer

MUL 112 Interactive Media I MUL 218 Dynamic Web Design MUL 125 Interactive Motion Media CSIS 125A Web Development 2

Creating Web Pages About Creating Pages  Many ways to create web pages  Text

Editors and GUI Editors

 Write the pages in Extensible HTML (XHTML)

Web Designers should…  Know additional technologies  Flash  JavaScript  ActiveX

Saturday, April 20, 13

Become a Web Designer

MUL 112 Interactive Media I MUL 218 Dynamic Web Design MUL 125 Interactive Motion Media CSIS 125A Web Development 2

Creating Web Pages About Creating Pages  Many ways to create web pages  Text

Editors and GUI Editors

 Write the pages in Extensible HTML (XHTML)

Web Designers should…  Know additional technologies  Flash  JavaScript  ActiveX

 Use and understand

Saturday, April 20, 13

Become a Web Designer

MUL 112 Interactive Media I MUL 218 Dynamic Web Design MUL 125 Interactive Motion Media CSIS 125A Web Development 2

Creating Web Pages About Creating Pages  Many ways to create web pages  Text

Editors and GUI Editors

 Write the pages in Extensible HTML (XHTML)

Web Designers should…  Know additional technologies  Flash  JavaScript  ActiveX

 Use and understand  Databases

Saturday, April 20, 13

Become a Web Designer

MUL 112 Interactive Media I MUL 218 Dynamic Web Design MUL 125 Interactive Motion Media CSIS 125A Web Development 2

Creating Web Pages About Creating Pages  Many ways to create web pages  Text

Editors and GUI Editors

 Write the pages in Extensible HTML (XHTML)

Web Designers should…  Know additional technologies  Flash  JavaScript  ActiveX

 Use and understand  Databases  Database

Saturday, April 20, 13

connections

Become a Web Designer

MUL 112 Interactive Media I MUL 218 Dynamic Web Design MUL 125 Interactive Motion Media CSIS 125A Web Development 2

Editors

Saturday, April 20, 13

Editors  Use basic text editor

Saturday, April 20, 13

Editors  Use basic text editor 

Creates XHTML tags by hand

Saturday, April 20, 13

Editors  Use basic text editor  

Creates XHTML tags by hand Use

Saturday, April 20, 13

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad

Saturday, April 20, 13

(PC) NOTE: NOT Wordpad!

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad (PC)  TextEdit (Mac)

Saturday, April 20, 13

NOTE: NOT Wordpad!

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad (PC)  TextEdit (Mac)

NOTE: NOT Wordpad!

 Saving XHTML files

Saturday, April 20, 13

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad (PC)  TextEdit (Mac)

NOTE: NOT Wordpad!

 Saving XHTML files 

Save the text as plaintext

Saturday, April 20, 13

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad (PC)  TextEdit (Mac)

NOTE: NOT Wordpad!

 Saving XHTML files  

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

Saturday, April 20, 13

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad (PC)  TextEdit (Mac)

NOTE: NOT Wordpad!

 Saving XHTML files  

Save the text as plaintext Save the file using either the .html or .htm file name extension  Example:

Saturday, April 20, 13

mypage.htm or mypage.html

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad (PC)  TextEdit (Mac)

NOTE: NOT Wordpad!

 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:

Saturday, April 20, 13

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad (PC)  TextEdit (Mac)

NOTE: NOT Wordpad!

 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

Saturday, April 20, 13

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad (PC)  TextEdit (Mac)

NOTE: NOT Wordpad!

 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

Saturday, April 20, 13

type the page text as you would with a standard word processor

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad (PC)  TextEdit (Mac)

NOTE: NOT Wordpad!

 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  You

Saturday, April 20, 13

type the page text as you would with a standard word processor point and click with a mouse

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad (PC)  TextEdit (Mac)

NOTE: NOT Wordpad!

 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  You point and click with a mouse  When saving, the editor adds the extension automatically

Saturday, April 20, 13

processor

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad (PC)  TextEdit (Mac)

NOTE: NOT Wordpad!

 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  You point and click with a mouse  When saving, the editor adds the extension automatically

 Popular GUI HTML editors include:

Saturday, April 20, 13

processor

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad (PC)  TextEdit (Mac)

NOTE: NOT Wordpad!

 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  You point and click with a mouse  When saving, the editor adds the extension automatically

 Popular GUI HTML editors include: 

Adobe DreamWeaver

Saturday, April 20, 13

processor

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad (PC)  TextEdit (Mac)

NOTE: NOT Wordpad!

 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  You point and click with a mouse  When saving, the editor adds the extension automatically

 Popular GUI HTML editors include:  

Adobe DreamWeaver Microsoft Expressions

Saturday, April 20, 13

processor

Editors  Use basic text editor  

Creates XHTML tags by hand Use  Notepad (PC)  TextEdit (Mac)

NOTE: NOT Wordpad!

 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  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

Saturday, April 20, 13

processor

Naming Web Page Files

Saturday, April 20, 13

Naming Web Page Files Web servers search for default page names

Saturday, April 20, 13

Naming Web Page Files Web servers search for default page names Default page names include:

Saturday, April 20, 13

Naming Web Page Files Web servers search for default page names Default page names include: 

index.html

Saturday, April 20, 13

Naming Web Page Files Web servers search for default page names Default page names include:  

index.html index.htm

Saturday, April 20, 13

Naming Web Page Files Web servers search for default page names Default page names include:  

index.html index.htm

Names determined by the server

Saturday, April 20, 13

Naming Web Page Files Web servers search for default page names Default page names include:  

index.html index.htm

Names determined by the server 

Designers must know what type of server hosts the web pages

Saturday, April 20, 13

Naming Web Page Files Web servers search for default page names Default page names include:  

index.html index.htm

Names determined by the server 

Designers must know what type of server hosts the web pages  Apache

Saturday, April 20, 13

Server (Linux) -- usually index.html

Naming Web Page Files Web servers search for default page names Default page names include:  

index.html index.htm

Names determined by the server 

Designers 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.com The browser will open the index file without having to type it.

Saturday, April 20, 13

Markup Languages

Saturday, April 20, 13

Markup Languages Extensible HTML (XHTML)

Saturday, April 20, 13

Markup Languages Extensible HTML (XHTML)  Latest formulation of HTML

Saturday, April 20, 13

Markup Languages Extensible HTML (XHTML)  Latest formulation of HTML  Defines content rather than format

Saturday, April 20, 13

Markup Languages Extensible HTML (XHTML)  Latest formulation of HTML  Defines content rather than format  Used to organize data on the page

Saturday, April 20, 13

Markup Languages Extensible HTML (XHTML)  Latest formulation of HTML  Defines content rather than format  Used to organize data on the page  More flexible than HTML

Saturday, April 20, 13

Markup Languages Extensible HTML (XHTML)  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.

Saturday, April 20, 13

Markup Languages Extensible HTML (XHTML)  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

Saturday, April 20, 13

Web Page Access

Saturday, April 20, 13

Web Page Access Viewing Pages

Saturday, April 20, 13

Web Page Access Viewing Pages ď Ź The page and all referenced images and objects must

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

Saturday, April 20, 13

Web Page Access Viewing 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)

Saturday, April 20, 13

Web Page Access Viewing 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)  This is a program that uploads web pages to the web

server. (you will do this in this class)

Saturday, April 20, 13

Web Page Access Viewing 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)  This is a program that uploads web pages to the web

server. (you will do this in this class)

Options for a server:

Saturday, April 20, 13

Web Page Access Viewing 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)  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)

Saturday, April 20, 13

Web Page Access Viewing 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)  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

Saturday, April 20, 13

Web Page Access Viewing 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)  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.

Saturday, April 20, 13

Creating Pages in XHTML

Saturday, April 20, 13

XHTML Tags

<strong> My Home Page </strong>

Opening Tag

Saturday, April 20, 13

Closing Tag

XHTML Tags  Form  Uses wickets  Lower-case only <body></body> 

Contains an opening and closing tag

<strong> My Home Page </strong>

Opening Tag

Saturday, April 20, 13

Closing Tag

XHTML Tags  Form  Uses wickets  Lower-case only

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

<body></body>  

Contains an opening and closing tag Tags must nest properly <strong> My Home Page </strong>

Opening Tag

Closing Tag

<!DOCTYPE > <html> <head> <title> </title> </head> <body> </body> </html>

<body>This is an example of markup tags</body> Saturday, April 20, 13

XHTML Tag Rules

Saturday, April 20, 13

XHTML Tag Rules ď&#x20AC;´All tags must be written in lower case.

Saturday, April 20, 13

XHTML Tag Rules All tags must be written in lower case.  Wrong: <HR>

Saturday, April 20, 13

XHTML Tag Rules All tags must be written in lower case.  Wrong: <HR>  Right: <hr>

Saturday, April 20, 13

XHTML Tag Rules All tags must be written in lower case.  Wrong: <HR>  Right: <hr>

All tags must be closed:

Saturday, April 20, 13

XHTML Tag Rules All tags must be written in lower case.  Wrong: <HR>  Right: <hr>

All tags must be closed:  <p> </p> or <br/>

Saturday, April 20, 13

XHTML Tag Rules All tags must be written in lower case.  Wrong: <HR>  Right: <hr>

All tags must be closed:  <p> </p> or <br/>

All tag values must be enclosed in quotes.

Saturday, April 20, 13

XHTML Tag Rules All tags must be written in lower case.  Wrong: <HR>  Right: <hr>

All tags must be closed:  <p> </p> or <br/>

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

Saturday, April 20, 13

XHTML Tag Rules All tags must be written in lower case.  Wrong: <HR>  Right: <hr>

All tags must be closed:  <p> </p> or <br/>

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

Saturday, April 20, 13

XHTML Tag Rules All tags must be written in lower case.  Wrong: <HR>  Right: <hr>

All tags must be closed:  <p> </p> or <br/>

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

All tags must be properly nested.

Saturday, April 20, 13

XHTML Tag Rules All tags must be written in lower case.  Wrong: <HR>  Right: <hr>

All tags must be closed:  <p> </p> or <br/>

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

All tags must be properly nested.  Wrong: <strong><em>MSJC</strong></em>

Saturday, April 20, 13

XHTML Tag Rules All tags must be written in lower case.  Wrong: <HR>  Right: <hr>

All tags must be closed:  <p> </p> or <br/>

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

All tags must be properly nested.  Wrong: <strong><em>MSJC</strong></em>  Right: <strong><em>MSJC</em></strong>

Saturday, April 20, 13

XHTML Tag Rules All tags must be written in lower case.  Wrong: <HR>  Right: <hr>

All tags must be closed:  <p> </p> or <br/>

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

All tags must be properly nested.  Wrong: <strong><em>MSJC</strong></em>  Right: <strong><em>MSJC</em></strong>

There must be a DOCTYPE declaration.

Saturday, April 20, 13

XHTML Tag Rules All tags must be written in lower case.  Wrong: <HR>  Right: <hr>

All tags must be closed:  <p> </p> or <br/>

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

All tags must be properly nested.  Wrong: <strong><em>MSJC</strong></em>  Right: <strong><em>MSJC</em></strong>

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

tag rules

Saturday, April 20, 13