1. Website Fundamentals Markup Documents

2. Markup Documents What is HTML?

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: Hypertext Universality

5. What is HTML? HyperText 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. 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 Documents HTML VS. XHTML: What should you use?

8. HTML VS. XHTML 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.

9. HTML VS. XHTML XHTML 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 Documents Markup: Elements, Attributes and Values

11. Markup XHTML 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. Markup XHTML has three principle types of markup: Elements Attributes Values.

13. Elements Elements 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. Elements Elements 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. Elements 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. <hr /> <td colspan=“3”>February</td> <imgsrc=“blueflax.jpg” width=“300” />

16. Attributes and Values Attributes 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 Values Many 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 Values 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. 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. Inline An 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. Inline 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. 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 Children If 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 Children This 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 Children It 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>

24. Markup Documents CSS (Cascading style Sheets)

25. CSS Most 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. CSS 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. 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.

27. Markup Documents Types of CSS Rules

28. Types of CSS Rules The 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 Rules The three most common selectors or ways to select the XHTML to which a style applies, are: XHTML Selector Class Selector ID Selector

30. XHTML Selector The XHTML element’s name is used as a selector to redefine the associated XHTML tag div { ... } p { ... } a { ... }

31. Class Selector A 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 Selector 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 #ID #navigation #footer

33. Markup Documents The parts of a CSS rule

34. The Parts of a CSS Rule All 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. Selectors Selectors start each rule, appearing before the left curly brace The selector can be a XHTML tag selector, a class, an ID, or a combination of these selector { property: value; }

36. Properties Propertiesidentify 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. Values Values 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 Documents Where to put CSS Rules

39. Where to put CSS Rules You can set up rules in three places: Inline Embedded External

40. Inline In 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. Embedded In 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. External In 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.css p { color: red; }

43. Where to put CSS Rules 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.

44. Markup Documents CSS and Markup languages

45. CSS and Markup Languages CSS 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.”