HTML & CSS

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

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.

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.

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>

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.

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

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>

<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>

Making Links

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

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.

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.

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.

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.

Linking to a Another Site <a href=“http://www.cnn.com”>Read News</a> This anchor links to an external web site.

Tutorials http://www.w3schools.com/html/

Cascading Style Sheets CSS

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

Scientific papers Scientific papers HTML is for structure Scientific papers Scientific papers

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

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

<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>

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

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

Cascading Style Sheets History

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.

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

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

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

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 : www.w3.org/Style/CSS.

Ways to Include styles in documents

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

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>

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.

Rules, Selectors, Declarations

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; }

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

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; }

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

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

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

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

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

Types of selectors

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

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

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>

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

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>

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; }