5 Hypertext Markup Language (HTML) 1993: Initial official proposed description of HTMLsubmitted to the IETFstandards group.1995: HTML 2 becomes an official standard language by a publication called RFC 1866.: 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
7 Comments: <!--…--> comments to document your HTML filecomments 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 Structure of XHTML page the header describes the page and the body contains the page’s contentsan HTML page is saved into a file ending with extension .html
9 Page title: <title> describes the title of the Web pageplaced within the head of the pagewhen bookmarking the page,it will be displayed in the Web browser’s title bar
10 Page meta data: <meta> describe meta data of the Web pageplaced within the head of the pageChartset is import in practice, and we often use utf-8 other than English﹒ character encoding and decoding, where, when, and how?
11 Character Encodingmanipulating and representing of characters in computerchartset· 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 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 separationinline 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 Paragraph: <p>placed within the body of the page
14 Line break: <br /> forces a line break in the middle of a block element (inline)br should be immediately closed with />
15 Headings: <h1>,<h2>,…<h6> headings to separate major areas of the page (block)more heading examples
16 Semantic HTMLIf 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 Horizontal rule: <hr /> headings to separate major areas of the page (block)must immediately closed with />
18 More about HTML tagsAttributes:some tags can contain additional informationsyntax: <element attribute1="value1“ attribut2="vaule2">hell </element>example: <a href="page2.html"> page2</a>some tags don’t contain content; can be opened and closed in one tagsyntax: <element attribute1="v1" attribut2="v2" />example: <hr />example: <img src=“bunny.jpg” alt=“bunny” />
19 Links: <a> links, or “anchors”, to other pages (inline) the href attribute can specify the destination URLcan 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 Links: <a>its destination URL will be shown on the status bar when you hover a link in a browserbe descriptive!What’s principle applied here?friendlyyou are friendly to your Web page readers by making the page descriptive, which in turn let them understand easier.
21 Images: <img> displays a graphical image into the page (inline) the src attribute specifies the image’s URLXHTML also needs an alt attribute to describe the image
22 More about imagesif placed inside an anchor, the image will become a linkthe title attribute specifies an optional tooltipimages/gandalf.jpg vs. /images/gandalf.jpg
23 Phrase elements: <em>,<strong> 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 pageem vs. i, strong vs. B
24 Nesting tags Bad: tags must be correctly nested a closing tag should match the nearest opened tagthe browser may render it correctly anyway, but it is invalid in XHTML
25 Unordered list: <ul>,<li> ul represents a bulleted list of items (block) li represents a single item within the list (block)
26 More about unordered lists a list can contain other lists:
27 Ordered list: <ol> ol represents a numbered list of items (block)
29 Web standards Why use XHTML and Web standards? more rigid and structured languagemore interoperable across different web browsersmore likely that our pages will display correctly in the futurecan be interchanged with other XML data SVG (graphics), MathML, MusicML, etc.
30 XHTML versions XHTML 1.0(W3C Recommendation) HTML 4.01 with XML syntaxXHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 FramesetXHTML 1.1 (W3C Recommendation)module-based XHTMLRuby characters 北京(ㄅㄟˇㄐ一ㄥ)(běijīng)XHTML 1.2improved Semantic Web support through RDFadraft, not widely adoptedXHTML 2.0not backward compatibleonly in draft, not standard, and will be expired at the end of 2009XHTML 5part of HTML5 specification (ongoing)
31 XHTML 1.0 vs HTML 4.01 all tags must be closed all tags must be correctly nestedall tag attributes must be enclosed in quotation marksthe & character can’t be used on its own, and use & insteadtags are case-sensitive and must be all in lowercaseattributes cannot be minimized any moreXHTML document must start with new XML declaration<?xml version="1.0" encoding="UTF-8"?>different DOCTYPE declaration<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” "the <html> tag requires an xmln sattribute
32 W3C XHTML Validator validator.w3.org check your HTML code to make sure it follows the official XHTML syntaxmore picky than the browser, which may render bad XHTML correctly
34 The bad way to produce styles tags such as b, i, u, and font are disabled in strict XHTMLWhy it is bad?
35 Cascading Style Sheets (CSS): <link> CSS describes the appearance and layoutcan be embedded in HTML or placed into separate .css file (preferred)
36 Basic CSS rule syntax comments : /* …. */ one or more rules are consisted in a CSS fileeach rule starts with a selector that specifies an HTML element(s) and then applies style properties to thema selector of * selects all elements
40 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 More about font-family multi-word font names should be enclosed in quotescan specify multiple fonts from highest to lowest prioritygeneric font :sans-serif, monospace, monospace, cursive
42 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, largerpercentage font sizes: 90%, 120%
43 font-weight,font-style either of the above can be set to normal to turn them off
46 Declarative Programming Imperative vs. Declarativedeclarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow. --Lloyd, J.W., Practical Advantages of Declarative Programmingimperative programming requires an explicitly provided algorithm.Subparadigmsfunctional programming: Scheme, Erlang, Haskell, …logic programming: Prologdomain-specific languages: SQL, CSS, HTML, XSLT, SVG, XAML, regular expressionsconstraint programming: often used as a complement to other paradigms
47 Summary HTML CSS Thinking: HTML & XHTML HTML Tags: title, meta, p, h1, ..., hr, a, img, br, comments, em, strong, ul, ol, liblock vs. inlinecharacter encodingCSSwhy? how?link, ruleproperties: for color, for fontsThinking:Declarative Programming
48 ExercisesWrite 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 paragraphyour courses should be a ordered listyour favorite movies should be a unordered listhaving a link to the course siteapplying different fonts for the readability
49 Further Readings http://en.wikipedia.org/wiki/XHTML Chapter 1~8, Web Programming with HTML, XHTML, and CSSList of all HTML tags:List of HTML character entites:XHTML 1.1 Spec.XHTML 1.1 Elements Reference: ref.htmlW3 List of all CSS properties:W3 CSS 2.1 Specifications:Fonts of each operating systems: