1. _ HTML, XHTML & CSS Sami Niemelä | sn@neocite.com Module 1: Introduction to digital media: Day 02

2. What is HTML? HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an.htm or.html file extension. An HTML file can be created using a simple text editor Module 1: Introduction to digital media: Day 02 Sami Niemelä | sn@neocite.com

3. Basic html file structure Title of page Hello world! This text is bold Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

4. Tags + elements HTML tags are used to mark-up HTML elements HTML tags are surrounded by the angle brackets HTML tags come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag. These have to be nested properly. The text between the start and end tags is the element content HTML tags are in general not case sensitive, but HTML 4.01 & XHTML specs require writing lowercase tags. Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

5. Tags & attributes HTML tags can have attributes that display aditional information foo bar Attributes can for example define a value to an element, identify it Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

6. Basic HTML elements Required document elements:,, Headings:... Paragraph: Line break Comment: HTML 4.01 Spec at http://www.w3.org/TR/html401/ Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

7. Text formatting Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

8. Hyperlinking Click ”target” - attribute defines where the link points target=”_blank” target=”_top” target=”_self” target=”frameName” etc Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

9. Hyperlinking cont’d Linking an image: Anchor tag... Go to the top Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

10. Frames Can be used to display more than one page at the time Can cause usability & accesibility issues Always remember -content Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

11. Frames Your browser does not handle frames! Enter the content here Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

12. Tables Designed to diplay tabular data but are commonly used also as a layout tool 100 200 300 Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

13. Tables cont’d Problem: table cells with no content are not displayed very well in most browsers. Solution: pixel.gif or Useful attributes: cellpadding cellspacing border, width, height Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

14. Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a problem; separating the diplay from the content itself External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files http://www.w3schools.com/css/demo_default.htm Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

15. CSS Cont’d Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a problem; separating the display from the content itself Usign CSS will save you a lot of work External Style Sheets are stored in CSS files http://www.w3schools.com/css/demo_default.htm Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

16. CSS Syntax The CSS syntax is made up of three parts: a selector, a property and a value: selector {property: value} p { text-align:center; color:red } Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

17. CSS Syntax Grouping: selector1, selector2, selector3 {property: value} h1,h2,h3,h4,h5,h6 { color: green } Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

18. CSS Syntax Class selector selector class {property: value}.class {property: value} p.right {text-align: right} p.center {text-align: center}... foo! bar! Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

19. What is XHTML? EXtensible HyperText Markup Language is aimed to replace HTML almost identical to HTML 4.01, exceptis a stricter and cleaner version of HTML XHTML is HTML defined as an XML application XHTML 1.0 became an official W3C Recommendation January 26, 2000. Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

20. XHTML vs HTML? XML is a markup language where everything has to be marked up correctly, which results in "well-formed" documents. XML was designed to describe data where HTML was designed to display data. XHTML combines the strenghts of XML & HTML while staying accesibl to current browsers Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

21. XHTML vs HTML? The Most Important Differences: XHTML elements must be properly nested XHTML documents must be well-formed Tag names must be in lowercase All XHTML elements must be closed, including the empty elements like Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com

22. XHTML vs HTML? Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden The id attribute replaces the name attribute The XHTML DTD defines mandatory elements http://www.w3schools.com/xhtml/xhtml_syntax.asp Module 1: Introduction to digital media: Sami Niemelä | sn@neocite.com