Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web 2.0 Programming 1 © Tongji University, Computer Science and Technology. Web Web Programming Technology 2012.

Similar presentations


Presentation on theme: "Web 2.0 Programming 1 © Tongji University, Computer Science and Technology. Web Web Programming Technology 2012."— Presentation transcript:

1 Web 2.0 Programming 1 © Tongji University, Computer Science and Technology. Web Web Programming Technology 2012

2 Web 2.0 Programming 2 © Tongji University, Computer Science and Technology. Outline 1 2 HTML CSS 3 Web 4 5 Web2.0 6 Mashup 7 8 Web

3 Web 2.0 Programming 3 © Tongji University, Computer Science and Technology. Lecture 2 HTML and CSS Basics

4 Web 2.0 Programming 4 © Tongji University, Computer Science and Technology. Outline Basic HTML Web Standards Basic CSS Thinking…

5 Web 2.0 Programming 5 © Tongji University, Computer Science and Technology. Hypertext Markup Language (HTML) 1993: Initial official proposed description of HTML submitted to the IETFstandards group. 1995: HTML 2 becomes an official standard language by a publication called RFC : HTML 3.2 standardizes various features including forms, tables, image maps, and internationalization. 1997: HTML 4 is proposed by W3C standard body, adding style sheets, scripting, frames, embedding objects, internationalization, and accessibility for disabilities. 1999: HTML 4.01 the last major version of the language is published by W3C. A majority of pages on the Web today still use it as their started language : XHTML, HTML based on XML

6 Web 2.0 Programming 6 © Tongji University, Computer Science and Technology. Hypertext Markup Language (HTML) HTML coding convention: the structure of HTML is a tree. Responsibility of HTML languages HTML describes the content and structure Style Sheets (CSS) describes the appearance of the document Script (JavaScript) describes the behavior of the document index.html

7 Web 2.0 Programming 7 © Tongji University, Computer Science and Technology. Comments: comments to document your HTML file comments cannot be nested and cannot only have a – For explaining your designs and purposes to your colleagues, or even yourself sometime later, comment is a communicative approach. comment is not for browsers of end users, but for developers and designers.

8 Web 2.0 Programming 8 © Tongji University, Computer Science and Technology. Structure of XHTML page the header describes the page and the body contains the pages contents an HTML page is saved into a file ending with extension.html

9 Web 2.0 Programming 9 © Tongji University, Computer Science and Technology. Page title: describes the title of the Web page placed within the head of the page when bookmarking the page,it will be displayed in the Web browsers title bar

10 Web 2.0 Programming 10 © Tongji University, Computer Science and Technology. Page meta data: describe meta data of the Web page placed within the head of the page Chartset is import in practice, and we often use utf-8 other than English character encoding and decoding, where, when, and how?

11 Web 2.0 Programming 11 © Tongji University, Computer Science and Technology. Character Encoding manipulating and representing of characters in computer chartset · ASCII(basic 7b, extension 1B), · iso /latin-1(West Europe,1B · GB2312(2B, Simplified Chinese) · GBK(2B, S. & T. Chinese) · BIG5(2B, Traditional Chinese) · GB18030 (1,2,4B, Eastern Asia) · Unicode (650 languages)UTF-8 (1,2,3,4B, Chinese 3B) · UTF-16(2B, 4B, Chinese 2B) · UTF-32 (4B, future) · UCSUCS-2 (2B, comparable with UTF-16) · UCS-4 (4B, future)

12 Web 2.0 Programming 12 © Tongji University, Computer Science and Technology. Block and inline elements Block elements contains an entire large region of content · examples: paragraphs, lists, table cells · between block elements,the browser places a margin of whitespace for separation inline elements effects a small amount of content · examples: bold text, code fragments, images · many inline elements are allowed to appear on the same line by the browser · must be nested inside a block element

13 Web 2.0 Programming 13 © Tongji University, Computer Science and Technology. Paragraph: placed within the body of the page

14 Web 2.0 Programming 14 © Tongji University, Computer Science and Technology. Line break: forces a line break in the middle of a block element (inline) br should be immediately closed with />

15 Web 2.0 Programming 15 © Tongji University, Computer Science and Technology. Headings:,,… headings to separate major areas of the page (block) more heading examples

16 Web 2.0 Programming 16 © Tongji University, Computer Science and Technology. Semantic HTML If you find the following is shown too big in your web page, what will you do? make it from h1 to h3? Semantic HTML –Separation of concerns · choose tags based on the meaning of the content rather than its appearance · flexible and reusable

17 Web 2.0 Programming 17 © Tongji University, Computer Science and Technology. Horizontal rule: headings to separate major areas of the page (block) must immediately closed with />

18 Web 2.0 Programming 18 © Tongji University, Computer Science and Technology. More about HTML tags Attributes:some tags can contain additional information syntax: hell example: page2 some tags dont contain content; can be opened and closed in one tag syntax: example:

19 Web 2.0 Programming 19 © Tongji University, Computer Science and Technology. Links: links, or anchors, to other pages (inline) the href attribute can specify the destination URL can be absolute(to another Web site) or relative(to another page on this site) anchors are inline elements; must be placed in a block element such as p or h1

20 Web 2.0 Programming 20 © Tongji University, Computer Science and Technology. Links: its destination URL will be shown on the status bar when you hover a link in a browser be descriptive! Whats principle applied here? friendly you are friendly to your Web page readers by making the page descriptive, which in turn let them understand easier.

21 Web 2.0 Programming 21 © Tongji University, Computer Science and Technology. Images: displays a graphical image into the page (inline) the src attribute specifies the images URL XHTML also needs an alt attribute to describe the image

22 Web 2.0 Programming 22 © Tongji University, Computer Science and Technology. More about images if placed inside an anchor, the image will become a link the title attribute specifies an optional tooltip images/gandalf.jpg vs. /images/gandalf.jpg

23 Web 2.0 Programming 23 © Tongji University, Computer Science and Technology. Phrase elements:, em: emphasizes the text (usually rendered in italic) strong: strongly emphasizes the text (usually rendered in bold) Usually the tags must be properly nested for a valid page em vs. i, strong vs. B

24 Web 2.0 Programming 24 © Tongji University, Computer Science and Technology. Nesting tags Bad: tags must be correctly nested a closing tag should match the nearest opened tag the browser may render it correctly anyway, but it is invalid in XHTML

25 Web 2.0 Programming 25 © Tongji University, Computer Science and Technology. Unordered list:, ul represents a bulleted list of items (block) li represents a single item within the list (block)

26 Web 2.0 Programming 26 © Tongji University, Computer Science and Technology. More about unordered lists a list can contain other lists:

27 Web 2.0 Programming 27 © Tongji University, Computer Science and Technology. Ordered list: ol represents a numbered list of items (block)

28 Web 2.0 Programming 28 © Tongji University, Computer Science and Technology. Outline Basic HTML Web Standards Basic CSS Thinking…

29 Web 2.0 Programming 29 © Tongji University, Computer Science and Technology. Web standards Why use XHTML and Web standards? more rigid and structured language more interoperable across different web browsers more likely that our pages will display correctly in the future can be interchanged with other XML data SVG (graphics), MathML, MusicML, etc.SVGMathML MusicMLetc

30 Web 2.0 Programming 30 © Tongji University, Computer Science and Technology. XHTML versions XHTML 1.0(W3C Recommendation)Recommendation HTML 4.01 with XML syntax XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset XHTML 1.1 (W3C Recommendation)Recommendation module-based XHTML Ruby characters ( ˇ )(běijīng) XHTML 1.2 improved Semantic Web support through RDFaSemantic Web RDFa draft, not widely adopted XHTML 2.0 not backward compatible only in draft, not standard, and will be expired at the end of 2009 XHTML 5 part of HTML5 specification (ongoing)

31 Web 2.0 Programming 31 © Tongji University, Computer Science and Technology. XHTML 1.0 vs HTML 4.01 all tags must be closed all tags must be correctly nested all tag attributes must be enclosed in quotation marks the & character cant be used on its own, and use & instead tags are case-sensitive and must be all in lowercase attributes cannot be minimized any more XHTML document must start with new XML declaration different DOCTYPE declaration the tag requires an xmln sattribute

32 Web 2.0 Programming 32 © Tongji University, Computer Science and Technology. W3C XHTML Validator validator.w3.org check your HTML code to make sure it follows the official XHTML syntax more picky than the browser, which may render bad XHTML correctly

33 Web 2.0 Programming 33 © Tongji University, Computer Science and Technology. Outline Basic HTML Web Standards Basic CSS Thinking…

34 Web 2.0 Programming 34 © Tongji University, Computer Science and Technology. The bad way to produce styles tags such as b, i, u, and font are disabled in strict XHTML Why it is bad?

35 Web 2.0 Programming 35 © Tongji University, Computer Science and Technology. Cascading Style Sheets (CSS): CSS describes the appearance and layout can be embedded in HTML or placed into separate.css file (preferred)

36 Web 2.0 Programming 36 © Tongji University, Computer Science and Technology. Basic CSS rule syntax comments : /* …. */ one or more rules are consisted in a CSS file each rule starts with a selector that specifies an HTML element(s) and then applies style properties to them a selector of * selects all elements

37 Web 2.0 Programming 37 © Tongji University, Computer Science and Technology. CSS properties for colors

38 Web 2.0 Programming 38 © Tongji University, Computer Science and Technology. Specifying colors RGB codes: red, green, and blue values from 0 (none) to 255 (full) hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)

