SlideShare a Scribd company logo

Markup Documents

•Download as PPTX, PDF•
•
Steven Cahill
Steven Cahill

The document discusses HTML, XHTML, CSS, and markup elements. It provides explanations of key concepts: - HTML is the language used to write websites and stands for Hypertext Markup Language. It uses elements, attributes, and values to structure and style web pages. - CSS allows setting styles like fonts and colors for HTML elements in one central location to apply across pages. CSS enhances HTML but is separate from it. - XHTML elements, attributes, and empty elements are used to identify, describe and structure different parts of a web page. Elements can contain other elements in a nested hierarchy.

Related slideshows

HTML Email
HTML EmailHTML Email
HTML Email
 
Html project
Html projectHtml project
Html project
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
 
1 of 45
Website FundamentalsMarkup Documents
Markup DocumentsWhat is HTML?
What is HTML?HTML is the language websites are written in.The letters stand for HyperText Markup Language.It might sound complicated, but it’s actually pretty easy to understand.
What is HTML?HTML has two essential features:HypertextUniversality
What is HTML?HyperTextHyperText means you can create a link in a Web page that leads the visitor to any other web page or to practically anything else on the internet.It means that information on the Web can be accessed from many different directions.
What is HTML?Universality:Universality means that because HTML documents are saved as Text Only files, virtually any computer can read a Web page.It doesn’t matter if your visitors have Macintosh or Windows machines, or whether they’re on a Unix box or even a handheld device like a Palm.The Web is open to all.
Markup DocumentsHTML VS. XHTML: What should you use?
HTML VS. XHTMLXHTML stands for eXtensible HyperText Markup Language; it is the simplicity of HTML with the power and flexibility of XML and became the perfect foundation for CSS.
HTML VS. XHTMLXHTML is a great improvement over HTML.It’s stronger, more flexible, more powerful, more likely to be supported in the future, and can be expanded to fit any need.However, there are times when you just need to publish a web document without having to stress over every last quotation mark.
Markup DocumentsMarkup: Elements, Attributes and Values
MarkupXHTML is an ingenious system of including information about the content right in a text document.This information - called markup, accounting for the m in XHTML - can include formatting instructions as well as details about the relationships between parts of the document.However, because the markup itself is comprised chiefly of text, the document is practically universally accessible.
MarkupXHTML has three principle types of markup:ElementsAttributesValues.
ElementsElements are like little labels that identify and structure the different parts of a Web page.Some elements have one or more attributes, which further describe the purpose and content, if any, of the element.<hr /><tdcolspan=“3”>February</td><imgsrc=“blueflax.jpg” width=“300” />
ElementsElements can contain text and/or other elements, or they can be empty. A non-empty element consists of an opening tag, the content, and a closing tag.<hr /><tdcolspan=“3”>February</td><imgsrc=“blueflax.jpg” width=“300” />
ElementsAn empty element looks like a combination opening and closing tag, with an initial less than sign, the element’s name followed by any attributes it may have, a space, a forward slash, and the final greater than sign.<hr /><td colspan=“3”>February</td><imgsrc=“blueflax.jpg” width=“300” />
Attributes and ValuesAttributes contain information about the data in the document, as opposed to being that data itself.Some attributes can accept any value at all, others are more limited.Perhaps the most common are those that accept enumerated or predefined values.In other words, you must select a value from a standard list of choices.<hr /><td colspan=“3”>February</td><imgsrc=“blueflax.jpg” width=“300” />
Attributes and ValuesMany attributes require a number or percentage for their value, particularly those describing size and length.A numeric value never includes units.Where units are applicable, as in the height of text or the width of an image, they are understood to be pixels.<hr /><td colspan=“3”>February</td><imgsrc=“blueflax.jpg” width=“300” />
Attributes and ValuesThe attributes controlling colour can contain values that are either a colour name or a hexadecimal representation of the red, green, and blue content of the colour.Some attributes reference other files and thus must contain values in the form of a URL, or Uniform Resource Locator, a file’s unique address on the Web.<p color=“yellow”><p color=“#FFFFFF”><a href=“test.html”>Click Here</a><a href=“http://www.google.com/”>Google Search</a>
Block VS. InlineAn element can be block-level or inline.If it is block-level, it will always be displayed on a new line, like a new paragraph in a book.If it is inline, it will be displayed in the current line, like the next word in a paragraph.Block Level Elements<div> <p> <table>Inline Elements<span> <a>
Block VS. InlineBlock-level elements are considered the bigger structural pieces of your Web page, and as such can usually contain other block-level elements, inline elements, and text. Inline elements, in contrast, can generally only contain other inline elements and text.Block Level Elements<div> <p> <table>Inline Elements<span> <a>
Parents and ChildrenIf one element contains another, it is considered to be the parent of the enclosed, or child element.Any element contained in the child element is considered descendants of the outer, parent element.You can actually create a family tree of a Web page that both shows the hierarchical relationships between each element on the page and uniquely identifies each element.<div> <p></p> <p> <a></a> </p></div>
Parents and ChildrenThis structure is a key feature of HTML code and facilitates adding style to the elements and applying JavaScript effects to them.<div> <p></p> <p> <a></a> </p></div>
Parents and ChildrenIt is important to note that when elements contain other elements, each element must be properly nested and is fully contained within its parent.Whenever you use a closing tag, it should correspond to the last unclosed opening tag.In other words, first open A then open B, then close B and then close A.<div> <p></p> <p> <a></a> </p></div>
Markup DocumentsCSS(Cascading style Sheets)
CSSMost word processors today include a way to make changes to text not just word by word, but throughout an entire document using styles.Styles collect all the different properties, such as font family, size, and colour that you want to apply to similar types of text - titles, headers, captions, and so on - and give these groups of properties a common name.
CSSCSS brings to the Web the same convenience for setting styles that’s available in one central location to affect the appearance of a particular XHTML tag on a single Web page or across an entire Web site.Although CSS works with XHTML, it is not XHTML. Rather, CSS is a separate code that enhances the abilities of XHTML, by allowing you to redefine the way that existing tags display their content.
Markup DocumentsTypes of CSS Rules
Types of CSS RulesThe best thing about Cascading Style Sheets is that they are amazingly simple to set up.They don’t require plug-ins or fancy software - just text files with rules.A CSS rule specifies the XHTML to which a style or definition applies, and then defines the style, or how the selected XHTML should behave in the browser window.You can set up rules to tell a specific XHTML tag how to display its content, or you can create generic rules and then apply them to tags at your discretion.
Types of CSS RulesThe three most common selectors or ways to select the XHTML to which a style applies, are:XHTML SelectorClass SelectorID Selector
XHTML SelectorThe XHTML element’s name is used as a selector to redefine the associated XHTML tagdiv { ... }p { ... }a { ... }
Class SelectorA class is a “free agent” that can be applied to an XHTML tag.You can name the class almost anything.Because it can be applied to multiple XHTML tag, a class is the most versatile type of selector.class.menuItem.clear
ID SelectorMuch like classes, IDs can be applied to any XHTML tag, but only once on a given page to a particular tag to create an object for use with a JavaScript function#ID#navigation#footer
Markup DocumentsThe parts of a CSS rule
The Parts of a CSS RuleAll CSS rules consist of a selector and a declaration block. The declaration block, which is surrounded by curly braces, is made up of declarations, which are pairs of properties and values separated by a semicolon.
SelectorsSelectors start each rule, appearing before the left curly braceThe selector can be a XHTML tag selector, a class, an ID, or a combination of theseselector { property: value; }
PropertiesPropertiesidentify the style that is being defined.There are several dozen properties, each responsible for an aspect of the page content’s behaviour and appearance.selector { property: value; }
ValuesValues are assigned to a property to define its nature. A value can be a keyword such as “yes” or “no”, a number, or a percentage.The type of value used depends solely on the property to which it is assigned.selector { property: value; }
Markup DocumentsWhere to put CSS Rules
Where to put CSS RulesYou can set up rules in three places:InlineEmbeddedExternal
InlineIn an XHTML tag within the body of your document, to affect a single tag in the document. This type of rule is often referred to as an inline rule.<p style=“color: red;”>This is a paragraph displayed in red.</p>
EmbeddedIn the head of a document, to affect a single Web page.This type of rule is called an embedded rule.<style> p { color: red; }</style>
ExternalIn an external document that is then linked or imported into your XHTML document(s), to affect an entire Web site.This type of rule is called an external rule.# STYLESHEET: screen.cssp {color: red;}
Where to put CSS RulesThe position of a rule in relationship to the document and other CSS rules determines the scope of the rule’s effect on the document.
Markup DocumentsCSS and Markup languages
CSS and Markup LanguagesCSS is not XHTML; it simply means that XHTML now relies on the capabilities of CSS.The W3C’s thinking is this:Style sheets should be used to “relieve XHTML of the responsibilities of presentation.”

