Markup Documents

1,697 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,697
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Markup Documents

  1. 1. Website Fundamentals<br />Markup Documents<br />
  2. 2. Markup Documents<br />What is HTML?<br />
  3. 3. What is HTML?<br />HTML is the language websites are written in.<br />The letters stand for HyperText Markup Language.<br />It might sound complicated, but it’s actually pretty easy to understand.<br />
  4. 4. What is HTML?<br />HTML has two essential features:<br />Hypertext<br />Universality<br />
  5. 5. What is HTML?<br />HyperText<br />HyperText 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.<br />It means that information on the Web can be accessed from many different directions.<br />
  6. 6. What is HTML?<br />Universality:<br />Universality means that because HTML documents are saved as Text Only files, virtually any computer can read a Web page.<br />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.<br />The Web is open to all.<br />
  7. 7. Markup Documents<br />HTML VS. XHTML: What should you use?<br />
  8. 8. HTML VS. XHTML<br />XHTML 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.<br />
  9. 9. HTML VS. XHTML<br />XHTML is a great improvement over HTML.<br />It’s stronger, more flexible, more powerful, more likely to be supported in the future, and can be expanded to fit any need.<br />However, there are times when you just need to publish a web document without having to stress over every last quotation mark.<br />
  10. 10. Markup Documents<br />Markup: Elements, Attributes and Values<br />
  11. 11. Markup<br />XHTML is an ingenious system of including information about the content right in a text document.<br />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.<br />However, because the markup itself is comprised chiefly of text, the document is practically universally accessible.<br />
  12. 12. Markup<br />XHTML has three principle types of markup:<br />Elements<br />Attributes<br />Values.<br />
  13. 13. Elements<br />Elements are like little labels that identify and structure the different parts of a Web page.<br />Some elements have one or more attributes, which further describe the purpose and content, if any, of the element.<br />&lt;hr /&gt;<br />&lt;tdcolspan=“3”&gt;February&lt;/td&gt;<br />&lt;imgsrc=“blueflax.jpg” width=“300” /&gt;<br />
  14. 14. Elements<br />Elements can contain text and/or other elements, or they can be empty. <br />A non-empty element consists of an opening tag, the content, and a closing tag.<br />&lt;hr /&gt;<br />&lt;tdcolspan=“3”&gt;February&lt;/td&gt;<br />&lt;imgsrc=“blueflax.jpg” width=“300” /&gt;<br />
  15. 15. Elements<br />An 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.<br />&lt;hr /&gt;<br />&lt;td colspan=“3”&gt;February&lt;/td&gt;<br />&lt;imgsrc=“blueflax.jpg” width=“300” /&gt;<br />
  16. 16. Attributes and Values<br />Attributes contain information about the data in the document, as opposed to being that data itself.<br />Some attributes can accept any value at all, others are more limited.<br />Perhaps the most common are those that accept enumerated or predefined values.<br />In other words, you must select a value from a standard list of choices.<br />&lt;hr /&gt;<br />&lt;td colspan=“3”&gt;February&lt;/td&gt;<br />&lt;imgsrc=“blueflax.jpg” width=“300” /&gt;<br />
  17. 17. Attributes and Values<br />Many attributes require a number or percentage for their value, particularly those describing size and length.<br />A numeric value never includes units.<br />Where units are applicable, as in the height of text or the width of an image, they are understood to be pixels.<br />&lt;hr /&gt;<br />&lt;td colspan=“3”&gt;February&lt;/td&gt;<br />&lt;imgsrc=“blueflax.jpg” width=“300” /&gt;<br />
  18. 18. Attributes and Values<br />The 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.<br />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.<br />&lt;p color=“yellow”&gt;<br />&lt;p color=“#FFFFFF”&gt;<br />&lt;a href=“test.html”&gt;Click Here&lt;/a&gt;<br />&lt;a href=“http://www.google.com/”&gt;Google Search&lt;/a&gt;<br />
  19. 19. Block VS. Inline<br />An element can be block-level or inline.<br />If it is block-level, it will always be displayed on a new line, like a new paragraph in a book.<br />If it is inline, it will be displayed in the current line, like the next word in a paragraph.<br />Block Level Elements<br />&lt;div&gt; &lt;p&gt; &lt;table&gt;<br />Inline Elements<br />&lt;span&gt; &lt;a&gt;<br />
  20. 20. Block VS. Inline<br />Block-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. <br />Inline elements, in contrast, can generally only contain other inline elements and text.<br />Block Level Elements<br />&lt;div&gt; &lt;p&gt; &lt;table&gt;<br />Inline Elements<br />&lt;span&gt; &lt;a&gt;<br />
  21. 21. Parents and Children<br />If one element contains another, it is considered to be the parent of the enclosed, or child element.<br />Any element contained in the child element is considered descendants of the outer, parent element.<br />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.<br />&lt;div&gt;<br /> &lt;p&gt;&lt;/p&gt;<br /> &lt;p&gt;<br /> &lt;a&gt;&lt;/a&gt;<br /> &lt;/p&gt;<br />&lt;/div&gt;<br />
  22. 22. Parents and Children<br />This structure is a key feature of HTML code and facilitates adding style to the elements and applying JavaScript effects to them.<br />&lt;div&gt;<br /> &lt;p&gt;&lt;/p&gt;<br /> &lt;p&gt;<br /> &lt;a&gt;&lt;/a&gt;<br /> &lt;/p&gt;<br />&lt;/div&gt;<br />
  23. 23. Parents and Children<br />It is important to note that when elements contain other elements, each element must be properly nested and is fully contained within its parent.<br />Whenever you use a closing tag, it should correspond to the last unclosed opening tag.<br />In other words, first open A then open B, then close B and then close A.<br />&lt;div&gt;<br /> &lt;p&gt;&lt;/p&gt;<br /> &lt;p&gt;<br /> &lt;a&gt;&lt;/a&gt;<br /> &lt;/p&gt;<br />&lt;/div&gt;<br />
  24. 24. Markup Documents<br />CSS<br />(Cascading style Sheets)<br />
  25. 25. CSS<br />Most word processors today include a way to make changes to text not just word by word, but throughout an entire document using styles.<br />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.<br />
  26. 26. CSS<br />CSS 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.<br />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.<br />
  27. 27. Markup Documents<br />Types of CSS Rules<br />
  28. 28. Types of CSS Rules<br />The best thing about Cascading Style Sheets is that they are amazingly simple to set up.<br />They don’t require plug-ins or fancy software - just text files with rules.<br />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.<br />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.<br />
  29. 29. Types of CSS Rules<br />The three most common selectors or ways to select the XHTML to which a style applies, are:<br />XHTML Selector<br />Class Selector<br />ID Selector<br />
  30. 30. XHTML Selector<br />The XHTML element’s name is used as a selector to redefine the associated XHTML tag<br />div { ... }<br />p { ... }<br />a { ... }<br />
  31. 31. Class Selector<br />A class is a “free agent” that can be applied to an XHTML tag.<br />You can name the class almost anything.<br />Because it can be applied to multiple XHTML tag, a class is the most versatile type of selector<br />.class<br />.menuItem<br />.clear<br />
  32. 32. ID Selector<br />Much 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<br />#ID<br />#navigation<br />#footer<br />
  33. 33. Markup Documents<br />The parts of a CSS rule<br />
  34. 34. The Parts of a CSS Rule<br />All CSS rules consist of a selector and a declaration block. <br />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.<br />
  35. 35. Selectors<br />Selectors start each rule, appearing before the left curly brace<br />The selector can be a XHTML tag selector, a class, an ID, or a combination of these<br />selector { property: value; }<br />
  36. 36. Properties<br />Propertiesidentify the style that is being defined.<br />There are several dozen properties, each responsible for an aspect of the page content’s behaviour and appearance.<br />selector { property: value; }<br />
  37. 37. Values<br />Values are assigned to a property to define its nature. <br />A value can be a keyword such as “yes” or “no”, a number, or a percentage.<br />The type of value used depends solely on the property to which it is assigned.<br />selector { property: value; }<br />
  38. 38. Markup Documents<br />Where to put CSS Rules<br />
  39. 39. Where to put CSS Rules<br />You can set up rules in three places:<br />Inline<br />Embedded<br />External<br />
  40. 40. Inline<br />In an XHTML tag within the body of your document, to affect a single tag in the document. <br />This type of rule is often referred to as an inline rule.<br />&lt;p style=“color: red;”&gt;This is a paragraph displayed in red.&lt;/p&gt;<br />
  41. 41. Embedded<br />In the head of a document, to affect a single Web page.<br />This type of rule is called an embedded rule.<br />&lt;style&gt;<br /> p { color: red; }<br />&lt;/style&gt;<br />
  42. 42. External<br />In an external document that is then linked or imported into your XHTML document(s), to affect an entire Web site.<br />This type of rule is called an external rule.<br /># STYLESHEET: screen.css<br />p {<br />color: red;<br />}<br />
  43. 43. Where to put CSS Rules<br />The position of a rule in relationship to the document and other CSS rules determines the scope of the rule’s effect on the document.<br />
  44. 44. Markup Documents<br />CSS and Markup languages<br />
  45. 45. CSS and Markup Languages<br />CSS is not XHTML; it simply means that XHTML now relies on the capabilities of CSS.<br />The W3C’s thinking is this:<br />Style sheets should be used to “relieve XHTML of the responsibilities of presentation.”<br />

×