SlideShare una empresa de Scribd logo
1 de 48
WDIM268WEEK2
Get to know your doctype
HyperText Markup Language


           HTML

               ≈
           SGML
Standard Generalized Markup Language
Extensible HyperText Markup Language


         XHTML

               ≈
            XML
    Extensible Markup Language
Why XML?
Simpler than SGML.
Closer to HTML than SGML.
Designed for extensibility.
Encourages
“well-formed” content.
How does it work?
Almost exactly like HTML 4.
Be sure to include a W3C




       DTD
     Document Type De nition


                 and a couple other things.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
  <title>(Page title)</title>
</head>
<body>


(Page content)


</body>
</html>
Follow these rules.
<br>

            <br/>

If a tag is empty and requires no closing
    tag, end it with a self closing slash.
<STRONG>

        <strong>

XHTML is case-sensitive. Go easy on the
           CAPSLOCK key.
selected

     selected=selected

      selected=′selected′

      selected=″selected″

Attribute values must be provided, with the
         value enclosed in quotes.
font
                   s      frameset
iframe
             frame
         menu                     u
                         dir
 applet     basefont           noframes

isindex         strike
                                center

   Don’t use these tags anymore.
Block vs Inline
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nam nulla est, ullamcorper nec
semper ac, bibendum at elit. Nulla dapibus facilisis
sapien, quis feugiat tortor accumsan eu. Cras
porttitor, nisl nec tempor luctus, ligula metus
luctus ante, in malesuada justo massa eu velit.


                      Block
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nam nulla est, ullamcorper nec
semper ac, bibendum at elit. Nulla dapibus facilisis
sapien, quis feugiat tortor accumsan eu. Cras
porttitor, nisl nec tempor luctus, ligula metus
luctus ante, in malesuada justo massa eu velit.


                      Inline
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nam nulla est, ullamcorper nec
semper ac, bibendum at elit. Nulla dapibus facilisis
sapien, quis feugiat tortor accumsan eu. Cras
porttitor, nisl nec tempor luctus, ligula metus
luctus ante, in malesuada justo massa eu velit.


       Inline-Block (Yeah, I know...)
Semantic vs Structural
Semantic tags add context.
<em>Dagnabbit!</em>
<acronym title=″North Atlantic
Treaty Organization″>NATO</acronym>
<ol>
 <li>Thing 1</li>
 <li>Thing 2</li>
</ol>
Sometimes, additional
tags may be needed if
there is no appropriate
semantic tag or additional
divisions of content are
required.
div is your default block tag
span is your default inline tag
Meet the Web Stack
The Web is multi-layered.
The foundational layer is HTML, your text and markup.
Ideally, your content (and accompanying annotations and
hierarchy) should be able to stand alone.




                      <html />
User agents capable of applying presentational rules to
your HTML will then apply CSS, if provided.




                        css { }
If the user agent is sophisticated enough to handle
JavaScript (and doing so makes sense for the agent’s
context), your client-side scripts can affect your markup
and styles.




                     javaScript();
In cases where typical web technologies lack functionality your
experience needs, plugins (Flash, Silverlight) may be applied.
Your goal: Make each
layer as functional as
possible even when
subsequent layers are
unavailable.
If you succeed
Easier to debug.
Updates more swiftly.
No failure is utter failure.
Information is accessible.
If you fail
Updates will always
impact multiple layers.
Fallbacks won’t always
      be graceful.
Your information will be
bound by your own site’s
      requirements.
And this will happen.
This, too.

Más contenido relacionado

La actualidad más candente

Using Controls, calling Launchers. IsolatedStorages and Local DataBase samples
Using Controls, calling Launchers. IsolatedStorages and Local DataBase samplesUsing Controls, calling Launchers. IsolatedStorages and Local DataBase samples
Using Controls, calling Launchers. IsolatedStorages and Local DataBase samples
Rashad Aliyev
 

La actualidad más candente (19)

Lecture2 CSS1
Lecture2  CSS1Lecture2  CSS1
Lecture2 CSS1
 
Q and a design2 web
Q and a   design2 webQ and a   design2 web
Q and a design2 web
 
HTML Fundamentals by Telerik Academy
HTML Fundamentals by Telerik AcademyHTML Fundamentals by Telerik Academy
HTML Fundamentals by Telerik Academy
 
Introduction to the Web and HTML
Introduction to the Web and HTMLIntroduction to the Web and HTML
Introduction to the Web and HTML
 
Intro to front end development Basic
Intro to front end development BasicIntro to front end development Basic
Intro to front end development Basic
 
6 Steps to Make Your CSS Code More Maintainable
6 Steps to Make Your CSS Code More Maintainable6 Steps to Make Your CSS Code More Maintainable
6 Steps to Make Your CSS Code More Maintainable
 
Xss stored dvwa solution series
Xss stored   dvwa solution seriesXss stored   dvwa solution series
Xss stored dvwa solution series
 
[Basic HTML/CSS] 0. introduction
[Basic HTML/CSS] 0. introduction[Basic HTML/CSS] 0. introduction
[Basic HTML/CSS] 0. introduction
 
faster frontend development with textmate
faster frontend development with textmatefaster frontend development with textmate
faster frontend development with textmate
 
Word press beirut 9th meetup march
Word press beirut 9th meetup   marchWord press beirut 9th meetup   march
Word press beirut 9th meetup march
 
Using Controls, calling Launchers. IsolatedStorages and Local DataBase samples
Using Controls, calling Launchers. IsolatedStorages and Local DataBase samplesUsing Controls, calling Launchers. IsolatedStorages and Local DataBase samples
Using Controls, calling Launchers. IsolatedStorages and Local DataBase samples
 
