1. ECA 228 Internet/Intranet Design I Intro to Markup

2. ECA 228 Internet/Intranet Design I WYSIWYG limitations – need to tweak code – complex sites require more skills web pages are written with markup – display text – add graphics, sound, video

3. ECA 228 Internet/Intranet Design I HTML Document saved as text or ASCII final display is often browser dependent – approximate browser marketshare IE 89% NN 8% Opera 2% Others 1%

4. ECA 228 Internet/Intranet Design I Browser Dependency browser is the software that interprets and displays html at first there was no governing body to ensure standards proprietary tags W3C, World Wide Web Consortium, now maintains official HTML specifications

5. ECA 228 Internet/Intranet Design I Markup a webpage is made up of three different types of content: – text content – references: links, images, flash, etc – markup

6. ECA 228 Internet/Intranet Design I Markup cont … Three principle types of markup – elements: contained within non-empty elements This is a paragraph empty elements XHTML always requires a closing tag HTML closing tag is sometimes optional – attributes: information about a specific element – values: each attribute has a value

7. ECA 228 Internet/Intranet Design I Markup cont … every element has only certain attributes that can be applied to it XHTML: – all attributes must be in lower case – all values must be inside quotes content

8. ECA 228 Internet/Intranet Design I Block Level vs Inline block level elements always display on a new line in the browser a span of text, characters, or references within a block level element block level elements can contain: – other block level elements – inline elements inline elements cannot contain block level

9. ECA 228 Internet/Intranet Design I Nesting one element contained inside another parent element contains a child element elements are closed in the opposite order they are opened This text is bold. stuff

10. ECA 228 Internet/Intranet Design I White Space all white space is compressed into one space you can use spaces, tabs, returns to make your code easy to read

11. ECA 228 Internet/Intranet Design I File Names Rules – no spaces – assume file names are case sensitive – use a proper file extension.htm.html

12. ECA 228 Internet/Intranet Design I HTML vs XHTML  requires use of,, and tagsets  all tags must be closed, including empty elements  use lowercase  v alues must be surrounded by quotes  all values must be stated explicitly eg, noshade=”noshade”

13. ECA 228 Internet/Intranet Design I XHTML Advantages  consistent, well-structured code  code is free of non-standard tags  easier to update and edit  easier to use with css  easier to use with scripting  easier to use with a database  easier to adapt to other systems (hand held)  transition from HTML to XML  more likely to be cross-browser compatible  easier to meet accessibility standards

14. ECA 228 Internet/Intranet Design I HTML template My Title... everything you see in the browser goes here

15. ECA 228 Internet/Intranet Design I paragraph tags creates a new paragraph block level element attributes include – align = left | right | center | justify ***deprecated This is one paragraph. This is a second paragraph

16. ECA 228 Internet/Intranet Design I header tags creates a section header block level element browsers display as bold cannot include headers inside other headers

17. ECA 228 Internet/Intranet Design I header tags cont … n is a number from 1 to 6 - the lower the number, the larger the text ( in general, 24, 18, 14, 12, 10, 8 pixels ) attributes include – align = left | right | center | justify ***deprecated

18. ECA 228 Internet/Intranet Design I header tags cont … This is an h1 header. This is an h3 header. display as This is an h1 header. This is an h3 header.

19. ECA 228 Internet/Intranet Design I line break creates a manual line break within the text – does not add extra line as does empty element, no closing tag attributes include – clear = left | right | all ***deprecated – clear attribute indicates that any following text should not begin until the specified margin is clear ( no image is between it and the margin )

20. ECA 228 Internet/Intranet Design I center tag centers virtually any element on a web page deprecated displays as Welcome!

21. ECA 228 Internet/Intranet Design I bold tag makes text bold displays as This text is bold.

22. ECA 228 Internet/Intranet Design I strong tag generally makes text bold displays as This text is strong.

23. ECA 228 Internet/Intranet Design I italic tag italicizes text displays as This text is italic.

24. ECA 228 Internet/Intranet Design I emphasis tag generally italicizes text displays as This text is emphasized.

25. ECA 228 Internet/Intranet Design I underline tag underlines text deprecated use with caution displays as This text is underlined.

26. ECA 228 Internet/Intranet Design I big tag makes text bigger than surrounding text generally makes the text one typical font size larger than surrounding text cumulative, meaning if used more than once, text is 2 font sizes bigger although this tag is not deprecated, style sheets offer the developer much more control over text size

27. ECA 228 Internet/Intranet Design I big tag cont … displays as This text is bigger. This text is bigger still.

28. ECA 228 Internet/Intranet Design I small tag makes text smaller than surrounding text generally makes the text one typical font size smaller than surrounding text cumulative, meaning if used more than once, text is 2 font sizes smaller although this tag is not deprecated, style sheets offer the developer much more control over text size