Presentation is loading. Please wait.

Presentation is loading. Please wait.

Review 1 csc242 – web programming.

Published byDora Walton Modified over 7 years ago

Similar presentations

Presentation on theme: "Review 1 csc242 – web programming."— Presentation transcript:

1 Review 1 csc242 – web programming

2 World Wide Web Two inventions provided standardization for information sharing Both in content formatting and transmission Developed by Tim Berners-Lee of CERN (European Nuclear Research Organization) HTML HyperText Markup Language Enables hyperlinked text documents HTTP HyperText Transfer Protocol Communication protocol for sending info across the web

3 Web Technology Web is client/server technology Client (web browser)
requests resources from web servers Resource – any object retrieved from a web server, such as an XHTML document, image, video, audio, Database information, etc. Web servers Service the request – provide content Use specialized software (apache, IIS)

4 XHTML XHTML derived from HTML Tag based
Based on XML (Extensible Markup Language) Tag based Must have both open and closing tags <xxx> and </xxx>, content is in between <xxx />, if no content is needed May contain “attributes” Syntax is: <xxx attribute1=“value1” attribute2=“value2”> Web page formatting (rendering) depends on tags Not the format of the html code itself

5 Some XHTML Tags (note: incomplete!)
<html> - main html tag <head> - html header section <body> - web page body <meta> - page keywords/description <h1> thru <h6> - six levels of headers <p> - paragraph <a> - create links with href attribute href, mailto: … <ol> <ul> - ordered, unordered lists <div> - division/section of code <span> - inline section of code <title> - page title <img> - image <hr /> - horizontal rule <br /> - break, new line Various table tags…

6 More XHTML Tags can have attributes Block vs. inline elements
<xxx attribute=“value” … One attribute is an id <xxx id=“something” … Can be linked in an anchor <a href=“#something” … Block vs. inline elements Block: starts a new line, takes up entire width (p, h#, div, …) Inline: no new line, only takes up what’s needed (span, a, img, …) Special characters &em; < © &del; ⊃ ⊂ &#num;

7 HTML Tables Tags for tables Some attributes
<caption> table caption <table> - create a table <thead> - table header <tfoot> - table footer <tbody> - table body <tr> - table row <th> - table header cell <td> - table data cell <(row|column)span> - merge Some attributes align width, border pixels or percent…

8 CSS – Cascading Style Sheets
XHTML defines a web page structure Items and placement CSS defines the appearance Purpose is to separate the structure from the presentation Note: Browsers have default settings than can be overridden!

9 CSS – three main approaches
inline style directives located with the items they affect embedded “style sheet” a style section included in the web page affects elements on just that page external “style sheet” separate file imported into a web page used to share appearance among pages Provide uniformity of appearance among pages in a web site

10 CSS Inline Style Style attribute is embedded in HTML tag
Syntax: style = “attribute1: value; attribute2: value2; …” Example: <p style = "font-size: 20pt; color: red”> Only affects that tag

11 CSS - Embedded defined with <style type=“text/css”> tag
when placed in <head> it applies to all matching elements in document type=“text/css” is MIME format (Multipurpose Internet Mail Extensions) Rules are placed in the style tag section, syntax is: ruleName { attribute1: value1, value2; attribute2: value } rules apply to specified tag or ccs selector types

12 CSS Selectors (see online examples)
Can be an explicit HTML tag .classname Invoked in an HTML tag with the class attribute <xxx class=“classname”… Can be tag specific a.nodec Comma separated to apply to multiple items h1, em { text-decoration: underline } Space separated for embedded items ul ul { font-size: .8em } :pseudoclass (like a:hover)

13 CSS External Style Sheet
CSS rules are placed in a separate file Invoked in the HTML file with a <link> tag <link rel=”stylesheet” type=”text/css” href=”styles.css” /> rel – specifies the relationship between the HTML and other doc type – MIME type style sheet href – URL for the referenced document

14 CSS Inheritance and Precedence
unspecified style elements are inherited from higher level object specificity lower level element styles override higher level definitions Precedence in the following order author (the page itself – person who wrote it) user (person viewing page) user agent (the browser)

15 Box Model and element positioning
All block-level XHTML are rendered based on a “Box Model” Can be controlled with CSS Boxes have (from outside in) margin, border, padding Border is around the element itself Border has a thickness margin defined the distance between the outside of the border and other external elements padding defines the distance between the inside of the border and internal content Positioning and the float element float removes the element from the normal placement flow Element can be “floated” right or left

16 Javascript Object-oriented, interpreted, programming (scripting) language Interpreted – no compilation step required Code is read, syntax checked, and executed line-by-line Language is “loosely typed” Variables must be declared BUT no there are no explicit variable types Declaration: var x1, x2 , x3; Variable type is inferred based on usage Type may change as program is executed (dynamically typed) Otherwise, language constructs generally follow C/C++ conventions

17 Javascript general constructs
var for variable declarations var x1, x2 , x3; Uninitialized variables have value undefined C/C++ constructs do, for, while, switch, if logical operators: && || ! 0/1 and empty non-empty strings evaluate to Boolean false/true for (i in object) - to loop over members of an object Functions defined with function keyword Local/global variables

18 Javascript Arrays Two ways to define: Associative Arrays:
var n = new Array(3); var n = [3]; Will grow automatically Can be multidimensional Initializing: var n = new Array (1, 2, 3, 4, 5); var n = [ 1, 2, 3, 4, 5 ]; Associative Arrays: Arbitrary array indicies capitals["China"] = "Beijing"; or define with JSON notation var population = { "Beijing": , "Moscow": , "Washington": };

19 Javascript Objects document object window object Date
document.write() and document.writeln() window object window.prompt (also window.alert() and window.confirm()) Date var d= new Date() many methods for getting/formatting dates and time Similar for Arrays X.length, X.sort(), etc…

20 More methods and functions
Methods for variables interpreted as strings indexof(), split(), join(), etc… For numbers X.toString() Global functions: encodeURI, eval, isFinite, isNaN, parseInt, parseFloat, decodeURI

Download ppt "Review 1 csc242 – web programming."

Similar presentations

Table, List, Blocks, Inline Style

Table, List, Blocks, Inline Style
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Today CSS HTML A project.

Today CSS HTML A project.
Lecture 5 Use Cases and Style Sheets

Lecture 5 Use Cases and Style Sheets
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.

© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:

Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
กระบวนวิชา 25 3208 CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.

กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
© 2010, Robert K. Moniot Chapter 5 CSS : Cascading Style Sheets 1.

© 2010, Robert K. Moniot Chapter 5 CSS : Cascading Style Sheets 1.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.

XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic CSS: Cascading Style Sheets.

Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic CSS: Cascading Style Sheets.
Cascading Style Sheets Controlling the Display Of Web Content.

Cascading Style Sheets Controlling the Display Of Web Content.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.

 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.

Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.

Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
Chapter 14 Introduction to HTML

Chapter 14 Introduction to HTML
Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction.

Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.

Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.

XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.

Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.

Similar presentations

Ads by Google