Our XHTML Template

1
Our XHTML Template

• Week 1 - Presentation 2
• Veronica Noone

2
Objectives

• What is HTML?
• HTML Tags
• What is XHTML?
• Document Type Definition (DTD)
• Dissect Our Template
• Then you will
• Create your template
• Validate your template
• Test you Student UNIX account information
• FTP to your UNIX account

3
What is HTML?

• The World Wide Web Consortium (http//w3c.org)
  sets the standards for HTML and its related
  languages.
• A tag based markup language placed in a file
  intended for display on a Web browser page.

4
HTML Tags

• Each individual markup code is referred to as an
  element or tag.
• Each tag has a purpose.
• Tags are enclosed in angle brackets, "lt" and "gt"
  symbols.
• Most tags come in pairs an opening tag and a
  closing tag.

5
What is XHTML?

• The newest version of HTML is actually XHTML
• eXtensible HyperText Markup Language.
• tags and attributes of HTML
• the syntax of XML
• While many web pages and web authoring tools
  still use HTML, as a web developer you need to
  learn about XHTML you will be seeing a lot of
  it in the future.

6
Whats wrong with HTML?

• The Web has changed
• Before a medium used to display electronic
  versions of paper documents
• Now a medium that provides diverse information
  for a variety of devices
• With the expansion of the Web to include devices
  other than personal computers, the need for a
  descriptive rather than structural language
  became evident and XHTML was created.

7
DocumentType Definition (DTD)

• identifies the type of markup language used in a
  web page.
• XTML 1.0 Transitional
• least strict specification for XHTML 1.0.
• Supports CSS and traditional formatting
  instructions such as fonts.
• We will use this for most of our coding and CSS
  will be covered in GREAT detail in future weeks
• XHTML 1.0 Strict
• Requires exclusive use of Cascading Style Sheets.
  
• XHTML 1.0 Frameset
• Required for pages using XHTML frames.

8
Our Template
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt lttit
legtOur Page Template - a samplelt/titlegt ltmeta
http-equiv"Content-Type" content"text/html
charsetUTF-8" /gt ltmeta name"keywords"
content"Your, keywords, here, seperated by
commas" /gt ltmeta name"description" content"You
description here" /gt ltmeta name"author"
content"You name here" /gt lt/headgt ltbodygt lt!--
main content area --gt lt/bodygt lt/htmlgt
Lets Dissect
9
Our Template
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt lttit
legtOur Page Template - a samplelt/titlegt ltmeta
http-equiv"Content-Type" content"text/html
charsetUTF-8" /gt ltmeta name"keywords"
content"Your, keywords, here, seperated by
commas" /gt ltmeta name"description" content"You
description here" /gt ltmeta name"author"
content"You name here" /gt lt/headgt ltbodygt lt!--
main content area --gt lt/bodygt lt/htmlgt
10
Our Template
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt lttit
legtOur Page Template - a samplelt/titlegt ltmeta
http-equiv"Content-Type" content"text/html
charsetUTF-8" /gt ltmeta name"keywords"
content"Your, keywords, here, seperated by
commas" /gt ltmeta name"description" content"You
description here" /gt ltmeta name"author"
content"You name here" /gt lt/headgt ltbodygt lt!--
main content area --gt lt/bodygt lt/htmlgt
11
Our Template
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt lttit
legtOur Page Template - a samplelt/titlegt ltmeta
http-equiv"Content-Type" content"text/html
charsetUTF-8" /gt ltmeta name"keywords"
content"Your, keywords, here, seperated by
commas" /gt ltmeta name"description" content"You
description here" /gt ltmeta name"author"
content"You name here" /gt lt/headgt ltbodygt lt!--
main content area --gt lt/bodygt lt/htmlgt
12
Our Template
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt lttit
legtOur Page Template - a samplelt/titlegt ltmeta
http-equiv"Content-Type" content"text/html
charsetUTF-8" /gt ltmeta name"keywords"
content"Your, keywords, here, seperated by
commas" /gt ltmeta name"description" content"You
description here" /gt ltmeta name"author"
content"You name here" /gt lt/headgt ltbodygt lt!--
main content area --gt lt/bodygt lt/htmlgt
13
Create your template

• 10 minutes
• Using Notepad follow chapter 1 in the Spring into
  HTML and CSS book
• Save the file as template.html
• When finished open your page in a browser.
• What do you see?

14
Validate your template

• Upload or copy and paste your template in the
  validator
• http//validator.w3.org/
• Did you pass?
• Help you neighbor if you did?

15
Test your Student UNIX account information

• Go to http//student.ccbcmd.edu/mail/src/login.ph
  p
• Can you log in?
• This is your free email account from the college.
  Set up a forward if you dont plan on using it.
• Can change your password in here.

16
FTP to your UNIX account

• WS-FTP
• student.ccbcmd.edu
• Login and password
• Create a folder in WWW called webt143
• CASE SENSITIVE
• Use lowercase
• Transfer your template to the webt143 folder