Boostrap basics
Boostrap basicsBoostrap basics
Boostrap basics
 
XSS Reflacted - DVWA solution series
XSS Reflacted - DVWA solution seriesXSS Reflacted - DVWA solution series
XSS Reflacted - DVWA solution series
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Css inclusion
Css   inclusionCss   inclusion
Css inclusion
 
How to write css
How to write cssHow to write css
How to write css
 
Let's BEM together
Let's BEM togetherLet's BEM together
Let's BEM together
 
CSS
CSSCSS
CSS
 
TMW Code Club Session 1
TMW Code Club Session 1TMW Code Club Session 1
TMW Code Club Session 1
 

Destacado

WDIM268 Week 1 (Summer 2010)
WDIM268 Week 1 (Summer 2010)WDIM268 Week 1 (Summer 2010)
WDIM268 Week 1 (Summer 2010)
Tyler Sticka
 

Destacado (9)

Vidyuth portfolio
Vidyuth portfolioVidyuth portfolio
Vidyuth portfolio
 
WDIM268 Week 2 (Summer 2009)
WDIM268 Week 2 (Summer 2009)WDIM268 Week 2 (Summer 2009)
WDIM268 Week 2 (Summer 2009)
 
WDIM268 Week 1 (Summer 2009)
WDIM268 Week 1 (Summer 2009)WDIM268 Week 1 (Summer 2009)
WDIM268 Week 1 (Summer 2009)
 
WDIM268 Week 4 (Summer 2009)
WDIM268 Week 4 (Summer 2009)WDIM268 Week 4 (Summer 2009)
WDIM268 Week 4 (Summer 2009)
 
WordPress-Powered Portfolios
WordPress-Powered PortfoliosWordPress-Powered Portfolios
WordPress-Powered Portfolios
 
WDIM268 Week 7 (Summer 2009)
WDIM268 Week 7 (Summer 2009)WDIM268 Week 7 (Summer 2009)
WDIM268 Week 7 (Summer 2009)
 
WDIM268 Week 3 (Summer 2009)
WDIM268 Week 3 (Summer 2009)WDIM268 Week 3 (Summer 2009)
WDIM268 Week 3 (Summer 2009)
 
WDIM268 Week 1 (Summer 2010)
WDIM268 Week 1 (Summer 2010)WDIM268 Week 1 (Summer 2010)
WDIM268 Week 1 (Summer 2010)
 
Educared octubre-2011-final b
Educared octubre-2011-final bEducared octubre-2011-final b
Educared octubre-2011-final b
 

Similar a WDIM268 Week 2 (Summer 2010)

GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
Heather Rock
 
HTML5 - Future of Web
HTML5 - Future of WebHTML5 - Future of Web
HTML5 - Future of Web
Mirza Asif
 
Even faster web sites presentation 3
Even faster web sites presentation 3Even faster web sites presentation 3
Even faster web sites presentation 3
Felipe Lavín
 
Html xhtml tag-sheet
Html xhtml tag-sheetHtml xhtml tag-sheet
Html xhtml tag-sheet
Daniel Downs
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
Zohar Arad
 

Similar a WDIM268 Week 2 (Summer 2010) (20)

Worry free web development
Worry free web developmentWorry free web development
Worry free web development
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
Xhtml Basics
Xhtml BasicsXhtml Basics
Xhtml Basics
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
Xhtml Basics
Xhtml BasicsXhtml Basics
Xhtml Basics
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
HTML5 - Future of Web
HTML5 - Future of WebHTML5 - Future of Web
HTML5 - Future of Web
 
Even faster web sites presentation 3
Even faster web sites presentation 3Even faster web sites presentation 3
Even faster web sites presentation 3
 
Web technologies: Lesson 2
Web technologies: Lesson 2Web technologies: Lesson 2
Web technologies: Lesson 2
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1
 
Html forfood
Html forfoodHtml forfood
Html forfood
 
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.pptHTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
XHTML and CSS
XHTML and CSS XHTML and CSS
XHTML and CSS
 
Web performance essentials - Goodies
Web performance essentials - GoodiesWeb performance essentials - Goodies
Web performance essentials - Goodies
 
Html xhtml tag-sheet
Html xhtml tag-sheetHtml xhtml tag-sheet
Html xhtml tag-sheet
 
Finding Your Way: Understanding Magento Code
Finding Your Way: Understanding Magento CodeFinding Your Way: Understanding Magento Code
Finding Your Way: Understanding Magento Code
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
 
Top Ten Java Defense for Web Applications v2
Top Ten Java Defense for Web Applications v2Top Ten Java Defense for Web Applications v2
Top Ten Java Defense for Web Applications v2
 

Último

如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
yzeoq
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
mikehavy0
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
Sarbjit Bahga
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
thubko
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
joshuaclack73
 

Último (20)

如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product Photos
 
Rise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintActionRise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintAction
 
Spring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisSpring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers Paris
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
 
Digital Marketing Company in Bangalore.pdf
Digital Marketing Company in Bangalore.pdfDigital Marketing Company in Bangalore.pdf
Digital Marketing Company in Bangalore.pdf
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
 
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
 
Spring Summer 26 Colors Trend Book Peclers Paris
Spring Summer 26 Colors Trend Book Peclers ParisSpring Summer 26 Colors Trend Book Peclers Paris
Spring Summer 26 Colors Trend Book Peclers Paris
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
 
Morgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity DesignMorgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity Design
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign design
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 

WDIM268 Week 2 (Summer 2010)