1. HTML & CSS

2. HTML Block | Inline elements Visual | Structural markup
Objectives
HTML Block | Inline elements
Visual | Structural markup
Project portfolio page

3. Block boxes and inline boxes
HTML create boxes
Block boxes and inline boxes—that correspond to the two types of tags—
Inline tags
Block-level tags.

4. Block boxes and inline boxes
Inline tags don’t create a break before or after element.
<span>, <em>, <strong> <cite>, <abbr>,<kbd>
<q>
A block-level tags create a break before and after the element.
<p> <h>,<ol>,<div>, etc.

5. InLine Block Block boxes and inline boxes
<p> I am seeking funds to assist me in further developing an <em>intelligent online tool</em> that provides semantic as well as temporal analyses of online educational conversations. </p>
<p> I am seeking funds to assist me in further developing an intelligent online tool that provides semantic as well as temporal analyses of online educational conversations. </p>

6. Block boxes and inline boxes
I am seeking funds to assist me in further developing an intelligent online tool that provides semantic as well as temporal analyses of online educational conversations.

7. Structural: Block-Level Elements
p – paragraphs
h1, h2,…,h6 – level 1, 2,…,6 headers
blockquote – long quotations
div – arbitrary division
<section><article><nav><aside>
OL, UL, DL - list
<table> for tabular data

8. Structural: Heading Levels
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

9. <h1> Introduction</h1>
In the summer of 2009, I developed Mapping Temporal Relations of Discussions Software (MTRDS) as a tool to analyze the temporal aspects of online course discussions. This Web-based prototype imports discussion files from a course management system and diagrams the temporal aspects of conversations. From the diagrams, one can observe the general time and date of discussion activity and individual patterns of interactivity.
I am seeking funds to assist me in further developing an intelligent online tool that provides semantic as well as temporal analyses of online educational conversations.
<h2> Educational Conversations</h2>

10. Making Links

11. Linking to Another Document
Null links
<a href =“#”>This is a NULL link</a>

12. Linking to Another Document
<a href =“document.htm”>Text that acts as the link</a>
This anchor links to a document in the same folder as the current web page.

13. Linking to a Specific Section of A Document
<a href=“#SectionTitle”>Text that acts as the link</a>
<a name=“SectionTitle”> </a>
This anchor links to a specific section of the current page.

14. Linking to a Specific Section of Another Document
<a href=“document.htm#SectionTitle”>Text that acts as the link</a>
<a name=“SectionTitle”> </a>
This anchor links to a specific section of the document.htm page, which is in the same folder and the current web page.

15. Linking Another Document
<a href=“books/document.htm”>Read Books</a>
This anchor links to the document.htm page, which is in a folder titled books.

16. Linking to a Another Site
<a href=“ News</a>
This anchor links to an external web site.

17. Tutorials

18. Cascading Style Sheets
CSS

19. Cascading Style Sheets
What are style sheets?
HTML was not meant to specify appearance for Web pages.
Tags suitable for marking up scientific papers.

20. Scientific papers Scientific papers
HTML is for structure
Scientific papers
Scientific papers

21. Cascading Style Sheets
What are style sheets?
CSS (Cascading Style Sheets) allows you to specify more information about the appearance of elements on a Web page.
Zen Garden

