Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 1 DHTML & CSS Tutorial 6
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering2 DHTML – Intro(1) ► Dynamic Hypertext Markup Language ► Combination of technologies to make Web pages dynamic ► Not a standard ► Marketing Term used by Microsoft and Netscape
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering3 DHTML – Intro(2) ► Scripting Language e.g. JavaScript, VBScript ► Incompatible Microsoft Internet Explorer DHTML Netscape DHTML ► Object Model
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering4 DHTML – Object Model window document history navigator applets all anchors body embeds forms filters images links plugins styleSheets scripts location screen event document plugins object collection Key frames
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering5 CSS – Intro ► Cascading Style Sheets ► W3C Recommendation ► Specify the presentation of elements on a Web page separately from the structure of the document ► XHTML, Dreamweaver
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering6 CSS - Basics <html><head><title>Testing</title></head><body> This is Testing This is Testing </body></html>
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering7 CSS – Inline Styles <html> Inline Styles Inline Styles <body> This is Testing, using CSS This is Testing, using CSS </body></html>
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering8 CSS – Multiple Properties <html> Inline Styles Inline Styles <body> This is Testing, using CSS This is Testing, using CSS </body></html>
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering9 CSS – List of Properties Properties Options / Example Color Blue, #8000ff Font-size pt, in, cm, mm, pc, em, ex Font-family Arial, sans-serif Background-color Green, #0000ff Text-decoration None, overline, underline, line-through Font-weight Normal, bold, bolder, 300 Margin-left pt, in, cm, mm, pc, em, ex Text-indent
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering10 CSS – Embedded Style Sheets <html> Embedded Style Sheets Embedded Style Sheets em { background-color: #8000ff } </style><body> This is Testing, using CSS This is Testing, using CSS </body></html>
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering11 CSS – External Style Sheets Ex5.html<html> Inline Styles Inline Styles </head><body><p> CUHK Homepage CUHK Homepage </p></body></html>styles.css a { font-weight: bold }
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering12 CSS – Brief Summary Three types of Style Sheets 1. Inline 2. Embedded 3. External
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering13 More about CSS(1) <html> More about CSS More about CSS.p1 { color : blue }.p2 { color : green; font-weight : bolder } a.nodec { background-color : red } a:hover { font-size : 30pt } </style></head><body> This text is blue This text is blue This text is green and bold This text is green and bold This text is normal This text is normal This is a hyperlink, with red in background. When the mouse cursor is over me, the font size will be larger This is a hyperlink, with red in background. When the mouse cursor is over me, the font size will be larger </body></html>
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering14 More about CSS(1)
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering15 More about CSS(2) <html> More about CSS More about CSS.underlined { text-decoration: underline } ul { background-color : green; color : yellow} ul ul { background-color : blue } </style></head><body> The text at the end is underline The text at the end is underline <ul><li>Milk</li><li>Bread<ul> White Bread White Bread Rye Bread Rye Bread </ul></ul></body></html>
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering16 More about CSS(3) ► Positioning Elements Position: absolute/relative Top, left : px … Z-index : 1 ► Text Flow & Box Model Margin-right/left/top/bottom : px … Border-width/style/colorPadding-top/right/left/bottom
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering17 CSS – Brief Summary ► Class ► Pseudoclass ► Span ► Inheritance ► Other (Position Elements, Text flow, Box Model)
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering18 CSS - Cascading Order ► In the order of specificity The child styles are more specific than the styles for that child ’ s parent Eg. ul ul is more specific than ul ► In the same specificity, the order will be: External Style Sheets (lower priority) Embedded Style Sheets Inline Style Sheets (the highest priority)
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering19 CSS - Dreamweaver
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering20 CSS – User Style Sheet
Tutorial 6 By SamINE 1020 Introduction to Internet Engineering21 CSS - Reference Internet & World Wide Web How to program 2 nd Edition, Deitel Deitel Nieto Chapter 6 Cascading Style Sheets