More Related Content

Markup Documents

  • 3. What is HTML?HTML is the language websites are written in.The letters stand for HyperText Markup Language.It might sound complicated, but it’s actually pretty easy to understand.
  • 4. What is HTML?HTML has two essential features:HypertextUniversality
  • 5. What is HTML?HyperTextHyperText means you can create a link in a Web page that leads the visitor to any other web page or to practically anything else on the internet.It means that information on the Web can be accessed from many different directions.
  • 6. What is HTML?Universality:Universality means that because HTML documents are saved as Text Only files, virtually any computer can read a Web page.It doesn’t matter if your visitors have Macintosh or Windows machines, or whether they’re on a Unix box or even a handheld device like a Palm.The Web is open to all.
  • 7. Markup DocumentsHTML VS. XHTML: What should you use?
  • 8. HTML VS. XHTMLXHTML stands for eXtensible HyperText Markup Language; it is the simplicity of HTML with the power and flexibility of XML and became the perfect foundation for CSS.
  • 9. HTML VS. XHTMLXHTML is a great improvement over HTML.It’s stronger, more flexible, more powerful, more likely to be supported in the future, and can be expanded to fit any need.However, there are times when you just need to publish a web document without having to stress over every last quotation mark.
  • 10. Markup DocumentsMarkup: Elements, Attributes and Values
  • 11. MarkupXHTML is an ingenious system of including information about the content right in a text document.This information - called markup, accounting for the m in XHTML - can include formatting instructions as well as details about the relationships between parts of the document.However, because the markup itself is comprised chiefly of text, the document is practically universally accessible.
  • 12. MarkupXHTML has three principle types of markup:ElementsAttributesValues.
  • 13. ElementsElements are like little labels that identify and structure the different parts of a Web page.Some elements have one or more attributes, which further describe the purpose and content, if any, of the element.<hr /><tdcolspan=“3”>February</td><imgsrc=“blueflax.jpg” width=“300” />
  • 14. ElementsElements can contain text and/or other elements, or they can be empty. A non-empty element consists of an opening tag, the content, and a closing tag.<hr /><tdcolspan=“3”>February</td><imgsrc=“blueflax.jpg” width=“300” />
  • 15. ElementsAn empty element looks like a combination opening and closing tag, with an initial less than sign, the element’s name followed by any attributes it may have, a space, a forward slash, and the final greater than sign.<hr /><td colspan=“3”>February</td><imgsrc=“blueflax.jpg” width=“300” />
  • 16. Attributes and ValuesAttributes contain information about the data in the document, as opposed to being that data itself.Some attributes can accept any value at all, others are more limited.Perhaps the most common are those that accept enumerated or predefined values.In other words, you must select a value from a standard list of choices.<hr /><td colspan=“3”>February</td><imgsrc=“blueflax.jpg” width=“300” />
  • 17. Attributes and ValuesMany attributes require a number or percentage for their value, particularly those describing size and length.A numeric value never includes units.Where units are applicable, as in the height of text or the width of an image, they are understood to be pixels.<hr /><td colspan=“3”>February</td><imgsrc=“blueflax.jpg” width=“300” />
  • 18. Attributes and ValuesThe attributes controlling colour can contain values that are either a colour name or a hexadecimal representation of the red, green, and blue content of the colour.Some attributes reference other files and thus must contain values in the form of a URL, or Uniform Resource Locator, a file’s unique address on the Web.<p color=“yellow”><p color=“#FFFFFF”><a href=“test.html”>Click Here</a><a href=“http://www.google.com/”>Google Search</a>
  • 19. Block VS. InlineAn element can be block-level or inline.If it is block-level, it will always be displayed on a new line, like a new paragraph in a book.If it is inline, it will be displayed in the current line, like the next word in a paragraph.Block Level Elements<div> <p> <table>Inline Elements<span> <a>
  • 20. Block VS. InlineBlock-level elements are considered the bigger structural pieces of your Web page, and as such can usually contain other block-level elements, inline elements, and text. Inline elements, in contrast, can generally only contain other inline elements and text.Block Level Elements<div> <p> <table>Inline Elements<span> <a>
  • 21. Parents and ChildrenIf one element contains another, it is considered to be the parent of the enclosed, or child element.Any element contained in the child element is considered descendants of the outer, parent element.You can actually create a family tree of a Web page that both shows the hierarchical relationships between each element on the page and uniquely identifies each element.<div> <p></p> <p> <a></a> </p></div>
  • 22. Parents and ChildrenThis structure is a key feature of HTML code and facilitates adding style to the elements and applying JavaScript effects to them.<div> <p></p> <p> <a></a> </p></div>
  • 23. Parents and ChildrenIt is important to note that when elements contain other elements, each element must be properly nested and is fully contained within its parent.Whenever you use a closing tag, it should correspond to the last unclosed opening tag.In other words, first open A then open B, then close B and then close A.<div> <p></p> <p> <a></a> </p></div>
  • 25. CSSMost word processors today include a way to make changes to text not just word by word, but throughout an entire document using styles.Styles collect all the different properties, such as font family, size, and colour that you want to apply to similar types of text - titles, headers, captions, and so on - and give these groups of properties a common name.
  • 26. CSSCSS brings to the Web the same convenience for setting styles that’s available in one central location to affect the appearance of a particular XHTML tag on a single Web page or across an entire Web site.Although CSS works with XHTML, it is not XHTML. Rather, CSS is a separate code that enhances the abilities of XHTML, by allowing you to redefine the way that existing tags display their content.
  • 28. Types of CSS RulesThe best thing about Cascading Style Sheets is that they are amazingly simple to set up.They don’t require plug-ins or fancy software - just text files with rules.A CSS rule specifies the XHTML to which a style or definition applies, and then defines the style, or how the selected XHTML should behave in the browser window.You can set up rules to tell a specific XHTML tag how to display its content, or you can create generic rules and then apply them to tags at your discretion.
  • 29. Types of CSS RulesThe three most common selectors or ways to select the XHTML to which a style applies, are:XHTML SelectorClass SelectorID Selector
  • 30. XHTML SelectorThe XHTML element’s name is used as a selector to redefine the associated XHTML tagdiv { ... }p { ... }a { ... }
  • 31. Class SelectorA class is a “free agent” that can be applied to an XHTML tag.You can name the class almost anything.Because it can be applied to multiple XHTML tag, a class is the most versatile type of selector.class.menuItem.clear
  • 32. ID SelectorMuch like classes, IDs can be applied to any XHTML tag, but only once on a given page to a particular tag to create an object for use with a JavaScript function#ID#navigation#footer
  • 34. The Parts of a CSS RuleAll CSS rules consist of a selector and a declaration block. The declaration block, which is surrounded by curly braces, is made up of declarations, which are pairs of properties and values separated by a semicolon.
  • 35. SelectorsSelectors start each rule, appearing before the left curly braceThe selector can be a XHTML tag selector, a class, an ID, or a combination of theseselector { property: value; }
  • 36. PropertiesPropertiesidentify the style that is being defined.There are several dozen properties, each responsible for an aspect of the page content’s behaviour and appearance.selector { property: value; }
  • 37. ValuesValues are assigned to a property to define its nature. A value can be a keyword such as “yes” or “no”, a number, or a percentage.The type of value used depends solely on the property to which it is assigned.selector { property: value; }
  • 38. Markup DocumentsWhere to put CSS Rules
  • 39. Where to put CSS RulesYou can set up rules in three places:InlineEmbeddedExternal
  • 40. InlineIn an XHTML tag within the body of your document, to affect a single tag in the document. This type of rule is often referred to as an inline rule.<p style=“color: red;”>This is a paragraph displayed in red.</p>
  • 41. EmbeddedIn the head of a document, to affect a single Web page.This type of rule is called an embedded rule.<style> p { color: red; }</style>
  • 42. ExternalIn an external document that is then linked or imported into your XHTML document(s), to affect an entire Web site.This type of rule is called an external rule.# STYLESHEET: screen.cssp {color: red;}
  • 43. Where to put CSS RulesThe position of a rule in relationship to the document and other CSS rules determines the scope of the rule’s effect on the document.
  • 44. Markup DocumentsCSS and Markup languages
  • 45. CSS and Markup LanguagesCSS is not XHTML; it simply means that XHTML now relies on the capabilities of CSS.The W3C’s thinking is this:Style sheets should be used to “relieve XHTML of the responsibilities of presentation.”