23. Cascading Style Sheets
A style sheet is a set of one or more rules that apply to HTML elements or document.
h1 { color: #000000; }

24. <p style="color: #C7AA8D;”> In the summer of 2009, I developed Mapping Temporal Relations of Discussions Software (MTRDS) as a tool to analyze the temporal aspects of online course discussions. This Web-based prototype imports discussion files from a course management system and diagrams the temporal aspects of conversations. From the diagrams, one can observe the general time and date of discussion activity and individual patterns of interactivity. </p>
<p style="color: blue;”> I am seeking funds to assist me in further developing an intelligent online tool that provides semantic as well as temporal analyses of online educational conversations. </p>

25. Cascading Style Sheets
Why use styles?
Update the look of a Web site by changing a single document.
Keep content/structure separate from styling.

26. External Styles
<link rel="styleSheet" type"text/css" href="styles.css">
Make changes from a single document
Changes multiple documents
page2.htm
page1.htm
page3.htm
index.htm
Style.css
page4.htm
page7.htm
page5.htm
page6.htm

27. Cascading Style Sheets
History

28. CSS Level 1 – CSS1 First version of CSS (CSS Level 1 - CSS1) in 1996.
Included properties for font, color, and spacing instructions to page elements.
Lack of browser support prevented widespread use of CSS.

29. CSS2 CSS Level 2 (CSS2) released in 1998.
Added positioning properties allowed CSS to be used for page layout.

30. CSS2
CSS Level 2, Revision 1 (CSS2.1) minor adjustments to CSS2 and is currently a working draft or a Candidate Recommendation (W3C).

31. CSS2.1 and CSS3 CSS 2.1 builds on CSS2 which builds on CSS1.
CSS 2.1 is derived from and will replace CSS2.
CSS3 specification – Working draft

32. CSS
Most browsers support majority of CSS1, CSS2, and CSS2.1 specifications.
Some browsers already support features from CSS Level 3 (CSS3) - still in development.
Source :

33. Ways to Include styles in documents

34. Ways to Include styles in documents
Inline styles
<h1 style="color: #C7AA8D;">Heading 1</h1>
Embedded
External

35. Internal Style Sheets: Embedded
<head> <style type="text/css“> h1 { color : #C0C0C0; } font-family: Arial; font-size: 1.5em; } p { font-size: small; font-family: sans-serif; } </style> </head>

36. External Style Sheets | Linked with HTML | 1 or more sheets
<head>
<link rel="stylesheet" type="text/css" href=“myStylesA.css“ />
<link rel="stylesheet" type="text/css" href=“myStylesB.css“ />
</head>
rel="stylesheet" | identifies the type of link, link to a style sheet.
type="text/css" tells browser what type of data, a text file with CSS.

37. Rules, Selectors, Declarations

38. CSS Grammar CSS - one or more style instructions (called Rules).
Rules describe how elements get displayed.
h1 { color: green; } or h1 {color : rgb(255, 0,0);}
p { font-size: small; font-family: sans-serif; }

39. p { font-family: sans-serif; }
Style sheet | Rules
Rule
p { font-family: sans-serif; }

40. Rule p { font-size: small; font-family: sans-serif; }
Style sheet | Rules
Rule
Can be written this way
p { font-size: small;
font-family: sans-serif; }

41. More about Rules | Selectors
h1 { color : #C0C0C0; }
Rule

42. h1 {color : #c0c0c0;} The Rule Rule Selector Declaration
(What to format)

43. h1 { color : #c0c0c0; font-family : Arial; font-size : 2em; } The Rule
Selector
Declaration block

44. h1 { color : #C0C0C0; } Property Value The Declaration
Declaration - two parts separated by a colon:
Property - part before the colon
Value - part after the colon
h1 { color : #C0C0C0; }
Property
Value

45. The Declaration h1 { color : #c0c0c0; font-size : 2em; }
Semicolon separates declarations
h1 { color : #c0c0c0;
font-size : 2em; }
p { font-family : Arial;
Colon separates property and values
Brackets distinguish declarations | rules

46. Types of selectors

47. Types of selectors Tag or HTML Selectors: Page-Wide Styling
Class Selectors: Pinpoint Control
ID Selectors: Specific page sections
Group Selectors

48. Types of selectors | HTML | Tag
Tag selector
h1 {color : #c0c0c0;}
body {background-color : #FFFFFF;}
p {padding : 10px;}

49. Types of selectors | Classes
Class selector
.mytext {font-family: Verdana; font-size: 14px;}
<p class=“mytext”>Hello World</p>
<span class=“mytext”>Learning CSS</span>

50. #banner { background-color : #FF00FF;}
Types of selectors | ID
ID selectors identify:
Major sections
Configured with #idname
#banner { background-color : #FF00FF;}
<div id=“banner”> </div>

51. Types of selectors | ID <h1 id=“banner”> Hello world!
Creates a rule for an id titled “banner”.
Red, large, italic font.
Applies to ID “banner”
<style type="text/css">
#banner { color : #FF0000;
font-size:2em;
font-style: italic; }
</style>
<h1 id=“banner”>
Hello world!
</h1>

52. Combining Rules | Group Selectors
h1 { color : #F1CD33; }
h2 { color : #F1CD33; }
h3 { color : #F1CD33; }
h4 { color : #F1CD33; }
h5 { color : #F1CD33; }
h6 { color : #F1CD33; } OR
Groups selector
h1, h2, h3, h4, h5, h6 { color : #F1CD33; }