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