39 Web 2.0 Programming 39 © Tongji University, Computer Science and Technology. CSS properties for fonts

40 Web 2.0 Programming 40 © Tongji University, Computer Science and Technology. font-family Font of Chinese Characters most of browsers only support SimSon IE can support other fonts SimHei NSimSun FangSong SimFang? KaiTiSimKai? FangSong_GB2312 _GB2312 KaiTi_GB2312 Microsoft YaHei

41 Web 2.0 Programming 41 © Tongji University, Computer Science and Technology. More about font-family multi-word font names should be enclosed in quotes can specify multiple fonts from highest to lowest priority generic font : sans-serif, monospace, monospace, cursive

42 Web 2.0 Programming 42 © Tongji University, Computer Science and Technology. font-size units: pixels (px) vs. point(pt) vs. m-size(em) vague font size: xx-small, x-small, small, medium, large, x-large, xx- large, smaller, larger percentage font sizes: 90%, 120%

43 Web 2.0 Programming 43 © Tongji University, Computer Science and Technology. font-weight,font-style either of the above can be set to normal to turn them off

44 Web 2.0 Programming 44 © Tongji University, Computer Science and Technology. Outline Basic HTML Web Standards Basic CSS Thinking…

45 Web 2.0 Programming 45 © Tongji University, Computer Science and Technology. Thinking …

46 Web 2.0 Programming 46 © Tongji University, Computer Science and Technology. Declarative Programming Imperative vs. Declarative declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow. --Lloyd, J.W., Practical Advantages of Declarative Programmingprogramming paradigm computationcontrol flow imperative programming requires an explicitly provided algorithm.algorithm Subparadigms functional programming: Scheme, Erlang, Haskell, … logic programming: Prolog domain-specific languages: SQL, CSS, HTML, XSLT, SVG, XAML, regular expressions constraint programming: often used as a complement to other paradigms

47 Web 2.0 Programming 47 © Tongji University, Computer Science and Technology. Summary HTML HTML & XHTML HTML Tags: title, meta, p, h1,..., hr, a, img, br, comments, em, strong, ul, ol, li block vs. inline character encoding CSS why? how? link, rule properties: for color, for fonts Thinking: Declarative Programming

48 Web 2.0 Programming 48 © Tongji University, Computer Science and Technology. Exercises Write a web page for yourself which contains your self-introduction, recent photos, courses selected this semester, and favorite movies your introduction should be more than one paragraph –your courses should be a ordered list –your favorite movies should be a unordered list –having a link to the course site –applying different fonts for the readability

49 Web 2.0 Programming 49 © Tongji University, Computer Science and Technology. Further Readings Chapter 1~8, Web Programming with HTML, XHTML, and CSS List of all HTML tags: List of HTML character entites: XHTML 1.1 Spec. XHTML 1.1 Elements Reference: ref.htmlhttp://www.w3.org/2007/07/xhtml-basic- ref.html W3 List of all CSS properties: W3 CSS 2.1 Specifications: Fonts of each operating systems:

50 Web 2.0 Programming 50 © Tongji University, Computer Science and Technology. Thank you!


Download ppt "Web 2.0 Programming 1 © Tongji University, Computer Science and Technology. Web Web Programming Technology 2012."

Similar presentations


Ads by Google